{"parents":["c641b611c4d270660b0bb850759f5a324787a7b3"],"patch":"diff --git a\/.eslintignore b\/.eslintignore\nindex 62ca593965..2af8176bc3 100644\n--- a\/.eslintignore\n+++ b\/.eslintignore\n@@ -18,4 +18,6 @@ packages\/react-devtools-extensions\/chrome\/build\n packages\/react-devtools-extensions\/firefox\/build\n packages\/react-devtools-extensions\/shared\/build\n packages\/react-devtools-inline\/dist\n-packages\/react-devtools-shell\/dist\n\\ No newline at end of file\n+packages\/react-devtools-shell\/dist\n+packages\/react-devtools-scheduling-profiler\/dist\n+packages\/react-devtools-scheduling-profiler\/static\n\\ No newline at end of file\ndiff --git a\/.gitignore b\/.gitignore\nindex 2a70572385..5a913ac6e5 100644\n--- a\/.gitignore\n+++ b\/.gitignore\n@@ -34,4 +34,5 @@ packages\/react-devtools-extensions\/firefox\/*.pem\n packages\/react-devtools-extensions\/shared\/build\n packages\/react-devtools-extensions\/.tempUserDataDir\n packages\/react-devtools-inline\/dist\n-packages\/react-devtools-shell\/dist\n\\ No newline at end of file\n+packages\/react-devtools-shell\/dist\n+packages\/react-devtools-scheduling-profiler\/dist\n\\ No newline at end of file\ndiff --git a\/.prettierignore b\/.prettierignore\nindex bea24210ec..80650567ef 100644\n--- a\/.prettierignore\n+++ b\/.prettierignore\n@@ -3,4 +3,6 @@ packages\/react-devtools-extensions\/chrome\/build\n packages\/react-devtools-extensions\/firefox\/build\n packages\/react-devtools-extensions\/shared\/build\n packages\/react-devtools-inline\/dist\n-packages\/react-devtools-shell\/dist\n\\ No newline at end of file\n+packages\/react-devtools-shell\/dist\n+packages\/react-devtools-scheduling-profiler\/dist\n+packages\/react-devtools-scheduling-profiler\/static\n\\ No newline at end of file\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/README.md b\/packages\/react-devtools-scheduling-profiler\/README.md\nnew file mode 100644\nindex 0000000000..b3e0b07b05\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/README.md\n@@ -0,0 +1,3 @@\n+# Experimental React Concurrent Mode Profiler\n+\n+- Deployed at: https:\/\/react-scheduling-profiler.vercel.app\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/package.json b\/packages\/react-devtools-scheduling-profiler\/package.json\nnew file mode 100644\nindex 0000000000..2923f10ff7\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/package.json\n@@ -0,0 +1,30 @@\n+{\n+ \"private\": true,\n+ \"name\": \"react-devtools-scheduling-profiler\",\n+ \"version\": \"0.0.1\",\n+ \"license\": \"MIT\",\n+ \"scripts\": {\n+ \"build\": \"cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js\",\n+ \"start\": \"cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open\"\n+ },\n+ \"dependencies\": {\n+ \"@elg\/speedscope\": \"1.9.0-a6f84db\",\n+ \"clipboard-js\": \"^0.3.6\",\n+ \"memoize-one\": \"^5.1.1\",\n+ \"nullthrows\": \"^1.1.1\",\n+ \"pretty-ms\": \"^7.0.0\",\n+ \"react-virtualized-auto-sizer\": \"^1.0.2\",\n+ \"regenerator-runtime\": \"^0.13.7\"\n+ },\n+ \"devDependencies\": {\n+ \"babel-loader\": \"^8.1.0\",\n+ \"css-loader\": \"^4.2.1\",\n+ \"file-loader\": \"^6.0.0\",\n+ \"html-webpack-plugin\": \"^4.3.0\",\n+ \"style-loader\": \"^1.2.1\",\n+ \"url-loader\": \"^4.1.0\",\n+ \"webpack\": \"^4.44.1\",\n+ \"webpack-cli\": \"^3.3.12\",\n+ \"webpack-dev-server\": \"^3.11.0\"\n+ }\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/App.js b\/packages\/react-devtools-scheduling-profiler\/src\/App.js\nnew file mode 100644\nindex 0000000000..93f66ac09b\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/App.js\n@@ -0,0 +1,28 @@\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 {ReactProfilerData} from '.\/types';\n+\n+import * as React from 'react';\n+import {useState} from 'react';\n+\n+import ImportPage from '.\/ImportPage';\n+import CanvasPage from '.\/CanvasPage';\n+\n+export default function App() {\n+ const [profilerData, setProfilerData] = useState(\n+ null,\n+ );\n+\n+ if (profilerData) {\n+ return ;\n+ } else {\n+ return ;\n+ }\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css\nnew file mode 100644\nindex 0000000000..e5d238a0d9\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.css\n@@ -0,0 +1,7 @@\n+.CanvasPage {\n+ position: absolute;\n+ top: 0.5rem;\n+ bottom: 0.5rem;\n+ left: 0.5rem;\n+ right: 0.5rem;\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nnew file mode 100644\nindex 0000000000..9d93005f06\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -0,0 +1,480 @@\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 {\n+ Point,\n+ HorizontalPanAndZoomViewOnChangeCallback,\n+} from '.\/view-base';\n+import type {\n+ ReactHoverContextInfo,\n+ ReactProfilerData,\n+ ReactMeasure,\n+} from '.\/types';\n+\n+import * as React from 'react';\n+import {\n+ Fragment,\n+ useEffect,\n+ useLayoutEffect,\n+ useRef,\n+ useState,\n+ useCallback,\n+} from 'react';\n+import AutoSizer from 'react-virtualized-auto-sizer';\n+import {copy} from 'clipboard-js';\n+import prettyMilliseconds from 'pretty-ms';\n+\n+import {\n+ HorizontalPanAndZoomView,\n+ ResizableSplitView,\n+ Surface,\n+ VerticalScrollView,\n+ View,\n+ createComposedLayout,\n+ lastViewTakesUpRemainingSpaceLayout,\n+ useCanvasInteraction,\n+ verticallyStackedLayout,\n+ zeroPoint,\n+} from '.\/view-base';\n+import {\n+ FlamechartView,\n+ ReactEventsView,\n+ ReactMeasuresView,\n+ TimeAxisMarkersView,\n+ UserTimingMarksView,\n+} from '.\/content-views';\n+import {COLORS} from '.\/content-views\/constants';\n+\n+import EventTooltip from '.\/EventTooltip';\n+import {ContextMenu, ContextMenuItem, useContextMenu} from '.\/context';\n+import {getBatchRange} from '.\/utils\/getBatchRange';\n+\n+import styles from '.\/CanvasPage.css';\n+\n+const CONTEXT_MENU_ID = 'canvas';\n+\n+type ContextMenuContextData = {|\n+ data: ReactProfilerData,\n+ hoveredEvent: ReactHoverContextInfo | null,\n+|};\n+\n+type Props = {|\n+ profilerData: ReactProfilerData,\n+|};\n+\n+function CanvasPage({profilerData}: Props) {\n+ return (\n+ \n+ \n+ {({height, width}: {height: number, width: number}) => (\n+ \n+ )}\n+ <\/AutoSizer>\n+ <\/div>\n+ );\n+}\n+\n+const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {\n+ const {batchUID, duration, timestamp, type} = measure;\n+\n+ const [startTime, stopTime] = getBatchRange(batchUID, data);\n+\n+ copy(\n+ JSON.stringify({\n+ type,\n+ timestamp: prettyMilliseconds(timestamp),\n+ duration: prettyMilliseconds(duration),\n+ batchDuration: prettyMilliseconds(stopTime - startTime),\n+ }),\n+ );\n+};\n+\n+const zoomToBatch = (\n+ data: ReactProfilerData,\n+ measure: ReactMeasure,\n+ syncedHorizontalPanAndZoomViews: HorizontalPanAndZoomView[],\n+) => {\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+ syncedView.zoomToRange(startTime, stopTime),\n+ );\n+};\n+\n+type AutoSizedCanvasProps = {|\n+ data: ReactProfilerData,\n+ height: number,\n+ width: number,\n+|};\n+\n+function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n+ const canvasRef = useRef(null);\n+\n+ const [isContextMenuShown, setIsContextMenuShown] = useState(false);\n+ const [mouseLocation, setMouseLocation] = useState(zeroPoint); \/\/ DOM coordinates\n+ const [\n+ hoveredEvent,\n+ setHoveredEvent,\n+ ] = useState(null);\n+\n+ const surfaceRef = useRef(new Surface());\n+ const userTimingMarksViewRef = useRef(null);\n+ const reactEventsViewRef = useRef(null);\n+ const reactMeasuresViewRef = useRef(null);\n+ const flamechartViewRef = useRef(null);\n+ const syncedHorizontalPanAndZoomViewsRef = useRef(\n+ [],\n+ );\n+\n+ useLayoutEffect(() => {\n+ const surface = surfaceRef.current;\n+ const defaultFrame = {origin: zeroPoint, size: {width, height}};\n+\n+ \/\/ Clear synced views\n+ syncedHorizontalPanAndZoomViewsRef.current = [];\n+\n+ const syncAllHorizontalPanAndZoomViewStates: HorizontalPanAndZoomViewOnChangeCallback = (\n+ newState,\n+ triggeringView?: HorizontalPanAndZoomView,\n+ ) => {\n+ syncedHorizontalPanAndZoomViewsRef.current.forEach(\n+ syncedView =>\n+ triggeringView !== syncedView &&\n+ syncedView.setPanAndZoomState(newState),\n+ );\n+ };\n+\n+ \/\/ Top content\n+\n+ const topContentStack = new View(\n+ surface,\n+ defaultFrame,\n+ verticallyStackedLayout,\n+ );\n+\n+ const axisMarkersView = new TimeAxisMarkersView(\n+ surface,\n+ defaultFrame,\n+ data.duration,\n+ );\n+ topContentStack.addSubview(axisMarkersView);\n+\n+ if (data.otherUserTimingMarks.length > 0) {\n+ const userTimingMarksView = new UserTimingMarksView(\n+ surface,\n+ defaultFrame,\n+ data.otherUserTimingMarks,\n+ data.duration,\n+ );\n+ userTimingMarksViewRef.current = userTimingMarksView;\n+ topContentStack.addSubview(userTimingMarksView);\n+ }\n+\n+ const reactEventsView = new ReactEventsView(surface, defaultFrame, data);\n+ reactEventsViewRef.current = reactEventsView;\n+ topContentStack.addSubview(reactEventsView);\n+\n+ const topContentHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n+ surface,\n+ defaultFrame,\n+ topContentStack,\n+ data.duration,\n+ syncAllHorizontalPanAndZoomViewStates,\n+ );\n+ syncedHorizontalPanAndZoomViewsRef.current.push(\n+ topContentHorizontalPanAndZoomView,\n+ );\n+\n+ \/\/ Resizable content\n+\n+ const reactMeasuresView = new ReactMeasuresView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ reactMeasuresViewRef.current = reactMeasuresView;\n+ const reactMeasuresVerticalScrollView = new VerticalScrollView(\n+ surface,\n+ defaultFrame,\n+ reactMeasuresView,\n+ );\n+ const reactMeasuresHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n+ surface,\n+ defaultFrame,\n+ reactMeasuresVerticalScrollView,\n+ data.duration,\n+ syncAllHorizontalPanAndZoomViewStates,\n+ );\n+ syncedHorizontalPanAndZoomViewsRef.current.push(\n+ reactMeasuresHorizontalPanAndZoomView,\n+ );\n+\n+ const flamechartView = new FlamechartView(\n+ surface,\n+ defaultFrame,\n+ data.flamechart,\n+ data.duration,\n+ );\n+ flamechartViewRef.current = flamechartView;\n+ const flamechartVerticalScrollView = new VerticalScrollView(\n+ surface,\n+ defaultFrame,\n+ flamechartView,\n+ );\n+ const flamechartHorizontalPanAndZoomView = new HorizontalPanAndZoomView(\n+ surface,\n+ defaultFrame,\n+ flamechartVerticalScrollView,\n+ data.duration,\n+ syncAllHorizontalPanAndZoomViewStates,\n+ );\n+ syncedHorizontalPanAndZoomViewsRef.current.push(\n+ flamechartHorizontalPanAndZoomView,\n+ );\n+\n+ const resizableContentStack = new ResizableSplitView(\n+ surface,\n+ defaultFrame,\n+ reactMeasuresHorizontalPanAndZoomView,\n+ flamechartHorizontalPanAndZoomView,\n+ );\n+\n+ const rootView = new View(\n+ surface,\n+ defaultFrame,\n+ createComposedLayout(\n+ verticallyStackedLayout,\n+ lastViewTakesUpRemainingSpaceLayout,\n+ ),\n+ );\n+ rootView.addSubview(topContentHorizontalPanAndZoomView);\n+ rootView.addSubview(resizableContentStack);\n+\n+ surfaceRef.current.rootView = rootView;\n+ }, [data]);\n+\n+ useLayoutEffect(() => {\n+ if (canvasRef.current) {\n+ surfaceRef.current.setCanvas(canvasRef.current, {width, height});\n+ }\n+ }, [width, height]);\n+\n+ const interactor = useCallback(interaction => {\n+ if (canvasRef.current === null) {\n+ return;\n+ }\n+ surfaceRef.current.handleInteraction(interaction);\n+ \/\/ Defer drawing to canvas until React's commit phase, to avoid drawing\n+ \/\/ twice and to ensure that both the canvas and DOM elements managed by\n+ \/\/ React are in sync.\n+ setMouseLocation({\n+ x: interaction.payload.event.x,\n+ y: interaction.payload.event.y,\n+ });\n+ }, []);\n+\n+ useCanvasInteraction(canvasRef, interactor);\n+\n+ useContextMenu({\n+ data: {\n+ data,\n+ hoveredEvent,\n+ },\n+ id: CONTEXT_MENU_ID,\n+ onChange: setIsContextMenuShown,\n+ ref: canvasRef,\n+ });\n+\n+ useEffect(() => {\n+ const {current: userTimingMarksView} = userTimingMarksViewRef;\n+ if (userTimingMarksView) {\n+ userTimingMarksView.onHover = userTimingMark => {\n+ if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n+ setHoveredEvent({\n+ userTimingMark,\n+ event: null,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ data,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: reactEventsView} = reactEventsViewRef;\n+ if (reactEventsView) {\n+ reactEventsView.onHover = event => {\n+ if (!hoveredEvent || hoveredEvent.event !== event) {\n+ setHoveredEvent({\n+ userTimingMark: null,\n+ event,\n+ flamechartStackFrame: null,\n+ measure: null,\n+ data,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: reactMeasuresView} = reactMeasuresViewRef;\n+ if (reactMeasuresView) {\n+ reactMeasuresView.onHover = measure => {\n+ if (!hoveredEvent || hoveredEvent.measure !== measure) {\n+ setHoveredEvent({\n+ userTimingMark: null,\n+ event: null,\n+ flamechartStackFrame: null,\n+ measure,\n+ data,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: flamechartView} = flamechartViewRef;\n+ if (flamechartView) {\n+ flamechartView.setOnHover(flamechartStackFrame => {\n+ if (\n+ !hoveredEvent ||\n+ hoveredEvent.flamechartStackFrame !== flamechartStackFrame\n+ ) {\n+ setHoveredEvent({\n+ userTimingMark: null,\n+ event: null,\n+ flamechartStackFrame,\n+ measure: null,\n+ data,\n+ });\n+ }\n+ });\n+ }\n+ }, [hoveredEvent]);\n+\n+ useLayoutEffect(() => {\n+ const {current: userTimingMarksView} = userTimingMarksViewRef;\n+ if (userTimingMarksView) {\n+ userTimingMarksView.setHoveredMark(\n+ hoveredEvent ? hoveredEvent.userTimingMark : null,\n+ );\n+ }\n+\n+ const {current: reactEventsView} = reactEventsViewRef;\n+ if (reactEventsView) {\n+ reactEventsView.setHoveredEvent(hoveredEvent ? hoveredEvent.event : null);\n+ }\n+\n+ const {current: reactMeasuresView} = reactMeasuresViewRef;\n+ if (reactMeasuresView) {\n+ reactMeasuresView.setHoveredMeasure(\n+ hoveredEvent ? hoveredEvent.measure : null,\n+ );\n+ }\n+\n+ const {current: flamechartView} = flamechartViewRef;\n+ if (flamechartView) {\n+ flamechartView.setHoveredFlamechartStackFrame(\n+ hoveredEvent ? hoveredEvent.flamechartStackFrame : null,\n+ );\n+ }\n+ }, [hoveredEvent]);\n+\n+ \/\/ Draw to canvas in React's commit phase\n+ useLayoutEffect(() => {\n+ surfaceRef.current.displayIfNeeded();\n+ });\n+\n+ return (\n+ \n+

dillon1000/react

Files changed