Fix labels in import data overlay.

1. you can now click in the space between the text and checkbox
2. clicking on the text now works consistently (due to removing selectability)

BUG=408344

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

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

chrome/browser/resources/options/controlled_setting.css

@@ -11,14 +11,15 @@
   padding-top: 7px;
 }
 
-.controlled-setting-with-label > input + span {
+.controlled-setting-with-label input + span {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
   -webkit-margin-start: 0.6em;
+  -webkit-user-select: none;
   display: -webkit-box;
 }
 
-.controlled-setting-with-label > input:disabled + span label {
+.controlled-setting-with-label input:disabled + span label {
   color: #999;
 }
 

chrome/browser/resources/options/import_data_overlay.html

@@ -11,57 +11,44 @@ <h1 i18n-content="importDataOverlay"></h1>
       </div>
       <div id="import-checkboxes">
         <div i18n-content="importDescription"></div>
-        <div class="checkbox">
-          <span id="import-history-with-label"
-              class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label"
+              id="import-history-with-label">
+          <label>
             <input id="import-history" type="checkbox" pref="import_history">
-            <span>
-              <label for="import-history" i18n-content="importHistory"></label>
-              <span class="controlled-setting-indicator" pref="import_history">
-              </span>
-            </span>
+            <span i18n-content="importHistory"></span>
+          </label>
+          <span class="controlled-setting-indicator" pref="import_history">
           </span>
         </div>
-        <div class="checkbox">
-          <span id="import-favorites-with-label"
-              class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label"
+            id="import-favorites-with-label">
+          <label>
             <input id="import-favorites" type="checkbox"
                 pref="import_bookmarks">
-            <span>
-              <label for="import-favorites" i18n-content="importFavorites">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="import_bookmarks">
-              </span>
-            </span>
-          </span>
+            <span i18n-content="importFavorites"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="import_bookmarks"></span>
         </div>
-        <div class="checkbox">
-          <span id="import-passwords-with-label"
-              class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label"
+            id="import-passwords-with-label">
+          <label>
             <input id="import-passwords" type="checkbox"
                 pref="import_saved_passwords">
-            <span>
-              <label for="import-passwords" i18n-content="importPasswords">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="import_saved_passwords">
-              </span>
-            </span>
-          </span>
+            <span i18n-content="importPasswords"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="import_saved_passwords"></span>
         </div>
-        <div class="checkbox">
-          <span id="import-search-with-label"
-              class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label"
+            id="import-search-with-label">
+          <label>
             <input id="import-search" type="checkbox"
                 pref="import_search_engine">
-            <span>
-              <label for="import-search" i18n-content="importSearch"></label>
-              <span class="controlled-setting-indicator"
-                  pref="import_search_engine">
-              </span>
-            </span>
-          </span>
+            <span i18n-content="importSearch"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="import_search_engine"></span>
         </div>
       </div>
     </div>
@@ -74,20 +61,15 @@ <h1 i18n-content="importDataOverlay"></h1>
       </div>
       <div id="import-find-your-bookmarks">
         <span i18n-content="findYourImportedBookmarks"></span>
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="import-data-show-bookmarks-bar"
                 pref="bookmark_bar.show_on_all_tabs"
                 metric="Options_ShowBookmarksBar" type="checkbox">
-            <span>
-              <label for="import-data-show-bookmarks-bar"
-                  i18n-content="toolbarShowBookmarksBar">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="bookmark_bar.show_on_all_tabs">
-              </span>
-            </span>
-          </span>
+            <span i18n-content="toolbarShowBookmarksBar"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="bookmark_bar.show_on_all_tabs"></span>
         </div>
       </div>
     </div>