{"body":"","parents":["e4e8226c625220944819c9237346569f09ad90a9"],"commit":{"authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","authoredAt":"2021-08-13T17:14:29-04:00","shortRevision":"54e170c794","revision":"54e170c79493dea734b95b0fddbf8f0bfc99bff7","subject":"[DevTools] Add screenshots to Scheduling Profiler (#22088)"},"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 2681eb7c87..83de9a2d2d 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -46,6 +46,7 @@ import {\n NativeEventsView,\n ReactMeasuresView,\n SchedulingEventsView,\n+ SnapshotsView,\n SuspenseEventsView,\n TimeAxisMarkersView,\n UserTimingMarksView,\n@@ -157,6 +158,7 @@ function AutoSizedCanvas({\n const componentMeasuresViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n+ const snapshotsViewRef = useRef(null);\n \n const {hideMenu: hideContextMenu} = useContext(RegistryContext);\n \n@@ -304,6 +306,18 @@ function AutoSizedCanvas({\n );\n }\n \n+ let snapshotsViewWrapper = null;\n+ if (data.snapshots.length > 0) {\n+ const snapshotsView = new SnapshotsView(surface, defaultFrame, data);\n+ snapshotsViewRef.current = snapshotsView;\n+ snapshotsViewWrapper = createViewHelper(\n+ snapshotsView,\n+ 'snapshots',\n+ true,\n+ true,\n+ );\n+ }\n+\n const flamechartView = new FlamechartView(\n surface,\n defaultFrame,\n@@ -340,6 +354,9 @@ function AutoSizedCanvas({\n if (componentMeasuresViewWrapper !== null) {\n rootView.addSubview(componentMeasuresViewWrapper);\n }\n+ if (snapshotsViewWrapper !== null) {\n+ rootView.addSubview(snapshotsViewWrapper);\n+ }\n rootView.addSubview(flamechartViewWrapper);\n \n const verticalScrollOverflowView = new VerticalScrollOverflowView(\n@@ -389,6 +406,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark: null,\n };\n@@ -447,6 +465,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark,\n });\n@@ -465,6 +484,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark: null,\n });\n@@ -483,6 +503,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark: null,\n });\n@@ -501,6 +522,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent,\n userTimingMark: null,\n });\n@@ -519,6 +541,7 @@ function AutoSizedCanvas({\n measure,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark: null,\n });\n@@ -540,6 +563,26 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: snapshotsView} = snapshotsViewRef;\n+ if (snapshotsView) {\n+ snapshotsView.onHover = snapshot => {\n+ if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {\n+ setHoveredEvent({\n+ componentMeasure: null,\n+ data,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ snapshot,\n suspenseEvent: null,\n userTimingMark: null,\n });\n@@ -561,6 +604,7 @@ function AutoSizedCanvas({\n measure: null,\n nativeEvent: null,\n schedulingEvent: null,\n+ snapshot: null,\n suspenseEvent: null,\n userTimingMark: null,\n });\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\nindex 8f3c2e2c0b..df53f1a0ef 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n@@ -17,6 +17,7 @@ import type {\n ReactProfilerData,\n Return,\n SchedulingEvent,\n+ Snapshot,\n SuspenseEvent,\n UserTimingMark,\n } from '.\/types';\n@@ -87,6 +88,7 @@ export default function EventTooltip({\n measure,\n nativeEvent,\n schedulingEvent,\n+ snapshot,\n suspenseEvent,\n userTimingMark,\n } = hoveredEvent;\n@@ -110,6 +112,8 @@ export default function EventTooltip({\n tooltipRef={tooltipRef}\n \/>\n );\n+ } else if (snapshot !== null) {\n+ return ;\n } else if (suspenseEvent !== null) {\n return (\n ,\n+}) => {\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+};\n+\n const TooltipSuspenseEvent = ({\n suspenseEvent,\n tooltipRef,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SnapshotsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SnapshotsView.js\nnew file mode 100644\nindex 0000000000..1d27ff89d6\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SnapshotsView.js\n@@ -0,0 +1,208 @@\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 {Snapshot, ReactProfilerData} from '..\/types';\n+import type {\n+ Interaction,\n+ MouseMoveInteraction,\n+ Rect,\n+ Size,\n+ Surface,\n+ ViewRefs,\n+} from '..\/view-base';\n+\n+import {positioningScaleFactor, timestampToPosition} from '.\/utils\/positioning';\n+import {\n+ intersectionOfRects,\n+ rectContainsPoint,\n+ rectEqualToRect,\n+ View,\n+} from '..\/view-base';\n+import {BORDER_SIZE, COLORS, SNAPSHOT_HEIGHT} from '.\/constants';\n+\n+type OnHover = (node: Snapshot | null) => void;\n+\n+export class SnapshotsView extends View {\n+ _intrinsicSize: Size;\n+ _profilerData: ReactProfilerData;\n+\n+ onHover: OnHover | null = null;\n+\n+ constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n+ super(surface, frame);\n+\n+ this._intrinsicSize = {\n+ width: profilerData.duration,\n+ height: SNAPSHOT_HEIGHT,\n+ };\n+ this._profilerData = profilerData;\n+ }\n+\n+ desiredSize() {\n+ return this._intrinsicSize;\n+ }\n+\n+ draw(context: CanvasRenderingContext2D) {\n+ const {visibleArea} = 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+ const y = visibleArea.origin.y;\n+\n+ let x = visibleArea.origin.x;\n+\n+ \/\/ Rather than drawing each snapshot where it occured,\n+ \/\/ draw them at fixed intervals and just show the nearest one.\n+ while (x < visibleArea.origin.x + visibleArea.size.width) {\n+ const snapshot = this._findClosestSnapshot(x);\n+\n+ const scaledHeight = SNAPSHOT_HEIGHT;\n+ const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) \/ snapshot.height;\n+\n+ const imageRect: Rect = {\n+ origin: {\n+ x,\n+ y,\n+ },\n+ size: {width: scaledWidth, height: scaledHeight},\n+ };\n+\n+ \/\/ Lazily create and cache Image objects as we render a snapsho for the first time.\n+ if (snapshot.image === null) {\n+ const img = (snapshot.image = new Image());\n+ img.onload = () => {\n+ this._drawSnapshotImage(context, snapshot, imageRect);\n+ };\n+ img.src = snapshot.imageSource;\n+ } else {\n+ this._drawSnapshotImage(context, snapshot, imageRect);\n+ }\n+\n+ x += scaledWidth + BORDER_SIZE;\n+ }\n+ }\n+\n+ handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n+ switch (interaction.type) {\n+ case 'mousemove':\n+ this._handleMouseMove(interaction, viewRefs);\n+ break;\n+ }\n+ }\n+\n+ _drawSnapshotImage(\n+ context: CanvasRenderingContext2D,\n+ snapshot: Snapshot,\n+ imageRect: Rect,\n+ ) {\n+ const visibleArea = this.visibleArea;\n+\n+ \/\/ Prevent snapshot from visibly overflowing its container when clipped.\n+ const shouldClip = !rectEqualToRect(imageRect, visibleArea);\n+ if (shouldClip) {\n+ const clippedRect = intersectionOfRects(imageRect, visibleArea);\n+ context.save();\n+ context.beginPath();\n+ context.rect(\n+ clippedRect.origin.x,\n+ clippedRect.origin.y,\n+ clippedRect.size.width,\n+ clippedRect.size.height,\n+ );\n+ context.closePath();\n+ context.clip();\n+ }\n+\n+ \/\/ $FlowFixMe Flow doesn't know about the 9 argument variant of drawImage()\n+ context.drawImage(\n+ snapshot.image,\n+\n+ \/\/ Image coordinates\n+ 0,\n+ 0,\n+\n+ \/\/ Native image size\n+ snapshot.width,\n+ snapshot.height,\n+\n+ \/\/ Canvas coordinates\n+ imageRect.origin.x,\n+ imageRect.origin.y,\n+\n+ \/\/ Scaled image size\n+ imageRect.size.width,\n+ imageRect.size.height,\n+ );\n+\n+ if (shouldClip) {\n+ context.restore();\n+ }\n+ }\n+\n+ _findClosestSnapshot(x: number): Snapshot {\n+ const frame = this.frame;\n+ const scaleFactor = positioningScaleFactor(\n+ this._intrinsicSize.width,\n+ frame,\n+ );\n+\n+ const snapshots = this._profilerData.snapshots;\n+\n+ let startIndex = 0;\n+ let stopIndex = snapshots.length - 1;\n+ while (startIndex <= stopIndex) {\n+ const currentIndex = Math.floor((startIndex + stopIndex) \/ 2);\n+ const snapshot = snapshots[currentIndex];\n+ const {timestamp} = snapshot;\n+\n+ const snapshotX = Math.floor(\n+ timestampToPosition(timestamp, scaleFactor, frame),\n+ );\n+\n+ if (x < snapshotX) {\n+ stopIndex = currentIndex - 1;\n+ } else {\n+ startIndex = currentIndex + 1;\n+ }\n+ }\n+\n+ return snapshots[stopIndex];\n+ }\n+\n+ \/**\n+ * @private\n+ *\/\n+ _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {\n+ const {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 snapshot = this._findClosestSnapshot(location.x);\n+ if (snapshot) {\n+ this.currentCursor = 'context-menu';\n+ viewRefs.hoveredView = this;\n+ onHover(snapshot);\n+ } else {\n+ onHover(null);\n+ }\n+ }\n+}\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 6cda416ad8..fe42bc16f1 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@@ -23,6 +23,7 @@ export const REACT_MEASURE_HEIGHT = 14;\n export const BORDER_SIZE = 1;\n export const FLAMECHART_FRAME_HEIGHT = 14;\n export const TEXT_PADDING = 3;\n+export const SNAPSHOT_HEIGHT = 50;\n \n export const INTERVAL_TIMES = [\n 1,\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 fc1f4eabd4..91ab47bfd4 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@@ -12,6 +12,7 @@ export * from '.\/FlamechartView';\n export * from '.\/NativeEventsView';\n export * from '.\/ReactMeasuresView';\n export * from '.\/SchedulingEventsView';\n+export * from '.\/SnapshotsView';\n export * from '.\/SuspenseEventsView';\n export * from '.\/TimeAxisMarkersView';\n export * from '.\/UserTimingMarksView';\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 0fa434b948..f5267e8d06 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@@ -17,7 +17,7 @@ import {\n } from '..\/..\/constants';\n import REACT_VERSION from 'shared\/ReactVersion';\n \n-describe(getLanesFromTransportDecimalBitmask, () => {\n+describe('getLanesFromTransportDecimalBitmask', () => {\n it('should return array of lane numbers from bitmask string', () => {\n expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);\n expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);\n@@ -57,7 +57,7 @@ describe(getLanesFromTransportDecimalBitmask, () => {\n });\n });\n \n-describe(preprocessData, () => {\n+describe('preprocessData', () => {\n let React;\n let ReactDOM;\n let Scheduler;\n@@ -217,11 +217,11 @@ describe(preprocessData, () => {\n delete global.performance;\n });\n \n- it('should throw given an empty timeline', () => {\n- expect(() => preprocessData([])).toThrow();\n+ it('should throw given an empty timeline', async () => {\n+ await expect(async () => preprocessData([])).rejects.toThrow();\n });\n \n- it('should throw given a timeline with no Profile event', () => {\n+ it('should throw given a timeline with no Profile event', async () => {\n const randomSample = createUserTimingEntry({\n dur: 100,\n tdur: 200,\n@@ -231,10 +231,10 @@ describe(preprocessData, () => {\n args: {},\n });\n \n- expect(() => preprocessData([randomSample])).toThrow();\n+ await expect(async () => preprocessData([randomSample])).rejects.toThrow();\n });\n \n- it('should return empty data given a timeline with no React scheduling profiling marks', () => {\n+ it('should return empty data given a timeline with no React scheduling profiling marks', async () => {\n const cpuProfilerSample = creactCpuProfilerSample();\n const randomSample = createUserTimingEntry({\n dur: 100,\n@@ -246,7 +246,7 @@ describe(preprocessData, () => {\n });\n \n if (gate(flags => flags.enableSchedulingProfiler)) {\n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n cpuProfilerSample,\n randomSample,\n@@ -327,6 +327,7 @@ describe(preprocessData, () => {\n \"otherUserTimingMarks\": Array [],\n \"reactVersion\": \"17.0.3\",\n \"schedulingEvents\": Array [],\n+ \"snapshots\": Array [],\n \"startTime\": 1,\n \"suspenseEvents\": Array [],\n }\n@@ -334,13 +335,13 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should process legacy data format (before lane labels were added)', () => {\n+ it('should process legacy data format (before lane labels were added)', async () => {\n const cpuProfilerSample = creactCpuProfilerSample();\n \n if (gate(flags => flags.enableSchedulingProfiler)) {\n \/\/ Data below is hard-coded based on an older profile sample.\n \/\/ Should be fine since this is explicitly a legacy-format test.\n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n cpuProfilerSample,\n createUserTimingEntry({\n@@ -541,6 +542,7 @@ describe(preprocessData, () => {\n \"warning\": null,\n },\n ],\n+ \"snapshots\": Array [],\n \"startTime\": 1,\n \"suspenseEvents\": Array [],\n }\n@@ -548,11 +550,11 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should process a sample legacy render sequence', () => {\n+ it('should process a sample legacy render sequence', async () => {\n ReactDOM.render(

, document.createElement('div'));\n \n if (gate(flags => flags.enableSchedulingProfiler)) {\n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n ...createUserTimingData(clearedMarks),\n ]);\n@@ -730,6 +732,7 @@ describe(preprocessData, () => {\n \"warning\": null,\n },\n ],\n+ \"snapshots\": Array [],\n \"startTime\": 4,\n \"suspenseEvents\": Array [],\n }\n@@ -737,7 +740,7 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should process a sample createRoot render sequence', () => {\n+ it('should process a sample createRoot render sequence', async () => {\n function App() {\n const [didMount, setDidMount] = React.useState(false);\n React.useEffect(() => {\n@@ -752,7 +755,7 @@ describe(preprocessData, () => {\n const root = ReactDOM.createRoot(document.createElement('div'));\n act(() => root.render());\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n ...createUserTimingData(clearedMarks),\n ]);\n@@ -1074,6 +1077,7 @@ describe(preprocessData, () => {\n \"warning\": null,\n },\n ],\n+ \"snapshots\": Array [],\n \"startTime\": 4,\n \"suspenseEvents\": Array [],\n }\n@@ -1082,7 +1086,7 @@ describe(preprocessData, () => {\n });\n \n \/\/ @gate enableSchedulingProfiler\n- it('should error if events and measures are incomplete', () => {\n+ it('should error if events and measures are incomplete', async () => {\n const container = document.createElement('div');\n ReactDOM.render(

, container);\n \n@@ -1097,7 +1101,7 @@ describe(preprocessData, () => {\n });\n \n \/\/ @gate enableSchedulingProfiler\n- it('should error if work is completed without being started', () => {\n+ it('should error if work is completed without being started', async () => {\n const container = document.createElement('div');\n ReactDOM.render(

, container);\n \n@@ -1111,7 +1115,7 @@ describe(preprocessData, () => {\n expect(error).toHaveBeenCalled();\n });\n \n- it('should populate other user timing marks', () => {\n+ it('should populate other user timing marks', async () => {\n const userTimingData = createUserTimingData([]);\n userTimingData.push(\n createUserTimingEntry({\n@@ -1138,7 +1142,7 @@ describe(preprocessData, () => {\n }),\n );\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n ...userTimingData,\n ]);\n@@ -1162,7 +1166,7 @@ describe(preprocessData, () => {\n \n describe('warnings', () => {\n describe('long event handlers', () => {\n- it('should not warn when React scedules a (sync) update inside of a short event handler', () => {\n+ it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {\n function App() {\n return null;\n }\n@@ -1180,13 +1184,13 @@ describe(preprocessData, () => {\n \n testMarks.push(...createUserTimingData(clearedMarks));\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n const event = data.nativeEvents.find(({type}) => type === 'click');\n expect(event.warning).toBe(null);\n }\n });\n \n- it('should not warn about long events if the cause was non-React JavaScript', () => {\n+ it('should not warn about long events if the cause was non-React JavaScript', async () => {\n function App() {\n return null;\n }\n@@ -1206,13 +1210,13 @@ describe(preprocessData, () => {\n \n testMarks.push(...createUserTimingData(clearedMarks));\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n const event = data.nativeEvents.find(({type}) => type === 'click');\n expect(event.warning).toBe(null);\n }\n });\n \n- it('should warn when React scedules a long (sync) update inside of an event', () => {\n+ it('should warn when React scedules a long (sync) update inside of an event', async () => {\n function App() {\n return null;\n }\n@@ -1245,7 +1249,7 @@ describe(preprocessData, () => {\n });\n });\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n const event = data.nativeEvents.find(({type}) => type === 'click');\n expect(event.warning).toMatchInlineSnapshot(\n `\"An event handler scheduled a big update with React. Consider using the Transition API to defer some of this work.\"`,\n@@ -1253,7 +1257,7 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', () => {\n+ it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', async () => {\n function Yield({id, value}) {\n Scheduler.unstable_yieldValue(`${id}:${value}`);\n return null;\n@@ -1303,7 +1307,7 @@ describe(preprocessData, () => {\n \n testMarks.push(...createUserTimingData(clearedMarks));\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n const event = data.nativeEvents.find(({type}) => type === 'click');\n expect(event.warning).toBe(null);\n }\n@@ -1311,7 +1315,7 @@ describe(preprocessData, () => {\n });\n \n describe('nested updates', () => {\n- it('should not warn about short nested (state) updates during layout effects', () => {\n+ it('should not warn about short nested (state) updates during layout effects', async () => {\n function Component() {\n const [didMount, setDidMount] = React.useState(false);\n Scheduler.unstable_yieldValue(\n@@ -1334,7 +1338,7 @@ describe(preprocessData, () => {\n 'Component update',\n ]);\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n ...createUserTimingData(clearedMarks),\n ]);\n@@ -1346,7 +1350,7 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should not warn about short (forced) updates during layout effects', () => {\n+ it('should not warn about short (forced) updates during layout effects', async () => {\n class Component extends React.Component {\n _didMount: boolean = false;\n componentDidMount() {\n@@ -1372,7 +1376,7 @@ describe(preprocessData, () => {\n 'Component update',\n ]);\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n ...createBoilerplateEntries(),\n ...createUserTimingData(clearedMarks),\n ]);\n@@ -1384,7 +1388,7 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should warn about long nested (state) updates during layout effects', () => {\n+ it('should warn about long nested (state) updates during layout effects', async () => {\n function Component() {\n const [didMount, setDidMount] = React.useState(false);\n Scheduler.unstable_yieldValue(\n@@ -1429,7 +1433,7 @@ describe(preprocessData, () => {\n });\n });\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n cpuProfilerSample,\n ...createBoilerplateEntries(),\n ...testMarks,\n@@ -1444,7 +1448,7 @@ describe(preprocessData, () => {\n }\n });\n \n- it('should warn about long nested (forced) updates during layout effects', () => {\n+ it('should warn about long nested (forced) updates during layout effects', async () => {\n class Component extends React.Component {\n _didMount: boolean = false;\n componentDidMount() {\n@@ -1490,7 +1494,7 @@ describe(preprocessData, () => {\n });\n });\n \n- const data = preprocessData([\n+ const data = await preprocessData([\n cpuProfilerSample,\n ...createBoilerplateEntries(),\n ...testMarks,\n@@ -1509,7 +1513,7 @@ describe(preprocessData, () => {\n describe('suspend during an update', () => {\n \/\/ This also tests an edge case where the a component suspends while profiling\n \/\/ before the first commit is logged (so the lane-to-labels map will not yet exist).\n- it('should warn about suspending during an udpate', () => {\n+ it('should warn about suspending during an udpate', async () => {\n let promise = null;\n let resolvedValue = null;\n function readValue(value) {\n@@ -1557,7 +1561,7 @@ describe(preprocessData, () => {\n \n testMarks.push(...createUserTimingData(clearedMarks));\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n expect(data.suspenseEvents).toHaveLength(1);\n expect(data.suspenseEvents[0].warning).toMatchInlineSnapshot(\n `\"A component suspended during an update which caused a fallback to be shown. Consider using the Transition API to avoid hiding components after they've been mounted.\"`,\n@@ -1615,7 +1619,7 @@ describe(preprocessData, () => {\n \n testMarks.push(...createUserTimingData(clearedMarks));\n \n- const data = preprocessData(testMarks);\n+ const data = await preprocessData(testMarks);\n expect(data.suspenseEvents).toHaveLength(1);\n expect(data.suspenseEvents[0].warning).toBe(null);\n }\n@@ -1623,5 +1627,7 @@ describe(preprocessData, () => {\n });\n });\n \n+ \/\/ TODO: Add test for snapshot base64 parsing\n+\n \/\/ TODO: Add test for flamechart parsing\n });\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/importFile.js b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/importFile.js\nindex 1e0510b853..61301aa331 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/importFile.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/importFile.js\n@@ -26,9 +26,11 @@ export async function importFile(file: File): Promise {\n throw new InvalidProfileError('No profiling data found in file.');\n }\n \n+ const processedData = await preprocessData(events);\n+\n return {\n status: 'SUCCESS',\n- processedData: preprocessData(events),\n+ processedData,\n };\n } catch (error) {\n if (error instanceof InvalidProfileError) {\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 a356ad9688..9d6e56035a 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@@ -26,7 +26,6 @@ import type {\n SchedulingEvent,\n SuspenseEvent,\n } from '..\/types';\n-\n import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '..\/constants';\n import InvalidProfileError from '.\/InvalidProfileError';\n import {getBatchRange} from '..\/utils\/getBatchRange';\n@@ -40,6 +39,7 @@ type MeasureStackElement = {|\n |};\n \n type ProcessorState = {|\n+ asyncProcessingPromises: Promise[],\n batchUID: BatchUID,\n currentReactComponentMeasure: ReactComponentMeasure | null,\n measureStack: MeasureStackElement[],\n@@ -224,6 +224,41 @@ function processTimelineEvent(\n ) {\n const {args, cat, name, ts, ph} = event;\n switch (cat) {\n+ case 'disabled-by-default-devtools.screenshot':\n+ const encodedSnapshot = args.snapshot; \/\/ Base 64 encoded\n+\n+ const snapshot = {\n+ height: 0,\n+ image: null,\n+ imageSource: `data:image\/png;base64,${encodedSnapshot}`,\n+ timestamp: (ts - currentProfilerData.startTime) \/ 1000,\n+ width: 0,\n+ };\n+\n+ \/\/ Delay processing until we've extracted snapshot dimensions.\n+ let resolveFn = ((null: any): Function);\n+ state.asyncProcessingPromises.push(\n+ new Promise(resolve => {\n+ resolveFn = resolve;\n+ }),\n+ );\n+\n+ \/\/ Parse the Base64 image data to determine native size.\n+ \/\/ This will be used later to scale for display within the thumbnail strip.\n+ fetch(snapshot.imageSource)\n+ .then(response => response.blob())\n+ .then(blob => {\n+ \/\/ $FlowFixMe createImageBitmap\n+ createImageBitmap(blob).then(bitmap => {\n+ snapshot.height = bitmap.height;\n+ snapshot.width = bitmap.width;\n+\n+ resolveFn();\n+ });\n+ });\n+\n+ currentProfilerData.snapshots.push(snapshot);\n+ break;\n case 'devtools.timeline':\n if (name === 'EventDispatch') {\n const type = args.data.type;\n@@ -661,9 +696,9 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {\n return flamechart;\n }\n \n-export default function preprocessData(\n+export default async function preprocessData(\n timeline: TimelineEvent[],\n-): ReactProfilerData {\n+): Promise {\n const flamechart = preprocessFlamechart(timeline);\n \n const laneToReactMeasureMap = new Map();\n@@ -682,6 +717,7 @@ export default function preprocessData(\n otherUserTimingMarks: [],\n reactVersion: null,\n schedulingEvents: [],\n+ snapshots: [],\n startTime: 0,\n suspenseEvents: [],\n };\n@@ -713,6 +749,7 @@ export default function preprocessData(\n (timeline[timeline.length - 1].ts - profilerData.startTime) \/ 1000;\n \n const state: ProcessorState = {\n+ asyncProcessingPromises: [],\n batchUID: 0,\n currentReactComponentMeasure: null,\n measureStack: [],\n@@ -773,5 +810,9 @@ export default function preprocessData(\n },\n );\n \n+ \/\/ Wait for any async processing to complete before returning.\n+ \/\/ Since processing is done in a worker, async work must complete before data is serialized and returned.\n+ await Promise.all(state.asyncProcessingPromises);\n+\n return profilerData;\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 761033f2cd..637d957141 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -115,6 +115,14 @@ export type UserTimingMark = {|\n timestamp: Milliseconds,\n |};\n \n+export type Snapshot = {|\n+ height: number,\n+ image: Image | null,\n+ +imageSource: string,\n+ +timestamp: Milliseconds,\n+ width: number,\n+|};\n+\n \/**\n * A \"layer\" of stack frames in the profiler UI, i.e. all stack frames of the\n * same depth across all stack traces. Displayed as a flamechart row in the UI.\n@@ -150,6 +158,7 @@ export type ReactProfilerData = {|\n otherUserTimingMarks: UserTimingMark[],\n reactVersion: string | null,\n schedulingEvents: SchedulingEvent[],\n+ snapshots: Snapshot[],\n startTime: number,\n suspenseEvents: SuspenseEvent[],\n |};\n@@ -162,5 +171,6 @@ export type ReactHoverContextInfo = {|\n nativeEvent: NativeEvent | null,\n schedulingEvent: SchedulingEvent | null,\n suspenseEvent: SuspenseEvent | null,\n+ snapshot: Snapshot | null,\n userTimingMark: UserTimingMark | null,\n |};\n","files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SnapshotsView.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\/importFile.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"}]}

dillon1000/react

Files changed