History: Add option to group visits by domain

chrome/browser/resources/history/history.css

 /* Copyright (c) 2012 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. */
 
 body:not(.uber-frame) {
   color: rgb(48, 57, 66);
   margin: 0 8px 0 8px;
 }
 
 #editing-controls,
 #loading-spinner {
   margin-top: 16px;
 <if expr="not pp_ifdef('android')">
   white-space: nowrap;
 </if>
 }
 
 #loading-spinner[hidden] {
   display: inline-block;
 }
 
 #spinner {
   position: relative;
   top: 3px;
 }
 
+#editing-controls,
+#filter-controls {
+  max-width: 718px;
+}
+
 #editing-controls button:first-of-type {
   -webkit-margin-start: 0;
 }
 
+#filter-controls div {
+  display: inline-block;
+}
+
+#display-filter-controls {
+  float: right;
+}
+
 #results-display {
   margin: 16px 0 0 0;
   max-width: 740px;
 }
 
 .edit-button {
   -webkit-appearance: none;
   background: none;
   border: 0;
   color: blue; /* -webkit-link makes it purple :'( */
   cursor: pointer;
   display: inline-block;
   font: inherit;
   padding: 0 9px;
   text-decoration: underline;
 }
 
+.entry,
 .gap,
-.entry,
-.no-entries {
+.no-entries,
+.site-name {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .gap {
   -webkit-border-end: 1px solid rgb(192, 195, 198);
   height: 14px;
   margin: 1px 0;
   width: 45px;
 }
 
 .entry {
   overflow: auto; /* Make sure it's at least as large as its children. */
 }
 
-.entry-box {
+.entry-box,
+.site-domain-wrapper {
+  /* So that everything stacks horizontally. */
   -webkit-box-orient: horizontal;
   cursor: default;
   display: -webkit-box;
   float: left;  /* Box will shrink to fit its content. */
   /* An odd line-height ensures a consistent baseline on all platforms. */
   line-height: 1.75em;
   margin-bottom: 6px;
   /* The box should be no bigger than its parent. */
   max-width: 100%;
   overflow: hidden;
   padding-bottom: 1px;
 }
 
+.site-domain-wrapper {
+  cursor: pointer;
+}
+
+.site-name {
+  /* An odd line-height ensures a consistent baseline on all platforms. */
+  line-height: 1.75em;
+}
+
 html[dir=rtl] .entry-box {
   float: right; /* To make the box shrink to fit its content. */
 }
 
 .day {
   white-space: nowrap;
 }
 
 .search-results,
 .day-results {
   margin: 0 0 24px 0;
   padding: 0;
 }
 
+.site-results {
+  -webkit-transition: height 350ms ease-in-out;
+  clear: left;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+h2.timeframe {
+  font-size: 1.5em;
+}
+
 .snippet {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   -webkit-margin-start: 110px;
   clear: both;
   color: rgb(34, 34, 34);
   display: -webkit-box;
   line-height: 1.6em;
   margin-bottom: 1em;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .entry .domain {
   color: rgb(151, 156, 160);
   padding-left: 6px;
   padding-right: 6px;
 }
 
+.site-results .domain {
+  display: none;
+}
+
+.number-visits {
+  color: rgb(151, 156, 160);
+}
+
 .drop-down {
   -webkit-margin-end: 5px;
   background: white -webkit-canvas(drop-down-arrow) no-repeat center 4px;
   border: 1px solid rgb(192, 195, 198);
   border-radius: 2px;
   height: 12px;
   padding: 0;
   position: relative;
   top: 2px;
   width: 12px;
@@ skipping 61 matching lines @@
   border-radius: 2px;
 }
 
 .entry .title {
   -webkit-box-flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.entry .title {
+.day-results > .entry .title,
+.search-results > .entry .title,
+.site-domain {
   /* Make room for the favicon. */
   -webkit-padding-start: 20px;
 
   /* Control the favicon appearance. */
   background-position-y: 3px;
   background-repeat: no-repeat;
+  background-size: 16px;
+}
+
+.site-domain-arrow {
+  -webkit-transition: -webkit-transform 300ms linear;
+  /* Make room for the arrow and place it. */
+  background: url('../twisty_closed.png') no-repeat center center;
+  height: 21px;
+  width: 21px;
+}
+
+.site-domain-arrow.collapse {
+  -webkit-transform: rotate(0);
+}
+
+.site-domain-arrow.expand {
+  -webkit-transform: rotate(90deg);
 }
 
 .entry .starred {
   -webkit-margin-start: 4px;
   background: url('../shared/images/star_small.png') no-repeat;
   display: inline-block;
   height: 11px;
   width: 11px;
 }
 
@@ skipping 16 matching lines @@
 }
 
 .menu-button.drop-down {
   position: relative;
   top: 2px;
 }
 
 #action-menu > :not(hr) {
   line-height: 29px;
 }