{"body":"","parents":["b537247678ea44399573088b74f4cf11b8114743"],"files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js"},{"status":"R073","previousPath":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.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":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/utils\/formatting.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/utils\/useSmartTooltip.js"},{"status":"R051","previousPath":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/ColorView.js","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/BackgroundColorView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js"},{"status":"D","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableSplitView.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollOverflowView.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\/View.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/index.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/layouter.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/useCanvasInteraction.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/root.css"},{"status":"M","path":"packages\/react-devtools-shared\/src\/hookNamesCache.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/SchedulingProfiler.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js"}],"commit":{"revision":"27bf6f9a832e4ccc20cfb5a81850ae8d4cc2f92b","shortRevision":"27bf6f9a83","authorName":"Brian Vaughn","authoredAt":"2021-08-02T09:23:48-04:00","subject":"Scheduling profiler UX changes (#21990)","authorEmail":"bvaughn@fb.com"},"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex eb6b746dec..b35628a705 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -31,8 +31,9 @@ import {copy} from 'clipboard-js';\n import prettyMilliseconds from 'pretty-ms';\n \n import {\n+ BackgroundColorView,\n HorizontalPanAndZoomView,\n- ResizableSplitView,\n+ ResizableView,\n Surface,\n VerticalScrollView,\n View,\n@@ -45,8 +46,9 @@ import {\n import {\n FlamechartView,\n NativeEventsView,\n- ReactEventsView,\n ReactMeasuresView,\n+ SchedulingEventsView,\n+ SuspenseEventsView,\n TimeAxisMarkersView,\n UserTimingMarksView,\n } from '.\/content-views';\n@@ -128,7 +130,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n const surfaceRef = useRef(new Surface());\n const userTimingMarksViewRef = useRef(null);\n const nativeEventsViewRef = useRef(null);\n- const reactEventsViewRef = useRef(null);\n+ const schedulingEventsViewRef = useRef(null);\n+ const suspenseEventsViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n const syncedHorizontalPanAndZoomViewsRef = useRef(\n@@ -152,21 +155,53 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n );\n };\n \n- \/\/ Top content\n+ function createViewHelper(\n+ view: View,\n+ resizeLabel: string = '',\n+ shouldScrollVertically: boolean = false,\n+ shouldResizeVertically: boolean = false,\n+ ): View {\n+ let verticalScrollView = null;\n+ if (shouldScrollVertically) {\n+ verticalScrollView = new VerticalScrollView(\n+ surface,\n+ defaultFrame,\n+ view,\n+ );\n+ }\n+\n+ const horizontalPanAndZoomView = new HorizontalPanAndZoomView(\n+ surface,\n+ defaultFrame,\n+ verticalScrollView !== null ? verticalScrollView : view,\n+ data.duration,\n+ syncAllHorizontalPanAndZoomViewStates,\n+ );\n \n- const topContentStack = new View(\n- surface,\n- defaultFrame,\n- verticallyStackedLayout,\n- );\n+ syncedHorizontalPanAndZoomViewsRef.current.push(horizontalPanAndZoomView);\n+\n+ let viewToReturn = horizontalPanAndZoomView;\n+ if (shouldResizeVertically) {\n+ viewToReturn = new ResizableView(\n+ surface,\n+ defaultFrame,\n+ horizontalPanAndZoomView,\n+ canvasRef,\n+ resizeLabel,\n+ );\n+ }\n+\n+ return viewToReturn;\n+ }\n \n const axisMarkersView = new TimeAxisMarkersView(\n surface,\n defaultFrame,\n data.duration,\n );\n- topContentStack.addSubview(axisMarkersView);\n+ const axisMarkersViewWrapper = createViewHelper(axisMarkersView);\n \n+ let userTimingMarksViewWrapper = null;\n if (data.otherUserTimingMarks.length > 0) {\n const userTimingMarksView = new UserTimingMarksView(\n surface,\n@@ -175,50 +210,50 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n data.duration,\n );\n userTimingMarksViewRef.current = userTimingMarksView;\n- topContentStack.addSubview(userTimingMarksView);\n+ userTimingMarksViewWrapper = createViewHelper(userTimingMarksView);\n }\n \n const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);\n nativeEventsViewRef.current = nativeEventsView;\n- topContentStack.addSubview(nativeEventsView);\n+ const nativeEventsViewWrapper = createViewHelper(\n+ nativeEventsView,\n+ 'events',\n+ true,\n+ true,\n+ );\n \n- const reactEventsView = new ReactEventsView(surface, defaultFrame, data);\n- reactEventsViewRef.current = reactEventsView;\n- topContentStack.addSubview(reactEventsView);\n+ const schedulingEventsView = new SchedulingEventsView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ schedulingEventsViewRef.current = schedulingEventsView;\n+ const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);\n \n- const topContentHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n+ const suspenseEventsView = new SuspenseEventsView(\n surface,\n defaultFrame,\n- topContentStack,\n- data.duration,\n- syncAllHorizontalPanAndZoomViewStates,\n+ data,\n );\n- syncedHorizontalPanAndZoomViewsRef.current.push(\n- topContentHorizontalPanAndZoomView,\n+ suspenseEventsViewRef.current = suspenseEventsView;\n+ const suspenseEventsViewWrapper = createViewHelper(\n+ suspenseEventsView,\n+ 'suspense',\n+ true,\n+ true,\n );\n \n- \/\/ Resizable content\n-\n const reactMeasuresView = new ReactMeasuresView(\n surface,\n defaultFrame,\n data,\n );\n reactMeasuresViewRef.current = reactMeasuresView;\n- const reactMeasuresVerticalScrollView = new VerticalScrollView(\n- surface,\n- defaultFrame,\n+ const reactMeasuresViewWrapper = createViewHelper(\n reactMeasuresView,\n- );\n- const reactMeasuresHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n- surface,\n- defaultFrame,\n- reactMeasuresVerticalScrollView,\n- data.duration,\n- syncAllHorizontalPanAndZoomViewStates,\n- );\n- syncedHorizontalPanAndZoomViewsRef.current.push(\n- reactMeasuresHorizontalPanAndZoomView,\n+ 'react',\n+ true,\n+ true,\n );\n \n const flamechartView = new FlamechartView(\n@@ -228,30 +263,15 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n data.duration,\n );\n flamechartViewRef.current = flamechartView;\n- const flamechartVerticalScrollView = new VerticalScrollView(\n- surface,\n- defaultFrame,\n+ const flamechartViewWrapper = createViewHelper(\n flamechartView,\n- );\n- const flamechartHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n- surface,\n- defaultFrame,\n- flamechartVerticalScrollView,\n- data.duration,\n- syncAllHorizontalPanAndZoomViewStates,\n- );\n- syncedHorizontalPanAndZoomViewsRef.current.push(\n- flamechartHorizontalPanAndZoomView,\n- );\n-\n- const resizableContentStack = new ResizableSplitView(\n- surface,\n- defaultFrame,\n- reactMeasuresHorizontalPanAndZoomView,\n- flamechartHorizontalPanAndZoomView,\n- canvasRef,\n+ 'flamechart',\n+ true,\n+ true,\n );\n \n+ \/\/ Root view contains all of the sub views defined above.\n+ \/\/ The order we add them below determines their vertical position.\n const rootView = new View(\n surface,\n defaultFrame,\n@@ -260,8 +280,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n lastViewTakesUpRemainingSpaceLayout,\n ),\n );\n- rootView.addSubview(topContentHorizontalPanAndZoomView);\n- rootView.addSubview(resizableContentStack);\n+ rootView.addSubview(axisMarkersViewWrapper);\n+ if (userTimingMarksViewWrapper !== null) {\n+ rootView.addSubview(userTimingMarksViewWrapper);\n+ }\n+ rootView.addSubview(nativeEventsViewWrapper);\n+ rootView.addSubview(schedulingEventsViewWrapper);\n+ rootView.addSubview(suspenseEventsViewWrapper);\n+ rootView.addSubview(reactMeasuresViewWrapper);\n+ rootView.addSubview(flamechartViewWrapper);\n+\n+ \/\/ If subviews are less than the available height, fill remaining height with a solid color.\n+ rootView.addSubview(new BackgroundColorView(surface, defaultFrame));\n \n surfaceRef.current.rootView = rootView;\n }, [data]);\n@@ -278,6 +308,39 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n return;\n }\n \n+ \/\/ Wheel events should always hide the current toolltip.\n+ switch (interaction.type) {\n+ case 'wheel-control':\n+ case 'wheel-meta':\n+ case 'wheel-plain':\n+ case 'wheel-shift':\n+ setHoveredEvent(prevHoverEvent => {\n+ if (prevHoverEvent === null) {\n+ return prevHoverEvent;\n+ } else if (\n+ prevHoverEvent.flamechartStackFrame !== null ||\n+ prevHoverEvent.measure !== null ||\n+ prevHoverEvent.nativeEvent !== null ||\n+ prevHoverEvent.schedulingEvent !== null ||\n+ prevHoverEvent.suspenseEvent !== null ||\n+ prevHoverEvent.userTimingMark !== null\n+ ) {\n+ return {\n+ data: prevHoverEvent.data,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+ };\n+ } else {\n+ return prevHoverEvent;\n+ }\n+ });\n+ break;\n+ }\n+\n const surface = surfaceRef.current;\n surface.handleInteraction(interaction);\n \n@@ -310,12 +373,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n userTimingMarksView.onHover = userTimingMark => {\n if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n setHoveredEvent({\n- userTimingMark,\n- nativeEvent: null,\n- reactEvent: null,\n+ data,\n flamechartStackFrame: null,\n measure: null,\n- data,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark,\n });\n }\n };\n@@ -326,28 +390,47 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n nativeEventsView.onHover = nativeEvent => {\n if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {\n setHoveredEvent({\n- userTimingMark: null,\n- nativeEvent,\n- reactEvent: null,\n+ data,\n flamechartStackFrame: null,\n measure: null,\n- data,\n+ nativeEvent,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n });\n }\n };\n }\n \n- const {current: reactEventsView} = reactEventsViewRef;\n- if (reactEventsView) {\n- reactEventsView.onHover = reactEvent => {\n- if (!hoveredEvent || hoveredEvent.reactEvent !== reactEvent) {\n+ const {current: schedulingEventsView} = schedulingEventsViewRef;\n+ if (schedulingEventsView) {\n+ schedulingEventsView.onHover = schedulingEvent => {\n+ if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {\n setHoveredEvent({\n- userTimingMark: null,\n- nativeEvent: null,\n- reactEvent,\n+ data,\n flamechartStackFrame: null,\n measure: null,\n+ nativeEvent: null,\n+ schedulingEvent,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: suspenseEventsView} = suspenseEventsViewRef;\n+ if (suspenseEventsView) {\n+ suspenseEventsView.onHover = suspenseEvent => {\n+ if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {\n+ setHoveredEvent({\n data,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent,\n+ userTimingMark: null,\n });\n }\n };\n@@ -358,12 +441,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n reactMeasuresView.onHover = measure => {\n if (!hoveredEvent || hoveredEvent.measure !== measure) {\n setHoveredEvent({\n- userTimingMark: null,\n- nativeEvent: null,\n- reactEvent: null,\n+ data,\n flamechartStackFrame: null,\n measure,\n- data,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n });\n }\n };\n@@ -377,12 +461,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n hoveredEvent.flamechartStackFrame !== flamechartStackFrame\n ) {\n setHoveredEvent({\n- userTimingMark: null,\n- nativeEvent: null,\n- reactEvent: null,\n+ data,\n flamechartStackFrame,\n measure: null,\n- data,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n });\n }\n });\n@@ -407,10 +492,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n );\n }\n \n- const {current: reactEventsView} = reactEventsViewRef;\n- if (reactEventsView) {\n- reactEventsView.setHoveredEvent(\n- hoveredEvent ? hoveredEvent.reactEvent : null,\n+ const {current: schedulingEventsView} = schedulingEventsViewRef;\n+ if (schedulingEventsView) {\n+ schedulingEventsView.setHoveredEvent(\n+ hoveredEvent ? hoveredEvent.schedulingEvent : null,\n+ );\n+ }\n+\n+ const {current: suspenseEventsView} = suspenseEventsViewRef;\n+ if (suspenseEventsView) {\n+ suspenseEventsView.setHoveredEvent(\n+ hoveredEvent ? hoveredEvent.suspenseEvent : null,\n );\n }\n \n@@ -443,24 +535,25 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n return null;\n }\n const {\n- reactEvent,\n flamechartStackFrame,\n measure,\n+ schedulingEvent,\n+ suspenseEvent,\n } = contextData.hoveredEvent;\n return (\n \n- {reactEvent !== null && (\n+ {schedulingEvent !== null && (\n copy(reactEvent.componentName)}\n+ onClick={() => copy(schedulingEvent.componentName)}\n title=\"Copy component name\">\n Copy component name\n <\/ContextMenuItem>\n )}\n- {reactEvent !== null && reactEvent.componentStack && (\n+ {suspenseEvent !== null && (\n copy(reactEvent.componentStack)}\n- title=\"Copy component stack\">\n- Copy component stack\n+ onClick={() => copy(suspenseEvent.componentName)}\n+ title=\"Copy component name\">\n+ Copy component name\n <\/ContextMenuItem>\n )}\n {measure !== null && (\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\nindex 91e60bf13c..114d3fe7bb 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n@@ -1,6 +1,10 @@\n .Tooltip {\n position: fixed;\n- display: inline-block;\n+}\n+\n+.TooltipSection,\n+.TooltipWarningSection {\n+ display: block;\n border-radius: 0.125rem;\n max-width: 300px;\n padding: 0.25rem;\n@@ -12,11 +16,15 @@\n color: var(--color-tooltip-text);\n font-size: 11px;\n }\n+.TooltipWarningSection {\n+ margin-top: 0.25rem;\n+ background-color: var(--color-warning-background);\n+}\n \n .Divider {\n height: 1px;\n background-color: #aaa;\n- margin: 0.5rem 0;\n+ margin: 0.25rem 0;\n }\n \n .DetailsGrid {\n@@ -40,7 +48,6 @@\n \n .FlamechartStackFrameName {\n word-break: break-word;\n- margin-left: 0.4rem;\n }\n \n .ComponentName {\n@@ -49,32 +56,20 @@\n margin-right: 0.25rem;\n }\n \n-.ComponentStack {\n- overflow: hidden;\n- max-width: 35em;\n- max-height: 10em;\n- margin: 0;\n- font-size: 0.9em;\n- line-height: 1.5;\n- -webkit-mask-image: linear-gradient(\n- 180deg,\n- var(--color-tooltip-background),\n- var(--color-tooltip-background) 5em,\n- transparent\n- );\n- mask-image: linear-gradient(\n- 180deg,\n- var(--color-tooltip-background),\n- var(--color-tooltip-background) 5em,\n- transparent\n- );\n- white-space: pre;\n-}\n-\n .ReactMeasureLabel {\n- margin-left: 0.4rem;\n }\n \n .UserTimingLabel {\n word-break: break-word;\n }\n+\n+.NativeEventName {\n+ font-weight: bold;\n+ word-break: break-word;\n+ margin-right: 0.25rem;\n+}\n+\n+.InfoText,\n+.WarningText {\n+ color: var(--color-warning-text-color);\n+}\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\nindex 3e9f36e44a..d6019cb254 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n@@ -11,18 +11,18 @@ import type {Point} from '.\/view-base';\n import type {\n FlamechartStackFrame,\n NativeEvent,\n- ReactEvent,\n ReactHoverContextInfo,\n ReactMeasure,\n ReactProfilerData,\n Return,\n+ SchedulingEvent,\n+ SuspenseEvent,\n UserTimingMark,\n } from '.\/types';\n \n import * as React from 'react';\n-import {Fragment, useRef} from 'react';\n-import prettyMilliseconds from 'pretty-ms';\n-import {COLORS} from '.\/content-views\/constants';\n+import {useRef} from 'react';\n+import {formatDuration, formatTimestamp, trimString} from '.\/utils\/formatting';\n import {getBatchRange} from '.\/utils\/getBatchRange';\n import useSmartTooltip from '.\/utils\/useSmartTooltip';\n import styles from '.\/EventTooltip.css';\n@@ -34,22 +34,7 @@ type Props = {|\n origin: Point,\n |};\n \n-function formatTimestamp(ms) {\n- return ms.toLocaleString(undefined, {minimumFractionDigits: 2}) + 'ms';\n-}\n-\n-function formatDuration(ms) {\n- return prettyMilliseconds(ms, {millisecondsDecimalDigits: 3});\n-}\n-\n-function trimmedString(string: string, length: number): string {\n- if (string.length > length) {\n- return `${string.substr(0, length - 1)}…`;\n- }\n- return string;\n-}\n-\n-function getReactEventLabel(event: ReactEvent): string | null {\n+function getSchedulingEventLabel(event: SchedulingEvent): string | null {\n switch (event.type) {\n case 'schedule-render':\n return 'render scheduled';\n@@ -57,30 +42,6 @@ function getReactEventLabel(event: ReactEvent): string | null {\n return 'state update scheduled';\n case 'schedule-force-update':\n return 'force update scheduled';\n- case 'suspense-suspend':\n- return 'suspended';\n- case 'suspense-resolved':\n- return 'suspense resolved';\n- case 'suspense-rejected':\n- return 'suspense rejected';\n- default:\n- return null;\n- }\n-}\n-\n-function getReactEventColor(event: ReactEvent): string | null {\n- switch (event.type) {\n- case 'schedule-render':\n- return COLORS.REACT_SCHEDULE_HOVER;\n- case 'schedule-state-update':\n- case 'schedule-force-update':\n- return event.isCascading\n- ? COLORS.REACT_SCHEDULE_CASCADING_HOVER\n- : COLORS.REACT_SCHEDULE_HOVER;\n- case 'suspense-suspend':\n- case 'suspense-resolved':\n- case 'suspense-rejected':\n- return COLORS.REACT_SUSPEND_HOVER;\n default:\n return null;\n }\n@@ -89,15 +50,15 @@ function getReactEventColor(event: ReactEvent): string | null {\n function getReactMeasureLabel(type): string | null {\n switch (type) {\n case 'commit':\n- return 'commit';\n+ return 'react commit';\n case 'render-idle':\n- return 'idle';\n+ return 'react idle';\n case 'render':\n- return 'render';\n+ return 'react render';\n case 'layout-effects':\n- return 'layout effects';\n+ return 'react layout effects';\n case 'passive-effects':\n- return 'passive effects';\n+ return 'react passive effects';\n default:\n return null;\n }\n@@ -120,10 +81,11 @@ export default function EventTooltip({\n }\n \n const {\n- nativeEvent,\n- reactEvent,\n- measure,\n flamechartStackFrame,\n+ measure,\n+ nativeEvent,\n+ schedulingEvent,\n+ suspenseEvent,\n userTimingMark,\n } = hoveredEvent;\n \n@@ -131,9 +93,19 @@ export default function EventTooltip({\n return (\n \n );\n- } else if (reactEvent !== null) {\n+ } else if (schedulingEvent !== null) {\n return (\n- \n+ \n+ );\n+ } else if (suspenseEvent !== null) {\n+ return (\n+ \n );\n } else if (measure !== null) {\n return (\n@@ -158,16 +130,6 @@ export default function EventTooltip({\n return null;\n }\n \n-function formatComponentStack(componentStack: string): string {\n- const lines = componentStack.split('\\n').map(line => line.trim());\n- lines.shift();\n-\n- if (lines.length > 5) {\n- return lines.slice(0, 5).join('\\n') + '\\n...';\n- }\n- return lines.join('\\n');\n-}\n-\n const TooltipFlamechartNode = ({\n stackFrame,\n tooltipRef,\n@@ -175,35 +137,25 @@ const TooltipFlamechartNode = ({\n stackFrame: FlamechartStackFrame,\n tooltipRef: Return,\n }) => {\n- const {\n- name,\n- timestamp,\n- duration,\n- scriptUrl,\n- locationLine,\n- locationColumn,\n- } = stackFrame;\n+ const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;\n return (\n

\n- {formatDuration(duration)}\n- {name}<\/span>\n-

\n-

Timestamp:<\/div>\n-

{formatTimestamp(timestamp)}<\/div>\n- {scriptUrl && (\n- <>\n-

Script URL:<\/div>\n-

{scriptUrl}<\/div>\n- <\/>\n- )}\n- {(locationLine !== undefined || locationColumn !== undefined) && (\n- <>\n-

Location:<\/div>\n-

\n- line {locationLine}, column {locationColumn}\n- <\/div>\n- <\/>\n- )}\n+

\n+ {name}<\/span>\n+

\n+

Timestamp:<\/div>\n+

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

Duration:<\/div>\n+

{formatDuration(duration)}<\/div>\n+ {(locationLine !== undefined || locationColumn !== undefined) && (\n+ <>\n+

Location:<\/div>\n+

\n+ line {locationLine}, column {locationColumn}\n+ <\/div>\n+ <\/>\n+ )}\n+ <\/div>\n <\/div>\n <\/div>\n );\n@@ -216,75 +168,142 @@ const TooltipNativeEvent = ({\n nativeEvent: NativeEvent,\n tooltipRef: Return,\n }) => {\n- const {duration, timestamp, type, warnings} = nativeEvent;\n-\n- const warningElements = [];\n- if (warnings !== null) {\n- warnings.forEach((warning, index) => {\n- warningElements.push(\n- \n-

Warning:<\/div>\n-

{warning}<\/div>\n- <\/Fragment>,\n- );\n- });\n- }\n+ const {duration, timestamp, type, warning} = nativeEvent;\n \n return (\n

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

\n-

Timestamp:<\/div>\n-

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

Duration:<\/div>\n-

{formatDuration(duration)}<\/div>\n- {warningElements}\n+

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

\n+

Timestamp:<\/div>\n+

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

Duration:<\/div>\n+

{formatDuration(duration)}<\/div>\n+ <\/div>\n <\/div>\n+ {warning !== null && (\n+

\n+

{warning}<\/div>\n+ <\/div>\n+ )}\n <\/div>\n );\n };\n \n-const TooltipReactEvent = ({\n- reactEvent,\n+const TooltipSchedulingEvent = ({\n+ schedulingEvent,\n tooltipRef,\n }: {\n- reactEvent: ReactEvent,\n+ schedulingEvent: SchedulingEvent,\n tooltipRef: Return,\n }) => {\n- const label = getReactEventLabel(reactEvent);\n- const color = getReactEventColor(reactEvent);\n- if (!label || !color) {\n+ const label = getSchedulingEventLabel(schedulingEvent);\n+ if (!label) {\n if (__DEV__) {\n- console.warn('Unexpected reactEvent type \"%s\"', reactEvent.type);\n+ console.warn(\n+ 'Unexpected schedulingEvent type \"%s\"',\n+ schedulingEvent.type,\n+ );\n }\n return null;\n }\n \n- const {componentName, componentStack, timestamp} = reactEvent;\n+ let laneLabels = null;\n+ let lanes = null;\n+ switch (schedulingEvent.type) {\n+ case 'schedule-render':\n+ case 'schedule-state-update':\n+ case 'schedule-force-update':\n+ laneLabels = schedulingEvent.laneLabels;\n+ lanes = schedulingEvent.lanes;\n+ break;\n+ }\n+\n+ const {componentName, timestamp, warning} = schedulingEvent;\n \n return (\n

\n- {componentName && (\n- \n- {trimmedString(componentName, 768)}\n- <\/span>\n+

\n+ {componentName && (\n+ \n+ {trimString(componentName, 100)}\n+ <\/span>\n+ )}\n+ {label}\n+

\n+

\n+ {laneLabels !== null && lanes !== null && (\n+ <>\n+

Lanes:<\/div>\n+

\n+ {laneLabels.join(', ')} ({lanes.join(', ')})\n+ <\/div>\n+ <\/>\n+ )}\n+

Timestamp:<\/div>\n+

{formatTimestamp(timestamp)}<\/div>\n+ <\/div>\n+ <\/div>\n+ {warning !== null && (\n+

\n+

{warning}<\/div>\n+ <\/div>\n )}\n- {label}\n-

\n-

Timestamp:<\/div>\n-

{formatTimestamp(timestamp)}<\/div>\n- {componentStack && (\n- \n-

Component stack:<\/div>\n-

\n-              {formatComponentStack(componentStack)}\n-            <\/pre>\n-          <\/Fragment>\n+    <\/div>\n+  );\n+};\n+\n+const TooltipSuspenseEvent = ({\n+  suspenseEvent,\n+  tooltipRef,\n+}: {\n+  suspenseEvent: SuspenseEvent,\n+  tooltipRef: Return,\n+}) => {\n+  const {\n+    componentName,\n+    duration,\n+    phase,\n+    resolution,\n+    timestamp,\n+    warning,\n+  } = suspenseEvent;\n+\n+  let label = 'suspended';\n+  if (phase !== null) {\n+    label += ` during ${phase}`;\n+  }\n+\n+  return (\n+    \n+      \n+        {componentName && (\n+          \n+            {trimString(componentName, 100)}\n+          <\/span>\n         )}\n+        {label}\n+        \n+        \n+          Status:<\/div>\n+          {resolution}<\/div>\n+          Timestamp:<\/div>\n+          {formatTimestamp(timestamp)}<\/div>\n+          {duration !== null && (\n+            <>\n+              Duration:<\/div>\n+              {formatDuration(duration)}<\/div>\n+            <\/>\n+          )}\n+        <\/div>\n       <\/div>\n+      {warning !== null && (\n+        \n+          {warning}<\/div>\n+        <\/div>\n+      )}\n     <\/div>\n   );\n };\n@@ -311,21 +330,28 @@ const TooltipReactMeasure = ({\n \n   return (\n     \n-      {formatDuration(duration)}\n-      {label}<\/span>\n-      \n-      \n-        Timestamp:<\/div>\n-        {formatTimestamp(timestamp)}<\/div>\n-        Batch duration:<\/div>\n-        {formatDuration(stopTime - startTime)}<\/div>\n-        \n-          Lane{lanes.length === 1 ? '' : 's'}:\n-        <\/div>\n-        \n-          {laneLabels.length > 0\n-            ? `${laneLabels.join(', ')} (${lanes.join(', ')})`\n-            : lanes.join(', ')}\n+      \n+        {label}<\/span>\n+        \n+        \n+          Timestamp:<\/div>\n+          {formatTimestamp(timestamp)}<\/div>\n+          {measure.type !== 'render-idle' && (\n+            <>\n+              Duration:<\/div>\n+              {formatDuration(duration)}<\/div>\n+            <\/>\n+          )}\n+          Batch duration:<\/div>\n+          {formatDuration(stopTime - startTime)}<\/div>\n+          \n+            Lane{lanes.length === 1 ? '' : 's'}:\n+          <\/div>\n+          \n+            {laneLabels.length > 0\n+              ? `${laneLabels.join(', ')} (${lanes.join(', ')})`\n+              : lanes.join(', ')}\n+          <\/div>\n         <\/div>\n       <\/div>\n     <\/div>\n@@ -342,11 +368,13 @@ const TooltipUserTimingMark = ({\n   const {name, timestamp} = mark;\n   return (\n     \n-      {name}<\/span>\n-      \n-      \n-        Timestamp:<\/div>\n-        {formatTimestamp(timestamp)}<\/div>\n+      \n+        {name}<\/span>\n+        \n+        \n+          Timestamp:<\/div>\n+          {formatTimestamp(timestamp)}<\/div>\n+        <\/div>\n       <\/div>\n     <\/div>\n   );\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\nindex dff2398164..c7a7783694 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfiler.js\n@@ -41,8 +41,18 @@ export function SchedulingProfiler(_: {||}) {\n   \/\/ The easiest way to guarangee this happens is to recreate the inner Canvas component.\n   const [key, setKey] = useState(theme);\n   useLayoutEffect(() => {\n-    updateColorsToMatchTheme();\n-    setKey(deferredTheme);\n+    const pollForTheme = () => {\n+      if (updateColorsToMatchTheme()) {\n+        clearInterval(intervalID);\n+        setKey(deferredTheme);\n+      }\n+    };\n+\n+    const intervalID = setInterval(pollForTheme, 50);\n+\n+    return () => {\n+      clearInterval(intervalID);\n+    };\n   }, [deferredTheme]);\n \n   return (\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\nindex d84a057dd2..57cd8ae1f3 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\n@@ -21,12 +21,11 @@ import type {\n } from '..\/view-base';\n \n import {\n-  ColorView,\n+  BackgroundColorView,\n   Surface,\n   View,\n   layeredLayout,\n   rectContainsPoint,\n-  rectEqualToRect,\n   intersectionOfRects,\n   rectIntersectsRect,\n   verticallyStackedLayout,\n@@ -36,11 +35,10 @@ import {\n   positioningScaleFactor,\n   timestampToPosition,\n } from '.\/utils\/positioning';\n+import {drawText} from '.\/utils\/text';\n import {\n   COLORS,\n-  FONT_SIZE,\n   FLAMECHART_FRAME_HEIGHT,\n-  TEXT_PADDING,\n   COLOR_HOVER_DIM_DELTA,\n   BORDER_SIZE,\n } from '.\/constants';\n@@ -71,29 +69,6 @@ function hoverColorForStackFrame(stackFrame: FlamechartStackFrame): string {\n   return hslaColorToString(color);\n }\n \n-const cachedFlamechartTextWidths = new Map();\n-const trimFlamechartText = (\n-  context: CanvasRenderingContext2D,\n-  text: string,\n-  width: number,\n-) => {\n-  for (let i = text.length - 1; i >= 0; i--) {\n-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';\n-\n-    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);\n-    if (measuredWidth == null) {\n-      measuredWidth = context.measureText(trimmedText).width;\n-      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);\n-    }\n-\n-    if (measuredWidth <= width) {\n-      return trimmedText;\n-    }\n-  }\n-\n-  return null;\n-};\n-\n class FlamechartStackLayerView extends View {\n   \/** Layer to display *\/\n   _stackLayer: FlamechartStackLayer;\n@@ -161,10 +136,6 @@ class FlamechartStackLayerView extends View {\n       visibleArea.size.height,\n     );\n \n-    context.textAlign = 'left';\n-    context.textBaseline = 'middle';\n-    context.font = `${FONT_SIZE}px sans-serif`;\n-\n     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);\n \n     for (let i = 0; i < _stackLayer.length; i++) {\n@@ -201,45 +172,7 @@ class FlamechartStackLayerView extends View {\n         drawableRect.size.height,\n       );\n \n-      if (width > TEXT_PADDING * 2) {\n-        const trimmedName = trimFlamechartText(\n-          context,\n-          name,\n-          width - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n-        );\n-\n-        if (trimmedName !== null) {\n-          context.fillStyle = COLORS.TEXT_COLOR;\n-\n-          \/\/ Prevent text from being drawn outside `viewableArea`\n-          const textOverflowsViewableArea = !rectEqualToRect(\n-            drawableRect,\n-            nodeRect,\n-          );\n-          if (textOverflowsViewableArea) {\n-            context.save();\n-            context.beginPath();\n-            context.rect(\n-              drawableRect.origin.x,\n-              drawableRect.origin.y,\n-              drawableRect.size.width,\n-              drawableRect.size.height,\n-            );\n-            context.closePath();\n-            context.clip();\n-          }\n-\n-          context.fillText(\n-            trimmedName,\n-            nodeRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),\n-            nodeRect.origin.y + FLAMECHART_FRAME_HEIGHT \/ 2,\n-          );\n-\n-          if (textOverflowsViewableArea) {\n-            context.restore();\n-          }\n-        }\n-      }\n+      drawText(name, context, nodeRect, drawableRect, width);\n     }\n   }\n \n@@ -262,13 +195,17 @@ class FlamechartStackLayerView extends View {\n       const flamechartStackFrame = _stackLayer[currentIndex];\n       const {timestamp, duration} = flamechartStackFrame;\n \n-      const width = durationToWidth(duration, scaleFactor);\n       const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));\n-      if (x <= location.x && x + width >= location.x) {\n-        this.currentCursor = 'pointer';\n-        viewRefs.hoveredView = this;\n-        _onHover(flamechartStackFrame);\n-        return;\n+      const width = durationToWidth(duration, scaleFactor);\n+\n+      \/\/ Don't show tooltips for nodes that are too small to render at this zoom level.\n+      if (Math.floor(width - BORDER_SIZE) >= 1) {\n+        if (x <= location.x && x + width >= location.x) {\n+          this.currentCursor = 'context-menu';\n+          viewRefs.hoveredView = this;\n+          _onHover(flamechartStackFrame);\n+          return;\n+        }\n       }\n \n       if (x > location.x) {\n@@ -336,10 +273,8 @@ export class FlamechartView extends View {\n       return rowView;\n     });\n \n-    \/\/ Add a plain background view to prevent gaps from appearing between\n-    \/\/ flamechartRowViews.\n-    const colorView = new ColorView(surface, frame, COLORS.BACKGROUND);\n-    this.addSubview(colorView);\n+    \/\/ Add a plain background view to prevent gaps from appearing between flamechartRowViews.\n+    this.addSubview(new BackgroundColorView(surface, frame));\n     this.addSubview(this._verticalStackView);\n   }\n \n@@ -359,7 +294,12 @@ export class FlamechartView extends View {\n \n   desiredSize() {\n     \/\/ Ignore the wishes of the background color view\n-    return this._verticalStackView.desiredSize();\n+    const intrinsicSize = this._verticalStackView.desiredSize();\n+    return {\n+      ...intrinsicSize,\n+      \/\/ Collapsed by default\n+      maxInitialHeight: 0,\n+    };\n   }\n \n   \/**\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\nindex 82371d2f2f..98e388c52a 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js\n@@ -22,6 +22,8 @@ import {\n   positionToTimestamp,\n   timestampToPosition,\n } from '.\/utils\/positioning';\n+import {drawText} from '.\/utils\/text';\n+import {formatDuration} from '..\/utils\/formatting';\n import {\n   View,\n   Surface,\n@@ -29,40 +31,10 @@ import {\n   rectIntersectsRect,\n   intersectionOfRects,\n } from '..\/view-base';\n-import {\n-  COLORS,\n-  TEXT_PADDING,\n-  NATIVE_EVENT_HEIGHT,\n-  FONT_SIZE,\n-  BORDER_SIZE,\n-} from '.\/constants';\n+import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from '.\/constants';\n \n const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;\n \n-\/\/ TODO (scheduling profiler) Make this a reusable util\n-const cachedFlamechartTextWidths = new Map();\n-const trimFlamechartText = (\n-  context: CanvasRenderingContext2D,\n-  text: string,\n-  width: number,\n-) => {\n-  for (let i = text.length - 1; i >= 0; i--) {\n-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';\n-\n-    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);\n-    if (measuredWidth == null) {\n-      measuredWidth = context.measureText(trimmedText).width;\n-      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);\n-    }\n-\n-    if (measuredWidth <= width) {\n-      return trimmedText;\n-    }\n-  }\n-\n-  return null;\n-};\n-\n export class NativeEventsView extends View {\n   _depthToNativeEvent: Map;\n   _hoveredEvent: NativeEvent | null = null;\n@@ -117,7 +89,7 @@ export class NativeEventsView extends View {\n   }\n \n   \/**\n-   * Draw a single `NativeEvent` as a circle in the canvas.\n+   * Draw a single `NativeEvent` as a box\/span with text inside of it.\n    *\/\n   _drawSingleNativeEvent(\n     context: CanvasRenderingContext2D,\n@@ -128,7 +100,7 @@ export class NativeEventsView extends View {\n     showHoverHighlight: boolean,\n   ) {\n     const {frame} = this;\n-    const {depth, duration, timestamp, type, warnings} = event;\n+    const {depth, duration, timestamp, type, warning} = event;\n \n     baseY += depth * ROW_WITH_BORDER_HEIGHT;\n \n@@ -152,10 +124,10 @@ export class NativeEventsView extends View {\n \n     const drawableRect = intersectionOfRects(eventRect, rect);\n     context.beginPath();\n-    if (warnings !== null) {\n+    if (warning !== null) {\n       context.fillStyle = showHoverHighlight\n-        ? COLORS.NATIVE_EVENT_WARNING_HOVER\n-        : COLORS.NATIVE_EVENT_WARNING;\n+        ? COLORS.WARNING_BACKGROUND_HOVER\n+        : COLORS.WARNING_BACKGROUND;\n     } else {\n       context.fillStyle = showHoverHighlight\n         ? COLORS.NATIVE_EVENT_HOVER\n@@ -168,32 +140,9 @@ export class NativeEventsView extends View {\n       drawableRect.size.height,\n     );\n \n-    \/\/ Render event type label\n-    context.textAlign = 'left';\n-    context.textBaseline = 'middle';\n-    context.font = `${FONT_SIZE}px sans-serif`;\n-\n-    if (width > TEXT_PADDING * 2) {\n-      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));\n-      const trimmedName = trimFlamechartText(\n-        context,\n-        type,\n-        width - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n-      );\n+    const label = `${type} - ${formatDuration(duration)}`;\n \n-      if (trimmedName !== null) {\n-        context.fillStyle =\n-          warnings !== null\n-            ? COLORS.NATIVE_EVENT_WARNING_TEXT\n-            : COLORS.TEXT_COLOR;\n-\n-        context.fillText(\n-          trimmedName,\n-          eventRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),\n-          eventRect.origin.y + NATIVE_EVENT_HEIGHT \/ 2,\n-        );\n-      }\n-    }\n+    drawText(label, context, eventRect, drawableRect, width);\n   }\n \n   draw(context: CanvasRenderingContext2D) {\n@@ -242,12 +191,16 @@ export class NativeEventsView extends View {\n         },\n       };\n       if (rectIntersectsRect(borderFrame, visibleArea)) {\n+        const borderDrawableRect = intersectionOfRects(\n+          borderFrame,\n+          visibleArea,\n+        );\n         context.fillStyle = COLORS.PRIORITY_BORDER;\n         context.fillRect(\n-          visibleArea.origin.x,\n-          frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,\n-          visibleArea.size.width,\n-          BORDER_SIZE,\n+          borderDrawableRect.origin.x,\n+          borderDrawableRect.origin.y,\n+          borderDrawableRect.size.width,\n+          borderDrawableRect.size.height,\n         );\n       }\n     }\n@@ -285,8 +238,6 @@ export class NativeEventsView extends View {\n           hoverTimestamp >= timestamp &&\n           hoverTimestamp <= timestamp + duration\n         ) {\n-          this.currentCursor = 'pointer';\n-\n           viewRefs.hoveredView = this;\n \n           onHover(nativeEvent);\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 9bd032b081..96790b2a28 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@@ -12,7 +12,7 @@ import type {\n   Interaction,\n   MouseMoveInteraction,\n   Rect,\n-  Size,\n+  SizeWithMaxHeight,\n   ViewRefs,\n } from '..\/view-base';\n \n@@ -34,6 +34,7 @@ import {COLORS, BORDER_SIZE, REACT_MEASURE_HEIGHT} from '.\/constants';\n import {REACT_TOTAL_NUM_LANES} from '..\/constants';\n \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@@ -44,7 +45,7 @@ function getMeasuresForLane(\n \n export class ReactMeasuresView extends View {\n   _profilerData: ReactProfilerData;\n-  _intrinsicSize: Size;\n+  _intrinsicSize: SizeWithMaxHeight;\n \n   _lanesToRender: ReactLane[];\n   _laneToMeasures: Map;\n@@ -77,6 +78,7 @@ export class ReactMeasuresView extends View {\n     this._intrinsicSize = {\n       width: this._profilerData.duration,\n       height: this._lanesToRender.length * REACT_LANE_HEIGHT,\n+      maxInitialHeight: MAX_ROWS_TO_SHOW_INITIALLY * REACT_LANE_HEIGHT,\n     };\n   }\n \n@@ -132,7 +134,7 @@ export class ReactMeasuresView extends View {\n       case 'commit':\n         fillStyle = COLORS.REACT_COMMIT;\n         hoveredFillStyle = COLORS.REACT_COMMIT_HOVER;\n-        groupSelectedFillStyle = COLORS.REACT_COMMIT_SELECTED;\n+        groupSelectedFillStyle = COLORS.REACT_COMMIT_HOVER;\n         break;\n       case 'render-idle':\n         \/\/ We could render idle time as diagonal hashes.\n@@ -140,22 +142,22 @@ export class ReactMeasuresView extends View {\n         \/\/ color = context.createPattern(getIdlePattern(), 'repeat');\n         fillStyle = COLORS.REACT_IDLE;\n         hoveredFillStyle = COLORS.REACT_IDLE_HOVER;\n-        groupSelectedFillStyle = COLORS.REACT_IDLE_SELECTED;\n+        groupSelectedFillStyle = COLORS.REACT_IDLE_HOVER;\n         break;\n       case 'render':\n         fillStyle = COLORS.REACT_RENDER;\n         hoveredFillStyle = COLORS.REACT_RENDER_HOVER;\n-        groupSelectedFillStyle = COLORS.REACT_RENDER_SELECTED;\n+        groupSelectedFillStyle = COLORS.REACT_RENDER_HOVER;\n         break;\n       case 'layout-effects':\n         fillStyle = COLORS.REACT_LAYOUT_EFFECTS;\n         hoveredFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;\n-        groupSelectedFillStyle = COLORS.REACT_LAYOUT_EFFECTS_SELECTED;\n+        groupSelectedFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;\n         break;\n       case 'passive-effects':\n         fillStyle = COLORS.REACT_PASSIVE_EFFECTS;\n         hoveredFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;\n-        groupSelectedFillStyle = COLORS.REACT_PASSIVE_EFFECTS_SELECTED;\n+        groupSelectedFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;\n         break;\n       default:\n         throw new Error(`Unexpected measure type \"${type}\"`);\n@@ -306,7 +308,7 @@ export class ReactMeasuresView extends View {\n         hoverTimestamp >= timestamp &&\n         hoverTimestamp <= timestamp + duration\n       ) {\n-        this.currentCursor = 'pointer';\n+        this.currentCursor = 'context-menu';\n         viewRefs.hoveredView = this;\n         onHover(measure);\n         return;\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\nsimilarity index 73%\nrename from packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js\nrename to packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\nindex 6d35a5f1ca..37ff0832e0 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\n@@ -7,7 +7,7 @@\n  * @flow\n  *\/\n \n-import type {ReactEvent, ReactProfilerData} from '..\/types';\n+import type {SchedulingEvent, ReactProfilerData} from '..\/types';\n import type {\n   Interaction,\n   MouseMoveInteraction,\n@@ -39,20 +39,12 @@ import {\n const EVENT_ROW_HEIGHT_FIXED =\n   TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;\n \n-function isSuspenseEvent(event: ReactEvent): boolean %checks {\n-  return (\n-    event.type === 'suspense-suspend' ||\n-    event.type === 'suspense-resolved' ||\n-    event.type === 'suspense-rejected'\n-  );\n-}\n-\n-export class ReactEventsView extends View {\n+export class SchedulingEventsView extends View {\n   _profilerData: ReactProfilerData;\n   _intrinsicSize: Size;\n \n-  _hoveredEvent: ReactEvent | null = null;\n-  onHover: ((event: ReactEvent | null) => void) | null = null;\n+  _hoveredEvent: SchedulingEvent | null = null;\n+  onHover: ((event: SchedulingEvent | null) => void) | null = null;\n \n   constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n     super(surface, frame);\n@@ -68,7 +60,7 @@ export class ReactEventsView extends View {\n     return this._intrinsicSize;\n   }\n \n-  setHoveredEvent(hoveredEvent: ReactEvent | null) {\n+  setHoveredEvent(hoveredEvent: SchedulingEvent | null) {\n     if (this._hoveredEvent === hoveredEvent) {\n       return;\n     }\n@@ -77,18 +69,18 @@ export class ReactEventsView extends View {\n   }\n \n   \/**\n-   * Draw a single `ReactEvent` as a circle in the canvas.\n+   * Draw a single `SchedulingEvent` as a circle in the canvas.\n    *\/\n-  _drawSingleReactEvent(\n+  _drawSingleSchedulingEvent(\n     context: CanvasRenderingContext2D,\n     rect: Rect,\n-    event: ReactEvent,\n+    event: SchedulingEvent,\n     baseY: number,\n     scaleFactor: number,\n     showHoverHighlight: boolean,\n   ) {\n     const {frame} = this;\n-    const {timestamp, type} = event;\n+    const {timestamp, type, warning} = event;\n \n     const x = timestampToPosition(timestamp, scaleFactor, frame);\n     const radius = REACT_EVENT_DIAMETER \/ 2;\n@@ -105,34 +97,25 @@ export class ReactEventsView extends View {\n \n     let fillStyle = null;\n \n-    switch (type) {\n-      case 'native-event':\n-        return;\n-      case 'schedule-render':\n-      case 'schedule-state-update':\n-      case 'schedule-force-update':\n-        if (event.isCascading) {\n-          fillStyle = showHoverHighlight\n-            ? COLORS.REACT_SCHEDULE_CASCADING_HOVER\n-            : COLORS.REACT_SCHEDULE_CASCADING;\n-        } else {\n+    if (warning !== null) {\n+      fillStyle = showHoverHighlight\n+        ? COLORS.WARNING_BACKGROUND_HOVER\n+        : COLORS.WARNING_BACKGROUND;\n+    } else {\n+      switch (type) {\n+        case 'schedule-render':\n+        case 'schedule-state-update':\n+        case 'schedule-force-update':\n           fillStyle = showHoverHighlight\n             ? COLORS.REACT_SCHEDULE_HOVER\n             : COLORS.REACT_SCHEDULE;\n-        }\n-        break;\n-      case 'suspense-suspend':\n-      case 'suspense-resolved':\n-      case 'suspense-rejected':\n-        fillStyle = showHoverHighlight\n-          ? COLORS.REACT_SUSPEND_HOVER\n-          : COLORS.REACT_SUSPEND;\n-        break;\n-      default:\n-        if (__DEV__) {\n-          console.warn('Unexpected event type \"%s\"', type);\n-        }\n-        break;\n+          break;\n+        default:\n+          if (__DEV__) {\n+            console.warn('Unexpected event type \"%s\"', type);\n+          }\n+          break;\n+      }\n     }\n \n     if (fillStyle !== null) {\n@@ -148,7 +131,7 @@ export class ReactEventsView extends View {\n   draw(context: CanvasRenderingContext2D) {\n     const {\n       frame,\n-      _profilerData: {reactEvents},\n+      _profilerData: {schedulingEvents},\n       _hoveredEvent,\n       visibleArea,\n     } = this;\n@@ -168,20 +151,14 @@ export class ReactEventsView extends View {\n       frame,\n     );\n \n-    const highlightedEvents: ReactEvent[] = [];\n+    const highlightedEvents: SchedulingEvent[] = [];\n \n-    reactEvents.forEach(event => {\n-      if (\n-        event === _hoveredEvent ||\n-        (_hoveredEvent &&\n-          isSuspenseEvent(event) &&\n-          isSuspenseEvent(_hoveredEvent) &&\n-          event.id === _hoveredEvent.id)\n-      ) {\n+    schedulingEvents.forEach(event => {\n+      if (event === _hoveredEvent) {\n         highlightedEvents.push(event);\n         return;\n       }\n-      this._drawSingleReactEvent(\n+      this._drawSingleSchedulingEvent(\n         context,\n         visibleArea,\n         event,\n@@ -194,7 +171,7 @@ export class ReactEventsView extends View {\n     \/\/ Draw the highlighted items on top so they stand out.\n     \/\/ This is helpful if there are multiple (overlapping) items close to each other.\n     highlightedEvents.forEach(event => {\n-      this._drawSingleReactEvent(\n+      this._drawSingleSchedulingEvent(\n         context,\n         visibleArea,\n         event,\n@@ -244,7 +221,7 @@ export class ReactEventsView extends View {\n     }\n \n     const {\n-      _profilerData: {reactEvents},\n+      _profilerData: {schedulingEvents},\n     } = this;\n     const scaleFactor = positioningScaleFactor(\n       this._intrinsicSize.width,\n@@ -258,15 +235,15 @@ export class ReactEventsView extends View {\n \n     \/\/ Because data ranges may overlap, we want to find the last intersecting item.\n     \/\/ This will always be the one on \"top\" (the one the user is hovering over).\n-    for (let index = reactEvents.length - 1; index >= 0; index--) {\n-      const event = reactEvents[index];\n+    for (let index = schedulingEvents.length - 1; index >= 0; index--) {\n+      const event = schedulingEvents[index];\n       const {timestamp} = event;\n \n       if (\n         timestamp - eventTimestampAllowance <= hoverTimestamp &&\n         hoverTimestamp <= timestamp + eventTimestampAllowance\n       ) {\n-        this.currentCursor = 'pointer';\n+        this.currentCursor = 'context-menu';\n         viewRefs.hoveredView = this;\n         onHover(event);\n         return;\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\nnew file mode 100644\nindex 0000000000..3d85ffd4e2\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\n@@ -0,0 +1,368 @@\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 {SuspenseEvent, ReactProfilerData} from '..\/types';\n+import type {\n+  Interaction,\n+  MouseMoveInteraction,\n+  Rect,\n+  SizeWithMaxHeight,\n+  ViewRefs,\n+} from '..\/view-base';\n+\n+import {\n+  durationToWidth,\n+  positioningScaleFactor,\n+  positionToTimestamp,\n+  timestampToPosition,\n+  widthToDuration,\n+} from '.\/utils\/positioning';\n+import {drawText} from '.\/utils\/text';\n+import {formatDuration} from '..\/utils\/formatting';\n+import {\n+  View,\n+  Surface,\n+  rectContainsPoint,\n+  rectIntersectsRect,\n+  intersectionOfRects,\n+} from '..\/view-base';\n+import {\n+  BORDER_SIZE,\n+  COLORS,\n+  PENDING_SUSPENSE_EVENT_SIZE,\n+  SUSPENSE_EVENT_HEIGHT,\n+} from '.\/constants';\n+\n+const ROW_WITH_BORDER_HEIGHT = SUSPENSE_EVENT_HEIGHT + BORDER_SIZE;\n+const MAX_ROWS_TO_SHOW_INITIALLY = 3;\n+\n+export class SuspenseEventsView extends View {\n+  _depthToSuspenseEvent: Map;\n+  _hoveredEvent: SuspenseEvent | null = null;\n+  _intrinsicSize: SizeWithMaxHeight;\n+  _maxDepth: number = 0;\n+  _profilerData: ReactProfilerData;\n+\n+  onHover: ((event: SuspenseEvent | null) => void) | null = null;\n+\n+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n+    super(surface, frame);\n+\n+    this._profilerData = profilerData;\n+\n+    this._performPreflightComputations();\n+  }\n+\n+  _performPreflightComputations() {\n+    this._depthToSuspenseEvent = new Map();\n+\n+    const {duration, suspenseEvents} = this._profilerData;\n+\n+    suspenseEvents.forEach(event => {\n+      const depth = event.depth;\n+\n+      this._maxDepth = Math.max(this._maxDepth, depth);\n+\n+      if (!this._depthToSuspenseEvent.has(depth)) {\n+        this._depthToSuspenseEvent.set(depth, [event]);\n+      } else {\n+        \/\/ $FlowFixMe This is unnecessary.\n+        this._depthToSuspenseEvent.get(depth).push(event);\n+      }\n+    });\n+\n+    this._intrinsicSize = {\n+      width: duration,\n+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,\n+      maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY,\n+    };\n+  }\n+\n+  desiredSize() {\n+    return this._intrinsicSize;\n+  }\n+\n+  setHoveredEvent(hoveredEvent: SuspenseEvent | null) {\n+    if (this._hoveredEvent === hoveredEvent) {\n+      return;\n+    }\n+    this._hoveredEvent = hoveredEvent;\n+    this.setNeedsDisplay();\n+  }\n+\n+  \/**\n+   * Draw a single `SuspenseEvent` as a box\/span with text inside of it.\n+   *\/\n+  _drawSingleSuspenseEvent(\n+    context: CanvasRenderingContext2D,\n+    rect: Rect,\n+    event: SuspenseEvent,\n+    baseY: number,\n+    scaleFactor: number,\n+    showHoverHighlight: boolean,\n+  ) {\n+    const {frame} = this;\n+    const {\n+      componentName,\n+      depth,\n+      duration,\n+      phase,\n+      resolution,\n+      timestamp,\n+      warning,\n+    } = event;\n+\n+    baseY += depth * ROW_WITH_BORDER_HEIGHT;\n+\n+    let fillStyle = ((null: any): string);\n+    if (warning !== null) {\n+      fillStyle = showHoverHighlight\n+        ? COLORS.WARNING_BACKGROUND_HOVER\n+        : COLORS.WARNING_BACKGROUND;\n+    } else {\n+      switch (resolution) {\n+        case 'rejected':\n+          fillStyle = showHoverHighlight\n+            ? COLORS.REACT_SUSPENSE_REJECTED_EVENT_HOVER\n+            : COLORS.REACT_SUSPENSE_REJECTED_EVENT;\n+          break;\n+        case 'resolved':\n+          fillStyle = showHoverHighlight\n+            ? COLORS.REACT_SUSPENSE_RESOLVED_EVENT_HOVER\n+            : COLORS.REACT_SUSPENSE_RESOLVED_EVENT;\n+          break;\n+        case 'unresolved':\n+          fillStyle = showHoverHighlight\n+            ? COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER\n+            : COLORS.REACT_SUSPENSE_UNRESOLVED_EVENT;\n+          break;\n+      }\n+    }\n+\n+    const xStart = timestampToPosition(timestamp, scaleFactor, frame);\n+\n+    \/\/ Pending suspense events (ones that never resolved) won't have durations.\n+    \/\/ So instead we draw them as diamonds.\n+    if (duration === null) {\n+      const size = PENDING_SUSPENSE_EVENT_SIZE;\n+      const halfSize = size \/ 2;\n+\n+      baseY += (SUSPENSE_EVENT_HEIGHT - PENDING_SUSPENSE_EVENT_SIZE) \/ 2;\n+\n+      const y = baseY + halfSize;\n+\n+      const suspenseRect: Rect = {\n+        origin: {\n+          x: xStart - halfSize,\n+          y: baseY,\n+        },\n+        size: {width: size, height: size},\n+      };\n+      if (!rectIntersectsRect(suspenseRect, rect)) {\n+        return; \/\/ Not in view\n+      }\n+\n+      const drawableRect = intersectionOfRects(suspenseRect, rect);\n+\n+      \/\/ Clip diamonds so they don't overflow if the view has been resized (smaller).\n+      const region = new Path2D();\n+      region.rect(\n+        drawableRect.origin.x,\n+        drawableRect.origin.y,\n+        drawableRect.size.width,\n+        drawableRect.size.height,\n+      );\n+      context.save();\n+      context.clip(region);\n+      context.beginPath();\n+      context.fillStyle = fillStyle;\n+      context.moveTo(xStart, y - halfSize);\n+      context.lineTo(xStart + halfSize, y);\n+      context.lineTo(xStart, y + halfSize);\n+      context.lineTo(xStart - halfSize, y);\n+      context.fill();\n+      context.restore();\n+    } else {\n+      const xStop = timestampToPosition(\n+        timestamp + duration,\n+        scaleFactor,\n+        frame,\n+      );\n+      const eventRect: Rect = {\n+        origin: {\n+          x: xStart,\n+          y: baseY,\n+        },\n+        size: {width: xStop - xStart, height: SUSPENSE_EVENT_HEIGHT},\n+      };\n+      if (!rectIntersectsRect(eventRect, rect)) {\n+        return; \/\/ Not in view\n+      }\n+\n+      const width = durationToWidth(duration, scaleFactor);\n+      if (width < 1) {\n+        return; \/\/ Too small to render at this zoom level\n+      }\n+\n+      const drawableRect = intersectionOfRects(eventRect, rect);\n+      context.beginPath();\n+      context.fillStyle = fillStyle;\n+      context.fillRect(\n+        drawableRect.origin.x,\n+        drawableRect.origin.y,\n+        drawableRect.size.width,\n+        drawableRect.size.height,\n+      );\n+\n+      let label = 'suspended';\n+      if (componentName != null) {\n+        label = `${componentName} ${label}`;\n+      }\n+      if (phase !== null) {\n+        label += ` during ${phase}`;\n+      }\n+      if (resolution !== 'unresolved') {\n+        label += ` - ${formatDuration(duration)}`;\n+      }\n+\n+      drawText(label, context, eventRect, drawableRect, width);\n+    }\n+  }\n+\n+  draw(context: CanvasRenderingContext2D) {\n+    const {\n+      frame,\n+      _profilerData: {suspenseEvents},\n+      _hoveredEvent,\n+      visibleArea,\n+    } = this;\n+\n+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;\n+    context.fillRect(\n+      visibleArea.origin.x,\n+      visibleArea.origin.y,\n+      visibleArea.size.width,\n+      visibleArea.size.height,\n+    );\n+\n+    \/\/ Draw events\n+    const scaleFactor = positioningScaleFactor(\n+      this._intrinsicSize.width,\n+      frame,\n+    );\n+\n+    suspenseEvents.forEach(event => {\n+      this._drawSingleSuspenseEvent(\n+        context,\n+        visibleArea,\n+        event,\n+        frame.origin.y,\n+        scaleFactor,\n+        event === _hoveredEvent,\n+      );\n+    });\n+\n+    \/\/ Render bottom borders.\n+    for (let i = 0; i <= this._maxDepth; i++) {\n+      const borderFrame: Rect = {\n+        origin: {\n+          x: frame.origin.x,\n+          y: frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,\n+        },\n+        size: {\n+          width: frame.size.width,\n+          height: BORDER_SIZE,\n+        },\n+      };\n+      if (rectIntersectsRect(borderFrame, visibleArea)) {\n+        const borderDrawableRect = intersectionOfRects(\n+          borderFrame,\n+          visibleArea,\n+        );\n+        context.fillStyle = COLORS.PRIORITY_BORDER;\n+        context.fillRect(\n+          borderDrawableRect.origin.x,\n+          borderDrawableRect.origin.y,\n+          borderDrawableRect.size.width,\n+          borderDrawableRect.size.height,\n+        );\n+      }\n+    }\n+  }\n+\n+  \/**\n+   * @private\n+   *\/\n+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {\n+    const {frame, _intrinsicSize, onHover, visibleArea} = this;\n+    if (!onHover) {\n+      return;\n+    }\n+\n+    const {location} = interaction.payload;\n+    if (!rectContainsPoint(location, visibleArea)) {\n+      onHover(null);\n+      return;\n+    }\n+\n+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);\n+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n+\n+    const adjustedCanvasMouseY = location.y - frame.origin.y;\n+    const depth = Math.floor(adjustedCanvasMouseY \/ ROW_WITH_BORDER_HEIGHT);\n+    const suspenseEventsAtDepth = this._depthToSuspenseEvent.get(depth);\n+\n+    if (suspenseEventsAtDepth) {\n+      \/\/ Find the event being hovered over.\n+      for (let index = suspenseEventsAtDepth.length - 1; index >= 0; index--) {\n+        const suspenseEvent = suspenseEventsAtDepth[index];\n+        const {duration, timestamp} = suspenseEvent;\n+\n+        if (duration === null) {\n+          const timestampAllowance = widthToDuration(\n+            PENDING_SUSPENSE_EVENT_SIZE \/ 2,\n+            scaleFactor,\n+          );\n+\n+          if (\n+            timestamp - timestampAllowance <= hoverTimestamp &&\n+            hoverTimestamp <= timestamp + timestampAllowance\n+          ) {\n+            this.currentCursor = 'context-menu';\n+\n+            viewRefs.hoveredView = this;\n+\n+            onHover(suspenseEvent);\n+            return;\n+          }\n+        } else if (\n+          hoverTimestamp >= timestamp &&\n+          hoverTimestamp <= timestamp + duration\n+        ) {\n+          this.currentCursor = 'context-menu';\n+\n+          viewRefs.hoveredView = this;\n+\n+          onHover(suspenseEvent);\n+          return;\n+        }\n+      }\n+    }\n+\n+    onHover(null);\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+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\nindex 92c82c119d..2249d3841a 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n@@ -209,7 +209,7 @@ export class UserTimingMarksView extends View {\n       frame,\n     );\n     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n-    const markTimestampAllowance = widthToDuration(\n+    const timestampAllowance = widthToDuration(\n       USER_TIMING_MARK_SIZE \/ 2,\n       scaleFactor,\n     );\n@@ -221,10 +221,10 @@ export class UserTimingMarksView extends View {\n       const {timestamp} = mark;\n \n       if (\n-        timestamp - markTimestampAllowance <= hoverTimestamp &&\n-        hoverTimestamp <= timestamp + markTimestampAllowance\n+        timestamp - timestampAllowance <= hoverTimestamp &&\n+        hoverTimestamp <= timestamp + timestampAllowance\n       ) {\n-        this.currentCursor = 'pointer';\n+        this.currentCursor = 'context-menu';\n         viewRefs.hoveredView = this;\n         onHover(mark);\n         return;\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 da38348926..27ce99a05a 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@@ -15,6 +15,8 @@ export const MARKER_TEXT_PADDING = 8;\n export const COLOR_HOVER_DIM_DELTA = 5;\n export const TOP_ROW_PADDING = 4;\n export const NATIVE_EVENT_HEIGHT = 14;\n+export const SUSPENSE_EVENT_HEIGHT = 14;\n+export const PENDING_SUSPENSE_EVENT_SIZE = 8;\n export const REACT_EVENT_DIAMETER = 6;\n export const USER_TIMING_MARK_SIZE = 8;\n export const REACT_MEASURE_HEIGHT = 9;\n@@ -43,44 +45,51 @@ export let COLORS = {\n   BACKGROUND: '',\n   NATIVE_EVENT: '',\n   NATIVE_EVENT_HOVER: '',\n-  NATIVE_EVENT_WARNING: '',\n-  NATIVE_EVENT_WARNING_HOVER: '',\n-  NATIVE_EVENT_WARNING_TEXT: '',\n   PRIORITY_BACKGROUND: '',\n   PRIORITY_BORDER: '',\n   PRIORITY_LABEL: '',\n   USER_TIMING: '',\n   USER_TIMING_HOVER: '',\n   REACT_IDLE: '',\n-  REACT_IDLE_SELECTED: '',\n   REACT_IDLE_HOVER: '',\n   REACT_RENDER: '',\n-  REACT_RENDER_SELECTED: '',\n   REACT_RENDER_HOVER: '',\n   REACT_COMMIT: '',\n-  REACT_COMMIT_SELECTED: '',\n   REACT_COMMIT_HOVER: '',\n   REACT_LAYOUT_EFFECTS: '',\n-  REACT_LAYOUT_EFFECTS_SELECTED: '',\n   REACT_LAYOUT_EFFECTS_HOVER: '',\n   REACT_PASSIVE_EFFECTS: '',\n-  REACT_PASSIVE_EFFECTS_SELECTED: '',\n   REACT_PASSIVE_EFFECTS_HOVER: '',\n   REACT_RESIZE_BAR: '',\n+  REACT_RESIZE_BAR_ACTIVE: '',\n+  REACT_RESIZE_BAR_BORDER: '',\n+  REACT_RESIZE_BAR_DOT: '',\n   REACT_SCHEDULE: '',\n   REACT_SCHEDULE_HOVER: '',\n-  REACT_SCHEDULE_CASCADING: '',\n-  REACT_SCHEDULE_CASCADING_HOVER: '',\n-  REACT_SUSPEND: '',\n-  REACT_SUSPEND_HOVER: '',\n+  REACT_SUSPENSE_REJECTED_EVENT: '',\n+  REACT_SUSPENSE_REJECTED_EVENT_HOVER: '',\n+  REACT_SUSPENSE_RESOLVED_EVENT: '',\n+  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: '',\n+  REACT_SUSPENSE_UNRESOLVED_EVENT: '',\n+  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: '',\n   REACT_WORK_BORDER: '',\n+  SCROLL_CARET: '',\n   TEXT_COLOR: '',\n   TIME_MARKER_LABEL: '',\n+  WARNING_BACKGROUND: '',\n+  WARNING_BACKGROUND_HOVER: '',\n+  WARNING_TEXT: '',\n+  WARNING_TEXT_INVERED: '',\n };\n \n-export function updateColorsToMatchTheme(): void {\n+export function updateColorsToMatchTheme(): boolean {\n   const computedStyle = getComputedStyle((document.body: any));\n \n+  \/\/ Check to see if styles have been initialized...\n+  if (computedStyle.getPropertyValue('--color-background') == null) {\n+    return false;\n+  }\n+\n   COLORS = {\n     BACKGROUND: computedStyle.getPropertyValue('--color-background'),\n     NATIVE_EVENT: computedStyle.getPropertyValue(\n@@ -89,15 +98,6 @@ export function updateColorsToMatchTheme(): void {\n     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-native-event-hover',\n     ),\n-    NATIVE_EVENT_WARNING: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-native-event-warning',\n-    ),\n-    NATIVE_EVENT_WARNING_HOVER: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-native-event-warning-hover',\n-    ),\n-    NATIVE_EVENT_WARNING_TEXT: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-native-event-warning-text',\n-    ),\n     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-priority-background',\n     ),\n@@ -114,73 +114,86 @@ export function updateColorsToMatchTheme(): void {\n     REACT_IDLE: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-idle',\n     ),\n-    REACT_IDLE_SELECTED: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-idle-selected',\n-    ),\n     REACT_IDLE_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-idle-hover',\n     ),\n     REACT_RENDER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-render',\n     ),\n-    REACT_RENDER_SELECTED: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-render-selected',\n-    ),\n     REACT_RENDER_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-render-hover',\n     ),\n     REACT_COMMIT: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-commit',\n     ),\n-    REACT_COMMIT_SELECTED: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-commit-selected',\n-    ),\n     REACT_COMMIT_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-commit-hover',\n     ),\n     REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-layout-effects',\n     ),\n-    REACT_LAYOUT_EFFECTS_SELECTED: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-layout-effects-selected',\n-    ),\n     REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-layout-effects-hover',\n     ),\n     REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-passive-effects',\n     ),\n-    REACT_PASSIVE_EFFECTS_SELECTED: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-passive-effects-selected',\n-    ),\n     REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-passive-effects-hover',\n     ),\n     REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),\n+    REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(\n+      '--color-resize-bar-active',\n+    ),\n+    REACT_RESIZE_BAR_BORDER: computedStyle.getPropertyValue(\n+      '--color-resize-bar-border',\n+    ),\n+    REACT_RESIZE_BAR_DOT: computedStyle.getPropertyValue(\n+      '--color-resize-bar-dot',\n+    ),\n     REACT_SCHEDULE: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-schedule',\n     ),\n     REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-schedule-hover',\n     ),\n-    REACT_SCHEDULE_CASCADING: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-schedule-cascading',\n+    REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-rejected',\n+    ),\n+    REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-rejected-hover',\n+    ),\n+    REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-resolved',\n     ),\n-    REACT_SCHEDULE_CASCADING_HOVER: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-schedule-cascading-hover',\n+    REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-resolved-hover',\n     ),\n-    REACT_SUSPEND: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-suspend',\n+    REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-unresolved',\n     ),\n-    REACT_SUSPEND_HOVER: computedStyle.getPropertyValue(\n-      '--color-scheduling-profiler-react-suspend-hover',\n+    REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(\n+      '--color-scheduling-profiler-react-suspense-unresolved-hover',\n     ),\n     REACT_WORK_BORDER: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-react-work-border',\n     ),\n+    SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),\n     TEXT_COLOR: computedStyle.getPropertyValue(\n       '--color-scheduling-profiler-text-color',\n     ),\n     TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),\n+    WARNING_BACKGROUND: computedStyle.getPropertyValue(\n+      '--color-warning-background',\n+    ),\n+    WARNING_BACKGROUND_HOVER: computedStyle.getPropertyValue(\n+      '--color-warning-background-hover',\n+    ),\n+    WARNING_TEXT: computedStyle.getPropertyValue('--color-warning-text-color'),\n+    WARNING_TEXT_INVERED: computedStyle.getPropertyValue(\n+      '--color-warning-text-color-inverted',\n+    ),\n   };\n+\n+  return true;\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\nindex b50490b13a..588f3e5d7b 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@@ -9,7 +9,8 @@\n \n export * from '.\/FlamechartView';\n export * from '.\/NativeEventsView';\n-export * from '.\/ReactEventsView';\n export * from '.\/ReactMeasuresView';\n+export * from '.\/SchedulingEventsView';\n+export * from '.\/SuspenseEventsView';\n export * from '.\/TimeAxisMarkersView';\n export * from '.\/UserTimingMarksView';\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.js\nnew file mode 100644\nindex 0000000000..da14733bce\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.js\n@@ -0,0 +1,98 @@\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 {Rect} from '..\/..\/view-base';\n+\n+import {rectEqualToRect} from '..\/..\/view-base';\n+import {COLORS, FONT_SIZE, TEXT_PADDING} from '..\/constants';\n+\n+const cachedTextWidths = new Map();\n+\n+export function trimText(\n+  context: CanvasRenderingContext2D,\n+  text: string,\n+  width: number,\n+): string | null {\n+  for (let i = text.length - 1; i >= 0; i--) {\n+    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';\n+\n+    let measuredWidth = cachedTextWidths.get(trimmedText);\n+    if (measuredWidth == null) {\n+      measuredWidth = context.measureText(trimmedText).width;\n+      cachedTextWidths.set(trimmedText, measuredWidth);\n+    }\n+\n+    if (measuredWidth <= width) {\n+      return trimmedText;\n+    }\n+  }\n+\n+  return null;\n+}\n+\n+export function drawText(\n+  text: string,\n+  context: CanvasRenderingContext2D,\n+  fullRect: Rect,\n+  drawableRect: Rect,\n+  availableWidth: number,\n+  textAlign: 'left' | 'center' = 'left',\n+  fillStyle: string = COLORS.TEXT_COLOR,\n+): void {\n+  if (availableWidth > TEXT_PADDING * 2) {\n+    context.textAlign = textAlign;\n+    context.textBaseline = 'middle';\n+    context.font = `${FONT_SIZE}px sans-serif`;\n+\n+    const {x, y} = fullRect.origin;\n+\n+    const trimmedName = trimText(\n+      context,\n+      text,\n+      availableWidth - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n+    );\n+\n+    if (trimmedName !== null) {\n+      context.fillStyle = fillStyle;\n+\n+      \/\/ Prevent text from visibly overflowing its container when clipped.\n+      const textOverflowsViewableArea = !rectEqualToRect(\n+        drawableRect,\n+        fullRect,\n+      );\n+      if (textOverflowsViewableArea) {\n+        context.save();\n+        context.beginPath();\n+        context.rect(\n+          drawableRect.origin.x,\n+          drawableRect.origin.y,\n+          drawableRect.size.width,\n+          drawableRect.size.height,\n+        );\n+        context.closePath();\n+        context.clip();\n+      }\n+\n+      let textX;\n+      if (textAlign === 'center') {\n+        textX = x + availableWidth \/ 2 + TEXT_PADDING - (x < 0 ? x : 0);\n+      } else {\n+        textX = x + TEXT_PADDING - (x < 0 ? x : 0);\n+      }\n+\n+      const textY = y + fullRect.size.height \/ 2;\n+\n+      context.fillText(trimmedName, textX, textY);\n+\n+      if (textOverflowsViewableArea) {\n+        context.restore();\n+      }\n+    }\n+  }\n+}\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 649d902469..bb10bca4d8 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@@ -208,8 +208,9 @@ describe(preprocessData, () => {\n       measures: [],\n       nativeEvents: [],\n       otherUserTimingMarks: [],\n-      reactEvents: [],\n+      schedulingEvents: [],\n       startTime: 1,\n+      suspenseEvents: [],\n     });\n   });\n \n@@ -300,16 +301,17 @@ describe(preprocessData, () => {\n       ],\n       nativeEvents: [],\n       otherUserTimingMarks: [],\n-      reactEvents: [\n+      schedulingEvents: [\n         {\n-          componentStack: '',\n           laneLabels: [],\n           lanes: [9],\n           timestamp: 0.002,\n           type: 'schedule-render',\n+          warning: null,\n         },\n       ],\n       startTime: 1,\n+      suspenseEvents: [],\n     });\n   });\n \n@@ -372,16 +374,17 @@ describe(preprocessData, () => {\n           timestamp: 0.004,\n         },\n       ],\n-      reactEvents: [\n+      schedulingEvents: [\n         {\n-          componentStack: '',\n           laneLabels: ['Sync'],\n           lanes: [0],\n           timestamp: 0.005,\n           type: 'schedule-render',\n+          warning: null,\n         },\n       ],\n       startTime: 1,\n+      suspenseEvents: [],\n     });\n   });\n \n@@ -507,25 +510,25 @@ describe(preprocessData, () => {\n           timestamp: 0.004,\n         },\n       ],\n-      reactEvents: [\n+      schedulingEvents: [\n         {\n-          componentStack: '',\n           laneLabels: ['Default'],\n           lanes: [4],\n           timestamp: 0.005,\n           type: 'schedule-render',\n+          warning: null,\n         },\n         {\n           componentName: 'App',\n-          componentStack: '',\n-          isCascading: false,\n           laneLabels: ['Default'],\n           lanes: [4],\n           timestamp: 0.013,\n           type: 'schedule-state-update',\n+          warning: null,\n         },\n       ],\n       startTime: 1,\n+      suspenseEvents: [],\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 12a5bb644a..a365be1208 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@@ -20,6 +20,7 @@ import type {\n   ReactLane,\n   ReactMeasureType,\n   ReactProfilerData,\n+  SuspenseEvent,\n } from '..\/types';\n \n import {REACT_TOTAL_NUM_LANES} from '..\/constants';\n@@ -34,13 +35,25 @@ type MeasureStackElement = {|\n |};\n \n type ProcessorState = {|\n-  nextRenderShouldGenerateNewBatchID: boolean,\n   batchUID: BatchUID,\n-  uidCounter: BatchUID,\n   measureStack: MeasureStackElement[],\n+  nativeEventStack: NativeEvent[],\n+  nextRenderShouldGenerateNewBatchID: boolean,\n+  uidCounter: BatchUID,\n+  unresolvedSuspenseEvents: Map,\n |};\n \n-let nativeEventStack: Array = [];\n+const NATIVE_EVENT_DURATION_THRESHOLD = 20;\n+\n+const WARNING_STRINGS = {\n+  LONG_EVENT_HANDLER:\n+    'An event handler scheduled a big update with React. Consider using the Transition API to defer some of this work.',\n+  NESTED_UPDATE:\n+    'A nested update was scheduled during layout. These updates require React to re-render synchronously before the browser can paint.',\n+  SUSPENDD_DURING_UPATE:\n+    'A component suspended during an update which caused a fallback to be shown. ' +\n+    \"Consider using the Transition API to avoid hiding components after they've been mounted.\",\n+};\n \n \/\/ Exported for tests\n export function getLanesFromTransportDecimalBitmask(\n@@ -174,44 +187,54 @@ function processTimelineEvent(\n           const stackTrace = args.data.stackTrace;\n           if (stackTrace) {\n             const topFrame = stackTrace[stackTrace.length - 1];\n-            if (topFrame.url.includes('node_modules\/react-dom')) {\n+            if (topFrame.url.includes('\/react-dom.')) {\n               \/\/ Filter out fake React events dispatched by invokeGuardedCallbackDev.\n               return;\n             }\n           }\n         }\n \n-        const timestamp = (ts - currentProfilerData.startTime) \/ 1000;\n-        const duration = event.dur \/ 1000;\n-\n-        let depth = 0;\n-\n-        while (nativeEventStack.length > 0) {\n-          const prevNativeEvent = nativeEventStack[nativeEventStack.length - 1];\n-          const prevStopTime =\n-            prevNativeEvent.timestamp + prevNativeEvent.duration;\n-\n-          if (timestamp < prevStopTime) {\n-            depth = prevNativeEvent.depth + 1;\n-            break;\n-          } else {\n-            nativeEventStack.pop();\n+        \/\/ Reduce noise from events like DOMActivate, load\/unload, etc. which are usually not relevant\n+        if (\n+          type.startsWith('blur') ||\n+          type.startsWith('click') ||\n+          type.startsWith('focus') ||\n+          type.startsWith('mouse') ||\n+          type.startsWith('pointer')\n+        ) {\n+          const timestamp = (ts - currentProfilerData.startTime) \/ 1000;\n+          const duration = event.dur \/ 1000;\n+\n+          let depth = 0;\n+\n+          while (state.nativeEventStack.length > 0) {\n+            const prevNativeEvent =\n+              state.nativeEventStack[state.nativeEventStack.length - 1];\n+            const prevStopTime =\n+              prevNativeEvent.timestamp + prevNativeEvent.duration;\n+\n+            if (timestamp < prevStopTime) {\n+              depth = prevNativeEvent.depth + 1;\n+              break;\n+            } else {\n+              state.nativeEventStack.pop();\n+            }\n           }\n-        }\n \n-        const nativeEvent = {\n-          depth,\n-          duration,\n-          timestamp,\n-          type,\n-          warnings: null,\n-        };\n+          const nativeEvent = {\n+            depth,\n+            duration,\n+            timestamp,\n+            type,\n+            warning: null,\n+          };\n \n-        currentProfilerData.nativeEvents.push(nativeEvent);\n+          currentProfilerData.nativeEvents.push(nativeEvent);\n \n-        \/\/ Keep track of curent event in case future ones overlap.\n-        \/\/ We separate them into different vertical lanes in this case.\n-        nativeEventStack.push(nativeEvent);\n+          \/\/ Keep track of curent event in case future ones overlap.\n+          \/\/ We separate them into different vertical lanes in this case.\n+          state.nativeEventStack.push(nativeEvent);\n+        }\n       }\n       break;\n     case 'blink.user_timing':\n@@ -219,92 +242,141 @@ function processTimelineEvent(\n \n       \/\/ React Events - schedule\n       if (name.startsWith('--schedule-render-')) {\n-        const [\n-          laneBitmaskString,\n-          laneLabels,\n-          ...splitComponentStack\n-        ] = name.substr(18).split('-');\n-        currentProfilerData.reactEvents.push({\n+        const [laneBitmaskString, laneLabels] = name.substr(18).split('-');\n+        currentProfilerData.schedulingEvents.push({\n           type: 'schedule-render',\n           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n           laneLabels: laneLabels ? laneLabels.split(',') : [],\n-          componentStack: splitComponentStack.join('-'),\n           timestamp: startTime,\n+          warning: null,\n         });\n       } else if (name.startsWith('--schedule-forced-update-')) {\n-        const [\n-          laneBitmaskString,\n-          laneLabels,\n-          componentName,\n-          ...splitComponentStack\n-        ] = name.substr(25).split('-');\n-        const isCascading = !!state.measureStack.find(\n-          ({type}) => type === 'commit',\n-        );\n-        currentProfilerData.reactEvents.push({\n+        const [laneBitmaskString, laneLabels, componentName] = name\n+          .substr(25)\n+          .split('-');\n+\n+        let warning = null;\n+        if (state.measureStack.find(({type}) => type === 'commit')) {\n+          \/\/ TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.\n+          warning = WARNING_STRINGS.NESTED_UPDATE;\n+        }\n+\n+        currentProfilerData.schedulingEvents.push({\n           type: 'schedule-force-update',\n           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n           laneLabels: laneLabels ? laneLabels.split(',') : [],\n           componentName,\n-          componentStack: splitComponentStack.join('-'),\n           timestamp: startTime,\n-          isCascading,\n+          warning,\n         });\n       } else if (name.startsWith('--schedule-state-update-')) {\n-        const [\n-          laneBitmaskString,\n-          laneLabels,\n-          componentName,\n-          ...splitComponentStack\n-        ] = name.substr(24).split('-');\n-        const isCascading = !!state.measureStack.find(\n-          ({type}) => type === 'commit',\n-        );\n-        currentProfilerData.reactEvents.push({\n+        const [laneBitmaskString, laneLabels, componentName] = name\n+          .substr(24)\n+          .split('-');\n+\n+        let warning = null;\n+        if (state.measureStack.find(({type}) => type === 'commit')) {\n+          \/\/ TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.\n+          warning = WARNING_STRINGS.NESTED_UPDATE;\n+        }\n+\n+        currentProfilerData.schedulingEvents.push({\n           type: 'schedule-state-update',\n           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),\n           laneLabels: laneLabels ? laneLabels.split(',') : [],\n           componentName,\n-          componentStack: splitComponentStack.join('-'),\n           timestamp: startTime,\n-          isCascading,\n+          warning,\n         });\n       } \/\/ eslint-disable-line brace-style\n \n       \/\/ React Events - suspense\n       else if (name.startsWith('--suspense-suspend-')) {\n-        const [id, componentName, ...splitComponentStack] = name\n-          .substr(19)\n-          .split('-');\n-        currentProfilerData.reactEvents.push({\n-          type: 'suspense-suspend',\n-          id,\n-          componentName,\n-          componentStack: splitComponentStack.join('-'),\n-          timestamp: startTime,\n+        const [id, componentName, ...rest] = name.substr(19).split('-');\n+\n+        \/\/ Older versions of the scheduling profiler data didn't contain phase or lane values.\n+        let phase = null;\n+        let warning = null;\n+        if (rest.length === 3) {\n+          switch (rest[0]) {\n+            case 'mount':\n+            case 'update':\n+              phase = rest[0];\n+              break;\n+          }\n+\n+          if (phase === 'update') {\n+            const laneLabels = rest[2];\n+            \/\/ HACK This is a bit gross but the numeric lane value might change between render versions.\n+            if (!laneLabels.includes('Transition')) {\n+              warning = WARNING_STRINGS.SUSPENDD_DURING_UPATE;\n+            }\n+          }\n+        }\n+\n+        const availableDepths = new Array(\n+          state.unresolvedSuspenseEvents.size + 1,\n+        ).fill(true);\n+        state.unresolvedSuspenseEvents.forEach(({depth}) => {\n+          availableDepths[depth] = false;\n         });\n-      } else if (name.startsWith('--suspense-resolved-')) {\n-        const [id, componentName, ...splitComponentStack] = name\n-          .substr(20)\n-          .split('-');\n-        currentProfilerData.reactEvents.push({\n-          type: 'suspense-resolved',\n-          id,\n+\n+        let depth = 0;\n+        for (let i = 0; i < availableDepths.length; i++) {\n+          if (availableDepths[i]) {\n+            depth = i;\n+            break;\n+          }\n+        }\n+\n+        \/\/ TODO (scheduling profiler) Maybe we should calculate depth in post,\n+        \/\/ so unresolved Suspense requests don't take up space.\n+        \/\/ We can't know if they'll be resolved or not at this point.\n+        \/\/ We'll just give them a default (fake) duration width.\n+\n+        const suspenseEvent = {\n           componentName,\n-          componentStack: splitComponentStack.join('-'),\n-          timestamp: startTime,\n-        });\n-      } else if (name.startsWith('--suspense-rejected-')) {\n-        const [id, componentName, ...splitComponentStack] = name\n-          .substr(20)\n-          .split('-');\n-        currentProfilerData.reactEvents.push({\n-          type: 'suspense-rejected',\n+          depth,\n+          duration: null,\n           id,\n-          componentName,\n-          componentStack: splitComponentStack.join('-'),\n+          phase,\n+          resolution: 'unresolved',\n+          resuspendTimestamps: null,\n           timestamp: startTime,\n-        });\n+          type: 'suspense',\n+          warning,\n+        };\n+\n+        currentProfilerData.suspenseEvents.push(suspenseEvent);\n+        state.unresolvedSuspenseEvents.set(id, suspenseEvent);\n+      } else if (name.startsWith('--suspense-resuspend-')) {\n+        const [id] = name.substr(21).split('-');\n+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);\n+        if (suspenseEvent != null) {\n+          if (suspenseEvent.resuspendTimestamps === null) {\n+            suspenseEvent.resuspendTimestamps = [startTime];\n+          } else {\n+            suspenseEvent.resuspendTimestamps.push(startTime);\n+          }\n+        }\n+      } else if (name.startsWith('--suspense-resolved-')) {\n+        const [id] = name.substr(20).split('-');\n+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);\n+        if (suspenseEvent != null) {\n+          state.unresolvedSuspenseEvents.delete(id);\n+\n+          suspenseEvent.duration = startTime - suspenseEvent.timestamp;\n+          suspenseEvent.resolution = 'resolved';\n+        }\n+      } else if (name.startsWith('--suspense-rejected-')) {\n+        const [id] = name.substr(20).split('-');\n+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);\n+        if (suspenseEvent != null) {\n+          state.unresolvedSuspenseEvents.delete(id);\n+\n+          suspenseEvent.duration = startTime - suspenseEvent.timestamp;\n+          suspenseEvent.resolution = 'rejected';\n+        }\n       } \/\/ eslint-disable-line brace-style\n \n       \/\/ React Measures - render\n@@ -335,17 +407,14 @@ function processTimelineEvent(\n           state,\n         );\n \n-        for (let i = 0; i < nativeEventStack.length; i++) {\n-          const nativeEvent = nativeEventStack[i];\n+        for (let i = 0; i < state.nativeEventStack.length; i++) {\n+          const nativeEvent = state.nativeEventStack[i];\n           const stopTime = nativeEvent.timestamp + nativeEvent.duration;\n-          if (stopTime > startTime) {\n-            const warning =\n-              'An event handler scheduled a synchronous update with React.';\n-            if (nativeEvent.warnings === null) {\n-              nativeEvent.warnings = new Set([warning]);\n-            } else {\n-              nativeEvent.warnings.add(warning);\n-            }\n+          if (\n+            stopTime > startTime &&\n+            nativeEvent.duration > NATIVE_EVENT_DURATION_THRESHOLD\n+          ) {\n+            nativeEvent.warning = WARNING_STRINGS.LONG_EVENT_HANDLER;\n           }\n         }\n       } else if (\n@@ -509,18 +578,17 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {\n export default function preprocessData(\n   timeline: TimelineEvent[],\n ): ReactProfilerData {\n-  nativeEventStack = [];\n-\n   const flamechart = preprocessFlamechart(timeline);\n \n   const profilerData: ReactProfilerData = {\n-    startTime: 0,\n     duration: 0,\n-    nativeEvents: [],\n-    reactEvents: [],\n-    measures: [],\n     flamechart,\n+    measures: [],\n+    nativeEvents: [],\n     otherUserTimingMarks: [],\n+    schedulingEvents: [],\n+    startTime: 0,\n+    suspenseEvents: [],\n   };\n \n   \/\/ Sort `timeline`. JSON Array Format trace events need not be ordered. See:\n@@ -551,9 +619,11 @@ export default function preprocessData(\n \n   const state: ProcessorState = {\n     batchUID: 0,\n-    uidCounter: 0,\n-    nextRenderShouldGenerateNewBatchID: true,\n     measureStack: [],\n+    nativeEventStack: [],\n+    nextRenderShouldGenerateNewBatchID: true,\n+    uidCounter: 0,\n+    unresolvedSuspenseEvents: new Map(),\n   };\n \n   timeline.forEach(event => processTimelineEvent(event, profilerData, state));\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex eb2ef87d40..674dabdc8e 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -26,13 +26,13 @@ export type NativeEvent = {|\n   +duration: Milliseconds,\n   +timestamp: Milliseconds,\n   +type: string,\n-  warnings: Set | null,\n+  warning: string | null,\n |};\n \n type BaseReactEvent = {|\n   +componentName?: string,\n-  +componentStack?: string,\n   +timestamp: Milliseconds,\n+  warning: string | null,\n |};\n \n type BaseReactScheduleEvent = {|\n@@ -42,44 +42,33 @@ type BaseReactScheduleEvent = {|\n |};\n export type ReactScheduleRenderEvent = {|\n   ...BaseReactScheduleEvent,\n-  type: 'schedule-render',\n+  +type: 'schedule-render',\n |};\n export type ReactScheduleStateUpdateEvent = {|\n   ...BaseReactScheduleEvent,\n-  type: 'schedule-state-update',\n-  isCascading: boolean,\n+  +type: 'schedule-state-update',\n |};\n export type ReactScheduleForceUpdateEvent = {|\n   ...BaseReactScheduleEvent,\n-  type: 'schedule-force-update',\n-  isCascading: boolean,\n+  +type: 'schedule-force-update',\n |};\n \n-type BaseReactSuspenseEvent = {|\n+export type SuspenseEvent = {|\n   ...BaseReactEvent,\n-  id: string,\n-|};\n-export type ReactSuspenseSuspendEvent = {|\n-  ...BaseReactSuspenseEvent,\n-  type: 'suspense-suspend',\n-|};\n-export type ReactSuspenseResolvedEvent = {|\n-  ...BaseReactSuspenseEvent,\n-  type: 'suspense-resolved',\n-|};\n-export type ReactSuspenseRejectedEvent = {|\n-  ...BaseReactSuspenseEvent,\n-  type: 'suspense-rejected',\n+  depth: number,\n+  duration: number | null,\n+  +id: string,\n+  +phase: 'mount' | 'update' | null,\n+  resolution: 'rejected' | 'resolved' | 'unresolved',\n+  resuspendTimestamps: Array | null,\n+  +type: 'suspense',\n |};\n \n-export type ReactEvent =\n+export type SchedulingEvent =\n   | ReactScheduleRenderEvent\n   | ReactScheduleStateUpdateEvent\n-  | ReactScheduleForceUpdateEvent\n-  | ReactSuspenseSuspendEvent\n-  | ReactSuspenseResolvedEvent\n-  | ReactSuspenseRejectedEvent;\n-export type ReactEventType = $PropertyType;\n+  | ReactScheduleForceUpdateEvent;\n+export type SchedulingEventType = $PropertyType;\n \n export type ReactMeasureType =\n   | 'commit'\n@@ -128,20 +117,22 @@ export type FlamechartStackLayer = FlamechartStackFrame[];\n export type Flamechart = FlamechartStackLayer[];\n \n export type ReactProfilerData = {|\n-  startTime: number,\n   duration: number,\n-  nativeEvents: NativeEvent[],\n-  reactEvents: ReactEvent[],\n-  measures: ReactMeasure[],\n   flamechart: Flamechart,\n+  measures: ReactMeasure[],\n+  nativeEvents: NativeEvent[],\n   otherUserTimingMarks: UserTimingMark[],\n+  schedulingEvents: SchedulingEvent[],\n+  startTime: number,\n+  suspenseEvents: SuspenseEvent[],\n |};\n \n export type ReactHoverContextInfo = {|\n-  nativeEvent: NativeEvent | null,\n-  reactEvent: ReactEvent | null,\n-  measure: ReactMeasure | null,\n   data: $ReadOnly | null,\n   flamechartStackFrame: FlamechartStackFrame | null,\n+  measure: ReactMeasure | null,\n+  nativeEvent: NativeEvent | null,\n+  schedulingEvent: SchedulingEvent | null,\n+  suspenseEvent: SuspenseEvent | null,\n   userTimingMark: UserTimingMark | null,\n |};\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/utils\/formatting.js b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/formatting.js\nnew file mode 100644\nindex 0000000000..f5e5894442\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/formatting.js\n@@ -0,0 +1,30 @@\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 prettyMilliseconds from 'pretty-ms';\n+\n+export function formatTimestamp(ms: number) {\n+  return (\n+    ms.toLocaleString(undefined, {\n+      minimumFractionDigits: 1,\n+      maximumFractionDigits: 1,\n+    }) + 'ms'\n+  );\n+}\n+\n+export function formatDuration(ms: number) {\n+  return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});\n+}\n+\n+export function trimString(string: string, length: number): string {\n+  if (string.length > length) {\n+    return `${string.substr(0, length - 1)}…`;\n+  }\n+  return string;\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/utils\/useSmartTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/useSmartTooltip.js\nindex 4afe1fe99e..bbf36acb95 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/utils\/useSmartTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/utils\/useSmartTooltip.js\n@@ -9,7 +9,8 @@\n \n import {useLayoutEffect, useRef} from 'react';\n \n-const TOOLTIP_OFFSET = 4;\n+const TOOLTIP_OFFSET_BOTTOM = 10;\n+const TOOLTIP_OFFSET_TOP = 5;\n \n export default function useSmartTooltip({\n   canvasRef,\n@@ -37,41 +38,41 @@ export default function useSmartTooltip({\n     const element = ref.current;\n     if (element !== null) {\n       \/\/ Let's check the vertical position.\n-      if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {\n+      if (mouseY + TOOLTIP_OFFSET_BOTTOM + element.offsetHeight >= height) {\n         \/\/ The tooltip doesn't fit below the mouse cursor (which is our\n         \/\/ default strategy). Therefore we try to position it either above the\n         \/\/ mouse cursor or finally aligned with the window's top edge.\n-        if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {\n+        if (mouseY - TOOLTIP_OFFSET_TOP - element.offsetHeight > 0) {\n           \/\/ We position the tooltip above the mouse cursor if it fits there.\n           element.style.top = `${mouseY -\n             element.offsetHeight -\n-            TOOLTIP_OFFSET}px`;\n+            TOOLTIP_OFFSET_TOP}px`;\n         } else {\n           \/\/ Otherwise we align the tooltip with the window's top edge.\n           element.style.top = '0px';\n         }\n       } else {\n-        element.style.top = `${mouseY + TOOLTIP_OFFSET}px`;\n+        element.style.top = `${mouseY + TOOLTIP_OFFSET_BOTTOM}px`;\n       }\n \n       \/\/ Now let's check the horizontal position.\n-      if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {\n+      if (mouseX + TOOLTIP_OFFSET_BOTTOM + element.offsetWidth >= width) {\n         \/\/ The tooltip doesn't fit at the right of the mouse cursor (which is\n         \/\/ our default strategy). Therefore we try to position it either at the\n         \/\/ left of the mouse cursor or finally aligned with the window's left\n         \/\/ edge.\n-        if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {\n+        if (mouseX - TOOLTIP_OFFSET_TOP - element.offsetWidth > 0) {\n           \/\/ We position the tooltip at the left of the mouse cursor if it fits\n           \/\/ there.\n           element.style.left = `${mouseX -\n             element.offsetWidth -\n-            TOOLTIP_OFFSET}px`;\n+            TOOLTIP_OFFSET_TOP}px`;\n         } else {\n           \/\/ Otherwise, align the tooltip with the window's left edge.\n           element.style.left = '0px';\n         }\n       } else {\n-        element.style.left = `${mouseX + TOOLTIP_OFFSET}px`;\n+        element.style.left = `${mouseX + TOOLTIP_OFFSET_BOTTOM}px`;\n       }\n     }\n   }, [mouseX, mouseY, ref]);\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ColorView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/BackgroundColorView.js\nsimilarity index 51%\nrename from packages\/react-devtools-scheduling-profiler\/src\/view-base\/ColorView.js\nrename to packages\/react-devtools-scheduling-profiler\/src\/view-base\/BackgroundColorView.js\nindex 551814eab6..bcacbd4526 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ColorView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/BackgroundColorView.js\n@@ -7,33 +7,17 @@\n  * @flow\n  *\/\n \n-import type {Rect} from '.\/geometry';\n-\n-import {Surface} from '.\/Surface';\n import {View} from '.\/View';\n+import {COLORS} from '..\/content-views\/constants';\n \n \/**\n  * View that fills its visible area with a CSS color.\n  *\/\n-export class ColorView extends View {\n-  _color: string;\n-\n-  constructor(surface: Surface, frame: Rect, color: string) {\n-    super(surface, frame);\n-    this._color = color;\n-  }\n-\n-  setColor(color: string) {\n-    if (this._color === color) {\n-      return;\n-    }\n-    this._color = color;\n-    this.setNeedsDisplay();\n-  }\n-\n+export class BackgroundColorView extends View {\n   draw(context: CanvasRenderingContext2D) {\n-    const {_color, visibleArea} = this;\n-    context.fillStyle = _color;\n+    const {visibleArea} = this;\n+\n+    context.fillStyle = COLORS.BACKGROUND;\n     context.fillRect(\n       visibleArea.origin.x,\n       visibleArea.origin.y,\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 8d8f427596..78d90e2495 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@@ -14,8 +14,6 @@ import type {\n   MouseUpInteraction,\n   WheelPlainInteraction,\n   WheelWithShiftInteraction,\n-  WheelWithControlInteraction,\n-  WheelWithMetaInteraction,\n } from '.\/useCanvasInteraction';\n import type {Rect} from '.\/geometry';\n import type {ScrollState} from '.\/utils\/scrollState';\n@@ -202,7 +200,7 @@ export class HorizontalPanAndZoomView extends View {\n     }\n   }\n \n-  _handleWheelPlain(interaction: WheelPlainInteraction) {\n+  _handleWheel(interaction: WheelPlainInteraction | WheelWithShiftInteraction) {\n     const {\n       location,\n       delta: {deltaX, deltaY},\n@@ -214,51 +212,41 @@ export class HorizontalPanAndZoomView extends View {\n \n     const absDeltaX = Math.abs(deltaX);\n     const absDeltaY = Math.abs(deltaY);\n-    if (absDeltaY > absDeltaX) {\n-      return; \/\/ Scrolling vertically\n-    }\n-    if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {\n-      return;\n-    }\n-\n-    const newState = translateState({\n-      state: this._scrollState,\n-      delta: -deltaX,\n-      containerLength: this.frame.size.width,\n-    });\n-    this._setStateAndInformCallbacksIfChanged(newState);\n-  }\n-\n-  _handleWheelZoom(\n-    interaction:\n-      | WheelWithShiftInteraction\n-      | WheelWithControlInteraction\n-      | WheelWithMetaInteraction,\n-  ) {\n-    const {\n-      location,\n-      delta: {deltaY},\n-    } = interaction.payload;\n \n-    if (!rectContainsPoint(location, this.frame)) {\n-      return; \/\/ Not scrolling on view\n-    }\n-\n-    const absDeltaY = Math.abs(deltaY);\n-    if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {\n-      return;\n+    \/\/ Vertical scrolling zooms in and out (unless the SHIFT modifier is used).\n+    \/\/ Horizontal scrolling pans.\n+    if (absDeltaY > absDeltaX) {\n+      if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {\n+        return;\n+      }\n+\n+      if (interaction.type === 'wheel-shift') {\n+        \/\/ Shift modifier is for scrolling, not zooming.\n+        return;\n+      }\n+\n+      const newState = zoomState({\n+        state: this._scrollState,\n+        multiplier: 1 + 0.005 * -deltaY,\n+        fixedPoint: location.x - this._scrollState.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+    } else {\n+      if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {\n+        return;\n+      }\n+\n+      const newState = translateState({\n+        state: this._scrollState,\n+        delta: -deltaX,\n+        containerLength: this.frame.size.width,\n+      });\n+      this._setStateAndInformCallbacksIfChanged(newState);\n     }\n-\n-    const newState = zoomState({\n-      state: this._scrollState,\n-      multiplier: 1 + 0.005 * -deltaY,\n-      fixedPoint: location.x - this._scrollState.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   }\n \n   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n@@ -273,12 +261,8 @@ export class HorizontalPanAndZoomView extends View {\n         this._handleMouseUp(interaction, viewRefs);\n         break;\n       case 'wheel-plain':\n-        this._handleWheelPlain(interaction);\n-        break;\n       case 'wheel-shift':\n-      case 'wheel-control':\n-      case 'wheel-meta':\n-        this._handleWheelZoom(interaction);\n+        this._handleWheel(interaction);\n         break;\n     }\n   }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableSplitView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableSplitView.js\ndeleted file mode 100644\nindex 177fe5f2c7..0000000000\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableSplitView.js\n+++ \/dev\/null\n@@ -1,339 +0,0 @@\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 {\n-  Interaction,\n-  MouseDownInteraction,\n-  MouseMoveInteraction,\n-  MouseUpInteraction,\n-} from '.\/useCanvasInteraction';\n-import type {Rect, Size} from '.\/geometry';\n-import type {ViewRefs} from '.\/Surface';\n-\n-import {COLORS} from '..\/content-views\/constants';\n-import nullthrows from 'nullthrows';\n-import {Surface} from '.\/Surface';\n-import {View} from '.\/View';\n-import {rectContainsPoint} from '.\/geometry';\n-import {layeredLayout, noopLayout} from '.\/layouter';\n-import {ColorView} from '.\/ColorView';\n-import {clamp} from '.\/utils\/clamp';\n-\n-type ResizeBarState = 'normal' | 'hovered' | 'dragging';\n-\n-type ResizingState = $ReadOnly<{|\n-  \/** Distance between top of resize bar and mouseY *\/\n-  cursorOffsetInBarFrame: number,\n-  \/** Mouse's vertical coordinates relative to canvas *\/\n-  mouseY: number,\n-|}>;\n-\n-type LayoutState = $ReadOnly<{|\n-  \/** Resize bar's vertical position relative to resize view's frame.origin.y *\/\n-  barOffsetY: number,\n-|}>;\n-\n-function getColorForBarState(state: ResizeBarState): string {\n-  switch (state) {\n-    case 'normal':\n-    case 'hovered':\n-    case 'dragging':\n-      return COLORS.REACT_RESIZE_BAR;\n-  }\n-  throw new Error(`Unknown resize bar state ${state}`);\n-}\n-\n-class ResizeBar extends View {\n-  _intrinsicContentSize: Size = {\n-    width: 0,\n-    height: 5,\n-  };\n-\n-  _interactionState: ResizeBarState = 'normal';\n-\n-  constructor(surface: Surface, frame: Rect) {\n-    super(surface, frame, layeredLayout);\n-    this.addSubview(new ColorView(surface, frame, ''));\n-    this._updateColor();\n-  }\n-\n-  desiredSize() {\n-    return this._intrinsicContentSize;\n-  }\n-\n-  _getColorView(): ColorView {\n-    return (this.subviews[0]: any);\n-  }\n-\n-  _updateColor() {\n-    this._getColorView().setColor(getColorForBarState(this._interactionState));\n-  }\n-\n-  _setInteractionState(state: ResizeBarState) {\n-    if (this._interactionState === state) {\n-      return;\n-    }\n-    this._interactionState = state;\n-    this._updateColor();\n-  }\n-\n-  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {\n-    const cursorInView = rectContainsPoint(\n-      interaction.payload.location,\n-      this.frame,\n-    );\n-    if (cursorInView) {\n-      this._setInteractionState('dragging');\n-      viewRefs.activeView = this;\n-    }\n-  }\n-\n-  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {\n-    const cursorInView = rectContainsPoint(\n-      interaction.payload.location,\n-      this.frame,\n-    );\n-\n-    if (cursorInView || viewRefs.activeView === this) {\n-      this.currentCursor = 'ns-resize';\n-    }\n-    if (cursorInView) {\n-      viewRefs.hoveredView = this;\n-    }\n-\n-    if (this._interactionState === 'dragging') {\n-      return;\n-    }\n-    this._setInteractionState(cursorInView ? 'hovered' : 'normal');\n-  }\n-\n-  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {\n-    const cursorInView = rectContainsPoint(\n-      interaction.payload.location,\n-      this.frame,\n-    );\n-    if (this._interactionState === 'dragging') {\n-      this._setInteractionState(cursorInView ? 'hovered' : 'normal');\n-    }\n-\n-    if (viewRefs.activeView === this) {\n-      viewRefs.activeView = null;\n-    }\n-  }\n-\n-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n-    switch (interaction.type) {\n-      case 'mousedown':\n-        this._handleMouseDown(interaction, viewRefs);\n-        return;\n-      case 'mousemove':\n-        this._handleMouseMove(interaction, viewRefs);\n-        return;\n-      case 'mouseup':\n-        this._handleMouseUp(interaction, viewRefs);\n-        return;\n-    }\n-  }\n-}\n-\n-export class ResizableSplitView extends View {\n-  _canvasRef: {current: HTMLCanvasElement | null};\n-  _resizingState: ResizingState | null = null;\n-  _layoutState: LayoutState;\n-\n-  constructor(\n-    surface: Surface,\n-    frame: Rect,\n-    topSubview: View,\n-    bottomSubview: View,\n-    canvasRef: {current: HTMLCanvasElement | null},\n-  ) {\n-    super(surface, frame, noopLayout);\n-\n-    this._canvasRef = canvasRef;\n-\n-    this.addSubview(topSubview);\n-    this.addSubview(new ResizeBar(surface, frame));\n-    this.addSubview(bottomSubview);\n-\n-    const topSubviewDesiredSize = topSubview.desiredSize();\n-    this._layoutState = {\n-      barOffsetY: topSubviewDesiredSize ? topSubviewDesiredSize.height : 0,\n-    };\n-  }\n-\n-  _getTopSubview(): View {\n-    return this.subviews[0];\n-  }\n-\n-  _getResizeBar(): View {\n-    return this.subviews[1];\n-  }\n-\n-  _getBottomSubview(): View {\n-    return this.subviews[2];\n-  }\n-\n-  _getResizeBarDesiredSize(): Size {\n-    return nullthrows(\n-      this._getResizeBar().desiredSize(),\n-      'Resize bar must have desired size',\n-    );\n-  }\n-\n-  desiredSize() {\n-    const topSubviewDesiredSize = this._getTopSubview().desiredSize();\n-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();\n-    const bottomSubviewDesiredSize = this._getBottomSubview().desiredSize();\n-\n-    const topSubviewDesiredWidth = topSubviewDesiredSize\n-      ? topSubviewDesiredSize.width\n-      : 0;\n-    const bottomSubviewDesiredWidth = bottomSubviewDesiredSize\n-      ? bottomSubviewDesiredSize.width\n-      : 0;\n-\n-    const topSubviewDesiredHeight = topSubviewDesiredSize\n-      ? topSubviewDesiredSize.height\n-      : 0;\n-    const bottomSubviewDesiredHeight = bottomSubviewDesiredSize\n-      ? bottomSubviewDesiredSize.height\n-      : 0;\n-\n-    return {\n-      width: Math.max(\n-        topSubviewDesiredWidth,\n-        resizeBarDesiredSize.width,\n-        bottomSubviewDesiredWidth,\n-      ),\n-      height:\n-        topSubviewDesiredHeight +\n-        resizeBarDesiredSize.height +\n-        bottomSubviewDesiredHeight,\n-    };\n-  }\n-\n-  layoutSubviews() {\n-    this._updateLayoutState();\n-    this._updateSubviewFrames();\n-    super.layoutSubviews();\n-  }\n-\n-  _updateLayoutState() {\n-    const {frame, visibleArea, _resizingState} = this;\n-\n-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();\n-    \/\/ Allow bar to travel to bottom of the visible area of this view but no further\n-    const maxPossibleBarOffset =\n-      visibleArea.size.height - resizeBarDesiredSize.height;\n-    const topSubviewDesiredSize = this._getTopSubview().desiredSize();\n-    const maxBarOffset = topSubviewDesiredSize\n-      ? Math.min(maxPossibleBarOffset, topSubviewDesiredSize.height)\n-      : maxPossibleBarOffset;\n-\n-    let proposedBarOffsetY = this._layoutState.barOffsetY;\n-    \/\/ Update bar offset if dragging bar\n-    if (_resizingState) {\n-      const {mouseY, cursorOffsetInBarFrame} = _resizingState;\n-      proposedBarOffsetY = mouseY - frame.origin.y - cursorOffsetInBarFrame;\n-    }\n-\n-    this._layoutState = {\n-      ...this._layoutState,\n-      barOffsetY: clamp(0, maxBarOffset, proposedBarOffsetY),\n-    };\n-  }\n-\n-  _updateSubviewFrames() {\n-    const {\n-      frame: {\n-        origin: {x, y},\n-        size: {width, height},\n-      },\n-      _layoutState: {barOffsetY},\n-    } = this;\n-\n-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();\n-\n-    let currentY = y;\n-\n-    this._getTopSubview().setFrame({\n-      origin: {x, y: currentY},\n-      size: {width, height: barOffsetY},\n-    });\n-    currentY += this._getTopSubview().frame.size.height;\n-\n-    this._getResizeBar().setFrame({\n-      origin: {x, y: currentY},\n-      size: {width, height: resizeBarDesiredSize.height},\n-    });\n-    currentY += this._getResizeBar().frame.size.height;\n-\n-    this._getBottomSubview().setFrame({\n-      origin: {x, y: currentY},\n-      \/\/ Fill remaining height\n-      size: {width, height: height + y - currentY},\n-    });\n-  }\n-\n-  _handleMouseDown(interaction: MouseDownInteraction) {\n-    const cursorLocation = interaction.payload.location;\n-    const resizeBarFrame = this._getResizeBar().frame;\n-    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {\n-      const mouseY = cursorLocation.y;\n-      this._resizingState = {\n-        cursorOffsetInBarFrame: mouseY - resizeBarFrame.origin.y,\n-        mouseY,\n-      };\n-    }\n-  }\n-\n-  _handleMouseMove(interaction: MouseMoveInteraction) {\n-    const {_resizingState} = this;\n-    if (_resizingState) {\n-      this._resizingState = {\n-        ..._resizingState,\n-        mouseY: interaction.payload.location.y,\n-      };\n-      this.setNeedsDisplay();\n-    }\n-  }\n-\n-  _handleMouseUp(interaction: MouseUpInteraction) {\n-    if (this._resizingState) {\n-      this._resizingState = null;\n-    }\n-  }\n-\n-  _didGrab: boolean = false;\n-\n-  getCursorActiveSubView(interaction: Interaction): View | null {\n-    const cursorLocation = interaction.payload.location;\n-    const resizeBarFrame = this._getResizeBar().frame;\n-    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {\n-      return this;\n-    } else {\n-      return null;\n-    }\n-  }\n-\n-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n-    switch (interaction.type) {\n-      case 'mousedown':\n-        this._handleMouseDown(interaction);\n-        return;\n-      case 'mousemove':\n-        this._handleMouseMove(interaction);\n-        return;\n-      case 'mouseup':\n-        this._handleMouseUp(interaction);\n-        return;\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\nnew file mode 100644\nindex 0000000000..54a3b05c1a\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\n@@ -0,0 +1,418 @@\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 {\n+  ClickInteraction,\n+  DoubleClickInteraction,\n+  Interaction,\n+  MouseDownInteraction,\n+  MouseMoveInteraction,\n+  MouseUpInteraction,\n+} from '.\/useCanvasInteraction';\n+import type {Rect} from '.\/geometry';\n+import type {ViewRefs} from '.\/Surface';\n+\n+import {BORDER_SIZE, COLORS} from '..\/content-views\/constants';\n+import {drawText} from '..\/content-views\/utils\/text';\n+import {Surface} from '.\/Surface';\n+import {View} from '.\/View';\n+import {intersectionOfRects, rectContainsPoint} from '.\/geometry';\n+import {noopLayout} from '.\/layouter';\n+import {clamp} from '.\/utils\/clamp';\n+\n+type ResizeBarState = 'normal' | 'hovered' | 'dragging';\n+\n+type ResizingState = $ReadOnly<{|\n+  \/** Distance between top of resize bar and mouseY *\/\n+  cursorOffsetInBarFrame: number,\n+  \/** Mouse's vertical coordinates relative to canvas *\/\n+  mouseY: number,\n+|}>;\n+\n+type LayoutState = $ReadOnly<{|\n+  \/** Resize bar's vertical position relative to resize view's frame.origin.y *\/\n+  barOffsetY: number,\n+|}>;\n+\n+const RESIZE_BAR_DOT_RADIUS = 1;\n+const RESIZE_BAR_DOT_SPACING = 4;\n+const RESIZE_BAR_HEIGHT = 8;\n+const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;\n+\n+const HIDDEN_RECT = {\n+  origin: {x: 0, y: 0},\n+  size: {width: 0, height: 0},\n+};\n+\n+class ResizeBar extends View {\n+  _interactionState: ResizeBarState = 'normal';\n+  _label: string;\n+\n+  showLabel: boolean = false;\n+\n+  constructor(surface: Surface, frame: Rect, label: string) {\n+    super(surface, frame, noopLayout);\n+\n+    this._label = label;\n+  }\n+\n+  desiredSize() {\n+    return this.showLabel\n+      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}\n+      : {height: RESIZE_BAR_HEIGHT, width: 0};\n+  }\n+\n+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {\n+    const {visibleArea} = this;\n+    const {x, y} = visibleArea.origin;\n+    const {width, height} = visibleArea.size;\n+\n+    const isActive =\n+      this._interactionState === 'dragging' ||\n+      (this._interactionState === 'hovered' && viewRefs.activeView === null);\n+\n+    context.fillStyle = isActive\n+      ? COLORS.REACT_RESIZE_BAR_ACTIVE\n+      : COLORS.REACT_RESIZE_BAR;\n+    context.fillRect(x, y, width, height);\n+\n+    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;\n+    context.fillRect(x, y, width, BORDER_SIZE);\n+    context.fillRect(x, y + height - BORDER_SIZE, width, BORDER_SIZE);\n+\n+    const horizontalCenter = x + width \/ 2;\n+    const verticalCenter = y + height \/ 2;\n+\n+    if (this.showLabel) {\n+      \/\/ When the resize view is collapsed entirely,\n+      \/\/ rather than showing a resize bar– this view displays a label.\n+      const labelRect: Rect = {\n+        origin: {\n+          x: 0,\n+          y: y + height - RESIZE_BAR_WITH_LABEL_HEIGHT,\n+        },\n+        size: {\n+          width: visibleArea.size.width,\n+          height: visibleArea.size.height,\n+        },\n+      };\n+\n+      const drawableRect = intersectionOfRects(labelRect, this.visibleArea);\n+\n+      drawText(\n+        this._label,\n+        context,\n+        labelRect,\n+        drawableRect,\n+        visibleArea.size.width,\n+        'center',\n+        COLORS.REACT_RESIZE_BAR_DOT,\n+      );\n+    } else {\n+      \/\/ Otherwise draw horizontally centered resize bar dots\n+      context.beginPath();\n+      context.fillStyle = COLORS.REACT_RESIZE_BAR_DOT;\n+      context.arc(\n+        horizontalCenter,\n+        verticalCenter,\n+        RESIZE_BAR_DOT_RADIUS,\n+        0,\n+        2 * Math.PI,\n+      );\n+      context.arc(\n+        horizontalCenter + RESIZE_BAR_DOT_SPACING,\n+        verticalCenter,\n+        RESIZE_BAR_DOT_RADIUS,\n+        0,\n+        2 * Math.PI,\n+      );\n+      context.arc(\n+        horizontalCenter - RESIZE_BAR_DOT_SPACING,\n+        verticalCenter,\n+        RESIZE_BAR_DOT_RADIUS,\n+        0,\n+        2 * Math.PI,\n+      );\n+      context.fill();\n+    }\n+  }\n+\n+  _setInteractionState(state: ResizeBarState) {\n+    if (this._interactionState === state) {\n+      return;\n+    }\n+    this._interactionState = state;\n+    this.setNeedsDisplay();\n+  }\n+\n+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {\n+    const cursorInView = rectContainsPoint(\n+      interaction.payload.location,\n+      this.frame,\n+    );\n+    if (cursorInView) {\n+      this._setInteractionState('dragging');\n+      viewRefs.activeView = this;\n+    }\n+  }\n+\n+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {\n+    const cursorInView = rectContainsPoint(\n+      interaction.payload.location,\n+      this.frame,\n+    );\n+\n+    if (viewRefs.activeView === this) {\n+      \/\/ If we're actively dragging this resize bar,\n+      \/\/ show the cursor even if the pointer isn't hovering over this view.\n+      this.currentCursor = 'ns-resize';\n+    } else if (cursorInView) {\n+      if (this.showLabel) {\n+        this.currentCursor = 'pointer';\n+      } else {\n+        this.currentCursor = 'ns-resize';\n+      }\n+    }\n+\n+    if (cursorInView) {\n+      viewRefs.hoveredView = this;\n+    }\n+\n+    if (this._interactionState === 'dragging') {\n+      return;\n+    }\n+    this._setInteractionState(cursorInView ? 'hovered' : 'normal');\n+  }\n+\n+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {\n+    const cursorInView = rectContainsPoint(\n+      interaction.payload.location,\n+      this.frame,\n+    );\n+    if (this._interactionState === 'dragging') {\n+      this._setInteractionState(cursorInView ? 'hovered' : 'normal');\n+    }\n+\n+    if (viewRefs.activeView === this) {\n+      viewRefs.activeView = null;\n+    }\n+  }\n+\n+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n+    switch (interaction.type) {\n+      case 'mousedown':\n+        this._handleMouseDown(interaction, viewRefs);\n+        return;\n+      case 'mousemove':\n+        this._handleMouseMove(interaction, viewRefs);\n+        return;\n+      case 'mouseup':\n+        this._handleMouseUp(interaction, viewRefs);\n+        return;\n+    }\n+  }\n+}\n+\n+export class ResizableView extends View {\n+  _canvasRef: {current: HTMLCanvasElement | null};\n+  _layoutState: LayoutState;\n+  _resizeBar: ResizeBar;\n+  _resizingState: ResizingState | null = null;\n+  _subview: View;\n+\n+  constructor(\n+    surface: Surface,\n+    frame: Rect,\n+    subview: View,\n+    canvasRef: {current: HTMLCanvasElement | null},\n+    label: string,\n+  ) {\n+    super(surface, frame, noopLayout);\n+\n+    this._canvasRef = canvasRef;\n+\n+    this._subview = subview;\n+    this._resizeBar = new ResizeBar(surface, frame, label);\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+  }\n+\n+  desiredSize() {\n+    const resizeBarDesiredSize = this._resizeBar.desiredSize();\n+\n+    return {\n+      width: this.frame.size.width,\n+      height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,\n+    };\n+  }\n+\n+  layoutSubviews() {\n+    this._updateLayoutState();\n+    this._updateSubviewFrames();\n+\n+    super.layoutSubviews();\n+  }\n+\n+  _updateLayoutStateAndResizeBar(barOffsetY: number) {\n+    if (barOffsetY <= RESIZE_BAR_WITH_LABEL_HEIGHT - RESIZE_BAR_HEIGHT) {\n+      barOffsetY = 0;\n+    }\n+\n+    this._layoutState = {\n+      ...this._layoutState,\n+      barOffsetY,\n+    };\n+\n+    this._resizeBar.showLabel = barOffsetY === 0;\n+  }\n+\n+  _updateLayoutState() {\n+    const {frame, _resizingState} = this;\n+\n+    \/\/ Allow bar to travel to bottom of the visible area of this view but no further\n+    const subviewDesiredSize = this._subview.desiredSize();\n+    const maxBarOffset = subviewDesiredSize.height;\n+\n+    let proposedBarOffsetY = this._layoutState.barOffsetY;\n+    \/\/ Update bar offset if dragging bar\n+    if (_resizingState) {\n+      const {mouseY, cursorOffsetInBarFrame} = _resizingState;\n+      proposedBarOffsetY = mouseY - frame.origin.y - cursorOffsetInBarFrame;\n+    }\n+\n+    this._updateLayoutStateAndResizeBar(\n+      clamp(0, maxBarOffset, proposedBarOffsetY),\n+    );\n+  }\n+\n+  _updateSubviewFrames() {\n+    const {\n+      frame: {\n+        origin: {x, y},\n+        size: {width},\n+      },\n+      _layoutState: {barOffsetY},\n+    } = this;\n+\n+    const resizeBarDesiredSize = this._resizeBar.desiredSize();\n+\n+    if (barOffsetY === 0) {\n+      this._subview.setFrame(HIDDEN_RECT);\n+    } else {\n+      this._subview.setFrame({\n+        origin: {x, y},\n+        size: {width, height: barOffsetY},\n+      });\n+    }\n+\n+    this._resizeBar.setFrame({\n+      origin: {x, y: y + barOffsetY},\n+      size: {width, height: resizeBarDesiredSize.height},\n+    });\n+  }\n+\n+  _handleClick(interaction: ClickInteraction) {\n+    const cursorInView = rectContainsPoint(\n+      interaction.payload.location,\n+      this.frame,\n+    );\n+    if (cursorInView) {\n+      if (this._layoutState.barOffsetY === 0) {\n+        \/\/ Clicking on the collapsed label should expand.\n+        const subviewDesiredSize = this._subview.desiredSize();\n+        this._updateLayoutStateAndResizeBar(subviewDesiredSize.height);\n+        this.setNeedsDisplay();\n+      }\n+    }\n+  }\n+\n+  _handleDoubleClick(interaction: DoubleClickInteraction) {\n+    const cursorInView = rectContainsPoint(\n+      interaction.payload.location,\n+      this.frame,\n+    );\n+    if (cursorInView) {\n+      if (this._layoutState.barOffsetY > 0) {\n+        \/\/ Double clicking on the expanded view should collapse.\n+        this._updateLayoutStateAndResizeBar(0);\n+        this.setNeedsDisplay();\n+      }\n+    }\n+  }\n+\n+  _handleMouseDown(interaction: MouseDownInteraction) {\n+    const cursorLocation = interaction.payload.location;\n+    const resizeBarFrame = this._resizeBar.frame;\n+    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {\n+      const mouseY = cursorLocation.y;\n+      this._resizingState = {\n+        cursorOffsetInBarFrame: mouseY - resizeBarFrame.origin.y,\n+        mouseY,\n+      };\n+    }\n+  }\n+\n+  _handleMouseMove(interaction: MouseMoveInteraction) {\n+    const {_resizingState} = this;\n+    if (_resizingState) {\n+      this._resizingState = {\n+        ..._resizingState,\n+        mouseY: interaction.payload.location.y,\n+      };\n+      this.setNeedsDisplay();\n+    }\n+  }\n+\n+  _handleMouseUp(interaction: MouseUpInteraction) {\n+    if (this._resizingState) {\n+      this._resizingState = null;\n+    }\n+  }\n+\n+  getCursorActiveSubView(interaction: Interaction): View | null {\n+    const cursorLocation = interaction.payload.location;\n+    const resizeBarFrame = this._resizeBar.frame;\n+    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {\n+      return this;\n+    } else {\n+      return null;\n+    }\n+  }\n+\n+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n+    switch (interaction.type) {\n+      case 'click':\n+        this._handleClick(interaction);\n+        return;\n+      case 'double-click':\n+        this._handleDoubleClick(interaction);\n+        return;\n+      case 'mousedown':\n+        this._handleMouseDown(interaction);\n+        return;\n+      case 'mousemove':\n+        this._handleMouseMove(interaction);\n+        return;\n+      case 'mouseup':\n+        this._handleMouseUp(interaction);\n+        return;\n+    }\n+  }\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js\nindex 074cc0296f..6cdaff1c6e 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js\n@@ -92,7 +92,7 @@ export class Surface {\n       origin: zeroPoint,\n       size: _canvasSize,\n     });\n-    rootView.displayIfNeeded(_context);\n+    rootView.displayIfNeeded(_context, this._viewRefs);\n   }\n \n   getCurrentCursor(): string | null {\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollOverflowView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollOverflowView.js\nnew file mode 100644\nindex 0000000000..7ddf6c1842\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollOverflowView.js\n@@ -0,0 +1,3 @@\n+\/\/ TODO Vertically stack views (via verticallyStackedLayout).\n+\/\/ If stacked views are taller than the available height, a vertical scrollbar will be shown on the side,\n+\/\/ and width will be adjusted to subtract the width of the scrollbar.\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 b01f33a9ca..245b53aff7 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@@ -12,10 +12,11 @@ import type {\n   MouseDownInteraction,\n   MouseMoveInteraction,\n   MouseUpInteraction,\n-  WheelPlainInteraction,\n+  WheelWithShiftInteraction,\n } from '.\/useCanvasInteraction';\n import type {Rect} from '.\/geometry';\n import type {ScrollState} from '.\/utils\/scrollState';\n+import type {ViewRefs} from '.\/Surface';\n \n import {Surface} from '.\/Surface';\n import {View} from '.\/View';\n@@ -26,6 +27,11 @@ import {\n   translateState,\n } from '.\/utils\/scrollState';\n import {MOVE_WHEEL_DELTA_THRESHOLD} from '.\/constants';\n+import {COLORS} from '..\/content-views\/constants';\n+\n+const CARET_MARGIN = 3;\n+const CARET_WIDTH = 5;\n+const CARET_HEIGHT = 3;\n \n export class VerticalScrollView extends View {\n   _scrollState: ScrollState = {offset: 0, length: 0};\n@@ -48,6 +54,54 @@ export class VerticalScrollView extends View {\n     return this._contentView.desiredSize();\n   }\n \n+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {\n+    super.draw(context, viewRefs);\n+\n+    \/\/ Show carets if there's scroll overflow above or below the viewable area.\n+    if (this.frame.size.height > CARET_HEIGHT * 2 + CARET_MARGIN * 3) {\n+      const offset = this._scrollState.offset;\n+      const desiredSize = this._contentView.desiredSize();\n+\n+      const above = offset;\n+      const below = this.frame.size.height - desiredSize.height - offset;\n+\n+      if (above < 0 || below < 0) {\n+        const {visibleArea} = this;\n+        const {x, y} = visibleArea.origin;\n+        const {width, height} = visibleArea.size;\n+        const horizontalCenter = x + width \/ 2;\n+\n+        const halfWidth = CARET_WIDTH;\n+        const left = horizontalCenter + halfWidth;\n+        const right = horizontalCenter - halfWidth;\n+\n+        if (above < 0) {\n+          const topY = y + CARET_MARGIN;\n+\n+          context.beginPath();\n+          context.moveTo(horizontalCenter, topY);\n+          context.lineTo(left, topY + CARET_HEIGHT);\n+          context.lineTo(right, topY + CARET_HEIGHT);\n+          context.closePath();\n+          context.fillStyle = COLORS.SCROLL_CARET;\n+          context.fill();\n+        }\n+\n+        if (below < 0) {\n+          const bottomY = y + height - CARET_MARGIN;\n+\n+          context.beginPath();\n+          context.moveTo(horizontalCenter, bottomY);\n+          context.lineTo(left, bottomY - CARET_HEIGHT);\n+          context.lineTo(right, bottomY - CARET_HEIGHT);\n+          context.closePath();\n+          context.fillStyle = COLORS.SCROLL_CARET;\n+          context.fill();\n+        }\n+      }\n+    }\n+  }\n+\n   \/**\n    * Reference to the content view. This view is also the only view in\n    * `this.subviews`.\n@@ -103,7 +157,7 @@ export class VerticalScrollView extends View {\n     }\n   }\n \n-  _handleWheelPlain(interaction: WheelPlainInteraction) {\n+  _handleWheelShift(interaction: WheelWithShiftInteraction) {\n     const {\n       location,\n       delta: {deltaX, deltaY},\n@@ -141,8 +195,8 @@ export class VerticalScrollView extends View {\n       case 'mouseup':\n         this._handleMouseUp(interaction);\n         break;\n-      case 'wheel-plain':\n-        this._handleWheelPlain(interaction);\n+      case 'wheel-shift':\n+        this._handleWheelShift(interaction);\n         break;\n     }\n   }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\nindex e3461c1053..a43a733fd4 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\n@@ -8,7 +8,7 @@\n  *\/\n \n import type {Interaction} from '.\/useCanvasInteraction';\n-import type {Rect, Size} from '.\/geometry';\n+import type {Rect, Size, SizeWithMaxHeight} from '.\/geometry';\n import type {Layouter} from '.\/layouter';\n import type {ViewRefs} from '.\/Surface';\n \n@@ -140,7 +140,7 @@ export class View {\n    *\n    * Can be overridden by subclasses.\n    *\/\n-  desiredSize(): ?Size {\n+  desiredSize(): Size | SizeWithMaxHeight {\n     if (this._needsDisplay) {\n       this.layoutSubviews();\n     }\n@@ -186,7 +186,7 @@ export class View {\n    * 1. Lays out subviews with `layoutSubviews`.\n    * 2. Draws content with `draw`.\n    *\/\n-  displayIfNeeded(context: CanvasRenderingContext2D) {\n+  displayIfNeeded(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {\n     if (\n       (this._needsDisplay || this._subviewsNeedDisplay) &&\n       rectIntersectsRect(this.frame, this.visibleArea) &&\n@@ -195,7 +195,7 @@ export class View {\n       this.layoutSubviews();\n       if (this._needsDisplay) this._needsDisplay = false;\n       if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;\n-      this.draw(context);\n+      this.draw(context, viewRefs);\n     }\n   }\n \n@@ -239,11 +239,11 @@ export class View {\n    *\n    * @see displayIfNeeded\n    *\/\n-  draw(context: CanvasRenderingContext2D) {\n+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {\n     const {subviews, visibleArea} = this;\n     subviews.forEach(subview => {\n       if (rectIntersectsRect(visibleArea, subview.visibleArea)) {\n-        subview.displayIfNeeded(context);\n+        subview.displayIfNeeded(context, viewRefs);\n       }\n     });\n   }\n@@ -252,10 +252,9 @@ export class View {\n    * Handle an `interaction`.\n    *\n    * To be overwritten by subclasses that wish to handle interactions.\n+   *\n+   * NOTE: Do not call directly! Use `handleInteractionAndPropagateToSubviews`\n    *\/\n-  \/\/ Internal note: Do not call directly! Use\n-  \/\/ `handleInteractionAndPropagateToSubviews` so that interactions are\n-  \/\/ propagated to subviews.\n   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {}\n \n   \/**\n@@ -272,9 +271,18 @@ export class View {\n     interaction: Interaction,\n     viewRefs: ViewRefs,\n   ) {\n+    const {subviews, visibleArea} = this;\n+\n+    if (visibleArea.size.height === 0) {\n+      return;\n+    }\n+\n     this.handleInteraction(interaction, viewRefs);\n-    this.subviews.forEach(subview =>\n-      subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs),\n-    );\n+\n+    subviews.forEach(subview => {\n+      if (rectIntersectsRect(visibleArea, subview.visibleArea)) {\n+        subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs);\n+      }\n+    });\n   }\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\nindex b027b708f0..49c0d3981e 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\n@@ -9,6 +9,10 @@\n \n export type Point = $ReadOnly<{|x: number, y: number|}>;\n export type Size = $ReadOnly<{|width: number, height: number|}>;\n+export type SizeWithMaxHeight = {|\n+  ...Size,\n+  maxInitialHeight?: number,\n+|};\n export type Rect = $ReadOnly<{|origin: Point, size: Size|}>;\n \n \/**\n@@ -70,6 +74,15 @@ function boxToRect(box: Box): Rect {\n }\n \n export function rectIntersectsRect(rect1: Rect, rect2: Rect): boolean {\n+  if (\n+    rect1.size.width === 0 ||\n+    rect1.size.height === 0 ||\n+    rect2.size.width === 0 ||\n+    rect2.size.height === 0\n+  ) {\n+    return false;\n+  }\n+\n   const [top1, right1, bottom1, left1] = rectToBox(rect1);\n   const [top2, right2, bottom2, left2] = rectToBox(rect2);\n   return !(\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/index.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/index.js\nindex 9d432bed57..b5455ce249 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/index.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/index.js\n@@ -7,9 +7,9 @@\n  * @flow\n  *\/\n \n-export * from '.\/ColorView';\n+export * from '.\/BackgroundColorView';\n export * from '.\/HorizontalPanAndZoomView';\n-export * from '.\/ResizableSplitView';\n+export * from '.\/ResizableView';\n export * from '.\/Surface';\n export * from '.\/VerticalScrollView';\n export * from '.\/View';\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/layouter.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/layouter.js\nindex ca5ba1ebfd..58adb026c2 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/layouter.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/layouter.js\n@@ -43,8 +43,7 @@ export function collapseLayoutIntoViews(layout: Layout) {\n export const noopLayout: Layouter = layout => layout;\n \n \/**\n- * Layer views on top of each other. All views' frames will be set to\n- * `containerFrame`.\n+ * Layer views on top of each other. All views' frames will be set to `containerFrame`.\n  *\n  * Equivalent to composing:\n  * - `alignToContainerXLayout`,\n@@ -52,12 +51,13 @@ export const noopLayout: Layouter = layout => layout;\n  * - `containerWidthLayout`, and\n  * - `containerHeightLayout`.\n  *\/\n-export const layeredLayout: Layouter = (layout, containerFrame) =>\n-  layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame}));\n+export const layeredLayout: Layouter = (layout, containerFrame) => {\n+  return layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame}));\n+};\n \n \/**\n- * Stacks `views` vertically in `frame`. All views in `views` will have their\n- * widths set to the frame's width.\n+ * Stacks `views` vertically in `frame`.\n+ * All views in `views` will have their widths set to the frame's width.\n  *\/\n export const verticallyStackedLayout: Layouter = (layout, containerFrame) => {\n   let currentY = containerFrame.origin.y;\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/useCanvasInteraction.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/useCanvasInteraction.js\nindex 3b374aebbe..f22d8d7211 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/useCanvasInteraction.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/useCanvasInteraction.js\n@@ -10,9 +10,23 @@\n import type {NormalizedWheelDelta} from '.\/utils\/normalizeWheel';\n import type {Point} from '.\/geometry';\n \n-import {useEffect} from 'react';\n+import {useEffect, useRef} from 'react';\n import {normalizeWheel} from '.\/utils\/normalizeWheel';\n \n+export type ClickInteraction = {|\n+  type: 'click',\n+  payload: {|\n+    event: MouseEvent,\n+    location: Point,\n+  |},\n+|};\n+export type DoubleClickInteraction = {|\n+  type: 'double-click',\n+  payload: {|\n+    event: MouseEvent,\n+    location: Point,\n+  |},\n+|};\n export type MouseDownInteraction = {|\n   type: 'mousedown',\n   payload: {|\n@@ -68,6 +82,8 @@ export type WheelWithMetaInteraction = {|\n |};\n \n export type Interaction =\n+  | ClickInteraction\n+  | DoubleClickInteraction\n   | MouseDownInteraction\n   | MouseMoveInteraction\n   | MouseUpInteraction\n@@ -99,6 +115,9 @@ export function useCanvasInteraction(\n   canvasRef: {|current: HTMLCanvasElement | null|},\n   interactor: (interaction: Interaction) => void,\n ) {\n+  const isMouseDownRef = useRef(false);\n+  const didMouseMoveWhileDownRef = useRef(false);\n+\n   useEffect(() => {\n     const canvas = canvasRef.current;\n     if (!canvas) {\n@@ -113,7 +132,38 @@ export function useCanvasInteraction(\n       };\n     }\n \n+    const onCanvasClick: MouseEventHandler = event => {\n+      if (didMouseMoveWhileDownRef.current) {\n+        return;\n+      }\n+\n+      interactor({\n+        type: 'click',\n+        payload: {\n+          event,\n+          location: localToCanvasCoordinates({x: event.x, y: event.y}),\n+        },\n+      });\n+    };\n+\n+    const onCanvasDoubleClick: MouseEventHandler = event => {\n+      if (didMouseMoveWhileDownRef.current) {\n+        return;\n+      }\n+\n+      interactor({\n+        type: 'double-click',\n+        payload: {\n+          event,\n+          location: localToCanvasCoordinates({x: event.x, y: event.y}),\n+        },\n+      });\n+    };\n+\n     const onCanvasMouseDown: MouseEventHandler = event => {\n+      didMouseMoveWhileDownRef.current = false;\n+      isMouseDownRef.current = true;\n+\n       interactor({\n         type: 'mousedown',\n         payload: {\n@@ -124,6 +174,10 @@ export function useCanvasInteraction(\n     };\n \n     const onDocumentMouseMove: MouseEventHandler = event => {\n+      if (isMouseDownRef.current) {\n+        didMouseMoveWhileDownRef.current = true;\n+      }\n+\n       interactor({\n         type: 'mousemove',\n         payload: {\n@@ -134,6 +188,8 @@ export function useCanvasInteraction(\n     };\n \n     const onDocumentMouseUp: MouseEventHandler = event => {\n+      isMouseDownRef.current = false;\n+\n       interactor({\n         type: 'mouseup',\n         payload: {\n@@ -179,6 +235,8 @@ export function useCanvasInteraction(\n     ownerDocument.addEventListener('mousemove', onDocumentMouseMove);\n     ownerDocument.addEventListener('mouseup', onDocumentMouseUp);\n \n+    canvas.addEventListener('click', onCanvasClick);\n+    canvas.addEventListener('dblclick', onCanvasDoubleClick);\n     canvas.addEventListener('mousedown', onCanvasMouseDown);\n     canvas.addEventListener('wheel', onCanvasWheel);\n \n@@ -186,6 +244,8 @@ export function useCanvasInteraction(\n       ownerDocument.removeEventListener('mousemove', onDocumentMouseMove);\n       ownerDocument.removeEventListener('mouseup', onDocumentMouseUp);\n \n+      canvas.removeEventListener('click', onCanvasClick);\n+      canvas.removeEventListener('dblclick', onCanvasDoubleClick);\n       canvas.removeEventListener('mousedown', onCanvasMouseDown);\n       canvas.removeEventListener('wheel', onCanvasWheel);\n     };\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\nindex 17027f6a0c..f7c6975520 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -45,20 +45,21 @@ function Profiler(_: {||}) {\n \n   const {supportsSchedulingProfiler} = useContext(StoreContext);\n \n-  let showRightColumn = true;\n+  let isLegacyProfilerSelected = false;\n \n   let view = null;\n   if (didRecordCommits || selectedTabID === 'scheduling-profiler') {\n     switch (selectedTabID) {\n       case 'flame-chart':\n+        isLegacyProfilerSelected = true;\n         view = ;\n         break;\n       case 'ranked-chart':\n+        isLegacyProfilerSelected = true;\n         view = ;\n         break;\n       case 'scheduling-profiler':\n         view = ;\n-        showRightColumn = false;\n         break;\n       default:\n         break;\n@@ -119,7 +120,7 @@ function Profiler(_: {||}) {\n             \n             \n             \n-            {didRecordCommits && (\n+            {isLegacyProfilerSelected && didRecordCommits && (\n               \n                 \n                 \n@@ -131,7 +132,9 @@ function Profiler(_: {||}) {\n             \n           <\/div>\n         <\/div>\n-        {showRightColumn && {sidebar}<\/div>}\n+        {isLegacyProfilerSelected && (\n+          {sidebar}<\/div>\n+        )}\n         \n       <\/div>\n     <\/SettingsModalContextController>\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\nindex 3206fcb28f..d5e43dc6a3 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ProfilerContext.js\n@@ -212,7 +212,10 @@ function ProfilerContextController({children}: Props) {\n   const [selectedCommitIndex, selectCommitIndex] = useState(\n     null,\n   );\n-  const [selectedTabID, selectTab] = useState('flame-chart');\n+  const [selectedTabID, selectTab] = useLocalStorage(\n+    'React::DevTools::Profiler::defaultTab',\n+    'flame-chart',\n+  );\n \n   if (isProfiling) {\n     batchedUpdates(() => {\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex e3fbec773d..ce4e68628f 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -412,6 +412,9 @@ export function updateThemeVariables(\n   updateStyleHelper(theme, 'color-record-hover', documentElements);\n   updateStyleHelper(theme, 'color-record-inactive', documentElements);\n   updateStyleHelper(theme, 'color-resize-bar', documentElements);\n+  updateStyleHelper(theme, 'color-resize-bar-active', documentElements);\n+  updateStyleHelper(theme, 'color-resize-bar-border', documentElements);\n+  updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);\n   updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);\n   updateStyleHelper(theme, 'color-color-scroll-track', documentElements);\n   updateStyleHelper(theme, 'color-search-match', documentElements);\n@@ -431,21 +434,6 @@ export function updateThemeVariables(\n     'color-scheduling-profiler-native-event-hover',\n     documentElements,\n   );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-native-event-warning',\n-    documentElements,\n-  );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-native-event-warning-hover',\n-    documentElements,\n-  );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-native-event-warning-text',\n-    documentElements,\n-  );\n   updateStyleHelper(\n     theme,\n     'color-selected-tree-highlight-active',\n@@ -481,11 +469,6 @@ export function updateThemeVariables(\n     'color-scheduling-profiler-react-idle',\n     documentElements,\n   );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-react-idle-selected',\n-    documentElements,\n-  );\n   updateStyleHelper(\n     theme,\n     'color-scheduling-profiler-react-idle-hover',\n@@ -496,11 +479,6 @@ export function updateThemeVariables(\n     'color-scheduling-profiler-react-render',\n     documentElements,\n   );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-react-render-selected',\n-    documentElements,\n-  );\n   updateStyleHelper(\n     theme,\n     'color-scheduling-profiler-react-render-hover',\n@@ -511,11 +489,6 @@ export function updateThemeVariables(\n     'color-scheduling-profiler-react-commit',\n     documentElements,\n   );\n-  updateStyleHelper(\n-    theme,\n-    'color-scheduling-profiler-react-commit-selected',\n-    documentElements,\n-  );\n   updateStyleHelper(\n     theme,\n     'color-scheduling-profiler-react-commit-hover',\n@@ -528,57 +501,57 @@ export function updateThemeVariables(\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-layout-effects-selected',\n+    'color-scheduling-profiler-react-layout-effects-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-layout-effects-hover',\n+    'color-scheduling-profiler-react-passive-effects',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-passive-effects',\n+    'color-scheduling-profiler-react-passive-effects-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-passive-effects-selected',\n+    'color-scheduling-profiler-react-schedule',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-passive-effects-hover',\n+    'color-scheduling-profiler-react-schedule-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-schedule',\n+    'color-scheduling-profiler-react-suspense-rejected-event',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-schedule-hover',\n+    'color-scheduling-profiler-react-suspense-rejected-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-schedule-cascading',\n+    'color-scheduling-profiler-react-suspense-resolved',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-schedule-cascading-hover',\n+    'color-scheduling-profiler-react-suspense-resolved-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-suspend',\n+    'color-scheduling-profiler-react-suspense-unresolved',\n     documentElements,\n   );\n   updateStyleHelper(\n     theme,\n-    'color-scheduling-profiler-react-suspend-hover',\n+    'color-scheduling-profiler-react-suspense-unresolved-hover',\n     documentElements,\n   );\n   updateStyleHelper(\n@@ -586,6 +559,7 @@ export function updateThemeVariables(\n     'color-scheduling-profiler-react-work-border',\n     documentElements,\n   );\n+  updateStyleHelper(theme, 'color-scroll-caret', documentElements);\n   updateStyleHelper(theme, 'color-shadow', documentElements);\n   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);\n   updateStyleHelper(theme, 'color-text', documentElements);\n@@ -597,6 +571,14 @@ export function updateThemeVariables(\n   updateStyleHelper(theme, 'color-toggle-text', documentElements);\n   updateStyleHelper(theme, 'color-tooltip-background', documentElements);\n   updateStyleHelper(theme, 'color-tooltip-text', documentElements);\n+  updateStyleHelper(theme, 'color-warning-background', documentElements);\n+  updateStyleHelper(theme, 'color-warning-background-hover', documentElements);\n+  updateStyleHelper(theme, 'color-warning-text-color', documentElements);\n+  updateStyleHelper(\n+    theme,\n+    'color-warning-text-color-inverted',\n+    documentElements,\n+  );\n \n   \/\/ Font smoothing varies based on the theme.\n   updateStyleHelper(theme, 'font-smoothing', documentElements);\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\nindex 608c660293..c195710a42 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\n@@ -91,7 +91,7 @@ export default function TabBar({\n     \n       {tabs.map(tab => {\n         if (tab === null) {\n-          return ;\n+          return ;\n         }\n \n         const {icon, id, label, title} = tab;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\nindex 7d69b4536a..e35a1c6467 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n@@ -77,46 +77,43 @@\n   --light-color-record-active: #fc3a4b;\n   --light-color-record-hover: #3578e5;\n   --light-color-record-inactive: #0088fa;\n-  --light-color-resize-bar: #cccccc;\n+  --light-color-resize-bar: #eeeeee;\n+  --light-color-resize-bar-active: #dcdcdc;\n+  --light-color-resize-bar-border: #d1d1d1;\n+  --light-color-resize-bar-dot: #333333;\n   --light-color-scheduling-profiler-native-event: #ccc;\n   --light-color-scheduling-profiler-native-event-hover: #aaa;\n-  --light-color-scheduling-profiler-native-event-warning: #ee1638;\n-  --light-color-scheduling-profiler-native-event-warning-hover: #da1030;\n-  --light-color-scheduling-profiler-native-event-warning-text: #fff;\n   --light-color-scheduling-profiler-priority-background: #f6f6f6;\n   --light-color-scheduling-profiler-priority-border: #eeeeee;\n   --light-color-scheduling-profiler-user-timing: #c9cacd;\n-  --light-color-scheduling-profiler-user-timing-hover:#93959a;\n-  --light-color-scheduling-profiler-react-idle: #edf6ff;\n-  --light-color-scheduling-profiler-react-idle-selected:#EDF6FF;\n-  --light-color-scheduling-profiler-react-idle-hover:#EDF6FF;\n+  --light-color-scheduling-profiler-user-timing-hover: #93959a;\n+  --light-color-scheduling-profiler-react-idle: #d3e5f6;\n+  --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;\n   --light-color-scheduling-profiler-react-render: #9fc3f3;\n-  --light-color-scheduling-profiler-react-render-selected:#64A9F5;\n-  --light-color-scheduling-profiler-react-render-hover:#2683E2;\n-  --light-color-scheduling-profiler-react-commit: #ff718e;\n-  --light-color-scheduling-profiler-react-commit-selected:#FF5277;\n-  --light-color-scheduling-profiler-react-commit-hover:#ed0030;\n-  --light-color-scheduling-profiler-react-layout-effects:#c88ff0;\n-  --light-color-scheduling-profiler-react-layout-effects-selected:#934FC1;\n-  --light-color-scheduling-profiler-react-layout-effects-hover:#601593;\n-  --light-color-scheduling-profiler-react-passive-effects:#c88ff0;\n-  --light-color-scheduling-profiler-react-passive-effects-selected:#934FC1;\n-  --light-color-scheduling-profiler-react-passive-effects-hover:#601593;\n+  --light-color-scheduling-profiler-react-render-hover: #83afe9;\n+  --light-color-scheduling-profiler-react-commit: #c88ff0;\n+  --light-color-scheduling-profiler-react-commit-hover: #b281d6;\n+  --light-color-scheduling-profiler-react-layout-effects: #b281d6;\n+  --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;\n+  --light-color-scheduling-profiler-react-passive-effects: #b281d6;\n+  --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;\n   --light-color-scheduling-profiler-react-schedule: #9fc3f3;\n-  --light-color-scheduling-profiler-react-schedule-hover:#2683E2;\n-  --light-color-scheduling-profiler-react-schedule-cascading:#ff718e;\n-  --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;\n-  --light-color-scheduling-profiler-react-suspend: #a6e59f;\n-  --light-color-scheduling-profiler-react-suspend-hover:#13bc00;\n+  --light-color-scheduling-profiler-react-schedule-hover: #2683E2;\n+  --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;\n+  --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;\n+  --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;\n+  --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;\n+  --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;\n+  --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;\n   --light-color-scheduling-profiler-text-color: #000000;\n-  --light-color-scheduling-profiler-react-work-border:#ffffff;\n+  --light-color-scheduling-profiler-react-work-border: #ffffff;\n   --light-color-scroll-thumb: #c2c2c2;\n   --light-color-scroll-track: #fafafa;\n   --light-color-search-match: yellow;\n   --light-color-search-match-current: #f7923b;\n   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);\n   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);\n-  --light-color-shadow: rgba(0, 0, 0, 0.25);\n+  --light-color-scroll-caret: rgba(150, 150, 150, 0.5);\n   --light-color-tab-selected-border: #0088fa;\n   --light-color-text: #000000;\n   --light-color-text-invalid: #ff0000;\n@@ -127,6 +124,10 @@\n   --light-color-toggle-text: #ffffff;\n   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);\n   --light-color-tooltip-text: #ffffff;\n+  --light-color-warning-background: #fb3655;\n+  --light-color-warning-background-hover: #f82042;\n+  --light-color-warning-text-color: #ffffff;\n+  --light-color-warning-text-color-inverted: #fd4d69;\n \n   \/* Dark theme *\/\n   --dark-color-attribute-name: #9d87d2;\n@@ -202,45 +203,43 @@\n   --dark-color-record-active: #fc3a4b;\n   --dark-color-record-hover: #a2e9fc;\n   --dark-color-record-inactive: #61dafb;\n-  --dark-color-resize-bar: #3d424a;\n+  --dark-color-resize-bar: #282c34;\n+  --dark-color-resize-bar-active: #31363f;\n+  --dark-color-resize-bar-border: #3d424a;\n+  --dark-color-resize-bar-dot: #cfd1d5;\n   --dark-color-scheduling-profiler-native-event: #b2b2b2;\n   --dark-color-scheduling-profiler-native-event-hover: #949494;\n-  --dark-color-scheduling-profiler-native-event-warning: #ee1638;\n-  --dark-color-scheduling-profiler-native-event-warning-hover: #da1030;\n-  --dark-color-scheduling-profiler-native-event-warning-text: #fff;\n   --dark-color-scheduling-profiler-priority-background: #1d2129;\n   --dark-color-scheduling-profiler-priority-border: #282c34;\n   --dark-color-scheduling-profiler-user-timing: #c9cacd;\n-  --dark-color-scheduling-profiler-user-timing-hover:#93959a;\n+  --dark-color-scheduling-profiler-user-timing-hover: #93959a;\n   --dark-color-scheduling-profiler-react-idle: #3d485b;\n-  --dark-color-scheduling-profiler-react-idle-selected:#465269;\n-  --dark-color-scheduling-profiler-react-idle-hover:#465269;\n-  --dark-color-scheduling-profiler-react-render: #9fc3f3;\n-  --dark-color-scheduling-profiler-react-render-selected:#64A9F5;\n-  --dark-color-scheduling-profiler-react-render-hover:#2683E2;\n-  --dark-color-scheduling-profiler-react-commit: #ff718e;\n-  --dark-color-scheduling-profiler-react-commit-selected:#FF5277;\n-  --dark-color-scheduling-profiler-react-commit-hover:#ed0030;\n-  --dark-color-scheduling-profiler-react-layout-effects:#c88ff0;\n-  --dark-color-scheduling-profiler-react-layout-effects-selected:#934FC1;\n-  --dark-color-scheduling-profiler-react-layout-effects-hover:#601593;\n-  --dark-color-scheduling-profiler-react-passive-effects:#c88ff0;\n-  --dark-color-scheduling-profiler-react-passive-effects-selected:#934FC1;\n-  --dark-color-scheduling-profiler-react-passive-effects-hover:#601593;\n-  --dark-color-scheduling-profiler-react-schedule: #9fc3f3;\n-  --dark-color-scheduling-profiler-react-schedule-hover:#2683E2;\n-  --dark-color-scheduling-profiler-react-schedule-cascading:#ff718e;\n-  --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;\n-  --dark-color-scheduling-profiler-react-suspend: #a6e59f;\n-  --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;\n+  --dark-color-scheduling-profiler-react-idle-hover: #465269;\n+  --dark-color-scheduling-profiler-react-render: #2683E2;\n+  --dark-color-scheduling-profiler-react-render-hover: #1a76d4;\n+  --dark-color-scheduling-profiler-react-commit: #731fad;\n+  --dark-color-scheduling-profiler-react-commit-hover: #611b94;\n+  --dark-color-scheduling-profiler-react-layout-effects: #611b94;\n+  --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;\n+  --dark-color-scheduling-profiler-react-passive-effects: #611b94;\n+  --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;\n+  --dark-color-scheduling-profiler-react-schedule: #2683E2;\n+  --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;\n+  --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;\n+  --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;\n+  --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;\n+  --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;\n+  --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;\n+  --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;\n   --dark-color-scheduling-profiler-text-color: #000000;\n-  --dark-color-scheduling-profiler-react-work-border:#ffffff;\n+  --dark-color-scheduling-profiler-react-work-border: #ffffff;\n   --dark-color-scroll-thumb: #afb3b9;\n   --dark-color-scroll-track: #313640;\n   --dark-color-search-match: yellow;\n   --dark-color-search-match-current: #f7923b;\n   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);\n   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);\n+  --dark-color-scroll-caret: #4f5766;\n   --dark-color-shadow: rgba(0, 0, 0, 0.5);\n   --dark-color-tab-selected-border: #178fb9;\n   --dark-color-text: #ffffff;\n@@ -252,6 +251,10 @@\n   --dark-color-toggle-text: #ffffff;\n   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);\n   --dark-color-tooltip-text: #000000;\n+  --dark-color-warning-background: #ee1638;\n+  --dark-color-warning-background-hover: #da1030;\n+  --dark-color-warning-text-color: #ffffff;\n+  --dark-color-warning-text-color-inverted: #ee1638;\n \n   \/* Font smoothing *\/\n   --light-font-smoothing: auto;\ndiff --git a\/packages\/react-devtools-shared\/src\/hookNamesCache.js b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\nindex 20d5d7b1cb..070dafeb1d 100644\n--- a\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n+++ b\/packages\/react-devtools-shared\/src\/hookNamesCache.js\n@@ -103,14 +103,7 @@ export function loadHookNames(\n \n     let didTimeout = false;\n \n-    const response = loadHookNamesFunction(hooksTree);\n-    console.log(\n-      'loadHookNamesFunction:',\n-      loadHookNamesFunction,\n-      '->',\n-      response,\n-    );\n-    response.then(\n+    loadHookNamesFunction(hooksTree).then(\n       function onSuccess(hookNames) {\n         if (didTimeout) {\n           return;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\nindex e7816b017e..cfe900de65 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n@@ -244,7 +244,7 @@ function throwException(\n     }\n \n     if (enableSchedulingProfiler) {\n-      markComponentSuspended(sourceFiber, wakeable);\n+      markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);\n     }\n \n     \/\/ Reset the memoizedState to what it was before we attempted to render it.\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\nindex 70fda7bef5..d7f4803620 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n@@ -244,7 +244,7 @@ function throwException(\n     }\n \n     if (enableSchedulingProfiler) {\n-      markComponentSuspended(sourceFiber, wakeable);\n+      markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);\n     }\n \n     \/\/ Reset the memoizedState to what it was before we attempted to render it.\ndiff --git a\/packages\/react-reconciler\/src\/SchedulingProfiler.js b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\nindex 67baa02ea2..2ab49efe0e 100644\n--- a\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n+++ b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n@@ -109,13 +109,23 @@ function getWakeableID(wakeable: Wakeable): number {\n   return ((wakeableIDs.get(wakeable): any): number);\n }\n \n-export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {\n+export function markComponentSuspended(\n+  fiber: Fiber,\n+  wakeable: Wakeable,\n+  lanes: Lanes,\n+): void {\n   if (enableSchedulingProfiler) {\n     if (supportsUserTimingV3) {\n+      const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';\n       const id = getWakeableID(wakeable);\n       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n-      \/\/ TODO Add component stack id\n-      markAndClear(`--suspense-suspend-${id}-${componentName}`);\n+      const phase = fiber.alternate === null ? 'mount' : 'update';\n+      \/\/ TODO (scheduling profiler) Add component stack id if we re-add component stack info.\n+      markAndClear(\n+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${formatLanes(\n+          lanes,\n+        )}`,\n+      );\n       wakeable.then(\n         () => markAndClear(`--suspense-resolved-${id}-${componentName}`),\n         () => markAndClear(`--suspense-rejected-${id}-${componentName}`),\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\nindex b5d544d0a4..62da05e0e8 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\n@@ -208,7 +208,7 @@ describe('SchedulingProfiler', () => {\n       `--react-init-${ReactVersion}`,\n       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,\n       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n-      '--suspense-suspend-0-Example',\n+      '--suspense-suspend-0-Example-mount-1-Sync',\n       '--render-stop',\n       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n       `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n@@ -239,7 +239,7 @@ describe('SchedulingProfiler', () => {\n       `--react-init-${ReactVersion}`,\n       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,\n       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n-      '--suspense-suspend-0-Example',\n+      '--suspense-suspend-0-Example-mount-1-Sync',\n       '--render-stop',\n       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n       `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n@@ -278,7 +278,7 @@ describe('SchedulingProfiler', () => {\n \n     expectMarksToEqual([\n       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n-      '--suspense-suspend-0-Example',\n+      '--suspense-suspend-0-Example-mount-16-Default',\n       '--render-stop',\n       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n@@ -317,7 +317,7 @@ describe('SchedulingProfiler', () => {\n \n     expectMarksToEqual([\n       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n-      '--suspense-suspend-0-Example',\n+      '--suspense-suspend-0-Example-mount-16-Default',\n       '--render-stop',\n       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n"}

dillon1000/react

Files changed