diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap index f7caf6f06b..2fa82104a1 100644 --- a/src/__tests__/__snapshots__/profiling-test.js.snap +++ b/src/__tests__/__snapshots__/profiling-test.js.snap @@ -1044,6 +1044,7 @@ Object { "displayName": null, "id": 1, "key": null, + "type": 11, }, 2 => Object { "children": Array [ @@ -1054,24 +1055,28 @@ Object { "displayName": "Parent", "id": 2, "key": null, + "type": 5, }, 3 => Object { "children": Array [], "displayName": "Child", "id": 3, "key": "0", + "type": 5, }, 4 => Object { "children": Array [], "displayName": "Child", "id": 4, "key": "1", + "type": 5, }, 5 => Object { "children": Array [], "displayName": "Child", "id": 5, "key": null, + "type": 8, }, }, }, diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap index bf875768a5..9da03f5935 100644 --- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap @@ -12,6 +12,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 15, + "type": 11, }, 2 => Object { "children": Array [ @@ -24,6 +25,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 15, + "type": 5, }, 3 => Object { "children": Array [], @@ -32,6 +34,7 @@ Object { "key": "first", "parentID": 2, "treeBaseDuration": 3, + "type": 8, }, 4 => Object { "children": Array [], @@ -40,6 +43,7 @@ Object { "key": "second", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 5 => Object { "children": Array [], @@ -48,6 +52,7 @@ Object { "key": "third", "parentID": 2, "treeBaseDuration": 0, + "type": 8, }, }, "rootID": 1, @@ -83,7 +88,7 @@ Object { "actualDuration": 0, "didRender": true, "id": 5, - "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)", + "label": "Child (Memo) key=\\"third\\" (<0.1ms of <0.1ms)", "name": "Child", "offset": 15, "selfDuration": 0, @@ -93,7 +98,7 @@ Object { "actualDuration": 2, "didRender": true, "id": 4, - "label": "Child key=\\"second\\" (2ms of 2ms)", + "label": "Child (Memo) key=\\"second\\" (2ms of 2ms)", "name": "Child", "offset": 13, "selfDuration": 2, @@ -103,7 +108,7 @@ Object { "actualDuration": 3, "didRender": true, "id": 3, - "label": "Child key=\\"first\\" (3ms of 3ms)", + "label": "Child (Memo) key=\\"first\\" (3ms of 3ms)", "name": "Child", "offset": 10, "selfDuration": 3, @@ -126,6 +131,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 15, + "type": 11, }, 2 => Object { "children": Array [ @@ -138,6 +144,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 15, + "type": 5, }, 3 => Object { "children": Array [], @@ -146,6 +153,7 @@ Object { "key": "first", "parentID": 2, "treeBaseDuration": 3, + "type": 8, }, 4 => Object { "children": Array [], @@ -154,6 +162,7 @@ Object { "key": "second", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 5 => Object { "children": Array [], @@ -162,6 +171,7 @@ Object { "key": "third", "parentID": 2, "treeBaseDuration": 0, + "type": 8, }, }, "rootID": 1, @@ -197,7 +207,7 @@ Object { "actualDuration": 0, "didRender": false, "id": 5, - "label": "Child key=\\"third\\"", + "label": "Child (Memo) key=\\"third\\"", "name": "Child", "offset": 15, "selfDuration": 0, @@ -207,7 +217,7 @@ Object { "actualDuration": 0, "didRender": false, "id": 4, - "label": "Child key=\\"second\\"", + "label": "Child (Memo) key=\\"second\\"", "name": "Child", "offset": 13, "selfDuration": 0, @@ -217,7 +227,7 @@ Object { "actualDuration": 0, "didRender": false, "id": 3, - "label": "Child key=\\"first\\"", + "label": "Child (Memo) key=\\"first\\"", "name": "Child", "offset": 10, "selfDuration": 0, @@ -254,6 +264,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 15, + "type": 11, }, 2 => Object { "children": Array [ @@ -266,6 +277,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 15, + "type": 5, }, 3 => Object { "children": Array [], @@ -274,6 +286,7 @@ Object { "key": "first", "parentID": 2, "treeBaseDuration": 3, + "type": 8, }, 4 => Object { "children": Array [], @@ -282,6 +295,7 @@ Object { "key": "second", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 5 => Object { "children": Array [], @@ -290,6 +304,7 @@ Object { "key": "third", "parentID": 2, "treeBaseDuration": 0, + "type": 8, }, }, "rootID": 1, @@ -308,19 +323,19 @@ Object { }, Object { "id": 3, - "label": "Child key=\\"first\\" (3ms)", + "label": "Child (Memo) key=\\"first\\" (3ms)", "name": "Child", "value": 3, }, Object { "id": 4, - "label": "Child key=\\"second\\" (2ms)", + "label": "Child (Memo) key=\\"second\\" (2ms)", "name": "Child", "value": 2, }, Object { "id": 5, - "label": "Child key=\\"third\\" (<0.1ms)", + "label": "Child (Memo) key=\\"third\\" (<0.1ms)", "name": "Child", "value": 0, }, @@ -340,6 +355,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 15, + "type": 11, }, 2 => Object { "children": Array [ @@ -352,6 +368,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 15, + "type": 5, }, 3 => Object { "children": Array [], @@ -360,6 +377,7 @@ Object { "key": "first", "parentID": 2, "treeBaseDuration": 3, + "type": 8, }, 4 => Object { "children": Array [], @@ -368,6 +386,7 @@ Object { "key": "second", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 5 => Object { "children": Array [], @@ -376,6 +395,7 @@ Object { "key": "third", "parentID": 2, "treeBaseDuration": 0, + "type": 8, }, }, "rootID": 1, diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap index 29bfaddcda..6f8573b08e 100644 --- a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap @@ -12,6 +12,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 12, + "type": 11, }, 2 => Object { "children": Array [ @@ -22,6 +23,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 12, + "type": 5, }, 3 => Object { "children": Array [], @@ -30,6 +32,7 @@ Object { "key": "0", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, }, "rootID": 1, @@ -48,6 +51,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 16, + "type": 11, }, 2 => Object { "children": Array [ @@ -60,6 +64,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 16, + "type": 5, }, 3 => Object { "children": Array [], @@ -68,6 +73,7 @@ Object { "key": "0", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 4 => Object { "children": Array [], @@ -76,6 +82,7 @@ Object { "key": "1", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 5 => Object { "children": Array [], @@ -84,6 +91,7 @@ Object { "key": "2", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, }, "rootID": 1, @@ -102,6 +110,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 14, + "type": 11, }, 2 => Object { "children": Array [ @@ -113,6 +122,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 14, + "type": 5, }, 3 => Object { "children": Array [], @@ -121,6 +131,7 @@ Object { "key": "0", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, 4 => Object { "children": Array [], @@ -129,6 +140,7 @@ Object { "key": "1", "parentID": 2, "treeBaseDuration": 2, + "type": 8, }, }, "rootID": 1, @@ -147,6 +159,7 @@ Object { "key": null, "parentID": 0, "treeBaseDuration": 10, + "type": 11, }, 2 => Object { "children": Array [], @@ -155,6 +168,7 @@ Object { "key": null, "parentID": 1, "treeBaseDuration": 10, + "type": 5, }, }, "rootID": 1, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 23ad2c59f8..4eeca128d4 100644 --- a/src/backend/renderer.js +++ b/src/backend/renderer.js @@ -459,10 +459,9 @@ export function attach( return 'EventTarget'; } case ForwardRef: - const functionName = getDisplayName(resolvedType.render, ''); return ( resolvedType.displayName || - (functionName !== '' ? functionName : 'ForwardRef') + getDisplayName(resolvedType.render, 'Anonymous') ); case HostRoot: return null; @@ -477,8 +476,7 @@ export function attach( if (elementType.displayName) { return elementType.displayName; } else { - const displayName = type.displayName || type.name; - return displayName ? displayName : 'Memo'; + return getDisplayName(type, 'Anonymous'); } default: const typeSymbol = getTypeSymbol(type); @@ -1690,7 +1688,7 @@ export function attach( const owners = [ { - displayName: getDisplayNameForFiber(fiber) || 'Unknown', + displayName: getDisplayNameForFiber(fiber) || 'Anonymous', id, }, ]; @@ -1699,7 +1697,7 @@ export function attach( let owner = _debugOwner; while (owner !== null) { owners.unshift({ - displayName: getDisplayNameForFiber(owner) || 'Unknown', + displayName: getDisplayNameForFiber(owner) || 'Anonymous', id: getFiberID(getPrimaryFiber(owner)), }); owner = owner._debugOwner || null; @@ -1794,7 +1792,7 @@ export function attach( let owner = _debugOwner; while (owner !== null) { owners.push({ - displayName: getDisplayNameForFiber(owner) || 'Unknown', + displayName: getDisplayNameForFiber(owner) || 'Anonymous', id: getFiberID(getPrimaryFiber(owner)), }); owner = owner._debugOwner || null; @@ -2306,7 +2304,7 @@ export function attach( } child = child.child; } - const name = preferredDisplayName || fallbackDisplayName || 'Unknown'; + const name = preferredDisplayName || fallbackDisplayName || 'Anonymous'; const counter = rootDisplayNameCounter.get(name) || 0; rootDisplayNameCounter.set(name, counter + 1); const pseudoKey = `${name}:${counter}`; diff --git a/src/devtools/store.js b/src/devtools/store.js index 61a141797e..8cf358b8da 100644 --- a/src/devtools/store.js +++ b/src/devtools/store.js @@ -720,6 +720,7 @@ export default class Store extends EventEmitter { children: element.children.slice(0), displayName: element.displayName, key: element.key, + type: element.type, }); element.children.forEach(childID => diff --git a/src/devtools/views/Components/SelectedElement.js b/src/devtools/views/Components/SelectedElement.js index b49ce87ad8..6f474113fe 100644 --- a/src/devtools/views/Components/SelectedElement.js +++ b/src/devtools/views/Components/SelectedElement.js @@ -304,7 +304,7 @@ function InspectedElementView({ {owners.map(owner => ( diff --git a/src/devtools/views/Profiler/CommitTreeBuilder.js b/src/devtools/views/Profiler/CommitTreeBuilder.js index ed61f3a535..3d4ec90aed 100644 --- a/src/devtools/views/Profiler/CommitTreeBuilder.js +++ b/src/devtools/views/Profiler/CommitTreeBuilder.js @@ -144,6 +144,7 @@ function recursivelyInitializeTree( key: node.key, parentID, treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number), + type: node.type, }); node.children.forEach(childID => @@ -225,6 +226,7 @@ function updateTree( key: null, parentID: 0, treeBaseDuration: 0, // This will be updated by a subsequent operation + type, }; nodes.set(id, node); @@ -259,6 +261,7 @@ function updateTree( key, parentID, treeBaseDuration: 0, // This will be updated by a subsequent operation + type, }; nodes.set(id, node); diff --git a/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/src/devtools/views/Profiler/FlamegraphChartBuilder.js index 7d5b552506..be52349fb3 100644 --- a/src/devtools/views/Profiler/FlamegraphChartBuilder.js +++ b/src/devtools/views/Profiler/FlamegraphChartBuilder.js @@ -1,5 +1,6 @@ // @flow +import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types'; import { formatDuration } from './utils'; import type { CommitDetailsFrontend, CommitTreeFrontend } from './types'; @@ -57,16 +58,23 @@ export function getChartData({ throw Error(`Could not find node with id "${id}" in commit tree`); } - const { children, displayName, key, treeBaseDuration } = node; + const { children, displayName, key, treeBaseDuration, type } = node; const actualDuration = actualDurations.get(id) || 0; const selfDuration = selfDurations.get(id) || 0; const didRender = actualDurations.has(id); - const name = displayName || 'Unknown'; + const name = displayName || 'Anonymous'; const maybeKey = key !== null ? ` key="${key}"` : ''; - let label = `${name}${maybeKey}`; + let maybeBadge = ''; + if (type === ElementTypeForwardRef) { + maybeBadge = ' (ForwardRef)'; + } else if (type === ElementTypeMemo) { + maybeBadge = ' (Memo)'; + } + + let label = `${name}${maybeBadge}${maybeKey}`; if (didRender) { label += ` (${formatDuration(selfDuration)}ms of ${formatDuration( actualDuration diff --git a/src/devtools/views/Profiler/RankedChartBuilder.js b/src/devtools/views/Profiler/RankedChartBuilder.js index 51f0919a22..9b53af9dbb 100644 --- a/src/devtools/views/Profiler/RankedChartBuilder.js +++ b/src/devtools/views/Profiler/RankedChartBuilder.js @@ -1,5 +1,6 @@ // @flow +import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types'; import { formatDuration } from './utils'; import type { CommitDetailsFrontend, CommitTreeFrontend } from './types'; @@ -45,16 +46,28 @@ export function getChartData({ throw Error(`Could not find node with id "${id}" in commit tree`); } + const { displayName, key, parentID, type } = node; + // Don't show the root node in this chart. - if (node.parentID === 0) { + if (parentID === 0) { return; } const selfDuration = selfDurations.get(id) || 0; maxSelfDuration = Math.max(maxSelfDuration, selfDuration); - const name = node.displayName || 'Unknown'; - const maybeKey = node.key !== null ? ` key="${node.key}"` : ''; - const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`; + const name = displayName || 'Anonymous'; + const maybeKey = key !== null ? ` key="${key}"` : ''; + + let maybeBadge = ''; + if (type === ElementTypeForwardRef) { + maybeBadge = ' (ForwardRef)'; + } else if (type === ElementTypeMemo) { + maybeBadge = ' (Memo)'; + } + + const label = `${name}${maybeBadge}${maybeKey} (${formatDuration( + selfDuration + )}ms)`; chartNodes.push({ id, label, diff --git a/src/devtools/views/Profiler/types.js b/src/devtools/views/Profiler/types.js index 38b4742ac6..0e50fa2d4f 100644 --- a/src/devtools/views/Profiler/types.js +++ b/src/devtools/views/Profiler/types.js @@ -1,5 +1,7 @@ // @flow +import type { ElementType } from 'src/types'; + export type CommitTreeNodeFrontend = {| id: number, children: Array, @@ -7,6 +9,7 @@ export type CommitTreeNodeFrontend = {| key: number | string | null, parentID: number, treeBaseDuration: number, + type: ElementType, |}; export type CommitTreeFrontend = {| @@ -61,6 +64,7 @@ export type ProfilingSnapshotNode = {| children: Array, displayName: string | null, key: number | string | null, + type: ElementType, |}; export type ImportedProfilingData = {| diff --git a/src/hydration.js b/src/hydration.js index 329994119f..48a83af0c6 100644 --- a/src/hydration.js +++ b/src/hydration.js @@ -272,7 +272,7 @@ export function getDisplayNameForReactElement( if (typeof type === 'string') { return type; } else if (type != null) { - return getDisplayName(type, 'Unknown'); + return getDisplayName(type, 'Anonymous'); } else { return 'Element'; } diff --git a/src/utils.js b/src/utils.js index 499a72bb1d..3880bada6a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -15,7 +15,7 @@ let encodedStringCache = new LRU({ max: 1000 }); export function getDisplayName( type: Function, - fallbackName: string = 'Unknown' + fallbackName: string = 'Anonymous' ): string { const nameFromCache = cachedDisplayNames.get(type); if (nameFromCache != null) {