History: Add option to group visits by domain

chrome/browser/resources/history/history.css

Index: chrome/browser/resources/history/history.css
diff --git a/chrome/browser/resources/history/history.css b/chrome/browser/resources/history/history.css
index e8ec18e77e7a0bb8b36838e3e3c80b737fbb149a..8129a379cda0563e3bb5c5db98b93f565f29bff4 100644
--- a/chrome/browser/resources/history/history.css
+++ b/chrome/browser/resources/history/history.css
@@ -24,10 +24,23 @@ body:not(.uber-frame) {
   top: 3px;
 }
 
+#editing-controls,
+#filter-controls {

[Patrick Dubroy, 2013/01/18 11:43:26]

Can you put #results-display here too? It's currently hanging out too far.

To get everything to line up, you'll need to remove the margins on the
menu-buttons and the "Search history" button too.

[Sergiu, 2013/01/21 08:56:15]

Done.

+  max-width: 718px;
+}
+
 #editing-controls button:first-of-type {
   -webkit-margin-start: 0;
 }
 
+#filter-controls div {
+  display: inline-block;
+}
+
+#display-filter-controls {
+  float: right;

[Patrick Dubroy, 2013/01/18 11:43:26]

I think we should eventually put all of the controls at the top of the page into
a flexbox. But, for the time being, I'm ok with adding this as a float.

[Sergiu, 2013/01/21 08:56:15]

The UI is definitely going to have some work done on it, in managed mode we'll
also have some extra stuff that appears in the history page so we'll have to see
how that degrades well for non-managed users while not having two completely
different views.

+}
+
 #results-display {
   margin: 16px 0 0 0;
   max-width: 740px;
@@ -45,9 +58,10 @@ body:not(.uber-frame) {
   text-decoration: underline;
 }
 
-.gap,
 .entry,
-.no-entries {
+.gap,
+.no-entries,
+.site-name {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -64,7 +78,9 @@ body:not(.uber-frame) {
   overflow: auto; /* Make sure it's at least as large as its children. */
 }
 
-.entry-box {
+.entry-box,
+.site-domain-wrapper {

[Patrick Dubroy, 2013/01/18 11:43:26]

Why not .site-name-wrapper? Is there a distinction between domain and site?

[Sergiu, 2013/01/21 08:56:15]

I think you meant between domain and name. Out of these site-name is a pretty
bad description, I've changed it to site-entry to make it clearer. The
.site-domain the domain of the .site-entry .

+  /* So that everything stacks horizontally. */

[Patrick Dubroy, 2013/01/18 11:43:26]

Get rid of this comment.

[Sergiu, 2013/01/21 08:56:15]

Done.

   -webkit-box-orient: horizontal;
   cursor: default;
   display: -webkit-box;
@@ -78,6 +94,15 @@ body:not(.uber-frame) {
   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;

[Patrick Dubroy, 2013/01/18 11:43:26]

Is this necessary, since it's already on the .site-domain-wrapper?

[Sergiu, 2013/01/21 08:56:15]

No, I see now that it is enough if it applies both to .site-domain-wrapper and
.entry-box. Removed

+}
+
 html[dir=rtl] .entry-box {
   float: right; /* To make the box shrink to fit its content. */
 }
@@ -92,6 +117,18 @@ html[dir=rtl] .entry-box {
   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;
@@ -111,6 +148,14 @@ html[dir=rtl] .entry-box {
   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;
@@ -192,13 +237,32 @@ html[dir='rtl'] .entry .title {
   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 {