diff --git a/manage/events.js b/manage/events.js index 282cc1ba..f96359ff 100644 --- a/manage/events.js +++ b/manage/events.js @@ -225,23 +225,14 @@ async function handleUpdateForId(id, opts) { } /* exported handleVisibilityChange */ -function handleVisibilityChange() { - switch (document.visibilityState) { - // page restored without reloading via history navigation (currently only in FF) - // the catch here is that DOM may be outdated so we'll at least refresh the just edited style - // assuming other changes aren't important enough to justify making a complicated DOM sync - case 'visible': { - const id = sessionStore.justEditedStyleId; - if (id) { - handleUpdateForId(Number(id), {method: 'styleUpdated'}); - delete sessionStore.justEditedStyleId; - } - break; - } - // going away - case 'hidden': - history.replaceState({scrollY: window.scrollY}, document.title); - break; +function handleVisibilityChange(e) { + const id = Number(sessionStore.justEditedStyleId); + if (e.type === 'pageshow' && e.persisted && id) { + // TODO: update all elements in-place, not just the last edited style + handleUpdateForId(id, {method: 'styleUpdated'}); + delete sessionStore.justEditedStyleId; + } else if (e.type === 'pagehide') { + history.replaceState({scrollY: window.scrollY}, document.title); } } diff --git a/manage/manage.js b/manage/manage.js index c8621d36..86ae60c7 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -64,7 +64,8 @@ newUI.renderClass(); $('#injection-order-button').onclick = () => router.updateHash('#injection-order'); $('#sync-styles').onclick = () => router.updateHash('#stylus-options'); $$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external)); - document.on('visibilitychange', handleVisibilityChange); + window.on('pageshow', handleVisibilityChange); + window.on('pagehide', handleVisibilityChange); setupLivePrefs(); router.update(); prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());