[DevTools] Add React Element pane to browser Elements panel #35240
Conversation
eps1lon
force-pushed
the
sebbie/11-28-_devtools_add_react_element_pane_to_browser_elements_panel
branch
from
29c965a to
c63fec5
Compare
eps1lon
force-pushed
the
sebbie/11-28-_devtools_add_react_element_pane_to_browser_elements_panel
branch
2 times, most recently
from
eb49d8f to
98337e1
Compare
eps1lon
force-pushed
the
sebbie/11-28-_devtools_add_react_element_pane_to_browser_elements_panel
branch
from
98337e1 to
3bcc570
Compare
packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
Outdated
Show resolved
Hide resolved
packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
Outdated
Show resolved
Hide resolved
|
|
||
| const elementsPanel = chrome.devtools.panels.elements; | ||
| if (!elementsPanel || !elementsPanel.createSidebarPane) { | ||
| // TODO: Does Firefox support elements panel extensions? |
There was a problem hiding this comment.
Yeah, does it work on Firefox? It probably should - https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/elements
There was a problem hiding this comment.
C&P from the added sources pane which isn't supported in Firefox. The right compat table is https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ElementsPanel/createSidebarPane. So we should still leave the check in case we ever distribute this for Safari.
There was a problem hiding this comment.
Thanks for the reminder. It actually doesn't work in Firefox due to https://bugzilla.mozilla.org/show_bug.cgi?id=2010549
| inspectedElementPane = createdPane; | ||
|
|
||
| createdPane.setPage('panel.html'); | ||
| createdPane.setHeight('75px'); |
There was a problem hiding this comment.
Is it used as a min-height or how does this work? Might be worth double-checking the case when an element has a long list of props or hooks.
There was a problem hiding this comment.
Was copied from the added sources pane. Though it's not supported in Firefox: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels/ExtensionSidebarPane#browser_compatibility
I follow-up on this since whatever change we make, should affect all ExtensionSidebarPane.
There was a problem hiding this comment.
Actually will do this now since I can't test Firefox otherwise.
There was a problem hiding this comment.
Will do in a follow-up since Firefox support is blocked by https://bugzilla.mozilla.org/show_bug.cgi?id=2010549
eps1lon
deleted the
sebbie/11-28-_devtools_add_react_element_pane_to_browser_elements_panel
branch
2 participants
Closes #32574
Adds a dedicated pane for inspecting the React Element that rendered the inspected DOM element.
The main motivation is having an affordance to open the source where the DOM element is rendered.
CleanShot.2025-11-28.at.00.25.16.mp4
The new pane has three UX quirks:
I feel like this should trigger de-selection instead
[DevTools] Clear element inspection if host element not owned by any renderer is selected #35504
So far no fallback was good enough for the Components and Suspense tab because you couldn't escape React Elements in those tabs. In the browsers Elements panel it's much easier to do so a fallback is warranted. Probably fine to add the fallback in every context.
[DevTools] Show fallback in inspected element pane when no element is selected #35503
I don't have a solution for that yet. Maybe that's fine in the end and it's something you get used to. The main problem right now is that initial load ignores the users setting and hides host Elements by default. Fixing that particular bug might help this issue the most.
I'll work on 1 and 2 in follow-ups that should be handled before the next release. For 3, I want to investigate why the initial load always uses the default filter and if we can fix that.
Other follow-ups before release: