From 4be6f5760b4b2b356d341057ee0e362cc62b5b82 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Wed, 28 Aug 2024 18:46:44 -0400
Subject: [PATCH] Remove displayName from inspected data

This just clarifies that this is actually unused in the front end. We use
the name from the original instance as the canonical name.
---
 .../src/backend/fiber/renderer.js                   | 13 +++----------
 .../src/backend/legacy/renderer.js                  |  8 ++++----
 packages/react-devtools-shared/src/backend/types.js |  2 --
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js
index 729c8fce5a7a5..09b599a4d09c4 100644
--- a/packages/react-devtools-shared/src/backend/fiber/renderer.js
+++ b/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;',
       );
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index f8aa548a0573a..523fbbeba3d8e 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/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;',
       );
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 87b0f2048b9db..41c278d02ebdf 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/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,