[DevTools] Draw rect for React Root in Suspense tab

Author: eps1lon

packages/react-devtools-shared/src/devtools/store.js

@@ -854,10 +854,11 @@ export default class Store extends EventEmitter<{
     const lineage: Array<SuspenseNode['id']> = [];
     let next: null | SuspenseNode = this.getSuspenseByID(suspenseID);
     while (next !== null) {
+      // Include Root to be able to see what suspended the Shell.
+      lineage.unshift(next.id);
       if (next.parentID === 0) {
         next = null;
       } else {
-        lineage.unshift(next.id);
         next = this.getSuspenseByID(next.parentID);
       }
     }
@@ -1205,7 +1206,7 @@ export default class Store extends EventEmitter<{
             this._idToElement.set(id, {
               children: [],
               depth: -1,
-              displayName: null,
+              displayName: 'React Root',
               hocDisplayNames: null,
               id,
               isCollapsed: false, // Never collapse roots; it would hide the entire tree.
@@ -1539,7 +1540,12 @@ export default class Store extends EventEmitter<{
             if (name === null) {
               // The boundary isn't explicitly named.
               // Pick a sensible default.
-              name = this._guessSuspenseName(element);
+              if (parentID === 0) {
+                // For Roots we use their display name.
+                name = element.displayName;
+              } else {
+                name = this._guessSuspenseName(element);
+              }
             }
           }
 

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

@@ -221,11 +221,7 @@ function getDocumentBoundingRect(
   };
 }
 
-function SuspenseRectsShell({
-  rootID,
-}: {
-  rootID: SuspenseNode['id'],
-}): React$Node {
+function SuspenseRectsRoot({rootID}: {rootID: SuspenseNode['id']}): React$Node {
   const store = useContext(StoreContext);
   const root = store.getSuspenseByID(rootID);
   if (root === null) {
@@ -254,14 +250,16 @@ function SuspenseRectsContainer(): React$Node {
   const width = '100%';
   const aspectRatio = `1 / ${heightScale}`;
 
+  function handleClick() {}
+
   return (
-    <div className={styles.SuspenseRectsContainer}>
+    <div className={styles.SuspenseRectsContainer} onClick={handleClick}>
       <ViewBox.Provider value={boundingBox}>
         <div
           className={styles.SuspenseRectsViewBox}
           style={{aspectRatio, width}}>
           {roots.map(rootID => {
-            return <SuspenseRectsShell key={rootID} rootID={rootID} />;
+            return <SuspenseRectsRoot key={rootID} rootID={rootID} />;
           })}
         </div>
       </ViewBox.Provider>