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..87eeb006f653d9090a4b967b7c6cf708f7019b69
--- /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
+   * @return {boolean}

[Dan Beam, 2016/01/04 22:06:11]

remove @return

[tommycli, 2016/01/06 20:30:05]

Done.

+   */
+  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;
+    }

[Dan Beam, 2016/01/04 22:06:11]

no curlies

[tommycli, 2016/01/06 20:30:05]

Done.

+
+    if (iconUrl)
+      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();

[Dan Beam, 2016/01/04 22:06:11]

only preventDefault if (iconUrl) exists (or conversely, bail early if
(!iconUrl))

[tommycli, 2016/01/06 20:30:05]

Done.

+  },
+
+  /**
+   * 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;
+  },
+});