[DevTools] Remove displayName from inspected data (#30841)

This just clarifies that this is actually unused in the front end. We
use the name from the original instance as the canonical name.

Author: sebmarkbage

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

@@ -4212,7 +4212,6 @@ export function attach(
 
       key: key != null ? key : null,
 
-      displayName: getDisplayNameForFiber(fiber),
       type: elementType,
 
       // Inspectable properties.
@@ -4252,13 +4251,6 @@ export function attach(
       typeof componentInfo.key === 'string' ? componentInfo.key : null;
     const props = null; // TODO: Track props on ReactComponentInfo;
 
-    const env = componentInfo.env;
-    let displayName = componentInfo.name || '';
-    if (typeof env === 'string') {
-      // We model environment as an HoC name for now.
-      displayName = env + '(' + displayName + ')';
-    }
-
     const owners: null | Array<SerializedElement> =
       getOwnersListFromInstance(virtualInstance);
 
@@ -4311,7 +4303,6 @@ export function attach(
 
       key: key,
 
-      displayName: displayName,
       type: ElementTypeVirtual,
 
       // Inspectable properties.
@@ -4675,10 +4666,12 @@ export function attach(
       return;
     }
 
+    const displayName = getDisplayNameForElementID(id);
+
     const supportsGroup = typeof console.groupCollapsed === 'function';
     if (supportsGroup) {
       console.groupCollapsed(
-        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        `[Click to expand] %c<${displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
         'color: var(--dom-tag-name-color); font-weight: normal;',
       );

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

@@ -775,7 +775,7 @@ export function attach(
       return null;
     }
 
-    const {displayName, key} = getData(internalInstance);
+    const {key} = getData(internalInstance);
     const type = getElementType(internalInstance);
 
     let context = null;
@@ -842,8 +842,6 @@ export function attach(
       // Only legacy context exists in legacy versions.
       hasLegacyContext: true,
 
-      displayName: displayName,
-
       type: type,
 
       key: key != null ? key : null,
@@ -876,10 +874,12 @@ export function attach(
       return;
     }
 
+    const displayName = getDisplayNameForElementID(id);
+
     const supportsGroup = typeof console.groupCollapsed === 'function';
     if (supportsGroup) {
       console.groupCollapsed(
-        `[Click to expand] %c<${result.displayName || 'Component'} />`,
+        `[Click to expand] %c<${displayName || 'Component'} />`,
         // --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
         'color: var(--dom-tag-name-color); font-weight: normal;',
       );

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

@@ -239,8 +239,6 @@ export type OwnersList = {
 export type InspectedElement = {
   id: number,
 
-  displayName: string | null,
-
   // Does the current renderer support editable hooks and function props?
   canEditHooks: boolean,
   canEditFunctionProps: boolean,