From 423c44b88611afd9bf332fd1a91b5afdca8a48be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 17 Oct 2025 18:53:30 -0400
Subject: [PATCH] [DevTools] Don't highlight the root rect if no roots has
 unique suspenders (#34885)

Stacked on #34881.

We don't paint suspense boundaries if there are no suspenders. This does
the same with the root. The root is still selectable so you can confirm
but there's no affordance drawing attention to click the root.

This could happen if you don't use the built-ins of React to load things
like scripts and css. It would never happen in something like Next.js
where code and CSS is loaded through React-native like RSC.

However, it could also happen in the Activity scoped case when all
resources are always loaded early.
---
 .../views/SuspenseTab/SuspenseRects.css       | 19 +++++++++------
 .../views/SuspenseTab/SuspenseRects.js        | 23 +++++++++++++++++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
index 69a4022307..db0a84d8d8 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
@@ -1,22 +1,27 @@
 .SuspenseRectsContainer {
   padding: .25rem;
-  cursor: pointer;
-  outline-color: var(--color-transition);
+  outline-color: transparent;
   outline-style: solid;
   outline-width: 1px;
   border-radius: 0.25rem;
-  background-color: color-mix(in srgb, var(--color-transition) 5%, transparent);
-}
-
-.SuspenseRectsContainer[data-hovered='true'] {
-  background-color: color-mix(in srgb, var(--color-transition) 15%, transparent);
 }
 
 .SuspenseRectsContainer[data-highlighted='true'] {
+  outline-color: var(--color-transition);
   outline-style: solid;
   outline-width: 4px;
 }
 
+.SuspenseRectsRoot {
+  cursor: pointer;
+  outline-color: var(--color-transition);
+  background-color: color-mix(in srgb, var(--color-transition) 5%, transparent);
+}
+
+.SuspenseRectsRoot[data-hovered='true'] {
+  background-color: color-mix(in srgb, var(--color-transition) 15%, transparent);
+}
+
 .SuspenseRectsViewBox {
   position: relative;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
index fcbb5f5f74..8b171ae31a 100644
--- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
+++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
@@ -326,7 +326,9 @@ function SuspenseRectsContainer(): React$Node {
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
-  const {roots, hoveredTimelineIndex} = useContext(SuspenseTreeStateContext);
+  const {roots, hoveredTimelineIndex, uniqueSuspendersOnly} = useContext(
+    SuspenseTreeStateContext,
+  );
 
   // TODO: bbox does not consider uniqueSuspendersOnly filter
   const boundingBox = getDocumentBoundingRect(store, roots);
@@ -372,9 +374,26 @@ function SuspenseRectsContainer(): React$Node {
   const isRootSelected = roots.includes(inspectedElementID);
   const isRootHovered = hoveredTimelineIndex === 0;
 
+  let hasRootSuspenders = false;
+  if (!uniqueSuspendersOnly) {
+    hasRootSuspenders = true;
+  } else {
+    for (let i = 0; i < roots.length; i++) {
+      const rootID = roots[i];
+      const root = store.getSuspenseByID(rootID);
+      if (root !== null && root.hasUniqueSuspenders) {
+        hasRootSuspenders = true;
+        break;
+      }
+    }
+  }
+
   return (
     <div
-      className={styles.SuspenseRectsContainer}
+      className={
+        styles.SuspenseRectsContainer +
+        (hasRootSuspenders ? ' ' + styles.SuspenseRectsRoot : '')
+      }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       data-highlighted={isRootSelected}