Profile Avatar Selector: Allow arrow keys to be used for moving between avatars.

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html

Index: ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
diff --git a/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html b/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
index d1bebe68717ce24199ceba2b865bda906bb30e19..215b73c4d01dae8a8284708cd5c204763283ec04 100644
--- a/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
+++ b/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
@@ -1,60 +1,55 @@
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="cr_profile_avatar_selector_grid.html">
 
 <dom-module id="cr-profile-avatar-selector">
   <template>
     <style>
       :host {
+        --avatar-size: 48px;
         --avatar-spacing: 24px;
         display: inline-flex;
 
         @apply(--avatar-selector);
       }
 
-      #selector {
-        display: flex;
-        flex-wrap: wrap;
-        margin: calc(var(--avatar-spacing) / -2);
-      }
-
-      #selector .avatar {
+      #avatar-grid .avatar {
         --paper-button: {
           background: var(--paper-grey-300);
         };
         --paper-button-flat-keyboard-focus: {
           background: var(--paper-grey-400);
         };
-        background-repeat: no-repeat;
         background-position: center;
+        background-repeat: no-repeat;
         border-radius: 2px;
         border: 1px solid rgba(0, 0, 0, .12);
         display: flex;
-        height: 48px;
+        height: var(--avatar-size);
         margin: calc(var(--avatar-spacing) / 2);
         min-width: 0;
         padding: 0;
-        width: 48px;
+        width: var(--avatar-size);
 
         @apply(--avatar-selector-avatar);
       }
 
-      #selector .avatar.iron-selected {
+      #avatar-grid .avatar.iron-selected {
         border: 1px solid var(--google-blue-500);
 
         @apply(--avatar-selector-avatar-selected);
       }
     </style>
-    <iron-selector id="selector" selected="{{selectedAvatarUrl}}"
-        attr-for-selected="data-avatar-url">
+    <cr-profile-avatar-selector-grid id="avatar-grid"
+        selected="{{selectedAvatarUrl}}" attr-for-selected="data-avatar-url">
       <template is="dom-repeat" items="[[avatars]]">
         <paper-button class="avatar" data-avatar-url$="[[item.url]]"
             title="[[item.label]]"
             style$="background-image: [[getIconImageset_(item.url)]]">
         </paper-button>
       </template>
-    </iron-selector>
+    </cr-profile-avatar-selector-grid>
   </template>
   <script src="cr_profile_avatar_selector.js"></script>
 </dom-module>