refactor: resolve browser via env variables based on build rather than user agent

Author: hoxyq

packages/react-devtools-extensions/build.js

@@ -52,24 +52,25 @@ const preProcess = async (destinationPath, tempPath) => {
   await ensureDir(tempPath); // Create temp dir for this new build
 };
 
-const build = async (tempPath, manifestPath) => {
+const build = async (tempPath, manifestPath, envExtension = {}) => {
   const binPath = join(tempPath, 'bin');
   const zipPath = join(tempPath, 'zip');
+  const mergedEnv = {...process.env, ...envExtension};
 
   const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
   execSync(
     `${webpackPath} --config webpack.config.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: process.env,
+      env: mergedEnv,
       stdio: 'inherit',
     },
   );
   execSync(
     `${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
     {
       cwd: __dirname,
-      env: process.env,
+      env: mergedEnv,
       stdio: 'inherit',
     },
   );
@@ -132,16 +133,32 @@ const postProcess = async (tempPath, destinationPath) => {
   await remove(tempPath); // Clean up temp directory and files
 };
 
+const SUPPORTED_BUILDS = ['chrome', 'firefox', 'edge'];
+
 const main = async buildId => {
+  if (!SUPPORTED_BUILDS.includes(buildId)) {
+    throw new Error(
+      `Unexpected build id - "${buildId}". Use one of ${JSON.stringify(
+        SUPPORTED_BUILDS,
+      )}.`,
+    );
+  }
+
   const root = join(__dirname, buildId);
   const manifestPath = join(root, 'manifest.json');
   const destinationPath = join(root, 'build');
 
+  const envExtension = {
+    IS_CHROME: buildId === 'chrome',
+    IS_FIREFOX: buildId === 'firefox',
+    IS_EDGE: buildId === 'edge',
+  };
+
   try {
     const tempPath = join(__dirname, 'build', buildId);
     await ensureLocalBuild();
     await preProcess(destinationPath, tempPath);
-    await build(tempPath, manifestPath);
+    await build(tempPath, manifestPath, envExtension);
 
     const builtUnpackedPath = join(destinationPath, 'unpacked');
     await postProcess(tempPath, destinationPath);

packages/react-devtools-extensions/edge/build.js

@@ -6,6 +6,7 @@ const chalk = require('chalk');
 const {execSync} = require('child_process');
 const {join} = require('path');
 const {argv} = require('yargs');
+
 const build = require('../build');
 
 const main = async () => {
@@ -15,15 +16,7 @@ const main = async () => {
 
   const cwd = join(__dirname, 'build');
   if (crx) {
-    const crxPath = join(
-      __dirname,
-      '..',
-      '..',
-      '..',
-      'node_modules',
-      '.bin',
-      'crx'
-    );
+    const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');
 
     execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
       cwd,

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

@@ -2,26 +2,9 @@
 
 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;
-
-export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
-
-export function getBrowserName(): BrowserName {
-  if (IS_EDGE) {
-    return 'Edge';
-  }
-  if (IS_FIREFOX) {
-    return 'Firefox';
-  }
-  if (IS_CHROME) {
-    return 'Chrome';
-  }
-  throw new Error(
-    'Expected browser name to be one of Chrome, Edge or Firefox.',
-  );
-}
+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) {

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

@@ -34,6 +34,10 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 module.exports = {
@@ -79,6 +83,9 @@ 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,
     }),
     new DevToolsIgnorePlugin({
       shouldIgnorePath: function (path) {

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

@@ -35,6 +35,10 @@ const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 const EDITOR_URL = process.env.EDITOR_URL || null;
 const LOGGING_URL = process.env.LOGGING_URL || null;
 
+const IS_CHROME = process.env.IS_CHROME === 'true';
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
+const IS_EDGE = process.env.IS_EDGE === 'true';
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 const babelOptions = {
@@ -105,6 +109,9 @@ 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: {