History: Reduce visual importance of the domain in entries.

Make the domain gray, and move it to the right of the title so that
all titles are left aligned. Also get rid of the fade-in when entries
are hovered, because it makes the page feel laggy.

BUG=105425
TEST=Manual test of functionality on chrome://history.


Review URL: http://codereview.chromium.org/8658006

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@112679 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 239 insertions, 231 deletions

diff --git a/chrome/browser/resources/history.css b/chrome/browser/resources/history.css
new file mode 100644
index 0000000..cf80899
--- /dev/null
+++ b/chrome/browser/resources/history.css
@@ -0,0 +1,219 @@
+/* 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.
+ */
+
+#results-separator {
+  border-top: 1px solid rgb(156, 194, 239);
+  background-color: rgb(235, 239, 249);
+  font-weight: bold;
+  padding: 3px;
+  margin-bottom: -8px;
+  margin-top: 12px;
+}
+
+#results-separator table {
+  width: 100%;
+}
+
+#results-summary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 50%;
+}
+
+#editing-controls button {
+  margin: 18px 0 -8px 0;
+}
+
+#results-display {
+  margin: 16px 0 0 0;
+  max-width: 740px;
+}
+
+.day {
+  color: rgb(106, 106, 106);
+  font-size: 13px;
+  font-weight: bold;
+  margin: 0 0 4px 0;
+  text-transform: uppercase;
+}
+
+.edit-button {
+  -webkit-appearance: none;
+  background: none;
+  border: 0;
+  color: blue; /* -webkit-link makes it purple :'( */
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  text-decoration: underline;
+  padding: 0px 9px;
+}
+
+.gap,
+.entry,
+.no-entries {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.gap {
+  -webkit-border-end: 1px solid rgb(221, 221, 221);
+  height: 14px;
+  width: 35px;
+}
+
+.entry {
+  overflow: auto; /* Make sure it's at least as large as its children. */
+}
+
+.entry-box {
+  -webkit-box-orient: horizontal;
+  cursor: default;
+  display: -webkit-box;
+  float: left;  /* Box will shrink to fit its content. */
+  line-height: 1.6em;
+
+  /* The box should be no bigger than its parent. */
+  max-width: 100%;
+
+  overflow: hidden;
+}
+
+html[dir=rtl] .entry-box {
+  float: right; /* To make the box shrink to fit its content. */
+}
+
+.search-results, .day-results {
+  margin: 0 0 24px 0;
+  padding: 0;
+}
+
+.snippet {
+  -webkit-margin-start: 90px; /* Align it with .domain. */
+  clear: both;
+  font-size: 12px;
+  line-height: 1.6em;
+  margin-bottom: 12px;
+}
+
+.entry .domain {
+  color: rgb(154, 154, 154);
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.drop-down {
+  -webkit-margin-end: 4px;
+  background: white -webkit-canvas(drop-down-arrow) no-repeat center center;
+  border: 1px solid rgb(182, 212, 252);
+  border-radius: 2px;
+  height: 13px;
+  position: relative;
+  top: 2px;
+  width: 13px;
+}
+
+.drop-down:hover {
+  background-image: -webkit-canvas(drop-down-arrow-hover);
+  border-color: rgb(106, 134, 222);
+}
+
+.drop-down[menu-shown], .drop-down:focus {
+  background-color: rgb(106, 134, 222);
+  background-image: -webkit-canvas(drop-down-arrow-active);
+  border-color: rgb(106, 134, 222);
+}
+
+html[dir='rtl'] .entry .title {
+  /* Put the favicon on the right. */
+  background-position-x: right;
+}
+
+.entry .time {
+  color: #9a9a9a;
+  width: 90px;
+}
+
+.entry input[type=checkbox] {
+  -webkit-margin-end: 6px;
+  -webkit-margin-start: 4px;
+  height: 13px;
+  line-height: 12px;
+  text-indent: -1px;
+  top: 2px;
+  width: 14px;
+}
+
+/* Checkboxes are shown when checked or focused, or when the entry is hovered.
+   Fade in on focus, but not on hover, because it makes the UI feel laggy. */
+.entry input[type=checkbox]:not(:checked) {
+  opacity: 0;
+}
+
+.entry-box:hover input[type=checkbox],
+.entry-box input[type=checkbox]:focus {
+  opacity: 1;
+}
+
+.entry-box input[type=checkbox]:focus {
+  -webkit-transition: opacity 150ms;
+}
+
+.entry-box {
+  background-color: none;
+}
+
+.entry-box:hover, .entry-box.contains-focus {
+  background-color: rgb(228, 236, 247);
+  border-radius: 2px;
+}
+
+.entry .title {
+  -webkit-box-flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.entry .title {
+  /* Make room for the favicon. */
+  -webkit-padding-start: 20px;
+
+  /* Control the favicon appearance. */
+  background-repeat: no-repeat;
+  background-position-y: center;
+}
+
+.entry .starred {
+  -webkit-margin-start: 4px;
+  background: url('shared/images/star_small.png') no-repeat;
+  display: inline-block;
+  height: 11px;
+  width: 11px;
+}
+
+.entry .title > a {
+  color: rgb(17, 17, 204);
+  text-decoration: none;
+}
+
+.entry .title > a.to-be-removed {
+  text-decoration: line-through;
+}
+
+.entry .title > a:hover {
+  text-decoration: underline;
+}
+
+/* Since all history links are visited, we can make them blue. */
+.entry .title > a:visted {
+  color: rgb(17, 17, 204);
+}
+
+.fade-out {
+  -webkit-transition: opacity 200ms;
+  opacity: 0;
+}
diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index b156868..e3ceaad 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -24,222 +24,7 @@
 <script src="chrome://history/strings.js"></script>
 
 <link rel="stylesheet" href="old_webui.css">
-
-<style>
-#results-separator {
-  border-top: 1px solid #9cc2ef;
-  background-color: #ebeff9;
-  font-weight: bold;
-  padding: 3px;
-  margin-bottom: -8px;
-  margin-top: 12px;
-}
-
-#results-separator table {
-  width: 100%;
-}
-
-#results-summary {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 50%;
-}
-
-#editing-controls button {
-  margin: 18px 0 -8px 0;
-}
-
-#results-display {
-  margin: 16px 0 0 0;
-  max-width: 740px;
-}
-
-.day {
-  color: #6a6a6a;
-  font-size: 13px;
-  font-weight: bold;
-  margin: 0 0 4px 0;
-  text-transform: uppercase;
-}
-
-.edit-button {
-  -webkit-appearance: none;
-  background: none;
-  border: 0;
-  color: blue; /* -webkit-link makes it purple :'( */
-  cursor: pointer;
-  display: inline-block;
-  font: inherit;
-  text-decoration: underline;
-  padding: 0px 9px;
-}
-
-.gap,
-.entry,
-.no-entries {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.gap {
-  -webkit-border-end: 1px solid #ddd;
-  height: 14px;
-  width: 35px;
-}
-
-.entry {
-  overflow: auto; /* Make sure it's at least as large as its children. */
-}
-
-.entry-box {
-  -webkit-box-orient: horizontal;
-  cursor: default;
-  display: -webkit-box;
-  float: left;
-  line-height: 1.6em;
-/* Don't allow it to be bigger than its parent but make the box shrink to fit
- * its content. */
-  max-width: 100%;
-  overflow: hidden;
-}
-
-html[dir=rtl] .entry-box {
-  float: right; /* To make the box shrink to fit its content. */
-}
-
-.entry-box > label > * {
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.search-results, .day-results {
-  margin: 0 0 24px 0;
-  padding: 0;
-}
-
-.snippet {
-  -webkit-margin-start: 90px; /* Align it with .domain. */
-  clear: both;
-  font-size: 12px;
-  line-height: 1.6em;
-  margin-bottom: 12px;
-}
-
-.entry .domain {
-  -webkit-padding-end: 8px;
-  -webkit-padding-start: 20px;
-  background-position-y: center;
-  background-repeat: no-repeat;
-  color: #282;
-}
-
-.drop-down {
-  -webkit-margin-end: 4px;
-  -webkit-margin-start: 8px;
-  background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
-  border: 1px solid hsl(214, 91%, 85%);
-  border-radius: 2px;
-  height: 13px;
-  position: relative;
-  top: 2px;
-  width: 13px;
-}
-
-.drop-down:hover {
-  background-image: -webkit-canvas(drop-down-arrow-hover);
-  border-color: #6A86DE;
-}
-
-.drop-down[menu-shown], .drop-down:focus {
-  background-color: #6A86DE;
-  background-image: -webkit-canvas(drop-down-arrow-active);
-  border-color: #6A86DE;
-}
-
-html[dir='rtl'] .entry .domain {
-  background-position-x: right;
-}
-
-.entry .time {
-  color:#9a9a9a;
-  width: 90px;
-}
-
-.entry input[type=checkbox] {
-  -webkit-margin-end: 6px;
-  -webkit-margin-start: 4px;
-  height: 13px;
-  line-height: 12px;
-  text-indent: -1px;
-  top: 2px;
-  width: 14px;
-}
-
-/* Checkboxes are shown when checked or focused, or when the entry is hovered.
-   Fade in on focus, but not on hover, because it makes the UI feel laggy. */
-.entry input[type=checkbox]:not(:checked) {
-  -webkit-transition: opacity 150ms;
-  opacity: 0;
-}
-
-.entry-box:hover input[type=checkbox],
-.entry-box input[type=checkbox]:focus {
-  opacity: 1;
-}
-
-.entry-box input[type=checkbox]:focus {
-  -webkit-transition: opacity 150ms;
-}
-
-.entry-box {
-  -webkit-transition: background-color 150ms;
-  background-color: none;
-}
-
-.entry-box:hover, .entry-box.contains-focus {
-  background-color: #e4ecf7;
-  border-radius: 2px;
-}
-.entry .title {
-  -webkit-box-flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.entry .title > .starred {
-  -webkit-margin-start: 4px;
-  background: url('shared/images/star_small.png');
-  background-repeat: no-repeat;
-  display: inline-block;
-  height: 11px;
-  width: 11px;
-}
-
-.entry .title > a {
-  color: #11c;
-  text-decoration: none;
-}
-
-.entry .title > a.to-be-removed {
-  text-decoration: line-through;
-}
-
-.entry .title > a:hover {
-  text-decoration: underline;
-}
-
-/* Since all history links are visited, we can make them blue. */
-.entry .title > a:visted {
-  color: #11c;
-}
-
-.fade-out {
-  -webkit-transition: opacity 200ms;
-  opacity: 0;
-}
-</style>
+<link rel="stylesheet" href="history.css">
 </head>
 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 <div class="header">
diff --git a/chrome/browser/resources/history.js b/chrome/browser/resources/history.js
index 885619e..688ee79 100644
--- a/chrome/browser/resources/history.js
+++ b/chrome/browser/resources/history.js
@@ -21,10 +21,17 @@ function createElementWithClassName(type, className) {
 
 // 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;
@@ -103,7 +110,7 @@ function Page(result, continued, model, id) {
 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');
@@ -130,24 +137,19 @@ Page.prototype.getResultDOM = function(searchResultFlag) {
   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.
@@ -226,6 +228,9 @@ Page.prototype.addHighlightedText_ = function(node, content, highlightText) {
  */
 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_;
@@ -237,10 +242,8 @@ Page.prototype.getTitleDOM_ = function() {
   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;
 };
@@ -984,7 +987,7 @@ function removeItems() {
       urls = [];
       date = cbDate;
     }
-    var link = checkbox.parentNode.parentNode.parentNode.querySelector('a');
+    var link = findAncestorWithClass(checkbox, 'entry-box').querySelector('a');
     checkbox.disabled = true;
     link.classList.add('to-be-removed');
     disabledItems.push(checkbox);
@@ -1006,7 +1009,8 @@ function removeItems() {
     // 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 = findAncestorWithClass(
+          checkbox, 'entry-box').querySelector('a');
       checkbox.disabled = false;
       link.classList.remove('to-be-removed');
     }