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 |  |  | | Fusebox console |  |  | | Firefox console |  |  | | Chrome console |  |  |
Ruslan Lesiutin committed
Jun 17, 2024 at 16:31 UTC
ff6e05a7055665776fe607bdc69aa8f4a285f995
15 files changed
+113
-341
.eslintrc.js
+5
-1
@@ -484,7 +484,11 @@ module.exports = {
484
},
485
},
486
{
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
+ ],
492
globals: {
493
__IS_CHROME__: 'readonly',
494
__IS_FIREFOX__: 'readonly',
packages/react-devtools-core/webpack.backend.js
+1
-12
@@ -1,12 +1,6 @@
1
const {resolve} = require('path');
2
const Webpack = require('webpack');
3
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,
4
GITHUB_URL,
5
getVersionString,
6
} = require('react-devtools-extensions/utils');
@@ -74,15 +68,10 @@ module.exports = {
68
__EXTENSION__: false,
69
__PROFILE__: false,
70
__TEST__: NODE_ENV === 'test',
71
+ __IS_FIREFOX__: false,
72
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
73
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
74
'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}"`,
75
}),
76
],
77
optimization: {
packages/react-devtools-core/webpack.standalone.js
-12
@@ -1,12 +1,6 @@
1
const {resolve} = require('path');
2
const Webpack = require('webpack');
3
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,
4
GITHUB_URL,
5
getVersionString,
6
} = require('react-devtools-extensions/utils');
@@ -99,12 +93,6 @@ module.exports = {
93
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
94
'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
95
'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}"`,
96
}),
97
],
98
module: {
packages/react-devtools-extensions/utils.js
-13
@@ -9,13 +9,6 @@ const {execSync} = require('child_process');
9
const {readFileSync} = require('fs');
10
const {resolve} = require('path');
11
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
-
12
const GITHUB_URL = 'https://github.com/facebook/react';
13
14
function getGitCommit() {
@@ -45,12 +38,6 @@ function getVersionString(packageVersion = null) {
38
}
39
40
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,
41
GITHUB_URL,
42
getGitCommit,
43
getVersionString,
packages/react-devtools-extensions/webpack.backend.js
+1
-16
@@ -6,16 +6,7 @@ const Webpack = require('webpack');
6
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
7
const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
8
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');
10
11
const NODE_ENV = process.env.NODE_ENV;
12
if (!NODE_ENV) {
@@ -80,12 +71,6 @@ module.exports = {
71
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
72
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
73
'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}"`,
74
'process.env.IS_CHROME': IS_CHROME,
75
'process.env.IS_FIREFOX': IS_FIREFOX,
76
'process.env.IS_EDGE': IS_EDGE,
packages/react-devtools-extensions/webpack.config.js
+1
-16
@@ -3,16 +3,7 @@
3
const {resolve, isAbsolute, relative} = require('path');
4
const Webpack = require('webpack');
5
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');
7
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
8
const SourceMapIgnoreListPlugin = require('react-devtools-shared/SourceMapIgnoreListPlugin');
9
@@ -128,12 +119,6 @@ module.exports = {
119
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
120
'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
121
'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}"`,
122
}),
123
new Webpack.SourceMapDevToolPlugin({
124
filename: '[file].map',
packages/react-devtools-fusebox/webpack.config.frontend.js
-12
@@ -1,12 +1,6 @@
1
const {resolve} = require('path');
2
const Webpack = require('webpack');
3
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,
4
GITHUB_URL,
5
getVersionString,
6
} = require('react-devtools-extensions/utils');
@@ -93,12 +87,6 @@ module.exports = {
87
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
88
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
89
'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}"`,
90
}),
91
],
92
module: {
packages/react-devtools-inline/webpack.config.js
-12
@@ -1,12 +1,6 @@
1
const {resolve} = require('path');
2
const Webpack = require('webpack');
3
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,
4
GITHUB_URL,
5
getVersionString,
6
} = require('react-devtools-extensions/utils');
@@ -84,12 +78,6 @@ module.exports = {
78
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
79
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
80
'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}"`,
81
}),
82
],
83
module: {
packages/react-devtools-shared/src/__tests__/console-test.js
+52
-113
@@ -515,58 +515,52 @@ describe('console', () => {
515
expect(mockLog.mock.calls[0]).toHaveLength(1);
516
expect(mockLog.mock.calls[0][0]).toBe('log');
517
expect(mockLog.mock.calls[1]).toEqual([
518
- '%c%s',
519
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
518
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
519
'log',
520
]);
521
522
expect(mockWarn).toHaveBeenCalledTimes(2);
523
expect(mockWarn.mock.calls[0]).toHaveLength(1);
524
expect(mockWarn.mock.calls[0][0]).toBe('warn');
526
- expect(mockWarn.mock.calls[1]).toHaveLength(3);
525
+ expect(mockWarn.mock.calls[1]).toHaveLength(2);
526
expect(mockWarn.mock.calls[1]).toEqual([
528
- '%c%s',
529
- `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
527
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
528
'warn',
529
]);
530
531
expect(mockError).toHaveBeenCalledTimes(2);
532
expect(mockError.mock.calls[0]).toHaveLength(1);
533
expect(mockError.mock.calls[0][0]).toBe('error');
536
- expect(mockError.mock.calls[1]).toHaveLength(3);
534
+ expect(mockError.mock.calls[1]).toHaveLength(2);
535
expect(mockError.mock.calls[1]).toEqual([
538
- '%c%s',
539
- `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
536
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
537
'error',
538
]);
539
540
expect(mockInfo).toHaveBeenCalledTimes(2);
541
expect(mockInfo.mock.calls[0]).toHaveLength(1);
542
expect(mockInfo.mock.calls[0][0]).toBe('info');
546
- expect(mockInfo.mock.calls[1]).toHaveLength(3);
543
+ expect(mockInfo.mock.calls[1]).toHaveLength(2);
544
expect(mockInfo.mock.calls[1]).toEqual([
548
- '%c%s',
549
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
545
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
546
'info',
547
]);
548
549
expect(mockGroup).toHaveBeenCalledTimes(2);
550
expect(mockGroup.mock.calls[0]).toHaveLength(1);
551
expect(mockGroup.mock.calls[0][0]).toBe('group');
556
- expect(mockGroup.mock.calls[1]).toHaveLength(3);
552
+ expect(mockGroup.mock.calls[1]).toHaveLength(2);
553
expect(mockGroup.mock.calls[1]).toEqual([
558
- '%c%s',
559
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
554
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
555
'group',
556
]);
557
558
expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
559
expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
560
expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
566
- expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
561
+ expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(2);
562
expect(mockGroupCollapsed.mock.calls[1]).toEqual([
568
- '%c%s',
569
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
563
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
564
'groupCollapsed',
565
]);
566
});
@@ -663,81 +657,33 @@ describe('console', () => {
657
);
658
expect(mockLog.mock.calls).toEqual([
659
['log effect create'],
666
- [
667
- '%c%s',
668
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
669
- 'log effect cleanup',
670
- ],
671
- [
672
- '%c%s',
673
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
674
- 'log effect create',
675
- ],
660
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect cleanup'],
661
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'log effect create'],
662
]);
663
expect(mockWarn.mock.calls).toEqual([
664
['warn effect create'],
679
- [
680
- '%c%s',
681
- `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
682
- 'warn effect cleanup',
683
- ],
684
- [
685
- '%c%s',
686
- `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
687
- 'warn effect create',
688
- ],
665
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect cleanup'],
666
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'warn effect create'],
667
]);
668
expect(mockError.mock.calls).toEqual([
669
['error effect create'],
692
- [
693
- '%c%s',
694
- `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
695
- 'error effect cleanup',
696
- ],
697
- [
698
- '%c%s',
699
- `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
700
- 'error effect create',
701
- ],
670
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect cleanup'],
671
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'error effect create'],
672
]);
673
expect(mockInfo.mock.calls).toEqual([
674
['info effect create'],
705
- [
706
- '%c%s',
707
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
708
- 'info effect cleanup',
709
- ],
710
- [
711
- '%c%s',
712
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
713
- 'info effect create',
714
- ],
675
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect cleanup'],
676
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'info effect create'],
677
]);
678
expect(mockGroup.mock.calls).toEqual([
679
['group effect create'],
718
- [
719
- '%c%s',
720
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
721
- 'group effect cleanup',
722
- ],
723
- [
724
- '%c%s',
725
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
726
- 'group effect create',
727
- ],
680
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect cleanup'],
681
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'group effect create'],
682
]);
683
expect(mockGroupCollapsed.mock.calls).toEqual([
684
['groupCollapsed effect create'],
731
- [
732
- '%c%s',
733
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
734
- 'groupCollapsed effect cleanup',
735
- ],
736
- [
737
- '%c%s',
738
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
739
- 'groupCollapsed effect create',
740
- ],
685
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed effect cleanup'],
686
+ ['\x1b[2;38;2;124;124;124m%s\x1b[0m', 'groupCollapsed effect create'],
687
]);
688
});
689
@@ -816,58 +762,52 @@ describe('console', () => {
762
expect(mockLog.mock.calls[0]).toHaveLength(1);
763
expect(mockLog.mock.calls[0][0]).toBe('log');
764
expect(mockLog.mock.calls[1]).toEqual([
819
- '%c%s',
820
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
765
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
766
'log',
767
]);
768
769
expect(mockWarn).toHaveBeenCalledTimes(2);
770
expect(mockWarn.mock.calls[0]).toHaveLength(1);
771
expect(mockWarn.mock.calls[0][0]).toBe('warn');
827
- expect(mockWarn.mock.calls[1]).toHaveLength(3);
772
+ expect(mockWarn.mock.calls[1]).toHaveLength(2);
773
expect(mockWarn.mock.calls[1]).toEqual([
829
- '%c%s',
830
- `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
774
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
775
'warn',
776
]);
777
778
expect(mockError).toHaveBeenCalledTimes(2);
779
expect(mockError.mock.calls[0]).toHaveLength(1);
780
expect(mockError.mock.calls[0][0]).toBe('error');
837
- expect(mockError.mock.calls[1]).toHaveLength(3);
781
+ expect(mockError.mock.calls[1]).toHaveLength(2);
782
expect(mockError.mock.calls[1]).toEqual([
839
- '%c%s',
840
- `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
783
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
784
'error',
785
]);
786
787
expect(mockInfo).toHaveBeenCalledTimes(2);
788
expect(mockInfo.mock.calls[0]).toHaveLength(1);
789
expect(mockInfo.mock.calls[0][0]).toBe('info');
847
- expect(mockInfo.mock.calls[1]).toHaveLength(3);
790
+ expect(mockInfo.mock.calls[1]).toHaveLength(2);
791
expect(mockInfo.mock.calls[1]).toEqual([
849
- '%c%s',
850
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
792
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
793
'info',
794
]);
795
796
expect(mockGroup).toHaveBeenCalledTimes(2);
797
expect(mockGroup.mock.calls[0]).toHaveLength(1);
798
expect(mockGroup.mock.calls[0][0]).toBe('group');
857
- expect(mockGroup.mock.calls[1]).toHaveLength(3);
799
+ expect(mockGroup.mock.calls[1]).toHaveLength(2);
800
expect(mockGroup.mock.calls[1]).toEqual([
859
- '%c%s',
860
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
801
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
802
'group',
803
]);
804
805
expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
806
expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
807
expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
867
- expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
808
+ expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(2);
809
expect(mockGroupCollapsed.mock.calls[1]).toEqual([
869
- '%c%s',
870
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
810
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
811
'groupCollapsed',
812
]);
813
});
@@ -960,30 +900,27 @@ describe('console', () => {
900
expect(mockLog).toHaveBeenCalledTimes(2);
901
expect(mockLog.mock.calls[0]).toHaveLength(1);
902
expect(mockLog.mock.calls[0][0]).toBe('log');
963
- expect(mockLog.mock.calls[1]).toHaveLength(3);
903
+ expect(mockLog.mock.calls[1]).toHaveLength(2);
904
expect(mockLog.mock.calls[1]).toEqual([
965
- '%c%s',
966
- `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
905
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
906
'log',
907
]);
908
909
expect(mockWarn).toHaveBeenCalledTimes(2);
910
expect(mockWarn.mock.calls[0]).toHaveLength(1);
911
expect(mockWarn.mock.calls[0][0]).toBe('warn');
973
- expect(mockWarn.mock.calls[1]).toHaveLength(3);
912
+ expect(mockWarn.mock.calls[1]).toHaveLength(2);
913
expect(mockWarn.mock.calls[1]).toEqual([
975
- '%c%s',
976
- `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
914
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
915
'warn',
916
]);
917
918
expect(mockError).toHaveBeenCalledTimes(2);
919
expect(mockError.mock.calls[0]).toHaveLength(1);
920
expect(mockError.mock.calls[0][0]).toBe('error');
983
- expect(mockError.mock.calls[1]).toHaveLength(3);
921
+ expect(mockError.mock.calls[1]).toHaveLength(2);
922
expect(mockError.mock.calls[1]).toEqual([
985
- '%c%s',
986
- `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
923
+ '\x1b[2;38;2;124;124;124m%s\x1b[0m',
924
'error',
925
]);
926
});
@@ -1061,11 +998,12 @@ describe('console', () => {
998
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
999
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
1000
);
1064
- expect(mockWarn.mock.calls[1]).toHaveLength(4);
1065
- expect(mockWarn.mock.calls[1][0]).toEqual('%c%s %s');
1066
- expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba(');
1067
- expect(mockWarn.mock.calls[1][2]).toEqual('warn');
1068
- expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][3]).trim()).toEqual(
1001
+ expect(mockWarn.mock.calls[1]).toHaveLength(3);
1002
+ expect(mockWarn.mock.calls[1][0]).toEqual(
1003
+ '\x1b[2;38;2;124;124;124m%s %s\x1b[0m',
1004
+ );
1005
+ expect(mockWarn.mock.calls[1][1]).toMatch('warn');
1006
+ expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][2]).trim()).toEqual(
1007
'in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
1008
);
1009
@@ -1074,11 +1012,12 @@ describe('console', () => {
1012
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toEqual(
1013
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
1014
);
1077
- expect(mockError.mock.calls[1]).toHaveLength(4);
1078
- expect(mockError.mock.calls[1][0]).toEqual('%c%s %s');
1079
- expect(mockError.mock.calls[1][1]).toMatch('color: rgba(');
1080
- expect(mockError.mock.calls[1][2]).toEqual('error');
1081
- expect(normalizeCodeLocInfo(mockError.mock.calls[1][3]).trim()).toEqual(
1015
+ expect(mockError.mock.calls[1]).toHaveLength(3);
1016
+ expect(mockError.mock.calls[1][0]).toEqual(
1017
+ '\x1b[2;38;2;124;124;124m%s %s\x1b[0m',
1018
+ );
1019
+ expect(mockError.mock.calls[1][1]).toEqual('error');
1020
+ expect(normalizeCodeLocInfo(mockError.mock.calls[1][2]).trim()).toEqual(
1021
'in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
1022
);
1023
});
packages/react-devtools-shared/src/backend/console.js
+31
-43
@@ -15,8 +15,13 @@ import type {
15
WorkTagMap,
16
ConsolePatchSettings,
17
} from './types';
18
-import {format, formatWithStyles} from './utils';
18
+import {formatWithStyles} from './utils';
19
20
+import {
21
+ FIREFOX_CONSOLE_DIMMING_COLOR,
22
+ ANSI_STYLE_DIMMING_TEMPLATE,
23
+ ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
24
+} from 'react-devtools-shared/src/constants';
25
import {getInternalReactConstants, getDispatcherRef} from './renderer';
26
import {
27
getStackByFiberInDevAndProd,
@@ -25,7 +30,6 @@ import {
30
import {castBool, castBrowserTheme} from '../utils';
31
32
const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
28
-const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
33
34
// React's custom built component stack strings match "\s{4}in"
35
// Chrome's prefix matches "\s{4}at"
@@ -44,31 +48,18 @@ const STYLE_DIRECTIVE_REGEX = /^%c/;
48
// method has been overridden by the patchForStrictMode function.
49
// If it has we'll need to do some special formatting of the arguments
50
// so the console color stays consistent
47
-function isStrictModeOverride(args: Array<string>, method: string): boolean {
48
- return (
49
- args.length >= 2 &&
50
- STYLE_DIRECTIVE_REGEX.test(args[0]) &&
51
- args[1] === `color: ${getConsoleColor(method) || ''}`
52
- );
53
-}
54
-
55
-function getConsoleColor(method: string): ?string {
56
- switch (method) {
57
- case 'warn':
58
- return consoleSettingsRef.browserTheme === 'light'
59
- ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
60
- : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
61
- case 'error':
62
- return consoleSettingsRef.browserTheme === 'light'
63
- ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
64
- : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
65
- case 'log':
66
- default:
67
- return consoleSettingsRef.browserTheme === 'light'
68
- ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
69
- : process.env.DARK_MODE_DIMMED_LOG_COLOR;
51
+function isStrictModeOverride(args: Array<string>): boolean {
52
+ if (__IS_FIREFOX__) {
53
+ return (
54
+ args.length >= 2 &&
55
+ STYLE_DIRECTIVE_REGEX.test(args[0]) &&
56
+ args[1] === FIREFOX_CONSOLE_DIMMING_COLOR
57
+ );
58
+ } else {
59
+ return args.length >= 2 && args[0] === ANSI_STYLE_DIMMING_TEMPLATE;
60
}
61
}
62
+
63
type OnErrorOrWarning = (
64
fiber: Fiber,
65
type: 'error' | 'warn',
@@ -93,11 +84,6 @@ for (const method in console) {
84
85
let unpatchFn: null | (() => void) = null;
86
96
-let isNode = false;
97
-try {
98
- isNode = this === global;
99
-} catch (error) {}
100
-
87
// Enables e.g. Jest tests to inject a mock console object.
88
export function dangerous_setTargetConsoleForTesting(
89
targetConsoleForTesting: Object,
@@ -247,9 +233,15 @@ export function patch({
233
(currentDispatcherRef: any),
234
);
235
if (componentStack !== '') {
250
- if (isStrictModeOverride(args, method)) {
251
- args[0] = `${args[0]} %s`;
252
- args.push(componentStack);
236
+ if (isStrictModeOverride(args)) {
237
+ if (__IS_FIREFOX__) {
238
+ args[0] = `${args[0]} %s`;
239
+ args.push(componentStack);
240
+ } else {
241
+ args[0] =
242
+ ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK;
243
+ args.push(componentStack);
244
+ }
245
} else {
246
args.push(componentStack);
247
}
@@ -337,17 +329,13 @@ export function patchForStrictMode() {
329
// $FlowFixMe[missing-local-annot]
330
const overrideMethod = (...args) => {
331
if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
340
- // Dim the text color of the double logs if we're not
341
- // hiding them.
342
- if (isNode) {
343
- originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args));
332
+ // Dim the text color of the double logs if we're not hiding them.
333
+ if (__IS_FIREFOX__) {
334
+ originalMethod(
335
+ ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR),
336
+ );
337
} else {
345
- const color = getConsoleColor(method);
346
- if (color) {
347
- originalMethod(...formatWithStyles(args, `color: ${color}`));
348
- } else {
349
- throw Error('Console color is not defined');
350
- }
338
+ originalMethod(ANSI_STYLE_DIMMING_TEMPLATE, ...args);
339
}
340
}
341
};
packages/react-devtools-shared/src/constants.js
+5
-14
@@ -29,46 +29,37 @@ export const PROFILING_FLAG_BASIC_SUPPORT = 0b01;
29
export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
30
31
export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
32
-
32
export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
33
'React::DevTools::componentFilters';
35
-
34
export const SESSION_STORAGE_LAST_SELECTION_KEY =
35
'React::DevTools::lastSelection';
38
-
36
export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
37
'React::DevTools::openInEditorUrl';
41
-
38
export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
39
'React::DevTools::openInEditorUrlPreset';
44
-
40
export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
41
'React::DevTools::parseHookNames';
47
-
42
export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
43
'React::DevTools::recordChangeDescriptions';
50
-
44
export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
45
'React::DevTools::reloadAndProfile';
53
-
46
export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
47
'React::DevTools::breakOnConsoleErrors';
56
-
48
export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
58
-
49
export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
50
'React::DevTools::appendComponentStack';
61
-
51
export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
52
'React::DevTools::showInlineWarningsAndErrors';
64
-
53
export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
54
'React::DevTools::traceUpdatesEnabled';
67
-
55
export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
56
'React::DevTools::hideConsoleLogsInStrictMode';
70
-
57
export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
58
'React::DevTools::supportsProfiling';
59
60
export const PROFILER_EXPORT_VERSION = 5;
61
+
62
+export const FIREFOX_CONSOLE_DIMMING_COLOR = 'color: rgba(124, 124, 124, 0.75)';
63
+export const ANSI_STYLE_DIMMING_TEMPLATE = '\x1b[2;38;2;124;124;124m%s\x1b[0m';
64
+export const ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK =
65
+ '\x1b[2;38;2;124;124;124m%s %s\x1b[0m';
packages/react-devtools-shared/src/hook.js
+15
-40
@@ -8,7 +8,6 @@
8
* @flow
9
*/
10
11
-import type {BrowserTheme} from './frontend/types';
11
import type {
12
DevToolsHook,
13
Handler,
@@ -18,6 +17,11 @@ import type {
17
DevToolsBackend,
18
} from './backend/types';
19
20
+import {
21
+ FIREFOX_CONSOLE_DIMMING_COLOR,
22
+ ANSI_STYLE_DIMMING_TEMPLATE,
23
+} from 'react-devtools-shared/src/constants';
24
+
25
declare var window: any;
26
27
export function installHook(target: any): DevToolsHook | null {
@@ -225,13 +229,9 @@ export function installHook(target: any): DevToolsHook | null {
229
// React and DevTools are connecting and the renderer interface isn't avaiable
230
// and we want to be able to have consistent logging behavior for double logs
231
// during the initial renderer.
228
- function patchConsoleForInitialCommitInStrictMode({
229
- hideConsoleLogsInStrictMode,
230
- browserTheme,
231
- }: {
232
+ function patchConsoleForInitialCommitInStrictMode(
233
hideConsoleLogsInStrictMode: boolean,
233
- browserTheme: BrowserTheme,
234
- }) {
234
+ ) {
235
const overrideConsoleMethods = [
236
'error',
237
'group',
@@ -266,36 +266,15 @@ export function installHook(target: any): DevToolsHook | null {
266
: targetConsole[method]);
267
268
const overrideMethod = (...args: $ReadOnlyArray<any>) => {
269
+ // Dim the text color of the double logs if we're not hiding them.
270
if (!hideConsoleLogsInStrictMode) {
270
- // Dim the text color of the double logs if we're not
271
- // hiding them.
272
- let color;
273
- switch (method) {
274
- case 'warn':
275
- color =
276
- browserTheme === 'light'
277
- ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
278
- : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
279
- break;
280
- case 'error':
281
- color =
282
- browserTheme === 'light'
283
- ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
284
- : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
285
- break;
286
- case 'log':
287
- default:
288
- color =
289
- browserTheme === 'light'
290
- ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
291
- : process.env.DARK_MODE_DIMMED_LOG_COLOR;
292
- break;
293
- }
294
-
295
- if (color) {
296
- originalMethod(...formatWithStyles(args, `color: ${color}`));
271
+ // Firefox doesn't support ANSI escape sequences
272
+ if (__IS_FIREFOX__) {
273
+ originalMethod(
274
+ ...formatWithStyles(args, FIREFOX_CONSOLE_DIMMING_COLOR),
275
+ );
276
} else {
298
- throw Error('Console color is not defined');
277
+ originalMethod(ANSI_STYLE_DIMMING_TEMPLATE, ...args);
278
}
279
}
280
};
@@ -456,12 +435,8 @@ export function installHook(target: any): DevToolsHook | null {
435
if (isStrictMode) {
436
const hideConsoleLogsInStrictMode =
437
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
459
- const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
438
461
- patchConsoleForInitialCommitInStrictMode({
462
- hideConsoleLogsInStrictMode,
463
- browserTheme,
464
- });
439
+ patchConsoleForInitialCommitInStrictMode(hideConsoleLogsInStrictMode);
440
} else {
441
unpatchConsoleForInitialCommitInStrictMode();
442
}
packages/react-devtools-shell/webpack-server.js
-12
@@ -2,12 +2,6 @@ const {resolve} = require('path');
2
const Webpack = require('webpack');
3
const WebpackDevServer = require('webpack-dev-server');
4
const {
5
- DARK_MODE_DIMMED_WARNING_COLOR,
6
- DARK_MODE_DIMMED_ERROR_COLOR,
7
- DARK_MODE_DIMMED_LOG_COLOR,
8
- LIGHT_MODE_DIMMED_WARNING_COLOR,
9
- LIGHT_MODE_DIMMED_ERROR_COLOR,
10
- LIGHT_MODE_DIMMED_LOG_COLOR,
5
GITHUB_URL,
6
getVersionString,
7
} = require('react-devtools-extensions/utils');
@@ -81,12 +75,6 @@ const makeConfig = (entry, alias) => ({
75
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
76
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
77
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
84
- 'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
85
- 'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
86
- 'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
87
- 'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
88
- 'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
89
- 'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
78
'process.env.E2E_APP_REACT_VERSION': `"${REACT_VERSION}"`,
79
}),
80
],
scripts/flow/react-devtools.js
+1
-6
@@ -12,9 +12,4 @@
12
declare const __EXTENSION__: boolean;
13
declare const __TEST__: boolean;
14
15
-declare const DARK_MODE_DIMMED_WARNING_COLOR: string;
16
-declare const DARK_MODE_DIMMED_ERROR_COLOR: string;
17
-declare const DARK_MODE_DIMMED_LOG_COLOR: string;
18
-declare const LIGHT_MODE_DIMMED_WARNING_COLOR: string;
19
-declare const LIGHT_MODE_DIMMED_ERROR_COLOR: string;
20
-declare const LIGHT_MODE_DIMMED_LOG_COLOR: string;
15
+declare const __IS_FIREFOX__: boolean;
scripts/jest/devtools/setupEnv.js
+1
-19
@@ -3,15 +3,6 @@
3
const semver = require('semver');
4
const {ReactVersion} = require('../../../ReactVersions');
5
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
-} = require('react-devtools-extensions/utils');
14
-
6
// DevTools stores preferences between sessions in localStorage
7
if (!global.hasOwnProperty('localStorage')) {
8
global.localStorage = require('local-storage-fallback').default;
@@ -20,16 +11,7 @@ if (!global.hasOwnProperty('localStorage')) {
11
// Mimic the global we set with Webpack's DefinePlugin
12
global.__DEV__ = process.env.NODE_ENV !== 'production';
13
global.__TEST__ = true;
23
-
24
-global.process.env.DARK_MODE_DIMMED_WARNING_COLOR =
25
- DARK_MODE_DIMMED_WARNING_COLOR;
26
-global.process.env.DARK_MODE_DIMMED_ERROR_COLOR = DARK_MODE_DIMMED_ERROR_COLOR;
27
-global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
28
-global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR =
29
- LIGHT_MODE_DIMMED_WARNING_COLOR;
30
-global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR =
31
- LIGHT_MODE_DIMMED_ERROR_COLOR;
32
-global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
14
+global.__IS_FIREFOX__ = false;
15
16
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
17