diff --git a/.gitignore b/.gitignore
index d018f3b251..4c9c3c8165 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ locales/**/**.js
lens.log
static/build
static/types
+build/tray/
binaries/client/
binaries/server/
src/extensions/*/*.js
diff --git a/Makefile b/Makefile
index 6db96fbc2b..1199ee381d 100644
--- a/Makefile
+++ b/Makefile
@@ -32,7 +32,7 @@ compile-dev: node_modules
ci-validate-dev: binaries/client build-extensions compile-dev
.PHONY: dev
-dev: binaries/client build-extensions
+dev: binaries/client build/tray/trayIconTemplate.png build-extensions
rm -rf static/build/
yarn dev
@@ -53,7 +53,7 @@ integration: build
yarn integration
.PHONY: build
-build: node_modules binaries/client
+build: node_modules binaries/client build/tray/trayIconTemplate.png
yarn run npm:fix-build-version
$(MAKE) build-extensions -B
yarn run compile
@@ -70,6 +70,9 @@ $(extension_node_modules): node_modules
$(extension_dists): src/extensions/npm/extensions/dist $(extension_node_modules)
cd $(@:/dist=) && ../../node_modules/.bin/npm run build
+build/tray/trayIconTemplate.png: node_modules
+ yarn ts-node ./build/generate-tray-icons.ts
+
.PHONY: clean-old-extensions
clean-old-extensions:
find ./extensions -mindepth 1 -maxdepth 1 -type d '!' -exec test -e '{}/package.json' \; -exec rm -rf {} \;
@@ -126,6 +129,7 @@ clean: clean-npm clean-extensions
rm -rf binaries/client
rm -rf dist
rm -rf static/build
+ rm -rf build/tray
rm -rf node_modules
rm -rf site
rm -rf docs/extensions/api
diff --git a/build/generate-tray-icons.ts b/build/generate-tray-icons.ts
new file mode 100644
index 0000000000..c09ab6320d
--- /dev/null
+++ b/build/generate-tray-icons.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { readFileSync } from "fs";
+import { ensureDirSync } from "fs-extra";
+import { JSDOM } from "jsdom";
+import path from "path";
+import sharp from "sharp";
+
+const size = Number(process.env.OUTPUT_SIZE || "16");
+const outputFolder = process.env.OUTPUT_DIR || "./build/tray";
+const inputFile = process.env.INPUT_SVG_PATH || "./src/renderer/components/icon/logo-lens.svg";
+
+const svgData = readFileSync(inputFile, { encoding: "utf-8" });
+const svgDom = new JSDOM(`${svgData}`);
+const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
+
+svgRoot.innerHTML += ``;
+const lightTemplate = svgRoot.outerHTML;
+
+svgRoot.innerHTML += ``;
+
+const darkTemplate = svgRoot.outerHTML;
+
+console.log("Generating tray icon pngs");
+
+ensureDirSync(outputFolder);
+
+Promise.allSettled([
+ sharp(Buffer.from(darkTemplate))
+ .resize({ width: size, height: size })
+ .png()
+ .toFile(path.join(outputFolder, "trayIconDarkTemplate.png")),
+ sharp(Buffer.from(darkTemplate))
+ .resize({ width: size*2, height: size*2 })
+ .png()
+ .toFile(path.join(outputFolder, "trayIconDarkTemplate@2x.png")),
+ sharp(Buffer.from(lightTemplate))
+ .resize({ width: size, height: size })
+ .png()
+ .toFile(path.join(outputFolder, "trayIconTemplate.png")),
+ sharp(Buffer.from(lightTemplate))
+ .resize({ width: size*2, height: size*2 })
+ .png()
+ .toFile(path.join(outputFolder, "trayIconTemplate@2x.png")),
+])
+ .then(console.log)
+ .catch(console.error);
diff --git a/package.json b/package.json
index 0b8c5a6abf..373802ca80 100644
--- a/package.json
+++ b/package.json
@@ -124,9 +124,6 @@
"rpm",
"AppImage"
],
- "asarUnpack": [
- "**/node_modules/sharp/**"
- ],
"extraResources": [
{
"from": "binaries/client/linux/${arch}/kubectl",
@@ -263,7 +260,6 @@
"rfc6902": "^4.0.2",
"selfsigned": "^2.0.1",
"semver": "^7.3.7",
- "sharp": "^0.30.3",
"shell-env": "^3.0.1",
"spdy": "^4.0.2",
"tar": "^6.1.11",
@@ -325,7 +321,7 @@
"@types/request": "^2.48.7",
"@types/request-promise-native": "^1.0.18",
"@types/semver": "^7.3.9",
- "@types/sharp": "^0.30.0",
+ "@types/sharp": "^0.30.2",
"@types/spdy": "^3.4.5",
"@types/tar": "^4.0.5",
"@types/tar-stream": "^2.2.2",
@@ -392,6 +388,7 @@
"react-window": "^1.8.6",
"sass": "^1.51.0",
"sass-loader": "^12.6.0",
+ "sharp": "^0.30.4",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.23",
"tar-stream": "^2.2.0",
diff --git a/src/main/index.ts b/src/main/index.ts
index 5b4f965a93..f6c0b1bbc0 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -305,7 +305,7 @@ async function main(di: DiContainer) {
onQuitCleanup.push(
initMenu(applicationMenuItems),
- await initTray(windowManager, trayMenuItems, navigateToPreferences),
+ initTray(windowManager, trayMenuItems, navigateToPreferences),
() => ShellSession.cleanup(),
);
diff --git a/src/main/tray/tray.ts b/src/main/tray/tray.ts
index af129ac27a..e2c4425f42 100644
--- a/src/main/tray/tray.ts
+++ b/src/main/tray/tray.ts
@@ -4,22 +4,19 @@
*/
import packageInfo from "../../../package.json";
-import type { NativeImage } from "electron";
-import { Menu, nativeImage, nativeTheme, Tray } from "electron";
+import { Menu, Tray } from "electron";
import type { IComputedValue } from "mobx";
import { autorun } from "mobx";
import { showAbout } from "../menu/menu";
import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
import type { WindowManager } from "../window-manager";
import logger from "../logger";
-import { isWindows, productName } from "../../common/vars";
+import { isDevelopment, isWindows, productName, staticFilesDirectory } from "../../common/vars";
import { exitApp } from "../exit-app";
import type { Disposer } from "../../common/utils";
-import { base64, disposer, getOrInsertWithAsync, toJS } from "../../common/utils";
+import { disposer, toJS } from "../../common/utils";
import type { TrayMenuRegistration } from "./tray-menu-registration";
-import sharp from "sharp";
-import LogoLens from "../../renderer/components/icon/logo-lens.svg";
-import { JSDOM } from "jsdom";
+import path from "path";
const TRAY_LOG_PREFIX = "[TRAY]";
@@ -27,69 +24,25 @@ const TRAY_LOG_PREFIX = "[TRAY]";
// note: instance of Tray should be saved somewhere, otherwise it disappears
export let tray: Tray;
-interface CreateTrayIconArgs {
- shouldUseDarkColors: boolean;
- size: number;
- sourceSvg: string;
+function getTrayIconPath(): string {
+ return path.resolve(
+ staticFilesDirectory,
+ isDevelopment ? "../build/tray" : "icons", // copied within electron-builder extras
+ "trayIconTemplate.png",
+ );
}
-const trayIcons = new Map();
-
-async function createTrayIcon({ shouldUseDarkColors, size, sourceSvg }: CreateTrayIconArgs): Promise {
- return getOrInsertWithAsync(trayIcons, shouldUseDarkColors, async () => {
- const trayIconColor = shouldUseDarkColors ? "white" : "black"; // Invert to show contrast
- const parsedSvg = base64.decode(sourceSvg.split("base64,")[1]);
- const svgDom = new JSDOM(`${parsedSvg}`);
- const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
-
- svgRoot.innerHTML += ``;
-
- const iconBuffer = await sharp(Buffer.from(svgRoot.outerHTML))
- .resize({ width: size, height: size })
- .png()
- .toBuffer();
-
- return nativeImage.createFromBuffer(iconBuffer);
- });
-}
-
-function createCurrentTrayIcon() {
- return createTrayIcon({
- shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
- size: 16,
- sourceSvg: LogoLens,
- });
-}
-
-function watchShouldUseDarkColors(tray: Tray): Disposer {
- let prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
- const onUpdated = () => {
- if (prevShouldUseDarkColors !== nativeTheme.shouldUseDarkColors) {
- prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
- createCurrentTrayIcon()
- .then(img => tray.setImage(img));
- }
- };
-
- nativeTheme.on("updated", onUpdated);
-
- return () => nativeTheme.off("updated", onUpdated);
-}
-
-export async function initTray(
+export function initTray(
windowManager: WindowManager,
trayMenuItems: IComputedValue,
navigateToPreferences: () => void,
-): Promise {
- const icon = await createCurrentTrayIcon();
- const dispose = disposer();
+): Disposer {
+ const icon = getTrayIconPath();
tray = new Tray(icon);
tray.setToolTip(packageInfo.description);
tray.setIgnoreDoubleClickEvents(true);
- dispose.push(watchShouldUseDarkColors(tray));
-
if (isWindows) {
tray.on("click", () => {
windowManager
@@ -98,7 +51,7 @@ export async function initTray(
});
}
- dispose.push(
+ return disposer(
autorun(() => {
try {
const menu = createTrayMenu(windowManager, toJS(trayMenuItems.get()), navigateToPreferences);
@@ -113,8 +66,6 @@ export async function initTray(
tray = null;
},
);
-
- return dispose;
}
function getMenuItemConstructorOptions(trayItem: TrayMenuRegistration): Electron.MenuItemConstructorOptions {
diff --git a/yarn.lock b/yarn.lock
index e7692c46ea..bb3c97d53a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1975,10 +1975,10 @@
"@types/mime" "^1"
"@types/node" "*"
-"@types/sharp@^0.30.0":
- version "0.30.0"
- resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.30.0.tgz#58cb016c8fdc558b4c5771ad1f3668336685c843"
- integrity sha512-bZ0Y/JVlrOyqwlBMJ2taEgnwFavjLnyZmLOLecmOesuG5kR2Lx9b2fM4osgfVjLJi8UlE+t3R1JzRVMxF6MbfA==
+"@types/sharp@^0.30.2":
+ version "0.30.2"
+ resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.30.2.tgz#df5ff34140b3bad165482e6f3d26b08e42a0503a"
+ integrity sha512-uLCBwjDg/BTcQit0dpNGvkIjvH3wsb8zpaJePCjvONBBSfaKHoxXBIuq1MT8DMQEfk2fKYnpC9QExCgFhkGkMQ==
dependencies:
"@types/node" "*"
@@ -3840,9 +3840,9 @@ color-string@^1.5.2, color-string@^1.6.0:
simple-swizzle "^0.2.2"
color-string@^1.9.0:
- version "1.9.0"
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
- integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
+ version "1.9.1"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+ integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
@@ -3863,10 +3863,10 @@ color@^3.2.1:
color-convert "^1.9.3"
color-string "^1.6.0"
-color@^4.2.1:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/color/-/color-4.2.1.tgz#498aee5fce7fc982606c8875cab080ac0547c884"
- integrity sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==
+color@^4.2.3:
+ version "4.2.3"
+ resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+ integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
dependencies:
color-convert "^2.0.1"
color-string "^1.9.0"
@@ -9377,9 +9377,9 @@ no-case@^3.0.4:
tslib "^2.0.3"
node-abi@^3.3.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.5.0.tgz#26e8b7b251c3260a5ac5ba5aef3b4345a0229248"
- integrity sha512-LtHvNIBgOy5mO8mPEUtkCW/YCRWYEKshIvqhe1GHHyXEHEB5mgICyYnAcl4qan3uFeRROErKGzatFHPf6kDxWw==
+ version "3.15.0"
+ resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.15.0.tgz#cd9ac8c58328129b49998cc6fa16aa5506152716"
+ integrity sha512-Ic6z/j6I9RLm4ov7npo1I48UQr2BEyFCqh6p7S1dhEx9jPO0GPGq/e2Rb7x7DroQrmiVMz/Bw1vJm9sPAl2nxA==
dependencies:
semver "^7.3.5"
@@ -10649,9 +10649,9 @@ postcss@^8.3.0, postcss@^8.4.12, postcss@^8.4.6, postcss@^8.4.7:
source-map-js "^1.0.2"
prebuild-install@^7.0.1:
- version "7.0.1"
- resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870"
- integrity sha512-QBSab31WqkyxpnMWQxubYAHR5S9B2+r81ucocew34Fkl98FhvKIF50jIJnNOBmAZfyNV7vE5T6gd3hTVWgY6tg==
+ version "7.1.0"
+ resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.0.tgz#991b6ac16c81591ba40a6d5de93fb33673ac1370"
+ integrity sha512-CNcMgI1xBypOyGqjp3wOc8AAo1nMhZS3Cwd3iHIxOdAUbb+YxdNuM4Z5iIrZ8RLvOsf3F3bl7b7xGq6DjQoNYA==
dependencies:
detect-libc "^2.0.0"
expand-template "^2.0.3"
@@ -11843,16 +11843,16 @@ shallow-clone@^3.0.0:
dependencies:
kind-of "^6.0.2"
-sharp@^0.30.3:
- version "0.30.3"
- resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.3.tgz#315a1817423a4d1cde5119a21c99c234a7a6fb37"
- integrity sha512-rjpfJFK58ZOFSG8sxYSo3/JQb4ej095HjXp9X7gVu7gEn1aqSG8TCW29h/Rr31+PXrFADo1H/vKfw0uhMQWFtg==
+sharp@^0.30.4:
+ version "0.30.4"
+ resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.4.tgz#73d9daa63bbc20da189c9328d75d5d395fc8fb73"
+ integrity sha512-3Onig53Y6lji4NIZo69s14mERXXY/GV++6CzOYx/Rd8bnTwbhFbL09WZd7Ag/CCnA0WxFID8tkY0QReyfL6v0Q==
dependencies:
- color "^4.2.1"
+ color "^4.2.3"
detect-libc "^2.0.1"
node-addon-api "^4.3.0"
prebuild-install "^7.0.1"
- semver "^7.3.5"
+ semver "^7.3.7"
simple-get "^4.0.1"
tar-fs "^2.1.1"
tunnel-agent "^0.6.0"