{"parents":["392253a774f33c0b8e2e25757ca6d6aa0ab48fce"],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\nindex 8b79a30916..6b839a39f7 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\n@@ -32,9 +32,9 @@ import {\n } from '.\/utils\/positioning';\n import {\n COLORS,\n- FLAMECHART_FONT_SIZE,\n+ FONT_SIZE,\n FLAMECHART_FRAME_HEIGHT,\n- FLAMECHART_TEXT_PADDING,\n+ TEXT_PADDING,\n COLOR_HOVER_DIM_DELTA,\n BORDER_SIZE,\n } from '.\/constants';\n@@ -157,7 +157,7 @@ class FlamechartStackLayerView extends View {\n \n context.textAlign = 'left';\n context.textBaseline = 'middle';\n- context.font = `${FLAMECHART_FONT_SIZE}px sans-serif`;\n+ context.font = `${FONT_SIZE}px sans-serif`;\n \n const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);\n \n@@ -195,15 +195,15 @@ class FlamechartStackLayerView extends View {\n drawableRect.size.height,\n );\n \n- if (width > FLAMECHART_TEXT_PADDING * 2) {\n+ if (width > TEXT_PADDING * 2) {\n const trimmedName = trimFlamechartText(\n context,\n name,\n- width - FLAMECHART_TEXT_PADDING * 2 + (x < 0 ? x : 0),\n+ width - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n );\n \n if (trimmedName !== null) {\n- context.fillStyle = COLORS.FLAME_GRAPH_LABEL;\n+ context.fillStyle = COLORS.TEXT_COLOR;\n \n \/\/ Prevent text from being drawn outside `viewableArea`\n const textOverflowsViewableArea = !rectEqualToRect(\n@@ -225,7 +225,7 @@ class FlamechartStackLayerView extends View {\n \n context.fillText(\n trimmedName,\n- nodeRect.origin.x + FLAMECHART_TEXT_PADDING - (x < 0 ? x : 0),\n+ nodeRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),\n nodeRect.origin.y + FLAMECHART_FRAME_HEIGHT \/ 2,\n );\n \ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\nindex 97d4369753..3666f64539 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\n@@ -11,9 +11,10 @@ import type {NativeEvent, ReactProfilerData} from '..\/types';\n import type {Interaction, MouseMoveInteraction, Rect, Size} from '..\/view-base';\n \n import {\n+ durationToWidth,\n positioningScaleFactor,\n- timestampToPosition,\n positionToTimestamp,\n+ timestampToPosition,\n } from '.\/utils\/positioning';\n import {\n View,\n@@ -24,28 +25,77 @@ import {\n } from '..\/view-base';\n import {\n COLORS,\n- EVENT_ROW_PADDING,\n- EVENT_DIAMETER,\n+ TEXT_PADDING,\n+ NATIVE_EVENT_HEIGHT,\n+ FONT_SIZE,\n BORDER_SIZE,\n } from '.\/constants';\n \n-const EVENT_ROW_HEIGHT_FIXED =\n- EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;\n+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;\n+\n+\/\/ TODO (scheduling profiler) Make this a reusable util\n+const cachedFlamechartTextWidths = new Map();\n+const trimFlamechartText = (\n+ context: CanvasRenderingContext2D,\n+ text: string,\n+ width: number,\n+) => {\n+ for (let i = text.length - 1; i >= 0; i--) {\n+ const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';\n+\n+ let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);\n+ if (measuredWidth == null) {\n+ measuredWidth = context.measureText(trimmedText).width;\n+ cachedFlamechartTextWidths.set(trimmedText, measuredWidth);\n+ }\n+\n+ if (measuredWidth <= width) {\n+ return trimmedText;\n+ }\n+ }\n+\n+ return null;\n+};\n \n export class NativeEventsView extends View {\n- _profilerData: ReactProfilerData;\n+ _depthToNativeEvent: Map;\n+ _hoveredEvent: NativeEvent | null = null;\n _intrinsicSize: Size;\n+ _maxDepth: number = 0;\n+ _profilerData: ReactProfilerData;\n \n- _hoveredEvent: NativeEvent | null = null;\n onHover: ((event: NativeEvent | null) => void) | null = null;\n \n constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n super(surface, frame);\n+\n this._profilerData = profilerData;\n \n+ this._performPreflightComputations();\n+ console.log(this._depthToNativeEvent);\n+ }\n+\n+ _performPreflightComputations() {\n+ this._depthToNativeEvent = new Map();\n+\n+ const {duration, nativeEvents} = this._profilerData;\n+\n+ nativeEvents.forEach(event => {\n+ const depth = event.depth;\n+\n+ this._maxDepth = Math.max(this._maxDepth, depth);\n+\n+ if (!this._depthToNativeEvent.has(depth)) {\n+ this._depthToNativeEvent.set(depth, [event]);\n+ } else {\n+ \/\/ $FlowFixMe This is unnecessary.\n+ this._depthToNativeEvent.get(depth).push(event);\n+ }\n+ });\n+\n this._intrinsicSize = {\n- width: this._profilerData.duration,\n- height: EVENT_ROW_HEIGHT_FIXED,\n+ width: duration,\n+ height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,\n };\n }\n \n@@ -73,7 +123,9 @@ export class NativeEventsView extends View {\n showHoverHighlight: boolean,\n ) {\n const {frame} = this;\n- const {duration, timestamp} = event;\n+ const {depth, duration, highlight, timestamp, type} = event;\n+\n+ baseY += depth * ROW_WITH_BORDER_HEIGHT;\n \n const xStart = timestampToPosition(timestamp, scaleFactor, frame);\n const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);\n@@ -82,25 +134,60 @@ export class NativeEventsView extends View {\n x: xStart,\n y: baseY,\n },\n- size: {width: xStop - xStart, height: EVENT_DIAMETER},\n+ size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},\n };\n if (!rectIntersectsRect(eventRect, rect)) {\n return; \/\/ Not in view\n }\n \n- const fillStyle = showHoverHighlight\n- ? COLORS.NATIVE_EVENT_HOVER\n- : COLORS.NATIVE_EVENT;\n+ const width = durationToWidth(duration, scaleFactor);\n+ if (width < 1) {\n+ return; \/\/ Too small to render at this zoom level\n+ }\n \n const drawableRect = intersectionOfRects(eventRect, rect);\n context.beginPath();\n- context.fillStyle = fillStyle;\n+ if (highlight) {\n+ context.fillStyle = showHoverHighlight\n+ ? COLORS.NATIVE_EVENT_WARNING_HOVER\n+ : COLORS.NATIVE_EVENT_WARNING;\n+ } else {\n+ context.fillStyle = showHoverHighlight\n+ ? COLORS.NATIVE_EVENT_HOVER\n+ : COLORS.NATIVE_EVENT;\n+ }\n context.fillRect(\n drawableRect.origin.x,\n drawableRect.origin.y,\n drawableRect.size.width,\n drawableRect.size.height,\n );\n+\n+ \/\/ Render event type label\n+ context.textAlign = 'left';\n+ context.textBaseline = 'middle';\n+ context.font = `${FONT_SIZE}px sans-serif`;\n+\n+ if (width > TEXT_PADDING * 2) {\n+ const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));\n+ const trimmedName = trimFlamechartText(\n+ context,\n+ type,\n+ width - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n+ );\n+\n+ if (trimmedName !== null) {\n+ context.fillStyle = highlight\n+ ? COLORS.NATIVE_EVENT_WARNING_TEXT\n+ : COLORS.TEXT_COLOR;\n+\n+ context.fillText(\n+ trimmedName,\n+ eventRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),\n+ eventRect.origin.y + NATIVE_EVENT_HEIGHT \/ 2,\n+ );\n+ }\n+ }\n }\n \n draw(context: CanvasRenderingContext2D) {\n@@ -111,7 +198,7 @@ export class NativeEventsView extends View {\n visibleArea,\n } = this;\n \n- context.fillStyle = COLORS.BACKGROUND;\n+ context.fillStyle = COLORS.PRIORITY_BACKGROUND;\n context.fillRect(\n visibleArea.origin.x,\n visibleArea.origin.y,\n@@ -120,57 +207,43 @@ export class NativeEventsView extends View {\n );\n \n \/\/ Draw events\n- const baseY = frame.origin.y + EVENT_ROW_PADDING;\n const scaleFactor = positioningScaleFactor(\n this._intrinsicSize.width,\n frame,\n );\n \n nativeEvents.forEach(event => {\n- if (event === _hoveredEvent) {\n- \/\/ Draw the highlighted items on top so they stand out.\n- \/\/ This is helpful if there are multiple (overlapping) items close to each other.\n- this._drawSingleNativeEvent(\n- context,\n- visibleArea,\n- event,\n- baseY,\n- scaleFactor,\n- true,\n- );\n- } else {\n- this._drawSingleNativeEvent(\n- context,\n- visibleArea,\n- event,\n- baseY,\n- scaleFactor,\n- false,\n- );\n- }\n+ this._drawSingleNativeEvent(\n+ context,\n+ visibleArea,\n+ event,\n+ frame.origin.y,\n+ scaleFactor,\n+ event === _hoveredEvent,\n+ );\n });\n \n- \/\/ Render bottom border.\n- \/\/ Propose border rect, check if intersects with `rect`, draw intersection.\n- const borderFrame: Rect = {\n- origin: {\n- x: frame.origin.x,\n- y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,\n- },\n- size: {\n- width: frame.size.width,\n- height: BORDER_SIZE,\n- },\n- };\n- if (rectIntersectsRect(borderFrame, visibleArea)) {\n- const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);\n- context.fillStyle = COLORS.PRIORITY_BORDER;\n- context.fillRect(\n- borderDrawableRect.origin.x,\n- borderDrawableRect.origin.y,\n- borderDrawableRect.size.width,\n- borderDrawableRect.size.height,\n- );\n+ \/\/ Render bottom borders.\n+ for (let i = 0; i <= this._maxDepth; i++) {\n+ const borderFrame: Rect = {\n+ origin: {\n+ x: frame.origin.x,\n+ y: frame.origin.y + NATIVE_EVENT_HEIGHT,\n+ },\n+ size: {\n+ width: frame.size.width,\n+ height: BORDER_SIZE,\n+ },\n+ };\n+ if (rectIntersectsRect(borderFrame, visibleArea)) {\n+ context.fillStyle = COLORS.PRIORITY_BORDER;\n+ context.fillRect(\n+ visibleArea.origin.x,\n+ frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,\n+ visibleArea.size.width,\n+ BORDER_SIZE,\n+ );\n+ }\n }\n }\n \n@@ -189,25 +262,26 @@ export class NativeEventsView extends View {\n return;\n }\n \n- const {nativeEvents} = this._profilerData;\n-\n const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);\n const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n \n- \/\/ Find the event being hovered over.\n- \/\/\n- \/\/ Because data ranges may overlap, we want to find the last intersecting item.\n- \/\/ This will always be the one on \"top\" (the one the user is hovering over).\n- for (let index = nativeEvents.length - 1; index >= 0; index--) {\n- const nativeEvent = nativeEvents[index];\n- const {duration, timestamp} = nativeEvent;\n-\n- if (\n- hoverTimestamp >= timestamp &&\n- hoverTimestamp <= timestamp + duration\n- ) {\n- onHover(nativeEvent);\n- return;\n+ const adjustedCanvasMouseY = location.y - frame.origin.y;\n+ const depth = Math.floor(adjustedCanvasMouseY \/ ROW_WITH_BORDER_HEIGHT);\n+ const nativeEventsAtDepth = this._depthToNativeEvent.get(depth);\n+\n+ if (nativeEventsAtDepth) {\n+ \/\/ Find the event being hovered over.\n+ for (let index = nativeEventsAtDepth.length - 1; index >= 0; index--) {\n+ const nativeEvent = nativeEventsAtDepth[index];\n+ const {duration, timestamp} = nativeEvent;\n+\n+ if (\n+ hoverTimestamp >= timestamp &&\n+ hoverTimestamp <= timestamp + duration\n+ ) {\n+ onHover(nativeEvent);\n+ return;\n+ }\n }\n }\n \ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js\nindex e67f590f6b..f76df3bed5 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js\n@@ -25,13 +25,13 @@ import {\n } from '..\/view-base';\n import {\n COLORS,\n- EVENT_ROW_PADDING,\n- EVENT_DIAMETER,\n+ TOP_ROW_PADDING,\n+ REACT_EVENT_DIAMETER,\n BORDER_SIZE,\n } from '.\/constants';\n \n const EVENT_ROW_HEIGHT_FIXED =\n- EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;\n+ TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;\n \n function isSuspenseEvent(event: ReactEvent): boolean %checks {\n return (\n@@ -85,13 +85,13 @@ export class ReactEventsView extends View {\n const {timestamp, type} = event;\n \n const x = timestampToPosition(timestamp, scaleFactor, frame);\n- const radius = EVENT_DIAMETER \/ 2;\n+ const radius = REACT_EVENT_DIAMETER \/ 2;\n const eventRect: Rect = {\n origin: {\n x: x - radius,\n y: baseY,\n },\n- size: {width: EVENT_DIAMETER, height: EVENT_DIAMETER},\n+ size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},\n };\n if (!rectIntersectsRect(eventRect, rect)) {\n return; \/\/ Not in view\n@@ -156,7 +156,7 @@ export class ReactEventsView extends View {\n );\n \n \/\/ Draw events\n- const baseY = frame.origin.y + EVENT_ROW_PADDING;\n+ const baseY = frame.origin.y + TOP_ROW_PADDING;\n const scaleFactor = positioningScaleFactor(\n this._intrinsicSize.width,\n frame,\n@@ -246,7 +246,7 @@ export class ReactEventsView extends View {\n );\n const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n const eventTimestampAllowance = widthToDuration(\n- EVENT_DIAMETER \/ 2,\n+ REACT_EVENT_DIAMETER \/ 2,\n scaleFactor,\n );\n \ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\nindex 46fbe51bb8..61e804223a 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n@@ -54,7 +54,7 @@ export class ReactMeasuresView extends View {\n \n _performPreflightComputations() {\n this._lanesToRender = [];\n- this._laneToMeasures = new Map();\n+ this._laneToMeasures = new Map();\n \n for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {\n const measuresForLane = getMeasuresForLane(\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/TimeAxisMarkersView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/TimeAxisMarkersView.js\nindex 4f55494282..47913dbb22 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/TimeAxisMarkersView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/TimeAxisMarkersView.js\n@@ -25,7 +25,7 @@ import {\n COLORS,\n INTERVAL_TIMES,\n LABEL_SIZE,\n- MARKER_FONT_SIZE,\n+ FONT_SIZE,\n MARKER_HEIGHT,\n MARKER_TEXT_PADDING,\n MARKER_TICK_HEIGHT,\n@@ -129,7 +129,7 @@ export class TimeAxisMarkersView extends View {\n context.fillStyle = COLORS.TIME_MARKER_LABEL;\n context.textAlign = 'right';\n context.textBaseline = 'middle';\n- context.font = `${MARKER_FONT_SIZE}px sans-serif`;\n+ context.font = `${FONT_SIZE}px sans-serif`;\n context.fillText(\n `${markerLabel}ms`,\n x - MARKER_TEXT_PADDING,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\nindex 4a73c48aae..7a822716db 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n@@ -25,13 +25,13 @@ import {\n } from '..\/view-base';\n import {\n COLORS,\n- EVENT_ROW_PADDING,\n+ TOP_ROW_PADDING,\n USER_TIMING_MARK_SIZE,\n BORDER_SIZE,\n } from '.\/constants';\n \n const ROW_HEIGHT_FIXED =\n- EVENT_ROW_PADDING + USER_TIMING_MARK_SIZE + EVENT_ROW_PADDING;\n+ TOP_ROW_PADDING + USER_TIMING_MARK_SIZE + TOP_ROW_PADDING;\n \n export class UserTimingMarksView extends View {\n _marks: UserTimingMark[];\n@@ -125,7 +125,7 @@ export class UserTimingMarksView extends View {\n );\n \n \/\/ Draw marks\n- const baseY = frame.origin.y + EVENT_ROW_PADDING;\n+ const baseY = frame.origin.y + TOP_ROW_PADDING;\n const scaleFactor = positioningScaleFactor(\n this._intrinsicSize.width,\n frame,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\nindex 6581bed312..da38348926 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\n@@ -8,12 +8,19 @@\n *\/\n \n export const LABEL_SIZE = 80;\n-export const LABEL_FONT_SIZE = 11;\n export const MARKER_HEIGHT = 20;\n export const MARKER_TICK_HEIGHT = 8;\n-export const MARKER_FONT_SIZE = 10;\n+export const FONT_SIZE = 10;\n export const MARKER_TEXT_PADDING = 8;\n export const COLOR_HOVER_DIM_DELTA = 5;\n+export const TOP_ROW_PADDING = 4;\n+export const NATIVE_EVENT_HEIGHT = 14;\n+export const REACT_EVENT_DIAMETER = 6;\n+export const USER_TIMING_MARK_SIZE = 8;\n+export const REACT_MEASURE_HEIGHT = 9;\n+export const BORDER_SIZE = 1;\n+export const FLAMECHART_FRAME_HEIGHT = 14;\n+export const TEXT_PADDING = 3;\n \n export const INTERVAL_TIMES = [\n 1,\n@@ -31,22 +38,14 @@ export const INTERVAL_TIMES = [\n ];\n export const MIN_INTERVAL_SIZE_PX = 70;\n \n-export const EVENT_ROW_PADDING = 4;\n-export const EVENT_DIAMETER = 6;\n-export const USER_TIMING_MARK_SIZE = 8;\n-export const REACT_MEASURE_HEIGHT = 9;\n-export const BORDER_SIZE = 1;\n-\n-export const FLAMECHART_FONT_SIZE = 10;\n-export const FLAMECHART_FRAME_HEIGHT = 16;\n-export const FLAMECHART_TEXT_PADDING = 3;\n-\n \/\/ TODO Replace this with \"export let\" vars\n export let COLORS = {\n BACKGROUND: '',\n- FLAME_GRAPH_LABEL: '',\n NATIVE_EVENT: '',\n NATIVE_EVENT_HOVER: '',\n+ NATIVE_EVENT_WARNING: '',\n+ NATIVE_EVENT_WARNING_HOVER: '',\n+ NATIVE_EVENT_WARNING_TEXT: '',\n PRIORITY_BACKGROUND: '',\n PRIORITY_BORDER: '',\n PRIORITY_LABEL: '',\n@@ -75,6 +74,7 @@ export let COLORS = {\n REACT_SUSPEND: '',\n REACT_SUSPEND_HOVER: '',\n REACT_WORK_BORDER: '',\n+ TEXT_COLOR: '',\n TIME_MARKER_LABEL: '',\n };\n \n@@ -83,15 +83,21 @@ export function updateColorsToMatchTheme(): void {\n \n COLORS = {\n BACKGROUND: computedStyle.getPropertyValue('--color-background'),\n- FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(\n- '--color-scheduling-profiler-flame-graph-label',\n- ),\n NATIVE_EVENT: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-native-event',\n ),\n NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-native-event-hover',\n ),\n+ NATIVE_EVENT_WARNING: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-native-event-warning',\n+ ),\n+ NATIVE_EVENT_WARNING_HOVER: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-native-event-warning-hover',\n+ ),\n+ NATIVE_EVENT_WARNING_TEXT: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-native-event-warning-text',\n+ ),\n PRIORITY_BACKGROUND: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-priority-background',\n ),\n@@ -172,6 +178,9 @@ export function updateColorsToMatchTheme(): void {\n REACT_WORK_BORDER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-react-work-border',\n ),\n+ TEXT_COLOR: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-text-color',\n+ ),\n TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),\n };\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\nindex 2140c40ce4..f3435745b3 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\n@@ -16,6 +16,7 @@ import type {\n Milliseconds,\n BatchUID,\n Flamechart,\n+ NativeEvent,\n ReactLane,\n ReactMeasureType,\n ReactProfilerData,\n@@ -39,6 +40,8 @@ type ProcessorState = {|\n measureStack: MeasureStackElement[],\n |};\n \n+let nativeEventStack: Array = [];\n+\n \/\/ Exported for tests\n export function getLanesFromTransportDecimalBitmask(\n laneBitmaskString: string,\n@@ -178,15 +181,37 @@ function processTimelineEvent(\n }\n }\n \n- const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n+ const timestamp = (ts - currentProfilerData.startTime) \/ 1000;\n const duration = event.dur \/ 1000;\n \n- \/\/ TODO (scheduling profiler) Should we filter out certain event types?\n- currentProfilerData.nativeEvents.push({\n+ let depth = 0;\n+\n+ while (nativeEventStack.length > 0) {\n+ const prevNativeEvent = nativeEventStack[nativeEventStack.length - 1];\n+ const prevStopTime =\n+ prevNativeEvent.timestamp + prevNativeEvent.duration;\n+\n+ if (timestamp < prevStopTime) {\n+ depth = prevNativeEvent.depth + 1;\n+ break;\n+ } else {\n+ nativeEventStack.pop();\n+ }\n+ }\n+\n+ const nativeEvent = {\n+ depth,\n duration,\n- timestamp: startTime,\n+ highlight: false,\n+ timestamp,\n type,\n- });\n+ };\n+\n+ currentProfilerData.nativeEvents.push(nativeEvent);\n+\n+ \/\/ Keep track of curent event in case future ones overlap.\n+ \/\/ We separate them into different vertical lanes in this case.\n+ nativeEventStack.push(nativeEvent);\n }\n break;\n case 'blink.user_timing':\n@@ -309,6 +334,15 @@ function processTimelineEvent(\n currentProfilerData,\n state,\n );\n+\n+ for (let i = 0; i < nativeEventStack.length; i++) {\n+ const nativeEvent = nativeEventStack[i];\n+ const stopTime = nativeEvent.timestamp + nativeEvent.duration;\n+ if (stopTime > startTime) {\n+ \/\/ Warn about sync updates that happen an event handler.\n+ nativeEvent.highlight = true;\n+ }\n+ }\n } else if (\n name.startsWith('--render-stop') ||\n name.startsWith('--render-yield')\n@@ -470,6 +504,8 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {\n export default function preprocessData(\n timeline: TimelineEvent[],\n ): ReactProfilerData {\n+ nativeEventStack = [];\n+\n const flamechart = preprocessFlamechart(timeline);\n \n const profilerData: ReactProfilerData = {\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 3047e7abae..ece7d66034 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -22,7 +22,9 @@ export type Milliseconds = number;\n export type ReactLane = number;\n \n export type NativeEvent = {|\n+ +depth: number,\n +duration: Milliseconds,\n+ highlight: boolean,\n +timestamp: Milliseconds,\n +type: string,\n |};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 8967cca0f2..e3fbec773d 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -418,7 +418,7 @@ export function updateThemeVariables(\n updateStyleHelper(theme, 'color-search-match-current', documentElements);\n updateStyleHelper(\n theme,\n- 'color-scheduling-profiler-flame-graph-label',\n+ 'color-scheduling-profiler-text-color',\n documentElements,\n );\n updateStyleHelper(\n@@ -431,6 +431,21 @@ export function updateThemeVariables(\n 'color-scheduling-profiler-native-event-hover',\n documentElements,\n );\n+ updateStyleHelper(\n+ theme,\n+ 'color-scheduling-profiler-native-event-warning',\n+ documentElements,\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-scheduling-profiler-native-event-warning-hover',\n+ documentElements,\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-scheduling-profiler-native-event-warning-text',\n+ documentElements,\n+ );\n updateStyleHelper(\n theme,\n 'color-selected-tree-highlight-active',\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\nindex 13f67daba2..7d69b4536a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n@@ -78,9 +78,11 @@\n --light-color-record-hover: #3578e5;\n --light-color-record-inactive: #0088fa;\n --light-color-resize-bar: #cccccc;\n- --light-color-scheduling-profiler-flame-graph-label: #000000;\n- --light-color-scheduling-profiler-native-event: #aaaaaa;\n- --light-color-scheduling-profiler-native-event-hover: #888888;\n+ --light-color-scheduling-profiler-native-event: #ccc;\n+ --light-color-scheduling-profiler-native-event-hover: #aaa;\n+ --light-color-scheduling-profiler-native-event-warning: #ee1638;\n+ --light-color-scheduling-profiler-native-event-warning-hover: #da1030;\n+ --light-color-scheduling-profiler-native-event-warning-text: #fff;\n --light-color-scheduling-profiler-priority-background: #f6f6f6;\n --light-color-scheduling-profiler-priority-border: #eeeeee;\n --light-color-scheduling-profiler-user-timing: #c9cacd;\n@@ -106,6 +108,7 @@\n --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;\n --light-color-scheduling-profiler-react-suspend: #a6e59f;\n --light-color-scheduling-profiler-react-suspend-hover:#13bc00;\n+ --light-color-scheduling-profiler-text-color: #000000;\n --light-color-scheduling-profiler-react-work-border:#ffffff;\n --light-color-scroll-thumb: #c2c2c2;\n --light-color-scroll-track: #fafafa;\n@@ -200,9 +203,11 @@\n --dark-color-record-hover: #a2e9fc;\n --dark-color-record-inactive: #61dafb;\n --dark-color-resize-bar: #3d424a;\n- --dark-color-scheduling-profiler-flame-graph-label: #000000;\n- --dark-color-scheduling-profiler-native-event: #aaaaaa;\n- --dark-color-scheduling-profiler-native-event-hover: #888888;\n+ --dark-color-scheduling-profiler-native-event: #b2b2b2;\n+ --dark-color-scheduling-profiler-native-event-hover: #949494;\n+ --dark-color-scheduling-profiler-native-event-warning: #ee1638;\n+ --dark-color-scheduling-profiler-native-event-warning-hover: #da1030;\n+ --dark-color-scheduling-profiler-native-event-warning-text: #fff;\n --dark-color-scheduling-profiler-priority-background: #1d2129;\n --dark-color-scheduling-profiler-priority-border: #282c34;\n --dark-color-scheduling-profiler-user-timing: #c9cacd;\n@@ -228,6 +233,7 @@\n --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;\n --dark-color-scheduling-profiler-react-suspend: #a6e59f;\n --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;\n+ --dark-color-scheduling-profiler-text-color: #000000;\n --dark-color-scheduling-profiler-react-work-border:#ffffff;\n --dark-color-scroll-thumb: #afb3b9;\n --dark-color-scroll-track: #313640;\n","body":"Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)","commit":{"shortRevision":"c21e8fccad","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","revision":"c21e8fccadc0e0351bc45c2df729c92807a647ef","authoredAt":"2021-07-26T19:30:43-04:00","subject":"Scheduling profiler: Improve native events UI (#21966)"},"files":[{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/TimeAxisMarkersView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/types.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/root.css","status":"M"}]}

dillon1000/react

Files changed