Pick up RDT extension bundle changes and further shrink bundle size by minifying

packages/react-devtools-extensions/src/backend.js

@@ -12,7 +12,6 @@ import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 import Agent from 'react-devtools-shared/src/backend/agent';
 import Bridge from 'react-devtools-shared/src/bridge';
 import {initBackend} from 'react-devtools-shared/src/backend';
-import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 import {COMPACT_VERSION_NAME} from './utils';
 
@@ -25,11 +24,44 @@ function setup(hook: ?DevToolsHook) {
     return;
   }
 
+  const bridge = new Bridge({
+    listen(fn) {
+      const listener = event => {
+        if (
+          event.source !== window ||
+          !event.data ||
+          event.data.source !== 'react-devtools-content-script' ||
+          !event.data.payload
+        ) {
+          return;
+        }
+        fn(event.data.payload);
+      };
+      window.addEventListener('message', listener);
+      return () => {
+        window.removeEventListener('message', listener);
+      };
+    },
+    send(event, payload, transferable) {
+      window.postMessage(
+        {
+          source: 'react-devtools-bridge',
+          payload: {event, payload},
+        },
+        '*',
+        transferable,
+      );
+    },
+  });
+
+  const agent = new Agent(bridge);
+  initBackend(hook, agent, window);
+
   hook.backends.set(COMPACT_VERSION_NAME, {
     Agent,
     Bridge,
     initBackend,
-    setupNativeStyleEditor,
+    setupNativeStyleEditor: () => {},
   });
   hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME);
 }

packages/react-devtools-extensions/src/utils.js

@@ -2,12 +2,14 @@
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
-export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
-export const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
+// REPLAY Our RDT integration is only for Chrome currently
+export const IS_EDGE = false; // navigator.userAgent.indexOf('Edg') >= 0;
+export const IS_FIREFOX = false; // navigator.userAgent.indexOf('Firefox') >= 0;
+export const IS_CHROME = true; //IS_EDGE === false && IS_FIREFOX === false;
 
 export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
 
+/*
 export function getBrowserName(): BrowserName {
   if (IS_EDGE) {
     return 'Edge';
@@ -41,6 +43,7 @@ export function getBrowserTheme(): BrowserTheme {
     }
   }
 }
+*/
 
 export const COMPACT_VERSION_NAME = 'compact';
 export const EXTENSION_CONTAINED_VERSIONS = [COMPACT_VERSION_NAME];

packages/react-devtools-extensions/webpack.backend.js

@@ -36,7 +36,7 @@ const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-source-map' : false,
+  devtool: __DEV__ ? 'cheap-module-source-map' : 'source-map',
   entry: {
     backend: './src/backend.js',
   },
@@ -63,7 +63,7 @@ module.exports = {
     },
   },
   optimization: {
-    minimize: false,
+    minimize: true,
   },
   plugins: [
     new DefinePlugin({

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

@@ -50,13 +50,13 @@ module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-source-map' : false,
   entry: {
-    background: './src/background.js',
-    backendManager: './src/backendManager.js',
-    main: './src/main.js',
-    panel: './src/panel.js',
-    proxy: './src/contentScripts/proxy.js',
-    prepareInjection: './src/contentScripts/prepareInjection.js',
-    renderer: './src/contentScripts/renderer.js',
+    // background: './src/background.js',
+    // backendManager: './src/backendManager.js',
+    // main: './src/main.js',
+    // panel: './src/panel.js',
+    // proxy: './src/contentScripts/proxy.js',
+    // prepareInjection: './src/contentScripts/prepareInjection.js',
+    // renderer: './src/contentScripts/renderer.js',
     installHook: './src/contentScripts/installHook.js',
   },
   output: {
@@ -84,9 +84,6 @@ module.exports = {
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
-  optimization: {
-    minimize: false,
-  },
   plugins: [
     new DefinePlugin({
       __DEV__,

packages/react-devtools-shared/src/backend/renderer.js

@@ -92,7 +92,8 @@ import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {getStyleXData} from './StyleX/utils';
-import {createProfilingHooks} from './profilingHooks';
+// REPLAY Not doing any profiling work for the foreseeable future, disable this
+// import {createProfilingHooks} from './profilingHooks';
 
 import type {GetTimelineData, ToggleProfilingStatus} from './profilingHooks';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
@@ -643,6 +644,9 @@ export function attach(
 
   let getTimelineData: null | GetTimelineData = null;
   let toggleProfilingStatus: null | ToggleProfilingStatus = null;
+
+  // REPLAY Not doing any profiling work for the foreseeable future, disable this
+  /*
   if (typeof injectProfilingHooks === 'function') {
     const response = createProfilingHooks({
       getDisplayNameForFiber,
@@ -660,6 +664,7 @@ export function attach(
     getTimelineData = response.getTimelineData;
     toggleProfilingStatus = response.toggleProfilingStatus;
   }
+  */
 
   // Tracks Fibers with recently changed number of error/warning messages.
   // These collections store the Fiber rather than the ID,
@@ -4027,6 +4032,9 @@ export function attach(
     );
 
     let timelineData = null;
+
+    // REPLAY Not doing any profiling work for the foreseeable future, disable this
+    /*
     if (typeof getTimelineData === 'function') {
       const currentTimelineData = getTimelineData();
       if (currentTimelineData) {
@@ -4058,6 +4066,7 @@ export function attach(
         };
       }
     }
+    */
 
     return {
       dataForRoots,

packages/react-devtools-shared/src/utils.js

@@ -141,7 +141,6 @@ export function getDisplayName(
   }
 
   cachedDisplayNames.set(type, displayName);
-  window.allReactComponentDisplayNames.set(type, displayName);
   return displayName;
 }