Repository: facebook/react
Pull request: [DevTools] Don't highlight the root rect if no roots has unique suspenders

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.

Changed files:
filename: packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css
patch: @@ -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;
 }

filename: packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js
patch: @@ -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}