Repository: facebook/react
Pull request: [DevTools] Show "Initial Paint" in the breadcrumbs when root is selected

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" />



Changed files:
filename: packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
patch: @@ -17,7 +17,10 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
 import Toggle from '../Toggle';
-import {ElementTypeSuspense} from 'react-devtools-shared/src/frontend/types';
+import {
+  ElementTypeSuspense,
+  ElementTypeRoot,
+} from 'react-devtools-shared/src/frontend/types';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
 import {getAlwaysOpenInEditor} from '../../../utils';
@@ -205,6 +208,16 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     );
   }
 
+  let fullName = element.displayName || '';
+  if (element.nameProp !== null) {
+    fullName += ' "' + element.nameProp + '"';
+  }
+  if (element.type === ElementTypeRoot) {
+    // The root only has "suspended by" and it represents the things that block
+    // Initial Paint.
+    fullName = 'Initial Paint';
+  }
+
   return (
     <div
       className={styles.InspectedElement}
@@ -228,8 +241,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
                 ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
                 : styles.ComponentName
             }
-            title={element.displayName}>
-            {element.displayName}
+            title={fullName}>
+            {fullName}
           </div>
         </div>
 

filename: packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
patch: @@ -25,7 +25,9 @@ export default function SuspenseBreadcrumbs(): React$Node {
   const store = useContext(StoreContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
-  const {selectedSuspenseID, lineage} = useContext(SuspenseTreeStateContext);
+  const {selectedSuspenseID, selectedRootID, lineage} = useContext(
+    SuspenseTreeStateContext,
+  );
 
   const {highlightHostInstance, clearHighlightHostInstance} =
     useHighlightHostInstance();
@@ -38,7 +40,24 @@ export default function SuspenseBreadcrumbs(): React$Node {
 
   return (
     <ol className={styles.SuspenseBreadcrumbsList}>
-      {lineage !== null &&
+      {lineage === null ? null : lineage.length === 0 ? (
+        // 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".
+        // TODO: 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.
+        selectedRootID !== null ? (
+          <li
+            className={styles.SuspenseBreadcrumbsListItem}
+            aria-current={selectedSuspenseID === selectedRootID}>
+            <button
+              className={styles.SuspenseBreadcrumbsButton}
+              onClick={handleClick.bind(null, selectedRootID)}
+              type="button">
+              Initial Paint
+            </button>
+          </li>
+        ) : null
+      ) : (
         lineage.map((id, index) => {
           const node = store.getSuspenseByID(id);
 
@@ -57,7 +76,8 @@ export default function SuspenseBreadcrumbs(): React$Node {
               </button>
             </li>
           );
-        })}
+        })
+      )}
     </ol>
   );
 }