From ff6e05a7055665776fe607bdc69aa8f4a285f995 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Mon, 17 Jun 2024 16:31:36 +0100 Subject: [PATCH] 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 | 6 +- .../react-devtools-core/webpack.backend.js | 13 +- .../react-devtools-core/webpack.standalone.js | 12 -- packages/react-devtools-extensions/utils.js | 13 -- .../webpack.backend.js | 17 +- .../webpack.config.js | 17 +- .../webpack.config.frontend.js | 12 -- .../react-devtools-inline/webpack.config.js | 12 -- .../src/__tests__/console-test.js | 165 ++++++------------ .../src/backend/console.js | 74 ++++---- .../react-devtools-shared/src/constants.js | 19 +- packages/react-devtools-shared/src/hook.js | 55 ++---- .../react-devtools-shell/webpack-server.js | 12 -- scripts/flow/react-devtools.js | 7 +- scripts/jest/devtools/setupEnv.js | 20 +-- 15 files changed, 113 insertions(+), 341 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 47ea90f622..c92fc4739e 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js index 67bf81d0f9..24e3ced0d7 100644 --- a/packages/react-devtools-core/webpack.backend.js +++ b/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: { diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js index fd37617761..5995876e41 100644 --- a/packages/react-devtools-core/webpack.standalone.js +++ b/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: { diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js index 95a72a37ae..3b06bb71f7 100644 --- a/packages/react-devtools-extensions/utils.js +++ b/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, diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js index b3898c6b35..20dc0e3a9f 100644 --- a/packages/react-devtools-extensions/webpack.backend.js +++ b/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 { - 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 {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, diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js index f9424f6719..aef6e93742 100644 --- a/packages/react-devtools-extensions/webpack.config.js +++ b/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 { - 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 {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', diff --git a/packages/react-devtools-fusebox/webpack.config.frontend.js b/packages/react-devtools-fusebox/webpack.config.frontend.js index 713362e04e..40487f623b 100644 --- a/packages/react-devtools-fusebox/webpack.config.frontend.js +++ b/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: { diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js index ca785f773f..2ab8db739a 100644 --- a/packages/react-devtools-inline/webpack.config.js +++ b/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: { diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js index e7a60ea369..c79850901a 100644 --- a/packages/react-devtools-shared/src/__tests__/console-test.js +++ b/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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed', ]); }); @@ -663,81 +657,33 @@ describe('console', () => { ); expect(mockLog.mock.calls).toEqual([ ['log effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'log effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'log effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect create'], ]); expect(mockWarn.mock.calls).toEqual([ ['warn effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`, - 'warn effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`, - 'warn effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect create'], ]); expect(mockError.mock.calls).toEqual([ ['error effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`, - 'error effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`, - 'error effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect create'], ]); expect(mockInfo.mock.calls).toEqual([ ['info effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'info effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'info effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect create'], ]); expect(mockGroup.mock.calls).toEqual([ ['group effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'group effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'group effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect create'], ]); expect(mockGroupCollapsed.mock.calls).toEqual([ ['groupCollapsed effect create'], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'groupCollapsed effect cleanup', - ], - [ - '%c%s', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, - 'groupCollapsed effect create', - ], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed effect cleanup'], + ['\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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', - `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`, + '\x1b[2;38;2;124;124;124m%s\x1b[0m', '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][0]).toEqual('%c%s %s'); - expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba('); - expect(mockWarn.mock.calls[1][2]).toEqual('warn'); - expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][3]).trim()).toEqual( + expect(mockWarn.mock.calls[1]).toHaveLength(3); + expect(mockWarn.mock.calls[1][0]).toEqual( + '\x1b[2;38;2;124;124;124m%s %s\x1b[0m', + ); + 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][0]).toEqual('%c%s %s'); - expect(mockError.mock.calls[1][1]).toMatch('color: rgba('); - expect(mockError.mock.calls[1][2]).toEqual('error'); - expect(normalizeCodeLocInfo(mockError.mock.calls[1][3]).trim()).toEqual( + expect(mockError.mock.calls[1]).toHaveLength(3); + expect(mockError.mock.calls[1][0]).toEqual( + '\x1b[2;38;2;124;124;124m%s %s\x1b[0m', + ); + 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 **)', ); }); diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 0aa0bcdbff..081df39889 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/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, method: string): boolean { - return ( - args.length >= 2 && - STYLE_DIRECTIVE_REGEX.test(args[0]) && - args[1] === `color: ${getConsoleColor(method) || ''}` - ); -} - -function getConsoleColor(method: string): ?string { - 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; +function isStrictModeOverride(args: Array): boolean { + if (__IS_FIREFOX__) { + return ( + args.length >= 2 && + STYLE_DIRECTIVE_REGEX.test(args[0]) && + args[1] === FIREFOX_CONSOLE_DIMMING_COLOR + ); + } else { + return args.length >= 2 && args[0] === ANSI_STYLE_DIMMING_TEMPLATE; } } + 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)) { - args[0] = `${args[0]} %s`; - args.push(componentStack); + if (isStrictModeOverride(args)) { + if (__IS_FIREFOX__) { + 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 - // hiding them. - if (isNode) { - originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args)); + // Dim the text color of the double logs if we're not hiding them. + if (__IS_FIREFOX__) { + originalMethod( + ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR), + ); } else { - const color = getConsoleColor(method); - if (color) { - originalMethod(...formatWithStyles(args, `color: ${color}`)); - } else { - throw Error('Console color is not defined'); - } + originalMethod(ANSI_STYLE_DIMMING_TEMPLATE, ...args); } } }; diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index b73c178bf2..303ae50288 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/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'; diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 3f40efaf21..d16c09e8ce 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/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({ - hideConsoleLogsInStrictMode, - browserTheme, - }: { + function patchConsoleForInitialCommitInStrictMode( 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) => { + // 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 - // hiding them. - let color; - switch (method) { - 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}`)); + // Firefox doesn't support ANSI escape sequences + if (__IS_FIREFOX__) { + originalMethod( + ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_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({ - hideConsoleLogsInStrictMode, - browserTheme, - }); + patchConsoleForInitialCommitInStrictMode(hideConsoleLogsInStrictMode); } else { unpatchConsoleForInitialCommitInStrictMode(); } diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js index 2c78520a6d..467bd6cfa3 100644 --- a/packages/react-devtools-shell/webpack-server.js +++ b/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}"`, }), ], diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js index 361ca16819..67355481e9 100644 --- a/scripts/flow/react-devtools.js +++ b/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 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; +declare const __IS_FIREFOX__: boolean; diff --git a/scripts/jest/devtools/setupEnv.js b/scripts/jest/devtools/setupEnv.js index eadbbcb0af..fd9be56c5c 100644 --- a/scripts/jest/devtools/setupEnv.js +++ b/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.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; +global.__IS_FIREFOX__ = false; const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;