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

Visually distinguish user timing marks from React events (#19663)

Browse Source
This commit is contained in:
Brian Vaughn
2020-08-20 14:43:40 -04:00
committed by GitHub
parent 2bea3fb0b8
commit d5ed78764f
2 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
Vendored
+14 -8
View File
@@ -26,11 +26,12 @@ import {
import {
COLORS,
EVENT_ROW_PADDING,
EVENT_DIAMETER,
USER_TIMING_MARK_SIZE,
BORDER_SIZE,
} from './constants';
const ROW_HEIGHT_FIXED = EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
const ROW_HEIGHT_FIXED =
EVENT_ROW_PADDING + USER_TIMING_MARK_SIZE + EVENT_ROW_PADDING;
export class UserTimingMarksView extends View {
_marks: UserTimingMark[];
@@ -81,13 +82,15 @@ export class UserTimingMarksView extends View {
const {timestamp} = mark;
const x = timestampToPosition(timestamp, scaleFactor, frame);
const radius = EVENT_DIAMETER / 2;
const size = USER_TIMING_MARK_SIZE;
const halfSize = size / 2;
const markRect: Rect = {
origin: {
x: x - radius,
x: x - halfSize,
y: baseY,
},
size: {width: EVENT_DIAMETER, height: EVENT_DIAMETER},
size: {width: size, height: size},
};
if (!rectIntersectsRect(markRect, rect)) {
return; // Not in view
@@ -98,11 +101,14 @@ export class UserTimingMarksView extends View {
: COLORS.USER_TIMING;
if (fillStyle !== null) {
const y = markRect.origin.y + radius;
const y = baseY + halfSize;
context.beginPath();
context.fillStyle = fillStyle;
context.arc(x, y, radius, 0, 2 * Math.PI);
context.moveTo(x, y - halfSize);
context.lineTo(x + halfSize, y);
context.lineTo(x, y + halfSize);
context.lineTo(x - halfSize, y);
context.fill();
}
}
@@ -198,7 +204,7 @@ export class UserTimingMarksView extends View {
);
const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
const markTimestampAllowance = widthToDuration(
EVENT_DIAMETER / 2,
USER_TIMING_MARK_SIZE / 2,
scaleFactor,
);
packages/react-devtools-scheduling-profiler/src/content-views/constants.js
Vendored
+1
View File
@@ -33,6 +33,7 @@ export const MIN_INTERVAL_SIZE_PX = 70;
export const EVENT_ROW_PADDING = 4;
export const EVENT_DIAMETER = 6;
export const USER_TIMING_MARK_SIZE = 8;
export const REACT_MEASURE_HEIGHT = 9;
export const BORDER_SIZE = 1;