[DevTools] Show "Initial Paint" in the breadcrumbs when root is selected (#34652)
We selected the root. This means that we're currently viewing the Transition that rendered the whole screen. In laymans terms this is really "Initial Paint". Once we add subtree selection, then the equivalent should be called "Transition" since in that case it's really about a Transition within the page. So if you've selected an Activity tree this should be called "Transition". Once we add the environment support to the timeline. The first entry on the timeline should also be called "Initial Paint" when you haven't selected an Activity and "Transition" when you have. Technically they're both meant to be "Transition" but nobody thinks of initial load as a "Transition" from the previous MPA page. <img width="1214" height="419" alt="Screenshot 2025-09-29 at 5 18 58 PM" src="https://github.com/user-attachments/assets/cae263e3-133c-4fa9-9587-a7b2344199f4" />
Sebastian Markbåge committed
Sep 30, 2025 at 14:40 UTC
0d8ff4d8c72a70647b9a5cfe3991e37cccdc1e79
2 files changed
+39
-6
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+16
-3
@@ -17,7 +17,10 @@ import Button from '../Button';
17
import ButtonIcon from '../ButtonIcon';
18
import Icon from '../Icon';
19
import Toggle from '../Toggle';
20
-import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
20
+import {
21
+ ElementTypeSuspense,
22
+ ElementTypeRoot,
23
+} from 'react-devtools-shared/src/frontend/types';
24
import InspectedElementView from './InspectedElementView';
25
import {InspectedElementContext} from './InspectedElementContext';
26
import {getAlwaysOpenInEditor} from '../../../utils';
@@ -205,6 +208,16 @@ export default function InspectedElementWrapper(_: Props): React.Node {
208
);
209
}
210
211
+ let fullName = element.displayName || '';
212
+ if (element.nameProp !== null) {
213
+ fullName += ' "' + element.nameProp + '"';
214
+ }
215
+ if (element.type === ElementTypeRoot) {
216
+ // The root only has "suspended by" and it represents the things that block
217
+ // Initial Paint.
218
+ fullName = 'Initial Paint';
219
+ }
220
+
221
return (
222
<div
223
className={styles.InspectedElement}
@@ -228,8 +241,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
241
? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
242
: styles.ComponentName
243
}
231
- title={element.displayName}>
232
- {element.displayName}
244
+ title={fullName}>
245
+ {fullName}
246
</div>
247
</div>
248
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
+23
-3
@@ -25,7 +25,9 @@ export default function SuspenseBreadcrumbs(): React$Node {
25
const store = useContext(StoreContext);
26
const treeDispatch = useContext(TreeDispatcherContext);
27
const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
28
- const {selectedSuspenseID, lineage} = useContext(SuspenseTreeStateContext);
28
+ const {selectedSuspenseID, selectedRootID, lineage} = useContext(
29
+ SuspenseTreeStateContext,
30
+ );
31
32
const {highlightHostInstance, clearHighlightHostInstance} =
33
useHighlightHostInstance();
@@ -38,7 +40,24 @@ export default function SuspenseBreadcrumbs(): React$Node {
40
41
return (
42
<ol className={styles.SuspenseBreadcrumbsList}>
41
- {lineage !== null &&
43
+ {lineage === null ? null : lineage.length === 0 ? (
44
+ // We selected the root. This means that we're currently viewing the Transition
45
+ // that rendered the whole screen. In laymans terms this is really "Initial Paint".
46
+ // TODO: Once we add subtree selection, then the equivalent should be called
47
+ // "Transition" since in that case it's really about a Transition within the page.
48
+ selectedRootID !== null ? (
49
+ <li
50
+ className={styles.SuspenseBreadcrumbsListItem}
51
+ aria-current={selectedSuspenseID === selectedRootID}>
52
+ <button
53
+ className={styles.SuspenseBreadcrumbsButton}
54
+ onClick={handleClick.bind(null, selectedRootID)}
55
+ type="button">
56
+ Initial Paint
57
+ </button>
58
+ </li>
59
+ ) : null
60
+ ) : (
61
lineage.map((id, index) => {
62
const node = store.getSuspenseByID(id);
63
@@ -57,7 +76,8 @@ export default function SuspenseBreadcrumbs(): React$Node {
76
</button>
77
</li>
78
);
60
- })}
79
+ })
80
+ )}
81
</ol>
82
);
83
}