Remove old history UI, and replace with history2.

chrome/browser/resources/history.html

Index: chrome/browser/resources/history.html
diff --git a/chrome/browser/resources/history.html b/chrome/browser/resources/history.html
index cb446138014213588158df1381a3d44b783c1892..35e6da9935cea077ba3a337e1ad28eccf53ead70 100644
--- a/chrome/browser/resources/history.html
+++ b/chrome/browser/resources/history.html
@@ -4,11 +4,25 @@
 <meta charset="utf-8">
 <title i18n-content="title"></title>
 <link rel="icon" href="../../app/theme/history_favicon.png">
+
+<link rel="stylesheet" href="chrome://resources/css/menu.css">
+
+<script src="chrome://resources/js/event_tracker.js"></script>
+<script src="chrome://resources/js/cr.js"></script>
+<script src="chrome://resources/js/cr/ui.js"></script>
+<script src="chrome://resources/js/cr/ui/command.js"></script>
+<script src="chrome://resources/js/cr/ui/menu_item.js"></script>
+<script src="chrome://resources/js/cr/ui/menu.js"></script>
+<script src="chrome://resources/js/cr/ui/position_util.js"></script>
+<script src="chrome://resources/js/cr/ui/menu_button.js"></script>
+
 <script src="chrome://resources/js/local_strings.js"></script>
-<script src="chrome://resources/js/util.js"></script>
+
 <script src="chrome://history/history.js"></script>
 <script src="chrome://history/strings.js"></script>
+
 <link rel="stylesheet" href="old_webui.css">
+
 <style>
 #results-separator {
   margin-top:12px;
@@ -18,34 +32,35 @@
   padding:3px;
   margin-bottom:-8px;
 }
+
 #results-separator table {
   width: 100%;
 }
+
 #results-summary {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 50%;
 }
-#edit-button {
-  text-align: end;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: 50%;
-}
+
 #editing-controls button {
-  margin-top: 18px;
-  margin-bottom: -8px;
+  margin: 18px 0 -8px 0;
 }
+
 #results-display {
-  max-width:740px;
+  max-width: 740px;
+  margin: 16px 0 0 0;
 }
+
 .day {
-  margin-top:18px;
-  padding:0px 3px;
-  display:inline-block;
+  color: #6a6a6a;
+  font-weight: bold;
+  margin: 0 0 4px 0;
+  text-transform: uppercase;
+  font-size: 13px;
 }
+
 .edit-button {
   display: inline;
   -webkit-appearance: none;
@@ -58,67 +73,159 @@
   display:inline-block;
   font:inherit;
 }
+
+.gap,
+.entry,
+.no-entries {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 .gap {
-  margin-left:18px;
-  width:15px;
-  border-right:1px solid #ddd;
-  height:14px;
+  width: 35px;
+  -webkit-border-end: 1px solid #ddd;
+  height: 14px;
 }
+
 .entry {
-  margin-left:18px;
-  margin-top:6px;
-  overflow:auto;
+  overflow: auto; /* Make sure it's at least as large as its children. */
+}
+
+.entry-box {
+  cursor: default;
+  line-height: 1.6em;
+
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  max-width: 100%; /* Don't allow it to be bigger than its parent... */
+  float: left;     /* ..but make the box shrink to fit its content. */
+  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 {
+  font-size: 12px;
+  line-height: 1.6em;
+  margin-bottom: 12px;
+  -webkit-margin-start: 90px; /* Align it with .domain. */
+  clear: both;
+}
+
+.entry .domain {
+  color: #282;
+  -webkit-padding-start: 20px;
+  -webkit-padding-end: 8px;
+  background-repeat: no-repeat;
+  background-position-y: center;
+}
+
+.drop-down {
+  background: #fff -webkit-canvas(drop-down-arrow) no-repeat center center;
+  border: 1px solid hsl(214, 91%, 85%);
+  border-radius: 2px;
+  width: 13px;
+  height: 13px;
+  -webkit-margin-start: 8px;
+  -webkit-margin-end: 4px;
+  position: relative;
+  top: 2px;
 }
-table.results {
-  margin-left:4px;
+
+.drop-down:hover {
+  border-color: #6A86DE;
+  background-image: -webkit-canvas(drop-down-arrow-hover);
 }
+
+.drop-down[menu-shown], .drop-down:focus {
+  border-color: #6A86DE;
+  background-color: #6A86DE;
+  background-image: -webkit-canvas(drop-down-arrow-active);
+}
+
+html[dir='rtl'] .entry .domain {
+  background-position-x: right;
+}
+
 .entry .time {
-  color:#888;
-  float:left;
-  min-width:56px;
-  -webkit-margin-end:5px;
-  padding-top:1px;
-  white-space:nowrap;
+  color:#9a9a9a;
+  width: 90px;
+}
+
+.entry input[type=checkbox] {
+  position: relative;
+  top: 1px;
+}
+
+/* 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;
+  -webkit-transition: opacity 150ms;
+}
+
+.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;
+  -webkit-transition: background-color 150ms;
 }
-html[dir='rtl'] .time {
-  float:right;
+
+.entry-box:hover, .entry-box.contains-focus {
+  background-color: #e4ecf7;
+  border-radius: 2px;
 }
 .entry .title {
-  max-width:600px;
+  -webkit-box-flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.results .time, .results .title {
-  margin-top:18px;
-}
-.title > .starred {
+
+.entry .title > .starred {
   background:url('shared/images/star_small.png');
   background-repeat:no-repeat;
   display:inline-block;
-  -webkit-margin-start:12px;
-  -webkit-margin-end:0;
+  -webkit-margin-start: 4px;
   width:11px;
   height:11px;
 }
+
 .entry .title > a {
-  box-sizing: border-box;
-  background-repeat:no-repeat;
-  background-size:16px;
-  background-position:0px 1px;
-  padding:1px 0px 4px 22px;
-  display:inline-block;
-  overflow:hidden;
-  text-overflow:ellipsis;
+  color: #11c;
+  text-decoration: none;
 }
-html[dir='rtl'] .entry .title > a {
-  background-position-x:right;
-  padding-left:0px;
-  padding-right:22px;
+
+.entry .title > a.to-be-removed {
+  text-decoration: line-through;
 }
-#results-pagination {
-  padding-top:24px;
-  -webkit-margin-start:18px;
+
+.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 {
+  opacity: 0;
+  -webkit-transition: opacity 200ms;
 }
 </style>
 </head>
@@ -127,8 +234,7 @@ html[dir='rtl'] .entry .title > a {
   <a id="history-section" href="">
     <img src="shared/images/history_section.png"
          width="67" height="67" class="logo" border="0"></a>
-  <form id="search-form" method="post" action=""
-      class="form">
+  <form id="search-form" method="post" action="" class="form">
     <input type="text" name="term" id="term">
     <input type="submit" name="submit" i18n-values="value:searchbutton">
   </form>
@@ -139,10 +245,21 @@ html[dir='rtl'] .entry .title > a {
       <tr><td id="results-summary"></td><td id="edit-button"><p></p></td></tr>
     </table>
   </div>
-  <div id="editing-controls"></div>
+  <div id="editing-controls">
+    <button id="clear-browsing-data" i18n-content="clearallhistory"></button>
+    <button id="remove-selected"
+            disabled="disabled"
+            i18n-content="removeselected"></button>
+  </div>
   <div id="results-display"></div>
   <div id="results-pagination"></div>
 </div>
+
+<menu id="action-menu">
+  <button id="more-from-site" i18n-content="moreFromSite"></button>
+  <button id="remove-page" i18n-content="removeFromHistory"></button>
+</menu>
+
 <script src="chrome://resources/js/i18n_template.js"></script>
 <script src="chrome://resources/js/i18n_process.js"></script>
 </body>