Add badge for unread messages to the tray icon (#1934)

This commit adds a badge to the tray icon that displays the number of
unread messages, if there is any. It is implemented by providing
alternative versions of the icon, that replace the default image when a
message is received.

The badge is rendered graphically as a red circle containing the number
of unread messages. Since a different icon file is needed for each
possible number of unread messages, but this number is clearly
unbounded, only the numbers from 1 to 9 are provided. If there are 10 or
more unread messages, a single badge (depicted as "9+") is used.

Resolves #1917

app/tray_icon.js

@@ -11,11 +11,10 @@ let tray = null;
 
 function createTrayIcon(getMainWindow, messages) {
   // A smaller icon is needed on macOS
-  tray = new Tray(
-    process.platform === 'darwin' ?
-      path.join(__dirname, '..', 'images', 'icon_16.png') :
-      path.join(__dirname, '..', 'images', 'icon_256.png')
-  );
+  const iconSize = process.platform === 'darwin' ? '16' : '256';
+  const iconNoNewMessages = path.join(__dirname, '..', 'images', `icon_${iconSize}.png`);
+
+  tray = new Tray(iconNoNewMessages);
 
   tray.toggleWindowVisibility = () => {
     const mainWindow = getMainWindow();
@@ -57,6 +56,15 @@ function createTrayIcon(getMainWindow, messages) {
     tray.setContextMenu(trayContextMenu);
   };
 
+  tray.updateIcon = (unreadCount) => {
+    if (unreadCount > 0) {
+      const filename = `${String(unreadCount >= 10 ? 10 : unreadCount)}.png`;
+      tray.setImage(path.join(__dirname, '..', 'images', 'alert', iconSize, filename));
+    } else {
+      tray.setImage(iconNoNewMessages);
+    }
+  };
+
   tray.on('click', tray.toggleWindowVisibility);
 
   tray.setToolTip(messages.trayTooltip.message);

js/conversation_controller.js

@@ -64,6 +64,7 @@
                 window.setBadgeCount(0);
                 window.document.title = window.config.title;
             }
+            window.updateTrayIcon(newUnreadCount);
         },
         startPruning: function() {
             var halfHour = 30 * 60 * 1000;

main.js

@@ -483,3 +483,8 @@ ipc.on('close-about', () => {
   }
 });
 
+ipc.on('update-tray-icon', (event, unreadCount) => {
+  if (tray) {
+    tray.updateIcon(unreadCount);
+  }
+});

preload.js

@@ -34,6 +34,9 @@
   window.closeAbout = function() {
     ipc.send('close-about');
   };
+  window.updateTrayIcon = function(unreadCount) {
+    ipc.send('update-tray-icon', unreadCount);
+  };
 
   ipc.on('debug-log', function() {
     Whisper.events.trigger('showDebugLog');