Merge pull request #12658 from Rik/polish-statusbar-921056

Bug 921056 - Visual polish for status bar r=etienne(cherry picked from commit f1c6218)

apps/communications/dialer/js/call_screen.js

@@ -77,6 +77,10 @@ var CallScreen = {
     this.callToolbar.classList.toggle('no-add-call', enabled);
   },
 
+  get inStatusBarMode() {
+    return window.innerHeight <= 40;
+  },
+
   init: function cs_init() {
     this.muteButton.addEventListener('click', this.toggleMute.bind(this));
     this.keypadButton.addEventListener('click', this.showKeypad.bind(this));
@@ -157,7 +161,7 @@ var CallScreen = {
       return;
     }
 
-    if (window.innerHeight <= 40) {
+    if (this.inStatusBarMode) {
       this._typedNumber = KeypadManager._phoneNumber;
       KeypadManager.restorePhoneNumber();
     } else {

apps/communications/dialer/js/calls_handler.js

@@ -343,16 +343,7 @@ var CallsHandler = (function callsHandler() {
     window.close();
   }
 
-  var _previousMaxFontSize;
   function _changeMaxFontSize(evt) {
-    // Status bar
-    if (window.innerHeight <= 40) {
-      _previousMaxFontSize = KeypadManager.maxFontSize;
-      KeypadManager.maxFontSize = 26;
-    } else {
-      KeypadManager.maxFontSize = _previousMaxFontSize;
-    }
-
     handledCalls.forEach(function(hc) {
       hc.formatPhoneNumber();
     });

apps/communications/dialer/js/handled_call.js

@@ -252,6 +252,12 @@ HandledCall.prototype.restoreAdditionalContactInfo =
 
 HandledCall.prototype.formatPhoneNumber =
   function hc_formatPhoneNumber(ellipsisSide, maxFontSize) {
+    // In status bar mode, we want a fixed font-size
+    if (CallScreen.inStatusBarMode) {
+      this.numberNode.style.fontSize = '';
+      return;
+    }
+
     var fakeView = this.node.querySelector('.fake-number');
     var view = this.numberNode;
 

apps/communications/dialer/style/oncall_status_bar.css

@@ -5,17 +5,33 @@
   }
 
   body {
+    margin: 0;
+  }
+
+  .handled-call,
+  #group-call {
     background-color: #82af00;
     background-image: url('images/green-noise-bg.png');
     background-repeat: repeat-x;
     background-size: auto 4rem;
     color: white;
     font-size: 1.8rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    height: 40px;
+  }
+
+  .handled-call.held,
+  #group-call.held {
+    background-color: #333;
+    background-image: none;
   }
 
   #main-container,
   #incoming-container,
   #views,
+  #lockscreen-header,
+  #group-call-details,
   .additionalContactInfo,
   .merge-button {
     display: none;
@@ -32,32 +48,31 @@
     transform: translateY(0);
   }
 
-  #calls .handled-call {
+  #calls .handled-call,
+  #calls #group-call:not([hidden]) {
     display: flex;
     align-items: center;
   }
 
   .numberWrapper {
     flex: 1;
     display: flex;
+    align-items: center;
   }
 
   .number {
-    align-items: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 2.6rem;
-    max-height: 2.6rem;
   }
 
   .direction-status-bar:before {
     content: "";
     display: block;
-    width: 2.6rem;
-    height: 2.6rem;
+    width: 1.6rem;
+    height: 1.6rem;
     background-repeat: no-repeat;
-    background-size: 2.6rem;
+    background-size: 1.6rem;
     margin-right: 1rem;
     flex-shrink: 0;
   }
@@ -86,7 +101,7 @@
     height: 1.8rem;
     background-repeat: no-repeat;
     background-size: contain;
-    margin-right: 0.5rem;
+    margin-right: 1rem;
     background-image: url('images/status_bar/muted_icon.png');
   }
 

apps/communications/dialer/test/unit/handled_call_test.js

@@ -714,6 +714,14 @@ suite('dialer/handled_call', function() {
   });
 
   suite('phone number', function() {
+    test('formatPhoneNumber in status bar mode should reset the fontsize',
+    function() {
+      MockCallScreen.mInStatusBarMode = true;
+      subject.numberNode.style.fontSize = '36px';
+      subject.formatPhoneNumber();
+      assert.equal(subject.numberNode.style.fontSize, '');
+    });
+
     test('check replace number', function() {
       mockCall = new MockCall('888', 'incoming');
       subject = new HandledCall(mockCall);

apps/communications/dialer/test/unit/mock_call_screen.js

@@ -64,6 +64,11 @@ var MockCallScreen = {
   },
   mCdmaCallWaiting: false,
 
+  get inStatusBarMode() {
+    return this.mInStatusBarMode;
+  },
+  mInStatusBarMode: false,
+
   // Fake dom
   calls: document.createElement('div'),
   screen: document.createElement('div'),