History: Fix RTL layout in grouped history and some other minor fixes.

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,
@@ skipping 83 matching lines @@
   /* The box should be no bigger than its parent. */
   max-width: 100%;
   overflow: hidden;
   padding-bottom: 1px;
 }
 
 .site-domain-wrapper {
   cursor: pointer;
 }
 
-html[dir=rtl] .entry-box {
+html[dir=rtl] .entry-box,
+html[dir=rtl] .site-domain-wrapper {
   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;
 }
 
+html[dir='rtl'] .site-results {
+  clear: right;

[Patrick Dubroy, 2013/01/30 19:23:04]

Perhaps just use "clear: both" for simplicity?

[Sergiu, 2013/02/05 18:21:23]

Done.

+}
+
 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;
 }
 
+
+html[dir='rtl'] .number-visits {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+
 .number-visits {
+  /* TODO(sergiu): make sure this works on rtl properly */

[Patrick Dubroy, 2013/01/30 19:23:04]

You should remove this TODO before landing...you are going to test this before
landing, right?

[Sergiu, 2013/01/30 21:12:43]

Well, it works in the current version, but I'm not sure about one thing, is
there any function that transforms numbers to locale specific versions? I
imagine that numbers are represented differently in some languages. Also the
parentheses seem like a pretty big complication from that point of view, I'm
just tempted to switch to something like "www.google.com - 5 visits" instead of
"www.google.com (5)"

[Patrick Dubroy, 2013/02/02 00:36:24]

I think arabic numerals are understood in most locales, and I think there are
many places in Chrome where we display numbers without localizing them, so I
think it's ok.

[Sergiu, 2013/02/05 18:21:23]

I've tested it in Arabic now as well and there's a single problem: the
parentheses mess things up. They trigger the engine to think that the construct
is always in LTR, which makes using things like -webkit-margin-end impossible.
I've used margins and dir='rtl' in the end.

+  -webkit-margin-start: 0.3em;
   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;
 }
 
 .drop-down:hover {
   background-image: -webkit-canvas(drop-down-arrow-hover);
   border-color: rgb(48, 57, 66);
 }
 
 .drop-down[menu-shown],
 .drop-down:focus {
   background-color: rgb(48, 57, 66);
   background-image: -webkit-canvas(drop-down-arrow-active);
   border-color: rgb(48, 57, 66);
 }
 
-html[dir='rtl'] .entry .title {
+html[dir='rtl'] .entry .title,
+html[dir='rtl'] .site-domain {
   /* Put the favicon on the right. */
   background-position-x: right;
 }
 
 .entry .time {
   color: rgb(151, 156, 160);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 90px;
@@ skipping 50 matching lines @@
   -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;
-  color: #8F8F8F;
+  color: rgb(143, 143, 143);
   height: 21px;
   margin-right: 2px;
   text-align: center;
   width: 21px;
 }
 
 .site-domain-arrow.collapse {
   -webkit-transform: rotate(0);
 }
 
 .site-domain-arrow.expand {
   -webkit-transform: rotate(90deg);
 }
 
+html[dir='rtl'] .site-domain-arrow {
+  -webkit-transform: scaleX(-1);

[Patrick Dubroy, 2013/01/30 19:23:04]

Maybe just do this with rotate() too? Might be a bit simpler that way.

[Sergiu, 2013/02/05 18:21:23]

Done.

+}
+
+html[dir='rtl'] .site-domain-arrow.expand {
+  -webkit-transform: scaleX(-1) rotate(90deg);
+}
+
 .entry .starred {
   -webkit-margin-start: 4px;
   background: url('../../../../ui/webui/resources/images/star_small.png') no-repeat;
   display: inline-block;
   height: 11px;
   width: 11px;
 }
 
 .entry .title > a {
   color: rgb(48, 57, 66);
@@ skipping 14 matching lines @@
 }
 
 .menu-button.drop-down {
   position: relative;
   top: 2px;
 }
 
 #action-menu > :not(hr) {
   line-height: 29px;
 }