Multi-profile WebUI settings

chrome/browser/resources/options/profiles_manage_overlay.js

+// Copyright (c) 2011 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;
+
+  const localStrings = new LocalStrings();
+
+  /**
+   * ProfilesManageOverlay class
+   * Encapsulated handling of the 'Manage profile...' overlay page.

[James Hawkins, 2011/07/19 20:22:09]

@constructor

+   * @class
+   */
+  function ProfilesManageOverlay() {
+    OptionsPage.call(this,
+                     'profilesManage',
+                     templateData.profilesManageOverlayTabTitle,
+                     'profiles-manage-overlay');
+  };
+
+  cr.addSingletonGetter(ProfilesManageOverlay);
+
+  ProfilesManageOverlay.prototype = {
+    // Inherit from OptionsPage.
+    __proto__: OptionsPage.prototype,
+
+    // Info about the currently managed/deleted profile.
+    profileInfo_: null,
+
+    // The list of all known profile names.
+    profileNames_: [],
+
+    /**
+     * Initialize the page.
+     */
+    initializePage: function() {
+      // Call base class implementation to start preference initialization.
+      OptionsPage.prototype.initializePage.call(this);
+
+      var self = this;
+      var iconList = $('profiles-manage-icon-list');
+      options.ProfilesIconList.decorate(iconList);
+
+      $('profiles-manage-name').oninput = this.onNameChanged_.bind(this);
+      $('profiles-manage-cancel').onclick =
+          $('profiles-delete-cancel').onclick = function(event) {
+        OptionsPage.closeOverlay();
+      };
+      $('profiles-manage-ok').onclick = function(event) {
+        OptionsPage.closeOverlay();
+        self.submitManageChanges_();
+      };
+      $('profiles-delete-ok').onclick = function(event) {
+        OptionsPage.closeOverlay();
+        chrome.send('deleteProfile', [self.profileInfo_.filePath]);
+      };
+    },
+
+    /** @inheritDoc */
+    didShowPage: function() {
+      $('profiles-manage-icon-list').redraw();
+      $('profiles-manage-name').focus();
+    },
+
+    /**
+     * Set the profile info used in the dialog.
+     * @param {Object} profileInfo An object like this:
+     *     profileInfo = {
+     *       name: "Profile Name",
+     *       iconURL: "chrome://path/to/icon/image",
+     *       filePath: "/path/to/profile/data/on/disk"
+     *     };
+     * @private
+     */
+    setProfileInfo_: function(profileInfo) {
+      this.profileInfo_ = profileInfo;
+      $('profiles-manage-name').value = profileInfo.name;
+      $('profiles-manage-icon-list').selectedItem = profileInfo.iconURL;
+    },
+
+    /**
+     * Called by the C++ handler to give icon URLs to javascript. These are the
+     * icons that can be chosen by the user.
+     * @param {Array.<string>} iconURLs An array of icon URLs.
+     * @private
+     */
+    receiveProfileIcons_: function(iconURLs) {
+      $('profiles-manage-icon-list').dataModel = new ArrayDataModel(iconURLs);
+    },
+
+    /**
+     * Called by the C++ handler to give profile names to javascript. These are
+     * used to prevent the user from naming two profiles the same.
+     * @param {Object} profileNames A dictionary of profile names.
+     * @private
+     */
+    receiveProfileNames_: function(profileNames) {
+      this.profileNames_ = profileNames;
+    },
+
+    /**
+     * Determine whether |name| is valid; i.e. not equal to any other profile
+     * name.
+     * @param {string} name The profile name to validate.
+     * @return true if the name is not equal to any other profile name.
+     * @private
+     */
+    isNameValid_: function(name) {
+      // if the name hasn't changed, assume it is valid.
+      if (name == this.profileInfo_.name)
+        return true;
+
+      return this.profileNames_[name] == undefined;
+    },
+
+    /**
+     * Update the UI elements accordingly if the profile name is valid/invalid.
+     * @param {boolean} isValid True if the UI should be updated as if the name
+     *     was valid.

[James Hawkins, 2011/07/19 20:22:09]

s/was/were/

+     * @private
+     */
+    setNameIsValid_: function(isValid) {
+      var dupeNameErrorEl = $('profiles-manage-duplicate-name-error');
+      if (isValid)
+        dupeNameErrorEl.classList.add('hiding');
+      else
+        dupeNameErrorEl.classList.remove('hiding');
+
+      $('profiles-manage-ok').disabled = !isValid;
+    },
+
+    /**
+     * oninput callback for <input> field.
+     * @param event The event object
+     * @private
+     */
+    onNameChanged_: function(event) {
+      this.setNameIsValid_(this.isNameValid_(event.target.value));
+    },
+
+    /**
+     * Called when the user clicks "OK". Saves the newly changed profile info.
+     * @private
+     */
+    submitManageChanges_: function() {
+      var name = $('profiles-manage-name').value;
+      var iconURL = $('profiles-manage-icon-list').selectedItem;
+      chrome.send('setProfileNameAndIcon',
+                  [this.profileInfo_.filePath, name, iconURL]);
+    },
+  };
+
+  // Forward public APIs to private implementations.
+  [
+    'setProfileInfo',
+    'receiveProfileIcons',
+    'receiveProfileNames',
+  ].forEach(function(name) {
+    ProfilesManageOverlay[name] = function(value) {
+      ProfilesManageOverlay.getInstance()[name + '_'](value);
+    };
+  });
+
+  /**
+   * Display the "Manage Profile" dialog.
+   * @param {Object} profileInfo The profile object of the profile to manage.
+   * @public
+   */
+  ProfilesManageOverlay.show = function(profileInfo) {

[James Hawkins, 2011/07/19 20:22:09]

Move to a private implementation and forward.

+    ProfilesManageOverlay.setProfileInfo(profileInfo);
+    $('profiles-manage-overlay-manage').hidden = false;
+    $('profiles-manage-overlay-delete').hidden = true;
+    ProfilesManageOverlay.getInstance().setNameIsValid_(true);
+
+    // Intentionally don't show the URL in the location bar as we don't want
+    // people trying to navigate here by hand.
+    OptionsPage.showPageByName('profilesManage', false);
+  };
+
+  /**
+   * Display the "Delete Profile" dialog.
+   * @param {Object} profileInfo The profile object of the profile to delete.
+   */
+  ProfilesManageOverlay.showDeleteDialog = function(profileInfo) {
+    ProfilesManageOverlay.setProfileInfo(profileInfo);
+    $('profiles-manage-overlay-manage').hidden = true;
+    $('profiles-manage-overlay-delete').hidden = false;
+    $('profiles-delete-message').textContent =
+        localStrings.getStringF('profilesDeleteMessage', profileInfo.name);
+
+    // Intentionally don't show the URL in the location bar as we don't want
+    // people trying to navigate here by hand.
+    OptionsPage.showPageByName('profilesManage', false);
+  };
+
+  // Export
+  return {
+    ProfilesManageOverlay: ProfilesManageOverlay
+  };
+});