Silently remove read messages from existing notifications

Previous commit removed notification models from the global collection
but did not actually update the existing notification.

This commit refactors the notification interface to allow us to update
it without re-surfacing the notifcation onscreen.

// FREEBIE

js/background.js

@@ -7,11 +7,11 @@
     // register some chrome listeners
     if (chrome.notifications) {
         chrome.notifications.onClicked.addListener(function() {
-            chrome.notifications.clear('signal');
+            extension.notification.clear();
             Whisper.Notifications.onclick();
         });
         chrome.notifications.onButtonClicked.addListener(function() {
-            chrome.notifications.clear('signal');
+            extension.notification.clear();
             Whisper.Notifications.clear();
             getInboxCollection().each(function(model) {
                 model.markRead();

js/chromium.js

@@ -180,27 +180,36 @@
         }
     };
 
-    extension.notify = function(options) {
-        if (chrome) {
+    extension.notification = {
+        clear: function() {
             chrome.notifications.clear('signal');
-            chrome.notifications.create('signal', {
-                type     : options.type,
-                title    : options.title,
-                message  : options.message || '', // required
-                iconUrl  : options.iconUrl,
-                imageUrl : options.imageUrl,
-                items    : options.items,
-                buttons  : options.buttons
-            });
-        } else {
-            var notification = new Notification(options.title, {
-                body : options.message,
-                icon : options.iconUrl,
-                tag  : 'signal'
-            });
-            notification.onclick = function() {
-                Whisper.Notifications.onclick();
-            };
+        },
+        update: function(options) {
+            if (chrome) {
+                var chromeOpts = {
+                    type     : options.type,
+                    title    : options.title,
+                    message  : options.message || '', // required
+                    iconUrl  : options.iconUrl,
+                    imageUrl : options.imageUrl,
+                    items    : options.items,
+                    buttons  : options.buttons
+                };
+                chrome.notifications.update('signal', chromeOpts, function(wasUpdated) {
+                    if (!wasUpdated) {
+                        chrome.notifications.create('signal', chromeOpts);
+                    }
+                });
+            } else {
+                var notification = new Notification(options.title, {
+                    body : options.message,
+                    icon : options.iconUrl,
+                    tag  : 'signal'
+                });
+                notification.onclick = function() {
+                    Whisper.Notifications.onclick();
+                };
+            }
         }
     };
 

js/notifications.js

@@ -7,7 +7,8 @@
 
     Whisper.Notifications = new (Backbone.Collection.extend({
         initialize: function() {
-            this.on('add', this.update);
+            this.on('add', this.onAdd);
+            this.on('remove', this.onRemove);
         },
         isEnabled: function(callback) {
             return Notification.permission === 'granted' &&
@@ -34,7 +35,11 @@
             openConversation(conversation);
             this.clear();
         },
-        update: function(options) {
+        update: function() {
+            if (this.length === 0) {
+                extension.notification.clear();
+                return;
+            }
             if (this.length > 1) {
                 var iconUrl = 'images/icon_128.png';
                 var conversationIds = _.uniq(this.map(function(m) {
@@ -43,7 +48,7 @@
                 if (conversationIds.length === 1) {
                     iconUrl = this.at(0).get('iconUrl');
                 }
-                extension.notify({
+                extension.notification.update({
                     type    : 'list',
                     iconUrl : iconUrl,
                     title   : '' + this.length + ' new messages',
@@ -65,7 +70,7 @@
                 if (m.get('imageUrl')) {
                     type = 'image';
                 }
-                extension.notify({
+                extension.notification.update({
                     type     : type,
                     title    : m.get('title'),
                     message  : m.get('message'),
@@ -74,6 +79,13 @@
                 });
             }
         },
+        onAdd: function() {
+            extension.notification.clear();
+            this.update();
+        },
+        onRemove: function() {
+            this.update();
+        },
         clear: function() {
             this.reset([]);
         }