From d9521c58bf9b9fef0c8b1248bf6ce8c69351fc16 Mon Sep 17 00:00:00 2001 From: Kuuuube <61125188+Kuuuube@users.noreply.github.com> Date: Wed, 19 Jun 2024 12:57:21 -0400 Subject: 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 --- ext/js/pages/action-popup-main.js | 2 ++ ext/js/pages/info-main.js | 32 ++++++++++++---------- ext/js/pages/permissions-main.js | 20 ++++++++------ ext/js/pages/quick-start-guide-main.js | 1 + .../pages/settings/settings-display-controller.js | 11 ++++++-- ext/js/pages/settings/settings-main.js | 13 +++++---- ext/js/pages/welcome-main.js | 20 ++++++++------ 7 files changed, 59 insertions(+), 40 deletions(-) (limited to 'ext/js/pages') 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} */ (document.querySelectorAll('.fab-button'))) { @@ -98,6 +98,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; 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'; -- cgit v1.2.3