MD Settings: Fix avatar selector grid arrow keystrokes in RTL mode.

Bug: 739631
Change-Id: Iecabaae34cd2e20124a5721d65bb8ab92460acf5
Reviewed-on: https://chromium-review.googlesource.com/569181Reviewed-by: Tommy Li <tommycli@chromium.org>
Commit-Queue: Tommy Li <tommycli@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486239}

chrome/test/data/webui/cr_elements/cr_profile_avatar_selector_tests.js

@@ -99,6 +99,20 @@ cr.define('cr_profile_avatar_selector', function() {
 
         MockInteractions.keyDownOn(items[0], 39, 'shift', 'ArrowRight');
         assertTrue(items[0].focused);
+
+        // Test RTL case.
+        selector.dir = 'rtl';
+        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
+        assertTrue(items[1].focused);
+
+        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowLeft');
+        assertTrue(items[2].focused);
+
+        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
+        assertTrue(items[1].focused);
+
+        MockInteractions.keyDownOn(items[0], 37, [], 'ArrowRight');
+        assertTrue(items[0].focused);
       });
     });
   }

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.js

@@ -80,6 +80,8 @@ Polymer({
         // end.
       }
     } else {
+      if (style.direction == 'rtl')
+        offset *= -1;
       var nextIndex = (focusIndex + offset) % items.length;
       if (nextIndex < 0)
         nextIndex = items.length - 1;