[DevTools] Use Popover API for component inspect overlays #32703
Conversation
| this.rects.forEach(rect => { | ||
| if (!rect.node.matches(':popover-open')) { | ||
| // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API | ||
| // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API | ||
| rect.node.showPopover(); | ||
| } | ||
| }); | ||
|
|
||
| if (!this.tip.tip.matches(':popover-open')) { | ||
| // $FlowFixMe[prop-missing]: Flow doesn't recognize Popover API | ||
| // $FlowFixMe[incompatible-use]: Flow doesn't recognize Popover API | ||
| this.tip.tip.showPopover(); | ||
| } |
There was a problem hiding this comment.
I thought hidePopover was unnecessary in this case because the element is completely removed from the DOM during the remove phase.
|
Hi @hoxyq , I've also applied the Popover API changes to the component inspector overlays and created a separate PR for it. |
Enhance the Components tab's element highlighting feature to use the Popover API for top layer rendering. This ensures highlight overlays always appear above other content including dialogs, tooltips, and other top layer elements.
yongsk0066
force-pushed
the
feature/devtools-overlay-toplayer
branch
from
3e283e3 to
3aaf292
Compare
|
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
github-actions
bot
added
the
Resolution: Stale
|
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you! |
2 participants
Following the Popover API integration in #32614, this PR adds the same capability to Component Inspector highlighting in React DevTools.
Summary
When selecting a component in the Components tab, the highlighting overlays currently appear behind elements that use the browser's top-layer (such as elements or components using the Popover API). This makes it difficult to see component structure and dimensions when they are inside or behind top-layer elements.
This change modifies the Overlay.js module to use the Popover API, ensuring that component highlighting always appears above all other content, including elements in the browser's top-layer. The implementation centrally manages popover controls and follows the same pattern as the recently merged TraceUpdates PR for consistency.
How did you test this change?
I tested this change in the following ways:
All functionality works as expected, with component highlighting now correctly appearing on top of all content, including top-layer elements.
demo-page
demo-repo
AS-IS
overlay_as_is.mov
TO-BE
overlay_to_be.mov