From c864a2b0021f28a16904a2ab398489c9aaa0034e Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 02:14:12 +0700
Subject: [PATCH 01/12] Add `renderWidget`

---
 src/components/InvalidatedContextGate.tsx     | 32 +++++++++++++++----
 src/components/quickBar/QuickBarApp.tsx       | 22 ++++---------
 src/domConstants.ts                           |  4 ---
 src/starterBricks/quickBarExtension.test.ts   |  6 ++--
 .../quickbarProviderExtension.test.ts         | 14 +++-----
 src/utils/reactUtils.tsx                      | 32 +++++++++++++++++++
 6 files changed, 70 insertions(+), 40 deletions(-)
 create mode 100644 src/utils/reactUtils.tsx

diff --git a/src/components/InvalidatedContextGate.tsx b/src/components/InvalidatedContextGate.tsx
index 4903711e73..c6efb72527 100644
--- a/src/components/InvalidatedContextGate.tsx
+++ b/src/components/InvalidatedContextGate.tsx
@@ -20,18 +20,28 @@ import { Button } from "react-bootstrap";
 import useContextInvalidated from "@/hooks/useContextInvalidated";
 import useDocumentVisibility from "@/hooks/useDocumentVisibility";
 
-const InvalidatedContextGate: React.FunctionComponent<{
-  contextNameTitleCase: string;
+type ContextInvalidatedProps = {
   autoReload?: boolean;
-}> = ({ children, contextNameTitleCase, autoReload }) => {
-  const wasContextInvalidated = useContextInvalidated();
+  emptyOnInvalidation?: boolean;
+  contextNameTitleCase?: string;
+};
+
+const ContextInvalidated: React.FunctionComponent<ContextInvalidatedProps> = ({
+  autoReload,
+  emptyOnInvalidation,
+  contextNameTitleCase = "Page",
+}) => {
   // Only auto-reload if the document is in the background
   const isDocumentVisible = useDocumentVisibility();
-  if (wasContextInvalidated && autoReload && !isDocumentVisible) {
+  if (autoReload && !isDocumentVisible) {
     location.reload();
   }
 
-  return wasContextInvalidated ? (
+  if (emptyOnInvalidation) {
+    return null;
+  }
+
+  return (
     <div className="d-flex flex-column align-items-center justify-content-center">
       <p>
         PixieBrix was updated or restarted. Reload the{" "}
@@ -45,6 +55,16 @@ const InvalidatedContextGate: React.FunctionComponent<{
         Reload {contextNameTitleCase}
       </Button>
     </div>
+  );
+};
+
+const InvalidatedContextGate: React.FunctionComponent<
+  ContextInvalidatedProps
+> = ({ children, ...props }) => {
+  const wasContextInvalidated = useContextInvalidated();
+
+  return wasContextInvalidated ? (
+    <ContextInvalidated {...props} />
   ) : (
     <>{children}</>
   );
diff --git a/src/components/quickBar/QuickBarApp.tsx b/src/components/quickBar/QuickBarApp.tsx
index 70c4abf84c..11b1dc5c30 100644
--- a/src/components/quickBar/QuickBarApp.tsx
+++ b/src/components/quickBar/QuickBarApp.tsx
@@ -16,7 +16,6 @@
  */
 
 import React, { useEffect } from "react";
-import ReactDOM from "react-dom";
 import {
   KBarAnimator,
   KBarPortal,
@@ -30,10 +29,7 @@ import EmotionShadowRoot from "@/components/EmotionShadowRoot";
 import faStyleSheet from "@fortawesome/fontawesome-svg-core/styles.css?loadAsUrl";
 import { expectContext } from "@/utils/expectContext";
 import { once } from "lodash";
-import {
-  MAX_Z_INDEX,
-  PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS,
-} from "@/domConstants";
+import { MAX_Z_INDEX } from "@/domConstants";
 import useEventListener from "@/hooks/useEventListener";
 import { Stylesheets } from "@/components/Stylesheets";
 import selection from "@/utils/selectionController";
@@ -47,11 +43,11 @@ import defaultActions, {
   pageEditorAction,
 } from "@/components/quickBar/defaultActions";
 import quickBarRegistry from "@/components/quickBar/quickBarRegistry";
-import { onContextInvalidated } from "webext-events";
 import StopPropagation from "@/components/StopPropagation";
 import useScrollLock from "@/hooks/useScrollLock";
 import { flagOn } from "@/auth/featureFlagStorage";
 import useOnMountOnly from "@/hooks/useOnMountOnly";
+import { renderWidget } from "@/utils/reactUtils";
 
 /**
  * Set to true if the KBar should be displayed on initial mount (i.e., because it was triggered by the
@@ -126,6 +122,9 @@ const KBarComponent: React.FC = () => {
   // - hotkey: https://github.com/github/hotkey/blob/main/src/utils.ts#L1
   // - Salesforce: https://salesforce.stackexchange.com/questions/183771/disable-keyboard-shortcuts-in-lightning-experience
 
+  // TODO: Drop contentEditable stuff since we have <StopPropagation>
+  // TODO: Use <IsolatedComponent> instead of KBarPortal and EmotionShadowRoot
+
   return (
     <KBarPortal>
       <KBarPositioner
@@ -213,17 +212,8 @@ export const initQuickBarApp = once(async () => {
     quickBarRegistry.addAction(pageEditorAction);
   }
 
-  const container = document.createElement("div");
-  container.className = PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS;
-  document.body.prepend(container);
-  ReactDOM.render(<QuickBarApp />, container);
+  renderWidget(<QuickBarApp />);
   console.debug("Initialized quick bar");
-
-  onContextInvalidated.addListener(() => {
-    console.debug("Removed quick bar due to context invalidation");
-    ReactDOM.unmountComponentAtNode(container);
-    container.remove();
-  });
 });
 
 /**
diff --git a/src/domConstants.ts b/src/domConstants.ts
index 47181e3f8e..4b8b78944a 100644
--- a/src/domConstants.ts
+++ b/src/domConstants.ts
@@ -27,9 +27,6 @@ export const PANEL_FRAME_ID = "pixiebrix-extension";
 
 export const PIXIEBRIX_DATA_ATTR = "data-pb-uuid";
 
-export const PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS =
-  "pixiebrix-quickbar-container";
-
 export const PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS =
   "pixiebrix-tooltips-container";
 
@@ -46,7 +43,6 @@ export const EXTENSION_POINT_DATA_ATTR = "data-pb-extension-point";
 export const PRIVATE_ATTRIBUTES_SELECTOR = `
   #${PANEL_FRAME_ID},
   .${PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS},
-  .${PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS},
   .${PIXIEBRIX_NOTIFICATION_CLASS},
   [${PIXIEBRIX_DATA_ATTR}],
   [${EXTENSION_POINT_DATA_ATTR}]
diff --git a/src/starterBricks/quickBarExtension.test.ts b/src/starterBricks/quickBarExtension.test.ts
index a68d49fd5d..a9baa74e3a 100644
--- a/src/starterBricks/quickBarExtension.test.ts
+++ b/src/starterBricks/quickBarExtension.test.ts
@@ -109,7 +109,7 @@ describe("quickBarExtension", () => {
   it("quick bar smoke test", async () => {
     const user = userEvent.setup();
 
-    document.body.innerHTML = getDocument("<div></div>").body.innerHTML;
+    document.body.innerHTML = getDocument("<h1>Title</h1>").body.innerHTML;
 
     // Ensure default actions are registered
     await initQuickBarApp();
@@ -135,9 +135,7 @@ describe("quickBarExtension", () => {
     expect(rootReader.readCount).toBe(0);
 
     // QuickBar adds another div to the body
-    expect(document.body.innerHTML).toBe(
-      '<div class="pixiebrix-quickbar-container"></div><div></div>',
-    );
+    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
diff --git a/src/starterBricks/quickbarProviderExtension.test.ts b/src/starterBricks/quickbarProviderExtension.test.ts
index 22d13ea40f..c5a3f71b63 100644
--- a/src/starterBricks/quickbarProviderExtension.test.ts
+++ b/src/starterBricks/quickbarProviderExtension.test.ts
@@ -86,7 +86,7 @@ const extensionFactory = define<ResolvedModComponent<QuickBarProviderConfig>>({
 const rootReader = new RootReader();
 
 beforeAll(async () => {
-  const html = getDocument("<div></div>").body.innerHTML;
+  const html = getDocument("<h1>Title</h1>").body.innerHTML;
   document.body.innerHTML = html;
 
   // Ensure default actions are registered
@@ -129,9 +129,7 @@ describe("quickBarProviderExtension", () => {
     expect(rootReader.readCount).toBe(1);
 
     // QuickBar installation adds another div to the body
-    expect(document.body.innerHTML).toBe(
-      '<div class="pixiebrix-quickbar-container"></div><div></div>',
-    );
+    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
@@ -186,9 +184,7 @@ describe("quickBarProviderExtension", () => {
     expect(rootReader.readCount).toBe(1);
 
     // QuickBar installation adds another div to the body
-    expect(document.body.innerHTML).toBe(
-      '<div class="pixiebrix-quickbar-container"></div><div></div>',
-    );
+    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
@@ -199,9 +195,7 @@ describe("quickBarProviderExtension", () => {
     await tick();
 
     // Should be showing the QuickBar portal. The innerHTML doesn't contain the QuickBar actions at this point
-    expect(document.body.innerHTML).not.toBe(
-      '<div class="pixiebrix-quickbar-container"></div><div></div>',
-    );
+    expect(document.body.innerHTML).not.toBe("<h1>Title</h1>");
 
     // Getting an error here: make sure you apple `query.inputRefSetter`
     // await user.keyboard("abc");
diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
new file mode 100644
index 0000000000..fd5cd371b8
--- /dev/null
+++ b/src/utils/reactUtils.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 InvalidatedContextGate from "@/components/InvalidatedContextGate";
+import { render } from "react-dom";
+
+// TODO: Use createRoot(document.createDocumentFragment()) and root.unmount() when switching to React 18
+export function renderWidget(widget: JSX.Element): void {
+  const insertionPoint = document.createDocumentFragment();
+  render(
+    <InvalidatedContextGate emptyOnInvalidation>
+      {widget}
+    </InvalidatedContextGate>,
+    insertionPoint,
+  );
+  document.body.after(insertionPoint);
+}

From 6f7467272d2463b4c0d4f24e1e348b18000ebfa3 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 13:13:54 +0700
Subject: [PATCH 02/12] Revert QuickBar changes for now

---
 src/components/quickBar/QuickBarApp.tsx       | 22 ++++++++++++++-----
 src/domConstants.ts                           |  4 ++++
 src/starterBricks/quickBarExtension.test.ts   |  6 +++--
 .../quickbarProviderExtension.test.ts         | 14 ++++++++----
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/quickBar/QuickBarApp.tsx b/src/components/quickBar/QuickBarApp.tsx
index 11b1dc5c30..70c4abf84c 100644
--- a/src/components/quickBar/QuickBarApp.tsx
+++ b/src/components/quickBar/QuickBarApp.tsx
@@ -16,6 +16,7 @@
  */
 
 import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
 import {
   KBarAnimator,
   KBarPortal,
@@ -29,7 +30,10 @@ import EmotionShadowRoot from "@/components/EmotionShadowRoot";
 import faStyleSheet from "@fortawesome/fontawesome-svg-core/styles.css?loadAsUrl";
 import { expectContext } from "@/utils/expectContext";
 import { once } from "lodash";
-import { MAX_Z_INDEX } from "@/domConstants";
+import {
+  MAX_Z_INDEX,
+  PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS,
+} from "@/domConstants";
 import useEventListener from "@/hooks/useEventListener";
 import { Stylesheets } from "@/components/Stylesheets";
 import selection from "@/utils/selectionController";
@@ -43,11 +47,11 @@ import defaultActions, {
   pageEditorAction,
 } from "@/components/quickBar/defaultActions";
 import quickBarRegistry from "@/components/quickBar/quickBarRegistry";
+import { onContextInvalidated } from "webext-events";
 import StopPropagation from "@/components/StopPropagation";
 import useScrollLock from "@/hooks/useScrollLock";
 import { flagOn } from "@/auth/featureFlagStorage";
 import useOnMountOnly from "@/hooks/useOnMountOnly";
-import { renderWidget } from "@/utils/reactUtils";
 
 /**
  * Set to true if the KBar should be displayed on initial mount (i.e., because it was triggered by the
@@ -122,9 +126,6 @@ const KBarComponent: React.FC = () => {
   // - hotkey: https://github.com/github/hotkey/blob/main/src/utils.ts#L1
   // - Salesforce: https://salesforce.stackexchange.com/questions/183771/disable-keyboard-shortcuts-in-lightning-experience
 
-  // TODO: Drop contentEditable stuff since we have <StopPropagation>
-  // TODO: Use <IsolatedComponent> instead of KBarPortal and EmotionShadowRoot
-
   return (
     <KBarPortal>
       <KBarPositioner
@@ -212,8 +213,17 @@ export const initQuickBarApp = once(async () => {
     quickBarRegistry.addAction(pageEditorAction);
   }
 
-  renderWidget(<QuickBarApp />);
+  const container = document.createElement("div");
+  container.className = PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS;
+  document.body.prepend(container);
+  ReactDOM.render(<QuickBarApp />, container);
   console.debug("Initialized quick bar");
+
+  onContextInvalidated.addListener(() => {
+    console.debug("Removed quick bar due to context invalidation");
+    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
+  });
 });
 
 /**
diff --git a/src/domConstants.ts b/src/domConstants.ts
index 4b8b78944a..47181e3f8e 100644
--- a/src/domConstants.ts
+++ b/src/domConstants.ts
@@ -27,6 +27,9 @@ export const PANEL_FRAME_ID = "pixiebrix-extension";
 
 export const PIXIEBRIX_DATA_ATTR = "data-pb-uuid";
 
+export const PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS =
+  "pixiebrix-quickbar-container";
+
 export const PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS =
   "pixiebrix-tooltips-container";
 
@@ -43,6 +46,7 @@ export const EXTENSION_POINT_DATA_ATTR = "data-pb-extension-point";
 export const PRIVATE_ATTRIBUTES_SELECTOR = `
   #${PANEL_FRAME_ID},
   .${PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS},
+  .${PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS},
   .${PIXIEBRIX_NOTIFICATION_CLASS},
   [${PIXIEBRIX_DATA_ATTR}],
   [${EXTENSION_POINT_DATA_ATTR}]
diff --git a/src/starterBricks/quickBarExtension.test.ts b/src/starterBricks/quickBarExtension.test.ts
index a9baa74e3a..a68d49fd5d 100644
--- a/src/starterBricks/quickBarExtension.test.ts
+++ b/src/starterBricks/quickBarExtension.test.ts
@@ -109,7 +109,7 @@ describe("quickBarExtension", () => {
   it("quick bar smoke test", async () => {
     const user = userEvent.setup();
 
-    document.body.innerHTML = getDocument("<h1>Title</h1>").body.innerHTML;
+    document.body.innerHTML = getDocument("<div></div>").body.innerHTML;
 
     // Ensure default actions are registered
     await initQuickBarApp();
@@ -135,7 +135,9 @@ describe("quickBarExtension", () => {
     expect(rootReader.readCount).toBe(0);
 
     // QuickBar adds another div to the body
-    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
+    expect(document.body.innerHTML).toBe(
+      '<div class="pixiebrix-quickbar-container"></div><div></div>',
+    );
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
diff --git a/src/starterBricks/quickbarProviderExtension.test.ts b/src/starterBricks/quickbarProviderExtension.test.ts
index c5a3f71b63..22d13ea40f 100644
--- a/src/starterBricks/quickbarProviderExtension.test.ts
+++ b/src/starterBricks/quickbarProviderExtension.test.ts
@@ -86,7 +86,7 @@ const extensionFactory = define<ResolvedModComponent<QuickBarProviderConfig>>({
 const rootReader = new RootReader();
 
 beforeAll(async () => {
-  const html = getDocument("<h1>Title</h1>").body.innerHTML;
+  const html = getDocument("<div></div>").body.innerHTML;
   document.body.innerHTML = html;
 
   // Ensure default actions are registered
@@ -129,7 +129,9 @@ describe("quickBarProviderExtension", () => {
     expect(rootReader.readCount).toBe(1);
 
     // QuickBar installation adds another div to the body
-    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
+    expect(document.body.innerHTML).toBe(
+      '<div class="pixiebrix-quickbar-container"></div><div></div>',
+    );
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
@@ -184,7 +186,9 @@ describe("quickBarProviderExtension", () => {
     expect(rootReader.readCount).toBe(1);
 
     // QuickBar installation adds another div to the body
-    expect(document.body.innerHTML).toBe("<h1>Title</h1>");
+    expect(document.body.innerHTML).toBe(
+      '<div class="pixiebrix-quickbar-container"></div><div></div>',
+    );
 
     // :shrug: I'm not sure how to get the kbar to show using shortcuts in jsdom, so just toggle manually
     await user.keyboard("[Ctrl] k");
@@ -195,7 +199,9 @@ describe("quickBarProviderExtension", () => {
     await tick();
 
     // Should be showing the QuickBar portal. The innerHTML doesn't contain the QuickBar actions at this point
-    expect(document.body.innerHTML).not.toBe("<h1>Title</h1>");
+    expect(document.body.innerHTML).not.toBe(
+      '<div class="pixiebrix-quickbar-container"></div><div></div>',
+    );
 
     // Getting an error here: make sure you apple `query.inputRefSetter`
     // await user.keyboard("abc");

From 28519c3effb89a2dbec30a01d1e217c6a89cb517 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 14:34:26 +0700
Subject: [PATCH 03/12] Introduce `useAbortSignal`/`AbortSignalGate`

---
 src/components/AbortSignalGate.test.tsx | 47 +++++++++++++++++++++++++
 src/components/AbortSignalGate.tsx      | 29 +++++++++++++++
 src/hooks/useAbortSignal.test.ts        | 36 +++++++++++++++++++
 src/hooks/useAbortSignal.ts             | 38 ++++++++++++++++++++
 src/tsconfig.strictNullChecks.json      |  4 +++
 5 files changed, 154 insertions(+)
 create mode 100644 src/components/AbortSignalGate.test.tsx
 create mode 100644 src/components/AbortSignalGate.tsx
 create mode 100644 src/hooks/useAbortSignal.test.ts
 create mode 100644 src/hooks/useAbortSignal.ts

diff --git a/src/components/AbortSignalGate.test.tsx b/src/components/AbortSignalGate.test.tsx
new file mode 100644
index 0000000000..ace9d62353
--- /dev/null
+++ b/src/components/AbortSignalGate.test.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 { render, screen } from "@testing-library/react";
+import AbortSignalGate from "./AbortSignalGate";
+
+it("renders the children when active and hides them when aborted", () => {
+  const controller = new AbortController();
+  const { rerender } = render(
+    <AbortSignalGate signal={controller.signal}>
+      <div>Content</div>
+    </AbortSignalGate>,
+  );
+  expect(screen.getByText("Content")).toBeInTheDocument();
+
+  controller.abort();
+  rerender(
+    <AbortSignalGate signal={controller.signal}>
+      <div>Content</div>
+    </AbortSignalGate>,
+  );
+  expect(screen.queryByText("Content")).not.toBeInTheDocument();
+});
+
+it("does not render children when the signal is already aborted", () => {
+  render(
+    <AbortSignalGate signal={AbortSignal.abort()}>
+      <div>Content</div>
+    </AbortSignalGate>,
+  );
+  expect(screen.queryByText("Content")).not.toBeInTheDocument();
+});
diff --git a/src/components/AbortSignalGate.tsx b/src/components/AbortSignalGate.tsx
new file mode 100644
index 0000000000..fd312d8fab
--- /dev/null
+++ b/src/components/AbortSignalGate.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 useAbortSignal from "@/hooks/useAbortSignal";
+import React from "react";
+
+const AbortSignalGate: React.FunctionComponent<{ signal: AbortSignal }> = ({
+  signal,
+  children,
+}) => {
+  const aborted = useAbortSignal(signal);
+  return aborted ? null : <>{children}</>;
+};
+
+export default AbortSignalGate;
diff --git a/src/hooks/useAbortSignal.test.ts b/src/hooks/useAbortSignal.test.ts
new file mode 100644
index 0000000000..a7a074ee67
--- /dev/null
+++ b/src/hooks/useAbortSignal.test.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { renderHook } from "@testing-library/react-hooks";
+import useAbortSignal from "./useAbortSignal";
+
+it("returns the initial state of the signal", () => {
+  const active = renderHook(() => useAbortSignal(new AbortController().signal));
+  expect(active.result.current).toBe(false);
+
+  const aborted = renderHook(() => useAbortSignal(AbortSignal.abort()));
+  expect(aborted.result.current).toBe(true);
+});
+
+it("updates the state when the signal is aborted", () => {
+  const controller = new AbortController();
+  const { result } = renderHook(() => useAbortSignal(controller.signal));
+  expect(result.current).toBe(false);
+
+  controller.abort();
+  expect(result.current).toBe(true);
+});
diff --git a/src/hooks/useAbortSignal.ts b/src/hooks/useAbortSignal.ts
new file mode 100644
index 0000000000..72bf0943f7
--- /dev/null
+++ b/src/hooks/useAbortSignal.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { useEffect, useState } from "react";
+
+export default function useAbortSignal(signal: AbortSignal): boolean {
+  const [isAborted, setIsAborted] = useState(signal.aborted);
+  useEffect(() => {
+    if (signal.aborted) {
+      // No need to add an event listener if the signal is already aborted
+      return;
+    }
+
+    const handler = () => {
+      setIsAborted(true);
+    };
+
+    signal.addEventListener("abort", handler);
+    return () => {
+      signal.removeEventListener("abort", handler);
+    };
+  }, [signal]);
+  return isAborted;
+}
diff --git a/src/tsconfig.strictNullChecks.json b/src/tsconfig.strictNullChecks.json
index 78cbb25fa1..3163e3b8fe 100644
--- a/src/tsconfig.strictNullChecks.json
+++ b/src/tsconfig.strictNullChecks.json
@@ -176,6 +176,8 @@
     "./bricks/transformers/traverseElements.ts",
     "./bricks/transformers/url.ts",
     "./bricks/types.ts",
+    "./components/AbortSignalGate.test.tsx",
+    "./components/AbortSignalGate.tsx",
     "./components/AceEditor.tsx",
     "./components/AceEditorSync.tsx",
     "./components/Alert.tsx",
@@ -449,6 +451,8 @@
     "./hooks/logging.ts",
     "./hooks/useAsyncExternalStore.ts",
     "./hooks/useAsyncState.ts",
+    "./hooks/useAbortSignal.test.ts",
+    "./hooks/useAbortSignal.ts",
     "./hooks/useAuthorizationGrantFlow.ts",
     "./hooks/useAutoFocusConfiguration.ts",
     "./hooks/useBrowserIdentifier.ts",

From c60e2c6843c12dd4d89b08ab2dbdfc969b5eebfc Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 14:36:13 +0700
Subject: [PATCH 04/12] renderWidget: add support for signal and position

---
 src/utils/reactUtils.tsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
index fd5cd371b8..54dbc128f7 100644
--- a/src/utils/reactUtils.tsx
+++ b/src/utils/reactUtils.tsx
@@ -16,17 +16,35 @@
  */
 
 import React from "react";
-import InvalidatedContextGate from "@/components/InvalidatedContextGate";
 import { render } from "react-dom";
+import { mergeSignals } from "abort-utils";
+import { onContextInvalidated } from "webext-events";
+import AbortSignalGate from "@/components/AbortSignalGate";
+
+// TODO: When switching to React 18, use:
+// createRoot(document.createDocumentFragment())
+// signal.onabort = () => root.unmount()
+// instead of AbortSignalGate
+export function renderWidget(
+  widget: JSX.Element,
+  {
+    signal,
+    position = "after",
+  }: {
+    signal?: AbortSignal;
+    position?: "before" | "after";
+  } = {},
+): void {
+  if (signal) {
+    signal = mergeSignals(signal, onContextInvalidated.signal);
+  } else {
+    signal = onContextInvalidated.signal;
+  }
 
-// TODO: Use createRoot(document.createDocumentFragment()) and root.unmount() when switching to React 18
-export function renderWidget(widget: JSX.Element): void {
   const insertionPoint = document.createDocumentFragment();
   render(
-    <InvalidatedContextGate emptyOnInvalidation>
-      {widget}
-    </InvalidatedContextGate>,
+    <AbortSignalGate signal={signal}>{widget}</AbortSignalGate>,
     insertionPoint,
   );
-  document.body.after(insertionPoint);
+  document.body[position](insertionPoint);
 }

From 9fcb54d9fbe950f225f4159ca6de56b4289a844d Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 14:33:31 +0700
Subject: [PATCH 05/12] Simplify ContextInvalidatedGate

---
 src/components/InvalidatedContextGate.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/InvalidatedContextGate.tsx b/src/components/InvalidatedContextGate.tsx
index c6efb72527..3b100f52a3 100644
--- a/src/components/InvalidatedContextGate.tsx
+++ b/src/components/InvalidatedContextGate.tsx
@@ -22,14 +22,14 @@ import useDocumentVisibility from "@/hooks/useDocumentVisibility";
 
 type ContextInvalidatedProps = {
   autoReload?: boolean;
-  emptyOnInvalidation?: boolean;
-  contextNameTitleCase?: string;
+
+  /** The name to show on "Reload Context Name" button */
+  contextNameTitleCase: string;
 };
 
-const ContextInvalidated: React.FunctionComponent<ContextInvalidatedProps> = ({
+const InformationPanel: React.FunctionComponent<ContextInvalidatedProps> = ({
   autoReload,
-  emptyOnInvalidation,
-  contextNameTitleCase = "Page",
+  contextNameTitleCase,
 }) => {
   // Only auto-reload if the document is in the background
   const isDocumentVisible = useDocumentVisibility();
@@ -37,10 +37,6 @@ const ContextInvalidated: React.FunctionComponent<ContextInvalidatedProps> = ({
     location.reload();
   }
 
-  if (emptyOnInvalidation) {
-    return null;
-  }
-
   return (
     <div className="d-flex flex-column align-items-center justify-content-center">
       <p>
@@ -58,13 +54,18 @@ const ContextInvalidated: React.FunctionComponent<ContextInvalidatedProps> = ({
   );
 };
 
+/**
+ * A gate that shows an information panel with a reload button if the context was invalidated.
+ *
+ * Use `<AbortSignalGate signal={onContextInvalidated.signal}>` if you just want to unmount the children instead.
+ */
 const InvalidatedContextGate: React.FunctionComponent<
   ContextInvalidatedProps
 > = ({ children, ...props }) => {
   const wasContextInvalidated = useContextInvalidated();
 
   return wasContextInvalidated ? (
-    <ContextInvalidated {...props} />
+    <InformationPanel {...props} />
   ) : (
     <>{children}</>
   );

From e24b61a51eb72fb4317f5d1772116d02607090fe Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 14:37:17 +0700
Subject: [PATCH 06/12] renderWidget: use in `showModal()`

---
 src/contentScript/modalDom.tsx | 71 +++++++++++++---------------------
 1 file changed, 26 insertions(+), 45 deletions(-)

diff --git a/src/contentScript/modalDom.tsx b/src/contentScript/modalDom.tsx
index 647327b57c..5f9c83b64e 100644
--- a/src/contentScript/modalDom.tsx
+++ b/src/contentScript/modalDom.tsx
@@ -16,11 +16,10 @@
  */
 
 import React from "react";
-import { scrollbarWidth } from "@xobotyi/scrollbar-width";
-import { render, unmountComponentAtNode } from "react-dom";
-import { mergeSignals } from "abort-utils";
-import { onContextInvalidated } from "webext-events";
 import { expectContext } from "@/utils/expectContext";
+import { renderWidget } from "@/utils/reactUtils";
+import useScrollLock from "@/hooks/useScrollLock";
+import useAbortSignal from "@/hooks/useAbortSignal";
 
 // This cannot be moved to globals.d.ts because it's a module augmentation
 // https://stackoverflow.com/a/42085876/288906
@@ -29,41 +28,16 @@ declare module "react" {
     onClose?: ReactEventHandler<T> | undefined;
   }
 }
-/**
- * Show a modal with the given URL in the host page
- * @param url the URL to show
- * @param controller AbortController to cancel the modal
- * @param onOutsideClick callback to call when the user clicks outside the modal
- */
-export function showModal({
-  url,
-  controller,
-  onOutsideClick,
-}: {
+
+const IframeModal: React.VFC<{
   url: URL;
   controller: AbortController;
   onOutsideClick?: () => void;
-}): void {
-  // In React apps, should use React modal component
-  expectContext("contentScript");
-
-  // Using `<style>` will avoid overriding the site’s inline styles
-  const style = document.createElement("style");
+}> = ({ url, controller, onOutsideClick }) => {
+  const aborted = useAbortSignal(controller.signal);
+  useScrollLock(!aborted);
 
-  const scrollableRoot =
-    window.getComputedStyle(document.body).overflowY === "scroll"
-      ? "body"
-      : "html";
-  style.textContent += `${scrollableRoot} {overflow: hidden !important}`; // Disable scrollbar
-
-  // Preserve space initially taken by scrollbar
-  style.textContent += `html {padding-inline-end: ${scrollbarWidth()}px  !important}`;
-
-  const container = document.createElement("div");
-  const shadowRoot = container.attachShadow({ mode: "closed" });
-  document.body.append(container, style);
-  render(
-    // TODO: Wrap into separate component and use useScrollLock hook
+  return aborted ? null : (
     <dialog
       onClose={() => {
         controller.abort();
@@ -99,16 +73,23 @@ export function showModal({
           colorScheme: "normal", // Match parent color scheme #1650
         }}
       />
-    </dialog>,
-    shadowRoot,
+    </dialog>
   );
+};
 
-  mergeSignals(controller, onContextInvalidated.signal).addEventListener(
-    "abort",
-    () => {
-      unmountComponentAtNode(container);
-      style.remove();
-      container.remove();
-    },
-  );
+/**
+ * Show a modal with the given URL in the host page
+ * @param url the page to show in the modal
+ * @param controller AbortController to cancel the modal
+ * @param onOutsideClick callback to call when the user clicks outside the modal
+ */
+export function showModal(props: {
+  url: URL;
+  controller: AbortController;
+  onOutsideClick?: () => void;
+}): void {
+  // In React apps, you should use the React modal component
+  expectContext("contentScript");
+
+  renderWidget(<IframeModal {...props} />);
 }

From 10128a055ca699bb998450305afba46e03914a0d Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 14:37:28 +0700
Subject: [PATCH 07/12] renderWidget: use in `Toaster`

---
 src/domConstants.ts  |  3 ---
 src/utils/notify.tsx | 16 +++-------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/domConstants.ts b/src/domConstants.ts
index 47181e3f8e..0a14cb3a0c 100644
--- a/src/domConstants.ts
+++ b/src/domConstants.ts
@@ -33,8 +33,6 @@ export const PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS =
 export const PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS =
   "pixiebrix-tooltips-container";
 
-export const PIXIEBRIX_NOTIFICATION_CLASS = "pixiebrix-notifier-container";
-
 export const EXTENSION_POINT_DATA_ATTR = "data-pb-extension-point";
 
 /**
@@ -47,7 +45,6 @@ export const PRIVATE_ATTRIBUTES_SELECTOR = `
   #${PANEL_FRAME_ID},
   .${PIXIEBRIX_TOOLTIPS_CONTAINER_CLASS},
   .${PIXIEBRIX_QUICK_BAR_CONTAINER_CLASS},
-  .${PIXIEBRIX_NOTIFICATION_CLASS},
   [${PIXIEBRIX_DATA_ATTR}],
   [${EXTENSION_POINT_DATA_ATTR}]
 `;
diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
index 93d1c89bf3..ff6f0052a5 100644
--- a/src/utils/notify.tsx
+++ b/src/utils/notify.tsx
@@ -18,7 +18,6 @@
 import styles from "./notify.module.scss";
 
 import React from "react";
-import { render } from "react-dom";
 import {
   type DefaultToastOptions,
   toast,
@@ -26,10 +25,7 @@ import {
   type ToastOptions,
 } from "react-hot-toast";
 import { uuidv4 } from "@/types/helpers";
-import {
-  NOTIFICATIONS_Z_INDEX,
-  PIXIEBRIX_NOTIFICATION_CLASS,
-} from "@/domConstants";
+import { NOTIFICATIONS_Z_INDEX } from "@/domConstants";
 import reportError from "@/telemetry/reportError";
 import { type Except, type RequireAtLeastOne } from "type-fest";
 import { getErrorMessage } from "@/errors/errorHelpers";
@@ -40,6 +36,7 @@ import { SIDEBAR_WIDTH_CSS_PROPERTY } from "@/contentScript/sidebarDomController
 import ErrorIcon from "@/icons/error.svg?loadAsComponent";
 import WarningIcon from "@/icons/warning.svg?loadAsComponent";
 import type { Notification, NotificationType } from "@/utils/notificationTypes";
+import { renderWidget } from "./reactUtils";
 
 const MINIMUM_NOTIFICATION_DURATION_MS = 2000;
 
@@ -107,13 +104,6 @@ function getMessageDisplayTimeMs(message: string): number {
 }
 
 export function initToaster(): void {
-  const root = document.createElement("div");
-  root.className = PIXIEBRIX_NOTIFICATION_CLASS; // Used to visually identify the element in the DOM
-  // This style cannot be on containerStyle because it overrides some of its props there
-  root.setAttribute("style", "all: initial");
-
-  document.body.append(root);
-
   const containerStyle: React.CSSProperties = {
     zIndex: NOTIFICATIONS_Z_INDEX,
     fontFamily: "sans-serif",
@@ -125,7 +115,7 @@ export function initToaster(): void {
     success: toastStyle.success,
     error: toastStyle.error,
   };
-  render(<Toaster {...{ containerStyle, toastOptions }} />, root);
+  renderWidget(<Toaster {...{ containerStyle, toastOptions }} />);
 }
 
 export function showNotification({

From 7576889cd195bb5d278dc31b6c62990327e797c3 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 17:16:16 +0700
Subject: [PATCH 08/12] React 17 doesn't fully support fragments as root

---
 src/contentScript/modalDom.tsx     |  6 +++-
 src/hooks/useAbortSignal.ts        | 32 ++++++++-----------
 src/hooks/useContextInvalidated.ts | 12 ++-----
 src/utils/notify.tsx               | 35 +++++++++-----------
 src/utils/reactUtils.tsx           | 51 ++++++++++++++++--------------
 5 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/src/contentScript/modalDom.tsx b/src/contentScript/modalDom.tsx
index 5f9c83b64e..67d60b8347 100644
--- a/src/contentScript/modalDom.tsx
+++ b/src/contentScript/modalDom.tsx
@@ -91,5 +91,9 @@ export function showModal(props: {
   // In React apps, you should use the React modal component
   expectContext("contentScript");
 
-  renderWidget(<IframeModal {...props} />);
+  renderWidget({
+    name: "iframe-modal",
+    widget: <IframeModal {...props} />,
+    signal: props.controller.signal,
+  });
 }
diff --git a/src/hooks/useAbortSignal.ts b/src/hooks/useAbortSignal.ts
index 72bf0943f7..875ce0836e 100644
--- a/src/hooks/useAbortSignal.ts
+++ b/src/hooks/useAbortSignal.ts
@@ -15,24 +15,20 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim";
 
 export default function useAbortSignal(signal: AbortSignal): boolean {
-  const [isAborted, setIsAborted] = useState(signal.aborted);
-  useEffect(() => {
-    if (signal.aborted) {
-      // No need to add an event listener if the signal is already aborted
-      return;
-    }
-
-    const handler = () => {
-      setIsAborted(true);
-    };
-
-    signal.addEventListener("abort", handler);
-    return () => {
-      signal.removeEventListener("abort", handler);
-    };
-  }, [signal]);
-  return isAborted;
+  return useSyncExternalStore(
+    (callback: () => void) => {
+      const unsubscribe = new AbortController();
+      signal.addEventListener("abort", callback, {
+        signal: unsubscribe.signal,
+        once: true,
+      });
+      return () => {
+        unsubscribe.abort();
+      };
+    },
+    () => signal.aborted,
+  );
 }
diff --git a/src/hooks/useContextInvalidated.ts b/src/hooks/useContextInvalidated.ts
index f6e2379720..fea9663b31 100644
--- a/src/hooks/useContextInvalidated.ts
+++ b/src/hooks/useContextInvalidated.ts
@@ -15,15 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useSyncExternalStore } from "use-sync-external-store/shim";
-import { onContextInvalidated, wasContextInvalidated } from "webext-events";
-
-function subscribe(callback: () => void) {
-  const unsubscribe = new AbortController();
-  onContextInvalidated.addListener(callback, { signal: unsubscribe.signal });
-  return unsubscribe.abort.bind(unsubscribe);
-}
+import { onContextInvalidated } from "webext-events";
+import useAbortSignal from "./useAbortSignal";
 
 export default function useContextInvalidated(): boolean {
-  return useSyncExternalStore(subscribe, wasContextInvalidated);
+  return useAbortSignal(onContextInvalidated.signal);
 }
diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
index ff6f0052a5..b4470f3c84 100644
--- a/src/utils/notify.tsx
+++ b/src/utils/notify.tsx
@@ -18,12 +18,7 @@
 import styles from "./notify.module.scss";
 
 import React from "react";
-import {
-  type DefaultToastOptions,
-  toast,
-  Toaster,
-  type ToastOptions,
-} from "react-hot-toast";
+import { toast, Toaster, type ToastOptions } from "react-hot-toast";
 import { uuidv4 } from "@/types/helpers";
 import { NOTIFICATIONS_Z_INDEX } from "@/domConstants";
 import reportError from "@/telemetry/reportError";
@@ -74,8 +69,10 @@ const getIcon = (
   color: string,
 ) => <Icon style={{ height: 24, color, flex: "0 0 24px" }} />;
 
+// Override for built-in toasts
+// These colors match react-hot-toast’s status icons
 // eslint-disable-next-line local-rules/persistBackgroundData -- Static
-const toastStyle: ToastStyle = {
+const toastOptions: ToastStyle = {
   success: {
     style: {
       border: "solid 2px #61d345",
@@ -95,6 +92,12 @@ const toastStyle: ToastStyle = {
   },
 };
 
+// eslint-disable-next-line local-rules/persistBackgroundData -- Constant
+const containerStyle = {
+  zIndex: NOTIFICATIONS_Z_INDEX,
+  fontFamily: "sans-serif",
+} satisfies React.CSSProperties;
+
 function getMessageDisplayTimeMs(message: string): number {
   const wpm = 100; // 180 is the average words read per minute, make it slower
   return Math.max(
@@ -104,18 +107,10 @@ function getMessageDisplayTimeMs(message: string): number {
 }
 
 export function initToaster(): void {
-  const containerStyle: React.CSSProperties = {
-    zIndex: NOTIFICATIONS_Z_INDEX,
-    fontFamily: "sans-serif",
-  };
-
-  // Override for built-in toasts
-  const toastOptions: DefaultToastOptions = {
-    // These colors match react-hot-toast’s status icons
-    success: toastStyle.success,
-    error: toastStyle.error,
-  };
-  renderWidget(<Toaster {...{ containerStyle, toastOptions }} />);
+  renderWidget({
+    name: "notifications",
+    widget: <Toaster {...{ containerStyle, toastOptions }} />,
+  });
 }
 
 export function showNotification({
@@ -162,7 +157,7 @@ export function showNotification({
 
     case "warning": {
       // eslint-disable-next-line security/detect-object-injection -- Filtered
-      toast(component, merge(options, toastStyle[type]));
+      toast(component, merge(options, toastOptions[type]));
       break;
     }
 
diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
index 54dbc128f7..cf3d20f286 100644
--- a/src/utils/reactUtils.tsx
+++ b/src/utils/reactUtils.tsx
@@ -15,36 +15,41 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from "react";
-import { render } from "react-dom";
+import { render, unmountComponentAtNode } from "react-dom";
 import { mergeSignals } from "abort-utils";
 import { onContextInvalidated } from "webext-events";
-import AbortSignalGate from "@/components/AbortSignalGate";
 
-// TODO: When switching to React 18, use:
-// createRoot(document.createDocumentFragment())
-// signal.onabort = () => root.unmount()
-// instead of AbortSignalGate
-export function renderWidget(
-  widget: JSX.Element,
-  {
-    signal,
-    position = "after",
-  }: {
-    signal?: AbortSignal;
-    position?: "before" | "after";
-  } = {},
-): void {
+export function renderWidget({
+  widget,
+  name,
+  signal,
+  position = "after",
+}: {
+  widget: JSX.Element;
+  /** Used to visually identify the element in the dev tools. One word, no "pixiebrix-" */
+  name: string;
+  signal?: AbortSignal;
+  position?: "before" | "after";
+}): void {
   if (signal) {
     signal = mergeSignals(signal, onContextInvalidated.signal);
   } else {
     signal = onContextInvalidated.signal;
   }
 
-  const insertionPoint = document.createDocumentFragment();
-  render(
-    <AbortSignalGate signal={signal}>{widget}</AbortSignalGate>,
-    insertionPoint,
-  );
-  document.body[position](insertionPoint);
+  // TODO: When switching to React 18, use document.createDocumentFragment()
+  // React DOM 17 supports rendering into fragments but then DOM events don't work at all.
+  // This will let us leave no trace in the DOM when the widget is unmounted.
+  const root = document.createElement("div");
+  root.setAttribute("pixiebrix", name);
+  root.setAttribute("style", "all: initial");
+
+  // Attach to document *before* rendering, because some effects might need it (e.g. dialogElement.showModal())
+  document.body[position](root);
+  render(widget, root);
+
+  signal.addEventListener("abort", () => {
+    root.remove();
+    unmountComponentAtNode(root);
+  });
 }

From 062ce3ca5d609d091b7985083d1c0338d4ed1d4e Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 17:32:04 +0700
Subject: [PATCH 09/12] strictNullChecks

---
 src/tsconfig.strictNullChecks.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tsconfig.strictNullChecks.json b/src/tsconfig.strictNullChecks.json
index 3163e3b8fe..34ddf7aa70 100644
--- a/src/tsconfig.strictNullChecks.json
+++ b/src/tsconfig.strictNullChecks.json
@@ -820,6 +820,7 @@
     "./utils/postMessage.ts",
     "./utils/preventNativeFormSubmission.ts",
     "./utils/promiseUtils.ts",
+    "./utils/reactUtils.tsx",
     "./utils/registryUtils.ts",
     "./utils/sanitize.ts",
     "./utils/schemaUtils.ts",

From ee5cf328ab39431bb7a85a4ea48261cd8864e892 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Thu, 4 Apr 2024 17:55:16 +0700
Subject: [PATCH 10/12] Self-review

---
 src/components/AbortSignalGate.tsx |  3 +++
 src/utils/notify.tsx               |  2 +-
 src/utils/reactUtils.tsx           | 38 +++++++++++++++++++++++++-----
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/AbortSignalGate.tsx b/src/components/AbortSignalGate.tsx
index fd312d8fab..4520eb9849 100644
--- a/src/components/AbortSignalGate.tsx
+++ b/src/components/AbortSignalGate.tsx
@@ -18,6 +18,9 @@
 import useAbortSignal from "@/hooks/useAbortSignal";
 import React from "react";
 
+/**
+ * Render children until the signal is aborted
+ */
 const AbortSignalGate: React.FunctionComponent<{ signal: AbortSignal }> = ({
   signal,
   children,
diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
index b4470f3c84..d85f458055 100644
--- a/src/utils/notify.tsx
+++ b/src/utils/notify.tsx
@@ -92,7 +92,7 @@ const toastOptions: ToastStyle = {
   },
 };
 
-// eslint-disable-next-line local-rules/persistBackgroundData -- Constant
+// eslint-disable-next-line local-rules/persistBackgroundData -- Static
 const containerStyle = {
   zIndex: NOTIFICATIONS_Z_INDEX,
   fontFamily: "sans-serif",
diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
index cf3d20f286..14accdc1a8 100644
--- a/src/utils/reactUtils.tsx
+++ b/src/utils/reactUtils.tsx
@@ -19,15 +19,37 @@ import { render, unmountComponentAtNode } from "react-dom";
 import { mergeSignals } from "abort-utils";
 import { onContextInvalidated } from "webext-events";
 
+/**
+ * Render a React component in the document, with defaults that reduce conflicts.
+ * It's automatically removed on context invalidated.
+ *
+ * @param widget The React component to render.
+ * @param name A name used to visually identify the widget in the dev tools.
+ * @param signal An signal that will abort the remove the widget when aborted.
+ * @param position The method to use on `document.body` to attach the widget (e.g. "before" -> `document.body.before()`)
+ *
+ * @example
+ *   renderWidget({
+ *     name: "MyWidget",
+ *     widget: <MyWidget />,
+ *   });
+ *
+ * @example
+ *   renderWidget({
+ *     name: "notifications",
+ *     widget: <Toast message="Oopsie" />,
+ *     signal: AbortSignal.timeout(1000),
+ *     position: "before",
+ *   });
+ */
 export function renderWidget({
-  widget,
   name,
+  widget,
   signal,
   position = "after",
 }: {
-  widget: JSX.Element;
-  /** Used to visually identify the element in the dev tools. One word, no "pixiebrix-" */
   name: string;
+  widget: JSX.Element;
   signal?: AbortSignal;
   position?: "before" | "after";
 }): void {
@@ -37,12 +59,16 @@ export function renderWidget({
     signal = onContextInvalidated.signal;
   }
 
+  if (signal.aborted) {
+    return;
+  }
+
   // TODO: When switching to React 18, use document.createDocumentFragment()
   // React DOM 17 supports rendering into fragments but then DOM events don't work at all.
   // This will let us leave no trace in the DOM when the widget is unmounted.
-  const root = document.createElement("div");
-  root.setAttribute("pixiebrix", name);
-  root.setAttribute("style", "all: initial");
+  const root = document.createElement("pixiebrix-widget"); // Custom element to avoid CSS conflicts
+  root.setAttribute("pb-name", name); // For identification in the dev tools
+  root.setAttribute("style", "display: block; all: initial");
 
   // Attach to document *before* rendering, because some effects might need it (e.g. dialogElement.showModal())
   document.body[position](root);

From a6de9654476418e0dd3f9cee30c8001e149d9e4f Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Mon, 8 Apr 2024 21:56:48 +0700
Subject: [PATCH 11/12] Update package-lock.json

---
 package-lock.json                         | 4 ++--
 src/components/InvalidatedContextGate.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a16bb316d5..608d23ae09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -277,8 +277,8 @@
         "yaml-loader": "^0.8.1"
       },
       "engines": {
-        "node": "20.5.1",
-        "npm": "10.2.5"
+        "node": "20.12.0",
+        "npm": "10.5.0"
       }
     },
     "eslint-plugin-pixiebrix-extension": {
diff --git a/src/components/InvalidatedContextGate.tsx b/src/components/InvalidatedContextGate.tsx
index 2a68ef70b5..6d4712751a 100644
--- a/src/components/InvalidatedContextGate.tsx
+++ b/src/components/InvalidatedContextGate.tsx
@@ -38,7 +38,7 @@ const InformationPanel: React.FunctionComponent<ContextInvalidatedProps> = ({
       // If you reload too soon, Chrome might not be ready to serve the page yet
       // TODO: Poll the page until it's ready instead of a timeout. Then auto-reload by default
       location.reload();
-    }, 500);
+    }, 1000);
   }
 
   return (

From 88e004b47869fbff2491351c86a7f2b8729a4f13 Mon Sep 17 00:00:00 2001
From: Federico Brigante <me@fregante.com>
Date: Mon, 8 Apr 2024 22:11:37 +0700
Subject: [PATCH 12/12] Notifications: `keepAfterInvalidation`

---
 src/utils/notify.tsx     |  4 ++++
 src/utils/reactUtils.tsx | 16 ++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/utils/notify.tsx b/src/utils/notify.tsx
index d85f458055..78a071a7d3 100644
--- a/src/utils/notify.tsx
+++ b/src/utils/notify.tsx
@@ -109,6 +109,10 @@ function getMessageDisplayTimeMs(message: string): number {
 export function initToaster(): void {
   renderWidget({
     name: "notifications",
+    // We want to keep the notifications on the page because they might
+    // inform the user of the context invalidation.
+    // In the future we might want to still drop the widget after a minute or so.
+    keepAfterInvalidation: true,
     widget: <Toaster {...{ containerStyle, toastOptions }} />,
   });
 }
diff --git a/src/utils/reactUtils.tsx b/src/utils/reactUtils.tsx
index 14accdc1a8..50d6fe73e1 100644
--- a/src/utils/reactUtils.tsx
+++ b/src/utils/reactUtils.tsx
@@ -47,19 +47,23 @@ export function renderWidget({
   widget,
   signal,
   position = "after",
+  keepAfterInvalidation = false,
 }: {
   name: string;
   widget: JSX.Element;
   signal?: AbortSignal;
   position?: "before" | "after";
+  keepAfterInvalidation?: boolean;
 }): void {
-  if (signal) {
-    signal = mergeSignals(signal, onContextInvalidated.signal);
-  } else {
-    signal = onContextInvalidated.signal;
+  if (!keepAfterInvalidation) {
+    if (signal) {
+      signal = mergeSignals(signal, onContextInvalidated.signal);
+    } else {
+      signal = onContextInvalidated.signal;
+    }
   }
 
-  if (signal.aborted) {
+  if (signal?.aborted) {
     return;
   }
 
@@ -74,7 +78,7 @@ export function renderWidget({
   document.body[position](root);
   render(widget, root);
 
-  signal.addEventListener("abort", () => {
+  signal?.addEventListener("abort", () => {
     root.remove();
     unmountComponentAtNode(root);
   });