From 6885f844dd977e703bae52ad4621881ca6d69973 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 29 Sep 2025 16:32:16 -0400
Subject: [PATCH 1/5] Show "Initial Paint" in the breadcrumbs when root is
 selected

---
 .../views/SuspenseTab/SuspenseBreadcrumbs.css       |  7 +++++++
 .../views/SuspenseTab/SuspenseBreadcrumbs.js        | 13 +++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
index 1e1544b477cab..84cb72ac208e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
@@ -11,6 +11,13 @@
   display: inline;
 }
 
+.SuspenseBreadcrumbsText {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  padding: 0.25rem;
+  white-space: nowrap;
+}
+
 .SuspenseBreadcrumbsListItem[aria-current="true"] .SuspenseBreadcrumbsButton {
   color: var(--color-button-active);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
index b49d0b5eb9ad0..7818c593de5fd 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
@@ -38,7 +38,15 @@ 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.
+        <li className={styles.SuspenseBreadcrumbsListItem}>
+          <span className={styles.SuspenseBreadcrumbsText}>Initial Paint</span>
+        </li>
+      ) : (
         lineage.map((id, index) => {
           const node = store.getSuspenseByID(id);
 
@@ -57,7 +65,8 @@ export default function SuspenseBreadcrumbs(): React$Node {
               </button>
             </li>
           );
-        })}
+        })
+      )}
     </ol>
   );
 }

From 09142da38000834713a27d1a6cfb648925d65bda Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 29 Sep 2025 16:43:43 -0400
Subject: [PATCH 2/5] Make the Initial Paint clickable to select the root

---
 .../views/SuspenseTab/SuspenseBreadcrumbs.css |  7 -------
 .../views/SuspenseTab/SuspenseBreadcrumbs.js  | 21 +++++++++++++++----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
index 84cb72ac208e7..1e1544b477cab 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.css
@@ -11,13 +11,6 @@
   display: inline;
 }
 
-.SuspenseBreadcrumbsText {
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-normal);
-  padding: 0.25rem;
-  white-space: nowrap;
-}
-
 .SuspenseBreadcrumbsListItem[aria-current="true"] .SuspenseBreadcrumbsButton {
   color: var(--color-button-active);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
index 7818c593de5fd..4d2f69d8e3316 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
+++ b/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();
@@ -43,9 +45,20 @@ export default function SuspenseBreadcrumbs(): React$Node {
         // 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.
-        <li className={styles.SuspenseBreadcrumbsListItem}>
-          <span className={styles.SuspenseBreadcrumbsText}>Initial Paint</span>
-        </li>
+        selectedRootID !== null ? (
+          <li
+            className={styles.SuspenseBreadcrumbsListItem}
+            aria-current={selectedSuspenseID === selectedRootID}
+            onPointerEnter={highlightHostInstance.bind(null, selectedRootID)}
+            onPointerLeave={clearHighlightHostInstance}>
+            <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);

From 626a7d26f3386686a9c19cb768b512718c58320d Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 29 Sep 2025 16:45:39 -0400
Subject: [PATCH 3/5] Don't highlight the whole screen that's just annoying

---
 .../src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
index 4d2f69d8e3316..a9dcfc38f4214 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js
@@ -48,9 +48,7 @@ export default function SuspenseBreadcrumbs(): React$Node {
         selectedRootID !== null ? (
           <li
             className={styles.SuspenseBreadcrumbsListItem}
-            aria-current={selectedSuspenseID === selectedRootID}
-            onPointerEnter={highlightHostInstance.bind(null, selectedRootID)}
-            onPointerLeave={clearHighlightHostInstance}>
+            aria-current={selectedSuspenseID === selectedRootID}>
             <button
               className={styles.SuspenseBreadcrumbsButton}
               onClick={handleClick.bind(null, selectedRootID)}

From 9e198879274d2f7b55a6790cc3546e9e6e18569c Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Sun, 28 Sep 2025 00:08:04 -0400
Subject: [PATCH 4/5] Show "name" prop in the title bar of the inspected
 element

---
 .../src/devtools/views/Components/InspectedElement.js    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 5596257fa5df5..3383ab3aab3a8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -205,6 +205,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     );
   }
 
+  let fullName = element.displayName || '';
+  if (element.nameProp !== null) {
+    fullName += ' "' + element.nameProp + '"';
+  }
+
   return (
     <div
       className={styles.InspectedElement}
@@ -228,8 +233,8 @@ export default function InspectedElementWrapper(_: Props): React.Node {
                 ? `${styles.ComponentName} ${styles.StrictModeNonCompliantComponentName}`
                 : styles.ComponentName
             }
-            title={element.displayName}>
-            {element.displayName}
+            title={fullName}>
+            {fullName}
           </div>
         </div>
 

From 3673cd647a24f1e8a46badfc525c33e293c5d18a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 29 Sep 2025 17:06:43 -0400
Subject: [PATCH 5/5] Also name the side bar panel Initial Paint.

---
 .../src/devtools/views/Components/InspectedElement.js  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 3383ab3aab3a8..08bba4f9da41f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/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';
@@ -209,6 +212,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
   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