Bug 914892 - [Settings] Move checkbox labels inside of labels.

Make pack checkbox/radio/switch use span:after so we could use the span for something useful.
mozilla-b2g · Nov 14, 2013 · 59c5f36 · 59c5f36
1 parent af96c97
commit 59c5f36
Show file tree

Hide file tree

Showing 42 changed files with 219 additions and 301 deletions.
diff --git a/apps/communications/ftu/css/style.css b/apps/communications/ftu/css/style.css
@@ -1044,13 +1044,13 @@ i.hack-first-child {
   height: 100%
 }
 
-[data-type="list"].pack-value-selector li label:not([for]) input + span {
+[data-type="list"].pack-value-selector li label:not([for]) input + span:after {
   background: none;
   left: 100%;
   margin-left: -2.2rem;
 }
 
-[data-type="list"].pack-value-selector li label:not([for]) input:checked + span {
+[data-type="list"].pack-value-selector li label:not([for]) input:checked + span:after {
   background: url("images/checked.png") no-repeat right center / 100%;
 }
 

diff --git a/apps/email/test/marionette/lib/email.js b/apps/email/test/marionette/lib/email.js
@@ -51,9 +51,9 @@ var Selector = {
   accountListButton: '.fld-folders-header .fld-accounts-btn',
   settingsMainAccountItems: '.tng-accounts-container .tng-account-item',
   syncIntervalSelect: '.tng-account-check-interval ',
-  // Checkboxes are weird: hidden to marionette, but the associated span
+  // Checkboxes are weird: hidden to marionette, but the associated label
   // is clickable and does the job.
-  notifyEmailCheckbox: '.tng-notify-mail-label > span',
+  notifyEmailCheckbox: '.tng-notify-mail-label',
   accountSettingsBackButton: '.card-settings-account .tng-back-btn',
   localDraftsItem: '.fld-folders-container a[data-type=localdrafts]'
 };

diff --git a/apps/settings/elements/about_more_info_developer.html b/apps/settings/elements/about_more_info_developer.html
@@ -15,101 +15,87 @@ <h2 data-l10n-id="debug">Debug</h2>
       <ul>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.grid.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.grid.enabled">
+            <span data-l10n-id="grid">Grid</span>
           </label>
-          <a data-l10n-id="grid">Grid</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.fps.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.fps.enabled">
+            <span data-l10n-id="fps-monitor">Show frames per second</span>
           </label>
-          <a data-l10n-id="fps-monitor">Show frames per second</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.paint-flashing.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.paint-flashing.enabled">
+            <span data-l10n-id="paint-flashing">Flash repainted area</span>
           </label>
-          <a data-l10n-id="paint-flashing">Flash repainted area</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="layers.draw-borders"/>
-            <span></span>
+            <input type="checkbox" name="layers.draw-borders">
+            <span data-l10n-id="layers-draw-borders">Draw layers borders</span>
           </label>
-          <a data-l10n-id="layers-draw-borders">Draw layers borders</a>
         </li>
         <li>
           <label class="pack-checkbox">
             <input type="checkbox" name="apz.force-enable"/>
-            <span></span>
+            <span data-l10n-id="apz-force-enable">Enable APZ for all content processes</span>
           </label>
-          <a data-l10n-id="apz-force-enable">Enable APZ for all content processes</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.log-animations.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.log-animations.enabled">
+            <span data-l10n-id="log-animations">Log slow animations</span>
           </label>
-          <a data-l10n-id="log-animations">Log slow animations</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.ttl.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.ttl.enabled">
+            <span data-l10n-id="ttl-monitor">Show time to load</span>
           </label>
-          <a data-l10n-id="ttl-monitor">Show time to load</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="devtools.debugger.remote-enabled"/>
-            <span></span>
+            <input type="checkbox" name="devtools.debugger.remote-enabled">
+            <span data-l10n-id="remote-debugging">Remote Debugging</span>
           </label>
-          <a data-l10n-id="remote-debugging">Remote Debugging</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="wifi.debugging.enabled" />
-            <span></span>
+            <input type="checkbox" name="wifi.debugging.enabled">
+            <span data-l10n-id="wifi-debugging">Wi-Fi output in adb</span>
           </label>
-          <a data-l10n-id="wifi-debugging">Wi-Fi output in adb</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="bluetooth.debugging.enabled" />
-            <span></span>
+            <input type="checkbox" name="bluetooth.debugging.enabled">
+            <span data-l10n-id="bluetooth-debugging">Bluetooth output in adb</span>
           </label>
-          <a data-l10n-id="bluetooth-debugging">Bluetooth output in adb</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="dom.mozContacts.debugging.enabled" />
-            <span></span>
+            <input type="checkbox" name="dom.mozContacts.debugging.enabled">
+            <span data-l10n-id="contacts-debugging">Contacts debugging output in adb</span>
           </label>
-          <a data-l10n-id="contacts-debugging">Contacts debugging output in adb</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.console.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.console.enabled">
+            <span data-l10n-id="console-enabled">Console enabled</span>
           </label>
-          <a data-l10n-id="console-enabled">Console enabled</a>
         </li>
         <li id="software-home-button">
           <label class="pack-checkbox">
-            <input type="checkbox" name="software-button.enabled"/>
-            <span></span>
+            <input type="checkbox" name="software-button.enabled">
+            <span data-l10n-id="software-button-enabled">Software home button enabled</span>
           </label>
-          <a data-l10n-id="software-button-enabled">Software home button enabled</a>
         </li>
         <li id="homegesture">
           <label class="pack-checkbox">
             <input type="checkbox" name="homegesture.enabled"/>
-            <span></span>
+            <span data-l10n-id="homegesture-enabled">Home gesture enabled</span>
           </label>
-          <a data-l10n-id="homegesture-enabled">Home gesture enabled</a>
         </li>
         <li id="edgesgesture">
           <label class="pack-checkbox">
@@ -120,10 +106,9 @@ <h2 data-l10n-id="debug">Debug</h2>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="debug.gaia.enabled"/>
-            <span></span>
+            <input type="checkbox" name="debug.gaia.enabled">
+            <span data-l10n-id="debug-gaia-enabled">Gaia debug traces</span>
           </label>
-          <a data-l10n-id="debug-gaia-enabled">Gaia debug traces</a>
         </li>
         <li>
           <label class="pack-checkbox">
@@ -146,9 +131,8 @@ <h2 data-l10n-id="accessibility">Accessibility</h2>
         <li>
           <label class="pack-checkbox">
             <input type="checkbox" name="accessibility.screenreader">
-            <span></span>
+            <span data-l10n-id="screenReader">Screen Reader</span>
           </label>
-          <a data-l10n-id="screenReader">Screen Reader</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/accessibility.html b/apps/settings/elements/accessibility.html
@@ -10,17 +10,15 @@ <h1 data-l10n-id="accessibility"> Accessibility </h1>
       <ul>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="accessibility.invert"/>
-            <span></span>
+            <input type="checkbox" name="accessibility.invert">
+            <span data-l10n-id="invertColors">Invert Colors</span>
           </label>
-          <a data-l10n-id="invertColors">Invert Colors</a>
         </li>
         <li>
           <label class="pack-checkbox">
-            <input type="checkbox" name="accessibility.screenreader"/>
-            <span></span>
+            <input type="checkbox" name="accessibility.screenreader">
+            <span data-l10n-id="screenReader">Screen Reader</span>
           </label>
-          <a data-l10n-id="screenReader">Screen Reader</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/battery.html b/apps/settings/elements/battery.html
@@ -21,10 +21,9 @@ <h2 data-l10n-id="powerSaveMode">Power Save Mode</h2>
       <ul>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" name="powersave.enabled" class="uninit"/>
-            <span></span>
+            <input type="checkbox" name="powersave.enabled" class="uninit">
+            <span data-l10n-id="powerSaveMode">Power Save Mode</span>
           </label>
-          <a data-l10n-id="powerSaveMode">Power Save Mode</a>
         </li>
         <li>
           <p data-l10n-id="turnOnAuto">Turn on automatically</p>

diff --git a/apps/settings/elements/bluetooth.html b/apps/settings/elements/bluetooth.html
@@ -10,21 +10,19 @@ <h1 data-l10n-id="bluetooth"> Bluetooth </h1>
       <ul>
         <li id="bluetooth-status" class="hint">
           <label class="pack-switch">
-            <input type="checkbox" data-ignore/>
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <span data-l10n-id="bluetooth">Bluetooth</span>
           </label>
-          <a data-l10n-id="bluetooth">Bluetooth</a>
           <p data-l10n-id="bluetooth-enable-msg" id="bluetooth-enable-msg" class="explanation">
             Turn Bluetooth on to view devices in the area.
           </p>
         </li>
         <li hidden id="device-visible">
           <label class="pack-switch">
-            <input type="checkbox" data-ignore />
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <small id="bluetooth-device-name"></small>
+            <span data-l10n-id="bluetooth-visible-to-all">Visible to all</span>
           </label>
-          <small id="bluetooth-device-name"></small>
-          <a data-l10n-id="bluetooth-visible-to-all">Visible to all</a>
         </li>
         <li hidden id="bluetooth-rename">
           <label>

diff --git a/apps/settings/elements/call.html b/apps/settings/elements/call.html
@@ -14,20 +14,18 @@ <h1 data-l10n-id="callSettings"> Call Settings </h1>
         </li>
         <li id="menuItem-voicePrivacyMode" hidden>
           <label class="pack-switch checkbox-label">
-            <input type="checkbox" data-ignore/>
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <span data-l10n-id="voicePrivacyMode">Voice privacy mode</span>
           </label>
-          <a data-l10n-id="voicePrivacyMode">Voice privacy mode</a>
         </li>
         <li id="menuItem-callWaiting" data-state="off">
           <label class="pack-switch checkbox-label">
-            <input type="checkbox" data-ignore/>
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <span data-l10n-id="callWaiting">Call Waiting</span>
           </label>
           <label class="alert-label" hidden>
             <span></span>
           </label>
-          <a data-l10n-id="callWaiting">Call Waiting</a>
         </li>
         <li id="menuItem-callerId" aria-disabled="true">
           <a data-l10n-id="callerId">Caller ID</a>
@@ -83,10 +81,9 @@ <h1 data-l10n-id="confirmCallWaitingTitle">Unable to confirm call waiting prefer
         </p>
         <p class="cw-alert-sub-p">
           <label class="pack-switch cw-alert-checkbox-label">
-            <input type="checkbox" data-ignore/>
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <span data-l10n-id="callWaiting">Call Waiting</span>
           </label>
-          <span data-l10n-id="callWaiting">Call Waiting</span>
         </p>
       </section>
       <menu>

diff --git a/apps/settings/elements/call_cf_mobile_busy_settings.html b/apps/settings/elements/call_cf_mobile_busy_settings.html
@@ -17,11 +17,10 @@ <h1 data-l10n-id="callForwarding"> Call forwarding </h1>
         </li>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" data-setting="ril.cf.mobilebusy.enabled"/>
-            <span></span>
+            <input type="checkbox" data-setting="ril.cf.mobilebusy.enabled">
+            <small data-l10n-id="callForwardingMobileBusyShort">When busy</small>
+            <span data-l10n-id="callForwardingForward">Forward</span>
           </label>
-          <small data-l10n-id="callForwardingMobileBusyShort">When busy</small>
-          <a data-l10n-id="callForwardingForward">Forward</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/call_cf_no_reply_settings.html b/apps/settings/elements/call_cf_no_reply_settings.html
@@ -17,11 +17,10 @@ <h1 data-l10n-id="callForwarding"> Call forwarding </h1>
         </li>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" data-setting="ril.cf.noreply.enabled"/>
-            <span></span>
+            <input type="checkbox" data-setting="ril.cf.noreply.enabled">
+            <small data-l10n-id="callForwardingNoReplyShort">When unanswered</small>
+            <span data-l10n-id="callForwardingForward">Forward</span>
           </label>
-          <small data-l10n-id="callForwardingNoReplyShort">When unanswered</small>
-          <a data-l10n-id="callForwardingForward">Forward</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/call_cf_not_reachable_settings.html b/apps/settings/elements/call_cf_not_reachable_settings.html
@@ -17,11 +17,10 @@ <h1 data-l10n-id="callForwarding"> Call forwarding </h1>
         </li>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" data-setting="ril.cf.notreachable.enabled"/>
-            <span></span>
+            <input type="checkbox" data-setting="ril.cf.notreachable.enabled">
+            <small data-l10n-id="callForwardingNotReachableShort">When unreachable</small>
+            <span data-l10n-id="callForwardingForward">Forward</span>
           </label>
-          <small data-l10n-id="callForwardingNotReachableShort">When unreachable</small>
-          <a data-l10n-id="callForwardingForward">Forward</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/call_cf_unconditional_settings.html b/apps/settings/elements/call_cf_unconditional_settings.html
@@ -17,11 +17,10 @@ <h1 data-l10n-id="callForwarding"> Call forwarding </h1>
         </li>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" data-setting="ril.cf.unconditional.enabled"/>
-            <span></span>
+            <input type="checkbox" data-setting="ril.cf.unconditional.enabled">
+            <small data-l10n-id="callForwardingUnconditionalShort">Always</small>
+            <span data-l10n-id="callForwardingForward">Forward</span>
           </label>
-          <small data-l10n-id="callForwardingUnconditionalShort">Always</small>
-          <a data-l10n-id="callForwardingForward">Forward</a>
         </li>
       </ul>
     </div>

diff --git a/apps/settings/elements/call_fdn_settings.html b/apps/settings/elements/call_fdn_settings.html
@@ -20,11 +20,10 @@ <h1 data-l10n-id="fdnSettings"> Fixed dialing numbers </h1>
         </li>
         <li id="fdn-enabled">
           <label class="pack-switch">
-            <input type="checkbox" data-ignore />
-            <span></span>
+            <input type="checkbox" data-ignore>
+            <small></small>
+            <span data-l10n-id="fdnSettings">Fixed dialing numbers</span>
           </label>
-          <small></small>
-          <a data-l10n-id="fdnSettings">Fixed dialing numbers</a>
         </li>
         <li>
           <small data-l10n-id="fdn-authorizedNumbers-desc">

diff --git a/apps/settings/elements/carrier.html b/apps/settings/elements/carrier.html
@@ -20,19 +20,17 @@ <h2 data-l10n-id="dataConnectivity"> Data Connectivity </h2>
       <ul>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" name="ril.data.enabled" class="uninit"/>
-            <span></span>
+            <input type="checkbox" name="ril.data.enabled" class="uninit">
+            <small id="dataConnection-desc"></small>
+            <span data-l10n-id="dataConnection">Data Connection</span>
           </label>
-          <small id="dataConnection-desc"></small>
-          <a data-l10n-id="dataConnection">Data Connection</a>
         </li>
         <li id="dataConnection-expl" class="explanation" data-l10n-id="dataConnection-warning-message" hidden></li>
         <li>
           <label class="pack-switch">
-            <input type="checkbox" name="ril.data.roaming_enabled" class="uninit"/>
-            <span></span>
+            <input type="checkbox" name="ril.data.roaming_enabled" class="uninit">
+            <span data-l10n-id="dataRoaming">Data Roaming</span>
           </label>
-          <a data-l10n-id="dataRoaming">Data Roaming</a>
         </li>
         <li id="dataRoaming-expl" class="explanation" data-l10n-id="dataRoaming-warning-message" hidden></li>
       </ul>

diff --git a/apps/settings/elements/carrier_data_settings.html b/apps/settings/elements/carrier_data_settings.html
@@ -13,10 +13,9 @@ <h1 data-l10n-id="dataSettings"> Data Settings </h1>
       <ul class="apnSettings-list">
         <li class="apnSettings-custom">
           <label class="pack-radio">
-            <input type="radio" data-setting="ril.data.carrier" name="dataApnSettingsCarrier" value="_custom_" checked />
-            <span></span>
+            <input type="radio" data-setting="ril.data.carrier" name="dataApnSettingsCarrier" value="_custom_" checked>
+            <span data-l10n-id="custom">(custom settings)</span>
           </label>
-          <a data-l10n-id="custom">(custom settings)</a>
         </li>
       </ul>