Add scheduling profiler to inline DevTools and shell

packages/react-devtools-inline/package.json

@@ -36,8 +36,10 @@
     "css-loader": "^1.0.1",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
+    "url-loader": "^4.1.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"
   }
 }

packages/react-devtools-inline/webpack.config.js

@@ -15,6 +15,15 @@ const __DEV__ = true; // 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',
@@ -51,17 +60,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$/,
@@ -79,6 +96,13 @@ module.exports = {
           },
         ],
       },
+      {
+        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+        loader: 'url-loader',
+        options: {
+          limit: true, // Inline image assets
+        },
+      },
     ],
   },
 };

packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js

@@ -14,6 +14,7 @@ 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 portaledContent from 'react-devtools-shared/src/devtools/views/portaledContent';
 import ReactLogo from 'react-devtools-shared/src/devtools/views/ReactLogo';
 
 import ImportButton from './ImportButton';
@@ -143,3 +144,5 @@ const DataResourceComponent = ({
   }
   return <CanvasPage profilerData={dataOrError} />;
 };
+
+export default portaledContent(SchedulingProfiler);

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -18,6 +18,7 @@ import Store from '../store';
 import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
+import SchedulingProfiler from 'react-devtools-scheduling-profiler/src/SchedulingProfiler';
 import TabBar from './TabBar';
 import {SettingsContextController} from './Settings/SettingsContext';
 import {TreeContextController} from './Components/TreeContext';
@@ -37,7 +38,7 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 export type BrowserTheme = 'dark' | 'light';
-export type TabID = 'components' | 'profiler';
+export type TabID = 'components' | 'profiler' | 'scheduling-profiler';
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
@@ -74,6 +75,7 @@ export type Props = {|
   // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
+  schedulingProfilerPortalContainer?: Element,
 |};
 
 const componentsTab = {
@@ -88,8 +90,14 @@ const profilerTab = {
   label: 'Profiler',
   title: 'React Profiler',
 };
+const schedulingProfilerTab = {
+  id: ('scheduling-profiler': TabID),
+  icon: 'profiler',
+  label: 'Scheduling Profiler',
+  title: 'React Scheduling Profiler',
+};
 
-const tabs = [componentsTab, profilerTab];
+const tabs = [componentsTab, profilerTab, schedulingProfilerTab];
 
 export default function DevTools({
   bridge,
@@ -100,6 +108,7 @@ export default function DevTools({
   enabledInspectedElementContextMenu = false,
   overrideTab,
   profilerPortalContainer,
+  schedulingProfilerPortalContainer,
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
@@ -221,6 +230,13 @@ export default function DevTools({
                         hidden={tab !== 'profiler'}>
                         <Profiler portalContainer={profilerPortalContainer} />
                       </div>
+                      <div
+                        className={styles.TabContent}
+                        hidden={tab !== 'scheduling-profiler'}>
+                        <SchedulingProfiler
+                          portalContainer={schedulingProfilerPortalContainer}
+                        />
+                      </div>
                     </div>
                   </ProfilerContextController>
                 </TreeContextController>