{"commit":{"shortRevision":"38a512acad","subject":"Scheduling Profiler: Redesign with DevTools styling (#19707)","revision":"38a512acade57578738e2c5ebbb0709cd56a9bbd","authorName":"E-Liang Tan","authorEmail":"eliang@eliangtan.com","authoredAt":"2020-09-04T00:08:40+08:00"},"parents":["bcc0aa4633760352c6c56f559d1e2d374d302f5a"],"body":"Co-authored-by: Brian Vaughn ","patch":"diff --git a\/packages\/react-devtools-extensions\/utils.js b\/packages\/react-devtools-extensions\/utils.js\nindex a4846f8b0e..1babd93f56 100644\n--- a\/packages\/react-devtools-extensions\/utils.js\n+++ b\/packages\/react-devtools-extensions\/utils.js\n@@ -1,3 +1,10 @@\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+\n const {execSync} = require('child_process');\n const {readFileSync} = require('fs');\n const {resolve} = require('path');\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/buildUtils.js b\/packages\/react-devtools-scheduling-profiler\/buildUtils.js\nnew file mode 100644\nindex 0000000000..b0971c4861\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/buildUtils.js\n@@ -0,0 +1,36 @@\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+\n+const {execSync} = require('child_process');\n+const {readFileSync} = require('fs');\n+const {resolve} = require('path');\n+\n+function getGitCommit() {\n+ try {\n+ return execSync('git show -s --format=%h')\n+ .toString()\n+ .trim();\n+ } catch (error) {\n+ \/\/ Mozilla runs this command from a git archive.\n+ \/\/ In that context, there is no Git revision.\n+ return null;\n+ }\n+}\n+\n+function getVersionString() {\n+ const packageVersion = JSON.parse(\n+ readFileSync(resolve(__dirname, '.\/package.json')),\n+ ).version;\n+\n+ const commit = getGitCommit();\n+\n+ return `${packageVersion}-${commit}`;\n+}\n+\n+module.exports = {\n+ getVersionString,\n+};\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/package.json b\/packages\/react-devtools-scheduling-profiler\/package.json\nindex 60564834cd..5aa14a59f0 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/package.json\n+++ b\/packages\/react-devtools-scheduling-profiler\/package.json\n@@ -1,7 +1,7 @@\n {\n \"private\": true,\n \"name\": \"react-devtools-scheduling-profiler\",\n- \"version\": \"0.0.1\",\n+ \"version\": \"0.0.0\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"build\": \"cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js\",\n@@ -18,6 +18,8 @@\n },\n \"devDependencies\": {\n \"@pmmmwh\/react-refresh-webpack-plugin\": \"^0.4.1\",\n+ \"@reach\/menu-button\": \"^0.11.2\",\n+ \"@reach\/tooltip\": \"^0.11.2\",\n \"babel-loader\": \"^8.1.0\",\n \"css-loader\": \"^4.2.1\",\n \"file-loader\": \"^6.0.0\",\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/App.css b\/packages\/react-devtools-scheduling-profiler\/src\/App.css\nnew file mode 100644\nindex 0000000000..1ea3d75fcc\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/App.css\n@@ -0,0 +1,19 @@\n+.DevTools {\n+ width: 100%;\n+ height: 100%;\n+ display: flex;\n+ flex-direction: column;\n+ background-color: var(--color-background);\n+ color: var(--color-text);\n+}\n+\n+.TabContent {\n+ flex: 1 1 100%;\n+ overflow: auto;\n+ -webkit-app-region: no-drag;\n+}\n+\n+.DevTools, .DevTools * {\n+ box-sizing: border-box;\n+ -webkit-font-smoothing: var(--font-smoothing);\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/App.js b\/packages\/react-devtools-scheduling-profiler\/src\/App.js\nindex 93f66ac09b..83d9238851 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/App.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/App.js\n@@ -7,22 +7,30 @@\n * @flow\n *\/\n \n-import type {ReactProfilerData} from '.\/types';\n+\/\/ Reach styles need to come before any component styles.\n+\/\/ This makes overriding the styles simpler.\n+import '@reach\/menu-button\/styles.css';\n+import '@reach\/tooltip\/styles.css';\n \n import * as React from 'react';\n-import {useState} from 'react';\n \n-import ImportPage from '.\/ImportPage';\n-import CanvasPage from '.\/CanvasPage';\n+import {ModalDialogContextController} from 'react-devtools-shared\/src\/devtools\/views\/ModalDialog';\n+import {SchedulingProfiler} from '.\/SchedulingProfiler';\n+import {useBrowserTheme} from '.\/hooks';\n+\n+import styles from '.\/App.css';\n+import 'react-devtools-shared\/src\/devtools\/views\/root.css';\n \n export default function App() {\n- const [profilerData, setProfilerData] = useState(\n- null,\n- );\n+ useBrowserTheme();\n \n- if (profilerData) {\n- return ;\n- } else {\n- return ;\n- }\n+ return (\n+ \n+

\n+

\n+ \n+ <\/div>\n+ <\/div>\n+ <\/ModalDialogContextController>\n+ );\n }\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex f8cb3edb65..9b20cd2fb8 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -52,18 +52,15 @@ import {\n import {COLORS} from '.\/content-views\/constants';\n \n import EventTooltip from '.\/EventTooltip';\n-import {ContextMenu, ContextMenuItem, useContextMenu} from '.\/context';\n+import ContextMenu from '.\/context\/ContextMenu';\n+import ContextMenuItem from '.\/context\/ContextMenuItem';\n+import useContextMenu from '.\/context\/useContextMenu';\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@@ -284,7 +281,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n \n useCanvasInteraction(canvasRef, interactor);\n \n- useContextMenu({\n+ useContextMenu({\n data: {\n data,\n hoveredEvent,\n@@ -357,7 +354,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n }\n });\n }\n- }, [hoveredEvent]);\n+ }, [\n+ hoveredEvent,\n+ data, \/\/ Attach onHover callbacks when views are re-created on data change\n+ ]);\n \n useLayoutEffect(() => {\n const {current: userTimingMarksView} = userTimingMarksViewRef;\n@@ -396,7 +396,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {\n \n

dillon1000/react

Files changed