Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'enhancement/display-change' of https://github.com/submetu/react-devtools-experimental into submetu-enhancement/display-change

Browse Source
This commit is contained in:
Brian Vaughn
2019-05-13 14:12:27 -07:00
parent 982eb84a13 74706b0c86
commit e2746ffd0e
6 changed files with 67 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__tests__/__snapshots__/profiling-test.js.snap
+7 -43
View File
@@ -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,
},
src/__tests__/__snapshots__/profilingCharts-test.js.snap
+30 -30
View File
@@ -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,
src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+6 -6
View File
@@ -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,
src/backend/renderer.js
+2 -2
View File
@@ -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);
src/devtools/views/Components/Element.css
+10
View File
@@ -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);
}
src/devtools/views/Components/Element.js
+12 -1
View File
@@ -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) {
</span>
{showDollarR && <span className={styles.DollarR}>&nbsp;== $r</span>}
<span className={styles.ScrollAnchor} ref={scrollAnchorEndRef} />
{showBadge && (
<span className={styles.Badge}>
{type === ElementTypeMemo ? 'Memo' : 'ForwardRef'}
</span>
)}
</div>
);
}