Merge pull request #23334 from azasypkin/bug-1041765-thread-view-rede…

…sign

Bug 1041765 - [Messages] Thread view redesign. r=schung

apps/sms/index.html

@@ -422,15 +422,11 @@ <h1 class="message-subject">
           ${subject}
         </h1>
         <div class="message-content">
-          <aside class="message-status">
-            <progress class="${progressIndicatorClassName}"></progress>
-          </aside>
-          <div class="message-body">
-            <p>${bodyHTML}</p>
-            <div class="message-details">
-              ${simInformationHTML}
-              <time data-time-update="true" data-time-only="true" data-time="${timestamp}"></time>
-            </div>
+          <p>${bodyHTML}</p>
+          <div class="message-details">
+            ${simInformationHTML}
+            <time data-time-update="true" data-time-only="true" data-time="${timestamp}"></time>
+            ${messageStatusHTML}
           </div>
         </div>
       </section>
@@ -446,6 +442,15 @@ <h1 class="message-subject">
       -->
     </div>
 
+    <div id="messages-message-status-tmpl" class="hide">
+      <!--
+      <div class="message-status" data-l10n-id="${statusL10nId}"
+           aria-label="Message status"
+           role="status">
+      </div>
+      -->
+    </div>
+
     <div id="messages-thread-tmpl" class="hide">
       <!--
       <label class="pack-checkbox negative">

apps/sms/js/thread_ui.js

@@ -86,6 +86,7 @@ var ThreadUI = {
     var templateIds = [
       'message',
       'message-sim-information',
+      'message-status',
       'not-downloaded',
       'recipient',
       'date-group'
@@ -1551,18 +1552,12 @@ var ThreadUI = {
   },
 
   buildMessageDOM: function thui_buildMessageDOM(message, hidden) {
-    var bodyHTML = '';
-    var delivery = message.delivery;
+    var messageDOM = document.createElement('li'),
+        bodyHTML = '';
 
-    var isDelivered = this.shouldShowDeliveryStatus(message);
-    var isRead = this.shouldShowReadStatus(message);
-    var isNotDownloaded = delivery === 'not-downloaded';
-    var isIncoming = delivery === 'received' || isNotDownloaded;
-
-    var messageDOM = document.createElement('li');
-
-    var classNames = ['message', message.type, delivery];
-    var attachments = message.attachments;
+    var messageStatus = message.delivery,
+        isNotDownloaded = messageStatus === 'not-downloaded',
+        isIncoming = messageStatus === 'received' || isNotDownloaded;
 
     // If the MMS has invalid empty content(message without attachment and
     // subject) or contains only subject, we will display corresponding message
@@ -1571,17 +1566,20 @@ var ThreadUI = {
     // Returning attachments would be different based on gecko version:
     // null in b2g18 / empty array in master.
     var noAttachment = (message.type === 'mms' && !isNotDownloaded &&
-      (attachments === null || attachments.length === 0));
+      (message.attachments === null || message.attachments.length === 0));
     var invalidEmptyContent = (noAttachment && !message.subject);
 
-    classNames.push(isIncoming ? 'incoming' : 'outgoing');
-
-    if (isRead) {
-      classNames.push('read');
-    } else if (isDelivered) {
-      classNames.push('delivered');
+    if (this.shouldShowReadStatus(message)) {
+      messageStatus = 'read';
+    } else if (this.shouldShowDeliveryStatus(message)) {
+      messageStatus = 'delivered';
     }
 
+    var classNames = [
+      'message', message.type, messageStatus,
+      isIncoming ? 'incoming' : 'outgoing'
+    ];
+
     if (hidden) {
       classNames.push('hidden');
     }
@@ -1605,6 +1603,12 @@ var ThreadUI = {
       classNames.push('no-attachment');
     }
 
+    if (classNames.indexOf('error') >= 0) {
+      messageStatus = 'error';
+    } else if (classNames.indexOf('pending') >= 0) {
+      messageStatus = 'pending';
+    }
+
     messageDOM.className = classNames.join(' ');
     messageDOM.id = 'message-' + message.id;
     messageDOM.dataset.messageId = message.id;
@@ -1623,12 +1627,10 @@ var ThreadUI = {
       bodyHTML: bodyHTML,
       timestamp: String(message.timestamp),
       subject: String(message.subject),
-      // Incoming and outgoing messages are displayed using different
-      // backgrounds, therefore progress indicator should be styled differently.
-      progressIndicatorClassName: isIncoming ? 'light' : '',
-      simInformationHTML: simInformationHTML
+      simInformationHTML: simInformationHTML,
+      messageStatusHTML: this.getMessageStatusMarkup(messageStatus)
     }, {
-      safe: ['bodyHTML', 'simInformationHTML']
+      safe: ['bodyHTML', 'simInformationHTML', 'messageStatusHTML']
     });
 
     TimeHeaders.update(messageDOM.querySelector('time'));
@@ -1647,6 +1649,13 @@ var ThreadUI = {
     return messageDOM;
   },
 
+  getMessageStatusMarkup: function(status) {
+    return ['read', 'delivered', 'sending', 'error'].indexOf(status) >= 0 ?
+      this.tmpl.messageStatus.interpolate({
+        statusL10nId: 'message-delivery-status-' + status
+      }) : '';
+  },
+
   appendMessage: function thui_appendMessage(message, hidden) {
     var timestamp = +message.timestamp;
 
@@ -2237,16 +2246,7 @@ var ThreadUI = {
   },
 
   onMessageSent: function thui_onMessageSent(e) {
-    var message = e.message;
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-
-    // Update class names to reflect message state
-    messageDOM.classList.remove('sending');
-    messageDOM.classList.add('sent');
+    this.setMessageStatus(e.message.id, 'sent');
   },
 
   /**
@@ -2262,22 +2262,12 @@ var ThreadUI = {
 
   onMessageFailed: function thui_onMessageFailed(e) {
     var message = e.message;
-    var messageDOM = document.getElementById('message-' + message.id);
     var serviceId = Settings.getServiceIdByIccId(message.iccId);
+
     // When this is the first message in a thread, we haven't displayed
     // the new thread yet. The error flag will be shown when the thread
     // will be rendered. See Bug 874043
-    if (messageDOM) {
-
-      // Check if it was painted as 'error' before
-      if (messageDOM.classList.contains('error')) {
-        return;
-      }
-
-      // Update class names to reflect message state
-      messageDOM.classList.remove('sending');
-      messageDOM.classList.add('error');
-    }
+    this.setMessageStatus(message.id, 'error');
 
     if (this.showErrorInFailedEvent === 'NonActiveSimCardError') {
       this.showErrorInFailedEvent = '';
@@ -2286,8 +2276,7 @@ var ThreadUI = {
         {
           confirmHandler: function() {
             // Update messageDOM state to 'sending' while sim switching
-            messageDOM.classList.remove('error');
-            messageDOM.classList.add('sending');
+            this.setMessageStatus(message.id, 'sending');
 
             Settings.switchMmsSimHandler(serviceId).then(
               this.resendMessage.bind(this, message.id))
@@ -2308,13 +2297,7 @@ var ThreadUI = {
       return;
     }
 
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-    // Update class names to reflect message state
-    messageDOM.classList.add('delivered');
+    this.setMessageStatus(message.id, 'delivered');
   },
 
   onReadSuccess: function thui_onReadSuccess(e) {
@@ -2324,14 +2307,7 @@ var ThreadUI = {
       return;
     }
 
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-    // Update class names to reflect message state
-    messageDOM.classList.remove('delivered');
-    messageDOM.classList.add('read');
+    this.setMessageStatus(message.id, 'read');
   },
 
   // Some error return from sending error need some specific action instead of
@@ -2368,6 +2344,32 @@ var ThreadUI = {
     }
   },
 
+  setMessageStatus: function(id, status) {
+    var messageDOM = document.getElementById('message-' + id);
+
+    if (!messageDOM || messageDOM.classList.contains(status)) {
+      return;
+    }
+
+    var newStatusMarkup = this.getMessageStatusMarkup(status),
+        oldStatusNode = messageDOM.querySelector('.message-status');
+
+    messageDOM.classList.remove(
+      'sending', 'pending', 'sent', 'received', 'delivered', 'read', 'error'
+    );
+    messageDOM.classList.add(status);
+
+    if (oldStatusNode) {
+      oldStatusNode.remove();
+    }
+
+    if (newStatusMarkup) {
+      messageDOM.querySelector('.message-details').appendChild(
+        this._htmlStringToDomNode(newStatusMarkup)
+      );
+    }
+  },
+
   retrieveMMS: function thui_retrieveMMS(messageDOM) {
     // force a number
     var id = +messageDOM.dataset.messageId;
@@ -2377,17 +2379,15 @@ var ThreadUI = {
 
     var button = messageDOM.querySelector('button');
 
-    messageDOM.classList.add('pending');
-    messageDOM.classList.remove('error');
+    this.setMessageStatus(id, 'pending');
     button.setAttribute('data-l10n-id', 'downloading-attachment');
 
     request.onsuccess = (function retrieveMMSSuccess() {
       this.removeMessageDOM(messageDOM);
     }).bind(this);
 
     request.onerror = (function retrieveMMSError() {
-      messageDOM.classList.remove('pending');
-      messageDOM.classList.add('error');
+      this.setMessageStatus(id, 'error');
       button.setAttribute('data-l10n-id', 'download-attachment');
 
       // Show NonActiveSimCard/Other error dialog while retrieving MMS
@@ -2417,8 +2417,7 @@ var ThreadUI = {
             // TODO move this before trying to call retrieveMMS in Bug 981077
             // Avoid user to click the download button while sim state is not
             // ready yet.
-            messageDOM.classList.add('pending');
-            messageDOM.classList.remove('error');
+            this.setMessageStatus(id, 'pending');
             button.setAttribute('data-l10n-id', 'downloading-attachment');
             Settings.switchMmsSimHandler(serviceId).then(
               this.retrieveMMS.bind(this, messageDOM))

apps/sms/locales/sms.en-US.properties

@@ -273,3 +273,9 @@ contact-photo.ariaLabel = Contact photo
 unread-thread.ariaLabel = Unread
 has-draft.ariaLabel = Has draft
 is-draft.ariaLabel = Draft
+
+# Message statuses
+message-delivery-status-sending                      = Sending…
+message-delivery-status-delivered.ariaLabel          = Delivered
+message-delivery-status-read.ariaLabel               = Read
+message-delivery-status-error.ariaLabel              = Error

apps/sms/style/attachment.css

@@ -120,6 +120,9 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.attachment-draft .file-name {
   color: #4a4a4a;
 }
 
@@ -144,10 +147,7 @@
   width: 100%;
   height: 100%;
 
-  background-image: url('images/attachments.png');
-  background-repeat: no-repeat;
-  background-position: left top;
-  background-size: 12rem;
+  background: url('images/attachments.png') no-repeat left top / 12rem;
 }
 
 .attachment-container .thumbnail,
@@ -168,35 +168,14 @@
   background-position: left -8rem;
 }
 
-.attachment-draft:hover .img-placeholder,
-.attachment-draft:active .img-placeholder,
-.attachment-container:hover .img-placeholder,
-.attachment-container:active .img-placeholder {
-  background-position: right -8rem;
-}
-
 .audio-placeholder {
   background-position: left -16rem;
 }
 
-.attachment-draft:hover .audio-placeholder,
-.attachment-draft:active .audio-placeholder,
-.attachment-container:hover .audio-placeholder,
-.attachment-container:active .audio-placeholder {
-  background-position: right -16rem;
-}
-
 .video-placeholder {
   background-position: left -24rem;
 }
 
-.attachment-draft:hover .video-placeholder,
-.attachment-draft:active .video-placeholder,
-.attachment-container:hover .video-placeholder,
-.attachment-container:active .video-placeholder  {
-  background-position: right -24rem;
-}
-
 .attachment.corrupted .thumbnail-placeholder:after {
   display: block;
 

apps/sms/style/composer.css

@@ -1,9 +1,7 @@
 
 #composer-container {
   position: relative;
-}
 
-.new #composer-container {
   background: #e1f0ec;
 }