Skip to content

Commit 6e43ad5

Browse files
author
Brian Vaughn
committed
Scheduling Profiler: Add marks for component effects (mount and unmount)
This enables the Scheduling Profiler to be used to drill down into components that have long effects without requiring users to drill into the CPU sample flame chart (assuming that's even part of the profiler). It's nice to avoid this flame chart because it has a lot of React internals in it.
1 parent 930c9e7 commit 6e43ad5

File tree

10 files changed

+649
-127
lines changed

10 files changed

+649
-127
lines changed

‎packages/react-devtools-scheduling-profiler/src/EventTooltip.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,26 @@ const TooltipReactComponentMeasure = ({
140140
}: {|
141141
componentMeasure: ReactComponentMeasure,
142142
|}) => {
143-
const {componentName, duration, timestamp, warning} = componentMeasure;
143+
const {componentName, duration, timestamp, type, warning} = componentMeasure;
144144

145-
const label = `${componentName} rendered`;
145+
let label = componentName;
146+
switch (type) {
147+
case 'render':
148+
label += ' rendered';
149+
break;
150+
case 'layout-effect-mount':
151+
label += ' mounted layout effect';
152+
break;
153+
case 'layout-effect-unmount':
154+
label += ' unmounted layout effect';
155+
break;
156+
case 'passive-effect-mount':
157+
label += ' mounted passive effect';
158+
break;
159+
case 'passive-effect-unmount':
160+
label += ' unmounted passive effect';
161+
break;
162+
}
146163

147164
return (
148165
<>

‎packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,13 @@ export class ComponentMeasuresView extends View {
7676
showHoverHighlight: boolean,
7777
): boolean {
7878
const {frame} = this;
79-
const {componentName, duration, timestamp, warning} = componentMeasure;
79+
const {
80+
componentName,
81+
duration,
82+
timestamp,
83+
type,
84+
warning,
85+
} = componentMeasure;
8086

8187
const xStart = timestampToPosition(timestamp, scaleFactor, frame);
8288
const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
@@ -96,16 +102,53 @@ export class ComponentMeasuresView extends View {
96102
return false; // Too small to render at this zoom level
97103
}
98104

105+
let textFillStyle = ((null: any): string);
106+
let typeLabel = ((null: any): string);
107+
99108
const drawableRect = intersectionOfRects(componentMeasureRect, rect);
100109
context.beginPath();
101110
if (warning !== null) {
102111
context.fillStyle = showHoverHighlight
103112
? COLORS.WARNING_BACKGROUND_HOVER
104113
: COLORS.WARNING_BACKGROUND;
105114
} else {
106-
context.fillStyle = showHoverHighlight
107-
? COLORS.REACT_COMPONENT_MEASURE_HOVER
108-
: COLORS.REACT_COMPONENT_MEASURE;
115+
switch (type) {
116+
case 'render':
117+
context.fillStyle = showHoverHighlight
118+
? COLORS.REACT_RENDER_HOVER
119+
: COLORS.REACT_RENDER;
120+
textFillStyle = COLORS.REACT_RENDER_TEXT;
121+
typeLabel = 'rendered';
122+
break;
123+
case 'layout-effect-mount':
124+
context.fillStyle = showHoverHighlight
125+
? COLORS.REACT_LAYOUT_EFFECTS_HOVER
126+
: COLORS.REACT_LAYOUT_EFFECTS;
127+
textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
128+
typeLabel = 'mounted layout effect';
129+
break;
130+
case 'layout-effect-unmount':
131+
context.fillStyle = showHoverHighlight
132+
? COLORS.REACT_LAYOUT_EFFECTS_HOVER
133+
: COLORS.REACT_LAYOUT_EFFECTS;
134+
textFillStyle = COLORS.REACT_LAYOUT_EFFECTS_TEXT;
135+
typeLabel = 'unmounted layout effect';
136+
break;
137+
case 'passive-effect-mount':
138+
context.fillStyle = showHoverHighlight
139+
? COLORS.REACT_PASSIVE_EFFECTS_HOVER
140+
: COLORS.REACT_PASSIVE_EFFECTS;
141+
textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
142+
typeLabel = 'mounted passive effect';
143+
break;
144+
case 'passive-effect-unmount':
145+
context.fillStyle = showHoverHighlight
146+
? COLORS.REACT_PASSIVE_EFFECTS_HOVER
147+
: COLORS.REACT_PASSIVE_EFFECTS;
148+
textFillStyle = COLORS.REACT_PASSIVE_EFFECTS_TEXT;
149+
typeLabel = 'unmounted passive effect';
150+
break;
151+
}
109152
}
110153
context.fillRect(
111154
drawableRect.origin.x,
@@ -114,9 +157,11 @@ export class ComponentMeasuresView extends View {
114157
drawableRect.size.height,
115158
);
116159

117-
const label = `${componentName} rendered - ${formatDuration(duration)}`;
160+
const label = `${componentName} ${typeLabel} - ${formatDuration(duration)}`;
118161

119-
drawText(label, context, componentMeasureRect, drawableRect);
162+
drawText(label, context, componentMeasureRect, drawableRect, {
163+
fillStyle: textFillStyle,
164+
});
120165

121166
return true;
122167
}

‎packages/react-devtools-scheduling-profiler/src/content-views/constants.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,6 @@ export let COLORS = {
5656
PRIORITY_LABEL: '',
5757
USER_TIMING: '',
5858
USER_TIMING_HOVER: '',
59-
REACT_COMPONENT_MEASURE: '',
60-
REACT_COMPONENT_MEASURE_HOVER: '',
6159
REACT_IDLE: '',
6260
REACT_IDLE_HOVER: '',
6361
REACT_RENDER: '',
@@ -138,12 +136,6 @@ export function updateColorsToMatchTheme(element: Element): boolean {
138136
USER_TIMING_HOVER: computedStyle.getPropertyValue(
139137
'--color-scheduling-profiler-user-timing-hover',
140138
),
141-
REACT_COMPONENT_MEASURE: computedStyle.getPropertyValue(
142-
'--color-scheduling-profiler-react-render',
143-
),
144-
REACT_COMPONENT_MEASURE_HOVER: computedStyle.getPropertyValue(
145-
'--color-scheduling-profiler-react-render-hover',
146-
),
147139
REACT_IDLE: computedStyle.getPropertyValue(
148140
'--color-scheduling-profiler-react-idle',
149141
),

‎packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -835,7 +835,7 @@ describe('preprocessData', () => {
835835
Object {
836836
"batchUID": 0,
837837
"depth": 0,
838-
"duration": 0.0019999999999999983,
838+
"duration": 0.004,
839839
"lanes": Array [
840840
4,
841841
],
@@ -847,11 +847,11 @@ describe('preprocessData', () => {
847847
Object {
848848
"batchUID": 1,
849849
"depth": 0,
850-
"duration": 0.010000000000000002,
850+
"duration": 0.009999999999999998,
851851
"lanes": Array [
852852
4,
853853
],
854-
"timestamp": 0.019,
854+
"timestamp": 0.021,
855855
"type": "render-idle",
856856
},
857857
Object {
@@ -861,37 +861,37 @@ describe('preprocessData', () => {
861861
"lanes": Array [
862862
4,
863863
],
864-
"timestamp": 0.019,
864+
"timestamp": 0.021,
865865
"type": "render",
866866
},
867867
Object {
868868
"batchUID": 1,
869869
"depth": 0,
870-
"duration": 0.006000000000000002,
870+
"duration": 0.005999999999999998,
871871
"lanes": Array [
872872
4,
873873
],
874-
"timestamp": 0.023,
874+
"timestamp": 0.025,
875875
"type": "commit",
876876
},
877877
Object {
878878
"batchUID": 1,
879879
"depth": 1,
880-
"duration": 0.0010000000000000009,
880+
"duration": 0.0009999999999999974,
881881
"lanes": Array [
882882
4,
883883
],
884-
"timestamp": 0.027,
884+
"timestamp": 0.029,
885885
"type": "layout-effects",
886886
},
887887
Object {
888888
"batchUID": 1,
889889
"depth": 0,
890-
"duration": 0.0010000000000000009,
890+
"duration": 0.0030000000000000027,
891891
"lanes": Array [
892892
4,
893893
],
894-
"timestamp": 0.03,
894+
"timestamp": 0.032,
895895
"type": "passive-effects",
896896
},
897897
],
@@ -901,16 +901,32 @@ describe('preprocessData', () => {
901901
"componentName": "App",
902902
"duration": 0.001,
903903
"timestamp": 0.006,
904+
"type": "render",
905+
"warning": null,
906+
},
907+
Object {
908+
"componentName": "App",
909+
"duration": 0.0019999999999999983,
910+
"timestamp": 0.017,
911+
"type": "passive-effect-mount",
904912
"warning": null,
905913
},
906914
Object {
907915
"componentName": "App",
908916
"duration": 0.0010000000000000009,
909-
"timestamp": 0.02,
917+
"timestamp": 0.022,
918+
"type": "render",
919+
"warning": null,
920+
},
921+
Object {
922+
"componentName": "App",
923+
"duration": 0.0010000000000000009,
924+
"timestamp": 0.033,
925+
"type": "passive-effect-mount",
910926
"warning": null,
911927
},
912928
],
913-
"duration": 0.031,
929+
"duration": 0.035,
914930
"flamechart": Array [],
915931
"laneToLabelMap": Map {
916932
0 => "Sync",
@@ -994,7 +1010,7 @@ describe('preprocessData', () => {
9941010
Object {
9951011
"batchUID": 0,
9961012
"depth": 0,
997-
"duration": 0.0019999999999999983,
1013+
"duration": 0.004,
9981014
"lanes": Array [
9991015
4,
10001016
],
@@ -1004,11 +1020,11 @@ describe('preprocessData', () => {
10041020
Object {
10051021
"batchUID": 1,
10061022
"depth": 0,
1007-
"duration": 0.010000000000000002,
1023+
"duration": 0.009999999999999998,
10081024
"lanes": Array [
10091025
4,
10101026
],
1011-
"timestamp": 0.019,
1027+
"timestamp": 0.021,
10121028
"type": "render-idle",
10131029
},
10141030
Object {
@@ -1018,37 +1034,37 @@ describe('preprocessData', () => {
10181034
"lanes": Array [
10191035
4,
10201036
],
1021-
"timestamp": 0.019,
1037+
"timestamp": 0.021,
10221038
"type": "render",
10231039
},
10241040
Object {
10251041
"batchUID": 1,
10261042
"depth": 0,
1027-
"duration": 0.006000000000000002,
1043+
"duration": 0.005999999999999998,
10281044
"lanes": Array [
10291045
4,
10301046
],
1031-
"timestamp": 0.023,
1047+
"timestamp": 0.025,
10321048
"type": "commit",
10331049
},
10341050
Object {
10351051
"batchUID": 1,
10361052
"depth": 1,
1037-
"duration": 0.0010000000000000009,
1053+
"duration": 0.0009999999999999974,
10381054
"lanes": Array [
10391055
4,
10401056
],
1041-
"timestamp": 0.027,
1057+
"timestamp": 0.029,
10421058
"type": "layout-effects",
10431059
},
10441060
Object {
10451061
"batchUID": 1,
10461062
"depth": 0,
1047-
"duration": 0.0010000000000000009,
1063+
"duration": 0.0030000000000000027,
10481064
"lanes": Array [
10491065
4,
10501066
],
1051-
"timestamp": 0.03,
1067+
"timestamp": 0.032,
10521068
"type": "passive-effects",
10531069
},
10541070
],
@@ -1102,7 +1118,7 @@ describe('preprocessData', () => {
11021118
"lanes": Array [
11031119
4,
11041120
],
1105-
"timestamp": 0.017,
1121+
"timestamp": 0.018,
11061122
"type": "schedule-state-update",
11071123
"warning": null,
11081124
},

0 commit comments

Comments
 (0)