MD user manager (html/js/css for create profile flow)

chrome/browser/resources/md_user_manager/create_profile.js

Index: chrome/browser/resources/md_user_manager/create_profile.js
diff --git a/chrome/browser/resources/md_user_manager/create_profile.js b/chrome/browser/resources/md_user_manager/create_profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..141e7235fa58914d0c7abf88bf75e600f2d83712
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/create_profile.js
@@ -0,0 +1,278 @@
+// Copyright 2016 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 'create-profile' is a page that contains controls for creating
+ * a (optionally supervised) profile, including choosing a name, and an avatar.
+ *
+ * @element create-profile
+ */
+Polymer({
+  is: 'create-profile',
+
+  properties: {
+    /**
+     * True if supervised user checkbox is disabled.
+     * @private {boolean}
+     */
+    supervisedUserCheckboxDisabled_: {
+      type: Boolean,
+      computed:
+          'isSupervisedUserCheckboxDisabled_(createInProgress_, signedIn_)'
+    },
+
+    /**
+     * The current profile name.
+     * @private {string}
+     */
+    profileName_: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * The list of available profile icon URLs.
+     * @private {!Array<string>}
+     */
+    availableIconUrls_: {
+      type: Array,
+      value: function() { return []; }
+    },
+
+    /**
+     * The currently selected profile icon URL. May be a data URL.
+     * @private {string}
+     */
+    profileIconUrl_: {
+      type: String,
+      value: ''
+    },
+
+    /**
+     * True if a profile is being created or imported.
+     * @private {boolean}
+     */
+    createInProgress_: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * The current error/warning message.
+     * @private {string}
+     */
+    message_: {
+      type: String,
+      value: ''
+    },
+
+    /**
+     * True if the new profile is a supervised profile.
+     * @private {boolean}
+     */
+    isSupervised_: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * The list of usernames and profile paths for currently signed-in users.
+     * @private {!Array<SignedInUser>}
+     */
+    signedInUsers_: {
+      type: Array,
+      value: function() { return []; }
+    },
+
+    /**
+     * Index of the selected signed-in user.
+     * @private {number}
+     */
+    selectedEmail_: {
+      type: Number,
+      value: 0
+    },
+  },
+
+  /** @override */
+  attached: function() {
+    signin.ProfileApi.setProfileCreateSuccessCallback(
+        this.handleSuccess_.bind(this));
+    signin.ProfileApi.setProfileCreateWarningCallback(
+        this.handleMessage_.bind(this));
+    signin.ProfileApi.setProfileCreateErrorCallback(
+        this.handleMessage_.bind(this));
+
+    this.parentNode.addEventListener('iron-select',
+        this.onPageSelect_.bind(this));
+  },
+
+  /** @override */
+  detached: function() {

[Dan Beam, 2016/03/04 02:45:49]

do you expect detached to ever actually happen?

[Moe, 2016/03/08 00:57:04]

It should now. I put create-profile under a dom-if template with restamp
attribute set to true.

+    signin.ProfileApi.setProfileCreateSuccessCallback(null);
+    signin.ProfileApi.setProfileCreateWarningCallback(null);
+    signin.ProfileApi.setProfileCreateErrorCallback(null);
+  },
+
+  /**
+   * Handler for 'iron-select' events. Resets the form and makes calls to
+   * ProfileApi every time the page becomes visible.
+   * @param {!Event} event
+   * @private
+   */
+  onPageSelect_: function(event) {
+    if (event.target.selected == 'create-user-page') {

[Dan Beam, 2016/03/04 02:45:48]

nit:

if (event.target.selected != 'create-user-page')
  return;

... less indented ...

[Moe, 2016/03/08 00:57:04]

Done.

+      this.resetForm_();
+      signin.ProfileApi.getAvailableIcons(
+          this.handleAvailableIcons_.bind(this));
+      signin.ProfileApi.getSignedInUsers(
+          this.handleUpdateSignedInUsers_.bind(this));
+    }
+  },
+
+  /**
+   * Resets the state of the page.
+   * @private
+   */
+  resetForm_: function() {
+    this.profileName_ = '';
+    this.availableIconUrls_ = [];
+    this.profileIconUrl_ = '';
+    this.createInProgress_ = false;
+    this.message_ = '';
+    this.isSupervised_ = false;
+    this.signedInUsers_ = [];
+    this.selectedEmail_ = 0;
+  },
+
+  /**
+   * Handler for when the available icons are pushed from ProfileApi.
+   * @param {!Array<string>} iconUrls
+   * @private
+   */
+  handleAvailableIcons_: function(iconUrls) {
+    this.availableIconUrls_ = iconUrls;
+    this.profileIconUrl_ = iconUrls[0];
+  },
+
+  /**
+   * Updates the signed-in users.
+   * @param {!Array<SignedInUser>} signedInUsers
+   * @private
+   */
+  handleUpdateSignedInUsers_: function(signedInUsers) {
+    this.signedInUsers_ = signedInUsers;
+    this.signedIn_ = signedInUsers.length > 0;
+  },
+
+  /**
+   * Handler for the 'Learn More' button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onLearnMore_: function(event) {
+    // TODO(mahmadi): fire the event to show the 'learn-more-page'
+  },
+
+  /**
+   * Handler for the 'Ok' button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onOk_: function(event) {
+    this.createInProgress_ = true;
+    signin.ProfileApi.createProfile(
+        this.profileName_, this.profileIconUrl_, this.isSupervised_,
+        this.signedInUsers_[this.selectedEmail_].profilePath);
+  },
+
+  /**
+   * Handler for the 'Cancel' button click event.
+   * @param {!Event} event
+   * @private
+   */
+  onCancel_: function(event) {
+    if (this.createInProgress_) {
+      this.createInProgress_ = false;
+      signin.ProfileApi.cancelCreateProfile();
+    } else {
+      this.fire('change-page', {page: 'user-pods-page'});
+    }
+  },
+
+  /**
+   * Handler for when the user clicks a new profile icon.
+   * @param {!Event} event
+   * @private
+   */
+  onIconTap_: function(event) {
+    var element = Polymer.dom(event).rootTarget;
+
+    if (element.nodeName == 'IMG')
+      this.profileIconUrl_ = element.src;
+    else if (element.dataset && element.dataset.iconUrl)
+      this.profileIconUrl_ = element.dataset.iconUrl;
+
+    // Button toggle state is controlled by the selected icon URL. Prevent
+    // tap events from changing the toggle state.
+    event.preventDefault();
+  },
+
+  /**
+   * Handles profile create/import success message pushed by ProfileApi.
+   * @param {!ProfileInfo} profileInfo Details of the created/imported profile.
+   * @private
+   */
+  handleSuccess_: function(profileInfo) {
+    this.createInProgress_ = false;
+    this.fire('change-page', {page: 'user-pods-page'});
+  },
+
+  /**
+   * Handles profile create/import warning/error message pushed by ProfileApi.
+   * @param {string} message An HTML warning/error message.
+   * @private
+   */
+  handleMessage_: function(message) {
+    this.createInProgress_ = false;
+    this.message_ = message;
+  },
+
+  /**
+   * Computed binding determining which profile icon button is toggled on.
+   * @param {string} iconUrl icon URL of a given icon button
+   * @param {string} profileIconUrl Currently selected icon URL
+   * @return {boolean}
+   * @private
+   */
+  isActiveIcon_: function(iconUrl, profileIconUrl) {
+    return iconUrl == profileIconUrl;
+  },
+
+  /**
+   * Computed binding determining whether 'Ok' button is disabled.
+   * @param {boolean} createInProgress Is create in progress?
+   * @param {string} profileName Profile Name
+   * @param {string} message Existing warning/error message
+   * @return {boolean}
+   * @private
+   */
+  isOkDisabled_: function(createInProgress, profileName, message) {
+    /** @type {{validate:(function())}} */

[Dan Beam, 2016/03/04 02:45:49]

this should be a PaperInputElement

[Moe, 2016/03/08 00:57:04]

Changing this to PaperInputElement and adding the following dependency to my
compiled_resources2.gyp, I receive an error:

'<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-input/compiled_resources2.gyp:paper-input-extracted',

(ERROR) Error in: paper-input-char-counter-extracted.js
##
/usr/local/google/home/mahmadi/chromium/src/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-char-counter-extracted.js:16:
ERROR - Property inputElement never defined on state
##       if (!state.inputElement) {
##                  ^

I looked at the dependencies of 'paper-input-char-counter-extracted' and it
seems correct. Could this be a bug or am I missing something here?

[Dan Beam, 2016/03/08 01:18:16]

this is a problem with compiling Polymer.  how about putting a TODO() so it's
clear that this shouldn't be the final state of this code

[Dan Beam, 2016/03/08 01:18:16]

nit: /** @type {{validate: function():boolean}} */

[Moe, 2016/03/08 15:47:33]

Done.

[Moe, 2016/03/08 15:47:34]

Done.

+    var nameInput = this.$.nameInput;
+    return createInProgress || !profileName || message != '' ||
+        !nameInput.validate();
+  },
+
+  /**
+   * Computed binding determining whether supervised user checkbox is disabled.
+   * @param {boolean} createInProgress Is create in progress?
+   * @param {boolean} signedIn Are there any signed-in users?
+   * @return {boolean}
+   * @private
+   */
+  isSupervisedUserCheckboxDisabled_: function(createInProgress, signedIn) {
+    return createInProgress || !signedIn;
+  }
+});