Stop drawing bbox

It's misleading unless it would be an actual polygon

Author: eps1lon

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.css

@@ -7,31 +7,35 @@
 }
 
 .SuspenseRectsBoundary {
-  box-shadow: var(--elevation-4);
-  outline-style: solid;
-  outline-width: 1px;
+  pointer-events: all;
+}
+
+.SuspenseRectsBoundaryChildren {
+  pointer-events: none;
   /**
    * So that the shadow of Boundaries within is clipped off.
-   * Otherwise it would look like this boundary is further elevated
+   * Otherwise it would look like this boundary is further elevated.
    */
-  overflow: hidden;
+   overflow: hidden;
 }
 
 .SuspenseRectsRect {
-  outline-style: dashed;
-  outline-width: 0px;
+  box-shadow: var(--elevation-4);
+  pointer-events: all;
+  outline-style: solid;
+  outline-width: 1px;
 }
 
 .SuspenseRectsScaledRect {
   position: absolute;
   outline-color: var(--color-background-selected);
 }
 
-.SuspenseRectsBoundary[data-highlighted='true'] {
-  background-color: var(--color-selected-tree-highlight-active);
+/* highlight this boundary */
+.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
+    background-color: var(--color-background-hover);
 }
 
-/* highlight individual rects of this boundary */
-.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
-  outline-width: 1px;
+.SuspenseRectsRect[data-highlighted='true'] {
+  background-color: var(--color-selected-tree-highlight-active);
 }

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

@@ -118,17 +118,7 @@ function SuspenseRects({
 
   return (
     <>
-      <ScaledRect
-        rect={boundingBox}
-        className={styles.SuspenseRectsBoundary}
-        data-highlighted={selected}
-        onClick={handleClick}
-        onPointerOver={handlePointerOver}
-        onPointerLeave={handlePointerLeave}
-        // Reach-UI tooltip will go out of bounds of parent scroll container.
-        // Native title will change position for each Client Rect.
-        // changing position is better than going oob.
-        title={suspense.name}>
+      <ScaledRect rect={boundingBox} className={styles.SuspenseRectsBoundary}>
         <ViewBox.Provider value={boundingBox}>
           {suspense.rects !== null &&
             suspense.rects.map((rect, index) => {
@@ -137,12 +127,22 @@ function SuspenseRects({
                   key={index}
                   className={styles.SuspenseRectsRect}
                   rect={rect}
+                  data-highlighted={selected}
+                  onClick={handleClick}
+                  onPointerOver={handlePointerOver}
+                  onPointerLeave={handlePointerLeave}
+                  // Reach-UI tooltip will go out of bounds of parent scroll container.
+                  title={suspense.name}
                 />
               );
             })}
-          {suspense.children.map(childID => {
-            return <SuspenseRects key={childID} suspenseID={childID} />;
-          })}
+          <ScaledRect
+            className={styles.SuspenseRectsBoundaryChildren}
+            rect={boundingBox}>
+            {suspense.children.map(childID => {
+              return <SuspenseRects key={childID} suspenseID={childID} />;
+            })}
+          </ScaledRect>
         </ViewBox.Provider>
       </ScaledRect>
     </>