#5078: support showing panel as popover

.eslintrc.js

@@ -62,6 +62,7 @@ module.exports = {
           "@testing-library/jest-dom",
           "webext-dynamic-content-scripts/including-active-tab", // Automatic registration
           "regenerator-runtime/runtime", // Automatic registration
+          "@/vendors/hoverintent/hoverintent", // JQuery plugin
         ],
       },
     ],

package.json

@@ -75,6 +75,7 @@
     "htmlparser2": "^8.0.0",
     "http-status-codes": "^2.1.4",
     "idb": "^7.1.1",
+    "iframe-resizer": "^4.3.2",
     "immer": "^9.0.18",
     "intro.js": "^6.0.0",
     "is-promise": "^4.0.0",
@@ -185,6 +186,7 @@
     "@types/gapi.client.sheets": "^4.0.20201030",
     "@types/google.picker": "0.0.39",
     "@types/holderjs": "^2.9.2",
+    "@types/iframe-resizer": "^3.5.9",
     "@types/intro.js": "^5.1.0",
     "@types/jest": "^29.2.6",
     "@types/jquery": "^3.5.6",

scripts/webpack.scripts.js

@@ -33,6 +33,7 @@ module.exports = mergeWithShared({
     // Exclude some troublesome/unnecessary dependencies
     "webextension-polyfill": "{}",
     rollbar: "{init(){}}",
+    "@/vendors/hoverintent/hoverintent": "{}",
   },
   resolve: {
     // Mock any modules that appear in __mocks__

src/baseRegistry.ts

@@ -90,12 +90,6 @@ export class Registry<
   }
 
   private notifyAll() {
-    console.debug(
-      "Notifying %d registry cache listener(s) for %s",
-      this.listeners.length,
-      [...this.kinds].join(", ")
-    );
-
     for (const listener of this.listeners) {
       listener.onCacheChanged();
     }

src/blocks/transformers/temporaryInfo/DisplayTemporaryInfo.ts

@@ -29,13 +29,17 @@ import {
 import { type PanelPayload } from "@/sidebar/types";
 import {
   stopWaitingForTemporaryPanels,
+  cancelTemporaryPanelsForExtension,
+  cancelTemporaryPanels,
   waitForTemporaryPanel,
 } from "@/blocks/transformers/temporaryInfo/temporaryPanelProtocol";
-import { CancelError, PropError } from "@/errors/businessErrors";
+import { BusinessError, CancelError, PropError } from "@/errors/businessErrors";
 import { getThisFrame } from "webext-messenger";
 import { showModal } from "@/blocks/transformers/ephemeralForm/modalUtils";
+import { IS_ROOT_AWARE_BRICK_PROPS } from "@/blocks/rootModeHelpers";
+import { showPopover } from "@/blocks/transformers/temporaryInfo/popoverUtils";
 
-type Location = "panel" | "modal";
+type Location = "panel" | "modal" | "popover";
 
 export async function createFrameSource(
   nonce: string,
@@ -62,6 +66,10 @@ class DisplayTemporaryInfo extends Transformer {
     );
   }
 
+  override async isRootAware(): Promise<boolean> {
+    return true;
+  }
+
   inputSchema: Schema = {
     type: "object",
     properties: {
@@ -76,10 +84,11 @@ class DisplayTemporaryInfo extends Transformer {
       },
       location: {
         type: "string",
-        enum: ["panel", "modal"],
+        enum: ["panel", "modal", "popover"],
         default: "panel",
         description: "The location of the information (default='panel')",
       },
+      ...IS_ROOT_AWARE_BRICK_PROPS,
     },
     required: ["body"],
   };
@@ -89,65 +98,101 @@ class DisplayTemporaryInfo extends Transformer {
       title,
       body: bodyPipeline,
       location = "panel",
+      isRootAware = false,
     }: BlockArg<{
       title: string;
       location: Location;
       body: PipelineExpression;
+      isRootAware: boolean;
     }>,
     {
       logger: {
         context: { extensionId },
       },
+      root,
       ctxt,
       runPipeline,
       runRendererPipeline,
     }: BlockOptions
   ): Promise<UnknownObject | null> {
     expectContext("contentScript");
 
+    const target = isRootAware ? root : document;
+
     const nonce = uuidv4();
     const controller = new AbortController();
 
-    const payload = (await runRendererPipeline(bodyPipeline?.__value__ ?? [], {
-      key: "body",
-      counter: 0,
-    })) as PanelPayload;
-
-    if (location === "panel") {
-      await ensureSidebar();
+    const payload = (await runRendererPipeline(
+      bodyPipeline?.__value__ ?? [],
+      {
+        key: "body",
+        counter: 0,
+      },
+      {},
+      target
+    )) as PanelPayload;
+
+    switch (location) {
+      case "panel": {
+        await ensureSidebar();
+
+        showTemporarySidebarPanel({
+          extensionId,
+          nonce,
+          heading: title,
+          payload,
+        });
+
+        window.addEventListener(
+          PANEL_HIDING_EVENT,
+          () => {
+            controller.abort();
+          },
+          {
+            signal: controller.signal,
+          }
+        );
+
+        controller.signal.addEventListener("abort", () => {
+          hideTemporarySidebarPanel(nonce);
+          void stopWaitingForTemporaryPanels([nonce]);
+        });
+
+        break;
+      }
 
-      showTemporarySidebarPanel({
-        extensionId,
-        nonce,
-        heading: title,
-        payload,
-      });
+      case "modal": {
+        const frameSource = await createFrameSource(nonce, location);
+        showModal(frameSource, controller);
+        break;
+      }
 
-      window.addEventListener(
-        PANEL_HIDING_EVENT,
-        () => {
-          controller.abort();
-        },
-        {
-          signal: controller.signal,
+      case "popover": {
+        const frameSource = await createFrameSource(nonce, location);
+        if (target === document) {
+          throw new BusinessError("Target must be an element for popover");
         }
-      );
 
-      controller.signal.addEventListener("abort", () => {
-        hideTemporarySidebarPanel(nonce);
-        void stopWaitingForTemporaryPanels([nonce]);
-      });
-    } else if (location === "modal") {
-      const frameSource = await createFrameSource(nonce, location);
-      showModal(frameSource, controller);
-    } else {
-      throw new PropError(
-        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- dynamic check for validated value
-        `Invalid location: ${location}`,
-        this.id,
-        "location",
-        location
-      );
+        await cancelTemporaryPanelsForExtension(extensionId);
+
+        const onHide = async () => {
+          await cancelTemporaryPanels([nonce]);
+        };
+
+        showPopover(frameSource, target as HTMLElement, onHide, controller);
+
+        break;
+      }
+
+      default: {
+        throw new PropError(
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions -- dynamic check for validated value
+          `Invalid location: ${location}`,
+          this.id,
+          "location",
+          location
+        );
+      }
     }
 
     let result = null;