diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js index edf50eec0163a..fff6daa69d03e 100644 --- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js +++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js @@ -292,7 +292,12 @@ export class FlamechartView extends View { desiredSize() { // Ignore the wishes of the background color view - return this._verticalStackView.desiredSize(); + const intrinsicSize = this._verticalStackView.desiredSize(); + return { + ...intrinsicSize, + // Collapsed by default + maxInitialHeight: 0, + }; } /** diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js index 98dc538bce5bf..b980441b5c96e 100644 --- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js +++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js @@ -12,7 +12,7 @@ import type { Interaction, MouseMoveInteraction, Rect, - Size, + SizeWithMaxHeight, ViewRefs, } from '../view-base'; @@ -34,6 +34,7 @@ import {COLORS, BORDER_SIZE, REACT_MEASURE_HEIGHT} from './constants'; import {REACT_TOTAL_NUM_LANES} from '../constants'; const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE; +const MAX_ROWS_TO_SHOW_INITIALLY = 5; function getMeasuresForLane( allMeasures: ReactMeasure[], @@ -44,7 +45,7 @@ function getMeasuresForLane( export class ReactMeasuresView extends View { _profilerData: ReactProfilerData; - _intrinsicSize: Size; + _intrinsicSize: SizeWithMaxHeight; _lanesToRender: ReactLane[]; _laneToMeasures: Map; @@ -77,6 +78,7 @@ export class ReactMeasuresView extends View { this._intrinsicSize = { width: this._profilerData.duration, height: this._lanesToRender.length * REACT_LANE_HEIGHT, + maxInitialHeight: MAX_ROWS_TO_SHOW_INITIALLY * REACT_LANE_HEIGHT, }; } diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js index f3071d95ce9e3..1601a7bba753c 100644 --- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js +++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js @@ -12,7 +12,7 @@ import type { Interaction, MouseMoveInteraction, Rect, - Size, + SizeWithMaxHeight, ViewRefs, } from '../view-base'; @@ -40,11 +40,12 @@ import { } from './constants'; const ROW_WITH_BORDER_HEIGHT = SUSPENSE_EVENT_HEIGHT + BORDER_SIZE; +const MAX_ROWS_TO_SHOW_INITIALLY = 3; export class SuspenseEventsView extends View { _depthToSuspenseEvent: Map; _hoveredEvent: SuspenseEvent | null = null; - _intrinsicSize: Size; + _intrinsicSize: SizeWithMaxHeight; _maxDepth: number = 0; _profilerData: ReactProfilerData; @@ -79,6 +80,7 @@ export class SuspenseEventsView extends View { this._intrinsicSize = { width: duration, height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT, + maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY, }; } diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js index 98cecc66c7cfa..970371414a1dd 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js @@ -242,7 +242,12 @@ export class ResizableView extends View { // Maybe that or set some % based default so all panels are visible to begin with. const subviewDesiredSize = subview.desiredSize(); this._updateLayoutStateAndResizeBar( - subviewDesiredSize ? subviewDesiredSize.height : 0, + subviewDesiredSize.maxInitialHeight != null + ? Math.min( + subviewDesiredSize.maxInitialHeight, + subviewDesiredSize.height, + ) + : subviewDesiredSize.height, ); } diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js index b72532d75e314..bd0cd64b03739 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js @@ -8,7 +8,7 @@ */ import type {Interaction} from './useCanvasInteraction'; -import type {Rect, Size} from './geometry'; +import type {Rect, Size, SizeWithMaxHeight} from './geometry'; import type {Layouter} from './layouter'; import type {ViewRefs} from './Surface'; @@ -140,7 +140,7 @@ export class View { * * Can be overridden by subclasses. */ - desiredSize(): Size { + desiredSize(): Size | SizeWithMaxHeight { if (this._needsDisplay) { this.layoutSubviews(); } diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js index b027b708f0cfb..df15c934738f1 100644 --- a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js +++ b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js @@ -9,6 +9,10 @@ export type Point = $ReadOnly<{|x: number, y: number|}>; export type Size = $ReadOnly<{|width: number, height: number|}>; +export type SizeWithMaxHeight = {| + ...Size, + maxInitialHeight?: number, +|}; export type Rect = $ReadOnly<{|origin: Point, size: Size|}>; /**