Rollup merge of #93253 - jsha:theme-on-show, r=GuillaumeGomez

Update theme on pageshow event

When a user goes forward or back, the page may be rendered from the back/forward cache (https://web.dev/bfcache/) rather than from scratch. If they have changed theme in the meantime, that means seeing an incorrect theme on the page they went forward or back to. The `pageshow` event fires on such navigations, so we can update the theme based on that event.

Demo: https://rustdoc.crud.net/jsha/theme-on-show/std/string/trait.ToString.html

r? `@GuillaumeGomez`
This commit is contained in:
Matthias Krüger 2022-01-24 12:29:57 +01:00 committed by GitHub
commit ee35ed3e1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -216,6 +216,15 @@ var updateSystemTheme = (function() {
};
})();
function switchToSavedTheme() {
switchTheme(
window.currentTheme,
window.mainTheme,
getSettingValue("theme") || "light",
false
);
}
if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
// update the preferred dark theme if the user is already using a dark theme
// See https://github.com/rust-lang/rust/pull/77809#issuecomment-707875732
@ -228,10 +237,20 @@ if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
// call the function to initialize the theme at least once!
updateSystemTheme();
} else {
switchTheme(
window.currentTheme,
window.mainTheme,
getSettingValue("theme") || "light",
false
);
switchToSavedTheme();
}
// If we navigate away (for example to a settings page), and then use the back or
// forward button to get back to a page, the theme may have changed in the meantime.
// But scripts may not be re-loaded in such a case due to the bfcache
// (https://web.dev/bfcache/). The "pageshow" event triggers on such navigations.
// Use that opportunity to update the theme.
// We use a setTimeout with a 0 timeout here to put the change on the event queue.
// For some reason, if we try to change the theme while the `pageshow` event is
// running, it sometimes fails to take effect. The problem manifests on Chrome,
// specifically when talking to a remote website with no caching.
window.addEventListener("pageshow", function(ev) {
if (ev.persisted) {
setTimeout(switchToSavedTheme, 0);
}
});