Profile Avatar Selector: Allow arrow keys to be used for moving between avatars (2nd edition)

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..95f5b300a7f524975628188ca67eb1e03136b5b2 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,6 +1,6 @@
 <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="cr_profile_avatar_selector_listbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="cr-profile-avatar-selector">
@@ -13,13 +13,13 @@
         @apply(--avatar-selector);
       }
 
-      #selector {
-        display: flex;
-        flex-wrap: wrap;
-        margin: calc(var(--avatar-spacing) / -2);
+      #avatar-list {
+        --cr-profile-avatar-selector-listbox: {
+          margin: calc(var(--avatar-spacing) / -2);
+        };
       }
 
-      #selector .avatar {
+      #avatar-list .avatar {
         --paper-button: {
           background: var(--paper-grey-300);
         };
@@ -40,21 +40,21 @@
         @apply(--avatar-selector-avatar);
       }
 
-      #selector .avatar.iron-selected {
+      #avatar-list .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-listbox id="avatar-list"
+        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-listbox>
   </template>
   <script src="cr_profile_avatar_selector.js"></script>
 </dom-module>