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.

Sign up for GitHub

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

Remove flickering on page loads, reduce flashbangs, fix settings and popup themes applying correctly #1088

Merged
merged 8 commits into from
Jun 19, 2024
Merged

Remove flickering on page loads, reduce flashbangs, fix settings and popup themes applying correctly #1088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bd1b0d5
Pull theme from settings on page load
Kuuuube Jun 19, 2024
4cdfc39
Make dark mode default
Kuuuube Jun 19, 2024
3953668
Fix flickering on load
Kuuuube Jun 19, 2024
7e878ae
Invert shadow for auto shadow theme
Kuuuube Jun 19, 2024
14b85f5
Revert "Make dark mode default"
Kuuuube Jun 19, 2024
0ee25e3
Improve page load times
Kuuuube Jun 19, 2024
2bdf17a
Fix flicker on load for popup preview without breaking theming when a…
Kuuuube Jun 19, 2024
02e2ed0
Revert shadow invert
Kuuuube Jun 19, 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
2 changes: 1 addition & 1 deletion ext/action-popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 2 additions & 3 deletions ext/css/popup-preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,19 @@
--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;
}

: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 {
Expand Down
2 changes: 1 addition & 1 deletion ext/info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
12 changes: 10 additions & 2 deletions ext/js/display/display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 2 additions & 0 deletions ext/js/display/search-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 2 additions & 0 deletions ext/js/pages/action-popup-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,4 +328,6 @@ await Application.main(true, async (application) => {

const displayController = new DisplayController(application.api);
await displayController.prepare();

document.body.hidden = false;
});
32 changes: 17 additions & 15 deletions ext/js/pages/info-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand Down
20 changes: 11 additions & 9 deletions ext/js/pages/permissions-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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();

Expand All @@ -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';
Expand Down
1 change: 1 addition & 0 deletions ext/js/pages/quick-start-guide-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,5 @@ await Application.main(true, async (application) => {
themeController.siteOverride = true;
themeController.updateTheme();
}
document.body.hidden = false;
});
11 changes: 9 additions & 2 deletions ext/js/pages/settings/settings-display-controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'))) {
Expand Down Expand Up @@ -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;
Expand Down
13 changes: 8 additions & 5 deletions ext/js/pages/settings/settings-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());

Expand Down Expand Up @@ -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());

Expand Down Expand Up @@ -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);

Expand Down
20 changes: 11 additions & 9 deletions ext/js/pages/welcome-main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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));

Expand All @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion ext/permissions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ext/quick-start-guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ext/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ext/settings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ext/welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading