[DevTools] Show fallback in inspected element pane when no element is selected

[everettbu]

Mirror of facebook/react#35503
Original author: eps1lon

---

Stacked on react/react#35240

We used to only show a blank pane when no element is selected. This was ok when we only showed the inspected element pane in the Components and Suspense tab since you couldn't escape inspection.

However, when showing the inspected element pane in the browsers Elements panel, you can select elements that aren't owned by React and therefore won't inspect an element. Now we show a configurable fallback.

For the inspected element pane in the browser's Elements panel, we display "No element rendered by React selected.".

Otherwise "No React element selected."

Styling and layout is similar to the loading fallback but not dimmed since the fallback for no selection may be visible indefinitely.

[greptile-apps]

Greptile Summary

Added configurable fallback messages when no React element is selected in the inspected element pane. Previously showed blank pane, now displays context-appropriate messages: "Selected element wasn't rendered with React." for browser Elements panel, "No React element selected. Select an element in the tree to inspect." for Components tab, and "No React element selected. Select a Suspense boundary in the minimap to inspect." for Suspense tab.

• Introduced required fallbackEmpty prop to InspectedElement component
• Added NoInspectionFallback CSS class for fallback styling (italic, padded, no dimming)
• Refactored border styling: moved border-left from InspectedElement to parent InspectedElementWrapper for consistent appearance across states
• All three usage sites properly provide fallback messages

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Clean implementation with no breaking changes. All usages of InspectedElement component properly updated with required prop. CSS refactoring is straightforward and improves consistency. Changes are well-scoped to UI presentation only.
• No files require special attention

Important Files Changed

Filename	Overview
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js	Added required fallbackEmpty prop to display message when no element is selected
packages/react-devtools-shared/src/devtools/views/Components/Components.js	Passed context-appropriate fallback message to InspectedElement component
packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js	Provided fallback message for browser Elements panel context

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

selectedSource prop is passed in DevTools.js line 387 but not defined in Props type or used in component

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-shared/src/devtools/views/InspectedElement/InspectedElementPane.js
Line: 21:21

Comment:
`selectedSource` prop is passed in `DevTools.js` line 387 but not defined in Props type or used in component

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.