History: Update managed user history page

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 ee8ac033f1f9a5b92c811c935d2f0105fd45bce5..d0c4e4014f64090ed3ee25c68467405566077301 100644
--- a/chrome/browser/resources/history/history.css
+++ b/chrome/browser/resources/history/history.css
@@ -6,6 +6,10 @@ html[dir='rtl'] body.uber-frame > .page {
   -webkit-margin-end: 0;
 }
 
+body.uber-frame > .page.big-topbar-page {
+  padding-top: 78px;
+}
+
 #top-container {
   margin-top: 16px;
   overflow: auto;
@@ -51,6 +55,8 @@ html[dir='rtl'] #notification-bar.alone {
 }
 
 #filter-controls {
+  margin-bottom: 4px;
+  margin-top: 4px;
   overflow: auto;
 }
 
@@ -88,18 +94,90 @@ html[dir='rtl'] #range-next {
   opacity: 0.4;
 }
 
+#range-today {
+  margin-right: 10px;
+}
+
+#range-today,
+#range-previous,
+#range-next {
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+#range-next {
+  border-bottom-left-radius: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.25);
+  border-top-left-radius: 0;
+  margin-left: -1px;
+}
+
+#range-previous {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  margin-right: 0;
+}
+
 #display-filter-controls {
   float: right;
 }
 
-#display-filter-controls > * {
-  -webkit-margin-start: 8px;
+.display-filter-button {
+  float: left;
 }
 
-#display-filter-controls > *:not(:last-child) {
-  -webkit-border-end: 1px solid rgb(151, 156, 160);
-  -webkit-margin-start: 0;
-  padding: 0 6px 0 6px;
+#display-filter-controls label input[type='radio'] {
+  display: none;
+}
+
+#display-filter-controls label span {
+  -webkit-align-items: flex-start;
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+  background-color: buttonface;
+  background-image: -webkit-linear-gradient(rgb(237, 237, 237),
+                                            rgb(237, 237, 237) 38%,
+                                            rgb(222, 222, 222));
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+              inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  box-sizing: border-box;
+  color: rgb(68, 68, 68);
+  cursor: default;
+  display: inline-block;
+  letter-spacing: normal;
+  line-height: 2em;
+  margin-left: -1px;
+  margin-right: -1px;
+  min-height: 2em;
+  min-width: 4em;
+  text-align: center;
+  text-indent: 0;
+  text-shadow: 0 1px 0 rgb(240, 240, 240);
+  text-transform: none;
+  vertical-align: middle;
+  word-spacing: normal;
+}
+
+#display-filter-controls label span.first-button-component {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  margin-left: 0;
+}
+
+#display-filter-controls label span.last-button-component {
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  margin-right: 0;
+}
+
+#display-filter-controls input:checked ~ span {
+  background-image: -webkit-linear-gradient(rgb(185, 185, 185),
+                                            rgb(216, 216, 216) 38%,
+                                            rgb(167, 167, 167));
+  border-left-color: rgb(173, 173, 173);
+  border-right-color: rgb(173, 173, 173);
 }
 
 #results-display {
@@ -134,6 +212,10 @@ html[dir='rtl'] #range-next {
   width: 45px;
 }
 
+.no-checkboxes .gap {
+  width: 25px;
+}
+
 .entry-box,
 .site-domain-wrapper {
   -webkit-align-items: center;
@@ -205,7 +287,6 @@ h2.timeframe {
   display: none;
 }
 
-
 html[dir='rtl'] .number-visits {
   /* This element contains parentheses, which without the unicode-bidi: embed
    * directive would show up incorrectly (e.g. '(www.google.com (5'). Using
@@ -232,6 +313,11 @@ html[dir='rtl'] .site-domain {
   background-position-x: right;
 }
 
+.no-checkboxes .entry .time {
+  min-width: 68px;
+  width: 68px;
+}
+
 .entry .time {
   color: rgb(151, 156, 160);
   min-width: 90px;
@@ -247,6 +333,12 @@ html[dir='rtl'] .site-domain {
   width: 110px;
 }
 
+.no-checkboxes.search-results .time,
+.no-checkboxes.month-results .time {
+  min-width: 90px;
+  width: 90px;
+}
+
 .entry input[type='checkbox'] {
   -webkit-margin-end: 6px;
   -webkit-margin-start: 4px;
@@ -274,9 +366,7 @@ html[dir='rtl'] .site-domain {
 }
 
 .filter-status {
-  display: -webkit-flex;
-  -webkit-flex: 1 0 auto;
-  -webkit-justify-content: flex-end;
+  -webkit-margin-start: 10px;
 }
 
 .filter-status > div {
@@ -308,8 +398,8 @@ html[dir='rtl'] .site-domain {
 }
 
 .filter-blocked {
-  border: 1px solid rgb(211, 0, 0);
-  background-color: rgb(255, 147, 105);
+  border: 1px solid rgb(207, 207, 207);
+  background-color: rgb(231, 231, 231);
   color: rgb(54, 54, 54);
 }
 
@@ -458,7 +548,6 @@ body:not(.has-results) #results-pagination {
   float: right;
 }
 
-
 html[dir='rtl'] #older-button {
   float: left;
 }