[DevTools] Show name prop of Suspense / Activity in the Components Tree view

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

@@ -2342,13 +2342,23 @@ export function attach(
       const keyString = key === null ? null : String(key);
       const keyStringID = getStringID(keyString);
 
+      const nameProp =
+        fiber.tag === SuspenseComponent
+          ? fiber.memoizedProps.name
+          : fiber.tag === ActivityComponent
+            ? fiber.memoizedProps.name
+            : null;
+      const namePropString = nameProp == null ? null : String(nameProp);
+      const namePropStringID = getStringID(namePropString);
+
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(elementType);
       pushOperation(parentID);
       pushOperation(ownerID);
       pushOperation(displayNameStringID);
       pushOperation(keyStringID);
+      pushOperation(namePropStringID);
 
       // If this subtree has a new mode, let the frontend know.
       if ((fiber.mode & StrictModeBits) !== 0) {
@@ -2451,6 +2461,7 @@ export function attach(
     // in such a way as to bypass the default stringification of the "key" property.
     const keyString = key === null ? null : String(key);
     const keyStringID = getStringID(keyString);
+    const namePropStringID = getStringID(null);
 
     const id = instance.id;
 
@@ -2461,6 +2472,7 @@ export function attach(
     pushOperation(ownerID);
     pushOperation(displayNameStringID);
     pushOperation(keyStringID);
+    pushOperation(namePropStringID);
 
     const componentLogsEntry =
       componentInfoToComponentLogsMap.get(componentInfo);

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

@@ -426,6 +426,7 @@ export function attach(
       pushOperation(ownerID);
       pushOperation(displayNameStringID);
       pushOperation(keyStringID);
+      pushOperation(getStringID(null)); // name prop
     }
   }
 

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

@@ -1092,6 +1092,7 @@ export default class Store extends EventEmitter<{
               isCollapsed: false, // Never collapse roots; it would hide the entire tree.
               isStrictModeNonCompliant,
               key: null,
+              nameProp: null,
               ownerID: 0,
               parentID: 0,
               type,
@@ -1115,6 +1116,10 @@ export default class Store extends EventEmitter<{
             const key = stringTable[keyStringID];
             i++;
 
+            const namePropStringID = operations[i];
+            const nameProp = stringTable[namePropStringID];
+            i++;
+
             if (__DEBUG__) {
               debug(
                 'Add',
@@ -1156,6 +1161,7 @@ export default class Store extends EventEmitter<{
               isCollapsed: this._collapseNodesByDefault,
               isStrictModeNonCompliant: parentElement.isStrictModeNonCompliant,
               key,
+              nameProp,
               ownerID,
               parentID,
               type,

packages/react-devtools-shared/src/devtools/views/Components/Element.js

@@ -119,6 +119,7 @@ export default function Element({data, index, style}: Props): React.Node {
     hocDisplayNames,
     isStrictModeNonCompliant,
     key,
+    nameProp,
     compiledWithForget,
   } = element;
   const {
@@ -179,7 +180,24 @@ export default function Element({data, index, style}: Props): React.Node {
               className={styles.KeyValue}
               title={key}
               onDoubleClick={handleKeyDoubleClick}>
-              <pre>{key}</pre>
+              <pre>
+                <IndexableDisplayName displayName={key} id={id} />
+              </pre>
+            </span>
+            "
+          </Fragment>
+        )}
+
+        {nameProp && (
+          <Fragment>
+            &nbsp;<span className={styles.KeyName}>name</span>="
+            <span
+              className={styles.KeyValue}
+              title={nameProp}
+              onDoubleClick={handleKeyDoubleClick}>
+              <pre>
+                <IndexableDisplayName displayName={nameProp} id={id} />
+              </pre>
             </span>
             "
           </Fragment>

packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js

@@ -995,7 +995,14 @@ function recursivelySearchTree(
     return;
   }
 
-  const {children, displayName, hocDisplayNames, compiledWithForget} = element;
+  const {
+    children,
+    displayName,
+    hocDisplayNames,
+    compiledWithForget,
+    key,
+    nameProp,
+  } = element;
   if (displayName != null && regExp.test(displayName) === true) {
     searchResults.push(elementID);
   } else if (
@@ -1006,6 +1013,10 @@ function recursivelySearchTree(
     searchResults.push(elementID);
   } else if (compiledWithForget && regExp.test('Forget')) {
     searchResults.push(elementID);
+  } else if (typeof key === 'string' && regExp.test(key)) {
+    searchResults.push(elementID);
+  } else if (typeof nameProp === 'string' && regExp.test(nameProp)) {
+    searchResults.push(elementID);
   }
 
   children.forEach(childID =>

packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js

@@ -236,6 +236,9 @@ function updateTree(
           const key = stringTable[keyStringID];
           i++;
 
+          // skip name prop
+          i++;
+
           if (__DEBUG__) {
             debug(
               'Add',

packages/react-devtools-shared/src/frontend/types.js

@@ -157,6 +157,7 @@ export type Element = {
   type: ElementType,
   displayName: string | null,
   key: number | string | null,
+  nameProp: null | string,
 
   hocDisplayNames: null | Array<string>,
 

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

@@ -268,6 +268,7 @@ export function printOperationsArray(operations: Array<number>) {
           i++;
 
           i++; // key
+          i++; // name
 
           logs.push(
             `Add node ${id} (${displayName || 'null'}) as child of ${parentID}`,

packages/shared/ReactTypes.js

@@ -298,6 +298,7 @@ export type ViewTransitionProps = {
 export type ActivityProps = {
   mode?: 'hidden' | 'visible' | null | void,
   children?: ReactNodeList,
+  name?: string,
 };
 
 export type SuspenseProps = {