moved console log colors to process.env in webpack

facebook · Aug 24, 2021 · d938848 · d938848
1 parent c137a15
commit d938848
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 27 deletions.
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
@@ -60,6 +60,12 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   optimization: {

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
@@ -67,6 +67,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   module: {

diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
@@ -58,6 +58,12 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   module: {

diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
@@ -76,6 +76,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   module: {

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
@@ -70,6 +70,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   module: {

diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
@@ -15,15 +15,8 @@ import {format} from './utils';
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 
-// NOTE: KEEP IN SYNC with src/hook.js
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
 const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
-const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
-const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
-const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
-const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
-const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
-const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
 
 // React's custom built component stack strings match "\s{4}in"
 // Chrome's prefix matches "\s{4}at"
@@ -256,21 +249,21 @@ export function patch({
                 case 'warn':
                   color =
                     browserTheme === 'light'
-                      ? LIGHT_MODE_DIMMED_WARNING_COLOR
-                      : DARK_MODE_DIMMED_WARNING_COLOR;
+                      ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                      : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
                   break;
                 case 'error':
                   color =
                     browserTheme === 'light'
-                      ? LIGHT_MODE_DIMMED_ERROR_COLOR
-                      : DARK_MODE_DIMMED_ERROR_COLOR;
+                      ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                      : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
                   break;
                 case 'log':
                 default:
                   color =
                     browserTheme === 'light'
-                      ? LIGHT_MODE_DIMMED_LOG_COLOR
-                      : DARK_MODE_DIMMED_LOG_COLOR;
+                      ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                      : process.env.DARK_MODE_DIMMED_LOG_COLOR;
                   break;
               }
 

diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
@@ -26,14 +26,6 @@ export function installHook(target: any): DevToolsHook | null {
     return null;
   }
 
-  // Keep in sync with src/backend/console.js
-  const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
-  const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
-  const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
-  const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
-  const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
-  const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
-
   function detectReactBuildType(renderer) {
     try {
       if (typeof renderer.version === 'string') {
@@ -278,21 +270,21 @@ export function installHook(target: any): DevToolsHook | null {
                   case 'warn':
                     color =
                       browserTheme === 'light'
-                        ? LIGHT_MODE_DIMMED_WARNING_COLOR
-                        : DARK_MODE_DIMMED_WARNING_COLOR;
+                        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
                     break;
                   case 'error':
                     color =
                       browserTheme === 'light'
-                        ? LIGHT_MODE_DIMMED_ERROR_COLOR
-                        : DARK_MODE_DIMMED_ERROR_COLOR;
+                        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
                     break;
                   case 'log':
                   default:
                     color =
                       browserTheme === 'light'
-                        ? LIGHT_MODE_DIMMED_LOG_COLOR
-                        : DARK_MODE_DIMMED_LOG_COLOR;
+                        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
                     break;
                 }
 

diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
@@ -59,6 +59,12 @@ const config = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.5)"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.5)"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"rgba(250, 180, 50, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"rgba(250, 123, 130, 0.75)"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"rgba(125, 125, 125, 0.75)"`,
     }),
   ],
   module: {

diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
@@ -9,3 +9,10 @@
 
 declare var __EXTENSION__: boolean;
 declare var __TEST__: boolean;
+
+declare var DARK_MODE_DIMMED_WARNING_COLOR: string;
+declare var DARK_MODE_DIMMED_ERROR_COLOR: string;
+declare var DARK_MODE_DIMMED_LOG_COLOR: string;
+declare var LIGHT_MODE_DIMMED_WARNING_COLOR: string;
+declare var LIGHT_MODE_DIMMED_ERROR_COLOR: string;
+declare var LIGHT_MODE_DIMMED_LOG_COLOR: string;