Improve scanning Profiler chart for deep renders
Brian Vaughn committed
May 15, 2019 at 14:15 UTC
f10a6b379ca2de83bb46ee17a267d3e478776fc1
10 files changed
+101
-11
src/__tests__/__snapshots__/profilingCharts-test.js.snap
+7
@@ -70,6 +70,10 @@ Object {
70
3 => 2,
71
},
72
"maxSelfDuration": 10,
73
+ "renderPathNodes": Set {
74
+ 1,
75
+ 3,
76
+ },
77
"rows": Array [
78
Array [
79
Object {
@@ -189,6 +193,9 @@ Object {
193
3 => 2,
194
},
195
"maxSelfDuration": 10,
196
+ "renderPathNodes": Set {
197
+ 1,
198
+ },
199
"rows": Array [
200
Array [
201
Object {
src/devtools/views/Profiler/ChartNode.js
+5
-1
@@ -13,6 +13,7 @@ type Props = {|
13
onClick: (event: SyntheticMouseEvent<*>) => mixed,
14
onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
15
placeLabelAboveNode?: boolean,
16
+ textStyle?: Object,
17
width: number,
18
x: number,
19
y: number,
@@ -27,6 +28,7 @@ export default function ChartNode({
28
label,
29
onClick,
30
onDoubleClick,
31
+ textStyle,
32
width,
33
x,
34
y,
@@ -57,7 +59,9 @@ export default function ChartNode({
59
}}
60
y={height < textHeight ? -textHeight : 0}
61
>
60
- <div className={styles.Div}>{label}</div>
62
+ <div className={styles.Div} style={textStyle}>
63
+ {label}
64
+ </div>
65
</foreignObject>
66
)}
67
</g>
src/devtools/views/Profiler/CommitFlamegraph.css
+5
@@ -3,3 +3,8 @@
3
height: 100%;
4
padding: 0.5rem;
5
}
6
+
7
+.PatternPath {
8
+ stroke: var(--color-commit-did-not-render-pattern);
9
+ stroke-width: 1;
10
+}
src/devtools/views/Profiler/CommitFlamegraph.js
+21
-2
@@ -1,6 +1,6 @@
1
// @flow
2
3
-import React, { useCallback, useContext, useMemo } from 'react';
3
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
4
import AutoSizer from 'react-virtualized-auto-sizer';
5
import { FixedSizeList } from 'react-window';
6
import { ProfilerContext } from './ProfilerContext';
@@ -152,7 +152,7 @@ function CommitFlamegraph({
152
return (
153
<FixedSizeList
154
height={height}
155
- innerElementType="svg"
155
+ innerElementType={InnerElementType}
156
itemCount={chartData.depth}
157
itemData={itemData}
158
itemSize={barHeight}
@@ -162,3 +162,22 @@ function CommitFlamegraph({
162
</FixedSizeList>
163
);
164
}
165
+
166
+const InnerElementType = forwardRef(({ children, ...rest }, ref) => (
167
+ <svg ref={ref} {...rest}>
168
+ <defs>
169
+ <pattern
170
+ id="didNotRenderPattern"
171
+ patternUnits="userSpaceOnUse"
172
+ width="4"
173
+ height="4"
174
+ >
175
+ <path
176
+ d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2"
177
+ className={styles.PatternPath}
178
+ />
179
+ </pattern>
180
+ </defs>
181
+ {children}
182
+ </svg>
183
+));
src/devtools/views/Profiler/CommitFlamegraphListItem.js
+8
-2
@@ -23,7 +23,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
23
selectFiber,
24
width,
25
} = data;
26
- const { maxSelfDuration, rows } = chartData;
26
+ const { renderPathNodes, maxSelfDuration, rows } = chartData;
27
28
const handleClick = useCallback(
29
(event: SyntheticMouseEvent<*>, id: number, name: string) => {
@@ -76,9 +76,14 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
76
return null;
77
}
78
79
- let color = 'var(--color-commit-did-not-render)';
79
+ let color = 'url(#didNotRenderPattern)';
80
+ let textColor = 'var(--color-commit-did-not-render-pattern-text)';
81
if (didRender) {
82
color = getGradientColor(selfDuration / maxSelfDuration);
83
+ textColor = 'var(--color-commit-gradient-text)';
84
+ } else if (renderPathNodes.has(id)) {
85
+ color = 'var(--color-commit-did-not-render-fill)';
86
+ textColor = 'var(--color-commit-did-not-render-fill-text)';
87
}
88
89
return (
@@ -89,6 +94,7 @@ function CommitFlamegraphListItem({ data, index, style }: Props) {
94
key={id}
95
label={label}
96
onClick={event => handleClick(event, id, name)}
97
+ textStyle={{ color: textColor }}
98
width={nodeWidth}
99
x={nodeOffset - selectedNodeOffset}
100
y={top}
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+21
@@ -21,6 +21,7 @@ export type ChartData = {|
21
depth: number,
22
idToDepthMap: Map<number, number>,
23
maxSelfDuration: number,
24
+ renderPathNodes: Set<number>,
25
rows: Array<Array<ChartNode>>,
26
|};
27
@@ -44,6 +45,7 @@ export function getChartData({
45
}
46
47
const idToDepthMap: Map<number, number> = new Map();
48
+ const renderPathNodes: Set<number> = new Set();
49
const rows: Array<Array<ChartNode>> = [];
50
51
let maxDepth = 0;
@@ -129,11 +131,30 @@ export function getChartData({
131
walkTree(id, baseDuration, 1);
132
}
133
134
+ actualDurations.forEach((duration, id) => {
135
+ const node = nodes.get(id);
136
+ if (node != null) {
137
+ let currentID = node.parentID;
138
+ while (currentID !== 0) {
139
+ if (renderPathNodes.has(currentID)) {
140
+ // We've already walked this path; we can skip it.
141
+ break;
142
+ } else {
143
+ renderPathNodes.add(currentID);
144
+ }
145
+
146
+ const node = nodes.get(currentID);
147
+ currentID = node != null ? node.parentID : 0;
148
+ }
149
+ }
150
+ });
151
+
152
const chartData = {
153
baseDuration,
154
depth: maxDepth,
155
idToDepthMap,
156
maxSelfDuration,
157
+ renderPathNodes,
158
rows,
159
};
160
src/devtools/views/Profiler/InteractionListItem.css
+4
-2
@@ -28,7 +28,8 @@
28
.InteractionLine {
29
position: absolute;
30
height: 3px;
31
- background-color: var(--color-commit-did-not-render);
31
+ background-color: var(--color-commit-did-not-render-fill);
32
+ color: var(--color-commit-did-not-render-fill-text);
33
border-radius: 0.125rem;
34
}
35
@@ -36,6 +37,7 @@
37
position: absolute;
38
width: var(--interaction-commit-size);
39
height: var(--interaction-commit-size);
39
- background-color: var(--color-commit-did-not-render);
40
+ background-color: var(--color-commit-did-not-render-fill);
41
+ color: var(--color-commit-did-not-render-fill-text);
42
cursor: pointer;
43
}
src/devtools/views/Profiler/SnapshotCommitListItem.css
+2
-1
@@ -11,5 +11,6 @@
11
.Inner {
12
width: 100%;
13
min-height: 5px;
14
- background-color: var(--color-commit-did-not-render);
14
+ background-color: var(--color-commit-did-not-render-fill);
15
+ color: var(--color-commit-did-not-render-fill-text);
16
}
src/devtools/views/Settings/SettingsContext.js
+20
-1
@@ -214,7 +214,26 @@ function updateThemeVariables(
214
updateStyleHelper(theme, 'color-button-disabled', documentElements);
215
updateStyleHelper(theme, 'color-button-focus', documentElements);
216
updateStyleHelper(theme, 'color-button-hover', documentElements);
217
- updateStyleHelper(theme, 'color-commit-did-not-render', documentElements);
217
+ updateStyleHelper(
218
+ theme,
219
+ 'color-commit-did-not-render-fill',
220
+ documentElements
221
+ );
222
+ updateStyleHelper(
223
+ theme,
224
+ 'color-commit-did-not-render-fill-text',
225
+ documentElements
226
+ );
227
+ updateStyleHelper(
228
+ theme,
229
+ 'color-commit-did-not-render-pattern',
230
+ documentElements
231
+ );
232
+ updateStyleHelper(
233
+ theme,
234
+ 'color-commit-did-not-render-pattern-text',
235
+ documentElements
236
+ );
237
updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
238
updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
239
updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
src/devtools/views/root.css
+8
-2
@@ -19,7 +19,10 @@
19
--light-color-button-focus: #23272f;
20
--light-color-button-hover: #23272f;
21
--light-color-border: #eeeeee;
22
- --light-color-commit-did-not-render: #cfd1d5;
22
+ --light-color-commit-did-not-render-fill: #cfd1d5;
23
+ --light-color-commit-did-not-render-fill-text: #000000;
24
+ --light-color-commit-did-not-render-pattern: #cfd1d5;
25
+ --light-color-commit-did-not-render-pattern-text: #000000;
26
--light-color-commit-gradient-0: #37afa9;
27
--light-color-commit-gradient-1: #63b19e;
28
--light-color-commit-gradient-2: #80b393;
@@ -73,7 +76,10 @@
76
--dark-color-button-focus: #a2e9fc;
77
--dark-color-button-hover: #ededed;
78
--dark-color-border: #3d424a;
76
- --dark-color-commit-did-not-render: #777d88;
79
+ --dark-color-commit-did-not-render-fill: #777d88;
80
+ --dark-color-commit-did-not-render-fill-text: #000000;
81
+ --dark-color-commit-did-not-render-pattern: #666c77;
82
+ --dark-color-commit-did-not-render-pattern-text: #ffffff;
83
--dark-color-commit-gradient-0: #37afa9;
84
--dark-color-commit-gradient-1: #63b19e;
85
--dark-color-commit-gradient-2: #80b393;