{"body":"","patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex b35628a705..05700d6431 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -230,18 +230,21 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n schedulingEventsViewRef.current = schedulingEventsView;\n const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);\n \n- const suspenseEventsView = new SuspenseEventsView(\n- surface,\n- defaultFrame,\n- data,\n- );\n- suspenseEventsViewRef.current = suspenseEventsView;\n- const suspenseEventsViewWrapper = createViewHelper(\n- suspenseEventsView,\n- 'suspense',\n- true,\n- true,\n- );\n+ let suspenseEventsViewWrapper = null;\n+ if (data.suspenseEvents.length > 0) {\n+ const suspenseEventsView = new SuspenseEventsView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ suspenseEventsViewRef.current = suspenseEventsView;\n+ suspenseEventsViewWrapper = createViewHelper(\n+ suspenseEventsView,\n+ 'suspense',\n+ true,\n+ true,\n+ );\n+ }\n \n const reactMeasuresView = new ReactMeasuresView(\n surface,\n@@ -286,7 +289,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n }\n rootView.addSubview(nativeEventsViewWrapper);\n rootView.addSubview(schedulingEventsViewWrapper);\n- rootView.addSubview(suspenseEventsViewWrapper);\n+ if (suspenseEventsViewWrapper !== null) {\n+ rootView.addSubview(suspenseEventsViewWrapper);\n+ }\n rootView.addSubview(reactMeasuresViewWrapper);\n rootView.addSubview(flamechartViewWrapper);\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 98e388c52a..34424e7b5b 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@@ -10,9 +10,9 @@\n import type {NativeEvent, ReactProfilerData} from '..\/types';\n import type {\n Interaction,\n+ IntrinsicSize,\n MouseMoveInteraction,\n Rect,\n- Size,\n ViewRefs,\n } from '..\/view-base';\n \n@@ -38,7 +38,7 @@ const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;\n export class NativeEventsView extends View {\n _depthToNativeEvent: Map;\n _hoveredEvent: NativeEvent | null = null;\n- _intrinsicSize: Size;\n+ _intrinsicSize: IntrinsicSize;\n _maxDepth: number = 0;\n _profilerData: ReactProfilerData;\n \n@@ -73,6 +73,7 @@ export class NativeEventsView extends View {\n this._intrinsicSize = {\n width: duration,\n height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,\n+ hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,\n };\n }\n \n@@ -239,7 +240,6 @@ export class NativeEventsView extends View {\n hoverTimestamp <= timestamp + duration\n ) {\n viewRefs.hoveredView = this;\n-\n onHover(nativeEvent);\n return;\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\nindex 96790b2a28..f8e4cb99b9 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n@@ -10,9 +10,9 @@\n import type {ReactLane, ReactMeasure, ReactProfilerData} from '..\/types';\n import type {\n Interaction,\n+ IntrinsicSize,\n MouseMoveInteraction,\n Rect,\n- SizeWithMaxHeight,\n ViewRefs,\n } from '..\/view-base';\n \n@@ -45,7 +45,7 @@ function getMeasuresForLane(\n \n export class ReactMeasuresView extends View {\n _profilerData: ReactProfilerData;\n- _intrinsicSize: SizeWithMaxHeight;\n+ _intrinsicSize: IntrinsicSize;\n \n _lanesToRender: ReactLane[];\n _laneToMeasures: Map;\n@@ -78,6 +78,7 @@ export class ReactMeasuresView extends View {\n this._intrinsicSize = {\n width: this._profilerData.duration,\n height: this._lanesToRender.length * REACT_LANE_HEIGHT,\n+ hideScrollBarIfLessThanHeight: REACT_LANE_HEIGHT,\n maxInitialHeight: MAX_ROWS_TO_SHOW_INITIALLY * REACT_LANE_HEIGHT,\n };\n }\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 3d85ffd4e2..5b0d0f2d51 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@@ -10,9 +10,9 @@\n import type {SuspenseEvent, ReactProfilerData} from '..\/types';\n import type {\n Interaction,\n+ IntrinsicSize,\n MouseMoveInteraction,\n Rect,\n- SizeWithMaxHeight,\n ViewRefs,\n } from '..\/view-base';\n \n@@ -45,7 +45,7 @@ const MAX_ROWS_TO_SHOW_INITIALLY = 3;\n export class SuspenseEventsView extends View {\n _depthToSuspenseEvent: Map;\n _hoveredEvent: SuspenseEvent | null = null;\n- _intrinsicSize: SizeWithMaxHeight;\n+ _intrinsicSize: IntrinsicSize;\n _maxDepth: number = 0;\n _profilerData: ReactProfilerData;\n \ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\nindex 2249d3841a..36c24091ac 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js\n@@ -224,7 +224,6 @@ export class UserTimingMarksView extends View {\n timestamp - timestampAllowance <= hoverTimestamp &&\n hoverTimestamp <= timestamp + timestampAllowance\n ) {\n- this.currentCursor = 'context-menu';\n viewRefs.hoveredView = this;\n onHover(mark);\n return;\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 54a3b05c1a..80527a193c 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@@ -255,12 +255,21 @@ export class ResizableView extends View {\n }\n \n desiredSize() {\n- const resizeBarDesiredSize = this._resizeBar.desiredSize();\n+ const subviewDesiredSize = this._subview.desiredSize();\n \n- return {\n- width: this.frame.size.width,\n- height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,\n- };\n+ if (this._shouldRenderResizeBar()) {\n+ const resizeBarDesiredSize = this._resizeBar.desiredSize();\n+\n+ return {\n+ width: this.frame.size.width,\n+ height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,\n+ };\n+ } else {\n+ return {\n+ width: this.frame.size.width,\n+ height: subviewDesiredSize.height,\n+ };\n+ }\n }\n \n layoutSubviews() {\n@@ -270,6 +279,14 @@ export class ResizableView extends View {\n super.layoutSubviews();\n }\n \n+ _shouldRenderResizeBar() {\n+ const subviewDesiredSize = this._subview.desiredSize();\n+ return subviewDesiredSize.hideScrollBarIfLessThanHeight != null\n+ ? subviewDesiredSize.height >\n+ subviewDesiredSize.hideScrollBarIfLessThanHeight\n+ : true;\n+ }\n+\n _updateLayoutStateAndResizeBar(barOffsetY: number) {\n if (barOffsetY <= RESIZE_BAR_WITH_LABEL_HEIGHT - RESIZE_BAR_HEIGHT) {\n barOffsetY = 0;\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\nindex a43a733fd4..206721cdd3 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js\n@@ -8,7 +8,7 @@\n *\/\n \n import type {Interaction} from '.\/useCanvasInteraction';\n-import type {Rect, Size, SizeWithMaxHeight} from '.\/geometry';\n+import type {IntrinsicSize, Rect, Size} from '.\/geometry';\n import type {Layouter} from '.\/layouter';\n import type {ViewRefs} from '.\/Surface';\n \n@@ -140,7 +140,7 @@ export class View {\n *\n * Can be overridden by subclasses.\n *\/\n- desiredSize(): Size | SizeWithMaxHeight {\n+ desiredSize(): Size | IntrinsicSize {\n if (this._needsDisplay) {\n this.layoutSubviews();\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\nindex 49c0d3981e..054d8c3e75 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js\n@@ -9,8 +9,14 @@\n \n export type Point = $ReadOnly<{|x: number, y: number|}>;\n export type Size = $ReadOnly<{|width: number, height: number|}>;\n-export type SizeWithMaxHeight = {|\n+export type IntrinsicSize = {|\n ...Size,\n+\n+ \/\/ If content is this height or less, hide the scrollbar entirely,\n+ \/\/ so that it doesn't take up vertical space unnecessarily (e.g. for a single row of content).\n+ hideScrollBarIfLessThanHeight?: number,\n+\n+ \/\/ The initial height should be the height of the content, or this, whichever is less.\n maxInitialHeight?: number,\n |};\n export type Rect = $ReadOnly<{|origin: Point, size: Size|}>;\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 1e062b23a6..a4b742a3fb 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -165,8 +165,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n '--color-scheduling-profiler-text-color': '#000000',\n '--color-scheduling-profiler-react-work-border': '#ffffff',\n- '--color-scroll-thumb': '#c2c2c2',\n- '--color-scroll-track': '#fafafa',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\n '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',\n@@ -180,12 +178,18 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-toggle-background-on': '#0088fa',\n '--color-toggle-background-off': '#cfd1d5',\n '--color-toggle-text': '#ffffff',\n- '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',\n- '--color-tooltip-text': '#ffffff',\n '--color-warning-background': '#fb3655',\n '--color-warning-background-hover': '#f82042',\n '--color-warning-text-color': '#ffffff',\n '--color-warning-text-color-inverted': '#fd4d69',\n+\n+ \/\/ The styles below should be kept in sync with 'root.css'\n+ \/\/ They are repeated there because they're used by e.g. tooltips or context menus\n+ \/\/ which get rendered outside of the DOM subtree (where normal theme\/styles are written).\n+ '--color-scroll-thumb': '#c2c2c2',\n+ '--color-scroll-track': '#fafafa',\n+ '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',\n+ '--color-tooltip-text': '#ffffff',\n },\n dark: {\n '--color-attribute-name': '#9d87d2',\n@@ -291,8 +295,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n '--color-scheduling-profiler-text-color': '#000000',\n '--color-scheduling-profiler-react-work-border': '#ffffff',\n- '--color-scroll-thumb': '#afb3b9',\n- '--color-scroll-track': '#313640',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\n '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',\n@@ -307,12 +309,18 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-toggle-background-on': '#178fb9',\n '--color-toggle-background-off': '#777d88',\n '--color-toggle-text': '#ffffff',\n- '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',\n- '--color-tooltip-text': '#000000',\n '--color-warning-background': '#ee1638',\n '--color-warning-background-hover': '#da1030',\n '--color-warning-text-color': '#ffffff',\n '--color-warning-text-color-inverted': '#ee1638',\n+\n+ \/\/ The styles below should be kept in sync with 'root.css'\n+ \/\/ They are repeated there because they're used by e.g. tooltips or context menus\n+ \/\/ which get rendered outside of the DOM subtree (where normal theme\/styles are written).\n+ '--color-scroll-thumb': '#afb3b9',\n+ '--color-scroll-track': '#313640',\n+ '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',\n+ '--color-tooltip-text': '#000000',\n },\n compact: {\n '--font-size-monospace-small': '9px',\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\nindex 466c4fdad6..90be188361 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js\n@@ -68,11 +68,15 @@ export default function ContextMenu({children, id}: Props) {\n const element = bodyAccessorRef.current;\n if (element !== null) {\n const ownerDocument = element.ownerDocument;\n- containerRef.current = ownerDocument.createElement('div');\n- ownerDocument.body.appendChild(containerRef.current);\n- return () => {\n- ownerDocument.body.removeChild(containerRef.current);\n- };\n+ containerRef.current = ownerDocument.querySelector(\n+ '[data-react-devtools-portal-root]',\n+ );\n+\n+ if (containerRef.current == null) {\n+ console.warn(\n+ 'DevTools tooltip root node not found; context menus will be disabled.',\n+ );\n+ }\n }\n }, []);\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\nindex 190fa7917a..8f1ccc5540 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js\n@@ -222,7 +222,10 @@ export default function DevTools({\n \n \n \n-

\n+ \n {showTabBar && (\n

\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\nindex b95fa6e22c..1a59ff59d2 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\n@@ -32,7 +32,15 @@ export default function portaledContent(\n \/\/ The ThemeProvider works by writing DOM style variables to an HTMLDivElement.\n \/\/ Because Portals render in a different DOM subtree, these variables don't propagate.\n \/\/ So in this case, we need to re-wrap portaled content in a second ThemeProvider.\n- children = {children}<\/ThemeProvider>;\n+ children = (\n+ \n+ \n+ {children}\n+ <\/div>\n+ <\/ThemeProvider>\n+ );\n }\n \n return portalContainer != null\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\nindex c6c7ffd586..9bb749ff23 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n@@ -1,4 +1,9 @@\n :root {\n+ \/**\n+ * The light and dark theme styles below should be kept in sync with 'react-devtools-shared\/src\/constants'\n+ * They are repeated here because they're used by e.g. tooltips or context menus\n+ * which get rendered outside of the DOM subtree (where normal theme\/styles are written).\n+ *\/\n \n \/* Light theme *\/\n --light-color-scroll-thumb: #c2c2c2;\n","parents":["e3b76a85c5233fad6f411c14e88ac4a61af800fb"],"commit":{"subject":"DevTools: Scheduling profiler (#22006)","authorEmail":"bvaughn@fb.com","revision":"42251331d8f7a997a018d75370f5216bb7552819","shortRevision":"42251331d8","authorName":"Brian Vaughn","authoredAt":"2021-08-02T14:30:43-04:00"},"files":[{"path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/NativeEventsView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/UserTimingMarksView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/ResizableView.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/View.js","status":"M"},{"path":"packages\/react-devtools-scheduling-profiler\/src\/view-base\/geometry.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/constants.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/DevTools.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js","status":"M"},{"path":"packages\/react-devtools-shared\/src\/devtools\/views\/root.css","status":"M"}]}

dillon1000/react

Files changed