[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.
Sebastian Markbåge committed
Aug 29, 2024 at 12:44 UTC
18bf7bf5002450ce7daa281e8be1c3216bd871ed
3 files changed
+7
-16
packages/react-devtools-shared/src/backend/fiber/renderer.js
+3
-10
@@ -4212,7 +4212,6 @@ export function attach(
4212
4213
key: key != null ? key : null,
4214
4215
- displayName: getDisplayNameForFiber(fiber),
4215
type: elementType,
4216
4217
// Inspectable properties.
@@ -4252,13 +4251,6 @@ export function attach(
4251
typeof componentInfo.key === 'string' ? componentInfo.key : null;
4252
const props = null; // TODO: Track props on ReactComponentInfo;
4253
4255
- const env = componentInfo.env;
4256
- let displayName = componentInfo.name || '';
4257
- if (typeof env === 'string') {
4258
- // We model environment as an HoC name for now.
4259
- displayName = env + '(' + displayName + ')';
4260
- }
4261
-
4254
const owners: null | Array<SerializedElement> =
4255
getOwnersListFromInstance(virtualInstance);
4256
@@ -4311,7 +4303,6 @@ export function attach(
4303
4304
key: key,
4305
4314
- displayName: displayName,
4306
type: ElementTypeVirtual,
4307
4308
// Inspectable properties.
@@ -4675,10 +4666,12 @@ export function attach(
4666
return;
4667
}
4668
4669
+ const displayName = getDisplayNameForElementID(id);
4670
+
4671
const supportsGroup = typeof console.groupCollapsed === 'function';
4672
if (supportsGroup) {
4673
console.groupCollapsed(
4681
- `[Click to expand] %c<${result.displayName || 'Component'} />`,
4674
+ `[Click to expand] %c<${displayName || 'Component'} />`,
4675
// --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
4676
'color: var(--dom-tag-name-color); font-weight: normal;',
4677
);
packages/react-devtools-shared/src/backend/legacy/renderer.js
+4
-4
@@ -775,7 +775,7 @@ export function attach(
775
return null;
776
}
777
778
- const {displayName, key} = getData(internalInstance);
778
+ const {key} = getData(internalInstance);
779
const type = getElementType(internalInstance);
780
781
let context = null;
@@ -842,8 +842,6 @@ export function attach(
842
// Only legacy context exists in legacy versions.
843
hasLegacyContext: true,
844
845
- displayName: displayName,
846
-
845
type: type,
846
847
key: key != null ? key : null,
@@ -876,10 +874,12 @@ export function attach(
874
return;
875
}
876
877
+ const displayName = getDisplayNameForElementID(id);
878
+
879
const supportsGroup = typeof console.groupCollapsed === 'function';
880
if (supportsGroup) {
881
console.groupCollapsed(
882
- `[Click to expand] %c<${result.displayName || 'Component'} />`,
882
+ `[Click to expand] %c<${displayName || 'Component'} />`,
883
// --dom-tag-name-color is the CSS variable Chrome styles HTML elements with in the console.
884
'color: var(--dom-tag-name-color); font-weight: normal;',
885
);
packages/react-devtools-shared/src/backend/types.js
-2
@@ -239,8 +239,6 @@ export type OwnersList = {
239
export type InspectedElement = {
240
id: number,
241
242
- displayName: string | null,
243
-
242
// Does the current renderer support editable hooks and function props?
243
canEditHooks: boolean,
244
canEditFunctionProps: boolean,