Make the border between the navigation panel visible in RTL Chrome.

In addition, make the navigation bar gradient work corretly in RTL Chrome. 

BUG=NONE
TEST=Start Chrome with '--enable-tabbed-options' and '-lang=ar' (or LANGUAGES=ar chrome on Linux) and go to Options page. To the left of the navigation bar in Options page, the border (1px solid) should be visible. The gradient in the navigation bar runs opposite to the direction it runs in LTR chrome

Review URL: http://codereview.chromium.org/3039018

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@53483 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 30 insertions, 3 deletions

diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index d547810..6388083 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -28,14 +28,22 @@
 }
 
 #close-overlay {
-  float: right;
   position: relative;
-  right: -20px;
   top: -20px;
   width: 20px;
   height: 20px;
 }
 
+html[dir='ltr'] #close-overlay {
+  float: right;
+  right: -20px;
+}
+
+html[dir='rtl'] #close-overlay {
+  float: left;
+  left: -20px;
+}
+
 #overlayview .button-strip {
   text-align: end;
 }
@@ -59,12 +67,27 @@
                                from(white),
                                color-stop(0.8, white),
                                to(#f3f3f3));
-  border-right: 1px solid #dbdbdb;
+  -webkit-border-end: 1px solid #dbdbdb;
   cursor: pointer;
   position: relative;
   width: 250px;
 }
 
+html[dir='rtl'] #navbar-container {
+  background: -webkit-gradient(linear,
+                               left top,
+                               left bottom,
+                               from(rgba(255,255,255,0)),
+                               color-stop(0.7, rgba(255,255,255,0)),
+                               to(white)),
+              -webkit-gradient(linear,
+                               right top,
+                               left top,
+                               from(white),
+                               color-stop(0.8, white),
+                               to(#f3f3f3));
+}
+
 #navbar-container > hr {
   -webkit-margin-start: 35%;
   background-color: #dbdbdb;
@@ -86,6 +109,10 @@
   font-weight: bold;
 }
 
+html[dir='rtl'] .navbar-item-selected {
+  background: -webkit-gradient(linear, right top, left top, from(white), to(#d6def3));
+}
+
 .navbar-item-normal {
   background-color: #dfdfdf;
 }