Move error messages to message detail view

Change how message errors are rendered. Errors associated with a number
will be shown under that number in the detail view rather than piling up
in the message bubble.

// FREEBIE

background.html

@@ -142,12 +142,18 @@
       <div class='message-container'></div>
       <div class='info'>
         <table>
-            <tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
-            <tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
+          <tr><td class='label'>Sent</td><td> {{ sent_at }}</td></tr>
+          <tr><td class='label'>Received</td><td> {{ received_at }}</td></tr>
           <tr>
             <td class='tofrom label'>{{ tofrom }}</td>
             <td> <div class='contacts'></div> </td>
           </tr>
+          {{ #errors }}
+            <tr>
+              <td class='label'>Error</td>
+              <td> <span class='error-message'>{{message}}</span> </td>
+            </tr>
+          {{ /errors }}
         </table>
       </div>
     </div>
@@ -240,6 +246,11 @@
         {{ #conflict }}
             <button class='conflict'><span>Verify</span></button>
         {{ /conflict }}
+        {{ #errors }}
+            <div>
+              <span class='error-message'>{{message}}</span>
+            </div>
+        {{ /errors }}
       </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>

js/models/messages.js

@@ -58,6 +58,9 @@
             if (this.isIncoming() && this.hasKeyConflicts()) {
                 return 'Received message with unknown identity key.';
             }
+            if (this.isIncoming() && this.hasErrors()) {
+                return 'Error decrypting incoming message.';
+            }
 
             return this.get('body');
         },
@@ -111,6 +114,9 @@
         isOutgoing: function() {
             return this.get('type') === 'outgoing';
         },
+        hasErrors: function() {
+            return _.size(this.get('errors')) > 0;
+        },
         hasKeyConflicts: function() {
             return _.any(this.get('errors'), function(e) {
                 return (e.name === 'IncomingIdentityKeyError' ||

js/views/message_detail_view.js

@@ -10,6 +10,7 @@
         templateName: 'contact-detail',
         initialize: function(options) {
             this.conflict = options.conflict;
+            this.errors = options.errors;
         },
         events: {
             'click .conflict': 'triggerConflict'
@@ -21,7 +22,8 @@
             return {
                 name     : this.model.getTitle(),
                 avatar   : this.model.getAvatar(),
-                conflict : this.conflict
+                conflict : this.conflict,
+                errors   : this.errors
             };
         }
     });
@@ -32,6 +34,7 @@
         initialize: function(options) {
             this.view = new Whisper.MessageView({model: this.model});
             this.conversation = options.conversation;
+            this.errors = _.groupBy(this.model.get('errors'), 'number');
 
             this.listenTo(this.model, 'change', this.render);
         },
@@ -79,7 +82,8 @@
         renderContact: function(contact) {
             var v = new ContactView({
                 model: contact,
-                conflict: this.model.getKeyConflict(contact.id)
+                conflict: this.model.getKeyConflict(contact.id),
+                errors: this.errors[contact.id]
             }).render().$el.appendTo(this.$('.contacts'));
         },
         render: function() {
@@ -87,6 +91,7 @@
                 sent_at     : moment(this.model.get('sent_at')).toString(),
                 received_at : moment(this.model.get('received_at')).toString(),
                 tofrom      : this.model.isIncoming() ? 'From' : 'To',
+                errors      : this.errors['undefined']
             }));
             this.view.render().$el.prependTo(this.$('.message-container'));
 

js/views/message_view.js

@@ -32,6 +32,10 @@
         renderDelivered: function() {
             if (this.model.get('delivered')) { this.$el.addClass('delivered'); }
         },
+        renderErrors: function() {
+            var errors = this.model.get('errors');
+            if (_.size(errors) > 0) { this.$el.addClass('error'); }
+        },
         renderControl: function() {
             if (this.model.isEndSession() || this.model.isGroupUpdate()) {
                 this.$el.addClass('control');
@@ -59,6 +63,7 @@
 
             this.renderSent();
             this.renderDelivered();
+            this.renderErrors();
             this.renderControl();
 
             this.$('.attachments').append(
@@ -69,17 +74,6 @@
                 })
             );
 
-            var errors = this.model.get('errors');
-            if (errors && errors.length) {
-                this.$('.bubble').prepend(
-                    errors.map(function(error) {
-                        return new Whisper.MessageErrorView({
-                            model: error,
-                            message: this.model
-                        }).render().el;
-                    }.bind(this))
-                );
-            }
             return this;
         }
     });

stylesheets/_conversation.scss

@@ -57,6 +57,7 @@
       text-align: right;
       font-weight: bold;
       padding-right: 1em;
+      vertical-align: top;
     }
   }
 
@@ -200,10 +201,22 @@
     opacity: 1.0;
   }
 
+  .error .bubble {
+    background: url('/images/error_red.png') no-repeat;
+  }
+  .incoming.error .bubble {
+    padding-right: 40px;
+    background-position: calc(100% - 12px) 9px;
+  }
+  .outgoing.error .bubble {
+    padding-left: 40px;
+    background-position: 12px 9px;
+  }
+
   .incoming {
     .bubble {
       color: $grey_d;
-      background: $grey_l;
+      background-color: $grey_l;
 
       &::before {
         left: -10px;
@@ -226,7 +239,7 @@
     .bubble {
       clear: left;
       color: white;
-      background: $blue;
+      background-color: $blue;
 
       .meta {
         color: $blue_l;
@@ -303,7 +316,7 @@
     opacity: 0.8;
   }
 
-  .error {
+  .bubble .error-message {
     font-style: italic;
   }
 

stylesheets/manifest.css

@@ -548,7 +548,8 @@ input.search {
     .message-detail .info .label {
       text-align: right;
       font-weight: bold;
-      padding-right: 1em; }
+      padding-right: 1em;
+      vertical-align: top; }
   .message-detail .conflict {
     border: none;
     border-radius: 5px;
@@ -658,10 +659,21 @@ input.search {
   .message-detail .outgoing.sent .bubble,
   .message-list .outgoing.sent .bubble {
     opacity: 1.0; }
+  .message-detail .error .bubble,
+  .message-list .error .bubble {
+    background: url("/images/error_red.png") no-repeat; }
+  .message-detail .incoming.error .bubble,
+  .message-list .incoming.error .bubble {
+    padding-right: 40px;
+    background-position: calc(100% - 12px) 9px; }
+  .message-detail .outgoing.error .bubble,
+  .message-list .outgoing.error .bubble {
+    padding-left: 40px;
+    background-position: 12px 9px; }
   .message-detail .incoming .bubble,
   .message-list .incoming .bubble {
     color: #454545;
-    background: #f3f3f3; }
+    background-color: #f3f3f3; }
     .message-detail .incoming .bubble::before,
     .message-list .incoming .bubble::before {
       left: -10px;
@@ -678,7 +690,7 @@ input.search {
   .message-list .outgoing .bubble {
     clear: left;
     color: white;
-    background: #2090ea; }
+    background-color: #2090ea; }
     .message-detail .outgoing .bubble .meta,
     .message-list .outgoing .bubble .meta {
       color: #a2d2f4; }
@@ -735,8 +747,8 @@ input.search {
     font: small;
     font-style: italic;
     opacity: 0.8; }
-  .message-detail .error,
-  .message-list .error {
+  .message-detail .bubble .error-message,
+  .message-list .bubble .error-message {
     font-style: italic; }
   .message-detail .key-conflict,
   .message-list .key-conflict {