Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve popup performance #1487

Merged
merged 34 commits into from
Dec 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
a48c49b
batch media lookups, eliminate base64ing
djahandarie Feb 19, 2024
22bcad1
properly abort if lookup is interrupted
djahandarie Feb 23, 2024
9e218ef
Begin to add performance marks
djahandarie Feb 17, 2024
8f15bbc
batch media lookups, eliminate base64ing
djahandarie Feb 19, 2024
34c5c15
[WIP] attempt to use OffscreenCanvas
djahandarie Feb 19, 2024
c493612
Add worker to offload some stuff off the main thread (except SVG rast…
djahandarie Oct 25, 2024
f0c469a
swap to rendering SVGs on worker thread using resvg-js/wasm
djahandarie Oct 25, 2024
a57d84d
further tweaking, add more debug logging
djahandarie Oct 27, 2024
33a087e
remove some unnecessary asyncification done earlier in the PR, and ad…
djahandarie Oct 27, 2024
b740d53
remove some dead code and add more logging
djahandarie Oct 27, 2024
621d6f7
make SW instruct offscreen to create port if non-existent
djahandarie Oct 27, 2024
6d0d6e6
make SW instruct offscreen to create port when SW restarts
djahandarie Oct 27, 2024
b15fec0
Add typed interfaces for most of the new message passing. Remove a bi…
djahandarie Oct 27, 2024
919d10c
fix image rendering in Anki, more performance marks
djahandarie Nov 3, 2024
7652018
redo all message passing to make it work on both Chrome and FF
djahandarie Nov 26, 2024
0d8fe2a
Merge remote-tracking branch 'origin/master' into performance-canvas
djahandarie Dec 8, 2024
8221ddc
begin cleanup
djahandarie Dec 10, 2024
c0b0ed5
Merge remote-tracking branch 'origin/master' into performance-canvas
djahandarie Dec 11, 2024
032487e
cleanup
djahandarie Dec 11, 2024
acab25a
make it work on FF133 which implements ImageDecoder but doesn't have …
djahandarie Dec 11, 2024
0d99789
remove console.logs
djahandarie Dec 11, 2024
0956c05
remove unused alt constant
djahandarie Dec 11, 2024
a8fb1b8
fix no-undef errors
djahandarie Dec 11, 2024
3c0cca9
fix ts errors
djahandarie Dec 11, 2024
9b58a5e
clean up css, make tests pass
djahandarie Dec 13, 2024
79527f6
fix benches
djahandarie Dec 13, 2024
b3de480
fix remaining test by doing some upgrades
djahandarie Dec 13, 2024
4ab4ad4
Merge remote-tracking branch 'origin/master' into performance-canvas
djahandarie Dec 17, 2024
2c5f42d
cleanup, improve clarity in some places
djahandarie Dec 17, 2024
65ec09d
Merge remote-tracking branch 'upstream/master' into safe-perf-perform…
Kuuuube Dec 17, 2024
e80b3c3
Replace performance with safePerformance
Kuuuube Dec 17, 2024
3622197
safePerformance for performance-canvas (#1487) (#1678)
djahandarie Dec 18, 2024
ec5607b
Cleanup to resolve some PR comments
djahandarie Dec 22, 2024
58c17c3
fix issues discovered by Kuuuube
djahandarie Dec 24, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
7 changes: 7 additions & 0 deletions benches/jsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,18 @@
},
"types": [
"chrome",
"dom-webcodecs",
"firefox-webext-browser",
"handlebars",
"jszip",
"parse5",
"wanakana"
],
"lib": [
"ES2022",
"DOM",
"DOM.Iterable",
"WebWorker"
]
},
"include": [
Expand Down
3 changes: 3 additions & 0 deletions benches/translator.bench.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
16 changes: 16 additions & 0 deletions dev/build-libs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -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'));
}
7 changes: 4 additions & 3 deletions dev/data/manifest-variants.json
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
}
},
Expand Down Expand Up @@ -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",
Expand Down
15 changes: 1 addition & 14 deletions dev/data/structured-content-overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 8 additions & 1 deletion dev/jsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,14 @@
"assert",
"css",
"chrome",
"ajv"
"ajv",
"dom-webcodecs"
],
"lib": [
"ES2022",
"DOM",
"DOM.Iterable",
"WebWorker"
]
},
"include": [
Expand Down
18 changes: 18 additions & 0 deletions dev/lib/resvg-wasm.js
Original file line number Diff line number Diff line change
@@ -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';
2 changes: 2 additions & 0 deletions ext/css/display.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
102 changes: 4 additions & 98 deletions ext/css/structured-content.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down
Loading
Loading