Skip to content

Commit ff6e05a

Browse files
hoxyqhoxyq
authored
chore[react-devtools]: unify console patching and default to ansi escape symbols (facebook#29869)
Stacked on facebook#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) |
1 parent dbc5f36 commit ff6e05a

File tree

15 files changed

+113
-341
lines changed

15 files changed

+113
-341
lines changed

‎.eslintrc.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,11 @@ module.exports = {
484484
},
485485
},
486486
{
487-
files: ['packages/react-devtools-extensions/**/*.js'],
487+
files: [
488+
'packages/react-devtools-extensions/**/*.js',
489+
'packages/react-devtools-shared/src/hook.js',
490+
'packages/react-devtools-shared/src/backend/console.js',
491+
],
488492
globals: {
489493
__IS_CHROME__: 'readonly',
490494
__IS_FIREFOX__: 'readonly',

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

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
const {resolve} = require('path');
22
const Webpack = require('webpack');
33
const {
4-
DARK_MODE_DIMMED_WARNING_COLOR,
5-
DARK_MODE_DIMMED_ERROR_COLOR,
6-
DARK_MODE_DIMMED_LOG_COLOR,
7-
LIGHT_MODE_DIMMED_WARNING_COLOR,
8-
LIGHT_MODE_DIMMED_ERROR_COLOR,
9-
LIGHT_MODE_DIMMED_LOG_COLOR,
104
GITHUB_URL,
115
getVersionString,
126
} = require('react-devtools-extensions/utils');
@@ -74,15 +68,10 @@ module.exports = {
7468
__EXTENSION__: false,
7569
__PROFILE__: false,
7670
__TEST__: NODE_ENV === 'test',
71+
__IS_FIREFOX__: false,
7772
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
7873
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7974
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
80-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
81-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
82-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
83-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
84-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
85-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
8675
}),
8776
],
8877
optimization: {

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
const {resolve} = require('path');
22
const Webpack = require('webpack');
33
const {
4-
DARK_MODE_DIMMED_WARNING_COLOR,
5-
DARK_MODE_DIMMED_ERROR_COLOR,
6-
DARK_MODE_DIMMED_LOG_COLOR,
7-
LIGHT_MODE_DIMMED_WARNING_COLOR,
8-
LIGHT_MODE_DIMMED_ERROR_COLOR,
9-
LIGHT_MODE_DIMMED_LOG_COLOR,
104
GITHUB_URL,
115
getVersionString,
126
} = require('react-devtools-extensions/utils');
@@ -99,12 +93,6 @@ module.exports = {
9993
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
10094
'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
10195
'process.env.NODE_ENV': `"${NODE_ENV}"`,
102-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
103-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
104-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
105-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
106-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
107-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
10896
}),
10997
],
11098
module: {

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

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,6 @@ const {execSync} = require('child_process');
99
const {readFileSync} = require('fs');
1010
const {resolve} = require('path');
1111

12-
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
13-
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
14-
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
15-
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
16-
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
17-
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
18-
1912
const GITHUB_URL = 'https://github.com/facebook/react';
2013

2114
function getGitCommit() {
@@ -45,12 +38,6 @@ function getVersionString(packageVersion = null) {
4538
}
4639

4740
module.exports = {
48-
DARK_MODE_DIMMED_WARNING_COLOR,
49-
DARK_MODE_DIMMED_ERROR_COLOR,
50-
DARK_MODE_DIMMED_LOG_COLOR,
51-
LIGHT_MODE_DIMMED_WARNING_COLOR,
52-
LIGHT_MODE_DIMMED_ERROR_COLOR,
53-
LIGHT_MODE_DIMMED_LOG_COLOR,
5441
GITHUB_URL,
5542
getGitCommit,
5643
getVersionString,

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,7 @@ const Webpack = require('webpack');
66
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
77
const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
88

9-
const {
10-
DARK_MODE_DIMMED_WARNING_COLOR,
11-
DARK_MODE_DIMMED_ERROR_COLOR,
12-
DARK_MODE_DIMMED_LOG_COLOR,
13-
LIGHT_MODE_DIMMED_WARNING_COLOR,
14-
LIGHT_MODE_DIMMED_ERROR_COLOR,
15-
LIGHT_MODE_DIMMED_LOG_COLOR,
16-
GITHUB_URL,
17-
getVersionString,
18-
} = require('./utils');
9+
const {GITHUB_URL, getVersionString} = require('./utils');
1910

2011
const NODE_ENV = process.env.NODE_ENV;
2112
if (!NODE_ENV) {
@@ -80,12 +71,6 @@ module.exports = {
8071
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
8172
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
8273
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
83-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
84-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
85-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
86-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
87-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
88-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
8974
'process.env.IS_CHROME': IS_CHROME,
9075
'process.env.IS_FIREFOX': IS_FIREFOX,
9176
'process.env.IS_EDGE': IS_EDGE,

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,7 @@
33
const {resolve, isAbsolute, relative} = require('path');
44
const Webpack = require('webpack');
55
const TerserPlugin = require('terser-webpack-plugin');
6-
const {
7-
DARK_MODE_DIMMED_WARNING_COLOR,
8-
DARK_MODE_DIMMED_ERROR_COLOR,
9-
DARK_MODE_DIMMED_LOG_COLOR,
10-
LIGHT_MODE_DIMMED_WARNING_COLOR,
11-
LIGHT_MODE_DIMMED_ERROR_COLOR,
12-
LIGHT_MODE_DIMMED_LOG_COLOR,
13-
GITHUB_URL,
14-
getVersionString,
15-
} = require('./utils');
6+
const {GITHUB_URL, getVersionString} = require('./utils');
167
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
178
const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
189

@@ -128,12 +119,6 @@ module.exports = {
128119
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
129120
'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
130121
'process.env.NODE_ENV': `"${NODE_ENV}"`,
131-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
132-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
133-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
134-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
135-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
136-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
137122
}),
138123
new Webpack.SourceMapDevToolPlugin({
139124
filename: '[file].map',

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
const {resolve} = require('path');
22
const Webpack = require('webpack');
33
const {
4-
DARK_MODE_DIMMED_WARNING_COLOR,
5-
DARK_MODE_DIMMED_ERROR_COLOR,
6-
DARK_MODE_DIMMED_LOG_COLOR,
7-
LIGHT_MODE_DIMMED_WARNING_COLOR,
8-
LIGHT_MODE_DIMMED_ERROR_COLOR,
9-
LIGHT_MODE_DIMMED_LOG_COLOR,
104
GITHUB_URL,
115
getVersionString,
126
} = require('react-devtools-extensions/utils');
@@ -93,12 +87,6 @@ module.exports = {
9387
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
9488
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
9589
'process.env.NODE_ENV': `"${NODE_ENV}"`,
96-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
97-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
98-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
99-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
100-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
101-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
10290
}),
10391
],
10492
module: {

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
const {resolve} = require('path');
22
const Webpack = require('webpack');
33
const {
4-
DARK_MODE_DIMMED_WARNING_COLOR,
5-
DARK_MODE_DIMMED_ERROR_COLOR,
6-
DARK_MODE_DIMMED_LOG_COLOR,
7-
LIGHT_MODE_DIMMED_WARNING_COLOR,
8-
LIGHT_MODE_DIMMED_ERROR_COLOR,
9-
LIGHT_MODE_DIMMED_LOG_COLOR,
104
GITHUB_URL,
115
getVersionString,
126
} = require('react-devtools-extensions/utils');
@@ -84,12 +78,6 @@ module.exports = {
8478
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
8579
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
8680
'process.env.NODE_ENV': `"${NODE_ENV}"`,
87-
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
88-
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
89-
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
90-
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
91-
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
92-
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
9381
}),
9482
],
9583
module: {

0 commit comments

Comments
 (0)