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

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

+// 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.

[dschuyler, 2015/12/22 18:47:48]

@param

[tommycli, 2015/12/22 21:58:32]

Done.

+   * @private
+   */
+  handleAvailableIcons_: function(iconUrls) {
+    this.availableIconUrls = iconUrls;
+  },
+
+  /**
+   * Handler for when the profile name field is changed, then blurred.

[dschuyler, 2015/12/22 18:47:48]

@param

[tommycli, 2015/12/22 21:58:32]

Done.

+   * @private
+   */
+  onProfileNameChanged_: function(event) {
+    settings.SyncPrivateApi.setProfileIconAndName(this.profileIconUrl,
+                                                  event.target.value);
+  },
+
+  /**
+   * Handler for when the user clicks a new profile icon.

[dschuyler, 2015/12/22 18:47:48]

@param

[tommycli, 2015/12/22 21:58:32]

Done.

+   * @private

[dschuyler, 2015/12/22 18:47:48]

@return {boolean}

[tommycli, 2015/12/22 21:58:32]

Done.

+   */
+  onIconTap_: function(event) {
+    var element = Polymer.dom(event).rootTarget;
+    var newIconURL = element.nodeName == 'IMG' ? element.src :
+                                                 element.dataset.iconUrl;
+
+    settings.SyncPrivateApi.setProfileIconAndName(newIconURL, this.profileName);
+
+    // Button toggle state is controlled by the selected icon URL. Prevent
+    // tap events from changing the toggle state.
+    return false;
+  },
+
+  /**
+   * Computed binding determining which profile icon button is toggled on.

[dschuyler, 2015/12/22 18:47:48]

@param, @param

[tommycli, 2015/12/22 21:58:33]

Done.

+   * @private

[dschuyler, 2015/12/22 18:47:48]

return type

[tommycli, 2015/12/22 21:58:33]

Done.

+   */
+  isActiveIcon_: function(iconURL, profileIconUrl) {
+    return iconURL == profileIconUrl;
+  },
+});