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 now
notices the stored record change and takes the new network from it,
holding the lock, inside a save. It then leaves the page as a switch in
Settings does: the stack is cut, every screen counts as not yet
rendered, and the screen on top is drawn again. The cut and the redraw
are now two functions in the Settings view that both paths call. A
record already on the popup's network, such as its own Settings switch,
changes nothing. The popup never switches the network itself.

Model: opus-5-5

tests/support/storageStub.js

@@ -18,7 +18,9 @@
 // a storage stub by hand.
 
 // One storage area: get, set and remove over its own store, cloning both ways.
-function makeArea(store, tick) {
+// `changed` is handed what each set or remove changed, in the shape
+// storage.onChanged reports it.
+function makeArea(store, tick, changed) {
     const get = jest.fn(async (key) => {
         tick();
         if (key === undefined || key === null) return structuredClone(store);
@@ -34,14 +36,25 @@ function makeArea(store, tick) {
 
     const set = jest.fn(async (items) => {
         tick();
+        const changes = {};
         for (const k of Object.keys(items)) {
+            changes[k] = structuredClone({
+                oldValue: store[k],
+                newValue: items[k],
+            });
             store[k] = structuredClone(items[k]);
         }
+        changed(changes);
     });
 
     const remove = jest.fn(async (key) => {
         tick();
-        for (const k of Array.isArray(key) ? key : [key]) delete store[k];
+        const changes = {};
+        for (const k of Array.isArray(key) ? key : [key]) {
+            changes[k] = { oldValue: store[k] };
+            delete store[k];
+        }
+        changed(changes);
     });
 
     return { get, set, remove };
@@ -54,12 +67,22 @@ function makeArea(store, tick) {
 function makeStorageStub(initial, onOp) {
     const store = initial ? structuredClone(initial) : {};
     const tick = onOp || (() => {});
-    const local = makeArea(store, tick);
+    // storage.onChanged: after a set or remove has finished, every listener is
+    // called with what it changed and the area's name, as the browser calls
+    // them for a write by any page or the background.
+    const listeners = [];
+    const announce = (areaName) => (changes) => {
+        Promise.resolve().then(() => {
+            for (const fn of listeners) fn(structuredClone(changes), areaName);
+        });
+    };
+    const local = makeArea(store, tick, announce("local"));
 
     return {
         // Drop this straight in as chrome.storage.
         local,
-        session: makeArea({}, tick),
+        session: makeArea({}, tick, announce("session")),
+        onChanged: { addListener: (fn) => listeners.push(fn) },
         get: local.get,
         set: local.set,
         remove: local.remove,
@@ -71,7 +94,9 @@ function makeStorageStub(initial, onOp) {
                 ? structuredClone(store)
                 : structuredClone(store[key]),
         // Seed or replace a record without going through the module under
-        // test — for standing in as "another page wrote this".
+        // test — for standing in as "another page wrote this". Nothing is
+        // announced to storage.onChanged, so it also stands in for the time
+        // before the browser tells this page of such a write.
         write: (key, value) => {
             store[key] = structuredClone(value);
         },