diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap index 0dde8d46c3..f7caf6f06b 100644 --- a/src/__tests__/__snapshots__/profiling-test.js.snap +++ b/src/__tests__/__snapshots__/profiling-test.js.snap @@ -164,7 +164,7 @@ Object { Array [ 1, 1, - 29, + 17, 6, 80, 97, @@ -182,18 +182,6 @@ Object { 48, 1, 49, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -237,7 +225,7 @@ Object { 8, 2, 2, - 5, + 2, 0, 4, 5, @@ -527,7 +515,7 @@ Object { Array [ 1, 1, - 27, + 15, 6, 80, 97, @@ -543,18 +531,6 @@ Object { 100, 1, 48, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -588,7 +564,7 @@ Object { 8, 2, 2, - 4, + 2, 0, 4, 4, @@ -796,7 +772,7 @@ Object { Array [ 1, 1, - 27, + 15, 6, 80, 97, @@ -812,18 +788,6 @@ Object { 100, 1, 48, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -857,7 +821,7 @@ Object { 8, 2, 2, - 4, + 2, 0, 4, 4, @@ -1105,7 +1069,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": null, }, diff --git a/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/src/__tests__/__snapshots__/profilingCharts-test.js.snap index feb708bac7..bf875768a5 100644 --- a/src/__tests__/__snapshots__/profilingCharts-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCharts-test.js.snap @@ -27,7 +27,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "first", "parentID": 2, @@ -35,7 +35,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "second", "parentID": 2, @@ -43,7 +43,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": "third", "parentID": 2, @@ -83,8 +83,8 @@ Object { "actualDuration": 0, "didRender": true, "id": 5, - "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)", - "name": "Memo(Child)", + "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)", + "name": "Child", "offset": 15, "selfDuration": 0, "treeBaseDuration": 0, @@ -93,8 +93,8 @@ Object { "actualDuration": 2, "didRender": true, "id": 4, - "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)", - "name": "Memo(Child)", + "label": "Child key=\\"second\\" (2ms of 2ms)", + "name": "Child", "offset": 13, "selfDuration": 2, "treeBaseDuration": 2, @@ -103,8 +103,8 @@ Object { "actualDuration": 3, "didRender": true, "id": 3, - "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)", - "name": "Memo(Child)", + "label": "Child key=\\"first\\" (3ms of 3ms)", + "name": "Child", "offset": 10, "selfDuration": 3, "treeBaseDuration": 3, @@ -141,7 +141,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "first", "parentID": 2, @@ -149,7 +149,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "second", "parentID": 2, @@ -157,7 +157,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": "third", "parentID": 2, @@ -197,8 +197,8 @@ Object { "actualDuration": 0, "didRender": false, "id": 5, - "label": "Memo(Child) key=\\"third\\"", - "name": "Memo(Child)", + "label": "Child key=\\"third\\"", + "name": "Child", "offset": 15, "selfDuration": 0, "treeBaseDuration": 0, @@ -207,8 +207,8 @@ Object { "actualDuration": 0, "didRender": false, "id": 4, - "label": "Memo(Child) key=\\"second\\"", - "name": "Memo(Child)", + "label": "Child key=\\"second\\"", + "name": "Child", "offset": 13, "selfDuration": 0, "treeBaseDuration": 2, @@ -217,8 +217,8 @@ Object { "actualDuration": 0, "didRender": false, "id": 3, - "label": "Memo(Child) key=\\"first\\"", - "name": "Memo(Child)", + "label": "Child key=\\"first\\"", + "name": "Child", "offset": 10, "selfDuration": 0, "treeBaseDuration": 3, @@ -269,7 +269,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "first", "parentID": 2, @@ -277,7 +277,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "second", "parentID": 2, @@ -285,7 +285,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": "third", "parentID": 2, @@ -308,20 +308,20 @@ Object { }, Object { "id": 3, - "label": "Memo(Child) key=\\"first\\" (3ms)", - "name": "Memo(Child)", + "label": "Child key=\\"first\\" (3ms)", + "name": "Child", "value": 3, }, Object { "id": 4, - "label": "Memo(Child) key=\\"second\\" (2ms)", - "name": "Memo(Child)", + "label": "Child key=\\"second\\" (2ms)", + "name": "Child", "value": 2, }, Object { "id": 5, - "label": "Memo(Child) key=\\"third\\" (<0.1ms)", - "name": "Memo(Child)", + "label": "Child key=\\"third\\" (<0.1ms)", + "name": "Child", "value": 0, }, ], @@ -355,7 +355,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "first", "parentID": 2, @@ -363,7 +363,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "second", "parentID": 2, @@ -371,7 +371,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": "third", "parentID": 2, diff --git a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap index b483cd5efc..29bfaddcda 100644 --- a/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap +++ b/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap @@ -25,7 +25,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "0", "parentID": 2, @@ -63,7 +63,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "0", "parentID": 2, @@ -71,7 +71,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "1", "parentID": 2, @@ -79,7 +79,7 @@ Object { }, 5 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 5, "key": "2", "parentID": 2, @@ -116,7 +116,7 @@ Object { }, 3 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 3, "key": "0", "parentID": 2, @@ -124,7 +124,7 @@ Object { }, 4 => Object { "children": Array [], - "displayName": "Memo(Child)", + "displayName": "Child", "id": 4, "key": "1", "parentID": 2, diff --git a/src/backend/renderer.js b/src/backend/renderer.js index fdbdd694c2..23ad2c59f8 100644 --- a/src/backend/renderer.js +++ b/src/backend/renderer.js @@ -462,7 +462,7 @@ export function attach( const functionName = getDisplayName(resolvedType.render, ''); return ( resolvedType.displayName || - (functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef') + (functionName !== '' ? functionName : 'ForwardRef') ); case HostRoot: return null; @@ -478,7 +478,7 @@ export function attach( return elementType.displayName; } else { const displayName = type.displayName || type.name; - return displayName ? `Memo(${displayName})` : 'Memo'; + return displayName ? displayName : 'Memo'; } default: const typeSymbol = getTypeSymbol(type); diff --git a/src/devtools/views/Components/Element.css b/src/devtools/views/Components/Element.css index da7a214de5..ed1176739e 100644 --- a/src/devtools/views/Components/Element.css +++ b/src/devtools/views/Components/Element.css @@ -73,3 +73,13 @@ height: 1rem; color: var(--color-expand-collapse-toggle); } + +.Badge{ + background: var(--color-component-name); + color: #000; + line-height: calc(var(--line-height-data) - 0.25rem); + padding: 0 0.55rem; + border-radius: 5px; + margin-left: 0.5rem; + font-size: calc(var(--font-size-monospace-normal) - 2px); +} \ No newline at end of file diff --git a/src/devtools/views/Components/Element.js b/src/devtools/views/Components/Element.js index 79b015e85c..0f3bb34a7a 100644 --- a/src/devtools/views/Components/Element.js +++ b/src/devtools/views/Components/Element.js @@ -9,7 +9,12 @@ import React, { useRef, useState, } from 'react'; -import { ElementTypeClass, ElementTypeFunction } from 'src/types'; +import { + ElementTypeClass, + ElementTypeFunction, + ElementTypeMemo, + ElementTypeForwardRef, +} from 'src/types'; import Store from 'src/devtools/store'; import ButtonIcon from '../ButtonIcon'; import { createRegExp } from '../utils'; @@ -134,6 +139,7 @@ export default function ElementView({ data, index, style }: Props) { const showDollarR = isSelected && (type === ElementTypeClass || type === ElementTypeFunction); + const showBadge = type === ElementTypeMemo || type === ElementTypeForwardRef; let className = styles.Element; if (isSelected) { @@ -182,6 +188,11 @@ export default function ElementView({ data, index, style }: Props) { {showDollarR &&  == $r} + {showBadge && ( + + {type === ElementTypeMemo ? 'Memo' : 'ForwardRef'} + + )} ); }