Refactors profile avatar selector into a Polymer element to use in md-settings & md-user-manager

chrome/browser/resources/md_user_manager/create_profile.html

 <link rel="import" href="/import_supervised_user.html">
 <link rel="import" href="/profile_browser_proxy.html">
 <link rel="import" href="/shared_styles.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
@@ skipping 65 matching lines @@
         };
         --paper-input-container-underline-focus: var(--google-blue-500);
       }
 
       #nameInput {
         margin-bottom: 24px;
         margin-top: 32px;
         width: 300px;
       }
 
-      #icons {
-        display: flex;
-        flex-wrap: wrap;
-        margin: -12px;
-      }
-
-      #icons paper-button {
-        --paper-button: {
-          background: var(--paper-grey-300);
-        };
-        --paper-button-flat-keyboard-focus: {
-          background: var(--paper-grey-400);
-        };
-        border: var(--user-manager-separator-line);
-        margin: 12px;
-        min-width: 0;
-        padding: 6px 4px;
-      }
-
-      #icons paper-button[active] {
-        border-color: var(--google-blue-500);
-      }
-
       paper-checkbox {
         --paper-checkbox-checked-color: var(--google-blue-500);
         --paper-checkbox-label-spacing: 16px;
         --paper-checkbox-size: 16px;
         --paper-checkbox-unchecked-color: var(--paper-grey-600);
         margin-top: 24px;
       }
 
       #supervised-user-container {
         -webkit-padding-start: 32px;
@@ skipping 56 matching lines @@
     </style>
     <div id="message-container" visible$="[[isMessageVisble_]]">
       <iron-icon icon="cr:warning"></iron-icon>
       <span id="message" inner-h-t-m-l="[[message_]]"></span>
     </div>
     <div class="container">
       <div id="title-bar">$i18n{createProfileTitle}</div>
       <paper-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*"
           no-label-float auto-validate>
       </paper-input>
-      <div id="icons">
-        <template is="dom-repeat" items="[[availableIcons_]]">
-          <paper-button toggles on-tap="onIconTap_"
-              data-icon-url$="[[item.url]]"
-              active="[[isActiveIcon_(item.url, profileIconUrl_)]]">
-            <img src="[[item.url]]" alt="[[item.label]]">
-          </paper-button>
-        </template>
-      </div>
+      <cr-profile-avatar-selector avatars="[[availableIcons_]]"
+          selected-avatar-url="{{profileIconUrl_}}">
+      </cr-profile-avatar-selector>
       <paper-checkbox checked="{{isSupervised_}}">
         $i18n{manageProfilesSupervisedSignedInLabel}
       </paper-checkbox>
       <div id="supervised-user-container">
         <div id="learn-more" >
           <a is="action-link" on-tap="onLearnMoreTap_">$i18n{learnMore}</a>
         </div>
         <template is="dom-if" if="[[isSupervised_]]">
           <template is="dom-if" if="[[isSignedIn_(signedInUsers_)]]">
             <paper-dropdown-menu label="$i18n{selectAnAccount}" no-label-float>
@@ skipping 28 matching lines @@
         <paper-button id="save" class="action primary" on-tap="onSaveTap_"
             disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]">
           $i18n{createProfileConfirm}
         </paper-button>
       </div>
       <import-supervised-user id="importUserPopup"></import-supervised-user>
     </div>
   </template>
   <script src="create_profile.js"></script>
 </dom-module>