Restructure user-creation flow and surface errors

chrome/browser/resources/options/manage_profile_overlay.js

 // Copyright (c) 2012 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.
 
 cr.define('options', function() {
   var OptionsPage = options.OptionsPage;
   var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /**
    * ManageProfileOverlay class
@@ skipping 30 matching lines @@
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
       options.ProfilesIconGrid.decorate($('manage-profile-icon-grid'));
       options.ProfilesIconGrid.decorate($('create-profile-icon-grid'));
       self.registerCommonEventHandlers_('create',
                                         self.submitCreateProfile_.bind(self));
       self.registerCommonEventHandlers_('manage',
                                         self.submitManageChanges_.bind(self));
 
+      // Override the create-profile-ok handler, to avoid closing the overlay
+      // until we finish creating the profile.

[Andrew T Wilson (Slow), 2013/05/27 12:02:43]

Do we need to guard against multiple clicks by disabling the button, if we
aren't closing the overlay?

[Pam (message me for reviews), 2013/05/27 14:34:37]

I'd been pondering that. I don't think there's actually a technical problem with
queueing up multiple creates, but I'm not sure it's the better UX, and there's a
bit of awkwardness in avoiding duplicate names. For now, I'll disable the
button.

+      $('create-profile-ok').onclick = function(event) {
+        ManageProfileOverlay.getInstance().hideErrorBubble_('create');
+        self.submitCreateProfile_();
+      };
+
       if (loadTimeData.getBoolean('managedUsersEnabled')) {
         $('create-profile-limited-container').hidden = false;
       }
       $('manage-profile-cancel').onclick =
           $('delete-profile-cancel').onclick =
               $('create-profile-cancel').onclick = function(event) {
         OptionsPage.closeOverlay();
       };
       $('delete-profile-ok').onclick = function(event) {
         OptionsPage.closeOverlay();
@@ skipping 160 matching lines @@
     receiveHasProfileShortcuts_: function(hasShortcuts) {
       $('add-shortcut-button').hidden = hasShortcuts;
       $('remove-shortcut-button').hidden = !hasShortcuts;
     },
 
     /**
      * Display the error bubble, with |errorText| in the bubble.
      * @param {string} errorText The localized string id to display as an error.
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
      *     'manage').

[Andrew T Wilson (Slow), 2013/05/27 12:02:43]

document new parameter.

      * @private
      */
-    showErrorBubble_: function(errorText, mode) {
+    showErrorBubble_: function(errorText, mode, disableOKButton) {
       var nameErrorEl = $(mode + '-profile-error-bubble');
       nameErrorEl.hidden = false;
       nameErrorEl.textContent = loadTimeData.getString(errorText);
 
-      $(mode + '-profile-ok').disabled = true;
+      if (disableOKButton)
+        $(mode + '-profile-ok').disabled = true;
     },
 
     /**
      * Hide the error bubble.
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
      *     'manage').
      * @private
      */
     hideErrorBubble_: function(mode) {
       $(mode + '-profile-error-bubble').hidden = true;
       $(mode + '-profile-ok').disabled = false;
     },
 
     /**
      * oninput callback for <input> field.
      * @param {Event} event The event object.
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
      *     'manage').
      * @private
      */
     onNameChanged_: function(event, mode) {
       var newName = event.target.value;
       var oldName = this.profileInfo_.name;
 
       if (newName == oldName) {
         this.hideErrorBubble_(mode);
       } else if (this.profileNames_[newName] != undefined) {
-        this.showErrorBubble_('manageProfilesDuplicateNameError', mode);
+        this.showErrorBubble_('manageProfilesDuplicateNameError', mode, true);
       } else {
         this.hideErrorBubble_(mode);
 
         var nameIsValid = $(mode + '-profile-name').validity.valid;
         $(mode + '-profile-ok').disabled = !nameIsValid;
       }
     },
 
     /**
      * Called when the user clicks "OK" or hits enter. Saves the newly changed
@@ skipping 13 matching lines @@
      * using the information in the dialog.
      * @private
      */
     submitCreateProfile_: function() {
       // Get the user's chosen name and icon, or default if they do not
       // wish to customize their profile.
       var name = $('create-profile-name').value;
       var iconUrl = $('create-profile-icon-grid').selectedItem;
       var createShortcut = $('create-shortcut').checked;
       var isManaged = $('create-profile-limited').checked;
+
+      // 'createProfile' is handled by the BrowserOptionsHandler.
       chrome.send('createProfile',
                   [name, iconUrl, createShortcut, isManaged]);
     },
 
     /**
      * Called when the selected icon in the icon grid changes.
      * @param {string} mode A label that specifies the type of dialog
      *     box which is currently being viewed (i.e. 'create' or
      *     'manage').
      * @private
@@ skipping 98 matching lines @@
     didShowPage: function() {
       chrome.send('requestSignedInText');
       chrome.send('requestDefaultProfileIcons');
       chrome.send('requestNewProfileDefaults');
 
       $('manage-profile-overlay-create').hidden = false;
       $('manage-profile-overlay-manage').hidden = true;
       $('manage-profile-overlay-delete').hidden = true;
       $('create-profile-instructions').textContent =
          loadTimeData.getStringF('createProfileInstructions');
-      ManageProfileOverlay.getInstance().hideErrorBubble_('create');
+      this.hideErrorBubble_();
 
       var shortcutsEnabled = loadTimeData.getBoolean('profileShortcutsEnabled');
       $('create-shortcut-container').hidden = !shortcutsEnabled;
       $('create-shortcut').checked = shortcutsEnabled;
 
       $('create-profile-name-label').hidden = true;
       $('create-profile-name').hidden = true;
       $('create-profile-ok').disabled = true;
     },
 
+    /** @override */
+    showErrorBubble_: function(errorText) {
+      ManageProfileOverlay.getInstance().showErrorBubble_(errorText,
+                                                          'create',
+                                                          false);
+    },
+
+    /** @override */
+    hideErrorBubble_: function() {
+      ManageProfileOverlay.getInstance().hideErrorBubble_('create');
+    },
+
+    /**
+     * Shows an error message describing a local error (most likely a disk
+     * error) when creating a new profile. Called by BrowserOptions via the
+     * BrowserOptionsHandler.
+     * @private
+     */
+    onLocalError_: function() {
+      this.showErrorBubble_('createProfileLocalError');
+    },
+
+    /**
+     * For new limited users, shows a confirmation page after successfully
+     * creating a new profile; otherwise, the handler will open a new window.
+     * @private
+     */
+    onSuccess_: function(is_managed) {

[Pam (message me for reviews), 2013/05/27 08:17:25]

I will change this to isManaged before committing.

+      OptionsPage.closeOverlay();
+      if (is_managed) {
+        // TODO(pamg): Fill out this stub.
+        console.log('Success - show confirmation');
+      }
+    },
+
     /**
      * Updates the signed-in or not-signed-in UI when in create mode. Called by
      * the handler in response to the 'requestSignedInText' message.
      * @param {string} text The text to show for a signed-in user. An empty
      *     string indicates that the user is not signed in.
      * @private
      */
     updateSignedInStatus_: function(text) {
       var isSignedIn = text !== '';
       $('create-profile-limited-signed-in').hidden = !isSignedIn;
       $('create-profile-limited-not-signed-in').hidden = isSignedIn;
       $('create-profile-limited').disabled = !isSignedIn;
 
       $('create-profile-limited-signed-in-label').textContent = text;
     },
   };
 
   // Forward public APIs to private implementations.
   [
+    'onLocalError',
+    'onSuccess',
     'updateSignedInStatus',
   ].forEach(function(name) {
     CreateProfileOverlay[name] = function() {
       var instance = CreateProfileOverlay.getInstance();
       return instance[name + '_'].apply(instance, arguments);
     };
   });
 
   // Export
   return {
     ManageProfileOverlay: ManageProfileOverlay,
     CreateProfileOverlay: CreateProfileOverlay,
   };
 });