Merge pull request #10476 from crh0716/881727_v2

Bug 881727 - Move the type of switch controls to the top level element. r=lightsofapollo, jmcf, fcampo, daleharvey, salva, asuth, timdream, schung, kaze, basiclines, etienne
mozilla-b2g · Jul 19, 2013 · 6e4ff75 · 6e4ff75
2 parents 799f7a6 + 4615144
commit 6e4ff75
Show file tree

Hide file tree

Showing 44 changed files with 380 additions and 337 deletions.
diff --git a/apps/browser/index.html b/apps/browser/index.html
@@ -236,9 +236,9 @@ <h1 data-l10n-id="login-to-a-website">Login to a website</h1>
     <!--
       <section>
         <p><span id="modal-dialog-custom-prompt-message"></span></p>
-        <label>
+        <label class="pack-checkbox">
           <input id="modal-dialog-custom-prompt-checkbox" type="checkbox" />
-        <span></span>
+          <span></span>
         </label>
       </section>
       <menu id="modal-dialog-custom-prompt-buttons"></menu>

diff --git a/apps/calendar/index.html b/apps/calendar/index.html
@@ -324,7 +324,7 @@ <h1 data-l10n-id="add-event-header">
       </li>
 
       <li class="allday">
-        <label>
+        <label class="pack-checkbox">
           <input name="allday" type="checkbox" />
           <span></span>
         </label>

diff --git a/apps/calendar/js/templates/calendar.js b/apps/calendar/js/templates/calendar.js
@@ -13,7 +13,7 @@
 
       return '<li id="calendar-' + id + '">' +
           '<div class="calendar-id-' + id + ' calendar-color"></div>' +
-          '<label>' +
+          '<label class="pack-checkbox">' +
             '<span ' + l10n + ' class="name">' + this.h('name') + '</span>' +
             '<input ' +
               'value="' + id + '" ' +

diff --git a/apps/communications/contacts/import.html b/apps/communications/contacts/import.html
@@ -89,7 +89,7 @@ <h1>Service</h1>
               <header>#group#</header>
               <ol id="contacts-list-#group#">
                 <li data-template data-uuid="#uid#" data-search="#search#" aria-disabled="false" class="block-item">
-                  <label>
+                  <label class="pack-checkbox">
                     <input type="checkbox" name="#uid#"></input>
                     <span></span>
                   </label>

diff --git a/apps/communications/contacts/index.html b/apps/communications/contacts/index.html
@@ -471,8 +471,8 @@ <h1 data-l10n-id="settings">Settings</h1>
             <ul data-type="list">
               <li id="settingsOrder">
                <aside class="pack-end">
-                  <label>
-                    <input type="checkbox" data-type="switch" name="order.lastname" />
+                  <label class="pack-switch">
+                    <input type="checkbox" name="order.lastname" />
                     <span></span>
                   </label>
                 </aside>
@@ -517,9 +517,9 @@ <h2 data-l10n-id="facebook">Facebook</h2>
             <ul id="settingsFb" data-type="list" data-state="logged-out">
               <li class="fb-item">
                 <aside class="pack-end">
-                  <label>
-                      <input type="checkbox" data-type="switch" name="fb.imported">
-                      <span id="span-check-fb"></span>
+                  <label class="pack-switch">
+                    <input type="checkbox" name="fb.imported">
+                    <span id="span-check-fb"></span>
                   </label>
                 </aside>
                 <p data-l10n-id="facebookSwitchMsg">Sync friends</p>

diff --git a/apps/communications/contacts/test/unit/contacts_settings_test.js b/apps/communications/contacts/test/unit/contacts_settings_test.js
@@ -84,8 +84,8 @@ suite('Contacts settings', function() {
     '<ul data-type="list">\n' +
     '<li id="settingsOrder">\n' +
     '<aside class="pack-end">\n' +
-    '<label>\n' +
-    '<input type="checkbox" data-type="switch" name="order.lastname" />\n' +
+    '<label class="pack-switch">\n' +
+    '<input type="checkbox" name="order.lastname" />\n' +
     '<span></span>\n' +
     '</label>\n' +
     '</aside>\n' +
@@ -126,8 +126,8 @@ suite('Contacts settings', function() {
     '<ul id="settingsFb" data-type="list" data-state="logged-out">\n' +
     '<li class="fb-item">\n' +
     '<aside class="pack-end">\n' +
-    '<label>\n' +
-    '<input type="checkbox" data-type="switch" name="fb.imported">\n' +
+    '<label class="pack-switch">\n' +
+    '<input type="checkbox" name="fb.imported">\n' +
     '<span id="span-check-fb"></span>\n' +
     '</label>\n' +
     '</aside>\n' +

diff --git a/apps/communications/contacts/test/unit/mock_contacts_index.html b/apps/communications/contacts/test/unit/mock_contacts_index.html
@@ -414,8 +414,8 @@ <h1 data-l10n-id="settings">Settings</h1>
             <ul data-type="list">
               <li id="settingsOrder">
                <aside class="pack-end">
-                  <label>
-                    <input type="checkbox" data-type="switch" name="order.lastname" />
+                  <label class="pack-switch">
+                    <input type="checkbox" name="order.lastname" />
                     <span></span>
                   </label>
                 </aside>
@@ -456,9 +456,9 @@ <h2 data-l10n-id="facebook">Facebook</h2>
             <ul id="settingsFb" data-type="list" data-state="logged-out">
               <li class="fb-item">
                 <aside class="pack-end">
-                  <label>
-                      <input type="checkbox" data-type="switch" name="fb.imported">
-                      <span id="span-check-fb"></span>
+                  <label class="pack-switch">
+                    <input type="checkbox" name="fb.imported">
+                    <span id="span-check-fb"></span>
                   </label>
                 </aside>
                 <p data-l10n-id="facebookSwitchMsg">Sync friends</p>

diff --git a/apps/communications/dialer/js/call_log.js b/apps/communications/dialer/js/call_log.js
@@ -429,7 +429,7 @@ var CallLog = {
     }
 
     var label = document.createElement('label');
-    label.className = 'call-log-selection danger';
+    label.className = 'pack-checkbox call-log-selection danger';
     var input = document.createElement('input');
     input.setAttribute('type', 'checkbox');
     input.value = group.id;

diff --git a/apps/communications/dialer/style/call_log.css b/apps/communications/dialer/style/call_log.css
@@ -167,7 +167,7 @@ ol, ul {
   transform: translateY(0);
 }
 
-.recents-edit label:not([for]).call-log-selection {
+.recents-edit .pack-checkbox.call-log-selection {
   transform: translateX(4rem);
   transition: transform 0.3s ease;
 }
@@ -190,7 +190,7 @@ ol, ul {
   pointer-events: none;
 }
 
-.recents-edit .log-item label {
+.recents-edit .log-item .pack-checkbox {
   pointer-events: auto;
 }
 

diff --git a/apps/communications/dialer/test/unit/calllog_test.js b/apps/communications/dialer/test/unit/calllog_test.js
@@ -109,7 +109,7 @@ suite('dialer/call_log', function() {
     // Label.
     var label = groupDOM.querySelector('.call-log-selection.danger');
     assert.ok(label, 'Label ok');
-    assert.equal(label.className, 'call-log-selection danger');
+    assert.equal(label.className, 'pack-checkbox call-log-selection danger');
 
     // Input.
     var input = label.getElementsByTagName('input');

diff --git a/apps/communications/ftu/index.html b/apps/communications/ftu/index.html
@@ -161,8 +161,8 @@ <h1 id="main-title"></h1>
           <ul>
             <li>
               <aside class="pack-end">
-                <label>
-                  <input type="checkbox" data-type="switch" id="data-connection-switch">
+                <label class="pack-switch">
+                  <input type="checkbox" id="data-connection-switch">
                   <span></span>
                 </label>
               </aside>
@@ -192,7 +192,7 @@ <h1 id="main-title"></h1>
             <input type="text" id="wifi_user" data-l10n-id="identityInput" placeholder="User" x-inputmode="verbatim"></input>
             <label for="wifi_password" data-l10n-id="password">Password</label>
             <input type="password" id="wifi_password" data-l10n-id="passwordInput" placeholder="Password" value="" x-inputmode="verbatim"></input>
-            <label id="label_show_password">
+            <label class="pack-checkbox" id="label_show_password">
               <input type="checkbox" data-ignore name="show_password" />
               <span></span>
               <p id="wifi_show_password" data-l10n-id="showPassword">Show Password</p>
@@ -229,7 +229,7 @@ <h1 id="main-title"></h1>
               Password
             </label>
             <input type="password" name="wifi_hidden_password" id="hidden-wifi-password" value=""/>
-            <label id="label_show_password">
+            <label class="pack-checkbox" id="label_show_password">
               <input type="checkbox" id="hidden-wifi-show-password">
               <span></span>
               <p data-l10n-id="showPassword">Show Password</p>
@@ -289,8 +289,8 @@ <h2 id="time-zone-title">
           <ul>
             <li>
               <aside class="pack-end">
-                <label>
-                  <input type="checkbox" data-type="switch" id="geolocation-switch" name="geolocation.enabled" checked>
+                <label class="pack-switch">
+                  <input type="checkbox" id="geolocation-switch" name="geolocation.enabled" checked>
                   <span></span>
                 </label>
               </aside>
@@ -490,7 +490,7 @@ <h2 data-l10n-id="about-other"> Other </h2>
           <a href="#about-your-privacy" data-l10n-id="aboutYourPrivacy2">Your Privacy</a>
         </section>
         <section id="form_share_statistics">
-          <label>
+          <label class="pack-checkbox">
             <input type="checkbox" id="share-performance" name="debug.performance_data.shared"/>
             <span></span>
             <p data-l10n-id="collaborate">

diff --git a/apps/communications/ftu/js/language.js b/apps/communications/ftu/js/language.js
@@ -165,6 +165,7 @@ var LanguageManager = {
         p.appendChild(bdo);
 
         var label = document.createElement('label');
+        label.classList.add('pack-radio');
         label.appendChild(input);
         label.appendChild(span);
         label.appendChild(p);

diff --git a/apps/communications/import/test/unit/mock_import.html b/apps/communications/import/test/unit/mock_import.html
@@ -30,7 +30,7 @@ <h1 data-l10n-id="fbFriends">Facebook Friends</h1>
           <header>#group#</header>
           <ol id="contacts-list-#group#">
             <li data-template data-uuid="#uid#" data-search="#search#" aria-disabled="false" class="block-item">
-              <label>
+              <label class="pack-checkbox">
                 <input type="checkbox" name="#uid#"></input>
                <span></span>
               </label>

diff --git a/apps/costcontrol/debug.html b/apps/costcontrol/debug.html
@@ -4,29 +4,29 @@ <h2>Development</h2>
 </header>
 <ul class="settings">
   <li>
-    <label class="end">
-      <input class="settings-option" data-option="fte" type="checkbox" data-type="switch" />
+    <label class="pack-switch end">
+      <input class="settings-option" data-option="fte" type="checkbox"/>
       <span></span>
     </label>
     <p>Enable first time experience</p>
   </li>
   <li>
-    <label class="end">
-      <input class="settings-option" data-option="lowLimitNotified" type="checkbox" data-type="switch" />
+    <label class="pack-switch end">
+      <input class="settings-option" data-option="lowLimitNotified" type="checkbox"/>
       <span></span>
     </label>
     <p>Low limit already notified</p>
   </li>
   <li>
-    <label class="end">
-      <input class="settings-option" data-option="zeroBalanceNotified" type="checkbox" data-type="switch" />
+    <label class="pack-switch end">
+      <input class="settings-option" data-option="zeroBalanceNotified" type="checkbox"/>
       <span></span>
     </label>
     <p>Zero balance already notified</p>
   </li>
   <li>
-    <label class="end">
-      <input class="settings-option" data-option="dataUsageNotified" type="checkbox" data-type="switch" />
+    <label class="pack-switch end">
+      <input class="settings-option" data-option="dataUsageNotified" type="checkbox"/>
       <span></span>
     </label>
     <p>Data usage already notified</p>

diff --git a/apps/costcontrol/fte.html b/apps/costcontrol/fte.html
@@ -128,8 +128,8 @@ <h1 data-l10n-id="fte-prepaid2-title">Low balance alert</h1>
       <section class="content">
         <ul class="settings">
           <li>
-            <label class="end">
-              <input id="low-limit" class="settings-option" data-option="lowLimit" type="checkbox" checked="checked" data-type="switch">
+            <label class="pack-switch end">
+              <input id="low-limit" class="settings-option" data-option="lowLimit" type="checkbox" checked="checked">
               <span></span>
             </label>
             <p data-l10n-id="low-balance-alert">Low Balance alert</p>
@@ -228,8 +228,8 @@ <h1 data-l10n-id="fte-prepaid3-title">Data Report and Alert</h1>
             <p data-l10n-id="starting-on">Starting on</p>
           </li>
           <li>
-            <label class="end">
-              <input class="settings-option" data-option="dataLimit" type="checkbox" data-type="switch">
+            <label class="pack-switch end">
+              <input class="settings-option" data-option="dataLimit" type="checkbox">
               <span></span>
             </label>
             <p data-l10n-id="data-limit-alert">Data use alert</p>
@@ -349,8 +349,8 @@ <h1 data-l10n-id="fte-postpaid3-title">Data Alert</h1>
       <section class="content">
         <ul class="settings">
           <li>
-            <label class="end">
-              <input class="settings-option" data-option="dataLimit" type="checkbox" data-type="switch">
+            <label class="pack-switch end">
+              <input class="settings-option" data-option="dataLimit" type="checkbox">
               <span></span>
             </label>
             <p data-l10n-id="data-limit-alert">Data use alert</p>
@@ -469,8 +469,8 @@ <h1 data-l10n-id="fte-onlydata3-title">Data Alert</h1>
       </header>
       <ul class="content settings">
         <li>
-          <label class="end">
-            <input class="settings-option" data-option="dataLimit" type="checkbox" data-type="switch">
+          <label class="pack-switch end">
+            <input class="settings-option" data-option="dataLimit" type="checkbox">
             <span></span>
           </label>
           <p data-l10n-id="data-limit-alert">Data use alert</p>

diff --git a/apps/costcontrol/index.html b/apps/costcontrol/index.html
@@ -251,7 +251,7 @@ <h2 data-l10n-id="enter-top-up-code">
 
           <ul class="toggle-data" data-type="list">
             <li id="mobileItem" aria-disabled="true">
-              <label>
+              <label class="pack-checkbox">
                 <input type="checkbox" id="mobileCheck">
                 <span>
                 </span>
@@ -262,7 +262,7 @@ <h2 data-l10n-id="enter-top-up-code">
               </p>
             </li>
             <li id="wifiItem" aria-disabled="true">
-              <label>
+              <label class="pack-checkbox">
                 <input type="checkbox" id="wifiCheck">
                 <span>
                 </span>

diff --git a/apps/costcontrol/settings.html b/apps/costcontrol/settings.html
@@ -91,8 +91,8 @@ <h2 data-l10n-id="balance">Balance</h2>
                 <p class="meta"></p>
             </li>
             <li>
-              <label class="end switch">
-                <input class="settings-option" data-option="lowLimit" type="checkbox" data-type="switch" id="low-limit" />
+              <label class="pack-switch end">
+                <input class="settings-option" data-option="lowLimit" type="checkbox" id="low-limit" />
                 <span></span>
               </label>
               <p data-l10n-id="low-balance-alert">Low balance alert</p>
@@ -124,8 +124,8 @@ <h2 data-l10n-id="data-usage">Data Usage</h2>
               <p class="meta"></p>
             </li>
             <li>
-              <label class="end switch">
-                <input class="settings-option" data-option="dataLimit" type="checkbox" data-type="switch" />
+              <label class="pack-switch end">
+                <input class="settings-option" data-option="dataLimit" type="checkbox"/>
                 <span></span>
               </label>
               <p data-l10n-id="data-limit-alert">Data use alert</p>