fix: an open popup follows a network switch the background saves (closes #650)

When the background saves a network switch after the user approves a
site's request, or another popup page saves one, an open popup takes the
new network from the stored record inside a save, holding the lock, and
checks the record once at start-up for a switch saved before it
listened. The network it takes is not counted as the popup's own change,
even when that save fails to write. It then leaves the page as a switch
in Settings does. A switch in Settings is now made inside its own save
too, so one picked while a follow waits for the lock is made after it.
The popup never switches the network itself.

Model: opus-5-5

src/popup/index.js

@@ -5,12 +5,14 @@ const {
     state,
     saveState,
     onSaveFailure,
+    takeStoredNetwork,
     loadState,
 } = require("../shared/state");
 const { StateUnusableError } = require("../shared/stateSchema");
 const { log, setRuntimeDebug } = require("../shared/log");
 const { refreshPrices } = require("../shared/prices");
 const { refreshBalances } = require("../shared/balances");
+const { clearPopupCaches } = require("../shared/chainSwitch");
 const {
     $,
     showView,
@@ -22,6 +24,7 @@ const {
 } = require("./views/helpers");
 const { applyTheme } = require("./theme");
 const {
+    onStorageChanged,
     tabsGetCurrent,
     tabsGetZoom,
     windowsGetCurrent,
@@ -72,12 +75,13 @@ let refreshTimer = null;
 // lock, its results are copied onto the address records in `state` only if the
 // network it ran on is still the active one, on this page and in the stored
 // record; the background's switch, after the user approves a site's request,
-// changes only the stored record. A switch while the refresh ran cleared every
-// address's balances (applyChainSwitchFields() in
-// src/shared/chainSwitchFields.js), and the previous network's must not come
-// back over them (https://git.eeqj.de/sneak/AutistMask/issues/577). A dropped
-// refresh is not recorded as done. Results are copied by address, so an address
-// added or removed meanwhile is left as it is.
+// reaches this page only after the stored record (followNetworkSwitch() below).
+// A switch while the refresh ran cleared every address's balances
+// (applyChainSwitchFields() in src/shared/chainSwitchFields.js), and the
+// previous network's must not come back over them
+// (https://git.eeqj.de/sneak/AutistMask/issues/577). A dropped refresh is not
+// recorded as done. Results are copied by address, so an address added or
+// removed meanwhile is left as it is.
 async function doRefreshAndRender() {
     if (refreshInFlight) return;
     refreshInFlight = true;
@@ -147,6 +151,7 @@ const ctx = {
     renderWalletList,
     doRefreshAndRender,
     startRefresh,
+    restoreView,
     pageClosed: pageClosed.signal,
     showAddWalletView: () => {
         pushCurrentView();
@@ -214,6 +219,28 @@ function fallbackView() {
     showView("main");
 }
 
+// When the background saves a network switch, once the user approves a site's
+// request, or another popup page saves one, this page follows the stored
+// record. It takes the network the record names as a save reads it, holding
+// the lock, so no later save of this page writes the previous network back, and
+// then leaves the page as a switch in Settings leaves it. This page's own
+// switch in Settings is made under the lock as well (onChainSwitch() in
+// src/shared/chainSwitch.js), so a record naming a network other than this
+// page's always holds a switch saved elsewhere, and a switch the user picks
+// here while this waits for the lock is made after it.
+async function followNetworkSwitch() {
+    let switched = false;
+    // A failed save is reported by saveState() itself: see onSaveFailure().
+    await saveState((stored) => {
+        if (stored.networkId === state.networkId) return false;
+        settings.cutViewStack();
+        takeStoredNetwork(stored);
+        clearPopupCaches();
+        switched = true;
+    }).catch(() => {});
+    if (switched) settings.showNewNetwork();
+}
+
 // The background opens the approval window as wide as the page, but the
 // browser counts the window's frame in that width, and a screen taller than
 // the window takes a vertical scrollbar out of it too. So once the screen is
@@ -358,6 +385,17 @@ async function init() {
     settingsAddToken.init(ctx);
     deleteAddress.init(ctx);
 
+    // Only a record naming a network other than this page's is followed: the
+    // one this page's own switch in Settings saves names the network it
+    // already has, and a record naming none is no switch.
+    onStorageChanged((changes) => {
+        const written = changes.autistmask && changes.autistmask.newValue;
+        if (!written || !written.networkId) return;
+        if (written.networkId !== state.networkId) followNetworkSwitch();
+    });
+    // A switch saved since loadState() above, before there was a listener.
+    followNetworkSwitch();
+
     if (!state.hasWallet) {
         showView("welcome");
     } else {