Settings People Revamp: Implement Chrome Profile name/icon selection.

chrome/browser/resources/settings/people_page/manage_profile.js

Index: chrome/browser/resources/settings/people_page/manage_profile.js
diff --git a/chrome/browser/resources/settings/people_page/manage_profile.js b/chrome/browser/resources/settings/people_page/manage_profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..2d4a7cdca3f8665b5d04e4cda859289075865c9f
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/manage_profile.js
@@ -0,0 +1,96 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * 'settings-manage-profile' is the settings subpage containing controls to
+ * edit a profile's name, icon, and desktop shortcut.
+ *
+ * @group Chrome Settings Elements
+ * @element settings-manage-profile
+ */
+Polymer({
+  is: 'settings-manage-profile',
+
+  properties: {
+    /**
+     * The currently selected profile icon URL. May be a data URL.
+     */
+    profileIconUrl: String,
+
+    /**
+     * The current profile name.
+     */
+    profileName: String,
+
+    /**
+     * The available icons for selection. Populated by SyncPrivateApi.
+     * @type {!Array<!string>}
+     */
+    availableIconUrls: {
+      type: Array,
+      value: function() { return []; },
+    },
+  },
+
+  /** @override */
+  created: function() {
+    settings.SyncPrivateApi.getAvailableIcons(
+        this.handleAvailableIcons_.bind(this));
+  },
+
+  /**
+   * Handler for when the available icons are pushed from SyncPrivateApi.
+   * @private
+   * @param {!Array<!string>} iconUrls
+   */
+  handleAvailableIcons_: function(iconUrls) {
+    this.availableIconUrls = iconUrls;
+  },
+
+  /**
+   * Handler for when the profile name field is changed, then blurred.
+   * @private
+   * @param {!Event} event
+   */
+  onProfileNameChanged_: function(event) {
+    settings.SyncPrivateApi.setProfileIconAndName(this.profileIconUrl,
+                                                  event.target.value);
+  },
+
+  /**
+   * Handler for when the user clicks a new profile icon.
+   * @private
+   * @param {!Event} event
+   */
+  onIconTap_: function(event) {
+    var element = Polymer.dom(event).rootTarget;
+
+    var iconUrl;
+    if (element.nodeName == 'IMG')
+      iconUrl = element.src;
+    else if (element.dataset && element.dataset.iconUrl)
+      iconUrl = element.dataset.iconUrl;
+
+    if (!iconUrl)
+      return;
+
+    settings.SyncPrivateApi.setProfileIconAndName(iconUrl, this.profileName);
+
+    // Button toggle state is controlled by the selected icon URL. Prevent
+    // tap events from changing the toggle state.
+    event.preventDefault();
+  },
+
+  /**
+   * Computed binding determining which profile icon button is toggled on.
+   * @private
+   * @param {!string} iconUrl
+   * @param {!string} paramIconUrl
+   * @return {boolean}
+   */
+  isActiveIcon_: function(iconUrl, profileIconUrl) {
+    return iconUrl == profileIconUrl;
+  },
+});