diff --git a/.eslintrc.js b/.eslintrc.js index 47ea90f62274f..c92fc4739eded 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 67bf81d0f9965..24e3ced0d7b46 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 fd37617761752..5995876e41de5 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 95a72a37ae340..3b06bb71f7d4e 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 b3898c6b3502d..20dc0e3a9fd20 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 f9424f671960f..aef6e93742b03 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 713362e04e42d..40487f623bed7 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 ca785f773f27d..2ab8db739a599 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 e7a60ea369560..c79850901a825 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 0aa0bcdbff8db..081df398893da 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 b73c178bf2980..303ae502880a8 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 3f40efaf218c5..d16c09e8ce77c 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 2c78520a6d4eb..467bd6cfa363b 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 361ca168190ef..67355481e9fd4 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 eadbbcb0afaed..fd9be56c5c7f8 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;