Improve popup performance (#1487)

* batch media lookups, eliminate base64ing * properly abort if lookup is interrupted * Begin to add performance marks * batch media lookups, eliminate base64ing * [WIP] attempt to use OffscreenCanvas * Add worker to offload some stuff off the main thread (except SVG rasterization, because that needs to be on the main thread...) * swap to rendering SVGs on worker thread using resvg-js/wasm * further tweaking, add more debug logging * remove some unnecessary asyncification done earlier in the PR, and add more logging * remove some dead code and add more logging * make SW instruct offscreen to create port if non-existent * make SW instruct offscreen to create port when SW restarts * Add typed interfaces for most of the new message passing. Remove a bit of dead code * fix image rendering in Anki, more performance marks * redo all message passing to make it work on both Chrome and FF * begin cleanup * cleanup * make it work on FF133 which implements ImageDecoder but doesn't have cross-process transferrable VideoFrames * remove console.logs * remove unused alt constant * fix no-undef errors * fix ts errors * clean up css, make tests pass * fix benches * fix remaining test by doing some upgrades * cleanup, improve clarity in some places * Replace performance with safePerformance * Cleanup to resolve some PR comments * fix issues discovered by Kuuuube --------- Co-authored-by: kuuuube <[email protected]>
yomidevs · Dec 24, 2024 · 3142fa9 · 3142fa9
1 parent 120f0af
commit 3142fa9
Show file tree

Hide file tree

Showing 43 changed files with 1,271 additions and 459 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -558,10 +558,12 @@
         {
             "files": [
                 "ext/js/core/api-map.js",
+                "ext/js/core/event-listener-collection.js",
                 "ext/js/core/extension-error.js",
                 "ext/js/core/json.js",
                 "ext/js/data/anki-note-data-creator.js",
                 "ext/js/dictionary/dictionary-data-util.js",
+                "ext/js/display/display-content-manager.js",
                 "ext/js/display/pronunciation-generator.js",
                 "ext/js/display/structured-content-generator.js",
                 "ext/js/dom/css-style-applier.js",
@@ -582,6 +584,7 @@
         },
         {
             "files": [
+                "ext/js/core/api-map.js",
                 "ext/js/core/event-dispatcher.js",
                 "ext/js/core/extension-error.js",
                 "ext/js/core/json.js",

diff --git a/benches/jsconfig.json b/benches/jsconfig.json
@@ -23,11 +23,18 @@
         },
         "types": [
             "chrome",
+            "dom-webcodecs",
             "firefox-webext-browser",
             "handlebars",
             "jszip",
             "parse5",
             "wanakana"
+        ],
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable",
+            "WebWorker"
         ]
     },
     "include": [

diff --git a/benches/translator.bench.js b/benches/translator.bench.js
@@ -21,8 +21,11 @@ import path from 'path';
 import {bench, describe} from 'vitest';
 import {parseJson} from '../dev/json.js';
 import {createTranslatorContext} from '../test/fixtures/translator-test.js';
+import {setupStubs} from '../test/utilities/database.js';
 import {createFindKanjiOptions, createFindTermsOptions} from '../test/utilities/translator.js';
 
+setupStubs();
+
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 const dictionaryName = 'Test Dictionary 2';
 const {translator} = await createTranslatorContext(path.join(dirname, '..', 'test', 'data/dictionaries/valid-dictionary1'), dictionaryName);

diff --git a/dev/build-libs.js b/dev/build-libs.js
@@ -20,13 +20,27 @@ import Ajv from 'ajv';
 import standaloneCode from 'ajv/dist/standalone/index.js';
 import esbuild from 'esbuild';
 import fs from 'fs';
+import {createRequire} from 'module';
 import path from 'path';
 import {fileURLToPath} from 'url';
 import {parseJson} from './json.js';
 
+const require = createRequire(import.meta.url);
+
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 const extDir = path.join(dirname, '..', 'ext');
 
+/**
+ * @param {string} out
+ */
+async function copyWasm(out) {
+    // copy from node modules '@resvg/resvg-wasm/index_bg.wasm' to out
+    const resvgWasmPath = path.dirname(require.resolve('@resvg/resvg-wasm'));
+    const wasmPath = path.join(resvgWasmPath, 'index_bg.wasm');
+    fs.copyFileSync(wasmPath, path.join(out, 'resvg.wasm'));
+}
+
+
 /**
  * @param {string} scriptPath
  */
@@ -79,4 +93,6 @@ export async function buildLibs() {
     const patchedModuleCode = "// @ts-nocheck\nimport {ucs2length} from './ucs2length.js';" + moduleCode.replaceAll('require("ajv/dist/runtime/ucs2length").default', 'ucs2length');
 
     fs.writeFileSync(path.join(extDir, 'lib/validate-schemas.js'), patchedModuleCode);
+
+    await copyWasm(path.join(extDir, 'lib'));
 }
diff --git a/dev/data/manifest-variants.json b/dev/data/manifest-variants.json
@@ -102,15 +102,16 @@
                 "resources": [
                     "popup.html",
                     "template-renderer.html",
-                    "js/*"
+                    "js/*",
+                    "lib/resvg.wasm"
                 ],
                 "matches": [
                     "<all_urls>"
                 ]
             }
         ],
         "content_security_policy": {
-            "extension_pages": "default-src 'self'; img-src blob: 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *",
+            "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; img-src blob: 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *",
             "sandbox": "sandbox allow-scripts; default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'unsafe-inline'"
         }
     },
@@ -238,7 +239,7 @@
                         "content_security_policy",
                         "extension_pages"
                     ],
-                    "value": "default-src 'self'; script-src 'self'; img-src blob: 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *"
+                    "value": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; img-src blob: 'self'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *"
                 },
                 {
                     "action": "set",

diff --git a/dev/data/structured-content-overrides.css b/dev/data/structured-content-overrides.css
@@ -28,23 +28,10 @@
 .gloss-image-link:hover {
     /* remove-rule */
 }
-.gloss-image-container-overlay {
-    font-size: initial;
-    line-height: initial;
-    color: initial;
-}
-.gloss-image-background {
-    background-color: currentColor;
-}
 :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
-:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,
-:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
-:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
+:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
     /* remove-rule */
 }
-.gloss-image-link-text {
-    line-height: initial;
-}
 .gloss-sc-thead,
 .gloss-sc-tfoot,
 .gloss-sc-th {

diff --git a/dev/jsconfig.json b/dev/jsconfig.json
@@ -53,7 +53,14 @@
             "assert",
             "css",
             "chrome",
-            "ajv"
+            "ajv",
+            "dom-webcodecs"
+        ],
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable",
+            "WebWorker"
         ]
     },
     "include": [

diff --git a/dev/lib/resvg-wasm.js b/dev/lib/resvg-wasm.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2023-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
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export * from '@resvg/resvg-wasm';
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -832,6 +832,8 @@ button.action-button:active {
 .entry {
     padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
     position: relative;
+    content-visibility: auto;
+    contain-intrinsic-height: auto 500px;
 }
 .entry+.entry {
     border-top: var(--thin-border-size) solid var(--light-border-color);

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
@@ -19,14 +19,6 @@
 /* Glossary images */
 .gloss-image-container {
     display: inline-block;
-    white-space: nowrap;
-    max-width: 100%;
-    max-height: 100vh;
-    position: relative;
-    vertical-align: top;
-    line-height: 0;
-    font-size: calc(1em / var(--font-size-no-units));
-    overflow: hidden;
 }
 .gloss-image-link[data-background=true]>.gloss-image-container {
     background-color: var(--gloss-image-background-color);
@@ -45,112 +37,34 @@
 .gloss-image-link[href]:hover {
     cursor: pointer;
 }
-.gloss-image-container-overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    font-size: calc(1em * var(--font-size-no-units));
-    line-height: var(--line-height);
-    display: table;
-    table-layout: fixed;
-    white-space: normal;
-    color: var(--text-color-light3);
-}
-.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
-    content: 'Image failed to load';
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    padding: 0.25em;
-}
-.gloss-image-background {
-    --image: none;
-
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--text-color);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center center;
-    -webkit-mask-mode: alpha;
-    -webkit-mask-size: contain;
-    -webkit-mask-image: var(--image);
-    mask-repeat: no-repeat;
-    mask-position: center center;
-    mask-mode: alpha;
-    mask-size: contain;
-    mask-image: var(--image);
-}
 .gloss-image {
     display: inline-block;
     vertical-align: top;
     object-fit: contain;
     border: none;
     outline: none;
-}
-.gloss-image-link[data-has-aspect-ratio=true] .gloss-image {
-    position: absolute;
-    left: 0;
-    top: 0;
     width: 100%;
-    height: 100%;
-}
-.gloss-image:not([src]) {
-    display: none;
 }
-.gloss-image-link[data-image-rendering=pixelated] .gloss-image,
-.gloss-image-link[data-image-rendering=pixelated] .gloss-image-background {
+.gloss-image-link[data-image-rendering=pixelated] .gloss-image {
     image-rendering: auto;
     image-rendering: -moz-crisp-edges;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: pixelated;
     image-rendering: crisp-edges;
 }
-.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
-.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
+.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
     image-rendering: auto;
     image-rendering: -moz-crisp-edges;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
 }
 :root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
-:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,
-:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
-:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
+:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
     image-rendering: auto;
 }
-.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
-    display: inline-block;
-    width: 0;
-    vertical-align: top;
-    font-size: 0;
-}
-.gloss-image-link-text {
-    display: none;
-    line-height: var(--line-height);
-}
-.gloss-image-link-text::before {
-    content: '[';
-}
-.gloss-image-link-text::after {
-    content: ']';
-}
-.gloss-image-description {
-    display: block;
-    white-space: pre-line;
-}
 
 .gloss-image-link[data-appearance=monochrome] .gloss-image {
-    opacity: 0;
-}
-.gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background {
-    display: none;
+    filter: grayscale(1);
 }
 
 .gloss-image-link[data-size-units=em] .gloss-image-container {
@@ -189,14 +103,6 @@
 :root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
     display: block;
 }
-.gloss-image-link[data-collapsed=true] .gloss-image-link-text,
-:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
-    display: inline;
-}
-.gloss-image-link[data-collapsed=true]~.gloss-image-description,
-:root[data-glossary-layout-mode=compact] .gloss-image-description {
-    display: inline;
-}
 
 
 /* Links */