[DevTools] Use Popover API for component inspect overlays #32703
+23
−3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yongsk0066
commented
Mar 21, 2025
Comment on lines
+274
to
+286
| 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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