From fc45f06fc8bc34e52ae4221703e2cc5872a1eda1 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Fri, 6 May 2022 09:18:47 -0400 Subject: [PATCH 1/4] Add some debug logging to help debug LED issue (#5288) --- src/main/cluster-manager.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/main/cluster-manager.ts b/src/main/cluster-manager.ts index 1991ce8ea1..498884785d 100644 --- a/src/main/cluster-manager.ts +++ b/src/main/cluster-manager.ts @@ -144,22 +144,32 @@ export class ClusterManager extends Singleton { } else { entity.status.phase = (() => { if (!cluster) { + logger.debug(`${logPrefix} setting entity ${entity.getName()} to DISCONNECTED, reason="no cluster"`); + return LensKubernetesClusterStatus.DISCONNECTED; } if (cluster.accessible) { + logger.debug(`${logPrefix} setting entity ${entity.getName()} to CONNECTED, reason="cluster is accessible"`); + return LensKubernetesClusterStatus.CONNECTED; } if (!cluster.disconnected) { + logger.debug(`${logPrefix} setting entity ${entity.getName()} to CONNECTING, reason="cluster is not disconnected"`); + return LensKubernetesClusterStatus.CONNECTING; } // Extensions are not allowed to use the Lens specific status phases if (!lensSpecificClusterStatuses.has(entity?.status?.phase)) { + logger.debug(`${logPrefix} not clearing entity ${entity.getName()} status, reason="custom string"`); + return entity.status.phase; } + logger.debug(`${logPrefix} setting entity ${entity.getName()} to DISCONNECTED, reason="fallthrough"`); + return LensKubernetesClusterStatus.DISCONNECTED; })(); From a7607ce7e1e3e2be844b574f639ea161cf909d6b Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 9 May 2022 15:44:13 -0400 Subject: [PATCH 2/4] Revert upgrade to react 18 (#5352) --- package.json | 4 +-- src/renderer/bootstrap.tsx | 9 +++-- yarn.lock | 73 ++++++++++---------------------------- 3 files changed, 24 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index e0be217222..0b8c5a6abf 100644 --- a/package.json +++ b/package.json @@ -252,8 +252,8 @@ "p-limit": "^3.1.0", "path-to-regexp": "^6.2.0", "proper-lockfile": "^4.1.2", - "react": "^18.0.0", - "react-dom": "^18.0.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-material-ui-carousel": "^2.3.11", "react-router": "^5.2.0", "react-virtualized-auto-sizer": "^1.0.6", diff --git a/src/renderer/bootstrap.tsx b/src/renderer/bootstrap.tsx index 207ae3fd8f..66a6600d5a 100644 --- a/src/renderer/bootstrap.tsx +++ b/src/renderer/bootstrap.tsx @@ -6,14 +6,13 @@ import "./components/app.scss"; import React from "react"; -import ReactDOM from "react-dom"; +import ReactDOM, { render, unmountComponentAtNode } from "react-dom"; import * as Mobx from "mobx"; import * as MobxReact from "mobx-react"; import * as ReactRouter from "react-router"; import * as ReactRouterDom from "react-router-dom"; import * as LensExtensionsCommonApi from "../extensions/common-api"; import * as LensExtensionsRendererApi from "../extensions/renderer-api"; -import { createRoot } from "react-dom/client"; import { delay } from "../common/utils"; import { isMac, isDevelopment } from "../common/vars"; import { HelmRepoManager } from "../main/helm/helm-repo-manager"; @@ -70,7 +69,6 @@ export async function bootstrap(di: DiContainer) { bindEvents(); const rootElem = document.getElementById("app"); - const rootNode = createRoot(rootElem); const logPrefix = `[BOOTSTRAP-${process.isMainFrame ? "ROOT" : "CLUSTER"}-FRAME]:`; // TODO: Remove temporal dependencies to make timing of initialization not important @@ -154,7 +152,7 @@ export async function bootstrap(di: DiContainer) { } try { - await initializeApp(() => rootNode.unmount()); + await initializeApp(() => unmountComponentAtNode(rootElem)); } catch (error) { console.error(`[BOOTSTRAP]: view initialization error: ${error}`, { origin: location.href, @@ -162,12 +160,13 @@ export async function bootstrap(di: DiContainer) { }); } - rootNode.render( + render( {DefaultProps(App)} , + rootElem, ); } diff --git a/yarn.lock b/yarn.lock index 52e0391c41..e7692c46ea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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" @@ -11003,13 +10963,14 @@ react-beautiful-dnd@^13.1.0: redux "^4.0.4" use-memo-one "^1.1.1" -react-dom@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" - integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" - scheduler "^0.21.0" + object-assign "^4.1.1" + scheduler "^0.20.2" react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: version "16.13.1" @@ -11133,12 +11094,13 @@ react-window@^1.8.6: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" -react@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" - integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== +react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" + object-assign "^4.1.1" read-cmd-shim@^1.0.1, read-cmd-shim@^1.0.5: version "1.0.5" @@ -11697,12 +11659,13 @@ saxes@^5.0.1: dependencies: xmlchars "^2.2.0" -scheduler@^0.21.0: - version "0.21.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" - integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" + object-assign "^4.1.1" schema-utils@2.7.0: version "2.7.0" From 6b097e086b9bb0fabf7bd6d5a808cf106dfb102d Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Tue, 10 May 2022 08:43:40 -0400 Subject: [PATCH 3/4] Add docs concerning webpack external configs (#5351) --- docs/extensions/get-started/anatomy.md | 67 ++++++++++++++++++++------ 1 file changed, 52 insertions(+), 15 deletions(-) diff --git a/docs/extensions/get-started/anatomy.md b/docs/extensions/get-started/anatomy.md index 745bff5a89..481c18ac2c 100644 --- a/docs/extensions/get-started/anatomy.md +++ b/docs/extensions/get-started/anatomy.md @@ -38,13 +38,15 @@ It contains a mix of Node.js fields, including scripts and dependencies, and Len Some of the most-important fields include: - `name` and `publisher`: Lens uses `@/` as a unique ID for the extension. -For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`. -Lens uses this ID to uniquely identify your extension. + For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`. + Lens uses this ID to uniquely identify your extension. - `main`: the extension's entry point run in `main` process. - `renderer`: the extension's entry point run in `renderer` process. - `engines.lens`: the minimum version of Lens API that the extension depends upon. + We only support the `^` range, which is also optional to specify, and only major and minor version numbers. + Meaning that `^5.4` and `5.4` both mean the same thing, and the patch version in `5.4.2` is ignored. -``` javascript +```javascript { "name": "helloworld-sample", "publisher": "lens-samples", @@ -53,7 +55,8 @@ Lens uses this ID to uniquely identify your extension. "license": "MIT", "homepage": "https://github.com/lensapp/lens-extension-samples", "engines": { - "lens": "^4.0.0" + "node": "^14.18.12", + "lens": "5.4" }, "main": "dist/main.js", "renderer": "dist/renderer.js", @@ -65,17 +68,51 @@ Lens uses this ID to uniquely identify your extension. "react-open-doodles": "^1.0.5" }, "devDependencies": { - "@k8slens/extensions": "^4.0.0-alpha.2", + "@k8slens/extensions": "^5.4.6", "ts-loader": "^8.0.4", - "typescript": "^4.0.3", - "@types/react": "^16.9.35", - "@types/node": "^12.0.0", + "typescript": "^4.5.5", + "@types/react": "^17.0.44", + "@types/node": "^14.18.12", "webpack": "^4.44.2", "webpack-cli": "^3.3.11" } } ``` +## Webpack configuation + +The following webpack `externals` are provided by `Lens` and must be used (when available) to make sure that the versions used are in sync. + +| Package | webpack external syntax | Lens versions | Available in Main | Available in Renderer | +| ------------------ | --------------------------- | ------------- | ----------------- | --------------------- | +| `mobx` | `var global.Mobx` | `>5.0.0` | ✅ | ✅ | +| `mobx-react` | `var global.MobxReact` | `>5.0.0` | ❌ | ✅ | +| `react` | `var global.React` | `>5.0.0` | ❌ | ✅ | +| `react-router` | `var global.ReactRouter` | `>5.0.0` | ❌ | ✅ | +| `react-router-dom` | `var global.ReactRouterDom` | `>5.0.0` | ❌ | ✅ | +| `react-dom` | `var global.ReactDOM` | `>5.5.0` | ❌ | ✅ | + +What is exported is the whole of the packages as a `*` import (within typescript). + +For example, the following is how you would specify these within your webpack configuration files. + +```json +{ + ... + "externals": [ + ... + { + "mobx": "var global.Mobx" + "mobx-react": "var global.MobxReact" + "react": "var global.React" + "react-router": "var global.ReactRouter" + "react-router-dom": "var global.ReactRouterDom" + "react-dom": "var global.ReactDOM" + } + ] +} +``` + ## Extension Entry Files Lens extensions can have two separate entry files. @@ -95,20 +132,20 @@ The `Cluster Page` object registers the `/extension-example` path, and this path It also registers the `MenuItem` component that displays the `ExampleIcon` React component and the "Hello World" text in the left-side menu of the cluster dashboard. These React components are defined in the additional `./src/page.tsx` file. -``` typescript +```typescript import { Renderer } from "@k8slens/extensions"; -import { ExampleIcon, ExamplePage } from "./page" -import React from "react" +import { ExampleIcon, ExamplePage } from "./page"; +import React from "react"; export default class ExampleExtension extends Renderer.LensExtension { clusterPages = [ { id: "extension-example", components: { - Page: () => , - } - } - ] + Page: () => , + }, + }, + ]; } ``` From 9f25212f45fb82a13f84f6f9af2f1a71c19fe80f Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Tue, 10 May 2022 08:44:22 -0400 Subject: [PATCH 4/4] Stop using sharp at runtime (#5346) --- .gitignore | 1 + Makefile | 8 +++- build/generate-tray-icons.ts | 50 +++++++++++++++++++++++ package.json | 7 +--- src/main/index.ts | 2 +- src/main/tray/tray.ts | 77 +++++++----------------------------- yarn.lock | 46 ++++++++++----------- 7 files changed, 97 insertions(+), 94 deletions(-) create mode 100644 build/generate-tray-icons.ts 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"