[DevTools] Use same Suspense naming heuristics when reconnecting

Author: eps1lon

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

@@ -3297,7 +3297,7 @@ describe('Store', () => {
                 <Suspense>
       [suspense-root]  rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}
         <Suspense name="Outer" rects={[{x:1,y:2,width:6,height:1}, {x:1,y:2,width:6,height:1}]}>
-          <Suspense name="Unknown" rects={[{x:1,y:2,width:6,height:1}]}>
+          <Suspense name="Inner" rects={[{x:1,y:2,width:6,height:1}]}>
     `);
   });
 });

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -2664,7 +2664,7 @@ export function attach(
 
     const fiber = fiberInstance.data;
     const props = fiber.memoizedProps;
-    // TODO: Compute a fallback name based on Owner, key etc.
+    // The frontend will guess a name based on heuristics (e.g. owner) if no explicit name is given.
     const name =
       fiber.tag !== SuspenseComponent || props === null
         ? null

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

@@ -1615,10 +1615,6 @@ export default class Store extends EventEmitter<{
             parentSuspense.children.push(id);
           }
 
-          if (name === null) {
-            name = 'Unknown';
-          }
-
           this._idToSuspense.set(id, {
             id,
             parentID,
@@ -2135,13 +2131,12 @@ export default class Store extends EventEmitter<{
     throw error;
   }
 
-  _guessSuspenseName(element: Element): string {
+  _guessSuspenseName(element: Element): string | null {
     const owner = this._idToElement.get(element.ownerID);
-    let name = 'Unknown';
     if (owner !== undefined && owner.displayName !== null) {
-      name = owner.displayName;
+      return owner.displayName;
     }
 
-    return name;
+    return null;
   }
 }

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

@@ -63,11 +63,7 @@ function printRects(rects: SuspenseNode['rects']): string {
 }
 
 function printSuspense(suspense: SuspenseNode): string {
-  let name = '';
-  if (suspense.name !== null) {
-    name = ` name="${suspense.name}"`;
-  }
-
+  const name = ` name="${suspense.name || 'Unknown'}"`;
   const printedRects = printRects(suspense.rects);
 
   return `<Suspense${name}${printedRects}>`;

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

@@ -72,7 +72,7 @@ export default function SuspenseBreadcrumbs(): React$Node {
                 className={styles.SuspenseBreadcrumbsButton}
                 onClick={handleClick.bind(null, id)}
                 type="button">
-                {node === null ? 'Unknown' : node.name}
+                {node === null ? 'Unknown' : node.name || 'Unknown'}
               </button>
             </li>
           );

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

@@ -169,7 +169,7 @@ function SuspenseRects({
                 onPointerOver={handlePointerOver}
                 onPointerLeave={handlePointerLeave}
                 // Reach-UI tooltip will go out of bounds of parent scroll container.
-                title={suspense.name}
+                title={suspense.name || 'Unknown'}
               />
             );
           })}