Summary

Fixes #37534.

The element highlight overlay (used by the Inspect button and when hovering the Components tree) sits above the page with z-index: 10000000. A z-index can't stack anything above top layer elements, so when a modal <dialog> (opened with showModal()) is on screen, the overlay draws underneath it. When you inspect something inside the dialog, you get no highlight.

This makes the overlay container a popover="manual" element and calls showPopover() after mounting it, so the overlay also renders in the top layer. The TraceUpdates canvas already does the same thing (#32614). The default popover UA styles (border, padding, background, margin, overflow) are reset so the container itself stays an invisible 0×0 box. pointer-events: none keeps it from intercepting clicks. Environments without the Popover API keep the existing z-index behavior.

How did you test this change?

I bundled the real Overlay.js (flow types stripped) into a page that opens a modal <dialog>, then used Playwright with Edge to compare screenshots of the dialog area before and after calling overlay.inspect() on an element inside the dialog:

overlay visible over the dialog
container in top layer (:popover-open)
container size

main
no
no
1280px wide (block div)

this PR
yes
yes
0×0

• 
  yarn prettier, yarn linc
  


• 
  flow check for dom-node: no errors