[sync] Separate sign in from sync on Desktop Chrome

chrome/browser/resources/sync_setup_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() {
   /** @const */ var OptionsPage = options.OptionsPage;
 
   // Variable to track if a captcha challenge was issued. If this gets set to
   // true, it stays that way until we are told about successful login from
   // the browser.  This means subsequent errors (like invalid password) are
@@ skipping 17 matching lines @@
   // the new unified encryption UI is displayed instead of the old encryption
   // ui (where passphrase and encrypted types could be set independently of
   // each other).
   var keystoreEncryptionEnabled_ = false;
 
   // The last email address that this profile was connected to.  If the profile
   // was never connected this is an empty string.  Otherwise it is a normalized
   // email address.
   var lastEmailAddress_ = '';
 
+  // An object used as a cache of the arguments passed in while initially
+  // displaying the advanced sync settings dialog. Used to switch between the
+  // options in the main drop-down menu. Reset when the dialog is closed.
+  var syncConfigureArgs_ = null;
+
+  // A dictionary that maps the sync data type checkbox names to their checked
+  // state. Initialized when the advanced settings dialog is first brought up,
+  // updated any time a box is checked / unchecked, and reset when the dialog is
+  // closed. Used to restore checkbox state while switching between the options
+  // in the main drop-down menu. All checkboxes are checked and disabled when
+  // the "Sync everything" menu-item is selected, and unchecked and disabled
+  // when "Sync nothing" is selected. When "Choose what to sync" is selected,
+  // the boxes are restored to their most recent checked state from this cache.
+  var dataTypeBoxes_ = {};
+
+  /**
+   * The user's selection in the synced data type drop-down menu, as an index.
+   * @enum {number}
+   * @const
+   */
+  var DataTypeSelection = {
+    SYNC_EVERYTHING: 0,
+    CHOOSE_WHAT_TO_SYNC: 1,
+    SYNC_NOTHING: 2
+  };
+
   /**
    * SyncSetupOverlay class
    * Encapsulated handling of the 'Sync Setup' overlay page.
    * @class
    */
   function SyncSetupOverlay() {
     OptionsPage.call(this, 'syncSetup',
                      loadTimeData.getString('syncSetupOverlayTabTitle'),
                      'sync-setup-overlay');
   }
@@ skipping 40 matching lines @@
         self.closeOverlay_();
       };
       $('different-email').innerHTML = loadTimeData.getString('differentEmail');
     },
 
     showOverlay_: function() {
       OptionsPage.navigateToPage('syncSetup');
     },
 
     closeOverlay_: function() {
+      this.syncConfigureArgs_ = null;
+      this.dataTypeBoxes_ = {};
       OptionsPage.closeOverlay();
     },
 
     /** @override */
     didShowPage: function() {
       chrome.send('SyncSetupShowSetupUI');
     },
 
     /** @override */
     didClosePage: function() {
@@ skipping 30 matching lines @@
     onPassphraseRadioChanged_: function() {
       var visible = this.getPassphraseRadioCheckedValue_() == 'explicit';
       $('sync-custom-passphrase').hidden = !visible;
     },
 
     onEncryptionRadioChanged_: function() {
       var visible = $('full-encryption-option').checked;
       $('sync-custom-passphrase').hidden = !visible;
     },
 
-    checkAllDataTypeCheckboxes_: function() {
-      // Only check the visible ones (since there's no way to uncheck
-      // the invisible ones).
+    /**
+     * Sets the checked state of the individual sync data type checkboxes in the
+     * advanced sync settings dialog.
+     * @param {boolean} value True for checked, false for unchecked.
+     * @private
+     */
+    checkAllDataTypeCheckboxes_: function(value) {
+      // Only check / uncheck the visible ones (since there's no way to uncheck
+      // / check the invisible ones).
       var checkboxes = $('choose-data-types-body').querySelectorAll(
           '.sync-type-checkbox:not([hidden]) input');
       for (var i = 0; i < checkboxes.length; i++) {
-        checkboxes[i].checked = true;
+        checkboxes[i].checked = value;
       }
     },
 
+    /**
+     * Restores the checked states of the sync data type checkboxes in the
+     * advanced sync settings dialog. Called when "Choose what to sync" is
+     * selected. Required because all the checkboxes are checked when
+     * "Sync everything" is selected, and unchecked when "Sync nothing" is
+     * selected. Note: We only restore checkboxes for data types that are
+     * actually visible and whose old values are found in the cache, since it's
+     * possible for some data types to not be registered, and therefore, their
+     * checkboxes remain hidden, and never get cached.
+     * @private
+     */
+    restoreDataTypeCheckboxes_: function() {
+      for (dataType in dataTypeBoxes_) {
+        $(dataType).checked = dataTypeBoxes_[dataType];
+      }
+    },
+
+    /**
+     * Enables / grays out the sync data type checkboxes in the advanced
+     * settings dialog.
+     * @param {boolean} enabled True for enabled, false for grayed out.
+     * @private
+     */
     setDataTypeCheckboxesEnabled_: function(enabled) {
       var checkboxes = $('choose-data-types-body').querySelectorAll('input');
       for (var i = 0; i < checkboxes.length; i++) {
         checkboxes[i].disabled = !enabled;
       }
     },
 
-    setCheckboxesToKeepEverythingSynced_: function(value) {
-      this.setDataTypeCheckboxesEnabled_(!value);
-      if (value)
-        this.checkAllDataTypeCheckboxes_();
+    /**
+     * Sets the state of the sync data type checkboxes based on whether "Sync
+     * everything", "Choose what to sync", or "Sync nothing" are selected in the
+     * drop-down menu of the advanced settings dialog.
+     * @param {cr.DataTypeSelection} selectedIndex Index of user's selection.
+     * @private
+     */
+    setDataTypeCheckboxes_: function(selectedIndex) {
+      if (selectedIndex == DataTypeSelection.CHOOSE_WHAT_TO_SYNC) {
+        this.setDataTypeCheckboxesEnabled_(true);
+        this.restoreDataTypeCheckboxes_();
+      } else {
+        this.setDataTypeCheckboxesEnabled_(false);
+        this.checkAllDataTypeCheckboxes_(selectedIndex ==
+                                         DataTypeSelection.SYNC_EVERYTHING);
+      }
     },
 
     // Returns true if none of the visible checkboxes are checked.
     noDataTypesChecked_: function() {
       var query = '.sync-type-checkbox:not([hidden]) input:checked';
       var checkboxes = $('choose-data-types-body').querySelectorAll(query);
       return checkboxes.length == 0;
     },
 
     checkPassphraseMatch_: function() {
@@ skipping 22 matching lines @@
         return false;
       }
 
       return true;
     },
 
     sendConfiguration_: function() {
       // Trying to submit, so hide previous errors.
       $('error-text').hidden = true;
 
-      var syncAll = $('sync-select-datatypes').selectedIndex == 0;
-      if (!syncAll && this.noDataTypesChecked_()) {
+      var chooseWhatToSync = $('sync-select-datatypes').selectedIndex ==
+                             DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
+      if (chooseWhatToSync && this.noDataTypesChecked_()) {
         $('error-text').hidden = false;
         return;
       }
 
       var encryptAllData = this.getEncryptionRadioCheckedValue_() == 'all';
       if (!encryptAllData &&
           $('full-encryption-option').checked &&
           this.keystoreEncryptionEnabled_) {
         encryptAllData = true;
       }
@@ skipping 27 matching lines @@
         usePassphrase = false;
       }
 
       // Don't allow the user to tweak the settings once we send the
       // configuration to the backend.
       this.setInputElementsDisabledState_(true);
       this.animateDisableLink_($('use-default-link'), true, null);
 
       // These values need to be kept in sync with where they are read in
       // SyncSetupFlow::GetDataTypeChoiceData().
+      var syncAll = $('sync-select-datatypes').selectedIndex ==
+                    DataTypeSelection.SYNC_EVERYTHING;
+      var syncNothing = $('sync-select-datatypes').selectedIndex ==
+                        DataTypeSelection.SYNC_NOTHING;
       var result = JSON.stringify({
         'syncAllDataTypes': syncAll,
+        'syncNothing': syncNothing,
         'bookmarksSynced': syncAll || $('bookmarks-checkbox').checked,
         'preferencesSynced': syncAll || $('preferences-checkbox').checked,
         'themesSynced': syncAll || $('themes-checkbox').checked,
         'passwordsSynced': syncAll || $('passwords-checkbox').checked,
         'autofillSynced': syncAll || $('autofill-checkbox').checked,
         'extensionsSynced': syncAll || $('extensions-checkbox').checked,
         'typedUrlsSynced': syncAll || $('typed-urls-checkbox').checked,
         'appsSynced': syncAll || $('apps-checkbox').checked,
         'tabsSynced': syncAll || $('tabs-checkbox').checked,
         'encryptAllData': encryptAllData,
@@ skipping 14 matching lines @@
      */
     setInputElementsDisabledState_: function(disabled) {
       var configureElements =
           $('customize-sync-preferences').querySelectorAll('input');
       for (var i = 0; i < configureElements.length; i++)
         configureElements[i].disabled = disabled;
       $('sync-select-datatypes').disabled = disabled;
 
       var self = this;
       this.animateDisableLink_($('customize-link'), disabled, function() {
-        self.showCustomizePage_(null, true);
+        self.showCustomizePage_(null, DataTypeSelection.SYNC_EVERYTHING);
       });
     },
 
     /**
      * Animate a link being enabled/disabled. The link is hidden by animating
      * its opacity, but to ensure the user doesn't click it during that time,
      * its onclick handler is changed to null as well.
      * @param {HTMLElement} elt The anchor element to enable/disable.
      * @param {boolean} disabled True if the link should be disabled.
      * @param {function} enabledFunction The onclick handler when the link is
@@ skipping 11 matching lines @@
           elt.classList.remove('transparent');
           elt.hidden = true;
         });
       } else {
         elt.hidden = false;
         elt.onclick = enabledFunction;
       }
     },
 
     /**
-     * Shows or hides the Sync data type checkboxes in the advanced
-     * configuration screen.
+     * Shows or hides the sync data type checkboxes in the advanced sync
+     * settings dialog. Also initializes |dataTypeBoxes_| with their values, and
+     * makes their onclick handlers update |dataTypeBoxes_|.
      * @param {Object} args The configuration data used to show/hide UI.
      * @private
      */
     setChooseDataTypesCheckboxes_: function(args) {
       var datatypeSelect = $('sync-select-datatypes');
-      datatypeSelect.selectedIndex = args.syncAllDataTypes ? 0 : 1;
+      datatypeSelect.selectedIndex = args.syncAllDataTypes ?
+                                         DataTypeSelection.SYNC_EVERYTHING :
+                                         DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
 
       $('bookmarks-checkbox').checked = args.bookmarksSynced;
+      dataTypeBoxes_['bookmarks-checkbox'] = args.bookmarksSynced;
+      $('bookmarks-checkbox').onclick = this.handleDataTypeClick_;
+
       $('preferences-checkbox').checked = args.preferencesSynced;
+      dataTypeBoxes_['preferences-checkbox'] = args.preferencesSynced;
+      $('preferences-checkbox').onclick = this.handleDataTypeClick_;
+
       $('themes-checkbox').checked = args.themesSynced;
+      dataTypeBoxes_['themes-checkbox'] = args.themesSynced;
+      $('themes-checkbox').onclick = this.handleDataTypeClick_;
 
       if (args.passwordsRegistered) {
         $('passwords-checkbox').checked = args.passwordsSynced;
+        dataTypeBoxes_['passwords-checkbox'] = args.passwordsSynced;
+        $('passwords-checkbox').onclick = this.handleDataTypeClick_;
         $('passwords-item').hidden = false;
       } else {
         $('passwords-item').hidden = true;
       }
       if (args.autofillRegistered) {
         $('autofill-checkbox').checked = args.autofillSynced;
+        dataTypeBoxes_['autofill-checkbox'] = args.autofillSynced;
+        $('autofill-checkbox').onclick = this.handleDataTypeClick_;
         $('autofill-item').hidden = false;
       } else {
         $('autofill-item').hidden = true;
       }
       if (args.extensionsRegistered) {
         $('extensions-checkbox').checked = args.extensionsSynced;
+        dataTypeBoxes_['extensions-checkbox'] = args.extensionsSynced;
+        $('extensions-checkbox').onclick = this.handleDataTypeClick_;
         $('extensions-item').hidden = false;
       } else {
         $('extensions-item').hidden = true;
       }
       if (args.typedUrlsRegistered) {
         $('typed-urls-checkbox').checked = args.typedUrlsSynced;
+        dataTypeBoxes_['typed-urls-checkbox'] = args.typedUrlsSynced;
+        $('typed-urls-checkbox').onclick = this.handleDataTypeClick_;
         $('omnibox-item').hidden = false;
       } else {
         $('omnibox-item').hidden = true;
       }
       if (args.appsRegistered) {
         $('apps-checkbox').checked = args.appsSynced;
+        dataTypeBoxes_['apps-checkbox'] = args.appsSynced;
+        $('apps-checkbox').onclick = this.handleDataTypeClick_;
         $('apps-item').hidden = false;
       } else {
         $('apps-item').hidden = true;
       }
       if (args.tabsRegistered) {
         $('tabs-checkbox').checked = args.tabsSynced;
+        dataTypeBoxes_['tabs-checkbox'] = args.tabsSynced;
+        $('tabs-checkbox').onclick = this.handleDataTypeClick_;
         $('tabs-item').hidden = false;
       } else {
         $('tabs-item').hidden = true;
       }
 
-      this.setCheckboxesToKeepEverythingSynced_(args.syncAllDataTypes);
+      this.setDataTypeCheckboxes_(datatypeSelect.selectedIndex);
+    },
+
+    /**
+     * Updates the cached values of the sync data type checkboxes stored in
+     * |dataTypeBoxes_|. Used as an onclick handler for each data type checkbox.
+     * @private
+     */
+    handleDataTypeClick_: function() {
+      dataTypeBoxes_[this.id] = this.checked;
     },
 
     setEncryptionRadios_: function(args) {
       if (args.encryptAllData) {
         $('encrypt-all-option').checked = true;
         this.disableEncryptionRadioGroup_();
       } else {
         $('encrypt-sensitive-option').checked = true;
       }
 
@@ skipping 21 matching lines @@
 
     setCheckboxesAndErrors_: function(args) {
       this.setChooseDataTypesCheckboxes_(args);
       this.setEncryptionRadios_(args);
       this.setPassphraseRadios_(args);
     },
 
     showConfigure_: function(args) {
       var datatypeSelect = $('sync-select-datatypes');
       var self = this;
+
+      // Cache the sync config args so they can be reused when we transition
+      // between the drop-down menu items in the advanced settings dialog.
+      if (args)
+        this.syncConfigureArgs_ = args;
+
+      // Once the advanced sync settings dialog is visible, we transition
+      // between its drop-down menu items as follows:
+      // "Sync everything": Show encryption and passphrase sections, and disable
+      // and check all data type checkboxes.
+      // "Sync everything": Hide encryption and passphrase sections, and disable
+      // and uncheck all data type checkboxes.
+      // "Choose what to sync": Show encryption and passphrase sections, enable
+      // data type checkboxes, and restore their checked state to the last time
+      // the "Choose what to sync" was selected while the dialog was still up.
       datatypeSelect.onchange = function() {
-        var syncAll = this.selectedIndex == 0;
-        self.setCheckboxesToKeepEverythingSynced_(syncAll);
+        if (this.selectedIndex == DataTypeSelection.SYNC_NOTHING) {
+          self.showSyncNothingPage_();
+        } else {
+          self.showCustomizePage_(self.syncConfigureArgs_, this.selectedIndex);
+          if (this.selectedIndex == DataTypeSelection.SYNC_EVERYTHING)
+            self.checkAllDataTypeCheckboxes_(true);
+          else
+            self.restoreDataTypeCheckboxes_();
+        }
       };
 
       this.resetPage_('sync-setup-configure');
       $('sync-setup-configure').hidden = false;
 
       // onsubmit is changed when submitting a passphrase. Reset it to its
       // default.
       $('choose-data-types-form').onsubmit = function() {
         self.sendConfiguration_();
         return false;
       };
 
       if (args) {
         this.setCheckboxesAndErrors_(args);
 
         this.useEncryptEverything_ = args.encryptAllData;
 
-        // Whether to display the 'Sync everything' confirmation page or the
-        // customize data types page.
-        var syncAllDataTypes = args.syncAllDataTypes;
+        // Determine whether to display the 'OK, sync everything' confirmation
+        // dialog or the advanced sync settings dialog.
         this.usePassphrase_ = args.usePassphrase;
         this.keystoreEncryptionEnabled_ = args.keystoreEncryptionEnabled;
         if (args.showSyncEverythingPage == false || this.usePassphrase_ ||
-            syncAllDataTypes == false || args.showPassphrase) {
-          this.showCustomizePage_(args, syncAllDataTypes);
+            args.syncAllDataTypes == false || args.showPassphrase) {
+          var index = args.syncAllDataTypes ?
+                          DataTypeSelection.SYNC_EVERYTHING :
+                          DataTypeSelection.CHOOSE_WHAT_TO_SYNC;
+          this.showCustomizePage_(args, index);
         } else {
           this.showSyncEverythingPage_();
         }
       }
     },
 
     showSpinner_: function() {
       this.resetPage_('sync-setup-spinner');
       $('sync-setup-spinner').hidden = false;
     },
 
     showTimeoutPage_: function() {
       this.resetPage_('sync-setup-timeout');
       $('sync-setup-timeout').hidden = false;
     },
 
     showSyncEverythingPage_: function() {
       $('confirm-sync-preferences').hidden = false;
       $('customize-sync-preferences').hidden = true;
 
       // Reset the selection to 'Sync everything'.
       $('sync-select-datatypes').selectedIndex = 0;
 
       // The default state is to sync everything.
-      this.setCheckboxesToKeepEverythingSynced_(true);
+      this.setDataTypeCheckboxes_(DataTypeSelection.SYNC_EVERYTHING);
 
       // Encrypt passwords is the default, but don't set it if the previously
       // synced account is already set to encrypt everything.
       if (!this.useEncryptEverything_)
         $('encrypt-sensitive-option').checked = true;
 
       // If the account is not synced with a custom passphrase, reset the
       // passphrase radio when switching to the 'Sync everything' page.
       if (!this.usePassphrase_) {
         $('google-option').checked = true;
         $('sync-custom-passphrase').hidden = true;
       }
 
       if (!this.useEncryptEverything_ && !this.usePassphrase_)
         $('basic-encryption-option').checked = true;
 
       $('confirm-everything-ok').focus();
     },
 
     /**
+     * Reveals the UI for when the user chooses not to sync any data types.
+     * This happens when the user signs in and selects "Sync nothing" in the
+     * advanced sync settings dialog.
+     * @private
+     */
+    showSyncNothingPage_: function() {
+      // Reset the selection to 'Sync nothing'.
+      $('sync-select-datatypes').selectedIndex = DataTypeSelection.SYNC_NOTHING;
+
+      // Uncheck and disable the individual data type checkboxes.
+      this.checkAllDataTypeCheckboxes_(false);
+      this.setDataTypeCheckboxesEnabled_(false);
+
+      // Hide the encryption section.
+      $('customize-sync-encryption').hidden = true;
+      $('customize-sync-encryption-new').hidden = true;
+      $('sync-custom-passphrase-container').hidden = true;
+      $('sync-existing-passphrase-container').hidden = true;
+
+      // Hide the "use default settings" link.
+      $('use-default-link').hidden = true;
+    },
+
+    /**
      * Reveals the UI for entering a custom passphrase during initial setup.
      * This happens if the user has previously enabled a custom passphrase on a
      * different machine.
      * @param {Array} args The args that contain the passphrase UI
      *     configuration.
      * @private
      */
     showPassphraseContainer_: function(args) {
       // Once we require a passphrase, we prevent the user from returning to
       // the Sync Everything pane.
@@ skipping 18 matching lines @@
       // Warn the user about their incorrect passphrase if we need a passphrase
       // and the passphrase field is non-empty (meaning they tried to set it
       // previously but failed).
       $('incorrect-passphrase').hidden =
           !(args.usePassphrase && args.passphraseFailed);
 
       $('sync-passphrase-warning').hidden = false;
       $('passphrase').focus();
     },
 
-    /** @private */
-    showCustomizePage_: function(args, syncEverything) {
+    /**
+     * Displays the advanced sync setting dialog, and pre-selects either the
+     * "Sync everything" or the "Choose what to sync" drop-down menu item.
+     * @param {cr.DataTypeSelection} index Index of item to pre-select.
+     * @private
+     */
+    showCustomizePage_: function(args, index) {
       $('confirm-sync-preferences').hidden = true;
       $('customize-sync-preferences').hidden = false;
 
       $('sync-custom-passphrase-container').hidden = false;
 
       if (this.keystoreEncryptionEnabled_) {
         $('customize-sync-encryption').hidden = true;
         $('sync-custom-passphrase-options').hidden = true;
         $('sync-new-encryption-section-container').hidden = false;
         $('customize-sync-encryption-new').hidden = false;
       } else {
         $('customize-sync-encryption').hidden = false;
         $('sync-custom-passphrase-options').hidden = false;
         $('customize-sync-encryption-new').hidden = true;
       }
 
       $('sync-existing-passphrase-container').hidden = true;
 
-      // If the user has selected the 'Customize' page on initial set up, it's
-      // likely he intends to change the data types. Select the
-      // 'Choose data types' option in this case.
-      var index = syncEverything ? 0 : 1;
       $('sync-select-datatypes').selectedIndex = index;
-      this.setDataTypeCheckboxesEnabled_(!syncEverything);
+      this.setDataTypeCheckboxesEnabled_(
+          index == DataTypeSelection.CHOOSE_WHAT_TO_SYNC);
 
       // The passphrase input may need to take over focus from the OK button, so
       // set focus before that logic.
       $('choose-datatypes-ok').focus();
 
       if (args && args.showPassphrase) {
         this.showPassphraseContainer_(args);
       } else {
         // We only show the 'Use Default' link if we're not prompting for an
         // existing passphrase.
@@ skipping 445 matching lines @@
 
   SyncSetupOverlay.getLoginPasswd = function() {
     return SyncSetupOverlay.getInstance().getLoginPasswd_();
   };
 
   SyncSetupOverlay.getSignInButton = function() {
     return SyncSetupOverlay.getInstance().getSignInButton_();
   };
 
   // These methods are for general consumption.
+  SyncSetupOverlay.closeOverlay = function() {
+    SyncSetupOverlay.getInstance().closeOverlay_();
+  };
+
   SyncSetupOverlay.showErrorUI = function() {
     SyncSetupOverlay.getInstance().showErrorUI_();
   };
 
   SyncSetupOverlay.showSetupUI = function() {
     SyncSetupOverlay.getInstance().showSetupUI_();
   };
 
   SyncSetupOverlay.startSignIn = function() {
     SyncSetupOverlay.getInstance().startSignIn_();
@@ skipping 17 matching lines @@
 
   SyncSetupOverlay.showStopSyncingUI = function() {
     SyncSetupOverlay.getInstance().showStopSyncingUI_();
   };
 
   // Export
   return {
     SyncSetupOverlay: SyncSetupOverlay
   };
 });