Set default height for resizable views

facebook · Jul 31, 2021 · 1f476f3 · 1f476f3
1 parent 9c656f2
commit 1f476f3
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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<ReactLane, ReactMeasure[]>;
@@ -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
@@ -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<number, SuspenseEvent[]>;
   _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
@@ -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
@@ -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
@@ -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|}>;
 
 /**