diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js index 0f7e3835bdde9..9d9eeb044791a 100644 --- a/packages/react-devtools-extensions/src/backend.js +++ b/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); } diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js index 9fc9f2502eec1..e80160ac9b2f3 100644 --- a/packages/react-devtools-extensions/src/utils.js +++ b/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]; diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index a1cbb7b6f9bc1..ba46c9b4c5651 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/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({ diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index ad2c23caf9fc1..30abb2c266dc5 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/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__, diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 0a6e8b4f7a2be..156227a74ca3b 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/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, diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 4a1f0688901c9..efe29e9f85841 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/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; }