Save incoming messages and pass to frontend asynchronously

After a message is saved asynchronsly, fire an event and pass the
message attributes to frontend listeners via the chrome-runtime API.

This behavior is similar to the 'storage' event fired by localStorage.

js/background.js

@@ -25,7 +25,9 @@
             if (textsecure.registration.isDone()) {
                 var conversations = new Whisper.ConversationCollection();
                 textsecure.subscribeToPush(function(message) {
-                    conversations.addIncomingMessage(message);
+                    conversations.addIncomingMessage(message).then(function(message) {
+                        extension.trigger('message', message);
+                    });
                     console.log("Got message from " + message.pushMessage.source + "." + message.pushMessage.sourceDevice +
                                 ': "' + getString(message.message.body) + '"');
                     var newUnreadCount = textsecure.storage.getUnencrypted("unreadCount", 0) + 1;

js/chromium.js

@@ -16,6 +16,7 @@
  */
 (function () {
     'use strict';
+    // Browser specific functions for Chrom*
     window.extension = window.extension || {};
 
     window.extension.navigator = (function () {
@@ -33,7 +34,17 @@
         return self;
     }());
 
-    // Random shared utilities that are used only by chromium things
+    window.extension.trigger = function (name, object) {
+        chrome.runtime.sendMessage(null, { name: name, data: object });
+    };
+
+    window.extension.onMessage = function (name, callback) {
+        chrome.runtime.onMessage.addListener(function(e) {
+            if (e.name === name) {
+                callback(e.data);
+            }
+        });
+    };
 
     window.textsecure = window.textsecure || {};
     window.textsecure.registration = {

js/models/conversations.js

@@ -86,7 +86,7 @@
 
     receiveMessage: function(decrypted) {
       var conversation = this;
-      encodeAttachments(decrypted.message.attachments).then(function(base64_attachments) {
+      return encodeAttachments(decrypted.message.attachments).then(function(base64_attachments) {
         var timestamp = decrypted.pushMessage.timestamp.toNumber();
         var m = this.messages().add({
           body: decrypted.message.body,
@@ -97,18 +97,20 @@
           type: 'incoming',
           sender: decrypted.pushMessage.source
         });
-        m.save();
 
         if (timestamp > this.get('timestamp')) {
           this.set('timestamp', timestamp);
         }
         this.save({unreadCount: this.get('unreadCount') + 1, active: true});
-        return m;
+
+        return new Promise(function (resolve) { m.save().then(resolve) });
       }.bind(this));
     },
 
-    fetch: function() {
+    fetch: function(options) {
-        return this.messageCollection.fetch({conditions: {conversationId: this.id }});
+        options = options || {};
+        options.conditions = {conversationId: this.id };
+        return this.messageCollection.fetch(options);
     },
 
     messages: function() {
@@ -171,7 +173,7 @@
         };
       }
       var conversation = this.add(attributes, {merge: true});
-      conversation.receiveMessage(decrypted);
+      return conversation.receiveMessage(decrypted);
     },
 
     destroyAll: function () {

js/views/conversation_view.js

@@ -26,16 +26,19 @@ var Whisper = Whisper || {};
             Mustache.parse(this.template);
             this.$el.html(Mustache.render(this.template));
 
-      this.view = new Whisper.MessageListView({collection: this.model.messages()});
+            this.fileInput = new Whisper.FileInputView({
+                el: this.$el.find('.attachments')
+            });
 
-      this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
+            this.view = new Whisper.MessageListView({
-
+                collection: this.model.messages()
-      this.model.messages().fetch({reset: true});
+            });
             this.$el.find('.discussion-container').append(this.view.el);
-      window.addEventListener('storage', (function(){
+
-        this.model.messages().fetch();
+            this.model.fetch({reset: true});
-      }).bind(this));
+            extension.onMessage('message', this.model.fetch.bind(this.model));
         },
+
         events: {
             'submit .send': 'sendMessage',
             'close': 'remove'

js/views/message_list_view.js

@@ -18,7 +18,7 @@ var Whisper = Whisper || {};
       this.collection.each(function(model) {
         var view = new this.itemView({model: model});
         this.$el.prepend(view.render().el);
-      });
+      }, this);
     },
   });
 })();

test/_test.js

@@ -83,3 +83,23 @@ function hexToArrayBuffer(str) {
     array[i] = parseInt(str.substr(i*2, 2), 16);
   return ret;
 };
+
+function deleteDatabase(done) {
+  indexedDB.deleteDatabase('test').then(done);
+};
+
+function clearDatabase(done) {
+    var convos = new Whisper.ConversationCollection();
+    return convos.fetch().then(function() {
+        convos.destroyAll().then(function() {
+            var messages = new Whisper.MessageCollection();
+            return messages.fetch().then(function() {
+                messages.destroyAll().then(function() {
+                    if (done) {
+                      done();
+                    }
+                });
+            });
+        });
+    });
+}

test/index.html

@@ -135,8 +135,8 @@
   <script type="text/javascript" src="../js/crypto.js"></script>
 	<script type="text/javascript" src="../js/protocol.js" data-cover></script>
 	<script type="text/javascript" src="../js/database.js"></script>
-	<script type="text/javascript" src="../js/models/messages.js"></script>
+	<script type="text/javascript" src="../js/models/messages.js" data-cover></script>
-	<script type="text/javascript" src="../js/models/conversations.js"></script>
+	<script type="text/javascript" src="../js/models/conversations.js" data-cover></script>
 	<script type="text/javascript" src="../js/api.js"></script>
 	<script type="text/javascript" src="../js/sendmessage.js" data-cover></script>
 
@@ -162,6 +162,7 @@
 	<script type="text/javascript" src="helpers_test.js"></script>
 	<script type="text/javascript" src="views/message_view_test.js"></script>
   <script type="text/javascript" src="views/list_view_test.js"></script>
+	<script type="text/javascript" src="views/message_list_view_test.js"></script>
 	<script type="text/javascript" src="models/conversations_test.js"></script>
 	<script type="text/javascript" src="models/messages_test.js"></script>
 	<script type="text/javascript" src="protocol_test.js"></script>

test/models/conversations_test.js

@@ -16,20 +16,6 @@
 
 (function () {
     'use strict';
-    function clear(done) {
-        var convos = new Whisper.ConversationCollection();
-        return convos.fetch().then(function() {
-            convos.destroyAll().then(function() {
-                var messages = new Whisper.MessageCollection();
-                return messages.fetch().then(function() {
-                    messages.destroyAll().then(function() {
-                        done();
-                    });
-                });
-            });
-        });
-    }
-
     var attributes = { type: 'outgoing',
                         body: 'hi',
                         conversationId: 'foo',
@@ -37,8 +23,8 @@
                         timestamp: new Date().getTime() };
 
     describe('ConversationCollection', function() {
-        before(clear);
+        before(clearDatabase);
-        after(clear);
+        after(clearDatabase);
 
         it('adds without saving', function() {
             var convos = new Whisper.ConversationCollection();
@@ -107,7 +93,7 @@
                 message.save().then(done)
             });
         });
-        after(clear);
+        after(clearDatabase);
 
         it('contains its own messages', function (done) {
             var convo = new Whisper.ConversationCollection().add({id: 'foobar'});
@@ -124,26 +110,6 @@
                 done();
             });
         });
-
-        it('has most recent messages first', function(done) {
-            var convo = new Whisper.ConversationCollection().add({id: 'barfoo'});
-            convo.messages().add({
-                body: 'first message',
-                conversationId: convo.id,
-                timestamp: new Date().getTime() - 5000
-            }).save().then(function() {
-                convo.messages().add({
-                    body: 'second message',
-                    conversationId: convo.id
-                }).save().then(function() {
-                    convo.fetch().then(function() {
-                        assert.strictEqual(convo.messages().at(0).get('body'), 'second message');
-                        assert.strictEqual(convo.messages().at(1).get('body'), 'first message');
-                        done();
-                    });
-                });
-            });
-        });
     });
 
 })();;

test/test.js

@@ -10957,3 +10957,23 @@ function hexToArrayBuffer(str) {
     array[i] = parseInt(str.substr(i*2, 2), 16);
   return ret;
 };
+
+function deleteDatabase(done) {
+  indexedDB.deleteDatabase('test').then(done);
+};
+
+function clearDatabase(done) {
+    var convos = new Whisper.ConversationCollection();
+    return convos.fetch().then(function() {
+        convos.destroyAll().then(function() {
+            var messages = new Whisper.MessageCollection();
+            return messages.fetch().then(function() {
+                messages.destroyAll().then(function() {
+                    if (done) {
+                      done();
+                    }
+                });
+            });
+        });
+    });
+}