Merge pull request #23522 from DouglasSherk/1047353-temp

Bug 1047353 - Create a call information page for call log. r=drs

apps/callscreen/js/call_screen.js

@@ -1,5 +1,5 @@
 /* globals CallsHandler, FontSizeManager, KeypadManager, LazyL10n,
-           LockScreenSlide, MozActivity, SettingsListener */
+           LockScreenSlide, MozActivity, SettingsListener, Utils */
 /* jshint nonew: false */
 
 'use strict';
@@ -523,22 +523,11 @@ var CallScreen = {
     durationChildNode.textContent = '00:00';
     durationNode.classList.add('isTimer');
 
-    function padNumber(n) {
-      return n > 9 ? n : '0' + n;
-    }
-
     LazyL10n.get(function localized(_) {
       var ticker = setInterval(function ut_updateTimer(startTime) {
         // Bug 834334: Ensure that 28.999 -> 29.000
         var delta = Math.round((Date.now() - startTime) / 1000) * 1000;
-        var elapsed = new Date(delta);
-        var duration = {
-          h: padNumber(elapsed.getUTCHours()),
-          m: padNumber(elapsed.getUTCMinutes()),
-          s: padNumber(elapsed.getUTCSeconds())
-        };
-        durationChildNode.textContent = _(elapsed.getUTCHours() > 0 ?
-          'callDurationHours' : 'callDurationMinutes', duration);
+        durationChildNode.textContent = Utils.prettyDuration(delta);
       }, 1000, Date.now());
       durationNode.dataset.tickerId = ticker;
     });

apps/callscreen/test/unit/call_screen_test.js

@@ -1,4 +1,4 @@
-/* globals CallScreen, FontSizeManager, MockCallsHandler, MockLazyL10n,
+/* globals CallScreen, FontSizeManager, MockCallsHandler, Utils,
            MockHandledCall, MockMozActivity, MockNavigatorMozTelephony,
            MockMozL10n, MocksHelper, MockSettingsListener */
 
@@ -10,14 +10,16 @@ require('/shared/test/unit/mocks/dialer/mock_lazy_l10n.js');
 require('/shared/test/unit/mocks/dialer/mock_handled_call.js');
 require('/shared/test/unit/mocks/dialer/mock_calls_handler.js');
 require('/shared/test/unit/mocks/dialer/mock_font_size_manager.js');
+require('/shared/test/unit/mocks/dialer/mock_utils.js');
 require('/shared/test/unit/mocks/mock_settings_listener.js');
 require('/shared/js/lockscreen_connection_info_manager.js');
 
 var mocksHelperForCallScreen = new MocksHelper([
   'CallsHandler',
   'MozActivity',
   'LazyL10n',
-  'FontSizeManager'
+  'FontSizeManager',
+  'Utils'
 ]).init();
 
 // The CallScreen binds stuff when evaluated so we load it
@@ -922,12 +924,9 @@ suite('call screen', function() {
     });
 
     test('createTicker should update timer every second', function() {
+      this.sinon.spy(Utils, 'prettyDuration');
       this.sinon.clock.tick(1000);
-      assert.deepEqual(MockLazyL10n.keys.callDurationMinutes, {
-        h: '00',
-        m: '00',
-        s: '01'
-      });
+      sinon.assert.calledWith(Utils.prettyDuration, 1000);
     });
 
     test('stopTicker should stop counter on durationNode', function() {

apps/communications/dialer/elements/call-info-view.html

@@ -0,0 +1,29 @@
+<element name="call-info-view" extends="form">
+  <template>
+
+  <gaia-header id="call-info-gaia-header" action="back">
+    <h1 id="call-info-title"></h1>
+  </gaia-header>
+
+  <div class="ci__wrapper">
+    <div class="ci__calls-wrapper">
+      <div class="ci__group-info">
+        <p id="call-info-day" class="ci__grow"></p>
+        <p id="call-info-direction" class="ci__direction-icon"></p>
+      </div>
+
+      <div id="call-durations">
+      </div>
+    </div>
+
+    <div class="ci__contact-wrapper">
+      <div id="contact-actions">
+        <p>Work in progress styling</p>
+        <button id="call-info-details" data-l10n-id="contactDetails" hidden></button>
+        <button id="call-info-add" data-l10n-id="addToExistingContact" hidden></button>
+        <button id="call-info-create" data-l10n-id="createNewContact" hidden></button>
+      </div>
+    </div>
+  </div>
+  </template>
+</element>

apps/communications/dialer/index.html

@@ -93,6 +93,7 @@
     <link rel="import" href="elements/suggestion-item.html">
     <link rel="import" href="elements/suggestion-overlay.html">
     <link rel="import" href="elements/confirmation-message.html">
+    <link rel="import" href="elements/call-info-view.html">
     <link rel="import" href="/shared/elements/sim_picker.html">
   </head>
   <body role="application" class="skin-comms theme-communications">
@@ -126,6 +127,7 @@ <h1 data-l10n-id="callLog"></h1>
               <div id="sticky"></div>
             </div>
           </section>
+          <section is="call-info-view" id="call-info-view" role="region" hidden></section>
         </div>
         <form role="dialog" data-type="confirm" id="call-log-upgrading" class="hide">
           <section>

apps/communications/dialer/js/call_group_menu.js

@@ -6,10 +6,10 @@
 
 var CallGroupMenu = (function() {
 
-  var _showCallInfo = function(phoneNumber, day, type) {
+  var _showCallInfo = function(phoneNumber, date, type, status) {
     LazyLoader.load(['/dialer/js/call_info.js',
                      '/dialer/style/call_info.css'], function() {
-      CallInfo.show(phoneNumber, day, type);
+      CallInfo.show(phoneNumber, date, type, status);
     });
   };
 
@@ -29,12 +29,12 @@ var CallGroupMenu = (function() {
   };
 
   return {
-    show: function(groupPrimaryInfo, phoneNumber, day, type) {
+    show: function(groupPrimaryInfo, phoneNumber, date, type, status) {
       var params = {
         items: [{
           l10nId: 'callInformation',
           method: _showCallInfo,
-          params: [phoneNumber, day, type]
+          params: [phoneNumber, date, type, status]
         },{
           l10nId: 'sendSms',
           method: _sendSms,

apps/communications/dialer/js/call_info.js

@@ -1,8 +1,194 @@
 'use strict';
 
+/* global CallLogDBManager, LazyLoader, MozActivity, Utils */
+
 (function(exports) {
+  var currentGroup;
+  var detailsButton;
+  var addToContactButton;
+  var createContactButton;
+  var callInfoView;
+
+  function updateView(group) {
+    currentGroup = group;
+    updateGroupInformation(group);
+    updateCallDurations(group);
+    updateActionButtons(group);
+    callInfoView.hidden = false;
+  }
+
+  function updateGroupInformation(group) {
+    var titleElt = document.getElementById('call-info-title');
+    if (group.contact) {
+      titleElt.textContent = group.contact.primaryInfo;
+    } else if (group.voicemail) {
+      titleElt.setAttribute('data-l10n-id', 'voiceMail');
+    } else if (group.emergency) {
+      titleElt.setAttribute('data-l10n-id', 'emergencyNumber');
+    } else {
+      titleElt.textContent = group.number;
+    }
+
+    document.getElementById('call-info-day').textContent =
+      Utils.headerDate(parseInt(group.date));
+
+    var classList = document.getElementById('call-info-direction').classList;
+    classList.remove('icon-outgoing', 'icon-incoming', 'icon-missed');
+    switch (group.type) {
+      case 'dialing':
+      case 'alerting':
+        classList.add('icon-outgoing');
+        break;
+      case 'incoming':
+        if (group.status === 'connected') {
+          classList.add('icon-incoming');
+        } else {
+          classList.add('icon-missed');
+        }
+        break;
+    }
+  }
+
+  function updateCallDurations(group) {
+    var callDurationsElt = document.getElementById('call-durations');
+    callDurationsElt.innerHTML = '';
+
+    /* Old groups did not record call durations */
+    if (!group.calls) {
+      return;
+    }
+
+    group.calls.forEach(function(call) {
+      var startTime = document.createElement('p');
+      startTime.classList.add('ci__grow');
+      startTime.classList.add('js-ci-start-times');
+      startTime.dataset.date = call.date;
+      startTime.textContent = Utils.prettyDate(call.date);
+
+      var duration = document.createElement('p');
+      duration.classList.add('cd__duration');
+      navigator.mozL10n.once(function() {
+        if (call.duration === 0) {
+          if (group.type === 'incoming') {
+            duration.setAttribute('data-l10n-id', 'missed');
+          } else {
+            duration.setAttribute('data-l10n-id', 'cancelled');
+          }
+        } else {
+          duration.textContent = Utils.prettyDuration(call.duration);
+        }
+      });
+
+      var row = document.createElement('div');
+      row.classList.add('call-duration');
+      row.appendChild(startTime);
+      row.appendChild(duration);
+
+      callDurationsElt.appendChild(row);
+    });
+  }
+
+  function updateStartTimes() {
+    var startTimeElts = document.querySelectorAll('.js-ci-start-times');
+    for (var i=0, il=startTimeElts.length; i<il; i++) {
+      var startTimeElt = startTimeElts[i];
+      var date = parseInt(startTimeElt.dataset.date, 10);
+      startTimeElt.textContent = Utils.prettyDate(date);
+    }
+  }
+
+  function updateActionButtons(group) {
+    detailsButton.hidden = true;
+    addToContactButton.hidden = true;
+    createContactButton.hidden = true;
+
+    if (group.contact) {
+      detailsButton.hidden = false;
+    } else {
+      addToContactButton.hidden = false;
+      createContactButton.hidden = false;
+    }
+  }
+
+  function close(evt) {
+    if (evt.detail.type === 'back') {
+      callInfoView.hidden = true;
+    }
+  }
+
+  function viewContact() {
+    window.location.hash = '#contacts-view';
+    setTimeout(function nextTick() { /* we'll have the iframe by then */
+      var contactsIframe = document.getElementById('iframe-contacts');
+      var src = '/contacts/index.html';
+      src += '#view-contact-details?id=' + currentGroup.contact.id;
+      src += '&tel=' + currentGroup.number;
+      // Enable the function of receiving the messages posted from the iframe.
+      src += '&back_to_previous_tab=1';
+      // Contacts app needs to know if it's a missed call for different
+      // highlight color of the phone number in contacts details
+      var isMissedCall = currentGroup.type == 'incoming' &&
+                         currentGroup.status !== 'connected';
+      src += '&isMissedCall=' + isMissedCall;
+      var timestamp = new Date().getTime();
+      contactsIframe.src = src + '&timestamp=' + timestamp;
+    });
+  }
+
+  function createNewContact() {
+    launchActivity('new', currentGroup.number);
+  }
+
+  function addToExistingContact() {
+    launchActivity('update', currentGroup.number);
+  }
+
+  function launchActivity(name, phoneNumber) {
+    var options = {
+      name: name,
+      data: {
+        type: 'webcontacts/contact',
+        params: {
+          'tel': phoneNumber
+        }
+      }
+    };
+    try {
+      /* jshint nonew: false */
+      new MozActivity(options);
+    } catch (e) {
+      console.error('Error while creating activity');
+    }
+  }
+
+  var _initialised = false;
+  function initListeners() {
+    if (_initialised) {
+      return;
+    }
+    _initialised = true;
+
+    detailsButton = document.getElementById('call-info-details');
+    detailsButton.addEventListener('click', viewContact);
+    addToContactButton = document.getElementById('call-info-add');
+    addToContactButton.addEventListener('click', addToExistingContact);
+    createContactButton = document.getElementById('call-info-create');
+    createContactButton.addEventListener('click', createNewContact);
+    var header = document.getElementById('call-info-gaia-header');
+    header.addEventListener('action', close);
+
+    window.addEventListener('timeformatchange', updateStartTimes);
+  }
+
   var CallInfo = {
-    show: function(number, day, type) {
+    show: function(number, date, type, status) {
+      callInfoView = document.getElementById('call-info-view');
+      LazyLoader.load(callInfoView, function() {
+        initListeners();
+        date = parseInt(date, 10);
+        CallLogDBManager.getGroup(number, date, type, status)
+          .then(updateView);
+      });
     }
   };
   exports.CallInfo = CallInfo;

apps/communications/dialer/js/call_log.js

@@ -666,7 +666,11 @@ var CallLog = {
 
       LazyLoader.load(['/dialer/js/call_group_menu.js'], function() {
         CallGroupMenu.show(
-          primaryInfo, phoneNumber, dataset.timestamp, dataset.type);
+          primaryInfo,
+          phoneNumber,
+          dataset.timestamp,
+          dataset.type,
+          dataset.status);
       });
     }
   },

apps/communications/dialer/js/call_log_db.js

@@ -1111,6 +1111,25 @@ var CallLogDBManager = {
     });
   },
 
+  getGroup: function(number, date, type, status) {
+    var self = this;
+    return new Promise(function(resolve, reject) {
+      var recentCall = {number: number, date: date, type: type, status: status};
+      var groupId = self._getGroupId(recentCall);
+      self._newTxn('readonly', self._dbGroupsStore,
+      function(error, txn, groupsStore) {
+        groupsStore.get(groupId).onsuccess = function() {
+          var group = this.result;
+          if (!group) {
+            reject();
+            return;
+          }
+          resolve(self._getGroupObject(group));
+        };
+      });
+    });
+  },
+
   /**
    * Get the call with the most recent date.
    *

apps/communications/dialer/locales/dialer.en-US.properties

@@ -1,4 +1,5 @@
 addNewNumber=Add new number
+contactDetails=Contact details
 addToExistingContact=Add to existing contact
 all=All
 all.ariaLabel=All
@@ -42,6 +43,7 @@ makeCall.ariaLabel=Make call
 merge=Merge
 missed=Missed
 missed.ariaLabel=Missed
+cancelled=Cancelled
 missedCall=Missed call
 missedCallMultiSims=(SIM {{ n }}) Missed call
 mmi-error=An error occurred while sending the message