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

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
new file mode 100644
index 0000000000000000000000000000000000000000..47cb8978a3f05cd221b3f01376a85cbc55d8807a
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
@@ -0,0 +1,62 @@
+<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">
+
+<dom-module id="cr-profile-avatar-selector">
+  <template>
+    <style>
+      :host {
+        --avatar-spacing: 24px;
+        display: inline-flex;
+
+        @apply(--avatar-selector);
+      }
+
+      #selector {
+        display: flex;
+        flex-wrap: wrap;
+        margin: calc(var(--avatar-spacing) / -2);
+      }
+
+      .avatar {
+        --paper-button: {
+          background-color: var(--paper-grey-300);
+        };
+        --paper-button-flat-keyboard-focus: {
+          background-color: var(--paper-grey-400);
+        };
+        align-items: center;
+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, .12);
+        display: flex;
+        height: 48px;
+        justify-content: center;
+        margin: calc(var(--avatar-spacing) / 2);
+        min-width: 0;
+        padding: 0;
+        width: 48px;
+
+        @apply(--avatar-selector-avatar);
+      }
+
+      .avatar:hover {
+        @apply(--avatar-selector-avatar-hovered);
+      }
+
+      .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">
+      <template is="dom-repeat" items="[[avatars]]">
+        <paper-button class="avatar" data-avatar-url$="[[item.url]]">
+          <img src="[[item.url]]" alt="[[item.label]]">
+        </paper-button>
+      </template>
+    </iron-selector>
+  </template>
+  <script src="cr_profile_avatar_selector.js"></script>
+</dom-module>