Bug 1059087 - Fix missing spacing between "Carrier Name" and "Type La…

…bel". r=francisco
mozilla-b2g · Sep 16, 2014 · 713448b · 713448b
1 parent d3b1f6b
commit 713448b
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 19 deletions.
diff --git a/apps/communications/contacts/elements/details.html b/apps/communications/contacts/elements/details.html
@@ -8,8 +8,14 @@ <h1 id='contact-name-title'></h1>
     <article id="contact-detail-wrapper" class="view-body">
       <div id="cover-img"></div>
         <section id="contact-detail" class="view-body-inner">
-          <li data-phone id='phone-details-template-#i#' data-template>
-            <h2 data-l10n-id="#type_l10n_id#">#type# <span class="carrier">#carrier#</span></h2>
+          <li data-phone id='phone-details-template-#i#' data-template role="region">
+            <h2>
+              <span data-l10n-id="#type_l10n_id#">#type#</span>
+              <span class="carrier-wrapper" hidden>
+                <span data-l10n-id="separator"></span>
+                <span class="carrier">#carrier#</span>
+              </span>
+            </h2>
             <div class="item">
               <div class="item-media pull-right">
                 <button id="send-sms-button-#i#" class="activity send-sms icon icon-message" data-l10n-id="send-sms-button" aria-label="SMS"></button>

diff --git a/apps/communications/contacts/elements/phone_details.html b/apps/communications/contacts/elements/phone_details.html
@@ -1,8 +1,14 @@
 <!-- bug 1060080: taken from details.html, should be unified -->
 <element name="phone-details" extends="section">
   <template>
-    <li data-phone id='phone-details-template-#i#' data-template>
-      <h2 data-l10n-id="#type_l10n_id#">#type# <span class="carrier">#carrier#</span></h2>
+    <li data-phone id='phone-details-template-#i#' data-template role="region">
+      <h2>
+        <span data-l10n-id="#type_l10n_id#">#type#</span>
+        <span class="carrier-wrapper" hidden>
+          <span data-l10n-id="separator"></span>
+          <span class="carrier">#carrier#</span>
+        </span>
+      </h2>
       <div class="item">
         <div class="item-media pull-right">
           <button id="send-sms-button-#i#" class="activity send-sms icon icon-message" data-l10n-id="send-sms-button" aria-label="SMS"></button>

diff --git a/apps/communications/contacts/test/unit/contacts_buttons_test.js b/apps/communications/contacts/test/unit/contacts_buttons_test.js
@@ -44,6 +44,11 @@ suite('Render contact', function() {
 
   var getSpy;
 
+  var assertCarrierWrapperVisibility = function(visibility) {
+    var carrierWrapperElt = listDetails.querySelector('.carrier-wrapper');
+    assert.equal(carrierWrapperElt.hidden, !visibility);
+  };
+
   mocksHelperForContactsButtons.attachTestHelpers();
 
   suiteSetup(function() {
@@ -80,7 +85,7 @@ suite('Render contact', function() {
         listDetails.querySelector('h2').innerHTML,
         mockContact.tel[0].carrier
       );
-      sinon.assert.calledWith(getSpy, 'separator');
+      assertCarrierWrapperVisibility(true);
     });
 
     test('with 1 phone and carrier undefined', function() {
@@ -98,6 +103,7 @@ suite('Render contact', function() {
                     contactNoCarrier.tel[0].value);
       var carrierContent = listDetails.querySelector('.carrier').textContent;
       assert.lengthOf(carrierContent, 0);
+      assertCarrierWrapperVisibility(false);
 
     });
 
@@ -134,6 +140,7 @@ suite('Render contact', function() {
       assert.include(listDetails.innerHTML, subject.DEFAULT_TEL_TYPE);
       assert.equal(
         -1, listDetails.innerHTML.indexOf('phone-details-template-2'));
+      assertCarrierWrapperVisibility(true);
     });
 
     test('highlight phone number', function() {
@@ -243,7 +250,7 @@ suite('Render contact', function() {
       stubCall.restore();
     }
 
-    test(' > Not loading MultiSimActionButton when we are on an activity',
+    test('> Not loading MultiSimActionButton when we are on an activity',
          function() {
       this.sinon.stub(MmiManager, 'isMMI').returns(true);
       ActivityHandler.currentlyHandling = true;

diff --git a/apps/communications/contacts/test/unit/mock_contacts_buttons_dom.js.html b/apps/communications/contacts/test/unit/mock_contacts_buttons_dom.js.html
@@ -3,8 +3,13 @@
 var MockContactsButtonsDom = `<section id="contact-detail">
     <section id="phone-details">
       <li data-phone id='phone-details-template-#i#' data-template>
-        <h2 data-l10n-id="#type_l10n_id#">#type#
-          <span class="carrier">#carrier#</span></h2>
+        <h2>
+          <span data-l10n-id="#type_l10n_id#">#type#</span>
+          <span class="carrier-wrapper" hidden>
+            <span data-l10n-id="separator"></span>
+            <span class="carrier">#carrier#</span>
+          </span>
+        </h2>
         <div class="item">
           <div class="item-media pull-right">
             <button id="send-sms-button-#i#"

diff --git a/shared/js/contacts/contacts_buttons.js b/shared/js/contacts/contacts_buttons.js
@@ -8,9 +8,6 @@
 var ContactsButtons = {
   DEFAULT_TEL_TYPE: 'other',
   DEFAULT_EMAIL_TYPE: 'other',
-  PHONE_TYPE_MAP: {
-    'cell' : 'mobile'
-  },
 
   _listContainer: null,
   _contactDetails: null,
@@ -104,19 +101,18 @@ var ContactsButtons = {
     var telLength = Contacts.getLength(contact.tel);
     for (var tel = 0; tel < telLength; tel++) {
       var currentTel = contact.tel[tel];
+      var typeKey = currentTel.type;
       var escapedType = Normalizer.escapeHTML(currentTel.type, true).trim();
       var carrier = Normalizer.escapeHTML(currentTel.carrier || '', true) || '';
+
       if (!escapedType) {
-        escapedType =
-          navigator.mozL10n.get(this.PHONE_TYPE_MAP[escapedType] ||
-                                escapedType ||
-                                this.DEFAULT_TEL_TYPE);
+        typeKey = this.DEFAULT_TEL_TYPE;
       }
 
       var telField = {
         value: Normalizer.escapeHTML(currentTel.value, true) || '',
-        type: escapedType + (carrier ? navigator.mozL10n.get('separator') : ''),
-        'type_l10n_id': currentTel.type,
+        type: escapedType,
+        'type_l10n_id': typeKey,
         carrier: carrier,
         i: tel
       };
@@ -135,6 +131,11 @@ var ContactsButtons = {
       callOrPickButton.dataset.tel = telField.value;
       this._setupPhoneButtonListener(callOrPickButton, telField.value);
 
+      if (carrier) {
+        var carrierWrapperElt = template.querySelector('.carrier-wrapper');
+        carrierWrapperElt.hidden = false;
+      }
+
       this._listContainer.appendChild(template);
     }
   },

diff --git a/shared/style/contacts/contacts_buttons.css b/shared/style/contacts/contacts_buttons.css
@@ -52,12 +52,13 @@ li button.icon-email:before {
 }
 
 #contact-detail h2 {
+  display: flex;
+  margin: 0 1.5rem 0.2rem;
+
   text-transform: uppercase;
-  font-size: 1.6rem;
   font-size: 1.8rem;
   color: #4997a7;
   font-weight: normal;
-  margin: 0 1.5rem 0.2rem;
 }
 
 #contact-detail .carrier {