[DevTools] Show fallback in inspected element pane when no element is selected #35503
Conversation
github-actions
bot
added
the
React Core Team
| padding: 0.25rem; | ||
| color: var(--color-dimmer); | ||
| font-style: italic; | ||
| border-left: 1px solid var(--color-border); |
There was a problem hiding this comment.
Placing the border here made the border only span a single line. Now the border is one the whole container while also not being duplicated if the parent already defines a border. This makes composition easier with regards to border drawing.
| return ( | ||
| <div className={styles.InspectedElement}> | ||
| <div className={styles.TitleRow} /> | ||
| <div className={styles.NoInspectionFallback}>{fallbackEmpty}</div> |
There was a problem hiding this comment.
We also show the loading fallback below the title row.
eps1lon
force-pushed
the
sebbie/01-13-_devtools_show_fallback_in_inspected_element_pane_when_no_element_is_selected
branch
from
952f8ee to
51d62c9
Compare
eps1lon
force-pushed
the
sebbie/01-13-_devtools_show_fallback_in_inspected_element_pane_when_no_element_is_selected
branch
from
51d62c9 to
2bc6bf4
Compare
| <div className={styles.InspectedElementPane}> | ||
| <InspectedElement | ||
| actionButtons={!hideSettings && <SettingsModalContextToggle />} | ||
| fallbackEmpty={'No element rendered by React selected.'} |
There was a problem hiding this comment.
As of right now, Chrome forces DOM element selection? In other words, you can't deselect an element, and when you open the panel, it preselect some element?
So if there is always a selection, maybe we could rephrase it to something like "Selected element wasn't rendered with React."?
There was a problem hiding this comment.
Yeah. I was trying to convey the same thing but your suggestion is less ambiguous.
| <InspectedElementErrorBoundary> | ||
| <InspectedElement /> | ||
| <InspectedElement | ||
| fallbackEmpty={'No React element selected.'} |
There was a problem hiding this comment.
Maybe we could leave a suggestion to the user here, something like "Select an element in the tree to inspect."
eps1lon
force-pushed
the
sebbie/01-13-_devtools_show_fallback_in_inspected_element_pane_when_no_element_is_selected
branch
from
2bc6bf4 to
8e640ec
Compare
eps1lon
force-pushed
the
sebbie/01-13-_devtools_show_fallback_in_inspected_element_pane_when_no_element_is_selected
branch
from
8e640ec to
f261518
Compare
eps1lon
deleted the
sebbie/01-13-_devtools_show_fallback_in_inspected_element_pane_when_no_element_is_selected
branch
2 participants
Stacked on #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.