moved generating tray icons to build step

Signed-off-by: Roman <ixrock@gmail.com>

src/main/tray.ts

@@ -1,9 +1,6 @@
 import path from "path"
-import sharp from "sharp";
-import jsdom from "jsdom"
 import packageInfo from "../../package.json"
-import { app, dialog, Menu, NativeImage, nativeImage, nativeTheme, Tray } from "electron"
-import { isDevelopment, isMac } from "../common/vars";
+import { app, dialog, Menu, NativeImage, nativeTheme, Tray } from "electron"
 import { autorun } from "mobx";
 import { showAbout } from "./menu";
 import { AppUpdater } from "./app-updater";
@@ -16,26 +13,22 @@ import logger from "./logger";
 
 // note: instance of Tray should be saved somewhere, otherwise it disappears
 export let tray: Tray;
-export let trayIcon: NativeImage;
 
-export const trayIconPath = isDevelopment
-  ? path.resolve(__static, "../src/renderer/components/icon/logo-lens.svg")
-  : path.resolve(__static, "logo.svg") // electron-builder's extraResources
+// refresh icon when MacOS dark/light theme has changed
+nativeTheme.on("updated", () => tray?.setImage(getTrayIcon()));
 
-// update icon when MacOS dark/light theme has changed
-nativeTheme.on("updated", async () => {
-  if (tray) {
-    trayIcon = await createTrayIconFromSvg();
-    tray.setImage(trayIcon);
-  }
-});
-
-export async function initTray(windowManager: WindowManager) {
-  trayIcon = await createTrayIconFromSvg(); // generate icon once on tray activation
+export function getTrayIcon(isDark = nativeTheme.shouldUseDarkColors): string {
+  return path.resolve(__static, "../build/icons", `tray_icon${isDark ? "_dark" : ""}.png`)
+}
 
+export function initTray(windowManager: WindowManager) {
   const dispose = autorun(() => {
-    const menu = createTrayMenu(windowManager);
-    buildTray(trayIcon, menu);
+    try {
+      const menu = createTrayMenu(windowManager);
+      buildTray(getTrayIcon(), menu);
+    } catch (err) {
+      logger.error(`[TRAY]: building failed: ${err}`);
+    }
   })
   return () => {
     dispose();
@@ -44,24 +37,7 @@ export async function initTray(windowManager: WindowManager) {
   }
 }
 
-export async function createTrayIconFromSvg(filePath = trayIconPath): Promise<NativeImage> {
-  // modify icon's svg
-  const svgDom = await jsdom.JSDOM.fromFile(filePath);
-  const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
-  const trayIconColor = nativeTheme.shouldUseDarkColors ? "white" : "black";
-  svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`
-  const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
-
-  // convert to .png or .ico and resize
-  const pngIcon = await sharp(svgIconBuffer).png().toBuffer();
-  const iconSize = isMac ? 16 : 32; // todo: verify on windows/linux
-  return nativeImage.createFromBuffer(pngIcon).resize({
-    width: iconSize,
-    height: iconSize
-  });
-}
-
-export async function buildTray(icon: NativeImage, menu: Menu) {
+export function buildTray(icon: string | NativeImage, menu: Menu) {
   logger.info("[TRAY]: build start");
 
   if (!tray) {

src/main/window-manager.ts

@@ -81,10 +81,10 @@ export class WindowManager {
     this.disposers.menuAutoUpdater = initMenu(this);
   }
 
-  protected async initTray() {
-    this.disposers.trayAutoBind = reaction(() => userStore.preferences.trayEnabled, async isEnabled => {
+  protected initTray() {
+    this.disposers.trayAutoBind = reaction(() => userStore.preferences.trayEnabled, isEnabled => {
       if (isEnabled) {
-        this.disposers.trayAutoUpdater = await initTray(this);
+        this.disposers.trayAutoUpdater = initTray(this);
       } else if (this.disposers.trayAutoUpdater) {
         this.disposers.trayAutoUpdater();
       }

src/renderer/components/icon/logo-kontena.svg

@@ -1,7 +0,0 @@
-<svg id="Layer_1" viewBox="0 0 194 219" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#fff">
-    <polygon points="98 12.4 71 28.3 44 44.1 17 60 17 91.8 17 123.6 17 155.4 44 171.3 44 139.5 44 107.7 44 75.9 71 60 71 91.8 71 91.8 71 123.6 98 107.7 98 107.7 125 91.8 125 60 152 44.1 125 28.3 98 12.4"/>
-    <polygon points="152 44.1 152 75.9 152 107.7 125 123.6 152 139.5 152 171.3 179 155.4 179 123.6 179 91.8 179 60 152 44.1"/>
-    <polygon points="98 139.5 71 155.4 71 155.4 71 187.2 98 203.1 125 187.2 125 155.4 98 139.5"/>
-  </g>
-</svg>