Render selected outline on top of every other rect

Author: sebmarkbage

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

@@ -6,12 +6,6 @@
   border-radius: 0.25rem;
 }
 
-.SuspenseRectsContainer[data-highlighted='true'] {
-  outline-color: var(--color-transition);
-  outline-style: solid;
-  outline-width: 4px;
-}
-
 .SuspenseRectsRoot {
   cursor: pointer;
   outline-color: var(--color-transition);
@@ -106,6 +100,10 @@
   pointer-events: none;
 }
 
+.SuspenseRectOutlineRoot {
+  outline-color: var(--color-transition);
+}
+
 .SuspenseRectsBoundary[data-selected='true'] > .SuspenseRectsRect {
    box-shadow: none;
 }

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

@@ -236,13 +236,6 @@ function SuspenseRects({
             <span>{suspense.name}</span>
           </ScaledRect>
         ) : null}
-        {selected && visible ? (
-          <ScaledRect
-            className={styles.SuspenseRectOutline}
-            rect={boundingBox}
-            adjust={true}
-          />
-        ) : null}
       </ViewBox.Provider>
     </ScaledRect>
   );
@@ -514,6 +507,28 @@ function SuspenseRectsContainer({
     scaleRef.current = boundingBoxWidth;
   }, [boundingBoxWidth]);
 
+  let selectedBoundingBox = null;
+  let selectedEnvironment = null;
+  if (isRootSelected) {
+    selectedBoundingBox = boundingBox;
+    selectedEnvironment = rootEnvironment;
+  } else if (inspectedElementID !== null) {
+    const selectedSuspenseNode = store.getSuspenseByID(inspectedElementID);
+    if (
+      selectedSuspenseNode !== null &&
+      (selectedSuspenseNode.hasUniqueSuspenders || !uniqueSuspendersOnly)
+    ) {
+      selectedBoundingBox = getBoundingBox(selectedSuspenseNode.rects);
+      for (let i = 0; i < timeline.length; i++) {
+        const timelineStep = timeline[i];
+        if (timelineStep.id === inspectedElementID) {
+          selectedEnvironment = timelineStep.environment;
+          break;
+        }
+      }
+    }
+  }
+
   return (
     <div
       className={
@@ -524,7 +539,6 @@ function SuspenseRectsContainer({
       }
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
-      data-highlighted={isRootSelected}
       data-hovered={isRootHovered}>
       <ViewBox.Provider value={boundingBox}>
         <div
@@ -533,6 +547,18 @@ function SuspenseRectsContainer({
           {roots.map(rootID => {
             return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
           })}
+          {selectedBoundingBox !== null ? (
+            <ScaledRect
+              className={
+                styles.SuspenseRectOutline +
+                (isRootSelected ? ' ' + styles.SuspenseRectOutlineRoot : '') +
+                ' ' +
+                getClassNameForEnvironment(selectedEnvironment)
+              }
+              rect={selectedBoundingBox}
+              adjust={true}
+            />
+          ) : null}
         </div>
       </ViewBox.Provider>
     </div>