refactor[react-devtools-extensions]: use globals to eliminate dead code (#27516)

Small change to eliminate dead code in builds for different browsers.

Tested by inspecting production sources.

Author: hoxyq

.eslintrc.js

@@ -441,6 +441,14 @@ module.exports = {
         TaskController: 'readonly',
       },
     },
+    {
+      files: ['packages/react-devtools-extensions/**/*.js'],
+      globals: {
+        __IS_CHROME__: 'readonly',
+        __IS_FIREFOX__: 'readonly',
+        __IS_EDGE__: 'readonly',
+      },
+    },
   ],
 
   env: {

packages/react-devtools-extensions/src/background/dynamicallyInjectContentScripts.js

@@ -1,10 +1,8 @@
 /* global chrome */
 
-import {IS_FIREFOX} from '../utils';
-
 // Firefox doesn't support ExecutionWorld.MAIN yet
 // equivalent logic for Firefox is in prepareInjection.js
-const contentScriptsToInject = IS_FIREFOX
+const contentScriptsToInject = __IS_FIREFOX__
   ? [
       {
         id: '@react-devtools/proxy',

packages/react-devtools-extensions/src/background/executeScript.js

@@ -1,7 +1,5 @@
 /* global chrome */
 
-import {IS_FIREFOX} from '../utils';
-
 // Firefox doesn't support ExecutionWorld.MAIN yet
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1736575
 function executeScriptForFirefoxInMainWorld({target, files}) {
@@ -46,7 +44,7 @@ export function executeScriptInIsolatedWorld({target, files}) {
 }
 
 export function executeScriptInMainWorld({target, files}) {
-  if (IS_FIREFOX) {
+  if (__IS_FIREFOX__) {
     return executeScriptForFirefoxInMainWorld({target, files});
   }
 

packages/react-devtools-extensions/src/background/setExtensionIconAndPopup.js

@@ -2,10 +2,8 @@
 
 'use strict';
 
-import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
-
 function setExtensionIconAndPopup(reactBuildType, tabId) {
-  const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
+  const action = __IS_FIREFOX__ ? chrome.browserAction : chrome.action;
 
   action.setIcon({
     tabId,

packages/react-devtools-extensions/src/background/tabsManager.js

@@ -2,8 +2,6 @@
 
 'use strict';
 
-import {IS_FIREFOX} from 'react-devtools-extensions/src/utils';
-
 import setExtensionIconAndPopup from './setExtensionIconAndPopup';
 
 function isRestrictedBrowserPage(url) {
@@ -20,7 +18,7 @@ function checkAndHandleRestrictedPageIfSo(tab) {
 // we can't update for any other types (prod,dev,outdated etc)
 // as the content script needs to be injected at document_start itself for those kinds of detection
 // TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
-if (!IS_FIREFOX) {
+if (__IS_CHROME__ || __IS_EDGE__) {
   chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
   chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
     checkAndHandleRestrictedPageIfSo(tab),
@@ -29,7 +27,7 @@ if (!IS_FIREFOX) {
 
 // Listen to URL changes on the active tab and update the DevTools icon.
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  if (IS_FIREFOX) {
+  if (__IS_FIREFOX__) {
     // We don't properly detect protected URLs in Firefox at the moment.
     // However, we can reset the DevTools icon to its loading state when the URL changes.
     // It will be updated to the correct icon by the onMessage callback below.

packages/react-devtools-extensions/src/contentScripts/prepareInjection.js

@@ -1,7 +1,6 @@
 /* global chrome */
 
 import nullthrows from 'nullthrows';
-import {IS_FIREFOX} from '../utils';
 
 // We run scripts on the page via the service worker (background/index.js) for
 // Manifest V3 extensions (Chrome & Edge).
@@ -62,7 +61,7 @@ window.addEventListener('pageshow', function ({target}) {
   chrome.runtime.sendMessage(lastSentDevToolsHookMessage);
 });
 
-if (IS_FIREFOX) {
+if (__IS_FIREFOX__) {
   injectScriptSync(chrome.runtime.getURL('build/renderer.js'));
 
   // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.

packages/react-devtools-extensions/src/main/index.js

@@ -5,7 +5,7 @@ import {flushSync} from 'react-dom';
 import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
-import {IS_CHROME, IS_EDGE, getBrowserTheme, IS_FIREFOX} from '../utils';
+import {getBrowserTheme} from '../utils';
 import {
   localStorageGetItem,
   localStorageSetItem,
@@ -93,10 +93,10 @@ function createBridgeAndStore() {
 
   store = new Store(bridge, {
     isProfiling,
-    supportsReloadAndProfile: IS_CHROME || IS_EDGE,
+    supportsReloadAndProfile: __IS_CHROME__ || __IS_EDGE__,
     supportsProfiling,
     // At this time, the timeline can only parse Chrome performance profiles.
-    supportsTimeline: IS_CHROME,
+    supportsTimeline: __IS_CHROME__,
     supportsTraceUpdates: true,
   });
 
@@ -218,8 +218,8 @@ function createComponentsPanel() {
   }
 
   chrome.devtools.panels.create(
-    IS_CHROME || IS_EDGE ? '⚛️ Components' : 'Components',
-    IS_EDGE ? 'icons/production.svg' : '',
+    __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components',
+    __IS_EDGE__ ? 'icons/production.svg' : '',
     'panel.html',
     createdPanel => {
       componentsPanel = createdPanel;
@@ -257,8 +257,8 @@ function createProfilerPanel() {
   }
 
   chrome.devtools.panels.create(
-    IS_CHROME || IS_EDGE ? '⚛️ Profiler' : 'Profiler',
-    IS_EDGE ? 'icons/production.svg' : '',
+    __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler',
+    __IS_EDGE__ ? 'icons/production.svg' : '',
     'panel.html',
     createdPanel => {
       profilerPanel = createdPanel;
@@ -444,7 +444,7 @@ const debouncedOnNavigatedListener = debounce(() => {
 chrome.devtools.network.onNavigated.addListener(debouncedOnNavigatedListener);
 
 // Should be emitted when browser DevTools are closed
-if (IS_FIREFOX) {
+if (__IS_FIREFOX__) {
   // For some reason Firefox doesn't emit onBeforeUnload event
   window.addEventListener('unload', performFullCleanup);
 } else {

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

@@ -2,12 +2,8 @@
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export const IS_EDGE: boolean = process.env.IS_EDGE;
-export const IS_FIREFOX: boolean = process.env.IS_FIREFOX;
-export const IS_CHROME: boolean = process.env.IS_CHROME;
-
 export function getBrowserTheme(): BrowserTheme {
-  if (IS_CHROME) {
+  if (__IS_CHROME__) {
     // chrome.devtools.panels added in Chrome 18.
     // chrome.devtools.panels.themeName added in Chrome 54.
     return chrome.devtools.panels.themeName === 'dark' ? 'dark' : 'light';

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

@@ -90,7 +90,10 @@ module.exports = {
     minimizer: [
       new TerserPlugin({
         terserOptions: {
-          compress: false,
+          compress: {
+            unused: true,
+            dead_code: true,
+          },
           mangle: {
             keep_fnames: true,
           },
@@ -113,6 +116,9 @@ module.exports = {
       __EXTENSION__: true,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      __IS_CHROME__: IS_CHROME,
+      __IS_FIREFOX__: IS_FIREFOX,
+      __IS_EDGE__: IS_EDGE,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
@@ -125,9 +131,6 @@ module.exports = {
       'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
-      'process.env.IS_CHROME': IS_CHROME,
-      'process.env.IS_FIREFOX': IS_FIREFOX,
-      'process.env.IS_EDGE': IS_EDGE,
     }),
   ],
   module: {