Windows: show the unread count on the task bar (Fixes #4788)

app/badge_count_overlay.js

@@ -0,0 +1,38 @@
+// Copyright 2018-2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+const electron = require('electron');
+const path = require('path');
+
+const MAX_BADGE_COUNT = 9;
+
+const createBadgeCountOverlay = getMainWindow => ({
+  update: unreadCount => {
+    const mainWindow = getMainWindow();
+    if (!mainWindow) {
+      return;
+    }
+
+    let unreadCountText = unreadCount ? `${unreadCount}` : '';
+    let overlayIcon = null;
+
+    if (unreadCount > 0) {
+      if (unreadCount > MAX_BADGE_COUNT) {
+        unreadCountText = `${MAX_BADGE_COUNT}plus`;
+      }
+
+      const overlayIconImagePath = path.join(
+        __dirname,
+        '..',
+        'images',
+        `badge_count_${unreadCountText}.png`
+      );
+
+      overlayIcon = electron.nativeImage.createFromPath(overlayIconImagePath);
+    }
+
+    mainWindow.setOverlayIcon(overlayIcon, unreadCountText);
+  },
+});
+
+module.exports = createBadgeCountOverlay;

main.js

@@ -66,6 +66,8 @@ const startInTray = process.argv.some(arg => arg === '--start-in-tray');
 const usingTrayIcon =
   startInTray || process.argv.some(arg => arg === '--use-tray-icon');
 
+let badgeCountOverlay = null;
+
 const config = require('./app/config');
 
 // Very important to put before the single instance check, since it is based on the
@@ -85,6 +87,7 @@ const attachmentChannel = require('./app/attachment_channel');
 const bounce = require('./ts/services/bounce');
 const updater = require('./ts/updater/index');
 const createTrayIcon = require('./app/tray_icon');
+const createBadgeCountOverlay = require('./app/badge_count_overlay');
 const dockIcon = require('./app/dock_icon');
 const ephemeralConfig = require('./app/ephemeral_config');
 const logging = require('./app/logging');
@@ -1032,6 +1035,10 @@ app.on('ready', async () => {
     tray = createTrayIcon(getMainWindow, locale.messages);
   }
 
+  if (process.platform === 'win32') {
+    badgeCountOverlay = createBadgeCountOverlay(getMainWindow);
+  }
+
   setupMenu();
 
   ensureFilePermissions(['config.json', 'sql/db.sqlite']);
@@ -1166,6 +1173,14 @@ app.on('will-finish-launching', () => {
 
 ipc.on('set-badge-count', (event, count) => {
   app.badgeCount = count;
+
+  if (tray) {
+    tray.updateIcon(count);
+  }
+
+  if (badgeCountOverlay) {
+    badgeCountOverlay.update(count);
+  }
 });
 
 ipc.on('remove-setup-menu-items', () => {
@@ -1221,12 +1236,6 @@ ipc.on('close-about', () => {
   }
 });
 
-ipc.on('update-tray-icon', (event, unreadCount) => {
-  if (tray) {
-    tray.updateIcon(unreadCount);
-  }
-});
-
 // Debug Log-related IPC calls
 
 ipc.on('show-debug-log', showDebugLogWindow);

preload.js

@@ -121,9 +121,6 @@ try {
   window.closeAbout = () => ipc.send('close-about');
   window.readyForUpdates = () => ipc.send('ready-for-updates');
 
-  window.updateTrayIcon = unreadCount =>
-    ipc.send('update-tray-icon', unreadCount);
-
   ipc.on('set-up-as-new-device', () => {
     Whisper.events.trigger('setupAsNewDevice');
   });

ts/ConversationController.ts

@@ -103,13 +103,11 @@ export function start(): void {
       window.storage.put('unreadCount', newUnreadCount);
 
       if (newUnreadCount > 0) {
-        window.setBadgeCount(newUnreadCount);
         window.document.title = `${window.getTitle()} (${newUnreadCount})`;
       } else {
-        window.setBadgeCount(0);
         window.document.title = window.getTitle();
       }
-      window.updateTrayIcon(newUnreadCount);
+      window.setBadgeCount(newUnreadCount);
     },
   }))();
 

ts/window.d.ts

@@ -188,7 +188,6 @@ declare global {
     systemTheme: WhatIsThis;
     textsecure: TextSecureType;
     unregisterForActive: (handler: WhatIsThis) => void;
-    updateTrayIcon: (count: number) => void;
 
     Backbone: typeof Backbone;
     Signal: {