Give the root an outline with the same color as the timeline

Give it a background while selected.

Author: sebmarkbage

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

@@ -1,6 +1,11 @@
 .SuspenseRectsContainer {
   padding: .25rem;
   cursor: pointer;
+  outline: 1px solid var(--color-component-name);
+}
+
+.SuspenseRectsContainer[data-highlighted='true'] {
+  background: var(--color-dimmest);
 }
 
 .SuspenseRectsViewBox {

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

@@ -295,6 +295,7 @@ const ViewBox = createContext<Rect>((null: any));
 
 function SuspenseRectsContainer(): React$Node {
   const store = useContext(StoreContext);
+  const {inspectedElementID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
   const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);
   // TODO: This relies on a full re-render of all children when the Suspense tree changes.
@@ -329,8 +330,13 @@ function SuspenseRectsContainer(): React$Node {
     });
   }
 
+  const isRootSelected = roots.includes(inspectedElementID);
+
   return (
-    <div className={styles.SuspenseRectsContainer} onClick={handleClick}>
+    <div
+      className={styles.SuspenseRectsContainer}
+      onClick={handleClick}
+      data-highlighted={isRootSelected}>
       <ViewBox.Provider value={boundingBox}>
         <div
           className={styles.SuspenseRectsViewBox}