[uber settings] fix sync advanced ui a little bit

1. fix color of disabled checkboxes
2. use <label><input><span></span></label> instead of <input><label></label> (fixes clicking in between checkbox and text)

BUG=none
TEST=visual

Review URL: https://chromiumcodereview.appspot.com/9370004

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

4 files changed, 151 insertions, 189 deletions

diff --git a/chrome/browser/resources/shared/css/checkbox.css b/chrome/browser/resources/shared/css/checkbox.css
index 19dcec0..096dcb2b 100644
--- a/chrome/browser/resources/shared/css/checkbox.css
+++ b/chrome/browser/resources/shared/css/checkbox.css
@@ -156,9 +156,9 @@ input[type=checkbox] ~ label {
   color: #444;
 }
 
-label:hover > input[type=checkbox]:disabled ~ span,
-label:hover > input[type=radio]:disabled ~ span,
-input[type=checkbox]:disabled ~ label:hover {
+label > input[type=checkbox]:disabled ~ span,
+label > input[type=radio]:disabled ~ span,
+input[type=checkbox]:disabled ~ label {
   color: #888;
 }
 
diff --git a/chrome/browser/resources/sync_setup_overlay.css b/chrome/browser/resources/sync_setup_overlay.css
index ae90d5d..46f2bd0 100644
--- a/chrome/browser/resources/sync_setup_overlay.css
+++ b/chrome/browser/resources/sync_setup_overlay.css
@@ -1,3 +1,7 @@
+/* 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. */
+
 /* TODO(jhawkins): Organize these by page. */
 
 #sync-setup-overlay * h4 {
@@ -47,11 +51,8 @@
 }
 
 #choose-data-types-body {
-  margin: 10px 0;
-}
-
-#choose-data-types-body > div {
   -webkit-column-count: 3;
+  margin: 10px 0;
 }
 
 #sync-setup-overlay {
@@ -226,31 +227,6 @@ html[os='mac'] #sync-setup-configure {
   display: inline-block;
 }
 
-.sync-item-show {
-  display: block;
-  white-space: nowrap;
-}
-
-.sync-item-show > label {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- display: inline-block;
- width: 92%;
-}
-
-.sync-item-hide {
-  display: none;
-}
-
-.sync-label-inactive {
-  color: #9b9b9b;
-}
-
-.sync-label-active {
-  color: #000;
-}
-
 .sync-data-types {
   margin-left: 5px;
 }
diff --git a/chrome/browser/resources/sync_setup_overlay.html b/chrome/browser/resources/sync_setup_overlay.html
index 16f66bd..6161ccf 100644
--- a/chrome/browser/resources/sync_setup_overlay.html
+++ b/chrome/browser/resources/sync_setup_overlay.html
@@ -204,66 +204,67 @@
               <option i18n-content="chooseDataTypes"></option>
             </select>
             <div id="choose-data-types-body">
-              <div>
-                <div id="apps-item" class="sync-item-show">
-                  <input id="apps-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="apps-checkbox" i18n-content="apps"
-                      i18n-values="title:apps" name="dataTypeLabel"></label>
-                </div>
-                <div id="autofill-item" class="sync-item-show">
-                  <input id="autofill-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="autofill-checkbox" i18n-content="autofill"
-                      i18n-values="title:autofill" name="dataTypeLabel"></label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="bookmarks-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="bookmarks-checkbox" i18n-content="bookmarks"
-                      i18n-values="title:bookmarks" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="extensions-item" class="sync-item-show">
-                  <input id="extensions-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="extensions-checkbox" i18n-content="extensions"
-                      i18n-values="title:extensions" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="omnibox-item" class="sync-item-show">
-                  <input id="typed-urls-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="typed-urls-checkbox" i18n-content="typedURLs"
-                      i18n-values="title:typedURLs" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div id="passwords-item" class="sync-item-show">
-                  <input id="passwords-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="passwords-checkbox" i18n-content="passwords"
-                      i18n-values="title:passwords" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="preferences-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="preferences-checkbox" i18n-content="preferences"
-                      i18n-values="title:preferences" name="dataTypeLabel">
-                  </label>
-                </div>
-                <div class="sync-item-show">
-                  <input id="themes-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="themes-checkbox" i18n-content="themes"
-                      i18n-values="title:themes" name="dataTypeLabel"></label>
-                </div>
-                <div id="sessions-item" class="sync-item-show">
-                  <input id="sessions-checkbox" type="checkbox"
-                      name="dataTypeCheckbox">
-                  <label for="sessions-checkbox" i18n-content="openTabs"
-                      il8n-values="title:tabs" name="dataTypeLabel"></label>
-                </div>
+              <div id="apps-item" class="sync-type-checkbox">
+                <label>
+                  <input id="apps-checkbox" type="checkbox">
+                  <span i18n-content="apps" i18n-values="title:apps"></span>
+                </label>
+              </div>
+              <div id="autofill-item" class="sync-type-checkbox">
+                <label>
+                  <input id="autofill-checkbox" type="checkbox">
+                  <span i18n-content="autofill" i18n-values="title:autofill">
+                  </span>
+                </label>
+              </div>
+              <div class="sync-type-checkbox">
+                <label>
+                  <input id="bookmarks-checkbox" type="checkbox">
+                  <span i18n-content="bookmarks"
+                      i18n-values="title:bookmarks"></span>
+                </label>
+              </div>
+              <div id="extensions-item" class="sync-type-checkbox">
+                <label>
+                  <input id="extensions-checkbox" type="checkbox">
+                  <span i18n-content="extensions"
+                      i18n-values="title:extensions"></span>
+                </label>
+              </div>
+              <div id="omnibox-item" class="sync-type-checkbox">
+                <label>
+                  <input id="typed-urls-checkbox" type="checkbox">
+                  <span i18n-content="typedURLs"
+                      i18n-values="title:typedURLs"></span>
+                </label>
+              </div>
+              <div id="passwords-item" class="sync-type-checkbox">
+                <label>
+                  <input id="passwords-checkbox" type="checkbox">
+                  <span i18n-content="passwords"
+                      i18n-values="title:passwords"></span>
+                </label>
+              </div>
+              <div class="sync-type-checkbox">
+                <label>
+                  <input id="preferences-checkbox" type="checkbox">
+                  <span i18n-content="preferences"
+                      i18n-values="title:preferences"></span>
+                </label>
+              </div>
+              <div class="sync-type-checkbox">
+                <label>
+                  <input id="themes-checkbox" type="checkbox">
+                  <span i18n-content="themes" i18n-values="title:themes">
+                  </span>
+                </label>
+              </div>
+              <div id="sessions-item" class="sync-type-checkbox">
+                <label>
+                  <input id="sessions-checkbox" type="checkbox">
+                  <span i18n-content="openTabs" il8n-values="title:tabs">
+                  </span>
+                </label>
               </div>
             </div>
           </div>
@@ -278,15 +279,17 @@
               <div id="passphrase-encryption-message"
                   i18n-content="passphraseEncryptionMessage"></div>
               <div>
-                <input id="encrypt-sensitive-option" name="encrypt" type="radio"
-                    value="sensitive">
-                <label for="encrypt-sensitive-option"
-                    i18n-content="encryptSensitiveOption"></label>
+                <label>
+                  <input id="encrypt-sensitive-option" name="encrypt"
+                      type="radio" value="sensitive">
+                  <span i18n-content="encryptSensitiveOption"></span>
+                </label>
               </div>
               <div>
-                <input id="encrypt-all-option" name="encrypt" type="radio"
-                    value="all">
-                <label for="encrypt-all-option" i18n-content="encryptAllOption">
+                <label>
+                  <input id="encrypt-all-option" name="encrypt" type="radio"
+                      value="all">
+                  <span i18n-content="encryptAllOption"></span>
                 </label>
               </div>
             </div>
@@ -296,14 +299,17 @@
           <div id="sync-custom-passphrase-container"
               class="sync-customize-section-container">
             <div>
-              <input id="google-option" name="option" type="radio"
-                  value="google">
-              <label for="google-option" i18n-content="googleOption"></label>
+              <label>
+                <input id="google-option" name="option" type="radio"
+                    value="google">
+                <span i18n-content="googleOption"></span>
+              </label>
             </div>
             <div>
-              <input id="explicit-option" name="option" type="radio"
-                  value="explicit">
-              <label for="explicit-option" i18n-content="explicitOption">
+              <label>
+                <input id="explicit-option" name="option" type="radio"
+                    value="explicit">
+                <span i18n-content="explicitOption"></span>
               </label>
               <a i18n-values="href:encryptionHelpURL" target="_blank"
                   i18n-content="learnMore"></a>
diff --git a/chrome/browser/resources/sync_setup_overlay.js b/chrome/browser/resources/sync_setup_overlay.js
index e07fb09..b36537f 100644
--- a/chrome/browser/resources/sync_setup_overlay.js
+++ b/chrome/browser/resources/sync_setup_overlay.js
@@ -9,8 +9,8 @@ cr.define('options', function() {
   // true, it stays that way until we are told about successful login from
   // the browser.  This means subsequent errors (like invalid password) are
   // rendered in the captcha state, which is basically identical except we
-  // don't show the top error blurb "Error Signing in" or the "Create
-  // account" link.
+  // don't show the top error blurb 'Error Signing in' or the 'Create
+  // account' link.
   var captchaChallengeActive_ = false;
 
   // True if the synced account uses a custom passphrase.
@@ -111,31 +111,24 @@ cr.define('options', function() {
     },
 
     onPassphraseRadioChanged_: function() {
-      var visible = this.getPassphraseRadioCheckedValue_() == "explicit";
+      var visible = this.getPassphraseRadioCheckedValue_() == 'explicit';
       $('sync-custom-passphrase').hidden = !visible;
     },
 
     checkAllDataTypeCheckboxes_: function() {
-      var checkboxes = document.getElementsByName("dataTypeCheckbox");
+      // Only check the visible ones (since there's no way to uncheck
+      // the invisible ones).
+      var checkboxes = $('choose-data-types-body').querySelectorAll(
+          '.sync-type-checkbox:not([hidden]) input');
       for (var i = 0; i < checkboxes.length; i++) {
-        // Only check the visible ones (since there's no way to uncheck
-        // the invisible ones).
-        if (checkboxes[i].parentElement.className == "sync-item-show") {
-          checkboxes[i].checked = true;
-        }
+        checkboxes[i].checked = true;
       }
     },
 
     setDataTypeCheckboxesEnabled_: function(enabled) {
-      var checkboxes = document.getElementsByName("dataTypeCheckbox");
-      var labels = document.getElementsByName("dataTypeLabel");
+      var checkboxes = $('choose-data-types-body').querySelectorAll('input');
       for (var i = 0; i < checkboxes.length; i++) {
         checkboxes[i].disabled = !enabled;
-        if (checkboxes[i].disabled) {
-          labels[i].className = "sync-label-inactive";
-        } else {
-          labels[i].className = "sync-label-active";
-        }
       }
     },
 
@@ -146,23 +139,12 @@ cr.define('options', function() {
     },
 
     // Returns true if at least one data type is enabled and no data types are
-    // checked. (If all data type checkboxes are disabled, it's because "keep
-    // everything synced" is checked.)
+    // checked. (If all data type checkboxes are disabled, it's because 'keep
+    // everything synced' is checked.)
     noDataTypesChecked_: function() {
-      var checkboxes = document.getElementsByName("dataTypeCheckbox");
-      var atLeastOneChecked = false;
-      var atLeastOneEnabled = false;
-      for (var i = 0; i < checkboxes.length; i++) {
-        if (!checkboxes[i].disabled &&
-            checkboxes[i].parentElement.className == "sync-item-show") {
-          atLeastOneEnabled = true;
-          if (checkboxes[i].checked) {
-            atLeastOneChecked = true;
-          }
-        }
-      }
-
-      return atLeastOneEnabled && !atLeastOneChecked;
+      var query = '.sync-type-checkbox:not([hidden]) input:not(:checked)'
+      var checkboxes = $('choose-data-types-body').querySelectorAll(query);
+      return checkboxes.length != 0;
     },
 
     checkPassphraseMatch_: function() {
@@ -172,7 +154,7 @@ cr.define('options', function() {
       mismatchError.hidden = true;
 
       var f = $('choose-data-types-form');
-      if (this.getPassphraseRadioCheckedValue_() != "explicit" ||
+      if (this.getPassphraseRadioCheckedValue_() != 'explicit' ||
           $('google-option').disabled)
         return true;
 
@@ -212,7 +194,7 @@ cr.define('options', function() {
         // If we were prompted for an existing passphrase, use it.
         customPassphrase = f.passphrase.value;
         usePassphrase = true;
-        // If we were displaying the "enter your old google password" prompt,
+        // If we were displaying the 'enter your old google password' prompt,
         // then that means this is the user's google password.
         googlePassphrase = !$('google-passphrase-needed-body').hidden;
         // We allow an empty passphrase, in case the user has disabled
@@ -240,20 +222,20 @@ cr.define('options', function() {
       // These values need to be kept in sync with where they are read in
       // SyncSetupFlow::GetDataTypeChoiceData().
       var result = JSON.stringify({
-          "syncAllDataTypes": 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,
-          "encryptAllData": encryptAllData,
-          "usePassphrase": usePassphrase,
-          "isGooglePassphrase": googlePassphrase,
-          "passphrase": customPassphrase
+        'syncAllDataTypes': 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,
+        'encryptAllData': encryptAllData,
+        'usePassphrase': usePassphrase,
+        'isGooglePassphrase': googlePassphrase,
+        'passphrase': customPassphrase
       });
       chrome.send('SyncSetupConfigure', [result]);
     },
@@ -315,39 +297,39 @@ cr.define('options', function() {
 
       if (args.passwordsRegistered) {
         $('passwords-checkbox').checked = args.syncPasswords;
-        $('passwords-item').className = "sync-item-show";
+        $('passwords-item').hidden = false;
       } else {
-        $('passwords-item').className = "sync-item-hide";
+        $('passwords-item').hidden = true;
       }
       if (args.autofillRegistered) {
         $('autofill-checkbox').checked = args.syncAutofill;
-        $('autofill-item').className = "sync-item-show";
+        $('autofill-item').hidden = false;
       } else {
-        $('autofill-item').className = "sync-item-hide";
+        $('autofill-item').hidden = true;
       }
       if (args.extensionsRegistered) {
         $('extensions-checkbox').checked = args.syncExtensions;
-        $('extensions-item').className = "sync-item-show";
+        $('extensions-item').hidden = false;
       } else {
-        $('extensions-item').className = "sync-item-hide";
+        $('extensions-item').hidden = true;
       }
       if (args.typedUrlsRegistered) {
         $('typed-urls-checkbox').checked = args.syncTypedUrls;
-        $('omnibox-item').className = "sync-item-show";
+        $('omnibox-item').hidden = false;
       } else {
-        $('omnibox-item').className = "sync-item-hide";
+        $('omnibox-item').hidden = true;
       }
       if (args.appsRegistered) {
         $('apps-checkbox').checked = args.syncApps;
-        $('apps-item').className = "sync-item-show";
+        $('apps-item').hidden = false;
       } else {
-        $('apps-item').className = "sync-item-hide";
+        $('apps-item').hidden = true;
       }
       if (args.sessionsRegistered) {
         $('sessions-checkbox').checked = args.syncSessions;
-        $('sessions-item').className = "sync-item-show";
+        $('sessions-item').hidden = false;
       } else {
-        $('sessions-item').className = "sync-item-hide";
+        $('sessions-item').hidden = true;
       }
 
       this.setCheckboxesToKeepEverythingSynced_(args.syncAllDataTypes);
@@ -464,15 +446,15 @@ cr.define('options', function() {
       $('google-passphrase-needed-body').hidden = true;
       // Display the correct prompt to the user depending on what type of
       // passphrase is needed.
-      if (args["need_google_passphrase"])
+      if (args['need_google_passphrase'])
         $('google-passphrase-needed-body').hidden = false;
-      else if (args["passphrase_creation_rejected"])
+      else if (args['passphrase_creation_rejected'])
         $('passphrase-rejected-body').hidden = false;
       else
         $('normal-body').hidden = false;
 
       $('passphrase-learn-more').hidden = false;
-      $('incorrect-passphrase').hidden = !args["passphrase_setting_rejected"];
+      $('incorrect-passphrase').hidden = !args['passphrase_setting_rejected'];
       $('sync-passphrase-warning').hidden = false;
       $('passphrase').focus();
     },
@@ -498,7 +480,7 @@ cr.define('options', function() {
       if (args && args['show_passphrase']) {
         this.showPassphraseContainer_(args);
       } else {
-        // We only show the "Use Default" link if we're not prompting for an
+        // We only show the 'Use Default' link if we're not prompting for an
         // existing passphrase.
         var self = this;
         this.animateDisableLink_($('use-default-link'), false, function() {
@@ -543,15 +525,15 @@ cr.define('options', function() {
      *     visible.
      */
     setThrobbersVisible_: function(visible) {
-      var throbbers = document.getElementsByClassName("throbber");
+      var throbbers = document.getElementsByClassName('throbber');
       for (var i = 0; i < throbbers.length; i++)
-        throbbers[i].style.visibility = visible ? "visible" : "hidden";
+        throbbers[i].style.visibility = visible ? 'visible' : 'hidden';
     },
 
     loginSetFocus_: function() {
       var email = $('gaia-email');
       var passwd = $('gaia-passwd');
-      if (email && (email.value == null || email.value == "")) {
+      if (email && !email.value) {
         email.focus();
       } else if (passwd) {
         passwd.focus();
@@ -650,7 +632,7 @@ cr.define('options', function() {
       if (f) {
         if (args.user != undefined) {
           if (email.value != args.user)
-            passwd.value = ""; // Reset the password field
+            passwd.value = ''; // Reset the password field
           email.value = args.user;
         }
 
@@ -667,7 +649,7 @@ cr.define('options', function() {
 
       if (1 == args.error) {
         var access_code = document.getElementById('access-code');
-        if (access_code.value && access_code.value != "") {
+        if (access_code.value) {
           $('errormsg-0-access-code').hidden = false;
           this.showAccessCodeRequired_();
         } else {
@@ -699,11 +681,11 @@ cr.define('options', function() {
     },
 
     resetErrorVisibility_: function() {
-      $("errormsg-0-email").hidden = true;
-      $("errormsg-0-password").hidden = true;
-      $("errormsg-1-password").hidden = true;
-      $("errormsg-0-connection").hidden = true;
-      $("errormsg-0-access-code").hidden = true;
+      $('errormsg-0-email').hidden = true;
+      $('errormsg-0-password').hidden = true;
+      $('errormsg-1-password').hidden = true;
+      $('errormsg-0-connection').hidden = true;
+      $('errormsg-0-access-code').hidden = true;
     },
 
     setBlurbError_: function(error_message) {
@@ -737,21 +719,19 @@ cr.define('options', function() {
       var f = $('gaia-login-form');
       var email = $('gaia-email');
       var passwd = $('gaia-passwd');
-      if (null == email.value || "" == email.value) {
+      if (!email.value) {
         $('errormsg-0-email').hidden = false;
         this.setBlurbError_();
         return false;
       }
       // Don't enforce password being non-blank when checking access code (it
       // will have been cleared when the page was displayed).
-      if (f.accessCode.disabled && (null == passwd.value ||
-          "" == passwd.value)) {
+      if (f.accessCode.disabled && !passwd.value) {
         $('errormsg-0-password').hidden = false;
         this.setBlurbError_();
         return false;
       }
-      if (!f.accessCode.disabled && (null == f.accessCode.value ||
-          "" == f.accessCode.value)) {
+      if (!f.accessCode.disabled && !f.accessCode.value) {
         $('errormsg-0-password').hidden = false;
         return false;
       }
@@ -759,7 +739,7 @@ cr.define('options', function() {
       if (f.accessCode.disabled && this.matchesASPRegex_(passwd.value) &&
           $('asp-warning-div').hidden) {
         $('asp-warning-div').hidden = false;
-        $('gaia-passwd').value = "";
+        $('gaia-passwd').value = '';
         return false;
       }
 
@@ -781,10 +761,10 @@ cr.define('options', function() {
       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});
+      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('SyncSetupSubmitAuth', [result]);
     },