Multi-profile WebUI settings

chrome/browser/resources/options/personal_options.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;
 
   // State variables.
   var syncEnabled = false;
   var syncSetupCompleted = false;
 
   /**
    * Encapsulated handling of personal options page.
    * @constructor
    */
   function PersonalOptions() {
     OptionsPage.call(this, 'personal',
                      templateData.personalPageTabTitle,
                      'personal-page');
   }
 
   cr.addSingletonGetter(PersonalOptions);
 
   PersonalOptions.prototype = {
     // Inherit PersonalOptions from OptionsPage.
     __proto__: options.OptionsPage.prototype,
 
     // Initialize PersonalOptions page.
     initializePage: function() {
       // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
+
+      // sync

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

Sync.

Capitalize comment sentences (or word) and add period, here and elsewhere.

       $('sync-action-link').onclick = function(event) {
         SyncSetupOverlay.showErrorUI();
       };
       $('start-stop-sync').onclick = function(event) {
         if (self.syncSetupCompleted)
           SyncSetupOverlay.showStopSyncingUI();
         else
           SyncSetupOverlay.showSetupUI();
       };
       $('customize-sync').onclick = function(event) {
         SyncSetupOverlay.showSetupUI();
       };
+
+      // profiles
+      var profilesList = $('profiles-list');
+      options.personal_options.ProfileList.decorate(profilesList);
+      profilesList.autoExpands = true;
+
+      profilesList.addEventListener('change', function(event) {

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

onchange = function(...

+        var selectedProfile = profilesList.selectedItem;
+        var hasSelection = selectedProfile != null;
+        $('profiles-manage').disabled = !hasSelection;
+        $('profiles-delete').disabled = !hasSelection;
+      });
+      $('profiles-create').onclick = function(event) {
+        chrome.send('profilesCreate');
+      };
+      $('profiles-manage').onclick = function(event) {
+        var selectedProfile = self.getSelectedProfileItem_();
+        if (selectedProfile) {
+          ProfilesManageOverlay.show(selectedProfile);
+        }
+      };
+      $('profiles-delete').onclick = function(event) {
+        var selectedProfile = self.getSelectedProfileItem_();
+        if (!selectedProfile)
+          return;
+
+        ProfilesManageOverlay.showDeleteDialog(selectedProfile);
+        chrome.send('profilesDeleteShowWarnings', selectedProfile.filePath);
+      };
+
+      // passwords
       $('manage-passwords').onclick = function(event) {
         OptionsPage.navigateToPage('passwords');
         OptionsPage.showTab($('passwords-nav-tab'));
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ShowPasswordManager']);
       };
+
+      // autofill
       $('autofill-settings').onclick = function(event) {
         OptionsPage.navigateToPage('autofill');
         chrome.send('coreOptionsUserMetricsAction',
             ['Options_ShowAutofillSettings']);
       };
+
+      // appearance
       $('themes-reset').onclick = function(event) {
         chrome.send('themesReset');
       };
 
       if (!cr.isChromeOS) {
         $('import-data').onclick = function(event) {
           // Make sure that any previous import success message is hidden, and
           // we're showing the UI to import further data.
           $('import-data-configure').hidden = false;
           $('import-data-success').hidden = true;
@@ skipping 98 matching lines @@
     },
 
     setSyncActionLinkLabel_: function(status) {
       $('sync-action-link').textContent = status;
 
       // link-button does is not zero-area when the contents of the button are
       // empty, so explicitly hide the element.
       $('sync-action-link').hidden = !status.length;
     },
 
+    /**
+     * Display or hide the profiles section of the page. This is used for
+     * multi-profile settings.
+     * @param {boolean} visible True to show the section.
+     * @private
+     */
     setProfilesSectionVisible_: function(visible) {
-      $('profiles-create').hidden = !visible;
+      $('profiles-section').hidden = !visible;
     },
 
-    setNewProfileButtonEnabled_: function(enabled) {
-      $('new-profile').disabled = !enabled;
-      if (enabled)
-        $('profiles-create').classList.remove('disabled');
-      else
-        $('profiles-create').classList.add('disabled');
+    /**
+     * Get the selected profile item from the profile list. This also works
+     * correctly if the list is not displayed.
+     * @return {Object} the profile item object, or null if nothing is selected.
+     * @private
+     */
+    getSelectedProfileItem_: function() {
+      var profilesList = $('profiles-list');
+      if (profilesList.hidden) {
+        if (profilesList.dataModel.length > 0)
+          return profilesList.dataModel.item(0);
+      } else {
+        return profilesList.selectedItem;
+      }
+      return null;
+    },
+
+    /**
+     * Delete the profile given by |profileInfo|.
+     * @param {Object} profileInfo The profile info object of the profile that
+     *     should be deleted.
+     */
+    deleteProfile_: function(profileInfo) {
+      chrome.send('profilesDelete', [profileInfo.filePath]);

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

rename: deleteProfile

+    },
+
+    /**
+     * Display the correct dialog layout, depending on how many profiles are
+     * available.
+     * @param {number} The number of profiles to display.

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

@param {number} numProfiles The...

+     */
+    setProfileViewSingle_: function(numProfiles) {
+      $('profiles-list').hidden = numProfiles <= 1;

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

You can do the same for profiles-manage and profiles-delete as well.

+      if (numProfiles <= 1) {
+        $('profiles-manage').hidden = true;
+        $('profiles-delete').hidden = true;
+      } else {
+        $('profiles-list').redraw();
+        $('profiles-manage').hidden = false;
+        $('profiles-delete').hidden = false;
+      }
+    },
+
+    /**
+     * Called by the C++ handler. Adds all |profiles| to the list.

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

No need to specify the first sentence.

+     * @param {Array.<Object>} An array of profile info objects.
+     *     each object is like:

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

s/like/of the form/

+     *       profileInfo = {
+     *         name: "Profile Name",
+     *         iconURL: "chrome://path/to/icon/image",
+     *         filePath: "/path/to/profile/data/on/disk",
+     *         isCurrentProfile: false
+     *       };
+     */
+    setProfilesInfo_: function(profiles) {
+      this.setProfileViewSingle_(profiles.length);
+      // add it to the list, even if the list is hidden so we can access it
+      // later.
+      $('profiles-list').dataModel = new ArrayDataModel(profiles);
     },
 
     setStartStopButtonVisible_: function(visible) {
       $('start-stop-sync').hidden = !visible;
     },
 
     setStartStopButtonEnabled_: function(enabled) {
       $('start-stop-sync').disabled = !enabled;
     },
 
@@ skipping 53 matching lines @@
 
   // Forward public APIs to private implementations.
   [
     'setSyncEnabled',
     'setSyncSetupCompleted',
     'setAccountPicture',
     'setSyncStatus',
     'setSyncStatusErrorVisible',
     'setSyncActionLinkEnabled',
     'setSyncActionLinkLabel',
+    'setProfilesInfo',
     'setProfilesSectionVisible',
-    'setNewProfileButtonEnabled',
     'setStartStopButtonVisible',
     'setStartStopButtonEnabled',
     'setStartStopButtonLabel',
     'setGtkThemeButtonEnabled',
     'setThemesResetButtonEnabled',
     'hideSyncSection',
     'setRegisteredDataTypes',
   ].forEach(function(name) {
     PersonalOptions[name] = function(value) {
       PersonalOptions.getInstance()[name + '_'](value);
     };
   });
 
   // Export
   return {
     PersonalOptions: PersonalOptions
   };
 
 });