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..bf6f2dbee1 --- /dev/null +++ b/build/generate-tray-icons.ts @@ -0,0 +1,37 @@ +/** + * 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 += ``; + +console.log("Generating tray icon pngs"); + +ensureDirSync(outputFolder); + +Promise.allSettled([ + sharp(Buffer.from(svgRoot.outerHTML)) + .resize({ width: size, height: size }) + .png() + .toFile(path.join(outputFolder, "trayIconTemplate.png")), + sharp(Buffer.from(svgRoot.outerHTML)) + .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 e0be217222..a8b3972a3d 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..14995c1507 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 getTrayIcon() { + 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 = getTrayIcon(); 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 52e0391c41..1cac07b52f 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" @@ -4424,7 +4424,7 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -6992,7 +6992,7 @@ import-local@^3.0.2: pkg-dir "^4.2.0" resolve-cwd "^3.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -8694,11 +8694,6 @@ lodash-es@^4.17.21: resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -8707,33 +8702,11 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= - lodash._root@~3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692" @@ -8764,11 +8737,6 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.union@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88" @@ -9409,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" @@ -9752,7 +9720,6 @@ npm@^6.14.17: cmd-shim "^3.0.3" columnify "~1.5.4" config-chain "^1.1.12" - debuglog "*" detect-indent "~5.0.0" detect-newline "^2.1.0" dezalgo "~1.0.3" @@ -9767,7 +9734,6 @@ npm@^6.14.17: has-unicode "~2.0.1" hosted-git-info "^2.8.9" iferr "^1.0.2" - imurmurhash "*" infer-owner "^1.0.4" inflight "~1.0.6" inherits "^2.0.4" @@ -9786,14 +9752,8 @@ npm@^6.14.17: libnpx "^10.2.4" lock-verify "^2.1.0" lockfile "^1.0.4" - lodash._baseindexof "*" lodash._baseuniq "~4.6.0" - lodash._bindcallback "*" - lodash._cacheindexof "*" - lodash._createcache "*" - lodash._getnative "*" lodash.clonedeep "~4.5.0" - lodash.restparam "*" lodash.union "~4.6.0" lodash.uniq "~4.5.0" lodash.without "~4.4.0" @@ -10689,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" @@ -11880,16 +11840,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"