reland ce80b519 with fix for failed test.

Fix some more for= usage.

Also fix some controlled settings indicators.

BUG=409938
R=dbeam@chromium.org

Review URL: https://codereview.chromium.org/572853007

Cr-Commit-Position: refs/heads/master@{#295201}

chrome/browser/resources/options/controlled_setting.css

@@ -4,13 +4,6 @@
 
 /* Controlled setting indicator and bubble. */
 
-.controlled-setting-with-label {
-  -webkit-box-align: center;
-  display: -webkit-box;
-  padding-bottom: 7px;
-  padding-top: 7px;
-}
-
 .controlled-setting-with-label input + span {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
@@ -18,15 +11,10 @@
   display: -webkit-box;
 }
 
-.controlled-setting-with-label input:disabled + span label {
+.controlled-setting-with-label input:disabled + span {
   color: #999;
 }
 
-.controlled-setting-with-label label {
-  display: inline;
-  padding: 0;
-}
-
 .controlled-setting-indicator:not([controlled-by]) {
   display: none;
 }

chrome/browser/resources/options/home_page_overlay.html

@@ -2,42 +2,38 @@
   <div class="close-button"></div>
   <h1 i18n-content="homePageOverlay"></h1>
   <div class="content-area">
-    <div class="radio">
-      <span class="controlled-setting-with-label">
+    <div class="radio controlled-setting-with-label">
+      <label>
         <input id="homepage-use-ntp" type="radio" name="homepage"
             pref="homepage_is_newtabpage" value="true"
             metric="Options_Homepage_IsNewTabPage" dialog-pref>
         <span>
-          <label for="homepage-use-ntp" i18n-content="homePageUseNewTab">
-          </label>
+          <span i18n-content="homePageUseNewTab"></span>
           <span class="controlled-setting-indicator"
-              pref="homepage_is_newtabpage" value="true" dialog-pref>
-          </span>
+              pref="homepage_is_newtabpage" value="true" dialog-pref></span>
         </span>
-      </span>
+      </label>
     </div>
-    <div class="radio">
-      <span class="controlled-setting-with-label">
+    <div class="radio controlled-setting-with-label">
+      <label>
         <input id="homepage-use-url" type="radio" name="homepage"
             pref="homepage_is_newtabpage" value="false"
             metric="Options_Homepage_IsNewTabPage" dialog-pref>
         <span>
-          <label id="homepage-use-url-label" i18n-content="homePageUseURL"
-              for="homepage-use-url">
-          </label>
-          <span class="controlled-setting-indicator"
-              pref="homepage_is_newtabpage" value="false" dialog-pref>
-          </span>
-          <input id="homepage-url-field" type="url" data-type="url"
-              class="weakrtl favicon-cell stretch" pref="homepage"
-              aria-labelledby="homepage-use-url-label"
-              metric="Options_Homepage_URL" dialog-pref>
-          </input>
-          <span id="homepage-url-field-indicator"
-              class="controlled-setting-indicator" pref="homepage"
-              dialog-pref>
+          <span id="homepage-use-url-label" i18n-content="homePageUseURL">
           </span>
+          <span class="controlled-setting-indicator"
+              pref="homepage_is_newtabpage" value="false" dialog-pref></span>
         </span>
+      </label>
+      <input id="homepage-url-field" type="url" data-type="url"
+          class="weakrtl favicon-cell stretch" pref="homepage"
+          aria-labelledby="homepage-use-url-label"
+          metric="Options_Homepage_URL" dialog-pref>
+      </input>
+      <span id="homepage-url-field-indicator"
+          class="controlled-setting-indicator" pref="homepage"
+          dialog-pref>
       </span>
     </div>
   </div>

chrome/browser/resources/options/hotword_confirm_overlay.html

@@ -23,16 +23,12 @@
     </div>
   </div>
   <div id="audio-logging-bar" class="gray-bottom-bar checkbox">
-    <span class="controlled-setting-with-label">
-      <input id="hotword-audio-logging-enable"
+    <label>
+      <input
           pref="hotword.audio_logging_enabled"
           metric="Options_Hotword_AudioLogging_Checkbox"
           type="checkbox" dialog-pref checked>
-      <span>
-        <label for="hotword-audio-logging-enable"
-            i18n-content="hotwordAudioLoggingEnable">
-        </label>
-      </span>
-    </span>
+      <span i18n-content="hotwordAudioLoggingEnable"></span>
+    </label>
   </div>
 </div>

chrome/browser/resources/options/import_data_overlay.html

@@ -15,40 +15,48 @@
               id="import-history-with-label">
           <label>
             <input id="import-history" type="checkbox" pref="import_history">
-            <span i18n-content="importHistory"></span>
+            <span>
+              <span i18n-content="importHistory"></span>
+              <span class="controlled-setting-indicator" pref="import_history">
+              </span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator" pref="import_history">
-          </span>
         </div>
         <div class="checkbox controlled-setting-with-label"
             id="import-favorites-with-label">
           <label>
             <input id="import-favorites" type="checkbox"
                 pref="import_bookmarks">
-            <span i18n-content="importFavorites"></span>
+            <span>
+              <span i18n-content="importFavorites"></span>
+              <span class="controlled-setting-indicator"
+                  pref="import_bookmarks"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="import_bookmarks"></span>
         </div>
         <div class="checkbox controlled-setting-with-label"
             id="import-passwords-with-label">
           <label>
             <input id="import-passwords" type="checkbox"
                 pref="import_saved_passwords">
-            <span i18n-content="importPasswords"></span>
+            <span>
+              <span i18n-content="importPasswords"></span>
+              <span class="controlled-setting-indicator"
+                  pref="import_saved_passwords"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="import_saved_passwords"></span>
         </div>
         <div class="checkbox controlled-setting-with-label"
             id="import-search-with-label">
           <label>
             <input id="import-search" type="checkbox"
                 pref="import_search_engine">
-            <span i18n-content="importSearch"></span>
+            <span>
+              <span i18n-content="importSearch"></span>
+              <span class="controlled-setting-indicator"
+                  pref="import_search_engine"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="import_search_engine"></span>
         </div>
         <div class="checkbox controlled-setting-with-label"
             id="import-autofill-form-data-with-label">
@@ -76,10 +84,12 @@
             <input id="import-data-show-bookmarks-bar"
                 pref="bookmark_bar.show_on_all_tabs"
                 metric="Options_ShowBookmarksBar" type="checkbox">
-            <span i18n-content="toolbarShowBookmarksBar"></span>
+            <span>
+              <span i18n-content="toolbarShowBookmarksBar"></span>
+              <span class="controlled-setting-indicator"
+                  pref="bookmark_bar.show_on_all_tabs"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="bookmark_bar.show_on_all_tabs"></span>
         </div>
       </div>
     </div>

chrome/browser/resources/options/language_add_language_overlay.html

@@ -2,9 +2,10 @@
   <div class="close-button"></div>
   <h1 i18n-content="addLanguageTitle"></h1>
   <div class="content-area">
-    <label for="add-language-overlay-language-list"
+    <label id="add-language-overlay-language-list-label"
         i18n-content="addLanguageSelectLabel"></label>
-    <select id="add-language-overlay-language-list"></select>
+    <select id="add-language-overlay-language-list"
+        aria-labelledby="add-language-overlay-language-list-label"></select>
   </div>
   <div class="action-area button-strip">
     <button id="add-language-overlay-cancel-button" i18n-content="cancel">

chrome/browser/resources/options/manage_profile_overlay.html

@@ -10,9 +10,7 @@
       <grid id="manage-profile-icon-grid"></grid>
       <div id="manage-profile-name-input-container">
         <label>
-          <span id="manage-profile-name-label" for="manage-profile-name"
-              i18n-content="manageProfilesNameLabel">
-          </span>
+          <span i18n-content="manageProfilesNameLabel"></span>
           <input id="manage-profile-name" type="text" pattern=".*\S.*" required>
         </label>
       </div>
@@ -83,7 +81,7 @@
       <grid id="create-profile-icon-grid"></grid>
       <div id="create-profile-name-input-container">
         <label>
-          <span id="create-profile-name-label" for="create-profile-name"
+          <span id="create-profile-name-label"
               i18n-content="manageProfilesNameLabel">
           </span>
           <input id="create-profile-name" type="text" pattern=".*\S.*" required>
@@ -94,9 +92,7 @@
       <div id="create-shortcut-container" class="checkbox" hidden>
         <label>
           <input id="create-shortcut" type="checkbox">
-          <span for="create-shortcut"
-              i18n-content="createProfileShortcutCheckbox">
-          </span>
+          <span i18n-content="createProfileShortcutCheckbox"></span>
         </label>
       </div>
       <div id="create-profile-supervised-container" class="checkbox">

chrome/browser/resources/options/reset_profile_settings_overlay.css

@@ -48,15 +48,13 @@
 }
 
 #expand-feedback {
-  background: center bottom no-repeat;
-  background-image: url('chrome://theme/IDR_QUESTION_MARK');
+  background: url('chrome://theme/IDR_QUESTION_MARK') no-repeat center;
   display: inline-block;
   height: 14px;
   opacity: 0.33;
-  vertical-align: text-top;
   width: 14px;
 }
 
 #expand-feedback:hover {
   opacity: 1;
-}
+}
\ No newline at end of file

chrome/browser/resources/options/reset_profile_settings_overlay.html

@@ -21,15 +21,15 @@
       </div>
     </div>
   </div>
-  <div id="feedback-bar" class="gray-bottom-bar checkbox">
-    <span class="controlled-setting-with-label">
+  <div id="feedback-bar"
+      class="gray-bottom-bar checkbox controlled-setting-with-label">
+    <label>
       <input id="send-settings" type="checkbox" checked>
       <span>
-        <label for="send-settings" i18n-content="resetProfileSettingsFeedback">
-        </label>
-        <div id='expand-feedback'></div>
+        <span i18n-content="resetProfileSettingsFeedback"></span>
+        <span id="expand-feedback"></span>
       </span>
-    </span>
+    </label>
     <div id="feedback-template" hidden>
       <div>
         <table>

chrome/browser/resources/options/reset_profile_settings_overlay.js

@@ -28,17 +28,18 @@ cr.define('options', function() {
     initializePage: function() {
       Page.prototype.initializePage.call(this);
 
-      $('reset-profile-settings-dismiss').onclick = function(event) {
+      $('reset-profile-settings-dismiss').onclick = function(e) {
         ResetProfileSettingsOverlay.dismiss();
       };
-      $('reset-profile-settings-commit').onclick = function(event) {
+      $('reset-profile-settings-commit').onclick = function(e) {
         ResetProfileSettingsOverlay.setResettingState(true);
         chrome.send('performResetProfileSettings',
                     [$('send-settings').checked]);
       };
-      $('expand-feedback').onclick = function(event) {
+      $('expand-feedback').onclick = function(e) {
         var feedbackTemplate = $('feedback-template');
         feedbackTemplate.hidden = !feedbackTemplate.hidden;
+        e.preventDefault();
       };
     },
 

chrome/browser/resources/options/startup_section.html

@@ -7,30 +7,36 @@
         <input type="radio" name="startup" value="5"
             pref="session.restore_on_startup"
             metric="Options_Startup_NewTab">
-        <span i18n-content="startupShowNewTab"></span>
+        <span>
+          <span i18n-content="startupShowNewTab"></span>
+          <span class="controlled-setting-indicator"
+              pref="session.restore_on_startup" value="5"></span>
+        </span>
       </label>
-      <span class="controlled-setting-indicator"
-          pref="session.restore_on_startup" value="5"></span>
     </div>
     <div class="radio controlled-setting-with-label">
       <label>
         <input id="startup-restore-session" type="radio" name="startup"
             value="1" pref="session.restore_on_startup"
             metric="Options_Startup_LastSession">
-        <span i18n-content="startupRestoreLastSession"></span>
+        <span>
+          <span i18n-content="startupRestoreLastSession"></span>
+          <span class="controlled-setting-indicator"
+              pref="session.restore_on_startup" value="1"></span>
+        </span>
       </label>
-      <span class="controlled-setting-indicator"
-          pref="session.restore_on_startup" value="1"></span>
     </div>
     <div class="radio controlled-setting-with-label">
       <label>
         <input id="startup-show-pages" type="radio" name="startup"
             pref="session.restore_on_startup"
             value="4" metric="Options_Startup_Custom">
-        <span i18n-content="startupShowPages"></span>
+        <span>
+          <span i18n-content="startupShowPages"></span>
+          <span class="controlled-setting-indicator"
+              pref="session.restore_on_startup" value="4"></span>
+        </span>
       </label>
-      <span class="controlled-setting-indicator"
-          pref="session.restore_on_startup" value="4"></span>
       <button id="startup-set-pages" class="link-button"
           i18n-content="startupSetPages">
       </button>

chrome/browser/resources/options/sync_section.html

@@ -37,11 +37,13 @@
         <input type="checkbox"
             metric="Options_ScreenLock"
             pref="settings.enable_screen_lock">
-        <span i18n-content="enableScreenlock"></span>
+       <span>
+         <span i18n-content="enableScreenlock"></span>
+         <span class="controlled-setting-indicator"
+            i18n-values="textshared:screenLockShared"
+            pref="settings.enable_screen_lock"></span>
+       </span>
       </label>
-      <span class="controlled-setting-indicator"
-          i18n-values="textshared:screenLockShared"
-          pref="settings.enable_screen_lock"></span>
     </div>
   </div>
 </if>  <!-- chromeos -->