{"parents":["ecd73e17bcdecc092cb56259999787d832d6510a"],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex e699959013..59939cd948 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -7,19 +7,18 @@\n * @flow\n *\/\n \n-import type {\n- Point,\n- HorizontalPanAndZoomViewOnChangeCallback,\n-} from '.\/view-base';\n+import type {Point} from '.\/view-base';\n import type {\n ReactHoverContextInfo,\n ReactProfilerData,\n ReactMeasure,\n+ ViewState,\n } from '.\/types';\n \n import * as React from 'react';\n import {\n Fragment,\n+ useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n@@ -54,12 +53,14 @@ import {\n UserTimingMarksView,\n } from '.\/content-views';\n import {COLORS} from '.\/content-views\/constants';\n-\n+import {clampState, moveStateToRange} from '.\/view-base\/utils\/scrollState';\n import EventTooltip from '.\/EventTooltip';\n+import {RegistryContext} from 'react-devtools-shared\/src\/devtools\/ContextMenu\/Contexts';\n import ContextMenu from 'react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu';\n import ContextMenuItem from 'react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenuItem';\n import useContextMenu from 'react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu';\n import {getBatchRange} from '.\/utils\/getBatchRange';\n+import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from '.\/view-base\/constants';\n \n import styles from '.\/CanvasPage.css';\n \n@@ -67,16 +68,22 @@ const CONTEXT_MENU_ID = 'canvas';\n \n type Props = {|\n profilerData: ReactProfilerData,\n+ viewState: ViewState,\n |};\n \n-function CanvasPage({profilerData}: Props) {\n+function CanvasPage({profilerData, viewState}: Props) {\n return (\n \n \n {({height, width}: {height: number, width: number}) => (\n- \n+ \n )}\n <\/AutoSizer>\n <\/div>\n@@ -98,27 +105,43 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {\n );\n };\n \n-\/\/ TODO (scheduling profiler) Why is the \"zoom\" feature so much slower than normal rendering?\n const zoomToBatch = (\n data: ReactProfilerData,\n measure: ReactMeasure,\n- syncedHorizontalPanAndZoomViews: HorizontalPanAndZoomView[],\n+ viewState: ViewState,\n+ width: number,\n ) => {\n const {batchUID} = measure;\n- const [startTime, stopTime] = getBatchRange(batchUID, data);\n- syncedHorizontalPanAndZoomViews.forEach(syncedView =>\n- \/\/ Using time as range works because the views' intrinsic content size is based on time.\n- syncedView.zoomToRange(startTime, stopTime),\n- );\n+ const [rangeStart, rangeEnd] = getBatchRange(batchUID, data);\n+\n+ \/\/ Convert from time range to ScrollState\n+ const scrollState = moveStateToRange({\n+ state: viewState.horizontalScrollState,\n+ rangeStart,\n+ rangeEnd,\n+ contentLength: data.duration,\n+\n+ minContentLength: data.duration * MIN_ZOOM_LEVEL,\n+ maxContentLength: data.duration * MAX_ZOOM_LEVEL,\n+ containerLength: width,\n+ });\n+\n+ viewState.updateHorizontalScrollState(scrollState);\n };\n \n type AutoSizedCanvasProps = {|\n data: ReactProfilerData,\n height: number,\n+ viewState: ViewState,\n width: number,\n |};\n \n-function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n+function AutoSizedCanvas({\n+ data,\n+ height,\n+ viewState,\n+ width,\n+}: AutoSizedCanvasProps) {\n const canvasRef = useRef(null);\n \n const [isContextMenuShown, setIsContextMenuShown] = useState(false);\n@@ -136,30 +159,31 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n const componentMeasuresViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n- const syncedHorizontalPanAndZoomViewsRef = useRef(\n- [],\n- );\n+\n+ const {hideMenu: hideContextMenu} = useContext(RegistryContext);\n \n useLayoutEffect(() => {\n const surface = surfaceRef.current;\n const defaultFrame = {origin: zeroPoint, size: {width, height}};\n \n- \/\/ Clear synced views\n- syncedHorizontalPanAndZoomViewsRef.current = [];\n+ \/\/ Auto hide context menu when panning.\n+ viewState.onHorizontalScrollStateChange(scrollState => {\n+ hideContextMenu();\n+ });\n \n- const syncAllHorizontalPanAndZoomViewStates: HorizontalPanAndZoomViewOnChangeCallback = (\n- newState,\n- triggeringView?: HorizontalPanAndZoomView,\n- ) => {\n- syncedHorizontalPanAndZoomViewsRef.current.forEach(\n- syncedView =>\n- triggeringView !== syncedView && syncedView.setScrollState(newState),\n- );\n- };\n+ \/\/ Initialize horizontal view state\n+ viewState.updateHorizontalScrollState(\n+ clampState({\n+ state: viewState.horizontalScrollState,\n+ minContentLength: data.duration * MIN_ZOOM_LEVEL,\n+ maxContentLength: data.duration * MAX_ZOOM_LEVEL,\n+ containerLength: defaultFrame.size.width,\n+ }),\n+ );\n \n function createViewHelper(\n view: View,\n- resizeLabel: string = '',\n+ label: string,\n shouldScrollVertically: boolean = false,\n shouldResizeVertically: boolean = false,\n ): View {\n@@ -169,6 +193,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n surface,\n defaultFrame,\n view,\n+ viewState,\n+ label,\n );\n }\n \n@@ -177,23 +203,22 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n defaultFrame,\n verticalScrollView !== null ? verticalScrollView : view,\n data.duration,\n- syncAllHorizontalPanAndZoomViewStates,\n+ viewState,\n );\n \n- syncedHorizontalPanAndZoomViewsRef.current.push(horizontalPanAndZoomView);\n-\n- let viewToReturn = horizontalPanAndZoomView;\n+ let resizableView = null;\n if (shouldResizeVertically) {\n- viewToReturn = new ResizableView(\n+ resizableView = new ResizableView(\n surface,\n defaultFrame,\n horizontalPanAndZoomView,\n+ viewState,\n canvasRef,\n- resizeLabel,\n+ label,\n );\n }\n \n- return viewToReturn;\n+ return resizableView || horizontalPanAndZoomView;\n }\n \n const axisMarkersView = new TimeAxisMarkersView(\n@@ -201,7 +226,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n defaultFrame,\n data.duration,\n );\n- const axisMarkersViewWrapper = createViewHelper(axisMarkersView);\n+ const axisMarkersViewWrapper = createViewHelper(axisMarkersView, 'time');\n \n let userTimingMarksViewWrapper = null;\n if (data.otherUserTimingMarks.length > 0) {\n@@ -212,7 +237,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n data.duration,\n );\n userTimingMarksViewRef.current = userTimingMarksView;\n- userTimingMarksViewWrapper = createViewHelper(userTimingMarksView);\n+ userTimingMarksViewWrapper = createViewHelper(\n+ userTimingMarksView,\n+ 'user timing api',\n+ );\n }\n \n const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);\n@@ -230,7 +258,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n data,\n );\n schedulingEventsViewRef.current = schedulingEventsView;\n- const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);\n+ const schedulingEventsViewWrapper = createViewHelper(\n+ schedulingEventsView,\n+ 'react updates',\n+ );\n \n let suspenseEventsViewWrapper = null;\n if (data.suspenseEvents.length > 0) {\n@@ -256,7 +287,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n reactMeasuresViewRef.current = reactMeasuresView;\n const reactMeasuresViewWrapper = createViewHelper(\n reactMeasuresView,\n- 'react',\n+ 'react scheduling',\n true,\n true,\n );\n@@ -269,7 +300,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n data,\n );\n componentMeasuresViewRef.current = componentMeasuresView;\n- componentMeasuresViewWrapper = createViewHelper(componentMeasuresView);\n+ componentMeasuresViewWrapper = createViewHelper(\n+ componentMeasuresView,\n+ 'react components',\n+ );\n }\n \n const flamechartView = new FlamechartView(\n@@ -329,7 +363,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n return;\n }\n \n- \/\/ Wheel events should always hide the current toolltip.\n+ \/\/ Wheel events should always hide the current tooltip.\n switch (interaction.type) {\n case 'wheel-control':\n case 'wheel-meta':\n@@ -617,11 +651,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n {measure !== null && (\n \n- zoomToBatch(\n- contextData.data,\n- measure,\n- syncedHorizontalPanAndZoomViewsRef.current,\n- )\n+ zoomToBatch(contextData.data, measure, viewState, width)\n }\n title=\"Zoom to batch\">\n Zoom to batch\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\nindex 9b3220c5ae..98cd61d312 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\n@@ -8,6 +8,7 @@\n *\/\n \n import type {DataResource} from '.\/createDataResourceFromImportedFile';\n+import type {ViewState} from '.\/types';\n \n import * as React from 'react';\n import {\n@@ -27,9 +28,11 @@ import CanvasPage from '.\/CanvasPage';\n import styles from '.\/SchedulingProfiler.css';\n \n export function SchedulingProfiler(_: {||}) {\n- const {importSchedulingProfilerData, schedulingProfilerData} = useContext(\n- SchedulingProfilerContext,\n- );\n+ const {\n+ importSchedulingProfilerData,\n+ schedulingProfilerData,\n+ viewState,\n+ } = useContext(SchedulingProfilerContext);\n \n const ref = useRef(null);\n \n@@ -66,6 +69,7 @@ export function SchedulingProfiler(_: {||}) {\n dataResource={schedulingProfilerData}\n key={key}\n onFileSelect={importSchedulingProfilerData}\n+ viewState={viewState}\n \/>\n <\/Suspense>\n ) : (\n@@ -130,9 +134,11 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (\n const DataResourceComponent = ({\n dataResource,\n onFileSelect,\n+ viewState,\n }: {|\n dataResource: DataResource,\n onFileSelect: (file: File) => void,\n+ viewState: ViewState,\n |}) => {\n const dataOrError = dataResource.read();\n if (dataOrError instanceof Error) {\n@@ -140,5 +146,5 @@ const DataResourceComponent = ({\n \n );\n }\n- return ;\n+ return ;\n };\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\nindex dc95fc31a9..ff81482c09 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\n@@ -11,12 +11,14 @@ import * as React from 'react';\n import {createContext, useCallback, useMemo, useState} from 'react';\n import createDataResourceFromImportedFile from '.\/createDataResourceFromImportedFile';\n \n+import type {HorizontalScrollStateChangeCallback, ViewState} from '.\/types';\n import type {DataResource} from '.\/createDataResourceFromImportedFile';\n \n export type Context = {|\n clearSchedulingProfilerData: () => void,\n importSchedulingProfilerData: (file: File) => void,\n schedulingProfilerData: DataResource | null,\n+ viewState: ViewState,\n |};\n \n const SchedulingProfilerContext = createContext(\n@@ -42,20 +44,51 @@ function SchedulingProfilerContextController({children}: Props) {\n setSchedulingProfilerData(createDataResourceFromImportedFile(file));\n }, []);\n \n- \/\/ TODO (scheduling profiler) Start\/stop time ref here?\n+ \/\/ Recreate view state any time new profiling data is imported.\n+ const viewState = useMemo(() => {\n+ const horizontalScrollStateChangeCallbacks: Set = new Set();\n+\n+ const horizontalScrollState = {\n+ offset: 0,\n+ length: 0,\n+ };\n+\n+ return {\n+ horizontalScrollState,\n+ onHorizontalScrollStateChange: callback => {\n+ horizontalScrollStateChangeCallbacks.add(callback);\n+ },\n+ updateHorizontalScrollState: scrollState => {\n+ if (\n+ horizontalScrollState.offset === scrollState.offset &&\n+ horizontalScrollState.length === scrollState.length\n+ ) {\n+ return;\n+ }\n+\n+ horizontalScrollState.offset = scrollState.offset;\n+ horizontalScrollState.length = scrollState.length;\n+\n+ horizontalScrollStateChangeCallbacks.forEach(callback => {\n+ callback(scrollState);\n+ });\n+ },\n+ viewToMutableViewStateMap: new Map(),\n+ };\n+ }, [schedulingProfilerData]);\n \n const value = useMemo(\n () => ({\n clearSchedulingProfilerData,\n importSchedulingProfilerData,\n schedulingProfilerData,\n- \/\/ TODO (scheduling profiler)\n+ viewState,\n }),\n [\n clearSchedulingProfilerData,\n importSchedulingProfilerData,\n schedulingProfilerData,\n- \/\/ TODO (scheduling profiler)\n+ viewState,\n ],\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 976e37ebb9..7009356b4c 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@@ -38,21 +38,12 @@ import {REACT_TOTAL_NUM_LANES} from '..\/constants';\n const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE;\n const MAX_ROWS_TO_SHOW_INITIALLY = 5;\n \n-function getMeasuresForLane(\n- allMeasures: ReactMeasure[],\n- lane: ReactLane,\n-): ReactMeasure[] {\n- return allMeasures.filter(measure => measure.lanes.includes(lane));\n-}\n-\n export class ReactMeasuresView extends View {\n- _profilerData: ReactProfilerData;\n _intrinsicSize: IntrinsicSize;\n-\n _lanesToRender: ReactLane[];\n- _laneToMeasures: Map;\n-\n+ _profilerData: ReactProfilerData;\n _hoveredMeasure: ReactMeasure | null = null;\n+\n onHover: ((measure: ReactMeasure | null) => void) | null = null;\n \n constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n@@ -63,17 +54,14 @@ export class ReactMeasuresView extends View {\n \n _performPreflightComputations() {\n this._lanesToRender = [];\n- this._laneToMeasures = new Map();\n \n for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {\n- const measuresForLane = getMeasuresForLane(\n- this._profilerData.measures,\n+ const measuresForLane = this._profilerData.laneToReactMeasureMap.get(\n lane,\n );\n \/\/ Only show lanes with measures\n- if (measuresForLane.length) {\n+ if (measuresForLane != null && measuresForLane.length > 0) {\n this._lanesToRender.push(lane);\n- this._laneToMeasures.set(lane, measuresForLane);\n }\n }\n \n@@ -213,7 +201,7 @@ export class ReactMeasuresView extends View {\n frame,\n _hoveredMeasure,\n _lanesToRender,\n- _laneToMeasures,\n+ _profilerData,\n visibleArea,\n } = this;\n \n@@ -233,7 +221,7 @@ export class ReactMeasuresView extends View {\n for (let i = 0; i < _lanesToRender.length; i++) {\n const lane = _lanesToRender[i];\n const baseY = frame.origin.y + i * REACT_LANE_HEIGHT;\n- const measuresForLane = _laneToMeasures.get(lane);\n+ const measuresForLane = _profilerData.laneToReactMeasureMap.get(lane);\n \n if (!measuresForLane) {\n throw new Error(\n@@ -242,7 +230,7 @@ export class ReactMeasuresView extends View {\n }\n \n \/\/ Render lane labels\n- const label = this._profilerData.laneToLabelMap.get(lane);\n+ const label = _profilerData.laneToLabelMap.get(lane);\n if (label == null) {\n console.warn(`Could not find label for lane ${lane}.`);\n } else {\n@@ -316,8 +304,8 @@ export class ReactMeasuresView extends View {\n frame,\n _intrinsicSize,\n _lanesToRender,\n- _laneToMeasures,\n onHover,\n+ _profilerData,\n visibleArea,\n } = this;\n if (!onHover) {\n@@ -347,7 +335,7 @@ export class ReactMeasuresView extends View {\n \/\/ This will always be the one on \"top\" (the one the user is hovering over).\n const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);\n const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n- const measures = _laneToMeasures.get(lane);\n+ const measures = _profilerData.laneToReactMeasureMap.get(lane);\n if (!measures) {\n onHover(null);\n return;\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 4c59a68efe..0fa434b948 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@@ -253,6 +253,7 @@ describe(preprocessData, () => {\n ]);\n expect(data).toMatchInlineSnapshot(`\n Object {\n+ \"batchUIDToMeasuresMap\": Map {},\n \"componentMeasures\": Array [],\n \"duration\": 0.005,\n \"flamechart\": Array [],\n@@ -289,7 +290,39 @@ describe(preprocessData, () => {\n 29 => \"Idle\",\n 30 => \"Offscreen\",\n },\n- \"measures\": Array [],\n+ \"laneToReactMeasureMap\": Map {\n+ 0 => Array [],\n+ 1 => Array [],\n+ 2 => Array [],\n+ 3 => Array [],\n+ 4 => Array [],\n+ 5 => Array [],\n+ 6 => Array [],\n+ 7 => Array [],\n+ 8 => Array [],\n+ 9 => Array [],\n+ 10 => Array [],\n+ 11 => Array [],\n+ 12 => Array [],\n+ 13 => Array [],\n+ 14 => Array [],\n+ 15 => Array [],\n+ 16 => Array [],\n+ 17 => Array [],\n+ 18 => Array [],\n+ 19 => Array [],\n+ 20 => Array [],\n+ 21 => Array [],\n+ 22 => Array [],\n+ 23 => Array [],\n+ 24 => Array [],\n+ 25 => Array [],\n+ 26 => Array [],\n+ 27 => Array [],\n+ 28 => Array [],\n+ 29 => Array [],\n+ 30 => Array [],\n+ },\n \"nativeEvents\": Array [],\n \"otherUserTimingMarks\": Array [],\n \"reactVersion\": \"17.0.3\",\n@@ -340,102 +373,178 @@ describe(preprocessData, () => {\n }),\n ]);\n expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"batchUIDToMeasuresMap\": Map {\n+ 0 => Array [\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.004999999999999999,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.006,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.001,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.006,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.002999999999999999,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.008,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.009,\n+ \"type\": \"layout-effects\",\n+ },\n+ ],\n+ },\n+ \"componentMeasures\": Array [],\n+ \"duration\": 0.011,\n+ \"flamechart\": Array [],\n+ \"laneToLabelMap\": Map {\n+ 0 => \"Sync\",\n+ 1 => \"InputContinuousHydration\",\n+ 2 => \"InputContinuous\",\n+ 3 => \"DefaultHydration\",\n+ 4 => \"Default\",\n+ 5 => \"TransitionHydration\",\n+ 6 => \"Transition\",\n+ 7 => \"Transition\",\n+ 8 => \"Transition\",\n+ 9 => \"Transition\",\n+ 10 => \"Transition\",\n+ 11 => \"Transition\",\n+ 12 => \"Transition\",\n+ 13 => \"Transition\",\n+ 14 => \"Transition\",\n+ 15 => \"Transition\",\n+ 16 => \"Transition\",\n+ 17 => \"Transition\",\n+ 18 => \"Transition\",\n+ 19 => \"Transition\",\n+ 20 => \"Transition\",\n+ 21 => \"Transition\",\n+ 22 => \"Retry\",\n+ 23 => \"Retry\",\n+ 24 => \"Retry\",\n+ 25 => \"Retry\",\n+ 26 => \"Retry\",\n+ 27 => \"SelectiveHydration\",\n+ 28 => \"IdleHydration\",\n+ 29 => \"Idle\",\n+ 30 => \"Offscreen\",\n+ },\n+ \"laneToReactMeasureMap\": Map {\n+ 0 => Array [],\n+ 1 => Array [],\n+ 2 => Array [],\n+ 3 => Array [],\n+ 4 => Array [],\n+ 5 => Array [],\n+ 6 => Array [],\n+ 7 => Array [],\n+ 8 => Array [],\n+ 9 => Array [\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.004999999999999999,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.006,\n+ \"type\": \"render-idle\",\n+ },\n Object {\n- \"componentMeasures\": Array [],\n- \"duration\": 0.011,\n- \"flamechart\": Array [],\n- \"laneToLabelMap\": Map {\n- 0 => \"Sync\",\n- 1 => \"InputContinuousHydration\",\n- 2 => \"InputContinuous\",\n- 3 => \"DefaultHydration\",\n- 4 => \"Default\",\n- 5 => \"TransitionHydration\",\n- 6 => \"Transition\",\n- 7 => \"Transition\",\n- 8 => \"Transition\",\n- 9 => \"Transition\",\n- 10 => \"Transition\",\n- 11 => \"Transition\",\n- 12 => \"Transition\",\n- 13 => \"Transition\",\n- 14 => \"Transition\",\n- 15 => \"Transition\",\n- 16 => \"Transition\",\n- 17 => \"Transition\",\n- 18 => \"Transition\",\n- 19 => \"Transition\",\n- 20 => \"Transition\",\n- 21 => \"Transition\",\n- 22 => \"Retry\",\n- 23 => \"Retry\",\n- 24 => \"Retry\",\n- 25 => \"Retry\",\n- 26 => \"Retry\",\n- 27 => \"SelectiveHydration\",\n- 28 => \"IdleHydration\",\n- 29 => \"Idle\",\n- 30 => \"Offscreen\",\n- },\n- \"measures\": Array [\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.004999999999999999,\n- \"lanes\": Array [\n- 9,\n- ],\n- \"timestamp\": 0.006,\n- \"type\": \"render-idle\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.001,\n- \"lanes\": Array [\n- 9,\n- ],\n- \"timestamp\": 0.006,\n- \"type\": \"render\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.002999999999999999,\n- \"lanes\": Array [\n- 9,\n- ],\n- \"timestamp\": 0.008,\n- \"type\": \"commit\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 1,\n- \"duration\": 0.0010000000000000009,\n- \"lanes\": Array [\n- 9,\n- ],\n- \"timestamp\": 0.009,\n- \"type\": \"layout-effects\",\n- },\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.001,\n+ \"lanes\": Array [\n+ 9,\n ],\n- \"nativeEvents\": Array [],\n- \"otherUserTimingMarks\": Array [],\n- \"reactVersion\": \"17.0.3\",\n- \"schedulingEvents\": Array [\n- Object {\n- \"lanes\": Array [\n- 9,\n- ],\n- \"timestamp\": 0.005,\n- \"type\": \"schedule-render\",\n- \"warning\": null,\n- },\n+ \"timestamp\": 0.006,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.002999999999999999,\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.008,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 9,\n ],\n- \"startTime\": 1,\n- \"suspenseEvents\": Array [],\n- }\n- `);\n+ \"timestamp\": 0.009,\n+ \"type\": \"layout-effects\",\n+ },\n+ ],\n+ 10 => Array [],\n+ 11 => Array [],\n+ 12 => Array [],\n+ 13 => Array [],\n+ 14 => Array [],\n+ 15 => Array [],\n+ 16 => Array [],\n+ 17 => Array [],\n+ 18 => Array [],\n+ 19 => Array [],\n+ 20 => Array [],\n+ 21 => Array [],\n+ 22 => Array [],\n+ 23 => Array [],\n+ 24 => Array [],\n+ 25 => Array [],\n+ 26 => Array [],\n+ 27 => Array [],\n+ 28 => Array [],\n+ 29 => Array [],\n+ 30 => Array [],\n+ },\n+ \"nativeEvents\": Array [],\n+ \"otherUserTimingMarks\": Array [],\n+ \"reactVersion\": \"17.0.3\",\n+ \"schedulingEvents\": Array [\n+ Object {\n+ \"lanes\": Array [\n+ 9,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"schedule-render\",\n+ \"warning\": null,\n+ },\n+ ],\n+ \"startTime\": 1,\n+ \"suspenseEvents\": Array [],\n+ }\n+ `);\n }\n });\n \n@@ -448,107 +557,183 @@ describe(preprocessData, () => {\n ...createUserTimingData(clearedMarks),\n ]);\n expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"batchUIDToMeasuresMap\": Map {\n+ 0 => Array [\n Object {\n- \"componentMeasures\": Array [],\n- \"duration\": 0.013,\n- \"flamechart\": Array [],\n- \"laneToLabelMap\": Map {\n- 0 => \"Sync\",\n- 1 => \"InputContinuousHydration\",\n- 2 => \"InputContinuous\",\n- 3 => \"DefaultHydration\",\n- 4 => \"Default\",\n- 5 => \"TransitionHydration\",\n- 6 => \"Transition\",\n- 7 => \"Transition\",\n- 8 => \"Transition\",\n- 9 => \"Transition\",\n- 10 => \"Transition\",\n- 11 => \"Transition\",\n- 12 => \"Transition\",\n- 13 => \"Transition\",\n- 14 => \"Transition\",\n- 15 => \"Transition\",\n- 16 => \"Transition\",\n- 17 => \"Transition\",\n- 18 => \"Transition\",\n- 19 => \"Transition\",\n- 20 => \"Transition\",\n- 21 => \"Transition\",\n- 22 => \"Retry\",\n- 23 => \"Retry\",\n- 24 => \"Retry\",\n- 25 => \"Retry\",\n- 26 => \"Retry\",\n- 27 => \"SelectiveHydration\",\n- 28 => \"IdleHydration\",\n- 29 => \"Idle\",\n- 30 => \"Offscreen\",\n- },\n- \"measures\": Array [\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.008,\n- \"lanes\": Array [\n- 0,\n- ],\n- \"timestamp\": 0.005,\n- \"type\": \"render-idle\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.001,\n- \"lanes\": Array [\n- 0,\n- ],\n- \"timestamp\": 0.005,\n- \"type\": \"render\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.005999999999999999,\n- \"lanes\": Array [\n- 0,\n- ],\n- \"timestamp\": 0.007,\n- \"type\": \"commit\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 1,\n- \"duration\": 0.0010000000000000009,\n- \"lanes\": Array [\n- 0,\n- ],\n- \"timestamp\": 0.011,\n- \"type\": \"layout-effects\",\n- },\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.008,\n+ \"lanes\": Array [\n+ 0,\n ],\n- \"nativeEvents\": Array [],\n- \"otherUserTimingMarks\": Array [\n- Object {\n- \"name\": \"__v3\",\n- \"timestamp\": 0.003,\n- },\n+ \"timestamp\": 0.005,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.001,\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.005999999999999999,\n+ \"lanes\": Array [\n+ 0,\n ],\n- \"reactVersion\": \"17.0.3\",\n- \"schedulingEvents\": Array [\n- Object {\n- \"lanes\": Array [\n- 0,\n- ],\n- \"timestamp\": 0.004,\n- \"type\": \"schedule-render\",\n- \"warning\": null,\n- },\n+ \"timestamp\": 0.007,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 0,\n ],\n- \"startTime\": 4,\n- \"suspenseEvents\": Array [],\n- }\n- `);\n+ \"timestamp\": 0.011,\n+ \"type\": \"layout-effects\",\n+ },\n+ ],\n+ },\n+ \"componentMeasures\": Array [],\n+ \"duration\": 0.013,\n+ \"flamechart\": Array [],\n+ \"laneToLabelMap\": Map {\n+ 0 => \"Sync\",\n+ 1 => \"InputContinuousHydration\",\n+ 2 => \"InputContinuous\",\n+ 3 => \"DefaultHydration\",\n+ 4 => \"Default\",\n+ 5 => \"TransitionHydration\",\n+ 6 => \"Transition\",\n+ 7 => \"Transition\",\n+ 8 => \"Transition\",\n+ 9 => \"Transition\",\n+ 10 => \"Transition\",\n+ 11 => \"Transition\",\n+ 12 => \"Transition\",\n+ 13 => \"Transition\",\n+ 14 => \"Transition\",\n+ 15 => \"Transition\",\n+ 16 => \"Transition\",\n+ 17 => \"Transition\",\n+ 18 => \"Transition\",\n+ 19 => \"Transition\",\n+ 20 => \"Transition\",\n+ 21 => \"Transition\",\n+ 22 => \"Retry\",\n+ 23 => \"Retry\",\n+ 24 => \"Retry\",\n+ 25 => \"Retry\",\n+ 26 => \"Retry\",\n+ 27 => \"SelectiveHydration\",\n+ 28 => \"IdleHydration\",\n+ 29 => \"Idle\",\n+ 30 => \"Offscreen\",\n+ },\n+ \"laneToReactMeasureMap\": Map {\n+ 0 => Array [\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.008,\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.001,\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.005999999999999999,\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.007,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.011,\n+ \"type\": \"layout-effects\",\n+ },\n+ ],\n+ 1 => Array [],\n+ 2 => Array [],\n+ 3 => Array [],\n+ 4 => Array [],\n+ 5 => Array [],\n+ 6 => Array [],\n+ 7 => Array [],\n+ 8 => Array [],\n+ 9 => Array [],\n+ 10 => Array [],\n+ 11 => Array [],\n+ 12 => Array [],\n+ 13 => Array [],\n+ 14 => Array [],\n+ 15 => Array [],\n+ 16 => Array [],\n+ 17 => Array [],\n+ 18 => Array [],\n+ 19 => Array [],\n+ 20 => Array [],\n+ 21 => Array [],\n+ 22 => Array [],\n+ 23 => Array [],\n+ 24 => Array [],\n+ 25 => Array [],\n+ 26 => Array [],\n+ 27 => Array [],\n+ 28 => Array [],\n+ 29 => Array [],\n+ 30 => Array [],\n+ },\n+ \"nativeEvents\": Array [],\n+ \"otherUserTimingMarks\": Array [\n+ Object {\n+ \"name\": \"__v3\",\n+ \"timestamp\": 0.003,\n+ },\n+ ],\n+ \"reactVersion\": \"17.0.3\",\n+ \"schedulingEvents\": Array [\n+ Object {\n+ \"lanes\": Array [\n+ 0,\n+ ],\n+ \"timestamp\": 0.004,\n+ \"type\": \"schedule-render\",\n+ \"warning\": null,\n+ },\n+ ],\n+ \"startTime\": 4,\n+ \"suspenseEvents\": Array [],\n+ }\n+ `);\n }\n });\n \n@@ -572,189 +757,327 @@ describe(preprocessData, () => {\n ...createUserTimingData(clearedMarks),\n ]);\n expect(data).toMatchInlineSnapshot(`\n+ Object {\n+ \"batchUIDToMeasuresMap\": Map {\n+ 0 => Array [\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.009999999999999998,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.003,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.006,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.009,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.013,\n+ \"type\": \"layout-effects\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.0019999999999999983,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.016,\n+ \"type\": \"passive-effects\",\n+ },\n+ ],\n+ 1 => Array [\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.010000000000000002,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.019,\n+ \"type\": \"render-idle\",\n+ },\n Object {\n- \"componentMeasures\": Array [\n- Object {\n- \"componentName\": \"App\",\n- \"duration\": 0.001,\n- \"timestamp\": 0.006,\n- \"warning\": null,\n- },\n- Object {\n- \"componentName\": \"App\",\n- \"duration\": 0.0010000000000000009,\n- \"timestamp\": 0.02,\n- \"warning\": null,\n- },\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.002999999999999999,\n+ \"lanes\": Array [\n+ 4,\n ],\n- \"duration\": 0.031,\n- \"flamechart\": Array [],\n- \"laneToLabelMap\": Map {\n- 0 => \"Sync\",\n- 1 => \"InputContinuousHydration\",\n- 2 => \"InputContinuous\",\n- 3 => \"DefaultHydration\",\n- 4 => \"Default\",\n- 5 => \"TransitionHydration\",\n- 6 => \"Transition\",\n- 7 => \"Transition\",\n- 8 => \"Transition\",\n- 9 => \"Transition\",\n- 10 => \"Transition\",\n- 11 => \"Transition\",\n- 12 => \"Transition\",\n- 13 => \"Transition\",\n- 14 => \"Transition\",\n- 15 => \"Transition\",\n- 16 => \"Transition\",\n- 17 => \"Transition\",\n- 18 => \"Transition\",\n- 19 => \"Transition\",\n- 20 => \"Transition\",\n- 21 => \"Transition\",\n- 22 => \"Retry\",\n- 23 => \"Retry\",\n- 24 => \"Retry\",\n- 25 => \"Retry\",\n- 26 => \"Retry\",\n- 27 => \"SelectiveHydration\",\n- 28 => \"IdleHydration\",\n- 29 => \"Idle\",\n- 30 => \"Offscreen\",\n- },\n- \"measures\": Array [\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.009999999999999998,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.005,\n- \"type\": \"render-idle\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.003,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.005,\n- \"type\": \"render\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.006,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.009,\n- \"type\": \"commit\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 1,\n- \"duration\": 0.0010000000000000009,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.013,\n- \"type\": \"layout-effects\",\n- },\n- Object {\n- \"batchUID\": 0,\n- \"depth\": 0,\n- \"duration\": 0.0019999999999999983,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.016,\n- \"type\": \"passive-effects\",\n- },\n- Object {\n- \"batchUID\": 1,\n- \"depth\": 0,\n- \"duration\": 0.010000000000000002,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.019,\n- \"type\": \"render-idle\",\n- },\n- Object {\n- \"batchUID\": 1,\n- \"depth\": 0,\n- \"duration\": 0.002999999999999999,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.019,\n- \"type\": \"render\",\n- },\n- Object {\n- \"batchUID\": 1,\n- \"depth\": 0,\n- \"duration\": 0.006000000000000002,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.023,\n- \"type\": \"commit\",\n- },\n- Object {\n- \"batchUID\": 1,\n- \"depth\": 1,\n- \"duration\": 0.0010000000000000009,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.027,\n- \"type\": \"layout-effects\",\n- },\n- Object {\n- \"batchUID\": 1,\n- \"depth\": 0,\n- \"duration\": 0.0010000000000000009,\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.03,\n- \"type\": \"passive-effects\",\n- },\n+ \"timestamp\": 0.019,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.006000000000000002,\n+ \"lanes\": Array [\n+ 4,\n ],\n- \"nativeEvents\": Array [],\n- \"otherUserTimingMarks\": Array [\n- Object {\n- \"name\": \"__v3\",\n- \"timestamp\": 0.003,\n- },\n+ \"timestamp\": 0.023,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n ],\n- \"reactVersion\": \"17.0.3\",\n- \"schedulingEvents\": Array [\n- Object {\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.004,\n- \"type\": \"schedule-render\",\n- \"warning\": null,\n- },\n- Object {\n- \"componentName\": \"App\",\n- \"lanes\": Array [\n- 4,\n- ],\n- \"timestamp\": 0.017,\n- \"type\": \"schedule-state-update\",\n- \"warning\": null,\n- },\n+ \"timestamp\": 0.027,\n+ \"type\": \"layout-effects\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n ],\n- \"startTime\": 4,\n- \"suspenseEvents\": Array [],\n- }\n- `);\n+ \"timestamp\": 0.03,\n+ \"type\": \"passive-effects\",\n+ },\n+ ],\n+ },\n+ \"componentMeasures\": Array [\n+ Object {\n+ \"componentName\": \"App\",\n+ \"duration\": 0.001,\n+ \"timestamp\": 0.006,\n+ \"warning\": null,\n+ },\n+ Object {\n+ \"componentName\": \"App\",\n+ \"duration\": 0.0010000000000000009,\n+ \"timestamp\": 0.02,\n+ \"warning\": null,\n+ },\n+ ],\n+ \"duration\": 0.031,\n+ \"flamechart\": Array [],\n+ \"laneToLabelMap\": Map {\n+ 0 => \"Sync\",\n+ 1 => \"InputContinuousHydration\",\n+ 2 => \"InputContinuous\",\n+ 3 => \"DefaultHydration\",\n+ 4 => \"Default\",\n+ 5 => \"TransitionHydration\",\n+ 6 => \"Transition\",\n+ 7 => \"Transition\",\n+ 8 => \"Transition\",\n+ 9 => \"Transition\",\n+ 10 => \"Transition\",\n+ 11 => \"Transition\",\n+ 12 => \"Transition\",\n+ 13 => \"Transition\",\n+ 14 => \"Transition\",\n+ 15 => \"Transition\",\n+ 16 => \"Transition\",\n+ 17 => \"Transition\",\n+ 18 => \"Transition\",\n+ 19 => \"Transition\",\n+ 20 => \"Transition\",\n+ 21 => \"Transition\",\n+ 22 => \"Retry\",\n+ 23 => \"Retry\",\n+ 24 => \"Retry\",\n+ 25 => \"Retry\",\n+ 26 => \"Retry\",\n+ 27 => \"SelectiveHydration\",\n+ 28 => \"IdleHydration\",\n+ 29 => \"Idle\",\n+ 30 => \"Offscreen\",\n+ },\n+ \"laneToReactMeasureMap\": Map {\n+ 0 => Array [],\n+ 1 => Array [],\n+ 2 => Array [],\n+ 3 => Array [],\n+ 4 => Array [\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.009999999999999998,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.003,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.005,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.006,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.009,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.013,\n+ \"type\": \"layout-effects\",\n+ },\n+ Object {\n+ \"batchUID\": 0,\n+ \"depth\": 0,\n+ \"duration\": 0.0019999999999999983,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.016,\n+ \"type\": \"passive-effects\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.010000000000000002,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.019,\n+ \"type\": \"render-idle\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.002999999999999999,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.019,\n+ \"type\": \"render\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.006000000000000002,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.023,\n+ \"type\": \"commit\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 1,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.027,\n+ \"type\": \"layout-effects\",\n+ },\n+ Object {\n+ \"batchUID\": 1,\n+ \"depth\": 0,\n+ \"duration\": 0.0010000000000000009,\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.03,\n+ \"type\": \"passive-effects\",\n+ },\n+ ],\n+ 5 => Array [],\n+ 6 => Array [],\n+ 7 => Array [],\n+ 8 => Array [],\n+ 9 => Array [],\n+ 10 => Array [],\n+ 11 => Array [],\n+ 12 => Array [],\n+ 13 => Array [],\n+ 14 => Array [],\n+ 15 => Array [],\n+ 16 => Array [],\n+ 17 => Array [],\n+ 18 => Array [],\n+ 19 => Array [],\n+ 20 => Array [],\n+ 21 => Array [],\n+ 22 => Array [],\n+ 23 => Array [],\n+ 24 => Array [],\n+ 25 => Array [],\n+ 26 => Array [],\n+ 27 => Array [],\n+ 28 => Array [],\n+ 29 => Array [],\n+ 30 => Array [],\n+ },\n+ \"nativeEvents\": Array [],\n+ \"otherUserTimingMarks\": Array [\n+ Object {\n+ \"name\": \"__v3\",\n+ \"timestamp\": 0.003,\n+ },\n+ ],\n+ \"reactVersion\": \"17.0.3\",\n+ \"schedulingEvents\": Array [\n+ Object {\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.004,\n+ \"type\": \"schedule-render\",\n+ \"warning\": null,\n+ },\n+ Object {\n+ \"componentName\": \"App\",\n+ \"lanes\": Array [\n+ 4,\n+ ],\n+ \"timestamp\": 0.017,\n+ \"type\": \"schedule-state-update\",\n+ \"warning\": null,\n+ },\n+ ],\n+ \"startTime\": 4,\n+ \"suspenseEvents\": Array [],\n+ }\n+ `);\n }\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 532251ce5a..5adb7f89b7 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@@ -13,13 +13,14 @@ import {\n } from '@elg\/speedscope';\n import type {TimelineEvent} from '@elg\/speedscope';\n import type {\n- Milliseconds,\n BatchUID,\n Flamechart,\n+ Milliseconds,\n NativeEvent,\n Phase,\n ReactLane,\n ReactComponentMeasure,\n+ ReactMeasure,\n ReactMeasureType,\n ReactProfilerData,\n SchedulingEvent,\n@@ -33,7 +34,7 @@ import {getBatchRange} from '..\/utils\/getBatchRange';\n type MeasureStackElement = {|\n type: ReactMeasureType,\n depth: number,\n- index: number,\n+ measure: ReactMeasure,\n startTime: Milliseconds,\n stopTime?: Milliseconds,\n |};\n@@ -92,17 +93,19 @@ export function getLanesFromTransportDecimalBitmask(\n return lanes;\n }\n \n-const laneToLabelMap: Map = new Map();\n-function updateLaneToLabelMap(laneLabelTuplesString: string): void {\n+function updateLaneToLabelMap(\n+ profilerData: ReactProfilerData,\n+ laneLabelTuplesString: string,\n+): void {\n \/\/ These marks appear multiple times in the data;\n \/\/ We only need to extact them once.\n- if (laneToLabelMap.size === 0) {\n+ if (profilerData.laneToLabelMap.size === 0) {\n const laneLabelTuples = laneLabelTuplesString.split(',');\n for (let laneIndex = 0; laneIndex < laneLabelTuples.length; laneIndex++) {\n \/\/ The numeric lane value (e.g. 64) isn't important.\n \/\/ The profiler parses and stores the lane's position within the bitmap,\n \/\/ (e.g. lane 1 is index 0, lane 16 is index 4).\n- laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);\n+ profilerData.laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);\n }\n }\n }\n@@ -133,18 +136,32 @@ function markWorkStarted(\n state: ProcessorState,\n ) {\n const {batchUID, measureStack} = state;\n- const index = currentProfilerData.measures.length;\n const depth = getDepth(measureStack);\n \n- state.measureStack.push({depth, index, startTime, type});\n-\n- currentProfilerData.measures.push({\n+ const measure: ReactMeasure = {\n type,\n batchUID,\n depth,\n lanes,\n timestamp: startTime,\n duration: 0,\n+ };\n+\n+ state.measureStack.push({depth, measure, startTime, type});\n+\n+ \/\/ This array is pre-initialized when the batchUID is generated.\n+ const measures = currentProfilerData.batchUIDToMeasuresMap.get(batchUID);\n+ if (measures != null) {\n+ measures.push(measure);\n+ } else {\n+ currentProfilerData.batchUIDToMeasuresMap.set(state.batchUID, [measure]);\n+ }\n+\n+ \/\/ This array is pre-initialized before processing starts.\n+ lanes.forEach(lane => {\n+ ((currentProfilerData.laneToReactMeasureMap.get(\n+ lane,\n+ ): any): ReactMeasure[]).push(measure);\n });\n }\n \n@@ -174,8 +191,7 @@ function markWorkCompleted(\n );\n }\n \n- const {index, startTime} = stack.pop();\n- const measure = currentProfilerData.measures[index];\n+ const {measure, startTime} = stack.pop();\n if (!measure) {\n console.error('Could not find matching measure for type \"%s\".', type);\n }\n@@ -282,7 +298,7 @@ function processTimelineEvent(\n }\n } else if (name.startsWith('--react-lane-labels-')) {\n const [laneLabelTuplesString] = name.substr(20).split('-');\n- updateLaneToLabelMap(laneLabelTuplesString);\n+ updateLaneToLabelMap(currentProfilerData, laneLabelTuplesString);\n } else if (name.startsWith('--component-render-start-')) {\n const [componentName] = name.substr(25).split('-');\n \n@@ -648,12 +664,18 @@ export default function preprocessData(\n ): ReactProfilerData {\n const flamechart = preprocessFlamechart(timeline);\n \n+ const laneToReactMeasureMap = new Map();\n+ for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {\n+ laneToReactMeasureMap.set(lane, []);\n+ }\n+\n const profilerData: ReactProfilerData = {\n+ batchUIDToMeasuresMap: new Map(),\n componentMeasures: [],\n duration: 0,\n flamechart,\n- laneToLabelMap,\n- measures: [],\n+ laneToLabelMap: new Map(),\n+ laneToReactMeasureMap,\n nativeEvents: [],\n otherUserTimingMarks: [],\n reactVersion: null,\n@@ -739,7 +761,11 @@ export default function preprocessData(\n state.potentialSuspenseEventsOutsideOfTransition.forEach(\n ([suspenseEvent, lanes]) => {\n \/\/ HACK This is a bit gross but the numeric lane value might change between render versions.\n- if (!lanes.some(lane => laneToLabelMap.get(lane) === 'Transition')) {\n+ if (\n+ !lanes.some(\n+ lane => profilerData.laneToLabelMap.get(lane) === 'Transition',\n+ )\n+ ) {\n suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;\n }\n },\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex edd683043a..761033f2cd 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -7,7 +7,7 @@\n * @flow\n *\/\n \n-\/\/ Type utilities\n+import type {ScrollState} from '.\/view-base\/utils\/scrollState';\n \n \/\/ Source: https:\/\/github.com\/facebook\/flow\/issues\/4002#issuecomment-323612798\n \/\/ eslint-disable-next-line no-unused-vars\n@@ -123,12 +123,29 @@ export type FlamechartStackLayer = FlamechartStackFrame[];\n \n export type Flamechart = FlamechartStackLayer[];\n \n+export type HorizontalScrollStateChangeCallback = (\n+ scrollState: ScrollState,\n+) => void;\n+\n+\/\/ Imperative view state that corresponds to profiler data.\n+\/\/ This state lives outside of React's lifecycle\n+\/\/ and should be erased\/reset whenever new profiler data is loaded.\n+export type ViewState = {|\n+ horizontalScrollState: ScrollState,\n+ onHorizontalScrollStateChange: (\n+ callback: HorizontalScrollStateChangeCallback,\n+ ) => void,\n+ updateHorizontalScrollState: (scrollState: ScrollState) => void,\n+ viewToMutableViewStateMap: Map,\n+|};\n+\n export type ReactProfilerData = {|\n+ batchUIDToMeasuresMap: Map,\n componentMeasures: ReactComponentMeasure[],\n duration: number,\n flamechart: Flamechart,\n laneToLabelMap: Map,\n- measures: ReactMeasure[],\n+ laneToReactMeasureMap: Map,\n nativeEvents: NativeEvent[],\n otherUserTimingMarks: UserTimingMark[],\n reactVersion: string | null,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/utils\/getBatchRange.js b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/getBatchRange.js\nindex 0d977e0390..840a105f8d 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/utils\/getBatchRange.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/getBatchRange.js\n@@ -9,37 +9,35 @@\n \n import memoize from 'memoize-one';\n \n-import type {BatchUID, Milliseconds, ReactProfilerData} from '..\/types';\n+import type {\n+ BatchUID,\n+ Milliseconds,\n+ ReactMeasure,\n+ ReactProfilerData,\n+} from '..\/types';\n \n function unmemoizedGetBatchRange(\n batchUID: BatchUID,\n data: ReactProfilerData,\n- minStartTime?: ?number,\n+ minStartTime?: number = 0,\n ): [Milliseconds, Milliseconds] {\n- const {measures} = data;\n-\n- let startTime = 0;\n- let stopTime = Infinity;\n+ const measures = data.batchUIDToMeasuresMap.get(batchUID);\n+ if (measures == null || measures.length === 0) {\n+ throw Error(`Could not find measures with batch UID \"${batchUID}\"`);\n+ }\n \n- let i = 0;\n+ const lastMeasure = ((measures[measures.length - 1]: any): ReactMeasure);\n+ const stopTime = lastMeasure.timestamp + lastMeasure.duration;\n \n- \/\/ Find the first measure in the current batch.\n- for (i; i < measures.length; i++) {\n- const measure = measures[i];\n- if (measure.batchUID === batchUID) {\n- if (minStartTime == null || measure.timestamp >= minStartTime) {\n- startTime = measure.timestamp;\n- break;\n- }\n- }\n+ if (stopTime < minStartTime) {\n+ return [0, 0];\n }\n \n- \/\/ Find the last measure in the current batch.\n- for (i; i < measures.length; i++) {\n- const measure = measures[i];\n- if (measure.batchUID === batchUID) {\n- stopTime = measure.timestamp;\n- } else {\n+ let startTime = minStartTime;\n+ for (let index = 0; index < measures.length; index++) {\n+ const measure = measures[index];\n+ if (measure.timestamp >= minStartTime) {\n+ startTime = measure.timestamp;\n break;\n }\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js\nindex 78d90e2495..5519599f12 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js\n@@ -18,6 +18,7 @@ import type {\n import type {Rect} from '.\/geometry';\n import type {ScrollState} from '.\/utils\/scrollState';\n import type {ViewRefs} from '.\/Surface';\n+import type {ViewState} from '..\/types';\n \n import {Surface} from '.\/Surface';\n import {View} from '.\/View';\n@@ -30,96 +31,84 @@ import {\n zoomState,\n } from '.\/utils\/scrollState';\n import {\n- DEFAULT_ZOOM_LEVEL,\n MAX_ZOOM_LEVEL,\n MIN_ZOOM_LEVEL,\n MOVE_WHEEL_DELTA_THRESHOLD,\n } from '.\/constants';\n \n-export type HorizontalPanAndZoomViewOnChangeCallback = (\n- state: ScrollState,\n- view: HorizontalPanAndZoomView,\n-) => void;\n-\n export class HorizontalPanAndZoomView extends View {\n+ _contentView: View;\n _intrinsicContentWidth: number;\n _isPanning = false;\n- _scrollState: ScrollState = {offset: 0, length: 0};\n- _onStateChange: HorizontalPanAndZoomViewOnChangeCallback = () => {};\n+ _viewState: ViewState;\n \n constructor(\n surface: Surface,\n frame: Rect,\n contentView: View,\n intrinsicContentWidth: number,\n- onStateChange?: HorizontalPanAndZoomViewOnChangeCallback,\n+ viewState: ViewState,\n ) {\n super(surface, frame);\n- this.addSubview(contentView);\n- this._intrinsicContentWidth = intrinsicContentWidth;\n- this._setScrollState({\n- offset: 0,\n- length: intrinsicContentWidth * DEFAULT_ZOOM_LEVEL,\n- });\n- if (onStateChange) this._onStateChange = onStateChange;\n- }\n \n- setFrame(newFrame: Rect) {\n- super.setFrame(newFrame);\n+ this._contentView = contentView;\n+ this._intrinsicContentWidth = intrinsicContentWidth;\n+ this._viewState = viewState;\n \n- \/\/ Revalidate scrollState\n- this._setStateAndInformCallbacksIfChanged(this._scrollState);\n- }\n+ viewState.onHorizontalScrollStateChange(scrollState => {\n+ this.zoomToRange(scrollState.offset, scrollState.length);\n+ });\n \n- setScrollState(proposedState: ScrollState) {\n- this._setScrollState(proposedState);\n+ this.addSubview(contentView);\n }\n \n \/**\n- * Just sets scroll state. Use `_setStateAndInformCallbacksIfChanged` if this\n- * view's callbacks should also be called.\n+ * Just sets scroll state.\n+ * Use `_setStateAndInformCallbacksIfChanged` if this view's callbacks should also be called.\n *\n * @returns Whether state was changed\n * @private\n *\/\n- _setScrollState(proposedState: ScrollState): boolean {\n+ setScrollState(proposedState: ScrollState) {\n const clampedState = clampState({\n state: proposedState,\n minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,\n maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,\n containerLength: this.frame.size.width,\n });\n- if (areScrollStatesEqual(clampedState, this._scrollState)) {\n- return false;\n+ if (\n+ !areScrollStatesEqual(clampedState, this._viewState.horizontalScrollState)\n+ ) {\n+ this.setNeedsDisplay();\n }\n- this._scrollState = clampedState;\n- this.setNeedsDisplay();\n- return true;\n }\n \n \/**\n- * @private\n+ * Zoom to a specific range of the content specified as a range of the\n+ * content view's intrinsic content size.\n+ *\n+ * Does not inform callbacks of state change since this is a public API.\n *\/\n- _setStateAndInformCallbacksIfChanged(proposedState: ScrollState) {\n- if (this._setScrollState(proposedState)) {\n- this._onStateChange(this._scrollState, this);\n- }\n+ zoomToRange(rangeStart: number, rangeEnd: number) {\n+ const newState = moveStateToRange({\n+ state: this._viewState.horizontalScrollState,\n+ rangeStart,\n+ rangeEnd,\n+ contentLength: this._intrinsicContentWidth,\n+\n+ minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,\n+ maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,\n+ containerLength: this.frame.size.width,\n+ });\n+ this.setScrollState(newState);\n }\n \n desiredSize() {\n return this._contentView.desiredSize();\n }\n \n- \/**\n- * Reference to the content view. This view is also the only view in\n- * `this.subviews`.\n- *\/\n- get _contentView() {\n- return this.subviews[0];\n- }\n-\n layoutSubviews() {\n- const {offset, length} = this._scrollState;\n+ const {offset, length} = this._viewState.horizontalScrollState;\n const proposedFrame = {\n origin: {\n x: this.frame.origin.x + offset,\n@@ -134,24 +123,22 @@ export class HorizontalPanAndZoomView extends View {\n super.layoutSubviews();\n }\n \n- \/**\n- * Zoom to a specific range of the content specified as a range of the\n- * content view's intrinsic content size.\n- *\n- * Does not inform callbacks of state change since this is a public API.\n- *\/\n- zoomToRange(rangeStart: number, rangeEnd: number) {\n- const newState = moveStateToRange({\n- state: this._scrollState,\n- rangeStart,\n- rangeEnd,\n- contentLength: this._intrinsicContentWidth,\n-\n- minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,\n- maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,\n- containerLength: this.frame.size.width,\n- });\n- this._setScrollState(newState);\n+ handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n+ switch (interaction.type) {\n+ case 'mousedown':\n+ this._handleMouseDown(interaction, viewRefs);\n+ break;\n+ case 'mousemove':\n+ this._handleMouseMove(interaction, viewRefs);\n+ break;\n+ case 'mouseup':\n+ this._handleMouseUp(interaction, viewRefs);\n+ break;\n+ case 'wheel-plain':\n+ case 'wheel-shift':\n+ this._handleWheel(interaction);\n+ break;\n+ }\n }\n \n _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {\n@@ -183,11 +170,11 @@ export class HorizontalPanAndZoomView extends View {\n return;\n }\n const newState = translateState({\n- state: this._scrollState,\n+ state: this._viewState.horizontalScrollState,\n delta: interaction.payload.event.movementX,\n containerLength: this.frame.size.width,\n });\n- this._setStateAndInformCallbacksIfChanged(newState);\n+ this._viewState.updateHorizontalScrollState(newState);\n }\n \n _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {\n@@ -226,44 +213,26 @@ export class HorizontalPanAndZoomView extends View {\n }\n \n const newState = zoomState({\n- state: this._scrollState,\n+ state: this._viewState.horizontalScrollState,\n multiplier: 1 + 0.005 * -deltaY,\n- fixedPoint: location.x - this._scrollState.offset,\n+ fixedPoint: location.x - this._viewState.horizontalScrollState.offset,\n \n minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,\n maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,\n containerLength: this.frame.size.width,\n });\n- this._setStateAndInformCallbacksIfChanged(newState);\n+ this._viewState.updateHorizontalScrollState(newState);\n } else {\n if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {\n return;\n }\n \n const newState = translateState({\n- state: this._scrollState,\n+ state: this._viewState.horizontalScrollState,\n delta: -deltaX,\n containerLength: this.frame.size.width,\n });\n- this._setStateAndInformCallbacksIfChanged(newState);\n- }\n- }\n-\n- handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n- switch (interaction.type) {\n- case 'mousedown':\n- this._handleMouseDown(interaction, viewRefs);\n- break;\n- case 'mousemove':\n- this._handleMouseMove(interaction, viewRefs);\n- break;\n- case 'mouseup':\n- this._handleMouseUp(interaction, viewRefs);\n- break;\n- case 'wheel-plain':\n- case 'wheel-shift':\n- this._handleWheel(interaction);\n- break;\n+ this._viewState.updateHorizontalScrollState(newState);\n }\n }\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\nindex 8394bcf105..1f0f890ce3 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\n@@ -17,6 +17,7 @@ import type {\n } from '.\/useCanvasInteraction';\n import type {Rect} from '.\/geometry';\n import type {ViewRefs} from '.\/Surface';\n+import type {ViewState} from '..\/types';\n \n import {BORDER_SIZE, COLORS} from '..\/content-views\/constants';\n import {drawText} from '..\/content-views\/utils\/text';\n@@ -35,10 +36,10 @@ type ResizingState = $ReadOnly<{|\n mouseY: number,\n |}>;\n \n-type LayoutState = $ReadOnly<{|\n+type LayoutState = {|\n \/** Resize bar's vertical position relative to resize view's frame.origin.y *\/\n barOffsetY: number,\n-|}>;\n+|};\n \n const RESIZE_BAR_DOT_RADIUS = 1;\n const RESIZE_BAR_DOT_SPACING = 4;\n@@ -217,36 +218,33 @@ class ResizeBar extends View {\n export class ResizableView extends View {\n _canvasRef: {current: HTMLCanvasElement | null};\n _layoutState: LayoutState;\n+ _mutableViewStateKey: string;\n _resizeBar: ResizeBar;\n _resizingState: ResizingState | null = null;\n _subview: View;\n+ _viewState: ViewState;\n \n constructor(\n surface: Surface,\n frame: Rect,\n subview: View,\n+ viewState: ViewState,\n canvasRef: {current: HTMLCanvasElement | null},\n label: string,\n ) {\n super(surface, frame, noopLayout);\n \n this._canvasRef = canvasRef;\n-\n+ this._layoutState = {barOffsetY: 0};\n+ this._mutableViewStateKey = label + ':ResizableView';\n this._subview = subview;\n this._resizeBar = new ResizeBar(surface, frame, label);\n+ this._viewState = viewState;\n \n this.addSubview(this._subview);\n this.addSubview(this._resizeBar);\n \n- const subviewDesiredSize = subview.desiredSize();\n- this._updateLayoutStateAndResizeBar(\n- subviewDesiredSize.maxInitialHeight != null\n- ? Math.min(\n- subviewDesiredSize.maxInitialHeight,\n- subviewDesiredSize.height,\n- )\n- : subviewDesiredSize.height,\n- );\n+ this._restoreMutableViewState();\n }\n \n desiredSize() {\n@@ -274,6 +272,35 @@ export class ResizableView extends View {\n super.layoutSubviews();\n }\n \n+ _restoreMutableViewState() {\n+ if (\n+ this._viewState.viewToMutableViewStateMap.has(this._mutableViewStateKey)\n+ ) {\n+ this._layoutState = ((this._viewState.viewToMutableViewStateMap.get(\n+ this._mutableViewStateKey,\n+ ): any): LayoutState);\n+\n+ this._updateLayoutStateAndResizeBar(this._layoutState.barOffsetY);\n+ } else {\n+ this._viewState.viewToMutableViewStateMap.set(\n+ this._mutableViewStateKey,\n+ this._layoutState,\n+ );\n+\n+ const subviewDesiredSize = this._subview.desiredSize();\n+ this._updateLayoutStateAndResizeBar(\n+ subviewDesiredSize.maxInitialHeight != null\n+ ? Math.min(\n+ subviewDesiredSize.maxInitialHeight,\n+ subviewDesiredSize.height,\n+ )\n+ : subviewDesiredSize.height,\n+ );\n+ }\n+\n+ this.setNeedsDisplay();\n+ }\n+\n _shouldRenderResizeBar() {\n const subviewDesiredSize = this._subview.desiredSize();\n return subviewDesiredSize.hideScrollBarIfLessThanHeight != null\n@@ -287,10 +314,7 @@ export class ResizableView extends View {\n barOffsetY = 0;\n }\n \n- this._layoutState = {\n- ...this._layoutState,\n- barOffsetY,\n- };\n+ this._layoutState.barOffsetY = barOffsetY;\n \n this._resizeBar.showLabel = barOffsetY === 0;\n }\n@@ -341,6 +365,10 @@ export class ResizableView extends View {\n }\n \n _handleClick(interaction: ClickInteraction) {\n+ if (!this._shouldRenderResizeBar()) {\n+ return;\n+ }\n+\n const cursorInView = rectContainsPoint(\n interaction.payload.location,\n this.frame,\n@@ -356,6 +384,10 @@ export class ResizableView extends View {\n }\n \n _handleDoubleClick(interaction: DoubleClickInteraction) {\n+ if (!this._shouldRenderResizeBar()) {\n+ return;\n+ }\n+\n const cursorInView = rectContainsPoint(\n interaction.payload.location,\n this.frame,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js\nindex 245b53aff7..3f2f775912 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js\n@@ -17,6 +17,7 @@ import type {\n import type {Rect} from '.\/geometry';\n import type {ScrollState} from '.\/utils\/scrollState';\n import type {ViewRefs} from '.\/Surface';\n+import type {ViewState} from '..\/types';\n \n import {Surface} from '.\/Surface';\n import {View} from '.\/View';\n@@ -34,13 +35,33 @@ const CARET_WIDTH = 5;\n const CARET_HEIGHT = 3;\n \n export class VerticalScrollView extends View {\n- _scrollState: ScrollState = {offset: 0, length: 0};\n- _isPanning = false;\n-\n- constructor(surface: Surface, frame: Rect, contentView: View) {\n+ _contentView: View;\n+ _isPanning: boolean;\n+ _mutableViewStateKey: string;\n+ _scrollState: ScrollState;\n+ _viewState: ViewState;\n+\n+ constructor(\n+ surface: Surface,\n+ frame: Rect,\n+ contentView: View,\n+ viewState: ViewState,\n+ label: string,\n+ ) {\n super(surface, frame);\n+\n+ this._contentView = contentView;\n+ this._isPanning = false;\n+ this._mutableViewStateKey = label + ':VerticalScrollView';\n+ this._scrollState = {\n+ offset: 0,\n+ length: 0,\n+ };\n+ this._viewState = viewState;\n+\n this.addSubview(contentView);\n- this._setScrollState(this._scrollState);\n+\n+ this._restoreMutableViewState();\n }\n \n setFrame(newFrame: Rect) {\n@@ -102,14 +123,6 @@ export class VerticalScrollView extends View {\n }\n }\n \n- \/**\n- * Reference to the content view. This view is also the only view in\n- * `this.subviews`.\n- *\/\n- get _contentView() {\n- return this.subviews[0];\n- }\n-\n layoutSubviews() {\n const {offset} = this._scrollState;\n const desiredSize = this._contentView.desiredSize();\n@@ -133,6 +146,23 @@ export class VerticalScrollView extends View {\n super.layoutSubviews();\n }\n \n+ handleInteraction(interaction: Interaction) {\n+ switch (interaction.type) {\n+ case 'mousedown':\n+ this._handleMouseDown(interaction);\n+ break;\n+ case 'mousemove':\n+ this._handleMouseMove(interaction);\n+ break;\n+ case 'mouseup':\n+ this._handleMouseUp(interaction);\n+ break;\n+ case 'wheel-shift':\n+ this._handleWheelShift(interaction);\n+ break;\n+ }\n+ }\n+\n _handleMouseDown(interaction: MouseDownInteraction) {\n if (rectContainsPoint(interaction.payload.location, this.frame)) {\n this._isPanning = true;\n@@ -184,21 +214,21 @@ export class VerticalScrollView extends View {\n this._setScrollState(newState);\n }\n \n- handleInteraction(interaction: Interaction) {\n- switch (interaction.type) {\n- case 'mousedown':\n- this._handleMouseDown(interaction);\n- break;\n- case 'mousemove':\n- this._handleMouseMove(interaction);\n- break;\n- case 'mouseup':\n- this._handleMouseUp(interaction);\n- break;\n- case 'wheel-shift':\n- this._handleWheelShift(interaction);\n- break;\n+ _restoreMutableViewState() {\n+ if (\n+ this._viewState.viewToMutableViewStateMap.has(this._mutableViewStateKey)\n+ ) {\n+ this._scrollState = ((this._viewState.viewToMutableViewStateMap.get(\n+ this._mutableViewStateKey,\n+ ): any): ScrollState);\n+ } else {\n+ this._viewState.viewToMutableViewStateMap.set(\n+ this._mutableViewStateKey,\n+ this._scrollState,\n+ );\n }\n+\n+ this.setNeedsDisplay();\n }\n \n \/**\n@@ -212,10 +242,11 @@ export class VerticalScrollView extends View {\n maxContentLength: height,\n containerLength: this.frame.size.height,\n });\n- if (areScrollStatesEqual(clampedState, this._scrollState)) {\n- return;\n+ if (!areScrollStatesEqual(clampedState, this._scrollState)) {\n+ this._scrollState.offset = clampedState.offset;\n+ this._scrollState.length = clampedState.length;\n+\n+ this.setNeedsDisplay();\n }\n- this._scrollState = clampedState;\n- this.setNeedsDisplay();\n }\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/utils\/scrollState.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/utils\/scrollState.js\nindex e7f73a86d3..9e9bdb4919 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/utils\/scrollState.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/utils\/scrollState.js\n@@ -18,10 +18,10 @@ import {clamp} from '.\/clamp';\n * |<-------------------length------------------->|\n * ```\n *\/\n-export type ScrollState = $ReadOnly<{|\n+export type ScrollState = {|\n offset: number,\n length: number,\n-|}>;\n+|};\n \n function clampOffset(state: ScrollState, containerLength: number): ScrollState {\n return {\n","body":"","files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.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-scheduling-profiler\/src\/utils\/getBatchRange.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/utils\/scrollState.js"}],"commit":{"revision":"5634ed16aaba4a507844f0502953abcf40e3a165","subject":"Scheduling Profiler: Misc UX and performance improvements (#22043)","authorName":"Brian Vaughn","authoredAt":"2021-08-09T17:11:33-04:00","shortRevision":"5634ed16aa","authorEmail":"bvaughn@fb.com"}}

dillon1000/react

Files changed