[DevTools] Show "Initial Paint" in the breadcrumbs when root is selected

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -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>
 

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js

@@ -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>
   );
 }