Fix some more for= usage.

chrome/browser/resources/options/browser_options.html

 <div id="settings" class="page" hidden>
   <header>
     <h1 i18n-content="settingsTitle"></h1>
   </header>
   <include src="automatic_settings_reset_banner.html">
 <if expr="chromeos">
   <include src="secondary_user_banner.html">
   <section>
     <div id="network-section-header" class="section-header">
       <h3 i18n-content="sectionTitleInternet"></h3>
@@ skipping 42 matching lines @@
       <button id="themes-gallery" i18n-content="themesGallery"></button>
       <button id="themes-reset" i18n-content="themesReset"></button>
 </if>
     </div>
     <div class="checkbox controlled-setting-with-label"
         guest-visibility="disabled">
       <label>
         <input type="checkbox"
             pref="browser.show_home_button"
             metric="Options_Homepage_HomeButton">
-        <span i18n-content="homePageShowHomeButton"></span>
+        <span>
+          <span i18n-content="homePageShowHomeButton"></span>
+          <span class="controlled-setting-indicator"
+              pref="browser.show_home_button"></span>
+        </span>
       </label>
-      <span class="controlled-setting-indicator"
-          pref="browser.show_home_button"></span>
     </div>
     <div id="change-home-page-section" hidden>
       <div id="change-home-page-section-container" guest-visibility="disabled">
         <span id="home-page-ntp" class="home-page-label"
             i18n-content="homePageNtp"></span>
         <span id="home-page-url" class="home-page-label"></span>
         <button id="change-home-page" class="link-button"
             i18n-content="changeHomePage"></button>
         <div id="extension-controlled-container"></div>
       </div>
     </div>
     <div class="checkbox controlled-setting-with-label"
         guest-visibility="disabled">
       <label>
         <input type="checkbox"
             pref="bookmark_bar.show_on_all_tabs"
             metric="Options_ShowBookmarksBar">
-        <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>
 <if expr="is_posix and not chromeos and not is_macosx">
     <div class="checkbox"><label>
         <input id="show-window-decorations" type="checkbox"
             pref="browser.custom_chrome_frame" metric="Options_CustomFrame"
             inverted_pref>
         <span i18n-content="showWindowDecorations"></span>
     </label></div>
 </if>
   </section>
@@ skipping 174 matching lines @@
         <span i18n-content="improveBrowsingExperience"></span>
         <span i18n-content="disableWebServices"></span>
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:privacyLearnMoreURL"></a>
       </p>
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input id="alternateErrorPagesEnabled"
               pref="alternate_error_pages.enabled"
               metric="Options_LinkDoctorCheckbox" type="checkbox">
-          <span i18n-content="linkDoctorPref"></span>
+          <span>
+            <span i18n-content="linkDoctorPref"></span>
+            <span class="controlled-setting-indicator"
+                pref="alternate_error_pages.enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="alternate_error_pages.enabled">
-        </span>
       </div>
       <div class="checkbox controlled-setting-with-label"
           guest-visibility="disabled">
         <label>
           <input pref="search.suggest_enabled"
               metric="Options_UseSuggestCheckbox" type="checkbox">
-          <span i18n-content="suggestPref"></span>
+          <span>
+            <span i18n-content="suggestPref"></span>
+            <span class="controlled-setting-indicator"
+                pref="search.suggest_enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="search.suggest_enabled">
-        </span>
       </div>
       <div class="checkbox" guest-visibility="disabled">
         <span class="controlled-setting-with-label">
           <label>
             <input id="networkPredictionOptions"
                 metric="Options_DnsPrefetchCheckbox" type="checkbox">
-            <span i18n-content="networkPredictionEnabledDescription"></span>
+            <span>
+              <span i18n-content="networkPredictionEnabledDescription"></span>
+              <span class="controlled-setting-indicator"
+                  pref="net.network_prediction_options"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="net.network_prediction_options"></span>
         </span>
       </div>
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input
               metric="Options_SafeBrowsingExtendedReportingCheckbox"
               pref="safebrowsing.extended_reporting_enabled"
               type="checkbox">
-          <span i18n-content="safeBrowsingEnableExtendedReporting"></span>
+          <span>
+            <span i18n-content="safeBrowsingEnableExtendedReporting"></span>
+            <span class="controlled-setting-indicator"
+                pref="safebrowsing.extended_reporting_enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="safebrowsing.extended_reporting_enabled">
-        </span>
       </div>
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input pref="safebrowsing.enabled"
               metric="Options_SafeBrowsingCheckbox" type="checkbox">
-          <span i18n-content="safeBrowsingEnableProtection"></span>
+          <span>
+            <span i18n-content="safeBrowsingEnableProtection"></span>
+            <span class="controlled-setting-indicator"
+                pref="safebrowsing.enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="safebrowsing.enabled">
-        </span>
       </div>
 <if expr="_google_chrome">
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input id="spelling-enabled-control" type="checkbox"
               metric="Options_SpellingServiceCheckbox"
               pref="spellcheck.use_spelling_service" dialog-pref>
-          <span i18n-content="spellingPref"></span>
+          <span>
+            <span i18n-content="spellingPref"></span>
+            <span id="spelling-enabled-indicator"
+                class="controlled-setting-indicator"
+                pref="spellcheck.use_spelling_service" dialog-pref>
+            </span>
         </label>
-        <span id="spelling-enabled-indicator"
-            class="controlled-setting-indicator"
-            pref="spellcheck.use_spelling_service" dialog-pref>
-        </span>
       </div>
       <div id="metricsReportingSetting"
           class="checkbox controlled-setting-with-label">
 <if expr="chromeos">
         <label>
           <input id="metricsReportingEnabled"
               pref="cros.metrics.reportingEnabled" type="checkbox">
-          <span i18n-content="enableLogging"></span>
+          <span>
+            <span i18n-content="enableLogging"></span>
+            <span class="controlled-setting-indicator"
+                pref="cros.metrics.reportingEnabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="cros.metrics.reportingEnabled"></span>
 </if>
 <if expr="not chromeos">
         <label>
           <input id="metricsReportingEnabled"
               pref="user_experience_metrics.reporting_enabled" type="checkbox">
-          <span i18n-content="enableLogging">
+          <span>
+            <span i18n-content="enableLogging">
+            <span class="controlled-setting-indicator"
+                pref="user_experience_metrics.reporting_enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="user_experience_metrics.reporting_enabled">
-        </span>
         <span id="metrics-reporting-reset-restart">
           <!-- Text filled by JavaScript -->
           <span></span><button class=
               "link-button standalone-link-button"></button><span></span>
         </span>
 </if>
       </div>
 </if>  <!-- _google_chrome -->
       <div class="checkbox">
         <label>
           <input id="do-not-track-enabled" pref="enable_do_not_track"
               metric="Options_DoNotTrackCheckbox" type="checkbox" dialog-pref>
           <span i18n-content="doNotTrack"></span>
         </label>
       </div>
 <if expr="chromeos">
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input id="content-protection-attestation-enabled" type="checkbox"
               pref="cros.device.attestation_for_content_protection_enabled">
-          <span i18n-content="enableContentProtectionAttestation"></span>
+          <span>
+            <span i18n-content="enableContentProtectionAttestation"></span>
+            <span class="controlled-setting-indicator"
+                pref="cros.device.attestation_for_content_protection_enabled">
+            </span>
+          </span>
         </label>
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:contentProtectionAttestationLearnMoreURL">
         </a>
-        <span class="controlled-setting-indicator"
-            pref="cros.device.attestation_for_content_protection_enabled">
-        </span>
       </div>
 </if>
       <div id="hotword-search" hidden>
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input id="hotword-search-enable" pref="hotword.search_enabled_2"
                 metric="Options_HotwordCheckbox" type="checkbox" dialog-pref>
-            <span i18n-values=".innerHTML:hotwordSearchEnable"></span>
+            <span>
+              <span i18n-values=".innerHTML:hotwordSearchEnable"></span>
+              <span id="hotword-search-setting-indicator"
+                  pref="hotword.search_enabled_2" dialog-pref></span>
+            </span>
           </label>
-          <span id="hotword-search-setting-indicator"
-              pref="hotword.search_enabled_2" dialog-pref>
-          </span>
         </div>
       </div>
     </div>
   </section>
 <if expr="chromeos">
   <!-- By default, the bluetooth section is hidden.  It is only visible if a
        bluetooth adapter is discovered -->
   <section id="bluetooth-devices" hidden>
     <h3 i18n-content="bluetooth"></h3>
     <div id="bluetooth-options-div">
@@ skipping 18 matching lines @@
       </div>
     </div>
   </section>
 </if>  <!-- chromeos -->
   <section id="passwords-and-autofill-section">
     <h3 i18n-content="passwordsAndAutofillGroupName"></h3>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input id="autofill-enabled" pref="autofill.enabled"
             metric="Options_FormAutofill" type="checkbox">
-        <span i18n-content="autofillEnabled"></span>
-        <span class="controlled-setting-indicator" pref="autofill.enabled">
+        <span>
+          <span i18n-content="autofillEnabled"></span>
+          <span class="controlled-setting-indicator" pref="autofill.enabled">
+          </span>
         </span>
       </label>
       <button id="autofill-settings" class="link-button"
           i18n-content="manageAutofillSettings">
       </button>
     </div>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input id="password-manager-enabled"
             pref="profile.password_manager_enabled"
             metric="Options_PasswordManager" type="checkbox">
-        <span i18n-content="passwordManagerEnabled"></span>
-        <span class="controlled-setting-indicator"
-            pref="profile.password_manager_enabled"></span>
+        <span>
+          <span i18n-content="passwordManagerEnabled"></span>
+          <span class="controlled-setting-indicator"
+              pref="profile.password_manager_enabled"></span>
         </span>
       </label>
       <button id="manage-passwords" class="link-button"
           i18n-content="managePasswords"></button>
     </div>
 <if expr="is_macosx">
     <div id="mac-passwords-warning" i18n-content="macPasswordsWarning" hidden>
     </div>
 </if>
   </section>
   <section id="easy-unlock-section" guest-visibility="hidden" hidden>
     <h3 i18n-content="easyUnlockSectionTitle"></h3>
     <!-- Options shown when the user has not set up Easy Unlock -->
     <div id='easy-unlock-setup' hidden>
-      <div class="controlled-setting-with-label">
+      <div class="settings-row">
         <span i18n-content="easyUnlockSetupIntro"></span>
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:easyUnlockLearnMoreURL"></a>
       </div>
       <button id="easy-unlock-setup-button"
           i18n-content="easyUnlockSetupButton"></button>
     </div>
     <!-- Options shown when the user has set up Easy Unlock -->
     <div id='easy-unlock-enable' hidden>
-      <div class="controlled-setting-with-label">
+      <div class="settings-row">
         <span i18n-content="easyUnlockDescription"></span>
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:easyUnlockLearnMoreURL"></a>
       </div>
       <button id="easy-unlock-turn-off-button"
           i18n-content="easyUnlockTurnOffButton"></button>
     </div>
   </section>
   <section id="web-content-section">
     <h3 i18n-content="advancedSectionTitleContent"></h3>
@@ skipping 60 matching lines @@
           i18n-values="href:languagesLearnMoreURL"></a>
     </div>
     <div class="settings-row">
       <button id="language-button"
           i18n-content="languageAndSpellCheckSettingsButton"></button>
     </div>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input pref="translate.enabled"
             metric="Options_Translate" type="checkbox">
-        <span i18n-content="translateEnableTranslate"></span>
+        <span>
+          <span i18n-content="translateEnableTranslate"></span>
+          <span class="controlled-setting-indicator" pref="translate.enabled">
+        </span>
       </label>
-      <span class="controlled-setting-indicator" pref="translate.enabled">
-      </span>
       <button id="manage-languages" class="link-button"
           i18n-content="manageLanguages"></button>
     </div>
   </section>
   <section id="downloads-section">
     <h3 i18n-content="downloadLocationGroupName"></h3>
     <div>
       <div class="settings-row">
         <label>
           <span id="download-location-label"
               i18n-content="downloadLocationBrowseTitle">
           </span>
           <input id="downloadLocationPath" class="weakrtl" type="text"
               size="36" readonly>
         </label>
         <button id="downloadLocationChangeButton"
             i18n-content="downloadLocationChangeButton">
         </button>
         <span class="controlled-setting-indicator"
           pref="download.default_directory">
         </span>
       </div>
       <div class="checkbox controlled-setting-with-label">
         <label>
           <input type="checkbox"
               pref="download.prompt_for_download"
               metric="Options_AskForSaveLocation">
-          <span i18n-content="downloadLocationAskForSaveLocation"></span>
+          <span>
+            <span i18n-content="downloadLocationAskForSaveLocation"></span>
+            <span class="controlled-setting-indicator"
+                pref="download.prompt_for_download"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-            pref="download.prompt_for_download"></span>
       </div>
 <if expr="chromeos">
       <div class="checkbox controlled-setting-with-label"
           id="disable-drive-row" guest-visibility="disabled">
         <label>
           <input type="checkbox"
               pref="gdata.disabled"
               metric="Options_DisableGData">
-          <span i18n-content="disableGData"></span>
+          <span>
+            <span i18n-content="disableGData"></span>
+            <span class="controlled-setting-indicator" pref="gdata.disabled">
+            </span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator" pref="gdata.disabled">
-        </span>
       </div>
 </if>
       <div id="auto-open-file-types-section" hidden>
         <div id="auto-open-file-types-container">
           <div id="auto-open-file-types-label" class="settings-row"
               i18n-content="autoOpenFileTypesInfo"></div>
           <div class="settings-row">
             <button id="autoOpenFileTypesResetToDefault"
                 i18n-content="autoOpenFileTypesResetToDefault"></button>
             </div>
@@ skipping 17 matching lines @@
       <h3 i18n-content="advancedSectionTitleCloudPrint"></h3>
       <div class="settings-row">
         <span i18n-content="cloudPrintOptionLabel"></span>
         <a target="_blank" i18n-content="learnMore"
            i18n-values="href:cloudPrintLearnMoreURL"></a>
       </div>
       <button id="cloudPrintDevicesPageButton"
               i18n-content="cloudPrintDevicesPageButton">
       </button>
 
-      <div class="checkbox controlled-setting-with-label"
+      <div class="settings-row checkbox controlled-setting-with-label"
            i18n-values=".hidden: cloudPrintHideNotificationsCheckbox">
         <label>
           <input id="local-discovery-notifications-enabled"
               pref="local_discovery.notifications_enabled"
               type="checkbox"
               metric="LocalDiscoveryNotificationsDisabled_Settings">
-          <span i18n-content="cloudPrintEnableNotificationsLabel"></span>
+          <span>
+            <span i18n-content="cloudPrintEnableNotificationsLabel"></span>
+            <span class="controlled-setting-indicator"
+                  pref="local_discovery.notifications_enabled"></span>
+          </span>
         </label>
-        <span class="controlled-setting-indicator"
-              pref="local_discovery.notifications_enabled"></span>
       </div>
     </section>
 </if>
 
 <if expr="chromeos">
   <include src="startup_section.html">
   <section>
     <h3 i18n-content="accessibilityTitle"></h3>
     <div class="option-control-table">
       <p id="accessibility-explanation" class="settings-row">
         <span i18n-content="accessibilityExplanation"></span>
         <a id="accessibility-learn-more" target="_blank"
            i18n-content="learnMore"></a>
       </p>
       <div class="option-name">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input
                 pref="settings.a11y.enable_menu" type="checkbox"
                 metric="Options_AccessibilitySystemMenu">
-            <span i18n-content="accessibilityAlwaysShowMenu"></span>
+            <span>
+              <span i18n-content="accessibilityAlwaysShowMenu"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.enable_menu"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.enable_menu"></span>
         </div>
       </div>
       <div class="option-name">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input
                 pref="settings.a11y.large_cursor_enabled" type="checkbox"
                 metric="Options_AccessibilityLargeMouseCursor">
-            <span i18n-content="accessibilityLargeCursor"></span>
+            <span>
+              <span i18n-content="accessibilityLargeCursor"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.large_cursor_enabled"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.large_cursor_enabled"></span>
         </div>
       </div>
       <div class="option-name">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input id="accessibility-high-contrast-check"
                 pref="settings.a11y.high_contrast_enabled" type="checkbox"
                 metric="Options_AccessibilityHighContrastMode">
-            <span i18n-content="accessibilityHighContrast"></span>
+            <span>
+              <span i18n-content="accessibilityHighContrast"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.high_contrast_enabled"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.high_contrast_enabled">
-          </span>
         </div>
       </div>
       <div id="accessibility-sticky-keys" class="option-name">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input id="accessibility-sticky-keys-check"
                 pref="settings.a11y.sticky_keys_enabled" type="checkbox"
                 metric="Options_AccessibilityStickyKeys">
-            <span i18n-content="accessibilityStickyKeys"></span>
+            <span>
+              <span i18n-content="accessibilityStickyKeys"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.sticky_keys_enabled"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.sticky_keys_enabled"></span>
-          </span>
         </div>
       </div>
       <div class="option-name">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input id="accessibility-spoken-feedback-check"
                 pref="settings.accessibility" type="checkbox"
                 metric="Options_AccessibilitySpokenFeedback">
-            <span i18n-content="accessibilitySpokenFeedback"></span>
+            <span>
+              <span i18n-content="accessibilitySpokenFeedback"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.accessibility"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.accessibility">
-          </span>
           <div id="accessibility-settings" hidden>
             <button id="accessibility-settings-button"
               i18n-content="accessibilitySettings"></button>
           </div>
         </div>
       </div>
       <div class="option-name">
         <div class="checkbox controlled-setting-with-label">
+          <label>
             <input
                 pref="settings.a11y.screen_magnifier" type="checkbox"
                 metric="Options_AccessibilityScreenMagnifier">
-            <span i18n-content="accessibilityScreenMagnifier"></span>
+            <span>
+              <span i18n-content="accessibilityScreenMagnifier"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.screen_magnifier"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.screen_magnifier"></span>
         </div>
       </div>
       <div class="option-name" id="accessibility-tap-dragging">
         <div class="checkbox">
           <label>
             <input id="accessibility-tap-dragging-check"
-                   pref="settings.touchpad.enable_tap_dragging" type="checkbox"
-                   metric="Options_AccessibilityTapDragging">
+                pref="settings.touchpad.enable_tap_dragging" type="checkbox"
+                metric="Options_AccessibilityTapDragging">
             <span i18n-content="accessibilityTapDragging"></span>
           </label>
         </div>
       </div>
       <div class="option-name" id="accessibility-autoclick">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="accessibility-autoclick-check"
-                  pref="settings.a11y.autoclick" type="checkbox">
+                pref="settings.a11y.autoclick" type="checkbox">
             <span>
-              <div>
-                <div>
-                  <label for="accessibility-autoclick-check"
-                      i18n-content="accessibilityAutoclick">
-                  </label>
-                  <span class="controlled-setting-indicator"
-                      pref="settings.a11y.autoclick">
-                  </span>
-                </div>
-                <div>
-                  <label for="accessibility-autoclick-dropdown"
-                      i18n-content="accessibilityAutoclickDropdown">
-                  </label>
-                  <select id="accessibility-autoclick-dropdown" class="control"
-                    data-type="number"
-                    pref="settings.a11y.autoclick_delay_ms">
-                    <option value="200"
-                        i18n-content="autoclickDelayExtremelyShort"></option>
-                    <option value="400"
-                        i18n-content="autoclickDelayVeryShort"></option>
-                    <option value="600" i18n-content="autoclickDelayShort">
-                    </option>
-                    <option value="800" i18n-content="autoclickDelayLong">
-                    </option>
-                    <option value="1000"
-                        i18n-content="autoclickDelayVeryLong"></option>
-                  </select>
-                  <span class="controlled-setting-indicator"
-                      pref="settings.a11y.autoclick_delay_ms">
-                  </span>
-                </div>
-              </div>
+              <span i18n-content="accessibilityAutoclick"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.autoclick"></span>
             </span>
-          </span>
+          </label>
+        </div>
+        <div>
+          <!-- No whitespace between elements. -->

[Dan Beam, 2014/09/08 17:52:54]

^ why is this necessary?

[Evan Stade, 2014/09/08 18:23:00]

This change was part of a different CL, but the answer is that these elements
are inline, and whitespace affects their layout.

+          <input type="checkbox" class="spacer-checkbox"><span
+              id="accessibility-autoclick-label"
+              i18n-content="accessibilityAutoclickDropdown">
+          </span><select id="accessibility-autoclick-dropdown" class="control"
+              data-type="number"
+              aria-labelledby="accessibility-autoclick-label"
+              pref="settings.a11y.autoclick_delay_ms">
+            <option value="200"
+                i18n-content="autoclickDelayExtremelyShort"></option>
+            <option value="400"
+                i18n-content="autoclickDelayVeryShort"></option>
+            <option value="600" i18n-content="autoclickDelayShort">
+            </option>
+            <option value="800" i18n-content="autoclickDelayLong">
+            </option>
+            <option value="1000"
+                i18n-content="autoclickDelayVeryLong"></option>
+          </select>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.autoclick_delay_ms"></span>
         </div>
       </div>
       <div class="option_name" id="accessibility_onscreen_keyboard">
         <div class="checkbox controlled-setting-with-label">
           <label>
             <input pref="settings.a11y.virtual_keyboard" type="checkbox"
                 metric="Options_AccessibilityOnScreenKeyboard">
-            <span i18n-content="accessibilityVirtualKeyboard"></span>
+            <span>
+              <span i18n-content="accessibilityVirtualKeyboard"></span>
+              <span class="controlled-setting-indicator"
+                  pref="settings.a11y.virtual_keyboard"></span>
+            </span>
           </label>
-          <span class="controlled-setting-indicator"
-              pref="settings.a11y.virtual_keyboard">
-          </span>
         </div>
       </div>
   </section>
 <if expr="chromeos">
   <section id="factory-reset-section" hidden>
     <h3 i18n-content="factoryResetTitle"></h3>
     <div>
       <span class="settings-row" i18n-content="factoryResetDescription">
       </span>
       <button id="factory-reset-restart"
           i18n-content="factoryResetRestart">
       </button>
     </div>
   </section>
 </if>
 </if>
 <if expr="not chromeos">
   <section id="system-section">
     <h3 i18n-content="advancedSectionTitleSystem"></h3>
 <if expr="not is_macosx">
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input pref="background_mode.enabled"
             type="checkbox">
-        <span i18n-content="backgroundModeCheckbox"></span>
+        <span>
+          <span i18n-content="backgroundModeCheckbox"></span>
+          <span class="controlled-setting-indicator"
+              pref="background_mode.enabled"></span>
+        </span>
       </label>
-      <span class="controlled-setting-indicator"
-          pref="background_mode.enabled"></span>
     </div>
 </if>
     <div class="checkbox controlled-setting-with-label">
       <label>
         <input id="gpu-mode-checkbox"
             pref="hardware_acceleration_mode.enabled" type="checkbox">
         <span i18n-content="gpuModeCheckbox">
       </label>
       <span id="gpu-mode-reset-restart"
           i18n-values=".innerHTML:gpuModeResetRestart"></span>
@@ skipping 15 matching lines @@
     <button id="advanced-settings-expander" class="link-button"
         i18n-content="showAdvancedSettings">
     </button>
 <if expr="chromeos">
     <button id="version-button" class="link-button" hidden
         i18n-content="browserVersion">
     </button>
 </if>
   </footer>
 </div>