\n-

\n- \n- <\/div>\n- <\/div>\n- );\n-}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css\nindex e5d238a0d9..8c7633a1b8 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css\n@@ -1,7 +1,7 @@\n .CanvasPage {\n position: absolute;\n- top: 0.5rem;\n- bottom: 0.5rem;\n- left: 0.5rem;\n- right: 0.5rem;\n+ top: 0;\n+ bottom: 0;\n+ left: 0;\n+ right: 0;\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 9b20cd2fb8..9064065e54 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -52,9 +52,9 @@ import {\n import {COLORS} from '.\/content-views\/constants';\n \n import EventTooltip from '.\/EventTooltip';\n-import ContextMenu from '.\/context\/ContextMenu';\n-import ContextMenuItem from '.\/context\/ContextMenuItem';\n-import useContextMenu from '.\/context\/useContextMenu';\n+import ContextMenu from 'react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenu';\n+import ContextMenuItem from 'react-devtools-shared\/src\/devtools\/ContextMenu\/ContextMenuItem';\n+import useContextMenu from 'react-devtools-shared\/src\/devtools\/ContextMenu\/useContextMenu';\n import {getBatchRange} from '.\/utils\/getBatchRange';\n \n import styles from '.\/CanvasPage.css';\n@@ -94,6 +94,7 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {\n );\n };\n \n+\/\/ TODO (scheduling profiler) Why is the \"zoom\" feature so much slower than normal rendering?\n const zoomToBatch = (\n data: ReactProfilerData,\n measure: ReactMeasure,\n@@ -102,8 +103,7 @@ const zoomToBatch = (\n const {batchUID} = measure;\n const [startTime, stopTime] = getBatchRange(batchUID, data);\n syncedHorizontalPanAndZoomViews.forEach(syncedView =>\n- \/\/ Using time as range works because the views' intrinsic content size is\n- \/\/ based on time.\n+ \/\/ Using time as range works because the views' intrinsic content size is based on time.\n syncedView.zoomToRange(startTime, stopTime),\n );\n };\n@@ -243,6 +243,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n defaultFrame,\n reactMeasuresHorizontalPanAndZoomView,\n flamechartHorizontalPanAndZoomView,\n+ canvasRef,\n );\n \n const rootView = new View(\n@@ -281,13 +282,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n \n useCanvasInteraction(canvasRef, interactor);\n \n+ const setIsContextMenuShownWrapper = (...args) => {\n+ console.log('setIsContextMenuShown()', ...args);\n+ setIsContextMenuShown(...args);\n+ };\n useContextMenu({\n data: {\n data,\n hoveredEvent,\n },\n id: CONTEXT_MENU_ID,\n- onChange: setIsContextMenuShown,\n+ onChange: setIsContextMenuShownWrapper,\n ref: canvasRef,\n });\n \ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\nindex f721295b2f..b6503b7338 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.css\n@@ -6,9 +6,10 @@\n padding: 0.25rem;\n user-select: none;\n pointer-events: none;\n- background-color: #ffffff;\n- border: 1px solid #ccc;\n- box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n+ background-color: var(--color-tooltip-background);\n+ border: 1px solid var(border);\n+ box-shadow: 1px 1px 2px var(--color-shadow);\n+ color: var(--color-tooltip-text);\n font-size: 11px;\n }\n \n@@ -26,7 +27,7 @@\n }\n \n .DetailsGridLabel {\n- color: #666;\n+ color: var(--color-dim);\n text-align: right;\n }\n \n@@ -56,14 +57,14 @@\n line-height: 1.5;\n -webkit-mask-image: linear-gradient(\n 180deg,\n- #fff,\n- #fff 5em,\n+ var(--color-tooltip-background),\n+ var(--color-tooltip-background) 5em,\n transparent\n );\n mask-image: linear-gradient(\n 180deg,\n- #fff,\n- #fff 5em,\n+ var(--color-tooltip-background),\n+ var(--color-tooltip-background) 5em,\n transparent\n );\n white-space: pre;\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/ImportButton.js b\/packages\/react-devtools-scheduling-profiler\/src\/ImportButton.js\nindex acd382b08a..6f018bf309 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/ImportButton.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/ImportButton.js\n@@ -9,17 +9,17 @@\n \n import * as React from 'react';\n import {useCallback, useRef} from 'react';\n-\n import Button from 'react-devtools-shared\/src\/devtools\/views\/Button';\n import ButtonIcon from 'react-devtools-shared\/src\/devtools\/views\/ButtonIcon';\n \n import styles from '.\/ImportButton.css';\n \n type Props = {|\n+ children?: mixed,\n onFileSelect: (file: File) => void,\n |};\n \n-export default function ImportButton({onFileSelect}: Props) {\n+export default function ImportButton({children = null, onFileSelect}: Props) {\n const inputRef = useRef(null);\n \n const handleFiles = useCallback(() => {\n@@ -51,6 +51,7 @@ export default function ImportButton({onFileSelect}: Props) {\n \/>\n

dillon1000/react

Files changed