Unavailable overlay for sidebar forms and temp panels on nav

src/sidebar/ConnectedSidebar.tsx

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import {
   addListener,
   removeListener,
@@ -40,14 +40,20 @@ import DefaultPanel from "@/sidebar/DefaultPanel";
 import { MOD_LAUNCHER } from "@/store/sidebar/constants";
 import { ensureExtensionPointsInstalled } from "@/contentScript/messenger/api";
 import { getReservedSidebarEntries } from "@/contentScript/messenger/strict/api";
-import { getConnectedTarget } from "@/sidebar/connectedTarget";
+import {
+  getConnectedTabIdMv3,
+  getConnectedTarget,
+} from "@/sidebar/connectedTarget";
 import useAsyncEffect from "use-async-effect";
 import activateLinkClickHandler from "@/activation/activateLinkClickHandler";
 import addFormPanel from "@/store/sidebar/thunks/addFormPanel";
 import addTemporaryPanel from "@/store/sidebar/thunks/addTemporaryPanel";
 import removeTemporaryPanel from "@/store/sidebar/thunks/removeTemporaryPanel";
 import { type AsyncDispatch } from "@/sidebar/store";
 import useEventListener from "@/hooks/useEventListener";
+import { WebNavigation } from "webextension-polyfill";
+import OnBeforeNavigateDetailsType = WebNavigation.OnBeforeNavigateDetailsType;
+import { isMV3 } from "@/mv3/api";
 
 /**
  * Listeners to update the Sidebar's Redux state upon receiving messages from the contentScript.
@@ -98,7 +104,21 @@ const ConnectedSidebar: React.VFC = () => {
   const listener = useConnectedListener();
   const sidebarIsEmpty = useSelector(selectIsSidebarEmpty);
 
-  // `useAsyncEffect` will run once on component mount since listener and formsRef don't change on renders.
+  const navigationListener = useCallback(
+    (details: OnBeforeNavigateDetailsType) => {
+      const { frameId, tabId } = details;
+      if (isMV3()) {
+        const connectedTabId = getConnectedTabIdMv3();
+        if (tabId === connectedTabId && frameId === 0) {
+          console.log("navigationListener:connectedTabId", connectedTabId);
+          dispatch(sidebarSlice.actions.markTemporaryPanelsAsUnavailable());
+        }
+      }
+    },
+    [dispatch],
+  );
+
+  // `useAsyncEffect` will run once on component mount since listeners and formsRef don't change on renders.
   // We could instead consider moving the initial panel logic to SidebarApp.tsx and pass the entries as the
   // initial state to the sidebarSlice reducer.
   useAsyncEffect(async () => {
@@ -132,10 +152,13 @@ const ConnectedSidebar: React.VFC = () => {
     // To avoid races with panel registration, listen after reserving the initial panels.
     addListener(listener);
 
+    browser.webNavigation.onBeforeNavigate.addListener(navigationListener);
+
     return () => {
       // NOTE: we don't need to cancel any outstanding forms on unmount because the FormTransformer is set up to watch
       // for PANEL_HIDING_EVENT. (and the only time this SidebarApp would unmount is if the sidebar was closing)
       removeListener(listener);
+      browser.webNavigation.onBeforeNavigate.removeListener(navigationListener);
     };
     // Excluding showModLauncher from deps. The flags detect shouldn't change after initial mount. And if they somehow do,
     // we don't want to attempt to change mod launcher panel visibility after initial mount.

src/sidebar/Tabs.module.scss

@@ -24,6 +24,7 @@
 
 .tabContainer {
   flex-wrap: nowrap;
+  position: relative;
 }
 
 .tabWrapper {

src/sidebar/Tabs.tsx

@@ -63,6 +63,7 @@ import { useHideEmptySidebar } from "@/sidebar/useHideEmptySidebar";
 import removeTemporaryPanel from "@/store/sidebar/thunks/removeTemporaryPanel";
 import { type AsyncDispatch } from "@/sidebar/store";
 import useOnMountOnly from "@/hooks/useOnMountOnly";
+import UnavailableOverlay from "@/sidebar/UnavailableOverlay";
 
 const ActivateModPanel = lazy(
   async () =>
@@ -350,6 +351,7 @@ const Tabs: React.FC = () => {
                   });
                 }}
               >
+                {form.isUnavailable && <UnavailableOverlay />}
                 <FormBody form={form} />
               </ErrorBoundary>
             </Tab.Pane>

src/sidebar/UnavailableOverlay.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import styles from "./unavailableOverlay.module.scss";
+import cx from "classnames";
+import { Button, Modal } from "react-bootstrap";
+
+const UnavailableOverlay = () => (
+  <div className={styles["unavailable-overlay"]}>
+    <div
+      className={cx("modal show position-static w-auto h-auto")}
+      style={{ display: "block", marginTop: "10vh" }}
+    >
+      <Modal.Dialog
+        size={"sm"}
+        className={cx(styles["modal-dialog"], "shadow text-center")}
+      >
+        <Modal.Header className={styles["modal-header"]}>
+          <strong>Panel not available on this page</strong>
+        </Modal.Header>
+
+        <Modal.Body className={styles["modal-body"]}>
+          <p>The browser navigated away from the page</p>
+          <Button variant="primary" className={styles["modal-button"]}>
+            Close
+          </Button>
+        </Modal.Body>
+      </Modal.Dialog>
+    </div>
+  </div>
+);
+
+export default UnavailableOverlay;

src/sidebar/connectedTarget.tsx

@@ -22,7 +22,7 @@ import { once } from "lodash";
 import { type TopLevelFrame, getTopLevelFrame } from "webext-messenger";
 import { getTabUrl } from "webext-tools";
 
-function getConnectedTabIdMv3(): number {
+export function getConnectedTabIdMv3(): number {
   expectContext("sidebar");
   const tabId = new URLSearchParams(window.location.search).get("tabId");
   assertNotNullish(

src/sidebar/unavailableOverlay.module.scss

@@ -0,0 +1,57 @@
+/*!
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.unavailable-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  backdrop-filter: blur(2.5px);
+  pointer-events: all;
+}
+
+.modal-dialog {
+  margin: 23px;
+  padding: 16px;
+  border-radius: 12px;
+  background: white;
+  border: 1px solid #cfcbd6;
+  > div {
+    border: 0;
+  }
+}
+
+.modal-header {
+  display: block;
+  padding-bottom: 0;
+  background: white;
+  border: 0;
+}
+
+.modal-body {
+  background: white;
+  border: 0;
+}
+
+.modal-button {
+  border-radius: 4px;
+}

src/store/sidebar/sidebarSlice.ts

@@ -217,6 +217,15 @@ const sidebarSlice = createSlice({
 
       fixActiveTabOnRemove(state, entry);
     },
+    markTemporaryPanelsAsUnavailable(state) {
+      for (const form of state.forms) {
+        form.isUnavailable = true;
+      }
+
+      for (const temporaryPanel of state.temporaryPanels) {
+        temporaryPanel.isUnavailable = true;
+      }
+    },
     updateTemporaryPanel(
       state,
       action: PayloadAction<{ panel: TemporaryPanelEntry }>,

src/testUtils/factories/sidebarEntryFactories.ts

@@ -17,9 +17,9 @@
 
 import { define, type FactoryConfig } from "cooky-cutter";
 import {
-  type ModActivationPanelEntry,
   type EntryType,
   type FormPanelEntry,
+  type ModActivationPanelEntry,
   type PanelEntry,
   type SidebarEntry,
   type StaticPanelEntry,
@@ -38,11 +38,13 @@ const activateModPanelEntryFactory = define<ModActivationPanelEntry>({
     },
   ],
   heading: (n: number) => `Activate Mods Test ${n}`,
+  isUnavailable: false,
 });
 const staticPanelEntryFactory = define<StaticPanelEntry>({
   type: "staticPanel",
   heading: (n: number) => `Static Panel ${n}`,
   key: (n: number) => `static-panel-${n}`,
+  isUnavailable: false,
 });
 const formDefinitionFactory = define<FormDefinition>({
   schema: () => ({
@@ -60,6 +62,7 @@ export const formEntryFactory = define<FormPanelEntry>({
     validateRegistryId(`@test/form-panel-recipe-test-${n}`),
   nonce: uuidSequence,
   form: formDefinitionFactory,
+  isUnavailable: false,
 });
 const temporaryPanelEntryFactory = define<TemporaryPanelEntry>({
   type: "temporaryPanel",
@@ -68,6 +71,7 @@ const temporaryPanelEntryFactory = define<TemporaryPanelEntry>({
   heading: (n: number) => `Temporary Panel Test ${n}`,
   payload: null,
   nonce: uuidSequence,
+  isUnavailable: false,
 });
 const panelEntryFactory = define<PanelEntry>({
   type: "panel",
@@ -78,6 +82,7 @@ const panelEntryFactory = define<PanelEntry>({
   payload: null,
   extensionPointId: (n: number) =>
     validateRegistryId(`@test/panel-extension-point-test-${n}`),
+  isUnavailable: false,
 });
 
 export function sidebarEntryFactory<T = PanelEntry>(

src/types/sidebarTypes.ts

@@ -111,6 +111,12 @@ type BasePanelEntry = {
    * The panel type.
    */
   type: EntryType;
+
+  /**
+   * Determines if the panel cannot be displayed for the current tab. Used
+   * to show an overlay over the panel to indicate it is unavailable.
+   */
+  isUnavailable?: boolean;
 };
 
 /**

webpack.config.mjs

@@ -203,7 +203,7 @@ const createConfig = (env, options) =>
         }),
 
       // Only notifies when watching. `zsh-notify` is suggested for the `build` script
-      options.watch &&
+      !isProd(options) &&
         process.env.DEV_NOTIFY !== "false" &&
         new WebpackBuildNotifierPlugin({
           title: "PB Extension",