From ec89ae88b69b5c111ae468ba90d2f8feed2eaabb Mon Sep 17 00:00:00 2001 From: Subhan Date: Mon, 13 May 2019 18:57:24 +0200 Subject: [PATCH 1/2] Changes display of ForwardRef and Memo components --- src/backend/renderer.js | 4 ++-- src/devtools/views/Components/Element.css | 10 ++++++++++ src/devtools/views/Components/Element.js | 13 ++++++++++++- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/backend/renderer.js b/src/backend/renderer.js index b76ce8a7d6..cafe9b703b 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'} + + )} ); } From 74706b0c86d0f33dec9bd9ccd61d6f19233ec399 Mon Sep 17 00:00:00 2001 From: Subhan Date: Mon, 13 May 2019 19:00:11 +0200 Subject: [PATCH 2/2] updates snapshots --- .../__snapshots__/profiling-test.js.snap | 50 +++------------- .../profilingCharts-test.js.snap | 60 +++++++++---------- .../profilingCommitTreeBuilder-test.js.snap | 12 ++-- 3 files changed, 43 insertions(+), 79 deletions(-) diff --git a/src/__tests__/__snapshots__/profiling-test.js.snap b/src/__tests__/__snapshots__/profiling-test.js.snap index fa3916d352..69a9d82f1c 100644 --- a/src/__tests__/__snapshots__/profiling-test.js.snap +++ b/src/__tests__/__snapshots__/profiling-test.js.snap @@ -126,7 +126,7 @@ Object { Array [ 1, 1, - 29, + 17, 6, 80, 97, @@ -144,18 +144,6 @@ Object { 48, 1, 49, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -199,7 +187,7 @@ Object { 8, 2, 2, - 5, + 2, 0, 4, 5, @@ -420,7 +408,7 @@ Object { Array [ 1, 1, - 27, + 15, 6, 80, 97, @@ -436,18 +424,6 @@ Object { 100, 1, 48, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -481,7 +457,7 @@ Object { 8, 2, 2, - 4, + 2, 0, 4, 4, @@ -681,7 +657,7 @@ Object { Array [ 1, 1, - 27, + 15, 6, 80, 97, @@ -697,18 +673,6 @@ Object { 100, 1, 48, - 11, - 77, - 101, - 109, - 111, - 40, - 67, - 104, - 105, - 108, - 100, - 41, 1, 1, 11, @@ -742,7 +706,7 @@ Object { 8, 2, 2, - 4, + 2, 0, 4, 4, @@ -980,7 +944,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,