[DevTools] Use Popover API for TraceUpdates highlighting

packages/react-devtools-extensions/chrome/manifest.json

@@ -4,7 +4,7 @@
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "6.1.1",
   "version_name": "6.1.1",
-  "minimum_chrome_version": "102",
+  "minimum_chrome_version": "114",
   "icons": {
     "16": "icons/16-production.png",
     "32": "icons/32-production.png",

packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js

@@ -43,8 +43,30 @@ function drawNative(nodeToData: Map<HostInstance, Data>, agent: Agent) {
 }
 
 function drawWeb(nodeToData: Map<HostInstance, Data>) {
+  // if there are no nodes to draw, detach from top layer
+  if (nodeToData.size === 0) {
+    if (canvas !== null) {
+      try {
+        if (canvas.matches(':popover-open')) {
+          // $FlowFixMe[prop-missing]
+          // $FlowFixMe[incompatible-use]
+          canvas.hidePopover();
+        }
+      } catch (e) {}
+    }
+    return;
+  }
+
   if (canvas === null) {
     initialize();
+  } else {
+    try {
+      if (!canvas.matches(':popover-open')) {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        canvas.showPopover();
+      }
+    } catch (e) {}
   }
 
   const dpr = window.devicePixelRatio || 1;
@@ -191,7 +213,15 @@ function destroyNative(agent: Agent) {
 
 function destroyWeb() {
   if (canvas !== null) {
+    try {
+      // $FlowFixMe[prop-missing]
+      // $FlowFixMe[incompatible-use]
+      canvas.hidePopover();
+    } catch (e) {}
+
+    // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API and loses canvas nullability tracking
     if (canvas.parentNode != null) {
+      // $FlowFixMe[incompatible-call]: Flow doesn't track that canvas is non-null here
       canvas.parentNode.removeChild(canvas);
     }
     canvas = null;
@@ -204,6 +234,9 @@ export function destroy(agent: Agent): void {
 
 function initialize(): void {
   canvas = window.document.createElement('canvas');
+  // canvas.setAttribute('popover', 'manual');
+
+  // $FlowFixMe[incompatible-use]
   canvas.style.cssText = `
     xx-background-color: red;
     xx-opacity: 0.5;
@@ -213,9 +246,18 @@ function initialize(): void {
     position: fixed;
     right: 0;
     top: 0;
-    z-index: 1000000000;
+    background-color: transparent;
+    outline: none;
+    box-shadow: none;
+    border: none;
   `;
 
   const root = window.document.documentElement;
   root.insertBefore(canvas, root.firstChild);
+
+  try {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    canvas.showPopover();
+  } catch (e) {}
 }