History: Reduce visual importance of the domain in entries.

chrome/browser/resources/history.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 ///////////////////////////////////////////////////////////////////////////////
 // Globals:
 var RESULTS_PER_PAGE = 150;
 var MAX_SEARCH_DEPTH_MONTHS = 18;
 
 // Amount of time between pageviews that we consider a 'break' in browsing,
 // measured in milliseconds.
 var BROWSING_GAP_TIME = 15 * 60 * 1000;
 
 function $(o) {return document.getElementById(o);}
 
 function createElementWithClassName(type, className) {
   var elm = document.createElement(type);
   elm.className = className;
   return elm;
 }
 
 // Escapes a URI as appropriate for CSS.
 function encodeURIForCSS(uri) {
-  // CSS uris need to have '(' and ')' escaped.
+  // CSS URIs need to have '(' and ')' escaped.
   return uri.replace(/\(/g, "\\(").replace(/\)/g, "\\)");
 }
 
+function findAncestorWithClass(node, className) {
+  while ((node = node.parentNode)) {
+    if (node.classList.contains(className)) return node;
+  }
+  return null;
+}
+
 // TODO(glen): Get rid of these global references, replace with a controller
 //     or just make the classes own more of the page.
 var historyModel;
 var historyView;
 var localStrings;
 var pageState;
 var deleteQueue = [];
 var selectionAnchor = -1;
 var activePage = null;
 
@@ skipping 58 matching lines @@
 
 // Page, Public: --------------------------------------------------------------
 /**
  * Returns a dom structure for a browse page result or a search page result.
  * @param {boolean} Flag to indicate if result is a search result.
  * @return {Element} The dom structure.
  */
 Page.prototype.getResultDOM = function(searchResultFlag) {
   var node = createElementWithClassName('li', 'entry');
   var time = createElementWithClassName('div', 'time');
-  var entryBox = createElementWithClassName('div', 'entry-box');
+  var entryBox = createElementWithClassName('label', 'entry-box');
   var domain = createElementWithClassName('div', 'domain');
 
   var dropDown = createElementWithClassName('button', 'drop-down');
   dropDown.value = 'Open action menu';
   dropDown.title = localStrings.getString('actionMenuDescription');
   dropDown.setAttribute('menu', '#action-menu');
   cr.ui.decorate(dropDown, MenuButton);
 
   // Checkbox is always created, but only visible on hover & when checked.
   var checkbox = document.createElement('input');
   checkbox.type = 'checkbox';
   checkbox.id = 'checkbox-' + this.id_;
   checkbox.time = this.time.getTime();
   checkbox.addEventListener('click', checkboxClicked);
   time.appendChild(checkbox);
 
   // Keep track of the drop down that triggered the menu, so we know
   // which element to apply the command to.
   // TODO(dubroy): Ideally we'd use 'activate', but MenuButton swallows it.
   var self = this;
   var setActivePage = function(e) {
     activePage = self;
   };
   dropDown.addEventListener('mousedown', setActivePage);
   dropDown.addEventListener('focus', setActivePage);
 
-  domain.style.backgroundImage =
-    'url(chrome://favicon/' + encodeURIForCSS(this.url_) + ')';
   domain.textContent = this.domain_;
 
   // Clicking anywhere in the entryBox will check/uncheck the checkbox.
+  entryBox.setAttribute('for', checkbox.id);
   entryBox.addEventListener('mousedown', entryBoxMousedown, false);
 
   // Prevent clicks on the drop down from affecting the checkbox.
   dropDown.addEventListener('click', function(e) { e.preventDefault(); });
 
-  // A label around the parts that should be clicked to activate the check box.
-  var label = document.createElement('label');
-  label.appendChild(time);
-  label.appendChild(domain);
-
   // We use a wrapper div so that the entry contents will be shinkwrapped.
-  entryBox.appendChild(label);
+  entryBox.appendChild(time);
   entryBox.appendChild(this.getTitleDOM_());
+  entryBox.appendChild(domain);
   entryBox.appendChild(dropDown);
 
   // Let the entryBox be styled appropriately when it contains keyboard focus.
   entryBox.addEventListener('focus', function() {
     this.classList.add('contains-focus');
   }, true);
   entryBox.addEventListener('blur', function() {
     this.classList.remove('contains-focus');
   }, true);
 
@@ skipping 58 matching lines @@
   }
   if (i < content.length)
     node.appendChild(document.createTextNode(content.slice(i)));
 };
 
 /**
  * @return {DOMObject} DOM representation for the title block.
  */
 Page.prototype.getTitleDOM_ = function() {
   var node = createElementWithClassName('div', 'title');
+  node.style.backgroundImage =
+      'url(chrome://favicon/' + encodeURIForCSS(this.url_) + ')';
+
   var link = document.createElement('a');
   link.href = this.url_;
   link.id = "id-" + this.id_;
 
   // Add a tooltip, since it might be ellipsized.
   // TODO(dubroy): Find a way to show the tooltip only when necessary.
   link.title = this.title_;
 
   this.addHighlightedText_(link, this.title_, this.model_.getSearchText());
   node.appendChild(link);
 
-  if (this.starred_) {
-    node.className += ' starred';
+  if (this.starred_)
     node.appendChild(createElementWithClassName('div', 'starred'));
-  }
 
   return node;
 };
 
 /**
  * Launch a search for more history entries from the same domain.
  */
 Page.prototype.showMoreFromSite_ = function() {
   setSearch(this.domain_);
 };
@@ skipping 723 matching lines @@
     var cbDate = new Date(checkbox.time);
     if (date.getFullYear() != cbDate.getFullYear() ||
         date.getMonth() != cbDate.getMonth() ||
         date.getDate() != cbDate.getDate()) {
       if (urls.length > 0) {
         queue.push([date, urls]);
       }
       urls = [];
       date = cbDate;
     }
-    var link = checkbox.parentNode.parentNode.parentNode.querySelector('a');
+    var link = findAncestorWithClass(checkbox, 'entry-box').querySelector('a');

[Evan Stade, 2011/12/01 19:43:32]

thumbsup

     checkbox.disabled = true;
     link.classList.add('to-be-removed');
     disabledItems.push(checkbox);
     urls.push(link.href);
   }
   if (urls.length > 0) {
     queue.push([date, urls]);
   }
   if (checked.length > 0 && confirm(localStrings.getString('deletewarning'))) {
     for (var i = 0; i < queue.length; i++) {
       // Reload the page when the final entry has been deleted.
       var callback = i == 0 ? reloadHistory : null;
 
       queueURLsForDeletion(queue[i][0], queue[i][1], callback);
     }
     deleteNextInQueue();
   } else {
     // If the remove is cancelled, return the checkboxes to their
     // enabled, non-line-through state.
     for (var i = 0; i < disabledItems.length; i++) {
       var checkbox = disabledItems[i];
-      var link = checkbox.parentNode.parentNode.parentNode.querySelector('a');
+      var link = findAncenstoreWithClass(
+          checkbox, 'entry-box').querySelector('a');
       checkbox.disabled = false;
       link.classList.remove('to-be-removed');
     }
   }
   return false;
 }
 
 /**
  * Toggle state of checkbox and handle Shift modifier.
  */
@@ skipping 107 matching lines @@
     historyView.reload();
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);
 
 // This event lets us enable and disable menu items before the menu is shown.
 document.addEventListener('canExecute', function(e) {
   e.canExecute = true;
 });