chore[react-devtools]: unify console patching and default to ansi escape symbols (#29869)

Stacked on https://github.com/facebook/react/pull/29856.

## Summary

By default, React DevTools will apply dimming with ANSI escape symbols,
so it works for both terminals and browser consoles.

For Firefox, which doesn't support ANSI escape symbols console stylings,
we fallback to css properties, like we used to do before.

## How did you test this change?

| Environment | Dark mode | Light mode |
|--------|--------|--------|
| Terminal | ![Screenshot 2024-06-12 at 19 39
46](https://github.com/facebook/react/assets/28902667/2d470eee-ec5f-4362-be7d-8d80c6c72d09)
| ![Screenshot 2024-06-12 at 19 39
09](https://github.com/facebook/react/assets/28902667/616f2c58-a251-406b-aee6-841e07d652ba)
|
| Fusebox console | ![Screenshot 2024-06-12 at 21 03
14](https://github.com/facebook/react/assets/28902667/6050f730-8e82-4aa1-acbc-7179aac3a8aa)
| ![Screenshot 2024-06-12 at 21 02
48](https://github.com/facebook/react/assets/28902667/6708b938-8a90-476f-a057-427963d58caa)
|
| Firefox console | ![Screenshot 2024-06-12 at 21 40
29](https://github.com/facebook/react/assets/28902667/4721084f-bbfa-438c-b61b-395da8ded590)
| ![Screenshot 2024-06-12 at 21 40
42](https://github.com/facebook/react/assets/28902667/72bbf001-2d3d-49e7-91c9-20a4f0914d4d)
|
| Chrome console | ![Screenshot 2024-06-12 at 21 43
09](https://github.com/facebook/react/assets/28902667/93c47881-a0dd-44f8-8dc2-8710149774e5)
| ![Screenshot 2024-06-12 at 21 43
00](https://github.com/facebook/react/assets/28902667/07ea4ff5-4322-4db9-9c12-4321d9577c9d)
|

.eslintrc.js

@@ -484,7 +484,11 @@ module.exports = {
       },
     },
     {
-      files: ['packages/react-devtools-extensions/**/*.js'],
+      files: [
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-shared/src/hook.js',
+        'packages/react-devtools-shared/src/backend/console.js',
+      ],
       globals: {
         __IS_CHROME__: 'readonly',
         __IS_FIREFOX__: 'readonly',

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

@@ -1,12 +1,6 @@
 const {resolve} = require('path');
 const Webpack = require('webpack');
 const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -74,15 +68,10 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      __IS_FIREFOX__: false,
       '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': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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}"`,
     }),
   ],
   optimization: {

packages/react-devtools-core/webpack.standalone.js

@@ -1,12 +1,6 @@
 const {resolve} = require('path');
 const Webpack = require('webpack');
 const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -99,12 +93,6 @@ module.exports = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
-      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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}"`,
     }),
   ],
   module: {

packages/react-devtools-extensions/utils.js

@@ -9,13 +9,6 @@ const {execSync} = require('child_process');
 const {readFileSync} = require('fs');
 const {resolve} = require('path');
 
-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)';
-
 const GITHUB_URL = 'https://github.com/facebook/react';
 
 function getGitCommit() {
@@ -45,12 +38,6 @@ function getVersionString(packageVersion = null) {
 }
 
 module.exports = {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getGitCommit,
   getVersionString,

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

@@ -6,16 +6,7 @@ const Webpack = require('webpack');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
 
-const {
+const {GITHUB_URL, getVersionString} = require('./utils');
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
-  GITHUB_URL,
-  getVersionString,
-} = require('./utils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -80,12 +71,6 @@ 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': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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,

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

@@ -3,16 +3,7 @@
 const {resolve, isAbsolute, relative} = require('path');
 const Webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
-const {
+const {GITHUB_URL, getVersionString} = require('./utils');
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
-  GITHUB_URL,
-  getVersionString,
-} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
 
@@ -128,12 +119,6 @@ module.exports = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
-      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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}"`,
     }),
     new Webpack.SourceMapDevToolPlugin({
       filename: '[file].map',

packages/react-devtools-fusebox/webpack.config.frontend.js

@@ -1,12 +1,6 @@
 const {resolve} = require('path');
 const Webpack = require('webpack');
 const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -93,12 +87,6 @@ module.exports = {
       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
-      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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}"`,
     }),
   ],
   module: {

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

@@ -1,12 +1,6 @@
 const {resolve} = require('path');
 const Webpack = require('webpack');
 const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -84,12 +78,6 @@ module.exports = {
       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
-      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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}"`,
     }),
   ],
   module: {

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -515,58 +515,52 @@ describe('console', () => {
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
     expect(mockLog.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'log',
     ]);
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
       'warn',
     ]);
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
-    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
       'error',
     ]);
 
     expect(mockInfo).toHaveBeenCalledTimes(2);
     expect(mockInfo.mock.calls[0]).toHaveLength(1);
     expect(mockInfo.mock.calls[0][0]).toBe('info');
-    expect(mockInfo.mock.calls[1]).toHaveLength(3);
+    expect(mockInfo.mock.calls[1]).toHaveLength(2);
     expect(mockInfo.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'info',
     ]);
 
     expect(mockGroup).toHaveBeenCalledTimes(2);
     expect(mockGroup.mock.calls[0]).toHaveLength(1);
     expect(mockGroup.mock.calls[0][0]).toBe('group');
-    expect(mockGroup.mock.calls[1]).toHaveLength(3);
+    expect(mockGroup.mock.calls[1]).toHaveLength(2);
     expect(mockGroup.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'group',
     ]);
 
     expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
     expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
     expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
-    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
+    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(2);
     expect(mockGroupCollapsed.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'groupCollapsed',
     ]);
   });
@@ -663,81 +657,33 @@ describe('console', () => {
     );
     expect(mockLog.mock.calls).toEqual([
       ['log effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'log effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'log effect create',
-      ],
     ]);
     expect(mockWarn.mock.calls).toEqual([
       ['warn effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
-        'warn effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
-        'warn effect create',
-      ],
     ]);
     expect(mockError.mock.calls).toEqual([
       ['error effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
-        'error effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
-        'error effect create',
-      ],
     ]);
     expect(mockInfo.mock.calls).toEqual([
       ['info effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'info effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'info effect create',
-      ],
     ]);
     expect(mockGroup.mock.calls).toEqual([
       ['group effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'group effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'group effect create',
-      ],
     ]);
     expect(mockGroupCollapsed.mock.calls).toEqual([
       ['groupCollapsed effect create'],
-      [
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed effect cleanup'],
-        '%c%s',
+      ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed effect create'],
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'groupCollapsed effect cleanup',
-      ],
-      [
-        '%c%s',
-        `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
-        'groupCollapsed effect create',
-      ],
     ]);
   });
 
@@ -816,58 +762,52 @@ describe('console', () => {
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
     expect(mockLog.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'log',
     ]);
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
       'warn',
     ]);
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
-    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
       'error',
     ]);
 
     expect(mockInfo).toHaveBeenCalledTimes(2);
     expect(mockInfo.mock.calls[0]).toHaveLength(1);
     expect(mockInfo.mock.calls[0][0]).toBe('info');
-    expect(mockInfo.mock.calls[1]).toHaveLength(3);
+    expect(mockInfo.mock.calls[1]).toHaveLength(2);
     expect(mockInfo.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'info',
     ]);
 
     expect(mockGroup).toHaveBeenCalledTimes(2);
     expect(mockGroup.mock.calls[0]).toHaveLength(1);
     expect(mockGroup.mock.calls[0][0]).toBe('group');
-    expect(mockGroup.mock.calls[1]).toHaveLength(3);
+    expect(mockGroup.mock.calls[1]).toHaveLength(2);
     expect(mockGroup.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'group',
     ]);
 
     expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
     expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
     expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
-    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
+    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(2);
     expect(mockGroupCollapsed.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'groupCollapsed',
     ]);
   });
@@ -960,30 +900,27 @@ describe('console', () => {
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
-    expect(mockLog.mock.calls[1]).toHaveLength(3);
+    expect(mockLog.mock.calls[1]).toHaveLength(2);
     expect(mockLog.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
       'log',
     ]);
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
     expect(mockWarn.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
       'warn',
     ]);
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
-    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toHaveLength(2);
     expect(mockError.mock.calls[1]).toEqual([
-      '%c%s',
+      '\x1b[2;38;2;124;124;124m%s\x1b[0m',
-      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
       'error',
     ]);
   });
@@ -1061,11 +998,12 @@ describe('console', () => {
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
-    expect(mockWarn.mock.calls[1]).toHaveLength(4);
+    expect(mockWarn.mock.calls[1]).toHaveLength(3);
-    expect(mockWarn.mock.calls[1][0]).toEqual('%c%s %s');
+    expect(mockWarn.mock.calls[1][0]).toEqual(
-    expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba(');
+      '\x1b[2;38;2;124;124;124m%s %s\x1b[0m',
-    expect(mockWarn.mock.calls[1][2]).toEqual('warn');
+    );
-    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][3]).trim()).toEqual(
+    expect(mockWarn.mock.calls[1][1]).toMatch('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][2]).trim()).toEqual(
       'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
 
@@ -1074,11 +1012,12 @@ describe('console', () => {
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toEqual(
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
-    expect(mockError.mock.calls[1]).toHaveLength(4);
+    expect(mockError.mock.calls[1]).toHaveLength(3);
-    expect(mockError.mock.calls[1][0]).toEqual('%c%s %s');
+    expect(mockError.mock.calls[1][0]).toEqual(
-    expect(mockError.mock.calls[1][1]).toMatch('color: rgba(');
+      '\x1b[2;38;2;124;124;124m%s %s\x1b[0m',
-    expect(mockError.mock.calls[1][2]).toEqual('error');
+    );
-    expect(normalizeCodeLocInfo(mockError.mock.calls[1][3]).trim()).toEqual(
+    expect(mockError.mock.calls[1][1]).toEqual('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][2]).trim()).toEqual(
       'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
   });

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

@@ -15,8 +15,13 @@ import type {
   WorkTagMap,
   ConsolePatchSettings,
 } from './types';
-import {format, formatWithStyles} from './utils';
+import {formatWithStyles} from './utils';
 
+import {
+  FIREFOX_CONSOLE_DIMMING_COLOR,
+  ANSI_STYLE_DIMMING_TEMPLATE,
+  ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
+} from 'react-devtools-shared/src/constants';
 import {getInternalReactConstants, getDispatcherRef} from './renderer';
 import {
   getStackByFiberInDevAndProd,
@@ -25,7 +30,6 @@ import {
 import {castBool, castBrowserTheme} from '../utils';
 
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
-const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
 
 // React's custom built component stack strings match "\s{4}in"
 // Chrome's prefix matches "\s{4}at"
@@ -44,31 +48,18 @@ const STYLE_DIRECTIVE_REGEX = /^%c/;
 // method has been overridden by the patchForStrictMode function.
 // If it has we'll need to do some special formatting of the arguments
 // so the console color stays consistent
-function isStrictModeOverride(args: Array<string>, method: string): boolean {
+function isStrictModeOverride(args: Array<string>): boolean {
-  return (
+  if (__IS_FIREFOX__) {
-    args.length >= 2 &&
+    return (
-    STYLE_DIRECTIVE_REGEX.test(args[0]) &&
+      args.length >= 2 &&
-    args[1] === `color: ${getConsoleColor(method) || ''}`
+      STYLE_DIRECTIVE_REGEX.test(args[0]) &&
-  );
+      args[1] === FIREFOX_CONSOLE_DIMMING_COLOR
-}
+    );
-
+  } else {
-function getConsoleColor(method: string): ?string {
+    return args.length >= 2 && args[0] === ANSI_STYLE_DIMMING_TEMPLATE;
-  switch (method) {
-    case 'warn':
-      return consoleSettingsRef.browserTheme === 'light'
-        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-    case 'error':
-      return consoleSettingsRef.browserTheme === 'light'
-        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-    case 'log':
-    default:
-      return consoleSettingsRef.browserTheme === 'light'
-        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
   }
 }
+
 type OnErrorOrWarning = (
   fiber: Fiber,
   type: 'error' | 'warn',
@@ -93,11 +84,6 @@ for (const method in console) {
 
 let unpatchFn: null | (() => void) = null;
 
-let isNode = false;
-try {
-  isNode = this === global;
-} catch (error) {}
-
 // Enables e.g. Jest tests to inject a mock console object.
 export function dangerous_setTargetConsoleForTesting(
   targetConsoleForTesting: Object,
@@ -247,9 +233,15 @@ export function patch({
                     (currentDispatcherRef: any),
                   );
                   if (componentStack !== '') {
-                    if (isStrictModeOverride(args, method)) {
+                    if (isStrictModeOverride(args)) {
-                      args[0] = `${args[0]} %s`;
+                      if (__IS_FIREFOX__) {
-                      args.push(componentStack);
+                        args[0] = `${args[0]} %s`;
+                        args.push(componentStack);
+                      } else {
+                        args[0] =
+                          ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK;
+                        args.push(componentStack);
+                      }
                     } else {
                       args.push(componentStack);
                     }
@@ -337,17 +329,13 @@ export function patchForStrictMode() {
       // $FlowFixMe[missing-local-annot]
       const overrideMethod = (...args) => {
         if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
-          // Dim the text color of the double logs if we're not
+          // Dim the text color of the double logs if we're not hiding them.
-          // hiding them.
+          if (__IS_FIREFOX__) {
-          if (isNode) {
+            originalMethod(
-            originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args));
+              ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR),
+            );
           } else {
-            const color = getConsoleColor(method);
+            originalMethod(ANSI_STYLE_DIMMING_TEMPLATE, ...args);
-            if (color) {
-              originalMethod(...formatWithStyles(args, `color: ${color}`));
-            } else {
-              throw Error('Console color is not defined');
-            }
           }
         }
       };

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

@@ -29,46 +29,37 @@ export const PROFILING_FLAG_BASIC_SUPPORT = 0b01;
 export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
 
 export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
-
 export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
-
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
-
 export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
   'React::DevTools::openInEditorUrl';
-
 export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
   'React::DevTools::openInEditorUrlPreset';
-
 export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
   'React::DevTools::parseHookNames';
-
 export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
-
 export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
-
 export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
   'React::DevTools::breakOnConsoleErrors';
-
 export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
-
 export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
   'React::DevTools::appendComponentStack';
-
 export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
   'React::DevTools::showInlineWarningsAndErrors';
-
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
-
 export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
   'React::DevTools::hideConsoleLogsInStrictMode';
-
 export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 export const PROFILER_EXPORT_VERSION = 5;
+
+export const FIREFOX_CONSOLE_DIMMING_COLOR = 'color: rgba(124, 124, 124, 0.75)';
+export const ANSI_STYLE_DIMMING_TEMPLATE = '\x1b[2;38;2;124;124;124m%s\x1b[0m';
+export const ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK =
+  '\x1b[2;38;2;124;124;124m%s %s\x1b[0m';

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

@@ -8,7 +8,6 @@
  * @flow
  */
 
-import type {BrowserTheme} from './frontend/types';
 import type {
   DevToolsHook,
   Handler,
@@ -18,6 +17,11 @@ import type {
   DevToolsBackend,
 } from './backend/types';
 
+import {
+  FIREFOX_CONSOLE_DIMMING_COLOR,
+  ANSI_STYLE_DIMMING_TEMPLATE,
+} from 'react-devtools-shared/src/constants';
+
 declare var window: any;
 
 export function installHook(target: any): DevToolsHook | null {
@@ -225,13 +229,9 @@ export function installHook(target: any): DevToolsHook | null {
   // React and DevTools are connecting and the renderer interface isn't avaiable
   // and we want to be able to have consistent logging behavior for double logs
   // during the initial renderer.
-  function patchConsoleForInitialCommitInStrictMode({
+  function patchConsoleForInitialCommitInStrictMode(
-    hideConsoleLogsInStrictMode,
-    browserTheme,
-  }: {
     hideConsoleLogsInStrictMode: boolean,
-    browserTheme: BrowserTheme,
+  ) {
-  }) {
     const overrideConsoleMethods = [
       'error',
       'group',
@@ -266,36 +266,15 @@ export function installHook(target: any): DevToolsHook | null {
           : targetConsole[method]);
 
         const overrideMethod = (...args: $ReadOnlyArray<any>) => {
+          // Dim the text color of the double logs if we're not hiding them.
           if (!hideConsoleLogsInStrictMode) {
-            // Dim the text color of the double logs if we're not
+            // Firefox doesn't support ANSI escape sequences
-            // hiding them.
+            if (__IS_FIREFOX__) {
-            let color;
+              originalMethod(
-            switch (method) {
+                ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR),
-              case 'warn':
+              );
-                color =
-                  browserTheme === 'light'
-                    ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-                    : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-                break;
-              case 'error':
-                color =
-                  browserTheme === 'light'
-                    ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-                    : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-                break;
-              case 'log':
-              default:
-                color =
-                  browserTheme === 'light'
-                    ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-                    : process.env.DARK_MODE_DIMMED_LOG_COLOR;
-                break;
-            }
-
-            if (color) {
-              originalMethod(...formatWithStyles(args, `color: ${color}`));
             } else {
-              throw Error('Console color is not defined');
+              originalMethod(ANSI_STYLE_DIMMING_TEMPLATE, ...args);
             }
           }
         };
@@ -456,12 +435,8 @@ export function installHook(target: any): DevToolsHook | null {
       if (isStrictMode) {
         const hideConsoleLogsInStrictMode =
           window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
 
-        patchConsoleForInitialCommitInStrictMode({
+        patchConsoleForInitialCommitInStrictMode(hideConsoleLogsInStrictMode);
-          hideConsoleLogsInStrictMode,
-          browserTheme,
-        });
       } else {
         unpatchConsoleForInitialCommitInStrictMode();
       }

packages/react-devtools-shell/webpack-server.js

@@ -2,12 +2,6 @@ const {resolve} = require('path');
 const Webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -81,12 +75,6 @@ const makeConfig = (entry, alias) => ({
       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
-      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      '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.E2E_APP_REACT_VERSION': `"${REACT_VERSION}"`,
     }),
   ],

scripts/flow/react-devtools.js

@@ -12,9 +12,4 @@
 declare const __EXTENSION__: boolean;
 declare const __TEST__: boolean;
 
-declare const DARK_MODE_DIMMED_WARNING_COLOR: string;
+declare const __IS_FIREFOX__: boolean;
-declare const DARK_MODE_DIMMED_ERROR_COLOR: string;
-declare const DARK_MODE_DIMMED_LOG_COLOR: string;
-declare const LIGHT_MODE_DIMMED_WARNING_COLOR: string;
-declare const LIGHT_MODE_DIMMED_ERROR_COLOR: string;
-declare const LIGHT_MODE_DIMMED_LOG_COLOR: string;

scripts/jest/devtools/setupEnv.js

@@ -3,15 +3,6 @@
 const semver = require('semver');
 const {ReactVersion} = require('../../../ReactVersions');
 
-const {
-  DARK_MODE_DIMMED_WARNING_COLOR,
-  DARK_MODE_DIMMED_ERROR_COLOR,
-  DARK_MODE_DIMMED_LOG_COLOR,
-  LIGHT_MODE_DIMMED_WARNING_COLOR,
-  LIGHT_MODE_DIMMED_ERROR_COLOR,
-  LIGHT_MODE_DIMMED_LOG_COLOR,
-} = require('react-devtools-extensions/utils');
-
 // DevTools stores preferences between sessions in localStorage
 if (!global.hasOwnProperty('localStorage')) {
   global.localStorage = require('local-storage-fallback').default;
@@ -20,16 +11,7 @@ if (!global.hasOwnProperty('localStorage')) {
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 global.__TEST__ = true;
-
+global.__IS_FIREFOX__ = false;
-global.process.env.DARK_MODE_DIMMED_WARNING_COLOR =
-  DARK_MODE_DIMMED_WARNING_COLOR;
-global.process.env.DARK_MODE_DIMMED_ERROR_COLOR = DARK_MODE_DIMMED_ERROR_COLOR;
-global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
-global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR =
-  LIGHT_MODE_DIMMED_WARNING_COLOR;
-global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR =
-  LIGHT_MODE_DIMMED_ERROR_COLOR;
-global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
 
 const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;