Merge pull request #21892 from gtorodelvalle/callscreen-bug-1010104-b…

…aseline-doug-proposal

Bug 1010104 - [Dialer][Call Screen] Baseline of the contact name when applying the fluid font size

apps/callscreen/js/calls_handler.js

@@ -254,9 +254,11 @@ var CallsHandler = (function callsHandler() {
 
       if (!number) {
         CallScreen.incomingNumber.textContent = _('withheld-number');
-        FontSizeManager.adaptToSpace(
-          FontSizeManager.CALL_WAITING, CallScreen.incomingNumber,
-          CallScreen.fakeIncomingNumber, false, 'end');
+        var scenario = (call.state === 'incoming') ?
+          FontSizeManager.SECOND_INCOMING_CALL : FontSizeManager.CALL_WAITING;
+        FontSizeManager.adaptToSpace(scenario, CallScreen.incomingNumber,
+                                     CallScreen.fakeIncomingNumber, false,
+                                     'end');
         return;
       }
 
@@ -278,9 +280,11 @@ var CallsHandler = (function callsHandler() {
           CallScreen.incomingNumber.textContent = number;
           CallScreen.incomingNumberAdditionalInfo.textContent = '';
         }
-        FontSizeManager.adaptToSpace(
-          FontSizeManager.CALL_WAITING, CallScreen.incomingNumber,
-          CallScreen.fakeIncomingNumber, false, 'end');
+        var scenario = (call.state === 'incoming') ?
+          FontSizeManager.SECOND_INCOMING_CALL : FontSizeManager.CALL_WAITING;
+        FontSizeManager.adaptToSpace(scenario, CallScreen.incomingNumber,
+                                     CallScreen.fakeIncomingNumber, false,
+                                     'end');
       });
     });
 

apps/callscreen/js/conference_group_handler.js

@@ -75,7 +75,7 @@ var ConferenceGroupHandler = (function() {
     groupLine.classList.add('ended');
     groupLine.classList.remove('held');
     FontSizeManager.adaptToSpace(CallScreen.getScenario(), groupLabel,
-      fakeNumber, false, 'end');
+                                 fakeNumber, false, 'end');
     CallScreen.stopTicker(groupDuration);
 
     setTimeout(function(evt) {

apps/callscreen/js/handled_call.js

@@ -204,10 +204,10 @@ HandledCall.prototype.updateCallNumber = function hc_updateCallNumber() {
           node.textContent = self._cachedInfo;
         });
       }
-      self.formatPhoneNumber('end');
       self._cachedAdditionalInfo =
         Utils.getPhoneNumberAdditionalInfo(matchingTel);
       self.replaceAdditionalContactInfo(self._cachedAdditionalInfo);
+      self.formatPhoneNumber('end');
       var photo = ContactPhotoHelper.getFullResolution(contact);
       if (photo) {
         self.photo = photo;
@@ -250,9 +250,18 @@ HandledCall.prototype.formatPhoneNumber =
       return;
     }
 
+    var scenario = CallScreen.getScenario();
+    // To cover the second incoming call sub-scenario of the call waiting one,
+    //  we have to check if the current call is in incoming state and if the
+    //  incoming lower pane is being shown.
+    if (scenario === FontSizeManager.CALL_WAITING &&
+        this.call.state === 'incoming' &&
+        CallScreen.incomingContainer.classList.contains('displayed')) {
+      scenario = FontSizeManager.SECOND_INCOMING_CALL;
+    }
     FontSizeManager.adaptToSpace(
-      CallScreen.getScenario(), this.numberNode,
-      this.node.querySelector('.fake-number'), false, ellipsisSide);
+      scenario, this.numberNode, this.node.querySelector('.fake-number'),
+      false, ellipsisSide);
 };
 
 HandledCall.prototype.replacePhoneNumber =

apps/callscreen/test/unit/calls_handler_test.js

@@ -275,11 +275,51 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });
 
+      test('should call FontSizeManager.adaptToSpace if both calls have ' +
+           'withheld numbers', function() {
+        MockNavigatorMozTelephony.calls = [];
+
+        var firstCall = new MockCall('', 'incoming');
+        extraCall = new MockCall('', 'incoming');
+
+        telephonyAddCall.call(this, firstCall, {trigger: true});
+        extraHC = telephonyAddCall.call(this, extraCall);
+
+        MockNavigatorMozTelephony.mTriggerCallsChanged();
+
+        sinon.assert.calledWith(
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
+          MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
+          false, 'end');
+        assert.equal(
+          MockCallScreen.incomingNumber.textContent, 'withheld-number');
+      });
+
+      test('should call FontSizeManager.adaptToSpace if the second call has ' +
+           'withheld number', function() {
+        MockNavigatorMozTelephony.calls = [];
+
+        var firstCall = new MockCall('543552', 'incoming');
+        extraCall = new MockCall('', 'incoming');
+
+        telephonyAddCall.call(this, firstCall, {trigger: true});
+        extraHC = telephonyAddCall.call(this, extraCall);
+
+        MockNavigatorMozTelephony.mTriggerCallsChanged();
+
+        sinon.assert.calledWith(
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
+          MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
+          false, 'end');
+        assert.equal(MockCallScreen.incomingNumber.textContent,
+          'withheld-number');
+      });
+
       suite('screen management', function() {
         setup(function() {
           this.sinon.spy(navigator, 'requestWakeLock');
@@ -459,7 +499,7 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });
@@ -497,7 +537,7 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });
@@ -543,7 +583,7 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });
@@ -572,7 +612,7 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });
@@ -620,7 +660,7 @@ suite('calls handler', function() {
         MockNavigatorMozTelephony.mTriggerCallsChanged();
 
         sinon.assert.calledWith(
-          FontSizeManager.adaptToSpace, FontSizeManager.CALL_WAITING,
+          FontSizeManager.adaptToSpace, FontSizeManager.SECOND_INCOMING_CALL,
           MockCallScreen.incomingNumber, MockCallScreen.fakeIncomingNumber,
           false, 'end');
       });

apps/callscreen/test/unit/handled_call_test.js

@@ -676,7 +676,7 @@ suite('dialer/handled_call', function() {
       this.sinon.spy(FontSizeManager, 'adaptToSpace');
       subject.formatPhoneNumber('end');
       sinon.assert.calledWith(
-        FontSizeManager.adaptToSpace, MockCallScreen.getScenario(),
+        FontSizeManager.adaptToSpace, MockCallScreen.mScenario,
         subject.numberNode, subject.node.querySelector('.fake-number'),
         false, 'end');
     });

shared/js/dialer/font_size_manager.js

@@ -17,15 +17,27 @@ var FontSizeManager = (function fontSizeManager() {
       _MAX_FONT_SIZE_CALL_WAITING = 2.5,
       _MIN_FONT_SIZE_CALL_WAITING = 2.3,
       _MAX_FONT_SIZE_STATUS_BAR = 1.7,
-      _MIN_FONT_SIZE_STATUS_BAR = 1.7;
+      _MIN_FONT_SIZE_STATUS_BAR = 1.7,
+      _MAX_FONT_SIZE_SECOND_INCOMING_CALL = 2.5,
+      _MIN_FONT_SIZE_SECOND_INCOMING_CALL = 2.3;
+
+  /**
+   * These are the line-heights for the single call and call waiting scenarios
+   *  needed to keep the baseline of the text no matter the font size (see
+   *  bug 1010104).
+   */
+  var _SINGLE_CALL_LINE_HEIGHT = 3.7,
+      _CALL_WAITING_LINE_HEIGHT = 1.5,
+      _SECOND_INCOMING_CALL_LINE_HEIGHT = 3.7;
 
   /**
    * Possible scenarios in which the dialer and call screen can be in.
    */
   var DIAL_PAD = 0,
       SINGLE_CALL = 1,
       CALL_WAITING = 2,
-      STATUS_BAR = 3;
+      STATUS_BAR = 3,
+      SECOND_INCOMING_CALL = 4;
 
   var _defaultFontSize;
 
@@ -51,6 +63,9 @@ var FontSizeManager = (function fontSizeManager() {
     case STATUS_BAR:
       minFontSize = _MIN_FONT_SIZE_STATUS_BAR;
       break;
+    case SECOND_INCOMING_CALL:
+      minFontSize = _MIN_FONT_SIZE_SECOND_INCOMING_CALL;
+      break;
     }
     return Math.round(minFontSize * _getDefaultFontSize());
   }
@@ -70,6 +85,9 @@ var FontSizeManager = (function fontSizeManager() {
     case STATUS_BAR:
       maxFontSize = _MAX_FONT_SIZE_STATUS_BAR;
       break;
+    case SECOND_INCOMING_CALL:
+      maxFontSize = _MAX_FONT_SIZE_SECOND_INCOMING_CALL;
+      break;
     }
     return Math.round(maxFontSize * _getDefaultFontSize());
   }
@@ -154,7 +172,8 @@ var FontSizeManager = (function fontSizeManager() {
   function adaptToSpace(scenario, view, fakeView, forceMaxFontSize,
                         ellipsisSide) {
     var maxFontSize = _getMaxFontSize(scenario),
-        minFontSize;
+        minFontSize,
+        initialLineHeight;
 
     // We consider the case where the delete button may have
     // been used to delete the whole phone number.
@@ -174,6 +193,30 @@ var FontSizeManager = (function fontSizeManager() {
     if (view.style.fontSize !== minFontSize &&
         view.style.fontSize !== newFontSize) {
       view.style.fontSize = newFontSize + 'px';
+      // The baseline should be the same no matter the font size.
+      if (view.parentNode.parentNode.classList.contains('additionalInfo')) {
+        switch (scenario) {
+        case SINGLE_CALL:
+          initialLineHeight = _SINGLE_CALL_LINE_HEIGHT;
+          break;
+        case CALL_WAITING:
+          initialLineHeight = _CALL_WAITING_LINE_HEIGHT;
+          break;
+        case SECOND_INCOMING_CALL:
+          initialLineHeight = _SECOND_INCOMING_CALL_LINE_HEIGHT;
+          break;
+        default:
+          initialLineHeight = 0;
+          break;
+        }
+        if (initialLineHeight) {
+          // Taking the line height for the maximum font size case for each
+          //  scenario as the reference, we need to adjust it adding half of
+          //  the decrease to the final calculated font size in pixels.
+          view.style.lineHeight = initialLineHeight * _getDefaultFontSize() +
+            (maxFontSize - newFontSize) / 2 + 'px';
+        }
+      }
     }
     _addEllipsis(view, fakeView, ellipsisSide);
   }
@@ -183,6 +226,7 @@ var FontSizeManager = (function fontSizeManager() {
     SINGLE_CALL: SINGLE_CALL,
     CALL_WAITING: CALL_WAITING,
     STATUS_BAR: STATUS_BAR,
+    SECOND_INCOMING_CALL: SECOND_INCOMING_CALL,
     adaptToSpace: adaptToSpace
   };
 })();

shared/test/unit/mocks/dialer/mock_font_size_manager.js

@@ -10,6 +10,7 @@ var MockFontSizeManager = {
   SINGLE_CALL: 1,
   CALL_WAITING: 2,
   STATUS_BAR: 3,
+  SECOND_INCOMING_CALL: 4,
 
   adaptToSpace: function() {}
 };