From 46785b05507f66d7ca58cc08bc9ef2ded1360539 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 29 Jan 2022 02:46:12 +0300
Subject: [PATCH] use pageshow/pagehide events

...to avoid DOM update/scroll on switching tabs
---
 manage/events.js | 25 ++++++++-----------------
 manage/manage.js |  3 ++-
 2 files changed, 10 insertions(+), 18 deletions(-)

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());