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..bb1f0ad55ddff22968a443fd55827514bdb3c7f0 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;
 }
 
@@ -74,7 +80,7 @@ html[dir='rtl'] #editing-controls {
 html[dir='rtl'] #range-today,
 html[dir='rtl'] #range-previous,
 html[dir='rtl'] #range-next {
-  float: left;
+  float: right;

[James Hawkins, 2013/06/10 01:37:11]

Hmm, I don't see a corresponding float: left for these elements.

[Sergiu, 2013/06/10 08:41:25]

I've put it explicitly now.

 }
 
 #range-next img,
@@ -88,18 +94,111 @@ html[dir='rtl'] #range-next {
   opacity: 0.4;
 }
 
+html[dir='rtl'] #range-next img,
+#range-previous img {
+  -webkit-transform: scalex(-1);
+}
+
+html[dir='rtl'] #range-previous img {
+  -webkit-transform: scaleX(1);
+}
+
+#range-today {
+  -webkit-margin-end: 10px;
+}
+
+#range-today,
+#range-previous,
+#range-next {
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+html[dir='rtl'] #range-previous,
+html[dir='ltr'] #range-next {

[James Hawkins, 2013/06/10 01:37:11]

ltr should never be specified.  It is the default.

[Sergiu, 2013/06/10 08:41:25]

In this case I have two buttons that have to be flipped in RTL. so if I don't
specify dir='ltr' that then both #range-previous and html[dir='rtl']
#range-previous would apply when RTL. I've improved it by using more -webkit
rules.

+  border-bottom-left-radius: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.25);

[James Hawkins, 2013/06/10 01:37:11]

Only the left/right properties should be under the 'rtl' selector.

[Sergiu, 2013/06/10 08:41:25]

Updated (but they contained only *-left rules before as well).

+  border-top-left-radius: 0;
+  margin-left: -1px;
+}
+
+html[dir='rtl'] #range-next,
+html[dir='ltr'] #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;
+html[dir='rtl'] #display-filter-controls {
+  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-button {
+  float: left;
+}
+
+html[dir='rtl'] .display-filter-button {
+  float: right;
+}
+
+#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;
+}
+
+html[dir='rtl'] #display-filter-controls label span.last-button-component,
+#display-filter-controls label span.first-button-component {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  margin-left: 0;
+}
+
+html[dir='rtl'] #display-filter-controls label span.first-button-component,
+#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 +233,10 @@ html[dir='rtl'] #range-next {
   width: 45px;
 }
 
+.no-checkboxes .gap {
+  width: 25px;
+}
+
 .entry-box,
 .site-domain-wrapper {
   -webkit-align-items: center;
@@ -205,7 +308,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 +334,11 @@ html[dir='rtl'] .site-domain {
   background-position-x: right;
 }
 
+.no-checkboxes .entry .time {
+  min-width: 68px;
+  width: 68px;

[James Hawkins, 2013/06/10 01:37:11]

Setting width after min-width does nothing; remove it.

[Sergiu, 2013/06/10 08:41:25]

Done.

+}
+
 .entry .time {
   color: rgb(151, 156, 160);
   min-width: 90px;
@@ -247,6 +354,12 @@ html[dir='rtl'] .site-domain {
   width: 110px;
 }
 
+.no-checkboxes.search-results .time,
+.no-checkboxes.month-results .time {
+  min-width: 90px;
+  width: 90px;

[James Hawkins, 2013/06/10 01:37:11]

Same as above.

[Sergiu, 2013/06/10 08:41:25]

Done.

+}
+
 .entry input[type='checkbox'] {
   -webkit-margin-end: 6px;
   -webkit-margin-start: 4px;
@@ -274,9 +387,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 +419,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);
 }
 
@@ -331,10 +442,6 @@ html[dir='rtl'] .site-domain {
 }
 </if>
 
-#range-previous img {
-  -webkit-transform: scaleX(-1);
-}
-
 .entry-box {
   background-color: none;
 }
@@ -349,7 +456,7 @@ html[dir='rtl'] .site-domain {
   display: -webkit-flex;
 }
 
-.entry .title-and-domain {
+.entry .visit-entry {
   display: -webkit-flex;
   min-width: 0;
 }
@@ -361,7 +468,7 @@ html[dir='rtl'] .site-domain {
   white-space: nowrap;
 }
 
-.entry .title-and-domain,
+.entry .visit-entry,
 .site-domain {
   /* Make room for the favicon. */
   -webkit-padding-start: 20px;
@@ -372,7 +479,7 @@ html[dir='rtl'] .site-domain {
   background-size: 16px;
 }
 
-html[dir='rtl'] .entry .title-and-domain,
+html[dir='rtl'] .entry .visit-entry,
 html[dir='rtl'] .site-domain {
   background-position-x: right;
 }
@@ -458,7 +565,6 @@ body:not(.has-results) #results-pagination {
   float: right;
 }
 
-
 html[dir='rtl'] #older-button {
   float: left;
 }