Fix missing hints on GitHub / support popover

GitHub uses native popover for some dropdown menus. They are always rendered in the “top layer” which wins even against the highest z-index. This PR puts Link Hints in the top layer as well, so it can win against everything.
lydell · Aug 17, 2024 · bfa90a6 · bfa90a6
1 parent 5a56c88
commit bfa90a6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/html/shadow-dom/index.html b/html/shadow-dom/index.html
@@ -32,7 +32,7 @@
         <host-element>
           <template shadowroot="closed">
             <a href="https://example.com/closed"
-              >Link inside declarative closed shadom DOM (not detectable)</a
+              >Link inside declarative closed shadow DOM (not detectable)</a
             >
           </template>
         </host-element>

diff --git a/html/top-layer/index.html b/html/top-layer/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>top layer</title>
+  </head>
+  <body>
+    <button popovertarget="popover-1">Open Popover 1</button>
+    <button popovertarget="popover-2">Open Popover 2</button>
+    <button onclick="dialog.showModal()">Open Dialog</button>
+
+    <div popover id="popover-1">
+      popover 1:
+      <a href="https://mozilla.org">link inside popover</a>
+    </div>
+
+    <div popover id="popover-2">
+      popover 2:
+      <a href="https://mozilla.org">link inside popover</a>
+    </div>
+
+    <dialog id="dialog">
+      <a href="https://mozilla.org">link inside modal dialog</a>
+    </dialog>
+  </body>
+</html>
diff --git a/src/renderer/Program.ts b/src/renderer/Program.ts
@@ -113,6 +113,9 @@ export default class RendererProgram {
     };
 
     const container = document.createElement("div");
+    // Enable popover mode, allowing `.showPopover()` to be called later.
+    // @ts-expect-error This property is missing in the TypeScript version we use.
+    container.popover = "manual";
     container.id = CONTAINER_ID;
     setStyles(container, CONTAINER_STYLES);
 
@@ -396,6 +399,12 @@ export default class RendererProgram {
     // inserted into the DOM.
     if (document.documentElement !== null) {
       document.documentElement.append(this.container.element);
+      // Put the container in the top level. This is needed to stay on top of
+      // popovers and modal dialogs. See:
+      // https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
+      // @ts-expect-error This method is missing in the TypeScript version we use.
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.container.element.showPopover();
     }
 
     if (this.css.parsed === undefined) {