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

Also fix style issues while I'm here.

BUG=none
TEST=none
R=dbeam


Review URL: http://codereview.chromium.org/10186011

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@133599 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/sync_setup_overlay.css

@@ -298,6 +298,12 @@ html[dir='rtl'] #signin-header-logo {
   right: auto;
 }
 
+#email-row,
+#email-readonly-row,
+#password-row {
+  margin: 0 0 1.5em;
+}
+
 /* Sign in buttons. */
 
 .signin-box input[type=submit] {
@@ -315,8 +321,8 @@ html[dir='rtl'] #signin-header-logo {
   font-weight: bold;
   height: 32px;
   line-height: 27px;
-  margin-top: 0;
   margin-bottom: 1.2em;
+  margin-top: 0;
   min-width: 54px !important;
   padding: 0 8px;
 }
@@ -439,7 +445,7 @@ html[dir='rtl'] .signin-box input[type=password] {
 
 .signin-box label {
   display: block;
-  margin: 0 0 1.5em;
+  font-weight: bold;
 }
 
 /* Sign in miscellaneous. */

chrome/browser/resources/sync_setup_overlay.html

@@ -25,17 +25,18 @@
             </div>
             <form id="gaia-login-form">
               <div id="email-row" class="reset-shown">
-                <label>
-                  <strong class="email-label" i18n-content="emailLabel">
-                  </strong>
-                  <input id="gaia-email" type="text" name="email" value=""
-                      class="reset-enabled reset-shown reset-value"
-                      autocomplete="off">
-                  <div id="email-readonly" class="reset-hidden" hidden></div>
-                  <div id="errormsg-0-email" class="errormsg reset-hidden"
-                      i18n-content="cannotBeBlank" hidden>
-                  </div>
+                <label for="gaia-email" i18n-content="emailLabel">
                 </label>
+                <input id="gaia-email" type="text" name="email" value=""
+                    class="reset-enabled reset-shown reset-value"
+                    autocomplete="off">
+              </div>
+              <div id="email-readonly-row" class="reset-hidden">
+                <strong class="email-label" i18n-content="emailLabel"></strong>
+                <div id="email-readonly"></div>
+              </div>
+              <div id="errormsg-0-email" class="errormsg reset-hidden"
+                  i18n-content="cannotBeBlank" hidden>
               </div>
               <div id="password-row" class="reset-shown">
                 <label>
@@ -43,10 +44,10 @@
                   </strong>
                   <input id="gaia-passwd" type="password" name="passwd"
                       class="reset-enabled reset-value" autocomplete="off">
-                  <div id="errormsg-0-password" class="errormsg reset-hidden"
-                      i18n-content="cannotBeBlank" hidden>
-                  </div>
-                <label>
+                </label>
+                <div id="errormsg-0-password" class="errormsg reset-hidden"
+                    i18n-content="cannotBeBlank" hidden>
+                </div>
               </div>
               <div id="access-code-input-row"
                   class="access-code-row reset-hidden" hidden>

chrome/browser/resources/sync_setup_overlay.js

@@ -243,7 +243,7 @@ cr.define('options', function() {
      * 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) {
@@ -263,9 +263,10 @@ cr.define('options', function() {
      * 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) {
@@ -286,7 +287,7 @@ cr.define('options', function() {
     },
 
     setChooseDataTypesCheckboxes_: function(args) {
-      var datatypeSelect = document.getElementById('sync-select-datatypes');
+      var datatypeSelect = $('sync-select-datatypes');
       datatypeSelect.selectedIndex = args.syncAllDataTypes ? 0 : 1;
 
       $('bookmarks-checkbox').checked = args.sync_bookmarks;
@@ -362,7 +363,7 @@ cr.define('options', function() {
     },
 
     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;
@@ -475,7 +476,7 @@ cr.define('options', function() {
       // 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
@@ -614,7 +615,7 @@ cr.define('options', function() {
      * 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) {
@@ -655,10 +656,10 @@ cr.define('options', function() {
         }
 
         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;
         }
 
@@ -666,7 +667,7 @@ cr.define('options', function() {
       }
 
       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_();

chrome/browser/ui/webui/sync_setup_handler.cc

@@ -415,22 +415,28 @@ bool SyncSetupHandler::IsActiveLogin() const {
 }
 
 void SyncSetupHandler::RegisterMessages() {
-  web_ui()->RegisterMessageCallback("SyncSetupDidClosePage",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupDidClosePage",
       base::Bind(&SyncSetupHandler::OnDidClosePage,
                  base::Unretained(this)));
-  web_ui()->RegisterMessageCallback("SyncSetupSubmitAuth",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupSubmitAuth",
       base::Bind(&SyncSetupHandler::HandleSubmitAuth,
                  base::Unretained(this)));
-  web_ui()->RegisterMessageCallback("SyncSetupConfigure",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupConfigure",
       base::Bind(&SyncSetupHandler::HandleConfigure,
                  base::Unretained(this)));
-  web_ui()->RegisterMessageCallback("SyncSetupAttachHandler",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupAttachHandler",
       base::Bind(&SyncSetupHandler::HandleAttachHandler,
                  base::Unretained(this)));
-  web_ui()->RegisterMessageCallback("SyncSetupShowErrorUI",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupShowErrorUI",
       base::Bind(&SyncSetupHandler::HandleShowErrorUI,
                  base::Unretained(this)));
-  web_ui()->RegisterMessageCallback("SyncSetupShowSetupUI",
+  web_ui()->RegisterMessageCallback(
+      "SyncSetupShowSetupUI",
       base::Bind(&SyncSetupHandler::HandleShowSetupUI,
                  base::Unretained(this)));
 }