History: Update managed user history page

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. */
 
 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;
 }
 
 #editing-controls,
 #loading-spinner {
   white-space: nowrap;
 }
 
@@ skipping 25 matching lines @@
 }
 
 #filter-controls,
 #top-container,
 #results-display,
 #results-pagination {
   max-width: 718px;
 }
 
 #filter-controls {
+  margin-bottom: 4px;
+  margin-top: 4px;
   overflow: auto;
 }
 
 #editing-controls {
   -webkit-margin-end: 12px;
   float: left;
 }
 
 html[dir='rtl'] #editing-controls {
   float: right;
 }
 
 #editing-controls button:first-of-type {
   -webkit-margin-start: 0;
 }
 
 #filter-controls select {
   -webkit-margin-end: 0;
 }
 
 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,
 #range-previous img {
   position: relative;
   top: 1px;
 }
 
 #range-next:disabled img,
 #range-previous:disabled img {
   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 {
   margin: 16px 0 0 0;
 }
 
 .edit-button {
   -webkit-appearance: none;
   background: none;
   border: 0;
@@ skipping 14 matching lines @@
   padding: 0;
 }
 
 .gap {
   -webkit-border-end: 1px solid rgb(192, 195, 198);
   height: 14px;
   margin: 1px 0;
   width: 45px;
 }
 
+.no-checkboxes .gap {
+  width: 25px;
+}
+
 .entry-box,
 .site-domain-wrapper {
   -webkit-align-items: center;
   cursor: default;
   display: -webkit-flex;
   /* 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%;
@@ skipping 51 matching lines @@
   overflow: hidden;
   padding-left: 6px;
   padding-right: 6px;
   white-space: nowrap;
 }
 
 .site-results .domain {
   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
    * 'embed' makes the engine set the text in the parentheses as LTR even
    * when the layout is set to RTL, which makes using -webkit-*-start
    * impossible. So use margins and dir='rtl'.
    */
   direction: rtl;
   unicode-bidi: embed;
 }
 
 .number-visits {
   color: rgb(151, 156, 160);
 }
 
 .drop-down {
   -webkit-margin-end: 5px;
   margin-top: 1px;
 }
 
 html[dir='rtl'] .entry .title,
 html[dir='rtl'] .site-domain {
   /* Put the favicon on the right. */
   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;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 90px;
 }
 
 .search-results .time,
 .month-results .time {
   min-width: 110px;
   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;
   line-height: 1em;
 }
 
 <if expr="not is_android">
 /* 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. */
 .site-domain-wrapper input[type=checkbox]:not(:checked),
 .entry input[type='checkbox']:not(:checked) {
   opacity: 0;
 }
 
 .site-domain-wrapper:hover input[type='checkbox'],
 .site-domain-wrapper input[type='checkbox']:focus,
 .entry-box:hover input[type='checkbox'],
 .entry-box input[type='checkbox']:focus {
   opacity: 1;
 }
 
 .site-domain-wrapper input[type='checkbox']:focus,
 .entry-box input[type='checkbox']:focus {
   -webkit-transition: opacity 150ms;
 }
 
 .filter-status {
-  display: -webkit-flex;
-  -webkit-flex: 1 0 auto;
-  -webkit-justify-content: flex-end;
+  -webkit-margin-start: 10px;
 }
 
 .filter-status > div {
   -webkit-flex: 0 0 auto;
   -webkit-transition: background-color 500ms ease-in-out;
   border-radius: 3px;
   display: none;
   font-size: 11px;
   height: 14px;
   line-height: 12px;
@@ skipping 11 matching lines @@
 }
 
 .filter-allowed,
 .in-content-pack-active {
   background-color: rgb(141, 240, 127);
   border: 1px solid rgb(33, 190, 33);
   color: rgb(54, 54, 54);
 }
 
 .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);
 }
 
 .in-content-pack-passive {
   border: 1px solid rgb(155, 224, 163);
   background-color: rgb(225, 255, 205);
   color: rgb(148, 148, 148);
 }
 
 /* TODO(sergiu): If this is the final icon replace it with a separate resource.
  */
 .blocked-indicator {
   background: url(../ssl/roadblock_icon.png) no-repeat;
   background-size: 30%;
 }
 
 .blocked-indicator .title {
   color: rgb(151, 156, 160);
 }
 </if>
 
-#range-previous img {
-  -webkit-transform: scaleX(-1);
-}
-
 .entry-box {
   background-color: none;
 }
 
 .entry-box:hover,
 .entry-box.contains-focus {
   background-color: rgb(252, 252, 252);
   border-radius: 2px;
 }
 
 .entry-box-container {
   display: -webkit-flex;
 }
 
-.entry .title-and-domain {
+.entry .visit-entry {
   display: -webkit-flex;
   min-width: 0;
 }
 
 .entry .title {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.entry .title-and-domain,
+.entry .visit-entry,
 .site-domain {
   /* Make room for the favicon. */
   -webkit-padding-start: 20px;
 
   /* Control the favicon appearance. */
   background-position-y: center;
   background-repeat: no-repeat;
   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;
 }
 
 .site-domain button {
   color: rgb(48, 57, 66);
 }
 
 .site-domain button:hover {
   text-decoration: none;
@@ skipping 65 matching lines @@
 }
 
 body:not(.has-results) #results-pagination {
   display: none;
 }
 
 #older-button {
   float: right;
 }
 
-
 html[dir='rtl'] #older-button {
   float: left;
 }
 
 html[dir='ltr'] #newest-button::before {
   /* Left-pointing double angle quotation mark followed by '&nbsp;'. */
   content: '\00AB\A0';
 }
 
 html[dir='rtl'] #newest-button::after {
@@ skipping 56 matching lines @@
   background-image: url(../../../../ui/webui/resources/images/phone_small.png);
   background-position: 14px center;
   padding-left: 43px;
 }
 
 #action-menu[data-devicetype='tablet']::before {
   background-image: url(../../../../ui/webui/resources/images/tablet_small.png);
   background-position: 17px center;
   padding-left: 49px;
 }