{"commit":{"authoredAt":"2021-08-03T13:03:29-04:00","authorEmail":"bvaughn@fb.com","authorName":"Brian Vaughn","shortRevision":"e3049bb850","revision":"e3049bb850d8d6395f67d4171870a686e08c3dbd","subject":"DevTools scheduling profiler: Add React component measures (#22013)"},"body":"","parents":["b54f36f2b6eba4ae722bea56d4081a920fc9ad74"],"files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ComponentMeasuresView.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\/SuspenseEventsView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/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\/ResizableView.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/constants.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.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\/ReloadAndProfileButton.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.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"}],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 05700d6431..e699959013 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 zeroPoint,\n } from '.\/view-base';\n import {\n+ ComponentMeasuresView,\n FlamechartView,\n NativeEventsView,\n ReactMeasuresView,\n@@ -132,6 +133,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n const nativeEventsViewRef = useRef(null);\n const schedulingEventsViewRef = useRef(null);\n const suspenseEventsViewRef = useRef(null);\n+ const componentMeasuresViewRef = useRef(null);\n const reactMeasuresViewRef = useRef(null);\n const flamechartViewRef = useRef(null);\n const syncedHorizontalPanAndZoomViewsRef = useRef(\n@@ -259,6 +261,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n true,\n );\n \n+ let componentMeasuresViewWrapper = null;\n+ if (data.componentMeasures.length > 0) {\n+ const componentMeasuresView = new ComponentMeasuresView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ componentMeasuresViewRef.current = componentMeasuresView;\n+ componentMeasuresViewWrapper = createViewHelper(componentMeasuresView);\n+ }\n+\n const flamechartView = new FlamechartView(\n surface,\n defaultFrame,\n@@ -293,6 +306,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n rootView.addSubview(suspenseEventsViewWrapper);\n }\n rootView.addSubview(reactMeasuresViewWrapper);\n+ if (componentMeasuresViewWrapper !== null) {\n+ rootView.addSubview(componentMeasuresViewWrapper);\n+ }\n rootView.addSubview(flamechartViewWrapper);\n \n \/\/ If subviews are less than the available height, fill remaining height with a solid color.\n@@ -323,6 +339,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n if (prevHoverEvent === null) {\n return prevHoverEvent;\n } else if (\n+ prevHoverEvent.componentMeasure !== null ||\n prevHoverEvent.flamechartStackFrame !== null ||\n prevHoverEvent.measure !== null ||\n prevHoverEvent.nativeEvent !== null ||\n@@ -331,6 +348,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n prevHoverEvent.userTimingMark !== null\n ) {\n return {\n+ componentMeasure: null,\n data: prevHoverEvent.data,\n flamechartStackFrame: null,\n measure: null,\n@@ -378,6 +396,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n userTimingMarksView.onHover = userTimingMark => {\n if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame: null,\n measure: null,\n@@ -395,6 +414,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n nativeEventsView.onHover = nativeEvent => {\n if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame: null,\n measure: null,\n@@ -412,6 +432,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n schedulingEventsView.onHover = schedulingEvent => {\n if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame: null,\n measure: null,\n@@ -429,6 +450,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n suspenseEventsView.onHover = suspenseEvent => {\n if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame: null,\n measure: null,\n@@ -446,6 +468,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n reactMeasuresView.onHover = measure => {\n if (!hoveredEvent || hoveredEvent.measure !== measure) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame: null,\n measure,\n@@ -458,6 +481,27 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n };\n }\n \n+ const {current: componentMeasuresView} = componentMeasuresViewRef;\n+ if (componentMeasuresView) {\n+ componentMeasuresView.onHover = componentMeasure => {\n+ if (\n+ !hoveredEvent ||\n+ hoveredEvent.componentMeasure !== componentMeasure\n+ ) {\n+ setHoveredEvent({\n+ componentMeasure,\n+ data,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ nativeEvent: null,\n+ schedulingEvent: null,\n+ suspenseEvent: null,\n+ userTimingMark: null,\n+ });\n+ }\n+ };\n+ }\n+\n const {current: flamechartView} = flamechartViewRef;\n if (flamechartView) {\n flamechartView.setOnHover(flamechartStackFrame => {\n@@ -466,6 +510,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n hoveredEvent.flamechartStackFrame !== flamechartStackFrame\n ) {\n setHoveredEvent({\n+ componentMeasure: null,\n data,\n flamechartStackFrame,\n measure: null,\n@@ -540,6 +585,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n return null;\n }\n const {\n+ componentMeasure,\n flamechartStackFrame,\n measure,\n schedulingEvent,\n@@ -547,6 +593,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n } = contextData.hoveredEvent;\n return (\n \n+ {componentMeasure !== null && (\n+ copy(componentMeasure.componentName)}\n+ title=\"Copy component name\">\n+ Copy component name\n+ <\/ContextMenuItem>\n+ )}\n {schedulingEvent !== null && (\n copy(schedulingEvent.componentName)}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\nindex d6019cb254..80935bd69b 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+ ReactComponentMeasure,\n ReactHoverContextInfo,\n ReactMeasure,\n ReactProfilerData,\n@@ -81,6 +82,7 @@ export default function EventTooltip({\n }\n \n const {\n+ componentMeasure,\n flamechartStackFrame,\n measure,\n nativeEvent,\n@@ -89,7 +91,14 @@ export default function EventTooltip({\n userTimingMark,\n } = hoveredEvent;\n \n- if (nativeEvent !== null) {\n+ if (componentMeasure !== null) {\n+ return (\n+ \n+ );\n+ } else if (nativeEvent !== null) {\n return (\n \n );\n@@ -130,6 +139,38 @@ export default function EventTooltip({\n return null;\n }\n \n+const TooltipReactComponentMeasure = ({\n+ componentMeasure,\n+ tooltipRef,\n+}: {\n+ componentMeasure: ReactComponentMeasure,\n+ tooltipRef: Return,\n+}) => {\n+ const {componentName, duration, timestamp, warning} = componentMeasure;\n+\n+ const label = `${componentName} rendered`;\n+\n+ return (\n+

\n+

\n+ {trimString(label, 768)}\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 TooltipFlamechartNode = ({\n stackFrame,\n tooltipRef,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\nindex e6638ce728..dc95fc31a9 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext.js\n@@ -14,6 +14,7 @@ import createDataResourceFromImportedFile from '.\/createDataResourceFromImported\n import type {DataResource} from '.\/createDataResourceFromImportedFile';\n \n export type Context = {|\n+ clearSchedulingProfilerData: () => void,\n importSchedulingProfilerData: (file: File) => void,\n schedulingProfilerData: DataResource | null,\n |};\n@@ -33,6 +34,10 @@ function SchedulingProfilerContextController({children}: Props) {\n setSchedulingProfilerData,\n ] = useState(null);\n \n+ const clearSchedulingProfilerData = useCallback(() => {\n+ setSchedulingProfilerData(null);\n+ }, []);\n+\n const importSchedulingProfilerData = useCallback((file: File) => {\n setSchedulingProfilerData(createDataResourceFromImportedFile(file));\n }, []);\n@@ -41,11 +46,13 @@ function SchedulingProfilerContextController({children}: Props) {\n \n const value = useMemo(\n () => ({\n+ clearSchedulingProfilerData,\n importSchedulingProfilerData,\n schedulingProfilerData,\n \/\/ TODO (scheduling profiler)\n }),\n [\n+ clearSchedulingProfilerData,\n importSchedulingProfilerData,\n schedulingProfilerData,\n \/\/ TODO (scheduling profiler)\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ComponentMeasuresView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ComponentMeasuresView.js\nnew file mode 100644\nindex 0000000000..4d9ecfa5d1\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ComponentMeasuresView.js\n@@ -0,0 +1,222 @@\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 {ReactComponentMeasure, 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 {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from '.\/constants';\n+\n+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;\n+\n+export class ComponentMeasuresView extends View {\n+ _hoveredComponentMeasure: ReactComponentMeasure | null = null;\n+ _intrinsicSize: IntrinsicSize;\n+ _profilerData: ReactProfilerData;\n+\n+ onHover: ((event: ReactComponentMeasure | 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._intrinsicSize = {\n+ width: profilerData.duration,\n+ height: ROW_WITH_BORDER_HEIGHT,\n+ };\n+ }\n+\n+ desiredSize() {\n+ return this._intrinsicSize;\n+ }\n+\n+ setHoveredEvent(hoveredEvent: ReactComponentMeasure | null) {\n+ if (this._hoveredComponentMeasure === hoveredEvent) {\n+ return;\n+ }\n+ this._hoveredComponentMeasure = hoveredEvent;\n+ this.setNeedsDisplay();\n+ }\n+\n+ \/**\n+ * Draw a single `ReactComponentMeasure` as a box\/span with text inside of it.\n+ *\/\n+ _drawSingleReactComponentMeasure(\n+ context: CanvasRenderingContext2D,\n+ rect: Rect,\n+ componentMeasure: ReactComponentMeasure,\n+ scaleFactor: number,\n+ showHoverHighlight: boolean,\n+ ): boolean {\n+ const {frame} = this;\n+ const {componentName, duration, timestamp, warning} = componentMeasure;\n+\n+ const xStart = timestampToPosition(timestamp, scaleFactor, frame);\n+ const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);\n+ const componentMeasureRect: Rect = {\n+ origin: {\n+ x: xStart,\n+ y: frame.origin.y,\n+ },\n+ size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},\n+ };\n+ if (!rectIntersectsRect(componentMeasureRect, rect)) {\n+ return false; \/\/ Not in view\n+ }\n+\n+ const width = durationToWidth(duration, scaleFactor);\n+ if (width < 1) {\n+ return false; \/\/ Too small to render at this zoom level\n+ }\n+\n+ const drawableRect = intersectionOfRects(componentMeasureRect, rect);\n+ context.beginPath();\n+ if (warning !== null) {\n+ context.fillStyle = showHoverHighlight\n+ ? COLORS.WARNING_BACKGROUND_HOVER\n+ : COLORS.WARNING_BACKGROUND;\n+ } else {\n+ context.fillStyle = showHoverHighlight\n+ ? COLORS.REACT_COMPONENT_MEASURE_HOVER\n+ : COLORS.REACT_COMPONENT_MEASURE;\n+ }\n+ context.fillRect(\n+ drawableRect.origin.x,\n+ drawableRect.origin.y,\n+ drawableRect.size.width,\n+ drawableRect.size.height,\n+ );\n+\n+ const label = `${componentName} rendered - ${formatDuration(duration)}`;\n+\n+ drawText(label, context, componentMeasureRect, drawableRect);\n+\n+ return true;\n+ }\n+\n+ draw(context: CanvasRenderingContext2D) {\n+ const {\n+ frame,\n+ _profilerData: {componentMeasures},\n+ _hoveredComponentMeasure,\n+ visibleArea,\n+ } = this;\n+\n+ context.fillStyle = COLORS.BACKGROUND;\n+ context.fillRect(\n+ visibleArea.origin.x,\n+ visibleArea.origin.y,\n+ visibleArea.size.width,\n+ visibleArea.size.height,\n+ );\n+\n+ \/\/ Draw events\n+ const scaleFactor = positioningScaleFactor(\n+ this._intrinsicSize.width,\n+ frame,\n+ );\n+\n+ let didDrawMeasure = false;\n+ componentMeasures.forEach(componentMeasure => {\n+ didDrawMeasure =\n+ this._drawSingleReactComponentMeasure(\n+ context,\n+ visibleArea,\n+ componentMeasure,\n+ scaleFactor,\n+ componentMeasure === _hoveredComponentMeasure,\n+ ) || didDrawMeasure;\n+ });\n+\n+ if (!didDrawMeasure) {\n+ drawText(\n+ '(zoom or pan to see React components)',\n+ context,\n+ visibleArea,\n+ visibleArea,\n+ 'center',\n+ COLORS.TEXT_DIM_COLOR,\n+ );\n+ }\n+\n+ context.fillStyle = COLORS.PRIORITY_BORDER;\n+ context.fillRect(\n+ visibleArea.origin.x,\n+ visibleArea.origin.y + ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,\n+ visibleArea.size.width,\n+ BORDER_SIZE,\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 componentMeasures = this._profilerData.componentMeasures;\n+ for (let index = componentMeasures.length - 1; index >= 0; index--) {\n+ const componentMeasure = componentMeasures[index];\n+ const {duration, timestamp} = componentMeasure;\n+\n+ if (\n+ hoverTimestamp >= timestamp &&\n+ hoverTimestamp <= timestamp + duration\n+ ) {\n+ this.currentCursor = 'context-menu';\n+ viewRefs.hoveredView = this;\n+ onHover(componentMeasure);\n+ return;\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\/FlamechartView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/FlamechartView.js\nindex 57cd8ae1f3..86f411a5b6 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@@ -128,7 +128,7 @@ class FlamechartStackLayerView extends View {\n visibleArea,\n } = this;\n \n- context.fillStyle = COLORS.BACKGROUND;\n+ context.fillStyle = COLORS.PRIORITY_BACKGROUND;\n context.fillRect(\n visibleArea.origin.x,\n visibleArea.origin.y,\n@@ -172,7 +172,29 @@ class FlamechartStackLayerView extends View {\n drawableRect.size.height,\n );\n \n- drawText(name, context, nodeRect, drawableRect, width);\n+ drawText(name, context, nodeRect, drawableRect);\n+ }\n+\n+ \/\/ Render bottom border.\n+ const borderFrame: Rect = {\n+ origin: {\n+ x: frame.origin.x,\n+ y: frame.origin.y + FLAMECHART_FRAME_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(borderFrame, visibleArea);\n+ context.fillStyle = COLORS.PRIORITY_BORDER;\n+ context.fillRect(\n+ borderDrawableRect.origin.x,\n+ borderDrawableRect.origin.y,\n+ borderDrawableRect.size.width,\n+ borderDrawableRect.size.height,\n+ );\n }\n }\n \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 34424e7b5b..29e2535de6 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@@ -143,7 +143,7 @@ export class NativeEventsView extends View {\n \n const label = `${type} - ${formatDuration(duration)}`;\n \n- drawText(label, context, eventRect, drawableRect, width);\n+ drawText(label, context, eventRect, drawableRect);\n }\n \n draw(context: CanvasRenderingContext2D) {\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\nindex 5b0d0f2d51..db234e4ceb 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\n@@ -231,7 +231,7 @@ export class SuspenseEventsView extends View {\n label += ` - ${formatDuration(duration)}`;\n }\n \n- drawText(label, context, eventRect, drawableRect, width);\n+ drawText(label, context, eventRect, drawableRect);\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 214cf26d7b..ec8fec8d1e 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@@ -50,6 +50,8 @@ export let COLORS = {\n PRIORITY_LABEL: '',\n USER_TIMING: '',\n USER_TIMING_HOVER: '',\n+ REACT_COMPONENT_MEASURE: '',\n+ REACT_COMPONENT_MEASURE_HOVER: '',\n REACT_IDLE: '',\n REACT_IDLE_HOVER: '',\n REACT_RENDER: '',\n@@ -75,6 +77,7 @@ export let COLORS = {\n REACT_WORK_BORDER: '',\n SCROLL_CARET: '',\n TEXT_COLOR: '',\n+ TEXT_DIM_COLOR: '',\n TIME_MARKER_LABEL: '',\n WARNING_BACKGROUND: '',\n WARNING_BACKGROUND_HOVER: '',\n@@ -111,6 +114,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {\n USER_TIMING_HOVER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-user-timing-hover',\n ),\n+ REACT_COMPONENT_MEASURE: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-react-render',\n+ ),\n+ REACT_COMPONENT_MEASURE_HOVER: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-react-render-hover',\n+ ),\n REACT_IDLE: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-react-idle',\n ),\n@@ -182,6 +191,9 @@ export function updateColorsToMatchTheme(element: Element): boolean {\n TEXT_COLOR: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-text-color',\n ),\n+ TEXT_DIM_COLOR: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-text-dim-color',\n+ ),\n TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),\n WARNING_BACKGROUND: computedStyle.getPropertyValue(\n '--color-warning-background',\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 588f3e5d7b..fc1f4eabd4 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@@ -7,6 +7,7 @@\n * @flow\n *\/\n \n+export * from '.\/ComponentMeasuresView';\n export * from '.\/FlamechartView';\n export * from '.\/NativeEventsView';\n export * from '.\/ReactMeasuresView';\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 da14733bce..229b9f50f8 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@@ -41,11 +41,10 @@ export function drawText(\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+ if (fullRect.size.width > TEXT_PADDING * 2) {\n context.textAlign = textAlign;\n context.textBaseline = 'middle';\n context.font = `${FONT_SIZE}px sans-serif`;\n@@ -55,7 +54,7 @@ export function drawText(\n const trimmedName = trimText(\n context,\n text,\n- availableWidth - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n+ fullRect.size.width - TEXT_PADDING * 2 + (x < 0 ? x : 0),\n );\n \n if (trimmedName !== null) {\n@@ -81,7 +80,7 @@ export function drawText(\n \n let textX;\n if (textAlign === 'center') {\n- textX = x + availableWidth \/ 2 + TEXT_PADDING - (x < 0 ? x : 0);\n+ textX = x + fullRect.size.width \/ 2 + TEXT_PADDING - (x < 0 ? x : 0);\n } else {\n textX = x + TEXT_PADDING - (x < 0 ? x : 0);\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 bb10bca4d8..f47200c6f0 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@@ -203,6 +203,7 @@ describe(preprocessData, () => {\n });\n \n expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({\n+ componentMeasures: [],\n duration: 0.002,\n flamechart: [],\n measures: [],\n@@ -259,6 +260,7 @@ describe(preprocessData, () => {\n }),\n ]),\n ).toStrictEqual({\n+ componentMeasures: [],\n duration: 0.008,\n flamechart: [],\n measures: [\n@@ -323,6 +325,7 @@ describe(preprocessData, () => {\n \n const userTimingData = createUserTimingData(clearedMarks);\n expect(preprocessData(userTimingData)).toStrictEqual({\n+ componentMeasures: [],\n duration: 0.011,\n flamechart: [],\n measures: [\n@@ -405,13 +408,27 @@ describe(preprocessData, () => {\n \n const userTimingData = createUserTimingData(clearedMarks);\n expect(preprocessData(userTimingData)).toStrictEqual({\n- duration: 0.022,\n+ componentMeasures: [\n+ {\n+ componentName: 'App',\n+ duration: 0.001,\n+ timestamp: 0.007,\n+ warning: null,\n+ },\n+ {\n+ componentName: 'App',\n+ duration: 0.0010000000000000009,\n+ timestamp: 0.018,\n+ warning: null,\n+ },\n+ ],\n+ duration: 0.026,\n flamechart: [],\n measures: [\n {\n batchUID: 0,\n depth: 0,\n- duration: 0.004999999999999999,\n+ duration: 0.006999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n timestamp: 0.006,\n@@ -420,7 +437,7 @@ describe(preprocessData, () => {\n {\n batchUID: 0,\n depth: 0,\n- duration: 0.001,\n+ duration: 0.002999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n timestamp: 0.006,\n@@ -432,7 +449,7 @@ describe(preprocessData, () => {\n duration: 0.002999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.008,\n+ timestamp: 0.01,\n type: 'commit',\n },\n {\n@@ -441,7 +458,7 @@ describe(preprocessData, () => {\n duration: 0.0010000000000000009,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.009,\n+ timestamp: 0.011,\n type: 'layout-effects',\n },\n {\n@@ -450,25 +467,25 @@ describe(preprocessData, () => {\n duration: 0.002,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.012,\n+ timestamp: 0.014,\n type: 'passive-effects',\n },\n {\n batchUID: 1,\n depth: 0,\n- duration: 0.005000000000000001,\n+ duration: 0.006999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.015,\n+ timestamp: 0.017,\n type: 'render-idle',\n },\n {\n batchUID: 1,\n depth: 0,\n- duration: 0.0010000000000000009,\n+ duration: 0.002999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.015,\n+ timestamp: 0.017,\n type: 'render',\n },\n {\n@@ -477,7 +494,7 @@ describe(preprocessData, () => {\n duration: 0.002999999999999999,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.017,\n+ timestamp: 0.021,\n type: 'commit',\n },\n {\n@@ -486,7 +503,7 @@ describe(preprocessData, () => {\n duration: 0.0010000000000000009,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.018,\n+ timestamp: 0.022,\n type: 'layout-effects',\n },\n {\n@@ -495,7 +512,7 @@ describe(preprocessData, () => {\n duration: 0.0009999999999999974,\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.021,\n+ timestamp: 0.025,\n type: 'passive-effects',\n },\n ],\n@@ -522,7 +539,7 @@ describe(preprocessData, () => {\n componentName: 'App',\n laneLabels: ['Default'],\n lanes: [4],\n- timestamp: 0.013,\n+ timestamp: 0.015,\n type: 'schedule-state-update',\n warning: null,\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 a365be1208..d3d47e111b 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@@ -18,6 +18,7 @@ import type {\n Flamechart,\n NativeEvent,\n ReactLane,\n+ ReactComponentMeasure,\n ReactMeasureType,\n ReactProfilerData,\n SuspenseEvent,\n@@ -36,6 +37,7 @@ type MeasureStackElement = {|\n \n type ProcessorState = {|\n batchUID: BatchUID,\n+ currentReactComponentMeasure: ReactComponentMeasure | null,\n measureStack: MeasureStackElement[],\n nativeEventStack: NativeEvent[],\n nextRenderShouldGenerateNewBatchID: boolean,\n@@ -240,8 +242,32 @@ function processTimelineEvent(\n case 'blink.user_timing':\n const startTime = (ts - currentProfilerData.startTime) \/ 1000;\n \n- \/\/ React Events - schedule\n- if (name.startsWith('--schedule-render-')) {\n+ if (name.startsWith('--component-render-start-')) {\n+ const [componentName] = name.substr(25).split('-');\n+\n+ if (state.currentReactComponentMeasure !== null) {\n+ console.error(\n+ 'Render started while another render in progress:',\n+ state.currentReactComponentMeasure,\n+ );\n+ }\n+\n+ state.currentReactComponentMeasure = {\n+ componentName,\n+ timestamp: startTime,\n+ duration: 0,\n+ warning: null,\n+ };\n+ } else if (name === '--component-render-stop') {\n+ if (state.currentReactComponentMeasure !== null) {\n+ const componentMeasure = state.currentReactComponentMeasure;\n+ componentMeasure.duration = startTime - componentMeasure.timestamp;\n+\n+ state.currentReactComponentMeasure = null;\n+\n+ currentProfilerData.componentMeasures.push(componentMeasure);\n+ }\n+ } else if (name.startsWith('--schedule-render-')) {\n const [laneBitmaskString, laneLabels] = name.substr(18).split('-');\n currentProfilerData.schedulingEvents.push({\n type: 'schedule-render',\n@@ -581,6 +607,7 @@ export default function preprocessData(\n const flamechart = preprocessFlamechart(timeline);\n \n const profilerData: ReactProfilerData = {\n+ componentMeasures: [],\n duration: 0,\n flamechart,\n measures: [],\n@@ -619,6 +646,7 @@ export default function preprocessData(\n \n const state: ProcessorState = {\n batchUID: 0,\n+ currentReactComponentMeasure: null,\n measureStack: [],\n nativeEventStack: [],\n nextRenderShouldGenerateNewBatchID: true,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 674dabdc8e..106e404836 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,13 @@ export type ReactMeasure = {|\n +depth: number,\n |};\n \n+export type ReactComponentMeasure = {|\n+ +componentName: string,\n+ duration: Milliseconds,\n+ +timestamp: Milliseconds,\n+ warning: string | null,\n+|};\n+\n \/**\n * A flamechart stack frame belonging to a stack trace.\n *\/\n@@ -117,6 +124,7 @@ export type FlamechartStackLayer = FlamechartStackFrame[];\n export type Flamechart = FlamechartStackLayer[];\n \n export type ReactProfilerData = {|\n+ componentMeasures: ReactComponentMeasure[],\n duration: number,\n flamechart: Flamechart,\n measures: ReactMeasure[],\n@@ -128,6 +136,7 @@ export type ReactProfilerData = {|\n |};\n \n export type ReactHoverContextInfo = {|\n+ componentMeasure: ReactComponentMeasure | null,\n data: $ReadOnly | null,\n flamechartStackFrame: FlamechartStackFrame | null,\n measure: ReactMeasure | null,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\nindex 80527a193c..1b99d20a54 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js\n@@ -110,7 +110,6 @@ class ResizeBar extends View {\n context,\n labelRect,\n drawableRect,\n- visibleArea.size.width,\n 'center',\n COLORS.REACT_RESIZE_BAR_DOT,\n );\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex a4b742a3fb..8afcf85d41 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -164,6 +164,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n '--color-scheduling-profiler-text-color': '#000000',\n+ '--color-scheduling-profiler-text-dim-color': '#ccc',\n '--color-scheduling-profiler-react-work-border': '#ffffff',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\n@@ -293,7 +294,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',\n '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n- '--color-scheduling-profiler-text-color': '#000000',\n+ '--color-scheduling-profiler-text-color': '#282c34',\n+ '--color-scheduling-profiler-text-dim-color': '#555b66',\n '--color-scheduling-profiler-react-work-border': '#ffffff',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\nindex f07d4e7d77..a6abd38712 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ClearProfilingDataButton.js\n@@ -8,22 +8,41 @@\n *\/\n \n import * as React from 'react';\n-import {useCallback, useContext} from 'react';\n+import {useContext} from 'react';\n import {ProfilerContext} from '.\/ProfilerContext';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import {StoreContext} from '..\/context';\n+import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler\/src\/SchedulingProfilerContext';\n \n export default function ClearProfilingDataButton() {\n const store = useContext(StoreContext);\n- const {didRecordCommits, isProfiling} = useContext(ProfilerContext);\n+ const {didRecordCommits, isProfiling, selectedTabID} = useContext(\n+ ProfilerContext,\n+ );\n+ const {clearSchedulingProfilerData, schedulingProfilerData} = useContext(\n+ SchedulingProfilerContext,\n+ );\n const {profilerStore} = store;\n \n- const clear = useCallback(() => profilerStore.clear(), [profilerStore]);\n+ let doesHaveData = false;\n+ if (selectedTabID === 'scheduling-profiler') {\n+ doesHaveData = schedulingProfilerData !== null;\n+ } else {\n+ doesHaveData = didRecordCommits;\n+ }\n+\n+ const clear = () => {\n+ if (selectedTabID === 'scheduling-profiler') {\n+ clearSchedulingProfilerData();\n+ } else {\n+ profilerStore.clear();\n+ }\n+ };\n \n return (\n \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 f7c6975520..2973fbf395 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@@ -103,8 +103,16 @@ function Profiler(_: {||}) {\n

\n- \n- \n+ \n+ \n \n \n

\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\nindex a54804bdce..6d7443698a 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/ReloadAndProfileButton.js\n@@ -19,7 +19,11 @@ type SubscriptionData = {|\n supportsReloadAndProfile: boolean,\n |};\n \n-export default function ReloadAndProfileButton() {\n+export default function ReloadAndProfileButton({\n+ disabled,\n+}: {|\n+ disabled: boolean,\n+|}) {\n const bridge = useContext(BridgeContext);\n const store = useContext(StoreContext);\n \n@@ -61,7 +65,7 @@ export default function ReloadAndProfileButton() {\n \n return (\n \n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 2321b97ff8..a687e9d163 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -31,7 +31,10 @@ import type {\n import type {UpdateQueue} from '.\/ReactUpdateQueue.new';\n \n import checkPropTypes from 'shared\/checkPropTypes';\n-\n+import {\n+ markComponentRenderStarted,\n+ markComponentRenderStopped,\n+} from '.\/SchedulingProfiler';\n import {\n IndeterminateComponent,\n FunctionComponent,\n@@ -85,6 +88,7 @@ import {\n enableCache,\n enableLazyContextPropagation,\n enableSuspenseLayoutEffectSemantics,\n+ enableSchedulingProfiler,\n } from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n import isArray from 'shared\/isArray';\n@@ -357,6 +361,9 @@ function updateForwardRef(\n \/\/ The rest is a fork of updateFunctionComponent\n let nextChildren;\n prepareToReadContext(workInProgress, renderLanes);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n setIsRendering(true);\n@@ -397,6 +404,9 @@ function updateForwardRef(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n if (current !== null && !didReceiveUpdate) {\n bailoutHooks(current, workInProgress, renderLanes);\n@@ -958,6 +968,9 @@ function updateFunctionComponent(\n \n let nextChildren;\n prepareToReadContext(workInProgress, renderLanes);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n setIsRendering(true);\n@@ -998,6 +1011,9 @@ function updateFunctionComponent(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n if (current !== null && !didReceiveUpdate) {\n bailoutHooks(current, workInProgress, renderLanes);\n@@ -1177,6 +1193,9 @@ function finishClassComponent(\n stopProfilerTimerIfRunning(workInProgress);\n }\n } else {\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n setIsRendering(true);\n nextChildren = instance.render();\n@@ -1195,6 +1214,9 @@ function finishClassComponent(\n } else {\n nextChildren = instance.render();\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n }\n \n \/\/ React DevTools reads this flag.\n@@ -1567,6 +1589,9 @@ function mountIndeterminateComponent(\n prepareToReadContext(workInProgress, renderLanes);\n let value;\n \n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n if (\n Component.prototype &&\n@@ -1610,6 +1635,10 @@ function mountIndeterminateComponent(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n+\n \/\/ React DevTools reads this flag.\n workInProgress.flags |= PerformedWork;\n \n@@ -3195,6 +3224,9 @@ function updateContextConsumer(\n \n prepareToReadContext(workInProgress, renderLanes);\n const newValue = readContext(context);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n let newChildren;\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n@@ -3204,6 +3236,9 @@ function updateContextConsumer(\n } else {\n newChildren = render(newValue);\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n \/\/ React DevTools reads this flag.\n workInProgress.flags |= PerformedWork;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex dc66340f70..a1153497c5 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -31,7 +31,10 @@ import type {\n import type {UpdateQueue} from '.\/ReactUpdateQueue.old';\n \n import checkPropTypes from 'shared\/checkPropTypes';\n-\n+import {\n+ markComponentRenderStarted,\n+ markComponentRenderStopped,\n+} from '.\/SchedulingProfiler';\n import {\n IndeterminateComponent,\n FunctionComponent,\n@@ -85,6 +88,7 @@ import {\n enableCache,\n enableLazyContextPropagation,\n enableSuspenseLayoutEffectSemantics,\n+ enableSchedulingProfiler,\n } from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n import isArray from 'shared\/isArray';\n@@ -357,6 +361,9 @@ function updateForwardRef(\n \/\/ The rest is a fork of updateFunctionComponent\n let nextChildren;\n prepareToReadContext(workInProgress, renderLanes);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n setIsRendering(true);\n@@ -397,6 +404,9 @@ function updateForwardRef(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n if (current !== null && !didReceiveUpdate) {\n bailoutHooks(current, workInProgress, renderLanes);\n@@ -958,6 +968,9 @@ function updateFunctionComponent(\n \n let nextChildren;\n prepareToReadContext(workInProgress, renderLanes);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n setIsRendering(true);\n@@ -998,6 +1011,9 @@ function updateFunctionComponent(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n if (current !== null && !didReceiveUpdate) {\n bailoutHooks(current, workInProgress, renderLanes);\n@@ -1177,6 +1193,9 @@ function finishClassComponent(\n stopProfilerTimerIfRunning(workInProgress);\n }\n } else {\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n setIsRendering(true);\n nextChildren = instance.render();\n@@ -1195,6 +1214,9 @@ function finishClassComponent(\n } else {\n nextChildren = instance.render();\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n }\n \n \/\/ React DevTools reads this flag.\n@@ -1567,6 +1589,9 @@ function mountIndeterminateComponent(\n prepareToReadContext(workInProgress, renderLanes);\n let value;\n \n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n if (__DEV__) {\n if (\n Component.prototype &&\n@@ -1610,6 +1635,10 @@ function mountIndeterminateComponent(\n renderLanes,\n );\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n+\n \/\/ React DevTools reads this flag.\n workInProgress.flags |= PerformedWork;\n \n@@ -3195,6 +3224,9 @@ function updateContextConsumer(\n \n prepareToReadContext(workInProgress, renderLanes);\n const newValue = readContext(context);\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStarted(workInProgress);\n+ }\n let newChildren;\n if (__DEV__) {\n ReactCurrentOwner.current = workInProgress;\n@@ -3204,6 +3236,9 @@ function updateContextConsumer(\n } else {\n newChildren = render(newValue);\n }\n+ if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n+ }\n \n \/\/ React DevTools reads this flag.\n workInProgress.flags |= PerformedWork;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\nindex cfe900de65..79b0ed6bc3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n@@ -70,7 +70,10 @@ import {\n import {propagateParentContextChangesToDeferredTree} from '.\/ReactFiberNewContext.new';\n import {logCapturedError} from '.\/ReactFiberErrorLogger';\n import {logComponentSuspended} from '.\/DebugTracing';\n-import {markComponentSuspended} from '.\/SchedulingProfiler';\n+import {\n+ markComponentRenderStopped,\n+ markComponentSuspended,\n+} from '.\/SchedulingProfiler';\n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.new';\n import {\n SyncLane,\n@@ -244,6 +247,7 @@ function throwException(\n }\n \n if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\nindex d7f4803620..9c2df828f8 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n@@ -70,7 +70,10 @@ import {\n import {propagateParentContextChangesToDeferredTree} from '.\/ReactFiberNewContext.old';\n import {logCapturedError} from '.\/ReactFiberErrorLogger';\n import {logComponentSuspended} from '.\/DebugTracing';\n-import {markComponentSuspended} from '.\/SchedulingProfiler';\n+import {\n+ markComponentRenderStopped,\n+ markComponentSuspended,\n+} from '.\/SchedulingProfiler';\n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.old';\n import {\n SyncLane,\n@@ -244,6 +247,7 @@ function throwException(\n }\n \n if (enableSchedulingProfiler) {\n+ markComponentRenderStopped();\n markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/SchedulingProfiler.js b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\nindex 2ab49efe0e..fc7a7499c6 100644\n--- a\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n+++ b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n@@ -97,6 +97,23 @@ export function markCommitStopped(): void {\n }\n }\n \n+export function markComponentRenderStarted(fiber: Fiber): void {\n+ if (enableSchedulingProfiler) {\n+ if (supportsUserTimingV3) {\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n+ markAndClear(`--component-render-start-${componentName}`);\n+ }\n+ }\n+}\n+\n+export function markComponentRenderStopped(): void {\n+ if (enableSchedulingProfiler) {\n+ if (supportsUserTimingV3) {\n+ markAndClear('--component-render-stop');\n+ }\n+ }\n+}\n+\n const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n \n \/\/ $FlowFixMe: Flow cannot handle polymorphic WeakMaps\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\nindex 62da05e0e8..4b496b732a 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/SchedulingProfiler-test.internal.js\n@@ -174,6 +174,8 @@ describe('SchedulingProfiler', () => {\n `--react-init-${ReactVersion}`,\n `--schedule-render-${formatLanes(ReactFiberLane.TransitionLane1)}`,\n `--render-start-${formatLanes(ReactFiberLane.TransitionLane1)}`,\n+ '--component-render-start-Foo',\n+ '--component-render-stop',\n '--render-yield',\n ]);\n } else {\n@@ -208,6 +210,8 @@ describe('SchedulingProfiler', () => {\n `--react-init-${ReactVersion}`,\n `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,\n `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--suspense-suspend-0-Example-mount-1-Sync',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n@@ -239,6 +243,8 @@ describe('SchedulingProfiler', () => {\n `--react-init-${ReactVersion}`,\n `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,\n `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--suspense-suspend-0-Example-mount-1-Sync',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n@@ -278,6 +284,8 @@ describe('SchedulingProfiler', () => {\n \n expectMarksToEqual([\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--suspense-suspend-0-Example-mount-16-Default',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n@@ -317,6 +325,8 @@ describe('SchedulingProfiler', () => {\n \n expectMarksToEqual([\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--suspense-suspend-0-Example-mount-16-Default',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n@@ -356,12 +366,16 @@ describe('SchedulingProfiler', () => {\n \n expectMarksToEqual([\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,\n '--layout-effects-stop',\n `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n '--commit-stop',\n@@ -393,6 +407,8 @@ describe('SchedulingProfiler', () => {\n \n expectMarksToEqual([\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n@@ -401,6 +417,8 @@ describe('SchedulingProfiler', () => {\n )}-Example`,\n '--layout-effects-stop',\n `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n '--commit-stop',\n@@ -495,12 +513,16 @@ describe('SchedulingProfiler', () => {\n \n expectMarksToEqual([\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,\n '--layout-effects-stop',\n `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,\n '--commit-stop',\n@@ -528,6 +550,8 @@ describe('SchedulingProfiler', () => {\n `--react-init-${ReactVersion}`,\n `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n@@ -539,6 +563,8 @@ describe('SchedulingProfiler', () => {\n )}-Example`,\n '--passive-effects-stop',\n `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n+ '--component-render-start-Example',\n+ '--component-render-stop',\n '--render-stop',\n `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,\n '--commit-stop',\n"}

dillon1000/react

Files changed