{"files":[{"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\/content-views\/NetworkMeasuresView.js","status":"A"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/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":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/HorizontalPanAndZoomView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/Surface.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/VerticalScrollView.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/constants.js","status":"M"}],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 83de9a2d2d..db3d3cda4e 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -44,6 +44,7 @@ import {\n ComponentMeasuresView,\n FlamechartView,\n NativeEventsView,\n+ NetworkMeasuresView,\n ReactMeasuresView,\n SchedulingEventsView,\n SnapshotsView,\n@@ -128,6 +129,18 @@ const zoomToBatch = (\n viewState.updateHorizontalScrollState(scrollState);\n };\n \n+const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {\n+ componentMeasure: null,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ networkMeasure: null,\n+ schedulingEvent: null,\n+ snapshot: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+};\n+\n type AutoSizedCanvasProps = {|\n data: ReactProfilerData,\n height: number,\n@@ -150,7 +163,12 @@ function AutoSizedCanvas({\n setHoveredEvent,\n ] = useState(null);\n \n- const surfaceRef = useRef(new Surface());\n+ const resetHoveredEvent = useCallback(\n+ () => setHoveredEvent(EMPTY_CONTEXT_INFO),\n+ [],\n+ );\n+\n+ const surfaceRef = useRef(new Surface(resetHoveredEvent));\n const userTimingMarksViewRef = useRef(null);\n const nativeEventsViewRef = useRef(null);\n const schedulingEventsViewRef = useRef(null);\n@@ -158,6 +176,7 @@ function AutoSizedCanvas({\n const componentMeasuresViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n+ const networkMeasuresViewRef = useRef(null);\n const snapshotsViewRef = useRef(null);\n \n const {hideMenu: hideContextMenu} = useContext(RegistryContext);\n@@ -318,6 +337,22 @@ function AutoSizedCanvas({\n );\n }\n \n+ let networkMeasuresViewWrapper = null;\n+ if (data.snapshots.length > 0) {\n+ const networkMeasuresView = new NetworkMeasuresView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ networkMeasuresViewRef.current = networkMeasuresView;\n+ networkMeasuresViewWrapper = createViewHelper(\n+ networkMeasuresView,\n+ 'network',\n+ true,\n+ true,\n+ );\n+ }\n+\n const flamechartView = new FlamechartView(\n surface,\n defaultFrame,\n@@ -357,6 +392,9 @@ function AutoSizedCanvas({\n if (snapshotsViewWrapper !== null) {\n rootView.addSubview(snapshotsViewWrapper);\n }\n+ if (networkMeasuresViewWrapper !== null) {\n+ rootView.addSubview(networkMeasuresViewWrapper);\n+ }\n rootView.addSubview(flamechartViewWrapper);\n \n const verticalScrollOverflowView = new VerticalScrollOverflowView(\n@@ -395,16 +433,18 @@ function AutoSizedCanvas({\n prevHoverEvent.flamechartStackFrame !== null ||\n prevHoverEvent.measure !== null ||\n prevHoverEvent.nativeEvent !== null ||\n+ prevHoverEvent.networkMeasure !== null ||\n prevHoverEvent.schedulingEvent !== null ||\n+ prevHoverEvent.snapshot !== null ||\n prevHoverEvent.suspenseEvent !== null ||\n prevHoverEvent.userTimingMark !== null\n ) {\n return {\n componentMeasure: null,\n- data: prevHoverEvent.data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -460,10 +500,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -479,10 +519,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -498,10 +538,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent,\n snapshot: null,\n suspenseEvent: null,\n@@ -517,10 +557,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent,\n@@ -536,10 +576,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.measure !== measure) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -558,10 +598,10 @@ function AutoSizedCanvas({\n ) {\n setHoveredEvent({\n componentMeasure,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -577,10 +617,10 @@ function AutoSizedCanvas({\n if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame: null,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot,\n suspenseEvent: null,\n@@ -599,10 +639,10 @@ function AutoSizedCanvas({\n ) {\n setHoveredEvent({\n componentMeasure: null,\n- data,\n flamechartStackFrame,\n measure: null,\n nativeEvent: null,\n+ networkMeasure: null,\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n@@ -611,53 +651,79 @@ function AutoSizedCanvas({\n }\n });\n }\n+\n+ const {current: networkMeasuresView} = networkMeasuresViewRef;\n+ if (networkMeasuresView) {\n+ networkMeasuresView.onHover = networkMeasure => {\n+ if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {\n+ setHoveredEvent({\n+ componentMeasure: null,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ networkMeasure,\n+ schedulingEvent: null,\n+ snapshot: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+ });\n+ }\n+ };\n+ }\n }, [\n hoveredEvent,\n data, \/\/ Attach onHover callbacks when views are re-created on data change\n ]);\n \n useLayoutEffect(() => {\n- const {current: userTimingMarksView} = userTimingMarksViewRef;\n+ const userTimingMarksView = userTimingMarksViewRef.current;\n if (userTimingMarksView) {\n userTimingMarksView.setHoveredMark(\n hoveredEvent ? hoveredEvent.userTimingMark : null,\n );\n }\n \n- const {current: nativeEventsView} = nativeEventsViewRef;\n+ const nativeEventsView = nativeEventsViewRef.current;\n if (nativeEventsView) {\n nativeEventsView.setHoveredEvent(\n hoveredEvent ? hoveredEvent.nativeEvent : null,\n );\n }\n \n- const {current: schedulingEventsView} = schedulingEventsViewRef;\n+ const schedulingEventsView = schedulingEventsViewRef.current;\n if (schedulingEventsView) {\n schedulingEventsView.setHoveredEvent(\n hoveredEvent ? hoveredEvent.schedulingEvent : null,\n );\n }\n \n- const {current: suspenseEventsView} = suspenseEventsViewRef;\n+ const suspenseEventsView = suspenseEventsViewRef.current;\n if (suspenseEventsView) {\n suspenseEventsView.setHoveredEvent(\n hoveredEvent ? hoveredEvent.suspenseEvent : null,\n );\n }\n \n- const {current: reactMeasuresView} = reactMeasuresViewRef;\n+ const reactMeasuresView = reactMeasuresViewRef.current;\n if (reactMeasuresView) {\n reactMeasuresView.setHoveredMeasure(\n hoveredEvent ? hoveredEvent.measure : null,\n );\n }\n \n- const {current: flamechartView} = flamechartViewRef;\n+ const flamechartView = flamechartViewRef.current;\n if (flamechartView) {\n flamechartView.setHoveredFlamechartStackFrame(\n hoveredEvent ? hoveredEvent.flamechartStackFrame : null,\n );\n }\n+\n+ const networkMeasuresView = networkMeasuresViewRef.current;\n+ if (networkMeasuresView) {\n+ networkMeasuresView.setHoveredEvent(\n+ hoveredEvent ? hoveredEvent.networkMeasure : null,\n+ );\n+ }\n }, [hoveredEvent]);\n \n \/\/ Draw to canvas in React's commit phase\n@@ -677,6 +743,7 @@ function AutoSizedCanvas({\n componentMeasure,\n flamechartStackFrame,\n measure,\n+ networkMeasure,\n schedulingEvent,\n suspenseEvent,\n } = contextData.hoveredEvent;\n@@ -689,6 +756,13 @@ function AutoSizedCanvas({\n Copy component name\n <\/ContextMenuItem>\n )}\n+ {networkMeasure !== null && (\n+ copy(networkMeasure.url)}\n+ title=\"Copy URL\">\n+ Copy URL\n+ <\/ContextMenuItem>\n+ )}\n {schedulingEvent !== null && (\n copy(schedulingEvent.componentName)}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\nindex af8c82e630..5ed92c5462 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n@@ -3,10 +3,10 @@\n }\n \n .TooltipSection,\n-.TooltipWarningSection {\n+.TooltipWarningSection,\n+.SingleLineTextSection {\n display: block;\n border-radius: 0.125rem;\n- max-width: 300px;\n padding: 0.25rem;\n user-select: none;\n pointer-events: none;\n@@ -19,6 +19,13 @@\n margin-top: 0.25rem;\n background-color: var(--color-warning-background);\n }\n+.TooltipSection,\n+.TooltipWarningSection {\n+ max-width: 300px;\n+}\n+.SingleLineTextSection {\n+ white-space: nowrap;\n+}\n \n .Divider {\n height: 1px;\n@@ -75,4 +82,8 @@\n \n .Image {\n border: 1px solid var(--color-border);\n+}\n+\n+.DimText {\n+ color: var(--color-dim);\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 648bbcc56b..84531e5b87 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n@@ -11,6 +11,7 @@ import type {Point} from '.\/view-base';\n import type {\n FlamechartStackFrame,\n NativeEvent,\n+ NetworkMeasure,\n ReactComponentMeasure,\n ReactHoverContextInfo,\n ReactMeasure,\n@@ -29,6 +30,8 @@ import {getBatchRange} from '.\/utils\/getBatchRange';\n import useSmartTooltip from '.\/utils\/useSmartTooltip';\n import styles from '.\/EventTooltip.css';\n \n+const MAX_TOOLTIP_TEXT_LENGTH = 60;\n+\n type Props = {|\n canvasRef: {|current: HTMLCanvasElement | null|},\n data: ReactProfilerData,\n@@ -87,6 +90,7 @@ export default function EventTooltip({\n flamechartStackFrame,\n measure,\n nativeEvent,\n+ networkMeasure,\n schedulingEvent,\n snapshot,\n suspenseEvent,\n@@ -104,6 +108,13 @@ export default function EventTooltip({\n return (\n \n );\n+ } else if (networkMeasure !== null) {\n+ return (\n+ \n+ );\n } else if (schedulingEvent !== null) {\n return (\n ,\n+}) => {\n+ const {\n+ finishTimestamp,\n+ lastReceivedDataTimestamp,\n+ priority,\n+ sendRequestTimestamp,\n+ url,\n+ } = networkMeasure;\n+\n+ let urlToDisplay = url;\n+ if (urlToDisplay.length > MAX_TOOLTIP_TEXT_LENGTH) {\n+ const half = Math.floor(MAX_TOOLTIP_TEXT_LENGTH \/ 2);\n+ urlToDisplay = url.substr(0, half) + '…' + url.substr(url.length - half);\n+ }\n+\n+ const timestampBegin = sendRequestTimestamp;\n+ const timestampEnd = finishTimestamp || lastReceivedDataTimestamp;\n+ const duration =\n+ timestampEnd > 0\n+ ? formatDuration(finishTimestamp - timestampBegin)\n+ : '(incomplete)';\n+\n+ return (\n+

\n+

\n+ {duration} {priority}<\/span>{' '}\n+ {urlToDisplay}\n+ <\/div>\n+ <\/div>\n+ );\n+};\n+\n const TooltipSchedulingEvent = ({\n data,\n schedulingEvent,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NetworkMeasuresView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NetworkMeasuresView.js\nnew file mode 100644\nindex 0000000000..321bfcca1d\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/NetworkMeasuresView.js\n@@ -0,0 +1,337 @@\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 {NetworkMeasure, ReactProfilerData} from '..\/types';\n+import type {\n+ Interaction,\n+ IntrinsicSize,\n+ MouseMoveInteraction,\n+ Rect,\n+ ViewRefs,\n+} from '..\/view-base';\n+\n+import {\n+ durationToWidth,\n+ positioningScaleFactor,\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+ rectContainsPoint,\n+ rectIntersectsRect,\n+ intersectionOfRects,\n+} from '..\/view-base';\n+import {BORDER_SIZE, COLORS, SUSPENSE_EVENT_HEIGHT} from '.\/constants';\n+\n+const HEIGHT = SUSPENSE_EVENT_HEIGHT; \/\/ TODO Constant name\n+const ROW_WITH_BORDER_HEIGHT = HEIGHT + BORDER_SIZE;\n+\n+const BASE_URL_REGEX = \/([^:]+:\\\/\\\/[^\\\/]+)\/;\n+\n+export class NetworkMeasuresView extends View {\n+ _depthToNetworkMeasure: Map;\n+ _hoveredNetworkMeasure: NetworkMeasure | null = null;\n+ _intrinsicSize: IntrinsicSize;\n+ _maxDepth: number = 0;\n+ _profilerData: ReactProfilerData;\n+\n+ onHover: ((event: NetworkMeasure | 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._depthToNetworkMeasure = new Map();\n+\n+ const {duration, networkMeasures} = this._profilerData;\n+\n+ networkMeasures.forEach(event => {\n+ const depth = event.depth;\n+\n+ this._maxDepth = Math.max(this._maxDepth, depth);\n+\n+ if (!this._depthToNetworkMeasure.has(depth)) {\n+ this._depthToNetworkMeasure.set(depth, [event]);\n+ } else {\n+ \/\/ $FlowFixMe This is unnecessary.\n+ this._depthToNetworkMeasure.get(depth).push(event);\n+ }\n+ });\n+\n+ this._intrinsicSize = {\n+ width: duration,\n+ height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,\n+ \/\/ Collapsed by default\n+ maxInitialHeight: 0,\n+ };\n+ }\n+\n+ desiredSize() {\n+ return this._intrinsicSize;\n+ }\n+\n+ setHoveredEvent(networkMeasure: NetworkMeasure | null) {\n+ if (this._hoveredNetworkMeasure === networkMeasure) {\n+ return;\n+ }\n+ this._hoveredNetworkMeasure = networkMeasure;\n+ this.setNeedsDisplay();\n+ }\n+\n+ \/**\n+ * Draw a single `NetworkMeasure` as a box\/span with text inside of it.\n+ *\/\n+ _drawSingleNetworkMeasure(\n+ context: CanvasRenderingContext2D,\n+ networkMeasure: NetworkMeasure,\n+ baseY: number,\n+ scaleFactor: number,\n+ showHoverHighlight: boolean,\n+ ) {\n+ const {frame, visibleArea} = this;\n+ const {\n+ depth,\n+ finishTimestamp,\n+ firstReceivedDataTimestamp,\n+ lastReceivedDataTimestamp,\n+ receiveResponseTimestamp,\n+ sendRequestTimestamp,\n+ url,\n+ } = networkMeasure;\n+\n+ \/\/ Account for requests that did not complete while we were profiling.\n+ \/\/ As well as requests that did not receive data before finish (cached?).\n+ const duration = this._profilerData.duration;\n+ const timestampBegin = sendRequestTimestamp;\n+ const timestampEnd =\n+ finishTimestamp || lastReceivedDataTimestamp || duration;\n+ const timestampMiddle =\n+ receiveResponseTimestamp || firstReceivedDataTimestamp || timestampEnd;\n+\n+ \/\/ Convert all timestamps to x coordinates.\n+ const xStart = timestampToPosition(timestampBegin, scaleFactor, frame);\n+ const xMiddle = timestampToPosition(timestampMiddle, scaleFactor, frame);\n+ const xStop = timestampToPosition(timestampEnd, scaleFactor, frame);\n+\n+ const width = durationToWidth(xStop - xStart, scaleFactor);\n+ if (width < 1) {\n+ return; \/\/ Too small to render at this zoom level\n+ }\n+\n+ baseY += depth * ROW_WITH_BORDER_HEIGHT;\n+\n+ const outerRect: Rect = {\n+ origin: {\n+ x: xStart,\n+ y: baseY,\n+ },\n+ size: {\n+ width: xStop - xStart,\n+ height: HEIGHT,\n+ },\n+ };\n+ if (!rectIntersectsRect(outerRect, visibleArea)) {\n+ return; \/\/ Not in view\n+ }\n+\n+ \/\/ Draw the secondary rect first (since it also shows as a thin border around the primary rect).\n+ let rect = {\n+ origin: {\n+ x: xStart,\n+ y: baseY,\n+ },\n+ size: {\n+ width: xStop - xStart,\n+ height: HEIGHT,\n+ },\n+ };\n+ if (rectIntersectsRect(rect, visibleArea)) {\n+ context.beginPath();\n+ context.fillStyle =\n+ this._hoveredNetworkMeasure === networkMeasure\n+ ? COLORS.NETWORK_SECONDARY_HOVER\n+ : COLORS.NETWORK_SECONDARY;\n+ context.fillRect(\n+ rect.origin.x,\n+ rect.origin.y,\n+ rect.size.width,\n+ rect.size.height,\n+ );\n+ }\n+\n+ rect = {\n+ origin: {\n+ x: xStart + BORDER_SIZE,\n+ y: baseY + BORDER_SIZE,\n+ },\n+ size: {\n+ width: xMiddle - xStart - BORDER_SIZE,\n+ height: HEIGHT - BORDER_SIZE * 2,\n+ },\n+ };\n+ if (rectIntersectsRect(rect, visibleArea)) {\n+ context.beginPath();\n+ context.fillStyle =\n+ this._hoveredNetworkMeasure === networkMeasure\n+ ? COLORS.NETWORK_PRIMARY_HOVER\n+ : COLORS.NETWORK_PRIMARY;\n+ context.fillRect(\n+ rect.origin.x,\n+ rect.origin.y,\n+ rect.size.width,\n+ rect.size.height,\n+ );\n+ }\n+\n+ const baseUrl = url.match(BASE_URL_REGEX);\n+ const displayUrl = baseUrl !== null ? baseUrl[1] : url;\n+\n+ const durationLabel =\n+ finishTimestamp !== 0\n+ ? `${formatDuration(finishTimestamp - sendRequestTimestamp)} - `\n+ : '';\n+\n+ const label = durationLabel + displayUrl;\n+\n+ drawText(label, context, outerRect, visibleArea);\n+ }\n+\n+ draw(context: CanvasRenderingContext2D) {\n+ const {\n+ frame,\n+ _profilerData: {networkMeasures},\n+ _hoveredNetworkMeasure,\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+ const scaleFactor = positioningScaleFactor(\n+ this._intrinsicSize.width,\n+ frame,\n+ );\n+\n+ networkMeasures.forEach(networkMeasure => {\n+ this._drawSingleNetworkMeasure(\n+ context,\n+ networkMeasure,\n+ frame.origin.y,\n+ scaleFactor,\n+ networkMeasure === _hoveredNetworkMeasure,\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 networkMeasuresAtDepth = this._depthToNetworkMeasure.get(depth);\n+\n+ const duration = this._profilerData.duration;\n+\n+ if (networkMeasuresAtDepth) {\n+ \/\/ Find the event being hovered over.\n+ for (let index = networkMeasuresAtDepth.length - 1; index >= 0; index--) {\n+ const networkMeasure = networkMeasuresAtDepth[index];\n+ const {\n+ finishTimestamp,\n+ lastReceivedDataTimestamp,\n+ sendRequestTimestamp,\n+ } = networkMeasure;\n+\n+ const timestampBegin = sendRequestTimestamp;\n+ const timestampEnd =\n+ finishTimestamp || lastReceivedDataTimestamp || duration;\n+\n+ if (\n+ hoverTimestamp >= timestampBegin &&\n+ hoverTimestamp <= timestampEnd\n+ ) {\n+ this.currentCursor = 'context-menu';\n+ viewRefs.hoveredView = this;\n+ onHover(networkMeasure);\n+ return;\n+ }\n+ }\n+ }\n+\n+ if (viewRefs.hoveredView === this) {\n+ viewRefs.hoveredView = null;\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\/constants.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\nindex 338ca1e5d1..48ba22aed3 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@@ -7,6 +7,7 @@\n * @flow\n *\/\n \n+export const DPR: number = window.devicePixelRatio || 1;\n export const LABEL_SIZE = 80;\n export const MARKER_HEIGHT = 20;\n export const MARKER_TICK_HEIGHT = 8;\n@@ -20,7 +21,7 @@ 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 = 14;\n-export const BORDER_SIZE = 1;\n+export const BORDER_SIZE = 1 \/ DPR;\n export const FLAMECHART_FRAME_HEIGHT = 14;\n export const TEXT_PADDING = 3;\n export const SNAPSHOT_HEIGHT = 35;\n@@ -46,6 +47,10 @@ export let COLORS = {\n BACKGROUND: '',\n NATIVE_EVENT: '',\n NATIVE_EVENT_HOVER: '',\n+ NETWORK_PRIMARY: '',\n+ NETWORK_PRIMARY_HOVER: '',\n+ NETWORK_SECONDARY: '',\n+ NETWORK_SECONDARY_HOVER: '',\n PRIORITY_BACKGROUND: '',\n PRIORITY_BORDER: '',\n PRIORITY_LABEL: '',\n@@ -106,6 +111,18 @@ export function updateColorsToMatchTheme(element: Element): boolean {\n NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-native-event-hover',\n ),\n+ NETWORK_PRIMARY: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-network-primary',\n+ ),\n+ NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-network-primary-hover',\n+ ),\n+ NETWORK_SECONDARY: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-network-secondary',\n+ ),\n+ NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-network-secondary-hover',\n+ ),\n PRIORITY_BACKGROUND: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-priority-background',\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 91ab47bfd4..21c8cb570b 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@@ -10,6 +10,7 @@\n export * from '.\/ComponentMeasuresView';\n export * from '.\/FlamechartView';\n export * from '.\/NativeEventsView';\n+export * from '.\/NetworkMeasuresView';\n export * from '.\/ReactMeasuresView';\n export * from '.\/SchedulingEventsView';\n export * from '.\/SnapshotsView';\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\nindex 4cd7d94821..9351d1685f 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/utils\/text.js\n@@ -32,14 +32,34 @@ export function trimText(\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+ const maxIndex = text.length - 1;\n+\n+ let startIndex = 0;\n+ let stopIndex = maxIndex;\n+\n+ let longestValidIndex = 0;\n+ let longestValidText = null;\n+\n+ \/\/ Trimming long text could be really slow if we decrease only 1 character at a time.\n+ \/\/ Trimming with more of a binary search approach is faster in the worst cases.\n+ while (startIndex <= stopIndex) {\n+ const currentIndex = Math.floor((startIndex + stopIndex) \/ 2);\n+ const trimmedText =\n+ currentIndex === maxIndex ? text : text.substr(0, currentIndex) + '…';\n+\n if (getTextWidth(context, trimmedText) <= width) {\n- return trimmedText;\n+ if (longestValidIndex < currentIndex) {\n+ longestValidIndex = currentIndex;\n+ longestValidText = trimmedText;\n+ }\n+\n+ startIndex = currentIndex + 1;\n+ } else {\n+ stopIndex = currentIndex - 1;\n }\n }\n \n- return null;\n+ return longestValidText;\n }\n \n type TextConfig = {|\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 f5267e8d06..3481068f47 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@@ -324,6 +324,7 @@ describe('preprocessData', () => {\n 30 => Array [],\n },\n \"nativeEvents\": Array [],\n+ \"networkMeasures\": Array [],\n \"otherUserTimingMarks\": Array [],\n \"reactVersion\": \"17.0.3\",\n \"schedulingEvents\": Array [],\n@@ -530,6 +531,7 @@ describe('preprocessData', () => {\n 30 => Array [],\n },\n \"nativeEvents\": Array [],\n+ \"networkMeasures\": Array [],\n \"otherUserTimingMarks\": Array [],\n \"reactVersion\": \"17.0.3\",\n \"schedulingEvents\": Array [\n@@ -715,6 +717,7 @@ describe('preprocessData', () => {\n 30 => Array [],\n },\n \"nativeEvents\": Array [],\n+ \"networkMeasures\": Array [],\n \"otherUserTimingMarks\": Array [\n Object {\n \"name\": \"__v3\",\n@@ -1051,6 +1054,7 @@ describe('preprocessData', () => {\n 30 => Array [],\n },\n \"nativeEvents\": Array [],\n+ \"networkMeasures\": Array [],\n \"otherUserTimingMarks\": Array [\n Object {\n \"name\": \"__v3\",\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 9d6e56035a..a7545ef1b7 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@@ -17,6 +17,7 @@ import type {\n Flamechart,\n Milliseconds,\n NativeEvent,\n+ NetworkMeasure,\n Phase,\n ReactLane,\n ReactComponentMeasure,\n@@ -51,6 +52,7 @@ type ProcessorState = {|\n potentialSuspenseEventsOutsideOfTransition: Array<\n [SuspenseEvent, ReactLane[]],\n >,\n+ requestIdToNetworkMeasureMap: Map,\n uidCounter: BatchUID,\n unresolvedSuspenseEvents: Map,\n |};\n@@ -215,6 +217,205 @@ function throwIfIncomplete(\n }\n }\n \n+function processEventDispatch(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const data = event.args.data;\n+ const type = data.type;\n+\n+ if (type.startsWith('react-')) {\n+ const stackTrace = data.stackTrace;\n+ if (stackTrace) {\n+ const topFrame = stackTrace[stackTrace.length - 1];\n+ if (topFrame.url.includes('\/react-dom.')) {\n+ \/\/ Filter out fake React events dispatched by invokeGuardedCallbackDev.\n+ return;\n+ }\n+ }\n+ }\n+\n+ \/\/ Reduce noise from events like DOMActivate, load\/unload, etc. which are usually not relevant\n+ if (\n+ type === 'blur' ||\n+ type === 'click' ||\n+ type === 'input' ||\n+ type.startsWith('focus') ||\n+ type.startsWith('key') ||\n+ type.startsWith('mouse') ||\n+ type.startsWith('pointer')\n+ ) {\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 = 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+ const nativeEvent = {\n+ depth,\n+ duration,\n+ timestamp,\n+ type,\n+ warning: null,\n+ };\n+\n+ profilerData.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+ state.nativeEventStack.push(nativeEvent);\n+ }\n+}\n+\n+function processResourceFinish(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const requestId = event.args.data.requestId;\n+ const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);\n+ if (networkMeasure != null) {\n+ networkMeasure.finishTimestamp = timestamp;\n+ if (networkMeasure.firstReceivedDataTimestamp === 0) {\n+ networkMeasure.firstReceivedDataTimestamp = timestamp;\n+ }\n+ if (networkMeasure.lastReceivedDataTimestamp === 0) {\n+ networkMeasure.lastReceivedDataTimestamp = timestamp;\n+ }\n+\n+ \/\/ Clean up now that the resource is done.\n+ state.requestIdToNetworkMeasureMap.delete(event.args.data.requestId);\n+ }\n+}\n+\n+function processResourceReceivedData(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const requestId = event.args.data.requestId;\n+ const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);\n+ if (networkMeasure != null) {\n+ if (networkMeasure.firstReceivedDataTimestamp === 0) {\n+ networkMeasure.firstReceivedDataTimestamp = timestamp;\n+ }\n+ networkMeasure.lastReceivedDataTimestamp = timestamp;\n+ networkMeasure.finishTimestamp = timestamp;\n+ }\n+}\n+\n+function processResourceReceiveResponse(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const requestId = event.args.data.requestId;\n+ const networkMeasure = state.requestIdToNetworkMeasureMap.get(requestId);\n+ if (networkMeasure != null) {\n+ networkMeasure.receiveResponseTimestamp = timestamp;\n+ }\n+}\n+\n+function processScreenshot(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const encodedSnapshot = event.args.snapshot; \/\/ Base 64 encoded\n+\n+ const snapshot = {\n+ height: 0,\n+ image: null,\n+ imageSource: `data:image\/png;base64,${encodedSnapshot}`,\n+ timestamp,\n+ width: 0,\n+ };\n+\n+ \/\/ Delay processing until we've extracted snapshot dimensions.\n+ let resolveFn = ((null: any): Function);\n+ state.asyncProcessingPromises.push(\n+ new Promise(resolve => {\n+ resolveFn = resolve;\n+ }),\n+ );\n+\n+ \/\/ Parse the Base64 image data to determine native size.\n+ \/\/ This will be used later to scale for display within the thumbnail strip.\n+ fetch(snapshot.imageSource)\n+ .then(response => response.blob())\n+ .then(blob => {\n+ \/\/ $FlowFixMe createImageBitmap\n+ createImageBitmap(blob).then(bitmap => {\n+ snapshot.height = bitmap.height;\n+ snapshot.width = bitmap.width;\n+\n+ resolveFn();\n+ });\n+ });\n+\n+ profilerData.snapshots.push(snapshot);\n+}\n+\n+function processResourceSendRequest(\n+ event: TimelineEvent,\n+ timestamp: Milliseconds,\n+ profilerData: ReactProfilerData,\n+ state: ProcessorState,\n+) {\n+ const data = event.args.data;\n+ const requestId = data.requestId;\n+\n+ const availableDepths = new Array(\n+ state.requestIdToNetworkMeasureMap.size + 1,\n+ ).fill(true);\n+ state.requestIdToNetworkMeasureMap.forEach(({depth}) => {\n+ availableDepths[depth] = false;\n+ });\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+ const networkMeasure: NetworkMeasure = {\n+ depth,\n+ finishTimestamp: 0,\n+ firstReceivedDataTimestamp: 0,\n+ lastReceivedDataTimestamp: 0,\n+ requestId,\n+ requestMethod: data.requestMethod,\n+ priority: data.priority,\n+ sendRequestTimestamp: timestamp,\n+ receiveResponseTimestamp: 0,\n+ url: data.url,\n+ };\n+\n+ state.requestIdToNetworkMeasureMap.set(requestId, networkMeasure);\n+\n+ profilerData.networkMeasures.push(networkMeasure);\n+ networkMeasure.sendRequestTimestamp = timestamp;\n+}\n+\n function processTimelineEvent(\n event: TimelineEvent,\n \/** Finalized profiler data up to `event`. May be mutated. *\/\n@@ -222,106 +423,49 @@ function processTimelineEvent(\n \/** Intermediate processor state. May be mutated. *\/\n state: ProcessorState,\n ) {\n- const {args, cat, name, ts, ph} = event;\n- switch (cat) {\n- case 'disabled-by-default-devtools.screenshot':\n- const encodedSnapshot = args.snapshot; \/\/ Base 64 encoded\n-\n- const snapshot = {\n- height: 0,\n- image: null,\n- imageSource: `data:image\/png;base64,${encodedSnapshot}`,\n- timestamp: (ts - currentProfilerData.startTime) \/ 1000,\n- width: 0,\n- };\n-\n- \/\/ Delay processing until we've extracted snapshot dimensions.\n- let resolveFn = ((null: any): Function);\n- state.asyncProcessingPromises.push(\n- new Promise(resolve => {\n- resolveFn = resolve;\n- }),\n- );\n+ const {cat, name, ts, ph} = event;\n \n- \/\/ Parse the Base64 image data to determine native size.\n- \/\/ This will be used later to scale for display within the thumbnail strip.\n- fetch(snapshot.imageSource)\n- .then(response => response.blob())\n- .then(blob => {\n- \/\/ $FlowFixMe createImageBitmap\n- createImageBitmap(blob).then(bitmap => {\n- snapshot.height = bitmap.height;\n- snapshot.width = bitmap.width;\n-\n- resolveFn();\n- });\n- });\n+ const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n \n- currentProfilerData.snapshots.push(snapshot);\n+ switch (cat) {\n+ case 'disabled-by-default-devtools.screenshot':\n+ processScreenshot(event, startTime, currentProfilerData, state);\n break;\n case 'devtools.timeline':\n- if (name === 'EventDispatch') {\n- const type = args.data.type;\n-\n- if (type.startsWith('react-')) {\n- const stackTrace = args.data.stackTrace;\n- if (stackTrace) {\n- const topFrame = stackTrace[stackTrace.length - 1];\n- if (topFrame.url.includes('\/react-dom.')) {\n- \/\/ Filter out fake React events dispatched by invokeGuardedCallbackDev.\n- return;\n- }\n- }\n- }\n-\n- \/\/ Reduce noise from events like DOMActivate, load\/unload, etc. which are usually not relevant\n- if (\n- type === 'blur' ||\n- type === 'click' ||\n- type === 'input' ||\n- type.startsWith('focus') ||\n- type.startsWith('key') ||\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- const nativeEvent = {\n- depth,\n- duration,\n- timestamp,\n- type,\n- warning: null,\n- };\n-\n- currentProfilerData.nativeEvents.push(nativeEvent);\n-\n- \/\/ Keep track of curent event in case future ones overlap.\n- \/\/ We separate them into different vertical lanes in this case.\n- state.nativeEventStack.push(nativeEvent);\n- }\n+ switch (name) {\n+ case 'EventDispatch':\n+ processEventDispatch(event, startTime, currentProfilerData, state);\n+ break;\n+ case 'ResourceFinish':\n+ processResourceFinish(event, startTime, currentProfilerData, state);\n+ break;\n+ case 'ResourceReceivedData':\n+ processResourceReceivedData(\n+ event,\n+ startTime,\n+ currentProfilerData,\n+ state,\n+ );\n+ break;\n+ case 'ResourceReceiveResponse':\n+ processResourceReceiveResponse(\n+ event,\n+ startTime,\n+ currentProfilerData,\n+ state,\n+ );\n+ break;\n+ case 'ResourceSendRequest':\n+ processResourceSendRequest(\n+ event,\n+ startTime,\n+ currentProfilerData,\n+ state,\n+ );\n+ break;\n }\n break;\n case 'blink.user_timing':\n- const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n-\n if (name.startsWith('--react-version-')) {\n const [reactVersion] = name.substr(16).split('-');\n currentProfilerData.reactVersion = reactVersion;\n@@ -714,6 +858,7 @@ export default async function preprocessData(\n laneToLabelMap: new Map(),\n laneToReactMeasureMap,\n nativeEvents: [],\n+ networkMeasures: [],\n otherUserTimingMarks: [],\n reactVersion: null,\n schedulingEvents: [],\n@@ -759,6 +904,7 @@ export default async function preprocessData(\n potentialLongNestedUpdate: null,\n potentialLongNestedUpdates: [],\n potentialSuspenseEventsOutsideOfTransition: [],\n+ requestIdToNetworkMeasureMap: new Map(),\n uidCounter: 0,\n unresolvedSuspenseEvents: new Map(),\n };\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 637d957141..073f4e1fbf 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -91,6 +91,19 @@ export type ReactMeasure = {|\n +depth: number,\n |};\n \n+export type NetworkMeasure = {|\n+ +depth: number,\n+ finishTimestamp: Milliseconds,\n+ firstReceivedDataTimestamp: Milliseconds,\n+ lastReceivedDataTimestamp: Milliseconds,\n+ priority: string,\n+ receiveResponseTimestamp: Milliseconds,\n+ +requestId: string,\n+ requestMethod: string,\n+ sendRequestTimestamp: Milliseconds,\n+ url: string,\n+|};\n+\n export type ReactComponentMeasure = {|\n +componentName: string,\n duration: Milliseconds,\n@@ -155,6 +168,7 @@ export type ReactProfilerData = {|\n laneToLabelMap: Map,\n laneToReactMeasureMap: Map,\n nativeEvents: NativeEvent[],\n+ networkMeasures: NetworkMeasure[],\n otherUserTimingMarks: UserTimingMark[],\n reactVersion: string | null,\n schedulingEvents: SchedulingEvent[],\n@@ -165,10 +179,10 @@ export type ReactProfilerData = {|\n \n export type ReactHoverContextInfo = {|\n componentMeasure: ReactComponentMeasure | null,\n- data: $ReadOnly | null,\n flamechartStackFrame: FlamechartStackFrame | null,\n measure: ReactMeasure | null,\n nativeEvent: NativeEvent | null,\n+ networkMeasure: NetworkMeasure | null,\n schedulingEvent: SchedulingEvent | null,\n suspenseEvent: SuspenseEvent | null,\n snapshot: Snapshot | null,\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 5519599f12..2a998493ed 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@@ -156,7 +156,7 @@ export class HorizontalPanAndZoomView extends View {\n interaction.payload.location,\n this.frame,\n );\n- if (isHovered) {\n+ if (isHovered && viewRefs.hoveredView === null) {\n viewRefs.hoveredView = this;\n }\n \n@@ -169,9 +169,16 @@ export class HorizontalPanAndZoomView extends View {\n if (!this._isPanning) {\n return;\n }\n+\n+ \/\/ Don't prevent mouse-move events from bubbling if they are vertical drags.\n+ const {movementX, movementY} = interaction.payload.event;\n+ if (Math.abs(movementX) < Math.abs(movementY)) {\n+ return;\n+ }\n+\n const newState = translateState({\n state: this._viewState.horizontalScrollState,\n- delta: interaction.payload.event.movementX,\n+ delta: movementX,\n containerLength: this.frame.size.width,\n });\n this._viewState.updateHorizontalScrollState(newState);\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 6cdaff1c6e..2a5774db31 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@@ -7,6 +7,7 @@\n * @flow\n *\/\n \n+import type {ReactHoverContextInfo} from '..\/types';\n import type {Interaction} from '.\/useCanvasInteraction';\n import type {Size} from '.\/geometry';\n \n@@ -14,6 +15,7 @@ import memoize from 'memoize-one';\n \n import {View} from '.\/View';\n import {zeroPoint} from '.\/geometry';\n+import {DPR} from '..\/content-views\/constants';\n \n export type ViewRefs = {|\n activeView: View | null,\n@@ -22,12 +24,10 @@ export type ViewRefs = {|\n \n \/\/ hidpi canvas: https:\/\/www.html5rocks.com\/en\/tutorials\/canvas\/hidpi\/\n function configureRetinaCanvas(canvas, height, width) {\n- const dpr: number = window.devicePixelRatio || 1;\n- canvas.width = width * dpr;\n- canvas.height = height * dpr;\n+ canvas.width = width * DPR;\n+ canvas.height = height * DPR;\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n- return dpr;\n }\n \n const getCanvasContext = memoize(\n@@ -39,14 +39,19 @@ const getCanvasContext = memoize(\n ): CanvasRenderingContext2D => {\n const context = canvas.getContext('2d', {alpha: false});\n if (scaleCanvas) {\n- const dpr = configureRetinaCanvas(canvas, height, width);\n+ configureRetinaCanvas(canvas, height, width);\n+\n \/\/ Scale all drawing operations by the dpr, so you don't have to worry about the difference.\n- context.scale(dpr, dpr);\n+ context.scale(DPR, DPR);\n }\n return context;\n },\n );\n \n+type ResetHoveredEventFn = (\n+ partialState: $Shape,\n+) => void;\n+\n \/**\n * Represents the canvas surface and a view heirarchy. A surface is also the\n * place where all interactions enter the view heirarchy.\n@@ -57,11 +62,17 @@ export class Surface {\n _context: ?CanvasRenderingContext2D;\n _canvasSize: ?Size;\n \n+ _resetHoveredEvent: ResetHoveredEventFn;\n+\n _viewRefs: ViewRefs = {\n activeView: null,\n hoveredView: null,\n };\n \n+ constructor(resetHoveredEvent: ResetHoveredEventFn) {\n+ this._resetHoveredEvent = resetHoveredEvent;\n+ }\n+\n hasActiveView(): boolean {\n return this._viewRefs.activeView !== null;\n }\n@@ -107,12 +118,32 @@ export class Surface {\n }\n \n handleInteraction(interaction: Interaction) {\n- if (!this.rootView) {\n- return;\n+ const rootView = this.rootView;\n+ if (rootView != null) {\n+ const viewRefs = this._viewRefs;\n+ switch (interaction.type) {\n+ case 'mousemove':\n+ \/\/ Clean out the hovered view before processing a new mouse move interaction.\n+ const hoveredView = viewRefs.hoveredView;\n+ viewRefs.hoveredView = null;\n+\n+ rootView.handleInteractionAndPropagateToSubviews(\n+ interaction,\n+ viewRefs,\n+ );\n+\n+ \/\/ If a previously hovered view is no longer hovered, update the outer state.\n+ if (hoveredView !== null && viewRefs.hoveredView === null) {\n+ this._resetHoveredEvent({});\n+ }\n+ break;\n+ default:\n+ rootView.handleInteractionAndPropagateToSubviews(\n+ interaction,\n+ viewRefs,\n+ );\n+ break;\n+ }\n }\n- this.rootView.handleInteractionAndPropagateToSubviews(\n- interaction,\n- this._viewRefs,\n- );\n }\n }\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 a78e88425f..d54907da1a 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@@ -199,12 +199,20 @@ export class VerticalScrollView extends View {\n if (!this._isPanning) {\n return;\n }\n+\n+ \/\/ Don't prevent mouse-move events from bubbling if they are horizontal drags.\n+ const {movementX, movementY} = interaction.payload.event;\n+ if (Math.abs(movementX) > Math.abs(movementY)) {\n+ return;\n+ }\n+\n const newState = translateState({\n state: this._scrollState,\n delta: interaction.payload.event.movementY,\n containerLength: this.frame.size.height,\n });\n this._setScrollState(newState);\n+\n return true;\n }\n \n@@ -255,12 +263,14 @@ export class VerticalScrollView extends View {\n }\n \n _setScrollState(proposedState: ScrollState): boolean {\n- const height = this._contentView.frame.size.height;\n+ const contentHeight = this._contentView.frame.size.height;\n+ const containerHeight = this.frame.size.height;\n+\n const clampedState = clampState({\n state: proposedState,\n- minContentLength: height,\n- maxContentLength: height,\n- containerLength: this.frame.size.height,\n+ minContentLength: contentHeight,\n+ maxContentLength: contentHeight,\n+ containerLength: containerHeight,\n });\n if (!areScrollStatesEqual(clampedState, this._scrollState)) {\n this._scrollState.offset = clampedState.offset;\n@@ -275,6 +285,13 @@ export class VerticalScrollView extends View {\n return true;\n }\n \n- return false;\n+ \/\/ Don't allow wheel events to bubble past this view even if we've scrolled to the edge.\n+ \/\/ It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page.\n+ \/\/ The only exception is when the container fitst the contnet (no scrolling).\n+ if (contentHeight === containerHeight) {\n+ return false;\n+ }\n+\n+ return true;\n }\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 2476ce3283..04962c204e 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -141,6 +141,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-resize-bar-dot': '#333333',\n '--color-scheduling-profiler-native-event': '#ccc',\n '--color-scheduling-profiler-native-event-hover': '#aaa',\n+ '--color-scheduling-profiler-network-primary': '#fcf3dc',\n+ '--color-scheduling-profiler-network-primary-hover': '#f0e7d1',\n+ '--color-scheduling-profiler-network-secondary': '#efc457',\n+ '--color-scheduling-profiler-network-secondary-hover': '#e3ba52',\n '--color-scheduling-profiler-priority-background': '#f6f6f6',\n '--color-scheduling-profiler-priority-border': '#eeeeee',\n '--color-scheduling-profiler-user-timing': '#c9cacd',\n@@ -276,6 +280,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-resize-bar-dot': '#cfd1d5',\n '--color-scheduling-profiler-native-event': '#b2b2b2',\n '--color-scheduling-profiler-native-event-hover': '#949494',\n+ '--color-scheduling-profiler-network-primary': '#fcf3dc',\n+ '--color-scheduling-profiler-network-primary-hover': '#e3dbc5',\n+ '--color-scheduling-profiler-network-secondary': '#efc457',\n+ '--color-scheduling-profiler-network-secondary-hover': '#d6af4d',\n '--color-scheduling-profiler-priority-background': '#1d2129',\n '--color-scheduling-profiler-priority-border': '#282c34',\n '--color-scheduling-profiler-user-timing': '#c9cacd',\n","parents":["9eb2aaaf8181743481bdce955ab3b5e9bbacac90"],"commit":{"revision":"f51579fffeac46a783f765786f5287644b1fa7eb","authoredAt":"2021-08-18T12:17:59-04:00","subject":"Scheduling Profiler: Add network measures (#22112)","shortRevision":"f51579fffe","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com"},"body":""}

dillon1000/react

Files changed