Merge branch 'numerical-badge' into dev

src/browser/index.jsx

@@ -300,24 +300,45 @@ window.addEventListener('contextmenu', function(e) {
   menu.popup(remote.getCurrentWindow());
 }, false);
 
+var showUnreadBadgeWindows = function(unreadCount, mentionCount) {
+  const badge = require('./js/badge');
+  const sendBadge = function(dataURL, description) {
+    // window.setOverlayIcon() does't work with NativeImage across remote boundaries.
+    // https://github.com/atom/electron/issues/4011
+    electron.ipcRenderer.send('win32-overlay', {
+      overlayDataURL: dataURL,
+      description: description
+    });
+  };
+
+  if (mentionCount > 0) {
+    const dataURL = badge.createDataURL(mentionCount.toString());
+    sendBadge(dataURL, 'You have unread mention (' + mentionCount + ')');
+  } else if (unreadCount > 0) {
+    const dataURL = badge.createDataURL('•');
+    sendBadge(dataURL, 'You have unread channels');
+  } else {
+    remote.getCurrentWindow().setOverlayIcon(null, '');
+  }
+}
+
+var showUnreadBadgeOSX = function(unreadCount, mentionCount) {
+  if (mentionCount > 0) {
+    remote.app.dock.setBadge(mentionCount.toString());
+  } else if (unreadCount > 0) {
+    remote.app.dock.setBadge('•');
+  } else {
+    remote.app.dock.setBadge('');
+  }
+}
+
 var showUnreadBadge = function(unreadCount, mentionCount) {
   switch (process.platform) {
     case 'win32':
-      var window = remote.getCurrentWindow();
-      if (unreadCount > 0 || mentionCount > 0) {
-        window.setOverlayIcon(path.join(__dirname, '../resources/badge.png'), 'You have unread channels.');
-      } else {
-        window.setOverlayIcon(null, '');
-      }
+      showUnreadBadgeWindows(unreadCount, mentionCount);
       break;
     case 'darwin':
-      if (mentionCount > 0) {
-        remote.app.dock.setBadge(mentionCount.toString());
-      } else if (mentionCount < unreadCount) {
-        remote.app.dock.setBadge('•');
-      } else {
-        remote.app.dock.setBadge('');
-      }
+      showUnreadBadgeOSX(unreadCount, mentionCount);
       break;
     default:
   }

src/browser/js/badge.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var createDataURL = function(text) {
+  const scale = 2; // should rely display dpi
+  const size = 16 * scale;
+  const canvas = document.createElement('canvas');
+  canvas.setAttribute('width', size);
+  canvas.setAttribute('height', size);
+  const ctx = canvas.getContext('2d');
+
+  // circle
+  ctx.fillStyle = "#FF1744"; // Material Red A400
+  ctx.beginPath();
+  ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+  ctx.fill();
+
+  // text
+  ctx.fillStyle = "#ffffff"
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.font = (11 * scale) + "px sans-serif";
+  ctx.fillText(text, size / 2, size / 2, size);
+
+  return canvas.toDataURL();
+};
+
+module.exports = {
+  createDataURL: createDataURL
+};

src/main.js

@@ -83,8 +83,8 @@ app.on('before-quit', function() {
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 app.on('ready', function() {
-  // set up tray icon to show balloon
   if (process.platform === 'win32') {
+    // set up tray icon to show balloon
     trayIcon = new Tray(path.resolve(__dirname, 'resources/tray.png'));
     trayIcon.setToolTip(app.getName());
     var tray_menu = require('./main/menus/tray').createDefault();
@@ -102,6 +102,12 @@ app.on('ready', function() {
         content: arg.options.body
       });
     });
+
+    // Set overlay icon from dataURL
+    ipc.on('win32-overlay', function(event, arg) {
+      var overlay = electron.nativeImage.createFromDataURL(arg.overlayDataURL);
+      mainWindow.setOverlayIcon(overlay, arg.description);
+    });
   }
 
   // Create the browser window.