Import scheduling profiler into DevTools Profiler tab

facebook · Jul 20, 2021 · dd7d036 · dd7d036
1 parent 3f62dec
commit dd7d036
Show file tree

Hide file tree

Showing 50 changed files with 771 additions and 895 deletions.
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
@@ -18,6 +18,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
@@ -62,17 +71,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'worker-loader',
+            options: {
+              inline: 'no-fallback',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,

diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
@@ -32,7 +32,7 @@
 
   "devtools_page": "main.html",
 
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'",
   "web_accessible_resources": [
     "main.html",
     "panel.html",

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
@@ -37,6 +37,7 @@
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "firefox-profile": "^1.0.2",
     "fs-extra": "^4.0.2",
     "jest-fetch-mock": "^3.0.3",
@@ -55,7 +56,8 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^3.0.3"
   },
   "dependencies": {
     "web-ext": "^4"

diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
@@ -19,6 +19,15 @@ const DEVTOOLS_VERSION = getVersionString();
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -81,17 +90,25 @@ module.exports = {
     ],
 
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'worker-loader',
+            options: {
+              inline: 'no-fallback',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,

diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
@@ -34,10 +34,12 @@
     "babel-loader": "^8.0.4",
     "cross-env": "^3.1.4",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^3.0.3"
   }
 }
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
@@ -16,6 +16,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -65,17 +74,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'worker-loader',
+            options: {
+              inline: 'no-fallback',
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,

diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-scheduling-profiler/README.md
@@ -1,15 +1,3 @@
-# Experimental React Concurrent Mode Profiler
+# React Concurrent Mode Profiler
 
-https://react-devtools-scheduling-profiler.vercel.app/
-
-## Setting up continuous deployment with CircleCI and Vercel
-
-These instructions are intended for internal use, but may be useful if you are setting up a custom production deployment of the scheduling profiler.
-
-1. Create a Vercel token at https://vercel.com/account/tokens.
-2. Configure CircleCI:
-    1. In CircleCI, navigate to the repository's Project Settings.
-    2. In the Advanced tab, ensure that "Pass secrets to builds from forked pull requests" is set to false.
-    3. In the Environment Variables tab, add the Vercel token as a new `SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN` environment variable.
-
-The Vercel project will be created when the deploy job runs.
+This package contains the new/experimental "scheduling profiler" for React 18. This profiler exists as its own project because it was initially deployed as a standalone app. It has since been moved into the DevTools Profiler under the "Scheduling" tab. This package will likely eventually be moved into `react-devtools-shared`.
diff --git a/packages/react-devtools-scheduling-profiler/buildUtils.js b/packages/react-devtools-scheduling-profiler/buildUtils.js
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "0.0.0",
+  "version": "4.14.0",
   "license": "MIT",
   "scripts": {
     "build": "cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js",

diff --git a/packages/react-devtools-scheduling-profiler/src/App.css b/packages/react-devtools-scheduling-profiler/src/App.css
diff --git a/packages/react-devtools-scheduling-profiler/src/App.js b/packages/react-devtools-scheduling-profiler/src/App.js
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.css b/packages/react-devtools-scheduling-profiler/src/CanvasPage.css
@@ -1,7 +1,7 @@
 .CanvasPage {
   position: absolute;
-  top: 0.5rem;
-  bottom: 0.5rem;
-  left: 0.5rem;
-  right: 0.5rem;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -52,9 +52,9 @@ import {
 import {COLORS} from './content-views/constants';
 
 import EventTooltip from './EventTooltip';
-import ContextMenu from './context/ContextMenu';
-import ContextMenuItem from './context/ContextMenuItem';
-import useContextMenu from './context/useContextMenu';
+import ContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenu';
+import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem';
+import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
 
 import styles from './CanvasPage.css';
@@ -243,6 +243,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       defaultFrame,
       reactMeasuresHorizontalPanAndZoomView,
       flamechartHorizontalPanAndZoomView,
+      canvasRef,
     );
 
     const rootView = new View(

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -6,9 +6,10 @@
   padding: 0.25rem;
   user-select: none;
   pointer-events: none;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-tooltip-background);
+  border: 1px solid var(border);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+  color: var(--color-tooltip-text);
   font-size: 11px;
 }
 
@@ -26,7 +27,7 @@
 }
 
 .DetailsGridLabel {
-  color: #666;
+  color: var(--color-dim);
   text-align: right;
 }
 
@@ -56,14 +57,14 @@
   line-height: 1.5;
   -webkit-mask-image: linear-gradient(
     180deg,
-    #fff,
-    #fff 5em,
+    var(--color-tooltip-background),
+    var(--color-tooltip-background) 5em,
     transparent
   );
   mask-image: linear-gradient(
     180deg,
-    #fff,
-    #fff 5em,
+    var(--color-tooltip-background),
+    var(--color-tooltip-background) 5em,
     transparent
   );
   white-space: pre;