dom-ui sync: Eliminate jank when customizing sync settings.

chrome/browser/resources/options/sync_setup_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() {
   const 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 65 matching lines @@
         self.sendConfiguration_();
       };
       $('use-default-link').onclick = function() {
         self.showSyncEverythingPage_();
       };
       $('cancel-no-button').onclick = function() {
         self.hideCancelWarning_();
         return false;
       };
       $('cancel-yes-button').onclick = function() {
-        chrome.send('PassphraseCancel', ['']);
+        chrome.send('SyncSetupPassphraseCancel', ['']);
         return false;
       };
       $('passphrase-form').onsubmit = $('passphrase-ok').onclick = function() {
         self.sendPassphraseAndClose_();
         return false;
       };
       $('passphrase-cancel').onclick = function() {
         self.showCancelWarning_();
         return false;
       };
     },
 
+    showOverlay_: function() {
+      OptionsPage.navigateToPage('syncSetup');
+    },
+
     closeOverlay_: function() {
       OptionsPage.closeOverlay();
     },
 
     /** @inheritDoc */
     didShowPage: function() {
-      chrome.send('didShowPage');
+      chrome.send('SyncSetupAttachHandler');
     },
 
     /** @inheritDoc */
     didClosePage: function() {
-      chrome.send('didClosePage');
+      chrome.send('SyncSetupDidClosePage');
     },
 
     showCancelWarning_: function() {
       $('cancel-warning-box').hidden = false;
       $('passphrase-ok').disabled = true;
       $('passphrase-cancel').disabled = true;
       $('cancel-no-button').focus();
     },
 
     sendPassphraseAndClose_: function() {
       var f = $('passphrase-form');
       var result = JSON.stringify({"passphrase": f.passphrase.value});
-      chrome.send("Passphrase", [result]);
+      chrome.send('SyncSetupPassphrase', [result]);
     },
 
     getRadioCheckedValue_: function() {
       var f = $('choose-data-types-form');
       for (var i = 0; i < f.option.length; ++i) {
         if (f.option[i].checked) {
           return f.option[i].value;
         }
       }
 
@@ skipping 95 matching lines @@
         $('error-text').className = "sync-error-show";
         return;
       }
 
       var f = $('choose-data-types-form');
       if (!this.checkPassphraseMatch_())
         return;
 
       // Don't allow the user to tweak the settings once we send the
       // configuration to the backend.
-      this.disableConfigureElements_();
+      this.setInputElementsDisabledState_(true);
 
       var syncAll =
         document.getElementById('sync-select-datatypes').selectedIndex == 0;
 
       // These values need to be kept in sync with where they are read in
       // SyncSetupFlow::GetDataTypeChoiceData().
       var result = JSON.stringify({
           "keepEverythingSynced": syncAll,
           "syncBookmarks": syncAll || $('bookmarks-checkbox').checked,
           "syncPreferences": syncAll || $('preferences-checkbox').checked,
           "syncThemes": syncAll || $('themes-checkbox').checked,
           "syncPasswords": syncAll || $('passwords-checkbox').checked,
           "syncAutofill": syncAll || $('autofill-checkbox').checked,
           "syncExtensions": syncAll || $('extensions-checkbox').checked,
           "syncTypedUrls": syncAll || $('typed-urls-checkbox').checked,
           "syncApps": syncAll || $('apps-checkbox').checked,
           "syncSessions": syncAll || $('sessions-checkbox').checked,
           "usePassphrase": (this.getRadioCheckedValue_() == 'explicit'),
           "passphrase": $('custom-passphrase').value
       });
-      chrome.send("Configure", [result]);
+      chrome.send('SyncSetupConfigure', [result]);
     },
 
     /**
-     * Disables all input elements within the 'Customize Sync Preferences'
-     * screen. This is used to prohibit the user from changing the inputs after
-     * confirming the customized sync preferences.
+     * Sets the disabled property of all input elements within the 'Customize
+     * Sync Preferences' screen. This is used to prohibit the user from changing
+     * the inputs after confirming the customized sync preferences, or resetting
+     * the state when re-showing the dialog.
+     * @param disabled True if controls should be set to disabled.
      * @private
      */
-    disableConfigureElements_: function() {
+    setInputElementsDisabledState_: function(disabled) {
       var configureElements =
           $('customize-sync-preferences').querySelectorAll('input');
       for (var i = 0; i < configureElements.length; i++)
-        configureElements[i].disabled = true;
+        configureElements[i].disabled = disabled;
     },
 
     setChooseDataTypesCheckboxes_: function(args) {
       // If this frame is on top, the focus should be on it, so pressing enter
       // submits this form.
       if (args.iframeToShow == 'configure') {
         $('choose-datatypes-ok').focus();
       }
 
       var datatypeSelect = document.getElementById('sync-select-datatypes');
@@ skipping 124 matching lines @@
 
       // 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;
       document.getElementById('sync-select-datatypes').selectedIndex = index;
       this.setDataTypeCheckboxesEnabled_(!syncEverything);
       $('choose-datatypes-ok').focus();
     },
 
+    attach_: function() {
+      chrome.send('SyncSetupAttachHandler');
+    },
+
     showSyncSetupPage_: function(page, args) {
       if (page == 'settingUp') {
         this.setThrobbersVisible_(true);
         return;
       } else {
         this.setThrobbersVisible_(false);
       }
 
       // Hide an existing visible overlay.
       var overlay = $('sync-setup-overlay');
       for (var i = 0; i < overlay.children.length; i++)
         overlay.children[i].classList.add('hidden');
 
+      this.setInputElementsDisabledState_(false);
+
       if (page == 'login')
         this.showGaiaLogin_(args);
       else if (page == 'configure')
         this.showConfigure_(args);
       else if (page == 'passphrase')
         this.showPassphrase_(args);
-      else if (page == 'done')
+
+      if (page == 'done')
         this.closeOverlay_();
+      else
+        this.showOverlay_();
     },
 
     setThrobbersVisible_: function(visible) {
       var throbbers = document.getElementsByClassName("throbber");
         for (var i = 0; i < throbbers.length; i++)
           throbbers[i].style.visibility = visible ? "visible" : "hidden";
     },
 
     showPassphrase_: function(args) {
       $('sync-setup-passphrase').classList.remove('hidden');
@@ skipping 174 matching lines @@
       $('logging-in-throbber').style.visibility = "visible";
 
       var f = $('gaia-login-form');
       var email = $('gaia-email');
       var passwd = $('gaia-passwd');
       var result = JSON.stringify({"user" : email.value,
                                    "pass" : passwd.value,
                                    "captcha" : f.captchaValue.value,
                                    "access_code" : f.accessCode.value});
       $('sign-in').disabled = true;
-      chrome.send("SubmitAuth", [result]);
+      chrome.send('SyncSetupSubmitAuth', [result]);
     },
 
     showGaiaSuccessAndClose_: function() {
       $('sign-in').value = localStrings.getString('loginSuccess');
       setTimeout(this.closeOverlay_, 1600);
     },
 
     showSuccessAndSettingUp_: function() {
       $('sign-in').value = localStrings.getString('settingUp');
     },
 
     /** @inheritDoc */
     shouldClose: function() {
       if (!$('cancel-warning-box').hidden) {
-        chrome.send('PassphraseCancel', ['']);
+        chrome.send('SyncSetupPassphraseCancel', ['']);
         return true;
       } else if (!$('sync-setup-passphrase').classList.contains('hidden')) {
         // The Passphrase page is showing, and the use has pressed escape.
         // Activate the cancel logic in this case.
         this.showCancelWarning_();
         return false;
       }
 
       return true;
     },
   };
 
+  SyncSetupOverlay.showSyncDialog = function() {
+    SyncSetupOverlay.getInstance().attach_();
+  };
+
   SyncSetupOverlay.showSyncSetupPage = function(page, args) {
     SyncSetupOverlay.getInstance().showSyncSetupPage_(page, args);
   };
 
   SyncSetupOverlay.showSuccessAndClose = function() {
     SyncSetupOverlay.getInstance().showSuccessAndClose_();
   };
 
   SyncSetupOverlay.showSuccessAndSettingUp = function() {
     SyncSetupOverlay.getInstance().showSuccessAndSettingUp_();
   };
 
   // Export
   return {
     SyncSetupOverlay: SyncSetupOverlay
   };
 });