{"commit":{"shortRevision":"b1811ebf01","authoredAt":"2021-07-26T10:36:16-04:00","authorEmail":"bvaughn@fb.com","revision":"b1811ebf01e174fb1e12c7f748bf1ed8aeedef0b","subject":"[DevTools] Add native events to the scheduling profiler (#21947)","authorName":"Brian Vaughn"},"parents":["4758e4533e933d29b1c3a960794eef354800f786"],"body":"","files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js"},{"status":"A","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\/constants.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.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"}],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 74f1866c20..bbf98acb26 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -44,6 +44,7 @@ import {\n } from '.\/view-base';\n import {\n FlamechartView,\n+ NativeEventsView,\n ReactEventsView,\n ReactMeasuresView,\n TimeAxisMarkersView,\n@@ -126,6 +127,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n \n const surfaceRef = useRef(new Surface());\n const userTimingMarksViewRef = useRef(null);\n+ const nativeEventsViewRef = useRef(null);\n const reactEventsViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n@@ -176,6 +178,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n topContentStack.addSubview(userTimingMarksView);\n }\n \n+ const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);\n+ nativeEventsViewRef.current = nativeEventsView;\n+ topContentStack.addSubview(nativeEventsView);\n+\n const reactEventsView = new ReactEventsView(surface, defaultFrame, data);\n reactEventsViewRef.current = reactEventsView;\n topContentStack.addSubview(reactEventsView);\n@@ -299,7 +305,24 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n setHoveredEvent({\n userTimingMark,\n- event: null,\n+ nativeEvent: null,\n+ reactEvent: null,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ data,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: nativeEventsView} = nativeEventsViewRef;\n+ if (nativeEventsView) {\n+ nativeEventsView.onHover = nativeEvent => {\n+ if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {\n+ setHoveredEvent({\n+ userTimingMark: null,\n+ nativeEvent,\n+ reactEvent: null,\n flamechartStackFrame: null,\n measure: null,\n data,\n@@ -310,11 +333,12 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n \n const {current: reactEventsView} = reactEventsViewRef;\n if (reactEventsView) {\n- reactEventsView.onHover = event => {\n- if (!hoveredEvent || hoveredEvent.event !== event) {\n+ reactEventsView.onHover = reactEvent => {\n+ if (!hoveredEvent || hoveredEvent.reactEvent !== reactEvent) {\n setHoveredEvent({\n userTimingMark: null,\n- event,\n+ nativeEvent: null,\n+ reactEvent,\n flamechartStackFrame: null,\n measure: null,\n data,\n@@ -329,7 +353,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n if (!hoveredEvent || hoveredEvent.measure !== measure) {\n setHoveredEvent({\n userTimingMark: null,\n- event: null,\n+ nativeEvent: null,\n+ reactEvent: null,\n flamechartStackFrame: null,\n measure,\n data,\n@@ -347,7 +372,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n ) {\n setHoveredEvent({\n userTimingMark: null,\n- event: null,\n+ nativeEvent: null,\n+ reactEvent: null,\n flamechartStackFrame,\n measure: null,\n data,\n@@ -368,9 +394,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n );\n }\n \n+ const {current: nativeEventsView} = nativeEventsViewRef;\n+ if (nativeEventsView) {\n+ nativeEventsView.setHoveredEvent(\n+ hoveredEvent ? hoveredEvent.nativeEvent : null,\n+ );\n+ }\n+\n const {current: reactEventsView} = reactEventsViewRef;\n if (reactEventsView) {\n- reactEventsView.setHoveredEvent(hoveredEvent ? hoveredEvent.event : null);\n+ reactEventsView.setHoveredEvent(\n+ hoveredEvent ? hoveredEvent.reactEvent : null,\n+ );\n }\n \n const {current: reactMeasuresView} = reactMeasuresViewRef;\n@@ -402,22 +437,22 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n return null;\n }\n const {\n- event,\n+ reactEvent,\n flamechartStackFrame,\n measure,\n } = contextData.hoveredEvent;\n return (\n \n- {event !== null && (\n+ {reactEvent !== null && (\n copy(event.componentName)}\n+ onClick={() => copy(reactEvent.componentName)}\n title=\"Copy component name\">\n Copy component name\n <\/ContextMenuItem>\n )}\n- {event !== null && event.componentStack && (\n+ {reactEvent !== null && reactEvent.componentStack && (\n copy(event.componentStack)}\n+ onClick={() => copy(reactEvent.componentStack)}\n title=\"Copy component stack\">\n Copy component stack\n <\/ContextMenuItem>\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\nindex b6503b7338..91e60bf13c 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n@@ -29,6 +29,7 @@\n .DetailsGridLabel {\n color: var(--color-dim);\n text-align: right;\n+ white-space: nowrap;\n }\n \n .DetailsGridURL {\n@@ -45,7 +46,7 @@\n .ComponentName {\n font-weight: bold;\n word-break: break-word;\n- margin-right: 0.4rem;\n+ margin-right: 0.25rem;\n }\n \n .ComponentStack {\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\nindex 608309c4a3..ee77c85cc8 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n@@ -10,6 +10,7 @@\n import type {Point} from '.\/view-base';\n import type {\n FlamechartStackFrame,\n+ NativeEvent,\n ReactEvent,\n ReactHoverContextInfo,\n ReactMeasure,\n@@ -47,8 +48,8 @@ function trimmedString(string: string, length: number): string {\n return string;\n }\n \n-function getReactEventLabel(type): string | null {\n- switch (type) {\n+function getReactEventLabel(event: ReactEvent): string | null {\n+ switch (event.type) {\n case 'schedule-render':\n return 'render scheduled';\n case 'schedule-state-update':\n@@ -111,10 +112,22 @@ export default function EventTooltip({data, hoveredEvent, origin}: Props) {\n return null;\n }\n \n- const {event, measure, flamechartStackFrame, userTimingMark} = hoveredEvent;\n+ const {\n+ nativeEvent,\n+ reactEvent,\n+ measure,\n+ flamechartStackFrame,\n+ userTimingMark,\n+ } = hoveredEvent;\n \n- if (event !== null) {\n- return ;\n+ if (nativeEvent !== null) {\n+ return (\n+ \n+ );\n+ } else if (reactEvent !== null) {\n+ return (\n+ \n+ );\n } else if (measure !== null) {\n return (\n ,\n+}) => {\n+ const {duration, timestamp, type} = nativeEvent;\n+\n+ return (\n+

\n+ {trimmedString(type, 768)}<\/span>\n+ event\n+

\n+

Timestamp:<\/div>\n+

{formatTimestamp(timestamp)}<\/div>\n+

Duration:<\/div>\n+

{formatDuration(duration)}<\/div>\n+ <\/div>\n+ <\/div>\n+ );\n+};\n+\n const TooltipReactEvent = ({\n- event,\n+ reactEvent,\n tooltipRef,\n }: {\n- event: ReactEvent,\n+ reactEvent: ReactEvent,\n tooltipRef: Return,\n }) => {\n- const label = getReactEventLabel(event.type);\n- const color = getReactEventColor(event);\n+ const label = getReactEventLabel(reactEvent);\n+ const color = getReactEventColor(reactEvent);\n if (!label || !color) {\n if (__DEV__) {\n- console.warn('Unexpected event type \"%s\"', event.type);\n+ console.warn('Unexpected reactEvent type \"%s\"', reactEvent.type);\n }\n return null;\n }\n \n- const {componentName, componentStack, timestamp} = event;\n+ const {componentName, componentStack, timestamp} = reactEvent;\n \n return (\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\nnew file mode 100644\nindex 0000000000..97d4369753\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\n@@ -0,0 +1,224 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {NativeEvent, ReactProfilerData} from '..\/types';\n+import type {Interaction, MouseMoveInteraction, Rect, Size} from '..\/view-base';\n+\n+import {\n+ positioningScaleFactor,\n+ timestampToPosition,\n+ positionToTimestamp,\n+} from '.\/utils\/positioning';\n+import {\n+ View,\n+ Surface,\n+ rectContainsPoint,\n+ rectIntersectsRect,\n+ intersectionOfRects,\n+} from '..\/view-base';\n+import {\n+ COLORS,\n+ EVENT_ROW_PADDING,\n+ 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+\n+export class NativeEventsView extends View {\n+ _profilerData: ReactProfilerData;\n+ _intrinsicSize: Size;\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+ this._profilerData = profilerData;\n+\n+ this._intrinsicSize = {\n+ width: this._profilerData.duration,\n+ height: EVENT_ROW_HEIGHT_FIXED,\n+ };\n+ }\n+\n+ desiredSize() {\n+ return this._intrinsicSize;\n+ }\n+\n+ setHoveredEvent(hoveredEvent: NativeEvent | null) {\n+ if (this._hoveredEvent === hoveredEvent) {\n+ return;\n+ }\n+ this._hoveredEvent = hoveredEvent;\n+ this.setNeedsDisplay();\n+ }\n+\n+ \/**\n+ * Draw a single `NativeEvent` as a circle in the canvas.\n+ *\/\n+ _drawSingleNativeEvent(\n+ context: CanvasRenderingContext2D,\n+ rect: Rect,\n+ event: NativeEvent,\n+ baseY: number,\n+ scaleFactor: number,\n+ showHoverHighlight: boolean,\n+ ) {\n+ const {frame} = this;\n+ const {duration, timestamp} = event;\n+\n+ const xStart = timestampToPosition(timestamp, scaleFactor, frame);\n+ const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);\n+ const eventRect: Rect = {\n+ origin: {\n+ x: xStart,\n+ y: baseY,\n+ },\n+ size: {width: xStop - xStart, height: EVENT_DIAMETER},\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+\n+ const drawableRect = intersectionOfRects(eventRect, rect);\n+ context.beginPath();\n+ context.fillStyle = fillStyle;\n+ context.fillRect(\n+ drawableRect.origin.x,\n+ drawableRect.origin.y,\n+ drawableRect.size.width,\n+ drawableRect.size.height,\n+ );\n+ }\n+\n+ draw(context: CanvasRenderingContext2D) {\n+ const {\n+ frame,\n+ _profilerData: {nativeEvents},\n+ _hoveredEvent,\n+ visibleArea,\n+ } = this;\n+\n+ context.fillStyle = COLORS.BACKGROUND;\n+ context.fillRect(\n+ visibleArea.origin.x,\n+ visibleArea.origin.y,\n+ visibleArea.size.width,\n+ visibleArea.size.height,\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+ });\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+ }\n+ }\n+\n+ \/**\n+ * @private\n+ *\/\n+ _handleMouseMove(interaction: MouseMoveInteraction) {\n+ const {frame, _intrinsicSize, onHover, visibleArea} = this;\n+ if (!onHover) {\n+ return;\n+ }\n+\n+ const {location} = interaction.payload;\n+ if (!rectContainsPoint(location, visibleArea)) {\n+ onHover(null);\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+ }\n+ }\n+\n+ onHover(null);\n+ }\n+\n+ handleInteraction(interaction: Interaction) {\n+ switch (interaction.type) {\n+ case 'mousemove':\n+ this._handleMouseMove(interaction);\n+ break;\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 fb60e54eb4..e67f590f6b 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@@ -100,6 +100,8 @@ export class ReactEventsView extends View {\n let fillStyle = null;\n \n switch (type) {\n+ case 'native-event':\n+ return;\n case 'schedule-render':\n case 'schedule-state-update':\n case 'schedule-force-update':\n@@ -140,7 +142,7 @@ export class ReactEventsView extends View {\n draw(context: CanvasRenderingContext2D) {\n const {\n frame,\n- _profilerData: {events},\n+ _profilerData: {reactEvents},\n _hoveredEvent,\n visibleArea,\n } = this;\n@@ -162,7 +164,7 @@ export class ReactEventsView extends View {\n \n const highlightedEvents: ReactEvent[] = [];\n \n- events.forEach(event => {\n+ reactEvents.forEach(event => {\n if (\n event === _hoveredEvent ||\n (_hoveredEvent &&\n@@ -236,7 +238,7 @@ export class ReactEventsView extends View {\n }\n \n const {\n- _profilerData: {events},\n+ _profilerData: {reactEvents},\n } = this;\n const scaleFactor = positioningScaleFactor(\n this._intrinsicSize.width,\n@@ -250,8 +252,8 @@ export class ReactEventsView extends View {\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 = events.length - 1; index >= 0; index--) {\n- const event = events[index];\n+ for (let index = reactEvents.length - 1; index >= 0; index--) {\n+ const event = reactEvents[index];\n const {timestamp} = event;\n \n if (\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 baaedebc64..6581bed312 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@@ -44,10 +44,12 @@ export const FLAMECHART_TEXT_PADDING = 3;\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 PRIORITY_BACKGROUND: '',\n PRIORITY_BORDER: '',\n PRIORITY_LABEL: '',\n- FLAME_GRAPH_LABEL: '',\n USER_TIMING: '',\n USER_TIMING_HOVER: '',\n REACT_IDLE: '',\n@@ -81,6 +83,15 @@ 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 PRIORITY_BACKGROUND: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-priority-background',\n ),\n@@ -88,9 +99,6 @@ export function updateColorsToMatchTheme(): void {\n '--color-scheduling-profiler-priority-border',\n ),\n PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),\n- FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(\n- '--color-scheduling-profiler-flame-graph-label',\n- ),\n USER_TIMING: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-user-timing',\n ),\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\nindex e017b95e20..b50490b13a 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\n@@ -8,6 +8,7 @@\n *\/\n \n export * from '.\/FlamechartView';\n+export * from '.\/NativeEventsView';\n export * from '.\/ReactEventsView';\n export * from '.\/ReactMeasuresView';\n export * from '.\/TimeAxisMarkersView';\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\nindex 128fdfb0f1..649d902469 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\n@@ -204,10 +204,11 @@ describe(preprocessData, () => {\n \n expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({\n duration: 0.002,\n- events: [],\n flamechart: [],\n measures: [],\n+ nativeEvents: [],\n otherUserTimingMarks: [],\n+ reactEvents: [],\n startTime: 1,\n });\n });\n@@ -258,15 +259,6 @@ describe(preprocessData, () => {\n ]),\n ).toStrictEqual({\n duration: 0.008,\n- events: [\n- {\n- componentStack: '',\n- laneLabels: [],\n- lanes: [9],\n- timestamp: 0.002,\n- type: 'schedule-render',\n- },\n- ],\n flamechart: [],\n measures: [\n {\n@@ -306,7 +298,17 @@ describe(preprocessData, () => {\n type: 'layout-effects',\n },\n ],\n+ nativeEvents: [],\n otherUserTimingMarks: [],\n+ reactEvents: [\n+ {\n+ componentStack: '',\n+ laneLabels: [],\n+ lanes: [9],\n+ timestamp: 0.002,\n+ type: 'schedule-render',\n+ },\n+ ],\n startTime: 1,\n });\n });\n@@ -320,15 +322,6 @@ describe(preprocessData, () => {\n const userTimingData = createUserTimingData(clearedMarks);\n expect(preprocessData(userTimingData)).toStrictEqual({\n duration: 0.011,\n- events: [\n- {\n- componentStack: '',\n- laneLabels: ['Sync'],\n- lanes: [0],\n- timestamp: 0.005,\n- type: 'schedule-render',\n- },\n- ],\n flamechart: [],\n measures: [\n {\n@@ -368,6 +361,7 @@ describe(preprocessData, () => {\n type: 'layout-effects',\n },\n ],\n+ nativeEvents: [],\n otherUserTimingMarks: [\n {\n name: '__v3',\n@@ -378,6 +372,15 @@ describe(preprocessData, () => {\n timestamp: 0.004,\n },\n ],\n+ reactEvents: [\n+ {\n+ componentStack: '',\n+ laneLabels: ['Sync'],\n+ lanes: [0],\n+ timestamp: 0.005,\n+ type: 'schedule-render',\n+ },\n+ ],\n startTime: 1,\n });\n });\n@@ -400,24 +403,6 @@ describe(preprocessData, () => {\n const userTimingData = createUserTimingData(clearedMarks);\n expect(preprocessData(userTimingData)).toStrictEqual({\n duration: 0.022,\n- events: [\n- {\n- componentStack: '',\n- laneLabels: ['Default'],\n- lanes: [4],\n- timestamp: 0.005,\n- type: 'schedule-render',\n- },\n- {\n- componentName: 'App',\n- componentStack: '',\n- isCascading: false,\n- laneLabels: ['Default'],\n- lanes: [4],\n- timestamp: 0.013,\n- type: 'schedule-state-update',\n- },\n- ],\n flamechart: [],\n measures: [\n {\n@@ -511,6 +496,7 @@ describe(preprocessData, () => {\n type: 'passive-effects',\n },\n ],\n+ nativeEvents: [],\n otherUserTimingMarks: [\n {\n name: '__v3',\n@@ -521,6 +507,24 @@ describe(preprocessData, () => {\n timestamp: 0.004,\n },\n ],\n+ reactEvents: [\n+ {\n+ componentStack: '',\n+ laneLabels: ['Default'],\n+ lanes: [4],\n+ timestamp: 0.005,\n+ type: 'schedule-render',\n+ },\n+ {\n+ componentName: 'App',\n+ componentStack: '',\n+ isCascading: false,\n+ laneLabels: ['Default'],\n+ lanes: [4],\n+ timestamp: 0.013,\n+ type: 'schedule-state-update',\n+ },\n+ ],\n startTime: 1,\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 da4153f677..2140c40ce4 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@@ -161,247 +161,275 @@ function processTimelineEvent(\n \/** Intermediate processor state. May be mutated. *\/\n state: ProcessorState,\n ) {\n- const {cat, name, ts, ph} = event;\n- if (cat !== 'blink.user_timing') {\n- return;\n- }\n-\n- const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n-\n- \/\/ React Events - schedule\n- if (name.startsWith('--schedule-render-')) {\n- const [laneBitmaskString, laneLabels, ...splitComponentStack] = name\n- .substr(18)\n- .split('-');\n- currentProfilerData.events.push({\n- type: 'schedule-render',\n- lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n- laneLabels: laneLabels ? laneLabels.split(',') : [],\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- });\n- } else if (name.startsWith('--schedule-forced-update-')) {\n- const [\n- laneBitmaskString,\n- laneLabels,\n- componentName,\n- ...splitComponentStack\n- ] = name.substr(25).split('-');\n- const isCascading = !!state.measureStack.find(\n- ({type}) => type === 'commit',\n- );\n- currentProfilerData.events.push({\n- type: 'schedule-force-update',\n- lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n- laneLabels: laneLabels ? laneLabels.split(',') : [],\n- componentName,\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- isCascading,\n- });\n- } else if (name.startsWith('--schedule-state-update-')) {\n- const [\n- laneBitmaskString,\n- laneLabels,\n- componentName,\n- ...splitComponentStack\n- ] = name.substr(24).split('-');\n- const isCascading = !!state.measureStack.find(\n- ({type}) => type === 'commit',\n- );\n- currentProfilerData.events.push({\n- type: 'schedule-state-update',\n- lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n- laneLabels: laneLabels ? laneLabels.split(',') : [],\n- componentName,\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- isCascading,\n- });\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ React Events - suspense\n- else if (name.startsWith('--suspense-suspend-')) {\n- const [id, componentName, ...splitComponentStack] = name\n- .substr(19)\n- .split('-');\n- currentProfilerData.events.push({\n- type: 'suspense-suspend',\n- id,\n- componentName,\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- });\n- } else if (name.startsWith('--suspense-resolved-')) {\n- const [id, componentName, ...splitComponentStack] = name\n- .substr(20)\n- .split('-');\n- currentProfilerData.events.push({\n- type: 'suspense-resolved',\n- id,\n- componentName,\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- });\n- } else if (name.startsWith('--suspense-rejected-')) {\n- const [id, componentName, ...splitComponentStack] = name\n- .substr(20)\n- .split('-');\n- currentProfilerData.events.push({\n- type: 'suspense-rejected',\n- id,\n- componentName,\n- componentStack: splitComponentStack.join('-'),\n- timestamp: startTime,\n- });\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ React Measures - render\n- else if (name.startsWith('--render-start-')) {\n- if (state.nextRenderShouldGenerateNewBatchID) {\n- state.nextRenderShouldGenerateNewBatchID = false;\n- state.batchUID = ((state.uidCounter++: any): BatchUID);\n- }\n- const [laneBitmaskString, laneLabels] = name.substr(15).split('-');\n- const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n- throwIfIncomplete('render', state.measureStack);\n- if (getLastType(state.measureStack) !== 'render-idle') {\n- markWorkStarted(\n- 'render-idle',\n- startTime,\n- lanes,\n- laneLabels ? laneLabels.split(',') : [],\n- currentProfilerData,\n- state,\n- );\n- }\n- markWorkStarted(\n- 'render',\n- startTime,\n- lanes,\n- laneLabels ? laneLabels.split(',') : [],\n- currentProfilerData,\n- state,\n- );\n- } else if (\n- name.startsWith('--render-stop') ||\n- name.startsWith('--render-yield')\n- ) {\n- markWorkCompleted(\n- 'render',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- } else if (name.startsWith('--render-cancel')) {\n- state.nextRenderShouldGenerateNewBatchID = true;\n- markWorkCompleted(\n- 'render',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- markWorkCompleted(\n- 'render-idle',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ React Measures - commits\n- else if (name.startsWith('--commit-start-')) {\n- state.nextRenderShouldGenerateNewBatchID = true;\n- const [laneBitmaskString, laneLabels] = name.substr(15).split('-');\n- const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n- markWorkStarted(\n- 'commit',\n- startTime,\n- lanes,\n- laneLabels ? laneLabels.split(',') : [],\n- currentProfilerData,\n- state,\n- );\n- } else if (name.startsWith('--commit-stop')) {\n- markWorkCompleted(\n- 'commit',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- markWorkCompleted(\n- 'render-idle',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ React Measures - layout effects\n- else if (name.startsWith('--layout-effects-start-')) {\n- const [laneBitmaskString, laneLabels] = name.substr(23).split('-');\n- const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n- markWorkStarted(\n- 'layout-effects',\n- startTime,\n- lanes,\n- laneLabels ? laneLabels.split(',') : [],\n- currentProfilerData,\n- state,\n- );\n- } else if (name.startsWith('--layout-effects-stop')) {\n- markWorkCompleted(\n- 'layout-effects',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ React Measures - passive effects\n- else if (name.startsWith('--passive-effects-start-')) {\n- const [laneBitmaskString, laneLabels] = name.substr(24).split('-');\n- const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n- markWorkStarted(\n- 'passive-effects',\n- startTime,\n- lanes,\n- laneLabels ? laneLabels.split(',') : [],\n- currentProfilerData,\n- state,\n- );\n- } else if (name.startsWith('--passive-effects-stop')) {\n- markWorkCompleted(\n- 'passive-effects',\n- startTime,\n- currentProfilerData,\n- state.measureStack,\n- );\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ Other user timing marks\/measures\n- else if (ph === 'R' || ph === 'n') {\n- \/\/ User Timing mark\n- currentProfilerData.otherUserTimingMarks.push({\n- name,\n- timestamp: startTime,\n- });\n- } else if (ph === 'b') {\n- \/\/ TODO: Begin user timing measure\n- } else if (ph === 'e') {\n- \/\/ TODO: End user timing measure\n- } else if (ph === 'i' || ph === 'I') {\n- \/\/ Instant events.\n- \/\/ Note that the capital \"I\" is a deprecated value that exists in Chrome Canary traces.\n- } \/\/ eslint-disable-line brace-style\n-\n- \/\/ Unrecognized event\n- else {\n- throw new InvalidProfileError(\n- `Unrecognized event ${JSON.stringify(\n- event,\n- )}! This is likely a bug in this profiler tool.`,\n- );\n+ const {args, cat, name, ts, ph} = event;\n+ switch (cat) {\n+ case 'devtools.timeline':\n+ if (name === 'EventDispatch') {\n+ const type = args.data.type;\n+\n+ if (type.startsWith('react-')) {\n+ const stackTrace = args.data.stackTrace;\n+ if (stackTrace) {\n+ const topFrame = stackTrace[stackTrace.length - 1];\n+ if (topFrame.url.includes('node_modules\/react-dom')) {\n+ \/\/ Filter out fake React events dispatched by invokeGuardedCallbackDev.\n+ return;\n+ }\n+ }\n+ }\n+\n+ const startTime = (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+ duration,\n+ timestamp: startTime,\n+ type,\n+ });\n+ }\n+ break;\n+ case 'blink.user_timing':\n+ const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n+\n+ \/\/ React Events - schedule\n+ if (name.startsWith('--schedule-render-')) {\n+ const [\n+ laneBitmaskString,\n+ laneLabels,\n+ ...splitComponentStack\n+ ] = name.substr(18).split('-');\n+ currentProfilerData.reactEvents.push({\n+ type: 'schedule-render',\n+ lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n+ laneLabels: laneLabels ? laneLabels.split(',') : [],\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ });\n+ } else if (name.startsWith('--schedule-forced-update-')) {\n+ const [\n+ laneBitmaskString,\n+ laneLabels,\n+ componentName,\n+ ...splitComponentStack\n+ ] = name.substr(25).split('-');\n+ const isCascading = !!state.measureStack.find(\n+ ({type}) => type === 'commit',\n+ );\n+ currentProfilerData.reactEvents.push({\n+ type: 'schedule-force-update',\n+ lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n+ laneLabels: laneLabels ? laneLabels.split(',') : [],\n+ componentName,\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ isCascading,\n+ });\n+ } else if (name.startsWith('--schedule-state-update-')) {\n+ const [\n+ laneBitmaskString,\n+ laneLabels,\n+ componentName,\n+ ...splitComponentStack\n+ ] = name.substr(24).split('-');\n+ const isCascading = !!state.measureStack.find(\n+ ({type}) => type === 'commit',\n+ );\n+ currentProfilerData.reactEvents.push({\n+ type: 'schedule-state-update',\n+ lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n+ laneLabels: laneLabels ? laneLabels.split(',') : [],\n+ componentName,\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ isCascading,\n+ });\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ React Events - suspense\n+ else if (name.startsWith('--suspense-suspend-')) {\n+ const [id, componentName, ...splitComponentStack] = name\n+ .substr(19)\n+ .split('-');\n+ currentProfilerData.reactEvents.push({\n+ type: 'suspense-suspend',\n+ id,\n+ componentName,\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ });\n+ } else if (name.startsWith('--suspense-resolved-')) {\n+ const [id, componentName, ...splitComponentStack] = name\n+ .substr(20)\n+ .split('-');\n+ currentProfilerData.reactEvents.push({\n+ type: 'suspense-resolved',\n+ id,\n+ componentName,\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ });\n+ } else if (name.startsWith('--suspense-rejected-')) {\n+ const [id, componentName, ...splitComponentStack] = name\n+ .substr(20)\n+ .split('-');\n+ currentProfilerData.reactEvents.push({\n+ type: 'suspense-rejected',\n+ id,\n+ componentName,\n+ componentStack: splitComponentStack.join('-'),\n+ timestamp: startTime,\n+ });\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ React Measures - render\n+ else if (name.startsWith('--render-start-')) {\n+ if (state.nextRenderShouldGenerateNewBatchID) {\n+ state.nextRenderShouldGenerateNewBatchID = false;\n+ state.batchUID = ((state.uidCounter++: any): BatchUID);\n+ }\n+ const [laneBitmaskString, laneLabels] = name.substr(15).split('-');\n+ const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n+ throwIfIncomplete('render', state.measureStack);\n+ if (getLastType(state.measureStack) !== 'render-idle') {\n+ markWorkStarted(\n+ 'render-idle',\n+ startTime,\n+ lanes,\n+ laneLabels ? laneLabels.split(',') : [],\n+ currentProfilerData,\n+ state,\n+ );\n+ }\n+ markWorkStarted(\n+ 'render',\n+ startTime,\n+ lanes,\n+ laneLabels ? laneLabels.split(',') : [],\n+ currentProfilerData,\n+ state,\n+ );\n+ } else if (\n+ name.startsWith('--render-stop') ||\n+ name.startsWith('--render-yield')\n+ ) {\n+ markWorkCompleted(\n+ 'render',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ } else if (name.startsWith('--render-cancel')) {\n+ state.nextRenderShouldGenerateNewBatchID = true;\n+ markWorkCompleted(\n+ 'render',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ markWorkCompleted(\n+ 'render-idle',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ React Measures - commits\n+ else if (name.startsWith('--commit-start-')) {\n+ state.nextRenderShouldGenerateNewBatchID = true;\n+ const [laneBitmaskString, laneLabels] = name.substr(15).split('-');\n+ const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n+ markWorkStarted(\n+ 'commit',\n+ startTime,\n+ lanes,\n+ laneLabels ? laneLabels.split(',') : [],\n+ currentProfilerData,\n+ state,\n+ );\n+ } else if (name.startsWith('--commit-stop')) {\n+ markWorkCompleted(\n+ 'commit',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ markWorkCompleted(\n+ 'render-idle',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ React Measures - layout effects\n+ else if (name.startsWith('--layout-effects-start-')) {\n+ const [laneBitmaskString, laneLabels] = name.substr(23).split('-');\n+ const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n+ markWorkStarted(\n+ 'layout-effects',\n+ startTime,\n+ lanes,\n+ laneLabels ? laneLabels.split(',') : [],\n+ currentProfilerData,\n+ state,\n+ );\n+ } else if (name.startsWith('--layout-effects-stop')) {\n+ markWorkCompleted(\n+ 'layout-effects',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ React Measures - passive effects\n+ else if (name.startsWith('--passive-effects-start-')) {\n+ const [laneBitmaskString, laneLabels] = name.substr(24).split('-');\n+ const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);\n+ markWorkStarted(\n+ 'passive-effects',\n+ startTime,\n+ lanes,\n+ laneLabels ? laneLabels.split(',') : [],\n+ currentProfilerData,\n+ state,\n+ );\n+ } else if (name.startsWith('--passive-effects-stop')) {\n+ markWorkCompleted(\n+ 'passive-effects',\n+ startTime,\n+ currentProfilerData,\n+ state.measureStack,\n+ );\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ Other user timing marks\/measures\n+ else if (ph === 'R' || ph === 'n') {\n+ \/\/ User Timing mark\n+ currentProfilerData.otherUserTimingMarks.push({\n+ name,\n+ timestamp: startTime,\n+ });\n+ } else if (ph === 'b') {\n+ \/\/ TODO: Begin user timing measure\n+ } else if (ph === 'e') {\n+ \/\/ TODO: End user timing measure\n+ } else if (ph === 'i' || ph === 'I') {\n+ \/\/ Instant events.\n+ \/\/ Note that the capital \"I\" is a deprecated value that exists in Chrome Canary traces.\n+ } \/\/ eslint-disable-line brace-style\n+\n+ \/\/ Unrecognized event\n+ else {\n+ throw new InvalidProfileError(\n+ `Unrecognized event ${JSON.stringify(\n+ event,\n+ )}! This is likely a bug in this profiler tool.`,\n+ );\n+ }\n+ break;\n }\n }\n \n@@ -447,7 +475,8 @@ export default function preprocessData(\n const profilerData: ReactProfilerData = {\n startTime: 0,\n duration: 0,\n- events: [],\n+ nativeEvents: [],\n+ reactEvents: [],\n measures: [],\n flamechart,\n otherUserTimingMarks: [],\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 833df582a5..3047e7abae 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -21,6 +21,12 @@ export type Milliseconds = number;\n \n export type ReactLane = number;\n \n+export type NativeEvent = {|\n+ +duration: Milliseconds,\n+ +timestamp: Milliseconds,\n+ +type: string,\n+|};\n+\n type BaseReactEvent = {|\n +componentName?: string,\n +componentStack?: string,\n@@ -122,14 +128,16 @@ export type Flamechart = FlamechartStackLayer[];\n export type ReactProfilerData = {|\n startTime: number,\n duration: number,\n- events: ReactEvent[],\n+ nativeEvents: NativeEvent[],\n+ reactEvents: ReactEvent[],\n measures: ReactMeasure[],\n flamechart: Flamechart,\n otherUserTimingMarks: UserTimingMark[],\n |};\n \n export type ReactHoverContextInfo = {|\n- event: ReactEvent | null,\n+ nativeEvent: NativeEvent | null,\n+ reactEvent: ReactEvent | null,\n measure: ReactMeasure | null,\n data: $ReadOnly | null,\n flamechartStackFrame: FlamechartStackFrame | null,\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 a8336ba170..8967cca0f2 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@@ -421,6 +421,16 @@ export function updateThemeVariables(\n 'color-scheduling-profiler-flame-graph-label',\n documentElements,\n );\n+ updateStyleHelper(\n+ theme,\n+ 'color-scheduling-profiler-native-event',\n+ documentElements,\n+ );\n+ updateStyleHelper(\n+ theme,\n+ 'color-scheduling-profiler-native-event-hover',\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 0c5b9a4f01..13f67daba2 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n@@ -79,8 +79,10 @@\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-priority-background: #ededf0;\n- --light-color-scheduling-profiler-priority-border: #d7d7db;\n+ --light-color-scheduling-profiler-native-event: #aaaaaa;\n+ --light-color-scheduling-profiler-native-event-hover: #888888;\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 --light-color-scheduling-profiler-user-timing-hover:#93959a;\n --light-color-scheduling-profiler-react-idle: #edf6ff;\n@@ -199,6 +201,8 @@\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-priority-background: #1d2129;\n --dark-color-scheduling-profiler-priority-border: #282c34;\n --dark-color-scheduling-profiler-user-timing: #c9cacd;\n"}

dillon1000/react

Files changed