From ec5607b78d1c05bd039adbd86fc002c9e04e4a28 Mon Sep 17 00:00:00 2001 From: Darius Jahandarie Date: Sun, 22 Dec 2024 12:15:23 +0900 Subject: [PATCH] Cleanup to resolve some PR comments --- ext/js/application.js | 6 ++++-- ext/js/comm/api.js | 6 +++--- ext/js/comm/shared-worker-bridge.js | 4 +++- ext/js/dictionary/dictionary-database-worker-handler.js | 5 +++-- ext/js/dictionary/dictionary-database-worker-main.js | 3 +-- ext/js/display/structured-content-generator.js | 8 +++++--- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/ext/js/application.js b/ext/js/application.js index b60567488..c7fa4753b 100644 --- a/ext/js/application.js +++ b/ext/js/application.js @@ -190,13 +190,15 @@ export class Application extends EventDispatcher { * @param {(application: Application) => (Promise)} mainFunction */ static async main(waitForDom, mainFunction) { + const supportsServiceWorker = 'serviceWorker' in navigator; // Basically, all browsers except Firefox. But it's possible Firefox will support it in the future, so we check in this fashion to be future-proof. + const inExtensionContext = window.location.protocol === new URL(import.meta.url).protocol; // This code runs both in content script as well as in the iframe, so we need to differentiate the situation /** @type {MessagePort | null} */ // If this is Firefox, we don't have a service worker and can't postMessage, // so we temporarily create a SharedWorker in order to establish a MessageChannel // which we can use to postMessage with the backend. // This can only be done in the extension context (aka iframe within popup), // not in the content script context. - const backendPort = (!('serviceWorker' in navigator)) && window.location.protocol === new URL(import.meta.url).protocol ? + const backendPort = !supportsServiceWorker && inExtensionContext ? (() => { const sharedWorkerBridge = new SharedWorker(new URL('comm/shared-worker-bridge.js', import.meta.url), {type: 'module'}); const backendChannel = new MessageChannel(); @@ -210,7 +212,7 @@ export class Application extends EventDispatcher { log.configure(webExtension.extensionName); const mediaDrawingWorkerToBackendChannel = new MessageChannel(); - const mediaDrawingWorker = window.location.protocol === new URL(import.meta.url).protocol ? new Worker(new URL('display/media-drawing-worker.js', import.meta.url), {type: 'module'}) : null; + const mediaDrawingWorker = inExtensionContext ? new Worker(new URL('display/media-drawing-worker.js', import.meta.url), {type: 'module'}) : null; mediaDrawingWorker?.postMessage({action: 'connectToDatabaseWorker'}, [mediaDrawingWorkerToBackendChannel.port2]); const api = new API(webExtension, mediaDrawingWorker, backendPort); diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js index 0d95383d1..758bbbf9b 100644 --- a/ext/js/comm/api.js +++ b/ext/js/comm/api.js @@ -454,9 +454,9 @@ export class API { } this._backendPort.postMessage({action, params}, transferables); } else { - void navigator.serviceWorker.ready.then((swr) => { - if (swr.active !== null) { - swr.active.postMessage({action, params}, transferables); + void navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { + if (serviceWorkerRegistration.active !== null) { + serviceWorkerRegistration.active.postMessage({action, params}, transferables); } else { log.error(`[${self.constructor.name}] no active service worker`); } diff --git a/ext/js/comm/shared-worker-bridge.js b/ext/js/comm/shared-worker-bridge.js index 32b5f8a23..d18f53771 100644 --- a/ext/js/comm/shared-worker-bridge.js +++ b/ext/js/comm/shared-worker-bridge.js @@ -19,7 +19,9 @@ import {createApiMap, invokeApiMapHandler} from '../core/api-map.js'; import {log} from '../core/log.js'; /** - * This serves as a bridge between the application and the backend. + * This serves as a bridge between the application and the backend on Firefox + * where we don't have service workers. + * * It is designed to have extremely short lifetime on the application side, * as otherwise it will stay alive across extension updates (which only restart * the backend) which can lead to extremely difficult to debug situations where diff --git a/ext/js/dictionary/dictionary-database-worker-handler.js b/ext/js/dictionary/dictionary-database-worker-handler.js index 625a3123c..2d622b828 100644 --- a/ext/js/dictionary/dictionary-database-worker-handler.js +++ b/ext/js/dictionary/dictionary-database-worker-handler.js @@ -1,6 +1,5 @@ /* - * Copyright (C) 2023-2024 Yomitan Authors - * Copyright (C) 2021-2022 Yomichan Authors + * Copyright (C) 2024 Yomitan Authors * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by @@ -48,6 +47,8 @@ export class DictionaryDatabaseWorkerHandler { case 'connectToDatabaseWorker': void this._dictionaryDatabase?.connectToDatabaseWorker(event.ports[0]); break; + default: + log.error(`Unknown action: ${action}`); } } } diff --git a/ext/js/dictionary/dictionary-database-worker-main.js b/ext/js/dictionary/dictionary-database-worker-main.js index 906aa2ce8..e7cdb5543 100644 --- a/ext/js/dictionary/dictionary-database-worker-main.js +++ b/ext/js/dictionary/dictionary-database-worker-main.js @@ -1,6 +1,5 @@ /* - * Copyright (C) 2023-2024 Yomitan Authors - * Copyright (C) 2021-2022 Yomichan Authors + * Copyright (C) 2024 Yomitan Authors * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by diff --git a/ext/js/display/structured-content-generator.js b/ext/js/display/structured-content-generator.js index add061f49..fd9a8d534 100644 --- a/ext/js/display/structured-content-generator.js +++ b/ext/js/display/structured-content-generator.js @@ -125,14 +125,16 @@ export class StructuredContentGenerator { /** @type {HTMLCanvasElement} */ (this._createElement('canvas', 'gloss-image')) : /** @type {HTMLImageElement} */ (this._createElement('img', 'gloss-image')); if (sizeUnits === 'em' && (hasPreferredWidth || hasPreferredHeight)) { + const emSize = 14; // We could Number.parseFloat(getComputedStyle(document.documentElement).fontSize); here for more accuracy but it would cause a layout and be extremely slow; possible improvement would be to calculate and cache the value + const scaleFactor = 2 * window.devicePixelRatio; image.style.width = `${usedWidth}em`; image.style.height = `${usedWidth * invAspectRatio}em`; - image.width = usedWidth * 14 * 2 * window.devicePixelRatio; - image.height = usedWidth * invAspectRatio * 14 * 2 * window.devicePixelRatio; + image.width = usedWidth * emSize * scaleFactor; } else { image.width = usedWidth; - image.height = usedWidth * invAspectRatio; } + image.height = image.width * invAspectRatio; + imageContainer.appendChild(image); if (this._contentManager instanceof DisplayContentManager) {