Visually distinguish user timing marks from React events (#19663)
Brian Vaughn committed
Aug 20, 2020 at 14:43 UTC
d5ed78764fcf406d32f02de248d4c7a22843732c
2 files changed
+15
-8
packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+14
-8
@@ -26,11 +26,12 @@ import {
26
import {
27
COLORS,
28
EVENT_ROW_PADDING,
29
- EVENT_DIAMETER,
29
+ USER_TIMING_MARK_SIZE,
30
BORDER_SIZE,
31
} from './constants';
32
33
-const ROW_HEIGHT_FIXED = EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
33
+const ROW_HEIGHT_FIXED =
34
+ EVENT_ROW_PADDING + USER_TIMING_MARK_SIZE + EVENT_ROW_PADDING;
35
36
export class UserTimingMarksView extends View {
37
_marks: UserTimingMark[];
@@ -81,13 +82,15 @@ export class UserTimingMarksView extends View {
82
const {timestamp} = mark;
83
84
const x = timestampToPosition(timestamp, scaleFactor, frame);
84
- const radius = EVENT_DIAMETER / 2;
85
+ const size = USER_TIMING_MARK_SIZE;
86
+ const halfSize = size / 2;
87
+
88
const markRect: Rect = {
89
origin: {
87
- x: x - radius,
90
+ x: x - halfSize,
91
y: baseY,
92
},
90
- size: {width: EVENT_DIAMETER, height: EVENT_DIAMETER},
93
+ size: {width: size, height: size},
94
};
95
if (!rectIntersectsRect(markRect, rect)) {
96
return; // Not in view
@@ -98,11 +101,14 @@ export class UserTimingMarksView extends View {
101
: COLORS.USER_TIMING;
102
103
if (fillStyle !== null) {
101
- const y = markRect.origin.y + radius;
104
+ const y = baseY + halfSize;
105
106
context.beginPath();
107
context.fillStyle = fillStyle;
105
- context.arc(x, y, radius, 0, 2 * Math.PI);
108
+ context.moveTo(x, y - halfSize);
109
+ context.lineTo(x + halfSize, y);
110
+ context.lineTo(x, y + halfSize);
111
+ context.lineTo(x - halfSize, y);
112
context.fill();
113
}
114
}
@@ -198,7 +204,7 @@ export class UserTimingMarksView extends View {
204
);
205
const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
206
const markTimestampAllowance = widthToDuration(
201
- EVENT_DIAMETER / 2,
207
+ USER_TIMING_MARK_SIZE / 2,
208
scaleFactor,
209
);
210
packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+1
@@ -33,6 +33,7 @@ export const MIN_INTERVAL_SIZE_PX = 70;
33
34
export const EVENT_ROW_PADDING = 4;
35
export const EVENT_DIAMETER = 6;
36
+export const USER_TIMING_MARK_SIZE = 8;
37
export const REACT_MEASURE_HEIGHT = 9;
38
export const BORDER_SIZE = 1;
39