Sync UI: Fix up the HTML by moving divs outside of the label.

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 225 matching lines @@
         'passphrase': customPassphrase
       });
       chrome.send('SyncSetupConfigure', [result]);
     },
 
     /**
      * 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.
+     * @param {boolean} disabled True if controls should be set to disabled.
      * @private
      */
     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);
       });
     },
 
     /**
      * 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 elt The anchor element to enable/disable.
-     * @param disabled True if the link should be disabled.
-     * @param enabledFunction The onclick handler when the link is enabled.
+     * @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
+     *     enabled.
      * @private
      */
     animateDisableLink_: function(elt, disabled, enabledFunction) {
       if (disabled) {
         elt.classList.add('transparent');
         elt.onclick = null;
         elt.addEventListener('webkitTransitionEnd', function f(e) {
           if (e.propertyName != 'opacity')
             return;
           elt.removeEventListener('webkitTransitionEnd', f);
           elt.classList.remove('transparent');
           elt.hidden = true;
         });
       } else {
         elt.hidden = false;
         elt.onclick = enabledFunction;
       }
     },
 
     setChooseDataTypesCheckboxes_: function(args) {
-      var datatypeSelect = document.getElementById('sync-select-datatypes');
+      var datatypeSelect = $('sync-select-datatypes');

[Dan Beam, 2012/04/23 21:25:10]

where is util.js (the file that defines $) being included? I didn't see it in
this CL and I assume it's already there, but there have been regressions when
this isn't added as well...

[James Hawkins, 2012/04/23 21:32:04]

Done.

       datatypeSelect.selectedIndex = args.syncAllDataTypes ? 0 : 1;
 
       $('bookmarks-checkbox').checked = args.sync_bookmarks;
       $('preferences-checkbox').checked = args.sync_preferences;
       $('themes-checkbox').checked = args.sync_themes;
 
       if (args.passwords_registered) {
         $('passwords-checkbox').checked = args.sync_passwords;
         $('passwords-item').hidden = false;
       } else {
@@ skipping 55 matching lines @@
       }
     },
 
     setCheckboxesAndErrors_: function(args) {
       this.setChooseDataTypesCheckboxes_(args);
       this.setEncryptionRadios_(args);
       this.setPassphraseRadios_(args);
     },
 
     showConfigure_: function(args) {
-      var datatypeSelect = document.getElementById('sync-select-datatypes');
+      var datatypeSelect = $('sync-select-datatypes');
       var self = this;
       datatypeSelect.onchange = function() {
         var syncAll = this.selectedIndex == 0;
         self.setCheckboxesToKeepEverythingSynced_(syncAll);
       };
 
       this.resetPage_('sync-setup-configure');
       $('sync-setup-configure').hidden = false;
 
       // onsubmit is changed when submitting a passphrase. Reset it to its
@@ skipping 92 matching lines @@
       $('confirm-sync-preferences').hidden = true;
       $('customize-sync-preferences').hidden = false;
 
       $('sync-custom-passphrase-container').hidden = false;
       $('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;
-      document.getElementById('sync-select-datatypes').selectedIndex = index;
+      $('sync-select-datatypes').selectedIndex = index;
       this.setDataTypeCheckboxesEnabled_(!syncEverything);
 
       // 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['show_passphrase']) {
         this.showPassphraseContainer_(args);
       } else {
         // We only show the 'Use Default' link if we're not prompting for an
@@ skipping 118 matching lines @@
       $('gaia-passwd').disabled = false;
       $('captcha-value').disabled = false;
       $('captcha-wrapper').style.backgroundImage = url(args.captchaUrl);
     },
 
     /**
      * Reset the state of all descendant elements of a root element to their
      * initial state.
      * The initial state is specified by adding a class to the descendant
      * element in sync_setup_overlay.html.
-     * @param pageElementId The root page element id.
+     * @param {HTMLElement} pageElementId The root page element id.
      * @private
      */
     resetPage_: function(pageElementId) {
       var page = $(pageElementId);
       var forEach = function(arr, fn) {
         var length = arr.length;
         for (var i = 0; i < length; i++) {
           fn(arr[i]);
         }
       };
@@ skipping 20 matching lines @@
       var email = $('gaia-email');
       var passwd = $('gaia-passwd');
       if (f) {
         if (args.user != undefined) {
           if (email.value != args.user)
             passwd.value = ''; // Reset the password field
           email.value = args.user;
         }
 
         if (!args.editable_user) {
-          email.hidden = true;
+          $('email-row').hidden = true;
           var span = $('email-readonly');
           span.textContent = email.value;
-          span.hidden = false;
+          $('email-readonly-row').hidden = false;
           $('create-account-div').hidden = true;
         }
 
         f.accessCode.disabled = true;
       }
 
       if (1 == args.error) {
-        var access_code = document.getElementById('access-code');
+        var access_code = $('access-code');
         if (access_code.value) {
           $('errormsg-0-access-code').hidden = false;
           this.showAccessCodeRequired_();
         } else {
           $('errormsg-1-password').hidden = false;
         }
         this.setBlurbError_(args.error_message);
       } else if (3 == args.error) {
         $('errormsg-0-connection').hidden = false;
         this.setBlurbError_(args.error_message);
@@ skipping 199 matching lines @@
 
   SyncSetupOverlay.showStopSyncingUI = function() {
     SyncSetupOverlay.getInstance().showStopSyncingUI_();
   };
 
   // Export
   return {
     SyncSetupOverlay: SyncSetupOverlay
   };
 });