aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKuuuube <61125188+Kuuuube@users.noreply.github.com>2024-06-19 12:57:21 -0400
committerGitHub <noreply@github.com>2024-06-19 16:57:21 +0000
commitd9521c58bf9b9fef0c8b1248bf6ce8c69351fc16 (patch)
treed21a6833422d87f0c0e4b83d2dbbd1dae092dd24
parent451bcab01fd591ec54b63af0fc7084dc9f37928b (diff)
Remove flickering on page loads, reduce flashbangs, fix settings and popup themes applying correctly (#1088)
* Pull theme from settings on page load * Make dark mode default * Fix flickering on load * Invert shadow for auto shadow theme * Revert "Make dark mode default" This reverts commit 4cdfc39686a9faa3ce7a620be23025f97816f5f9. * Improve page load times * Fix flicker on load for popup preview without breaking theming when auto is selected * Revert shadow invert
Diffstat
-rw-r--r--ext/action-popup.html2
-rw-r--r--ext/css/popup-preview.css5
-rw-r--r--ext/info.html2
-rw-r--r--ext/js/display/display.js12
-rw-r--r--ext/js/display/search-main.js2
-rw-r--r--ext/js/pages/action-popup-main.js2
-rw-r--r--ext/js/pages/info-main.js32
-rw-r--r--ext/js/pages/permissions-main.js20
-rw-r--r--ext/js/pages/quick-start-guide-main.js1
-rw-r--r--ext/js/pages/settings/settings-display-controller.js11
-rw-r--r--ext/js/pages/settings/settings-main.js13
-rw-r--r--ext/js/pages/welcome-main.js20
-rw-r--r--ext/permissions.html2
-rw-r--r--ext/quick-start-guide.html2
-rw-r--r--ext/search.html2
-rw-r--r--ext/settings.html2
-rw-r--r--ext/welcome.html2
17 files changed, 80 insertions, 52 deletions
diff --git a/ext/action-popup.html b/ext/action-popup.html
index bc5bdcb4..e160b0fc 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -14,7 +14,7 @@
<link rel="stylesheet" type="text/css" href="/css/action-popup.css">
<script src="/js/pages/action-popup-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<div id="mini">
<label class="toggle">
diff --git a/ext/css/popup-preview.css b/ext/css/popup-preview.css
index 48a1a091..68dfcbfe 100644
--- a/ext/css/popup-preview.css
+++ b/ext/css/popup-preview.css
@@ -26,7 +26,7 @@
--animation-duration: 0s;
--example-text-color: #333333;
- --background-color: #f8f9fa;
+ --background-color: rgba(0, 0, 0, 0);
}
:root[data-loaded=true] {
--animation-duration: 0.25s;
@@ -34,12 +34,11 @@
:root[data-theme=dark] {
--example-text-color: #d4d4d4;
- --background-color: #1e1e1e;
+ --background-color: rgba(0, 0, 0, 0);
}
html {
- transition: background-color var(--animation-duration) linear 0s, color var(--animation-duration) linear 0s;
background-color: var(--background-color);
}
html.dark {
diff --git a/ext/info.html b/ext/info.html
index 0d81fc15..faa46cbc 100644
--- a/ext/info.html
+++ b/ext/info.html
@@ -15,7 +15,7 @@
<link rel="stylesheet" type="text/css" href="/css/settings.css">
<script src="/js/pages/info-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<!-- Main content -->
<div class="content-outer"><div class="content">
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 386f456b..33ab44e4 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -1152,16 +1152,24 @@ export class Display extends EventDispatcher {
_setTheme(options) {
const {general} = options;
const {popupTheme} = general;
+ /** @type {string} */
+ let pageType = this._pageType;
try {
// eslint-disable-next-line no-underscore-dangle
- const pageTheme = this._history._current.state?.pageTheme;
+ const historyState = this._history._current.state;
+
+ const pageTheme = historyState?.pageTheme;
this._themeController.siteTheme = pageTheme ?? null;
+
+ if (historyState?.url?.includes('popup-preview.html')) {
+ pageType = 'popupPreview';
+ }
} catch (e) {
log.error(e);
}
this._themeController.theme = popupTheme;
this._themeController.outerTheme = general.popupOuterTheme;
- this._themeController.siteOverride = this._pageType === 'search';
+ this._themeController.siteOverride = pageType === 'search' || pageType === 'popupPreview';
this._themeController.updateTheme();
this.setCustomCss(general.customPopupCss);
}
diff --git a/ext/js/display/search-main.js b/ext/js/display/search-main.js
index c3c292a1..d3ef2539 100644
--- a/ext/js/display/search-main.js
+++ b/ext/js/display/search-main.js
@@ -51,6 +51,8 @@ await Application.main(true, async (application) => {
const searchDisplayController = new SearchDisplayController(display, displayAudio, searchPersistentStateController);
await searchDisplayController.prepare();
+ document.body.hidden = false;
+
display.initializeState();
document.documentElement.dataset.loaded = 'true';
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index 4137d5c3..d8eb87bc 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -328,4 +328,6 @@ await Application.main(true, async (application) => {
const displayController = new DisplayController(application.api);
await displayController.prepare();
+
+ document.body.hidden = false;
});
diff --git a/ext/js/pages/info-main.js b/ext/js/pages/info-main.js
index 079a8c3a..08abc12b 100644
--- a/ext/js/pages/info-main.js
+++ b/ext/js/pages/info-main.js
@@ -117,6 +117,23 @@ async function showDictionaryInfo(api) {
}
await Application.main(true, async (application) => {
+ const settingsController = new SettingsController(application);
+ await settingsController.prepare();
+
+ /** @type {ThemeController} */
+ const themeController = new ThemeController(document.documentElement);
+ themeController.prepare();
+ const optionsFull = await application.api.optionsGetFull();
+ const {profiles, profileCurrent} = optionsFull;
+ const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
+ if (primaryProfile !== null) {
+ themeController.theme = primaryProfile.options.general.popupTheme;
+ themeController.siteOverride = true;
+ themeController.updateTheme();
+ }
+
+ document.body.hidden = false;
+
const documentFocusController = new DocumentFocusController();
documentFocusController.prepare();
@@ -152,21 +169,6 @@ await Application.main(true, async (application) => {
void showAnkiConnectInfo(application.api);
void showDictionaryInfo(application.api);
- const settingsController = new SettingsController(application);
- await settingsController.prepare();
-
- /** @type {ThemeController} */
- const themeController = new ThemeController(document.documentElement);
- themeController.prepare();
- const optionsFull = await application.api.optionsGetFull();
- const {profiles, profileCurrent} = optionsFull;
- const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null;
- if (primaryProfile !== null) {
- themeController.theme = primaryProfile.options.general.popupTheme;
- themeController.siteOverride = true;
- themeController.updateTheme();
- }
-
const backupController = new BackupController(settingsController, null);
await backupController.prepare();
diff --git a/ext/js/pages/permissions-main.js b/ext/js/pages/permissions-main.js
index d27f2d79..9f37f11b 100644
--- a/ext/js/pages/permissions-main.js
+++ b/ext/js/pages/permissions-main.js
@@ -87,6 +87,17 @@ function setupPermissionsToggles() {
}
await Application.main(true, async (application) => {
+ const modalController = new ModalController();
+ modalController.prepare();
+
+ const settingsController = new SettingsController(application);
+ await settingsController.prepare();
+
+ const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
+ await settingsDisplayController.prepare();
+
+ document.body.hidden = false;
+
const documentFocusController = new DocumentFocusController();
documentFocusController.prepare();
@@ -115,12 +126,6 @@ await Application.main(true, async (application) => {
permissionsCheckboxes[i].checked = permissions[i];
}
- const modalController = new ModalController();
- modalController.prepare();
-
- const settingsController = new SettingsController(application);
- await settingsController.prepare();
-
const permissionsToggleController = new PermissionsToggleController(settingsController);
void permissionsToggleController.prepare();
@@ -130,9 +135,6 @@ await Application.main(true, async (application) => {
const persistentStorageController = new PersistentStorageController(application);
void persistentStorageController.prepare();
- const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
- settingsDisplayController.prepare();
-
await promiseTimeout(100);
document.documentElement.dataset.loaded = 'true';
diff --git a/ext/js/pages/quick-start-guide-main.js b/ext/js/pages/quick-start-guide-main.js
index 6a3cd39b..1ddce2f6 100644
--- a/ext/js/pages/quick-start-guide-main.js
+++ b/ext/js/pages/quick-start-guide-main.js
@@ -33,4 +33,5 @@ await Application.main(true, async (application) => {
themeController.siteOverride = true;
themeController.updateTheme();
}
+ document.body.hidden = false;
});
diff --git a/ext/js/pages/settings/settings-display-controller.js b/ext/js/pages/settings/settings-display-controller.js
index e179b835..a2150a15 100644
--- a/ext/js/pages/settings/settings-display-controller.js
+++ b/ext/js/pages/settings/settings-display-controller.js
@@ -47,9 +47,9 @@ export class SettingsDisplayController {
}
/** */
- prepare() {
+ async prepare() {
this._themeController.prepare();
- void this._updateTheme();
+ await this._setTheme();
const onFabButtonClick = this._onFabButtonClick.bind(this);
for (const fabButton of /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll('.fab-button'))) {
@@ -99,6 +99,13 @@ export class SettingsDisplayController {
}
/** */
+ async _setTheme() {
+ this._themeController.theme = (await this._settingsController.getOptions()).general.popupTheme;
+ this._themeController.siteOverride = true;
+ this._themeController.updateTheme();
+ }
+
+ /** */
async _updateTheme() {
const theme = this._themeDropdown?.value;
if (theme === 'site' || theme === 'light' || theme === 'dark' || theme === 'browser') {
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index a315eac4..ebb51276 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -91,6 +91,14 @@ await Application.main(true, async (application) => {
const settingsController = new SettingsController(application);
await settingsController.prepare();
+ const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
+ await settingsDisplayController.prepare();
+
+ document.body.hidden = false;
+
+ const popupPreviewController = new PopupPreviewController(settingsController);
+ popupPreviewController.prepare();
+
const persistentStorageController = new PersistentStorageController(application);
preparePromises.push(persistentStorageController.prepare());
@@ -124,9 +132,6 @@ await Application.main(true, async (application) => {
const ankiTemplatesController = new AnkiTemplatesController(application, settingsController, modalController, ankiController);
preparePromises.push(ankiTemplatesController.prepare());
- const popupPreviewController = new PopupPreviewController(settingsController);
- popupPreviewController.prepare();
-
const scanInputsController = new ScanInputsController(settingsController);
preparePromises.push(scanInputsController.prepare());
@@ -169,8 +174,6 @@ await Application.main(true, async (application) => {
const sortFrequencyDictionaryController = new SortFrequencyDictionaryController(settingsController);
preparePromises.push(sortFrequencyDictionaryController.prepare());
- const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
- settingsDisplayController.prepare();
await Promise.all(preparePromises);
diff --git a/ext/js/pages/welcome-main.js b/ext/js/pages/welcome-main.js
index 56a7e7d8..6771b31e 100644
--- a/ext/js/pages/welcome-main.js
+++ b/ext/js/pages/welcome-main.js
@@ -58,6 +58,17 @@ async function checkNeedsCustomTemplatesWarning() {
}
await Application.main(true, async (application) => {
+ const modalController = new ModalController();
+ modalController.prepare();
+
+ const settingsController = new SettingsController(application);
+ await settingsController.prepare();
+
+ const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
+ await settingsDisplayController.prepare();
+
+ document.body.hidden = false;
+
const documentFocusController = new DocumentFocusController();
documentFocusController.prepare();
@@ -74,12 +85,6 @@ await Application.main(true, async (application) => {
const preparePromises = [];
- const modalController = new ModalController();
- modalController.prepare();
-
- const settingsController = new SettingsController(application);
- await settingsController.prepare();
-
const genericSettingController = new GenericSettingController(settingsController);
preparePromises.push(setupGenericSettingsController(genericSettingController));
@@ -92,9 +97,6 @@ await Application.main(true, async (application) => {
const languagesController = new LanguagesController(settingsController);
preparePromises.push(languagesController.prepare());
- const settingsDisplayController = new SettingsDisplayController(settingsController, modalController);
- settingsDisplayController.prepare();
-
await Promise.all(preparePromises);
document.documentElement.dataset.loaded = 'true';
diff --git a/ext/permissions.html b/ext/permissions.html
index 31f30186..e8449e25 100644
--- a/ext/permissions.html
+++ b/ext/permissions.html
@@ -16,7 +16,7 @@
<link rel="stylesheet" type="text/css" href="/css/permissions.css">
<script src="/js/pages/permissions-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<!-- Main content -->
<div class="content-outer"><div class="content scrollbar">
diff --git a/ext/quick-start-guide.html b/ext/quick-start-guide.html
index f29e8909..cf4a5e2d 100644
--- a/ext/quick-start-guide.html
+++ b/ext/quick-start-guide.html
@@ -15,7 +15,7 @@
<link rel="stylesheet" type="text/css" href="/css/settings.css">
<script src="/js/pages/quick-start-guide-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<!-- Main content -->
<div class="content-outer"><div class="content scrollbar">
diff --git a/ext/search.html b/ext/search.html
index e1fecaae..281c0c07 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -18,7 +18,7 @@
<link rel="stylesheet" type="text/css" href="/css/search.css">
<script src="/js/display/search-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<div class="content-outer">
<div class="content">
diff --git a/ext/settings.html b/ext/settings.html
index 20472292..94f87148 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -16,7 +16,7 @@
<link rel="stylesheet" type="text/css" href="/css/display-pronunciation.css">
<script src="/js/pages/settings/settings-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<!-- Main content -->
<div class="content-outer"><div class="content scrollbar">
diff --git a/ext/welcome.html b/ext/welcome.html
index 44212026..a6bef957 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -15,7 +15,7 @@
<link rel="stylesheet" type="text/css" href="/css/settings.css">
<script src="/js/pages/welcome-main.js" type="module"></script>
</head>
-<body>
+<body hidden>
<!-- Main content -->
<div class="content-outer"><div class="content scrollbar">