Import scheduling profiler into DevTools Profiler tab

facebook · Jul 16, 2021 · a118800 · a118800
1 parent 3101872
commit a118800
Show file tree

Hide file tree

Showing 20 changed files with 186 additions and 186 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/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/SchedulingProfiler.css b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
@@ -1,21 +1,5 @@
-.SchedulingProfiler {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-normal);
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-.SchedulingProfiler, .SchedulingProfiler * {
-  box-sizing: border-box;
-  -webkit-font-smoothing: var(--font-smoothing);
-}
-
 .Content {
+  width: 100%;
   position: relative;
   flex: 1 1 auto;
   display: flex;
@@ -51,58 +35,3 @@
   font-size: var(--font-size-sans-large);
   margin-bottom: 0.5rem;
 }
-
-.Toolbar {
-  height: 2.25rem;
-  padding: 0 0.25rem;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.VRule {
-  height: 20px;
-  width: 1px;
-  border-left: 1px solid var(--color-border);
-  padding-left: 0.25rem;
-  margin-left: 0.25rem;
-}
-
-.Spacer {
-  flex: 1;
-}
-
-.Link {
-  color: var(--color-button);
-}
-
-.ScreenshotWrapper {
-  max-width: 30rem;
-  padding: 0 1rem;
-  margin-bottom: 2rem;
-}
-
-.Screenshot {
-  width: 100%;
-  border-radius: 0.4em;
-  border: 2px solid var(--color-border);
-}
-
-.AppName {
-  font-size: var(--font-size-sans-large);
-  margin-right: 0.5rem;
-  user-select: none;
-}
-
-@media screen and (max-width: 350px) {
-  .AppName {
-    display: none;
-  }
-}
-
-@media screen and (max-height: 600px) {
-  .ScreenshotWrapper {
-    display: none;
-  }
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -14,13 +14,11 @@ import type {ImportWorkerOutputData} from './import-worker/import.worker';
 import * as React from 'react';
 import {Suspense, useCallback, useState} from 'react';
 import {createResource} from 'react-devtools-shared/src/devtools/cache';
-import ReactLogo from 'react-devtools-shared/src/devtools/views/ReactLogo';
 
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
 import ImportWorker from './import-worker/import.worker';
 
-import profilerBrowser from './assets/profilerBrowser.png';
 import styles from './SchedulingProfiler.css';
 
 type DataResource = Resource<void, File, ReactProfilerData | Error>;
@@ -63,39 +61,23 @@ export function SchedulingProfiler(_: {||}) {
   }, []);
 
   return (
-    <div className={styles.SchedulingProfiler}>
-      <div className={styles.Toolbar}>
-        <ReactLogo />
-        <span className={styles.AppName}>Concurrent Mode Profiler</span>
-        <div className={styles.VRule} />
-        <ImportButton onFileSelect={handleFileSelect} />
-        <div className={styles.Spacer} />
-      </div>
-      <div className={styles.Content}>
-        {dataResource ? (
-          <Suspense fallback={<ProcessingData />}>
-            <DataResourceComponent
-              dataResource={dataResource}
-              onFileSelect={handleFileSelect}
-            />
-          </Suspense>
-        ) : (
-          <Welcome onFileSelect={handleFileSelect} />
-        )}
-      </div>
+    <div className={styles.Content}>
+      {dataResource ? (
+        <Suspense fallback={<ProcessingData />}>
+          <DataResourceComponent
+            dataResource={dataResource}
+            onFileSelect={handleFileSelect}
+          />
+        </Suspense>
+      ) : (
+        <Welcome onFileSelect={handleFileSelect} />
+      )}
     </div>
   );
 }
 
 const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
   <div className={styles.EmptyStateContainer}>
-    <div className={styles.ScreenshotWrapper}>
-      <img
-        src={profilerBrowser}
-        className={styles.Screenshot}
-        alt="Profiler screenshot"
-      />
-    </div>
     <div className={styles.Header}>Welcome!</div>
     <div className={styles.Row}>
       Click the import button

diff --git a/packages/react-devtools-scheduling-profiler/src/assets/logo.svg b/packages/react-devtools-scheduling-profiler/src/assets/logo.svg
diff --git a/packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png b/packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png
diff --git a/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg b/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg