[MD settings] use arrow-forward to switch direction in rtl

chrome/browser/resources/settings/settings_shared_css.html

Index: chrome/browser/resources/settings/settings_shared_css.html
diff --git a/chrome/browser/resources/settings/settings_shared_css.html b/chrome/browser/resources/settings/settings_shared_css.html
index 545e4f0f1e5e1ca2f001df798d06b57e671ccba3..fb3b02e077ec0894ec7be03b0115d84321071fda 100644
--- a/chrome/browser/resources/settings/settings_shared_css.html
+++ b/chrome/browser/resources/settings/settings_shared_css.html
@@ -8,22 +8,36 @@
       button[is='paper-icon-button-light'] {
         --paper-icon-button-light-ripple: {
           /* Center the ripple on the icon button. */
-          height: 36px;
+          height: var(--settings-icon-ripple-size);
           left: -8px;
           top: -8px;
-          width: 36px;
+          width: var(--settings-icon-ripple-size);
         };
         -webkit-margin-start: 16px;
         background-size: cover;
         flex-shrink: 0;
-        height: 20px;
-        width: 20px;
+        height: var(--settings-icon-size);
+        width: var(--settings-icon-size);
       }
 
-      [actionable] button[is="paper-icon-button-light"].icon-arrow-right {
+      :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
+        --paper-icon-button-light-ripple: {
+          /* Center the ripple on the icon button. */
+          height: var(--settings-icon-ripple-size);
+          right: -8px;
+          top: -8px;
+          width: var(--settings-icon-ripple-size);
+        };
+      }
+
+      [actionable] button[is="paper-icon-button-light"].icon-arrow-forward {
         background-image: url(images/arrow_right.svg);
       }
 
+      :host-context([dir=rtl]) [actionable] button[is="paper-icon-button-light"].icon-arrow-forward {

[Dan Beam, 2016/10/03 22:04:54]

wrap

[dschuyler, 2016/10/03 22:22:41]

Removed.

+        background-image: url(images/arrow_left.svg);

[Dan Beam, 2016/10/03 22:04:54]

why can't we just transform?

[dschuyler, 2016/10/03 22:22:41]

We can. I had trouble with the -webkit-margin-start.
I've made patch#2 that shows a working version 
without the arrow_left.svg. It has some extra comments
talking about the workaround for the margin.

+      }
+
       [actionable] button[is="paper-icon-button-light"].icon-external {
         background-image: url(images/open_in_new.svg);
       }