Merge pull request #23685 from azasypkin/bug-1048717-call-button-refresh

Bug 1048717 - [Messages][Refresh] Display call button at the header of single recipient thread. r=schung

apps/sms/index.html

@@ -138,7 +138,8 @@ <h1 id="threads-edit-mode" data-l10n-id="selectThreads-title">Select</h1>
       <section id="thread-messages" class="panel" role="region" aria-hidden="true">
         <gaia-header id="messages-header" class="view-header regular-header" action="back">
           <h1 id="messages-header-text" aria-hidden="true"></h1>
-          <a id="messages-options-icon" data-icon="more"></a>
+          <button id="messages-call-number-button" data-icon="call" class="hide"></button>
+          <button id="messages-options-button" data-icon="more"></button>
         </gaia-header>
         <div id="messages-subheader" class="subheader">
           <section id="messages-to-field">

apps/sms/js/thread_ui.js

@@ -100,10 +100,11 @@ var ThreadUI = {
       'input', 'compose-form', 'check-uncheck-all-button',
       'contact-pick-button', 'send-button', 'header', 'edit-header',
       'attach-button', 'delete-button', 'subject-input',
-      'new-message-notice', 'options-icon', 'edit-mode', 'edit-form',
+      'new-message-notice', 'options-button', 'edit-mode', 'edit-form',
       'tel-form', 'header-text', 'max-length-notice', 'convert-notice',
       'resize-notice', 'dual-sim-information', 'new-message-notice',
-      'subject-max-length-notice', 'counter-label', 'recipient-suggestions'
+      'subject-max-length-notice', 'counter-label', 'recipient-suggestions',
+      'call-number-button'
     ].forEach(function(id) {
       this[Utils.camelCase(id)] = document.getElementById('messages-' + id);
     }, this);
@@ -174,10 +175,14 @@ var ThreadUI = {
       'action', this.onHeaderAction.bind(this)
     );
 
-    this.optionsIcon.addEventListener(
+    this.optionsButton.addEventListener(
       'click', this.showOptions.bind(this)
     );
 
+    this.callNumberButton.addEventListener('click', function() {
+      ActivityPicker.dial(Threads.active.participants[0]);
+    });
+
     this.deleteButton.addEventListener(
       'click', this.delete.bind(this)
     );
@@ -611,6 +616,14 @@ var ThreadUI = {
     if (prevPanel !== 'group-view' && prevPanel !== 'report-view') {
       this.initializeRendering();
     }
+
+    // Call button should be shown only for non-email single-participant thread
+    if (Threads.active.participants.length === 1 &&
+        (!Settings.supportEmailRecipient ||
+         !Utils.isEmailAddress(Threads.active.participants[0]))) {
+      this.callNumberButton.classList.remove('hide');
+    }
+
     return this.updateHeaderData();
   },
 
@@ -693,6 +706,7 @@ var ThreadUI = {
 
     if (!Navigation.isCurrentPanel('thread')) {
       this.threadMessages.classList.remove('has-carrier');
+      this.callNumberButton.classList.add('hide');
     }
   },
 
@@ -2749,7 +2763,8 @@ var ThreadUI = {
       items: null
     };
 
-    // All non-email activations will see a "Call" option
+    // All non-email activations (except for single participant thread) will
+    // see a "Call" option
     if (email) {
       items.push({
         l10nId: 'sendEmail',
@@ -2759,17 +2774,16 @@ var ThreadUI = {
         params: [email]
       });
     } else {
-      items.push({
-        l10nId: 'call',
-        method: function oCall(param) {
-          ActivityPicker.dial(param);
-        },
-        params: [number]
-      });
-
       // Multi-participant activations or in-message numbers
-      // will include a "Send Message" option in the menu
+      // will include a "Call" and "Send Message" options in the menu
       if ((thread && thread.participants.length > 1) || inMessage) {
+        items.push({
+          l10nId: 'call',
+          method: function() {
+            ActivityPicker.dial(number);
+          }
+        });
+
         items.push({
           l10nId: 'sendMessage',
           method: function oMessage(param) {

apps/sms/style/sms.css

@@ -801,7 +801,7 @@ body[role="application"] form[role="dialog"][data-type="action"] > header:first-
  */
 
 /* Elements related to information view */
-section[role="region"][class$='information'] #messages-options-icon,
+section[role="region"][class$='information'] #messages-options-button,
 section[role="region"][class$='information'] #messages-subheader,
 section[role="region"][class$='information'] #messages-container,
 section[role="region"][class$='information'] #messages-compose-form {

apps/sms/test/unit/mock_thread_ui.js

@@ -17,7 +17,8 @@ var MockThreadUI = {
   recipientsList: document.createElement('div'),
 
   // For Information view testing. Need to be updated with ThreadUI layout
-  optionsIcon: document.createElement('a'),
+  optionsButton: document.createElement('button'),
+  callNumberButton: document.createElement('button'),
   attachButton: document.createElement('button'),
   subheader: document.createElement('div'),
   container: document.createElement('article'),

apps/sms/test/unit/thread_ui_test.js

@@ -4005,16 +4005,13 @@ suite('thread_ui.js >', function() {
             // no section is passed for contact
             assert.isUndefined(call.section);
 
-            assert.equal(items.length, 3);
-
-            // The first item is a "call" option
-            assert.equal(items[0].l10nId, 'call');
+            assert.equal(items.length, 2);
 
-            // The second item is a "viewContact" option
-            assert.equal(items[1].l10nId, 'viewContact');
+            // The first item is a "viewContact" option
+            assert.equal(items[0].l10nId, 'viewContact');
 
-            // The fourth and last item is a "cancel" option
-            assert.equal(items[2].l10nId, 'cancel');
+            // The last item is a "cancel" option
+            assert.equal(items[1].l10nId, 'cancel');
           });
 
           test('Unknown recipient (phone)', function() {
@@ -4035,19 +4032,16 @@ suite('thread_ui.js >', function() {
             // Only known Contact details should appear in the "section"
             assert.isUndefined(call.section);
 
-            assert.equal(items.length, 4);
+            assert.equal(items.length, 3);
 
-            // The first item is a "call" option
-            assert.equal(items[0].l10nId, 'call');
+            // The first item is a "createNewContact" option
+            assert.equal(items[0].l10nId, 'createNewContact');
 
-            // The second item is a "createNewContact" option
-            assert.equal(items[1].l10nId, 'createNewContact');
+            // The second item is a "addToExistingContact" option
+            assert.equal(items[1].l10nId, 'addToExistingContact');
 
-            // The third item is a "addToExistingContact" option
-            assert.equal(items[2].l10nId, 'addToExistingContact');
-
-            // The fourth and last item is a "cancel" option
-            assert.equal(items[3].l10nId, 'cancel');
+            // The last item is a "cancel" option
+            assert.equal(items[2].l10nId, 'cancel');
           });
 
           test('Unknown recipient (email)', function() {
@@ -4117,7 +4111,7 @@ suite('thread_ui.js >', function() {
               target: calls[0].header
             });
 
-            assert.equal(calls[0].items.length, 3);
+            assert.equal(calls[0].items.length, 2);
             assert.equal(typeof calls[0].complete, 'function');
           });
 
@@ -4136,7 +4130,7 @@ suite('thread_ui.js >', function() {
 
             assert.equal(calls.length, 1);
             assert.equal(calls[0].header, '777');
-            assert.equal(calls[0].items.length, 4);
+            assert.equal(calls[0].items.length, 3);
             assert.equal(typeof calls[0].complete, 'function');
           });
 
@@ -5978,9 +5972,13 @@ suite('thread_ui.js >', function() {
       ThreadUI.updateCarrier(thread, [contact]);
       assert.isTrue(threadMessages.classList.contains('has-carrier'));
 
+      // Show call button
+      ThreadUI.callNumberButton.classList.remove('hide');
+
       ThreadUI.afterLeave();
 
       assert.isFalse(threadMessages.classList.contains('has-carrier'));
+      assert.isTrue(ThreadUI.callNumberButton.classList.contains('hide'));
     });
   });
 
@@ -6152,8 +6150,10 @@ suite('thread_ui.js >', function() {
   });
 
   suite('switch to thread panel >', function() {
-    var threadId = 100;
-    var transitionArgs;
+    var threadId = 100,
+        multiParticipantThreadId = 200;
+    var transitionArgs,
+        multiParticipantTransitionArgs;
 
     setup(function() {
       transitionArgs = {
@@ -6164,6 +6164,22 @@ suite('thread_ui.js >', function() {
         }
       };
 
+      Threads.set(threadId, {
+        participants: ['999']
+      });
+
+      multiParticipantTransitionArgs = {
+        id: multiParticipantThreadId,
+        meta: {
+          next: { panel: 'thread', args: { id: multiParticipantThreadId } },
+          prev: { panel: 'thread-list', args: {} }
+        }
+      };
+
+      Threads.set(multiParticipantThreadId, {
+        participants: ['999', '888']
+      });
+
       this.sinon.stub(Navigation, 'isCurrentPanel').returns(false);
       this.sinon.stub(ThreadListUI, 'mark');
       this.sinon.stub(MessageManager, 'markThreadRead');
@@ -6195,6 +6211,28 @@ suite('thread_ui.js >', function() {
         test('updates Threads.currentId', function() {
           assert.equal(Threads.currentId, threadId);
         });
+
+        test('correctly shows "Call" header button', function() {
+          // It's shown for single participant non-email thread
+          assert.isFalse(ThreadUI.callNumberButton.classList.contains('hide'));
+
+          ThreadUI.callNumberButton.classList.add('hide');
+          ThreadUI.beforeEnter(multiParticipantTransitionArgs);
+
+          // Hidden for multi participant thread
+          assert.isTrue(ThreadUI.callNumberButton.classList.contains('hide'));
+
+          ThreadUI.callNumberButton.classList.add('hide');
+          Settings.supportEmailRecipient = true;
+          Threads.set(threadId, {
+            participants: ['nobody@mozilla.com']
+          });
+
+          ThreadUI.beforeEnter(transitionArgs);
+
+          // Hidden for email participant thread
+          assert.isTrue(ThreadUI.callNumberButton.classList.contains('hide'));
+        });
       });
     });
 

tests/python/gaia-ui-tests/gaiatest/apps/messages/regions/new_message.py

@@ -16,7 +16,7 @@ class NewMessage(Messages):
     _message_field_locator = (By.ID, 'messages-input')
     _send_message_button_locator = (By.ID, 'messages-send-button')
     _attach_button_locator = (By.ID, 'messages-attach-button')
-    _options_icon_locator = (By.ID, 'messages-options-icon')
+    _options_button_locator = (By.ID, 'messages-options-button')
     _message_sending_locator = (By.CSS_SELECTOR, "li.message.outgoing.sending")
     _thread_messages_locator = (By.ID, 'thread-messages')
     _message_resize_notice_locator = (By.ID, 'messages-resize-notice')
@@ -61,7 +61,7 @@ def tap_add_recipient(self):
         return contacts_app
 
     def tap_options(self):
-        self.marionette.find_element(*self._options_icon_locator).tap()
+        self.marionette.find_element(*self._options_button_locator).tap()
         from gaiatest.apps.messages.regions.activities import Activities
         return Activities(self.marionette)