[FIX] System tray, dock, task bar and main window issues

.travis.yml

@@ -37,16 +37,7 @@ before_install:
 
 install:
   - yarn
-  - yarn list
 
 script:
   - if [[ "$TRAVIS_PULL_REQUEST" != "false" ]]; then export CSC_IDENTITY_AUTO_DISCOVERY=false; fi
-  # e2e tests should be performed only on Linux
-  - |
-    if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then
-      export DISPLAY=:99.0
-      sh -e /etc/init.d/xvfb start
-      sleep 3
-      yarn e2e
-    fi
   - yarn release

src/background.js

@@ -6,7 +6,8 @@ import idle from '@paulcbetts/system-idle-time';
 import appData from './background/appData';
 import autoUpdate from './background/autoUpdate';
 import certificate from './background/certificate';
-import { addServer, createMainWindow, getMainWindow } from './background/mainWindow';
+import dock from './background/dock';
+import { addServer, getMainWindow } from './background/mainWindow';
 import menus from './background/menus';
 import './background/screenshare';
 import tray from './background/tray';
@@ -15,7 +16,8 @@ import i18n from './i18n/index.js';
 
 export { default as showAboutDialog } from './background/aboutDialog';
 export { default as remoteServers } from './background/servers';
-export { certificate, menus, tray };
+export { certificate, dock, menus, tray };
+
 
 process.env.GOOGLE_API_KEY = 'AIzaSyADqUh_c1Qhji3Cp1NE43YrcpuPkmhXD-c';
 
@@ -78,18 +80,19 @@ if (process.platform === 'linux') {
 	app.disableHardwareAcceleration();
 }
 
-app.on('ready', () => {
+app.on('ready', async() => {
 	unsetDefaultApplicationMenu();
 
 	appData.initialize();
 
-	createMainWindow();
-
-	getMainWindow().then((mainWindow) => certificate.initWindow(mainWindow));
+	const mainWindow = await getMainWindow();
+	certificate.initWindow(mainWindow);
 
 	autoUpdate();
 });
 
 ipcMain.on('getSystemIdleTime', (event) => {
 	event.returnValue = idle.getIdleTime();
 });
+
+process.on('unhandledRejection', console.error.bind(console));

src/background/dock.js

@@ -0,0 +1,83 @@
+import { app } from 'electron';
+import { EventEmitter } from 'events';
+import { getMainWindow } from './mainWindow';
+import icon from './icon';
+
+
+const getBadgeText = ({ badge: { title, count } }) => {
+	if (title === '•') {
+		return '•';
+	} else if (count > 0) {
+		return count > 9 ? '9+' : String(count);
+	} else if (title) {
+		return '!';
+	}
+};
+
+let state = {
+	badge: {
+		title: '',
+		count: 0,
+	},
+	status: 'online',
+};
+
+const instance = new (class Dock extends EventEmitter {});
+
+const destroy = () => {
+	instance.removeAllListeners();
+};
+
+const update = async(previousState) => {
+	const mainWindow = await getMainWindow();
+	const badgeText = getBadgeText(state);
+
+	if (process.platform === 'win32') {
+		const image = badgeText ? await icon.render({
+			overlay: true,
+			size: 16,
+			badgeText,
+		}) : null;
+		mainWindow.setOverlayIcon(image, badgeText || '');
+
+		mainWindow.removeListener('show', update);
+		mainWindow.on('show', update);
+	}
+
+	if (process.platform === 'darwin') {
+		app.dock.setBadge(badgeText || '');
+		if (state.badge.count > 0 && previousState.badge.count === 0) {
+			app.dock.bounce();
+		}
+	}
+
+	if (process.platform === 'linux') {
+		mainWindow.setIcon(await icon.render({
+			badgeText,
+			size: {
+				win32: [256, 128, 64, 48, 32, 24, 16],
+				linux: 128,
+			}[process.platform],
+		}));
+	}
+
+	if (!mainWindow.isFocused()) {
+		mainWindow.flashFrame(state.badge.count > 0);
+	}
+
+	instance.emit('update');
+};
+
+const setState = (partialState) => {
+	const previousState = state;
+	state = {
+		...state,
+		...partialState,
+	};
+	update(previousState);
+};
+
+export default Object.assign(instance, {
+	destroy,
+	setState,
+});

src/background/icon.js

@@ -0,0 +1,120 @@
+import { BrowserWindow, nativeImage } from 'electron';
+import jetpack from 'fs-jetpack';
+import { whenReadyToShow } from './utils';
+
+let rendererWindow = null;
+
+const getRendererWindow = async() => {
+	if (!rendererWindow) {
+		rendererWindow = new BrowserWindow({ show: false });
+
+		const dataURL = `data:text/html,<!doctype html>
+		${ jetpack.read(`${ __dirname }/public/images/icon.svg`) }`;
+
+		rendererWindow.loadURL(dataURL);
+		await whenReadyToShow(rendererWindow);
+	}
+
+	return rendererWindow;
+};
+
+const renderInWindow = async(style) => {
+	const statusColors = {
+		offline: null,
+		away: 'yellow',
+		busy: 'red',
+		online: 'lime',
+	};
+
+	const create = ({ overlay, template, status, badgeText } = {}) => {
+		const svg = document.querySelector('#icon').cloneNode(true);
+
+		svg.querySelector('.logo .baloon').style.fill = template ? '#FFFFFF' : '#DB2323';
+		svg.querySelector('.logo .circles').style.fill = template ? '#FFFFFF' : '#DB2323';
+		svg.querySelector('.status .away').style.fill = template ? '#FFFFFF' : '#DB2323';
+		svg.querySelector('.status .busy').style.fill = template ? '#FFFFFF' : '#DB2323';
+
+		svg.querySelector('.logo .bubble').style.display = template ? 'none' : null;
+
+		svg.querySelector('.badge').style.display = (!template && badgeText) ? null : 'none';
+		svg.querySelector('.badge text').innerHTML = badgeText;
+
+		svg.querySelector('.logo .circles').style.display = (template && status && status !== 'online') ? 'none' : '';
+		svg.querySelector('.status circle').style.display = (template || !status) ? 'none' : null;
+		svg.querySelector('.status .away').style.display = (template && status === 'away') ? null : 'none';
+		svg.querySelector('.status .busy').style.display = (template && status === 'busy') ? null : 'none';
+		svg.querySelector('.status circle').style.fill = statusColors[status];
+
+		if (overlay) {
+			const overlaySVG = svg.cloneNode(true);
+			svg.remove();
+
+			overlaySVG.querySelector('.logo').remove();
+			overlaySVG.querySelector('.status').remove();
+			overlaySVG.setAttribute('viewBox', '96 -32 160 160');
+
+			return overlaySVG;
+		}
+
+		return svg;
+	};
+
+	const rasterize = async(svg, size) => {
+		const image = new Image();
+		image.src = `data:image/svg+xml,${ encodeURIComponent(svg.outerHTML) }`;
+		image.width = image.height = size;
+		await new Promise((resolve, reject) => {
+			image.onload = resolve;
+			image.onerror = reject;
+		});
+
+		const canvas = document.createElement('canvas');
+		canvas.width = canvas.height = size;
+
+		const ctx = canvas.getContext('2d');
+		ctx.drawImage(image, 0, 0);
+
+		return canvas.toDataURL('image/png');
+	};
+
+	const svg = create(style);
+	const pixelRatio = window.devicePixelRatio;
+	const sizes = Array.isArray(style.size) ? style.size : [style.size || 256];
+	const images = await Promise.all(sizes.map(async(size) => ({
+		dataURL: await rasterize(svg, size * pixelRatio),
+		size,
+		pixelRatio,
+	})));
+	svg.remove();
+	return images;
+};
+
+const render = async(style = {}) => {
+	const encodedArgs = JSON.stringify(style);
+	render.cache = render.cache || [];
+
+	if (render.cache[encodedArgs]) {
+		return render.cache[encodedArgs];
+	}
+
+	const rendererWindow = await getRendererWindow();
+	const jsCode = `(${ renderInWindow.toString() })(${ encodedArgs })`;
+	const images = await rendererWindow.webContents.executeJavaScript(jsCode);
+	const image = nativeImage.createEmpty();
+	for (const { dataURL, size, pixelRatio } of images) {
+		image.addRepresentation({
+			scaleFactor: pixelRatio,
+			width: size,
+			height: size,
+			dataURL,
+		});
+	}
+	image.setTemplateImage(style.template || false);
+	render.cache[encodedArgs] = image;
+
+	return image;
+};
+
+export default {
+	render,
+};