refactor[react-devtools]: remove browserTheme from ConsolePatchSettings (#30566)
Stacked on https://github.com/facebook/react/pull/30564. We are no longer using browser theme in our console patching, this was removed in unification of console patching for strict mode, we started using ansi escape symbols and forking based on browser theme is no longer required - https://github.com/facebook/react/pull/29869 The real browser theme initialization for frontend is happening at the other place and is not affected: https://github.com/facebook/react/blob/40be968257a7a10a267210670103f20dd0429ef3/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js#L117-L120
Ruslan Lesiutin committed
Sep 18, 2024 at 18:02 UTC
b521ef8a2aaff61154e59f6d0d3791ee4dbe6395
5 files changed
+6
-26
packages/react-devtools-core/src/cachedSettings.js
+2
-3
@@ -9,7 +9,7 @@
9
10
import type {ConsolePatchSettings} from 'react-devtools-shared/src/backend/types';
11
import {writeConsolePatchSettingsToWindow} from 'react-devtools-shared/src/backend/console';
12
-import {castBool, castBrowserTheme} from 'react-devtools-shared/src/utils';
12
+import {castBool} from 'react-devtools-shared/src/utils';
13
14
// Note: all keys should be optional in this type, because users can use newer
15
// versions of React DevTools with older versions of React Native, and the object
@@ -54,14 +54,13 @@ function parseConsolePatchSettings(
54
breakOnConsoleErrors,
55
showInlineWarningsAndErrors,
56
hideConsoleLogsInStrictMode,
57
- browserTheme,
57
} = parsedValue;
58
+
59
return {
60
appendComponentStack: castBool(appendComponentStack) ?? true,
61
breakOnConsoleErrors: castBool(breakOnConsoleErrors) ?? false,
62
showInlineWarningsAndErrors: castBool(showInlineWarningsAndErrors) ?? true,
63
hideConsoleLogsInStrictMode: castBool(hideConsoleLogsInStrictMode) ?? false,
64
- browserTheme: castBrowserTheme(browserTheme) ?? 'dark',
64
};
65
}
66
packages/react-devtools-extensions/src/main/syncSavedPreferences.js
-4
@@ -7,7 +7,6 @@ import {
7
getShowInlineWarningsAndErrors,
8
getHideConsoleLogsInStrictMode,
9
} from 'react-devtools-shared/src/utils';
10
-import {getBrowserTheme} from 'react-devtools-extensions/src/utils';
10
11
// The renderer interface can't read saved component filters directly,
12
// because they are stored in localStorage within the context of the extension.
@@ -28,9 +27,6 @@ function syncSavedPreferences() {
27
)};
28
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
29
getHideConsoleLogsInStrictMode(),
31
- )};
32
- window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
33
- getBrowserTheme(),
30
)};`,
31
);
32
}
packages/react-devtools-shared/src/backend/console.js
+1
-8
@@ -22,7 +22,7 @@ import {
22
ANSI_STYLE_DIMMING_TEMPLATE,
23
ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
24
} from 'react-devtools-shared/src/constants';
25
-import {castBool, castBrowserTheme} from '../utils';
25
+import {castBool} from '../utils';
26
27
const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
28
@@ -124,7 +124,6 @@ const consoleSettingsRef: ConsolePatchSettings = {
124
breakOnConsoleErrors: false,
125
showInlineWarningsAndErrors: false,
126
hideConsoleLogsInStrictMode: false,
127
- browserTheme: 'dark',
127
};
128
129
// Patches console methods to append component stack for the current fiber.
@@ -134,7 +133,6 @@ export function patch({
133
breakOnConsoleErrors,
134
showInlineWarningsAndErrors,
135
hideConsoleLogsInStrictMode,
137
- browserTheme,
136
}: $ReadOnly<ConsolePatchSettings>): void {
137
// Settings may change after we've patched the console.
138
// Using a shared ref allows the patch function to read the latest values.
@@ -142,7 +140,6 @@ export function patch({
140
consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
141
consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
142
consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode;
145
- consoleSettingsRef.browserTheme = browserTheme;
143
144
if (
145
appendComponentStack ||
@@ -412,15 +409,12 @@ export function patchConsoleUsingWindowValues() {
409
const hideConsoleLogsInStrictMode =
410
castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ??
411
false;
415
- const browserTheme =
416
- castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark';
412
413
patch({
414
appendComponentStack,
415
breakOnConsoleErrors,
416
showInlineWarningsAndErrors,
417
hideConsoleLogsInStrictMode,
423
- browserTheme,
418
});
419
}
420
@@ -438,7 +432,6 @@ export function writeConsolePatchSettingsToWindow(
432
settings.showInlineWarningsAndErrors;
433
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ =
434
settings.hideConsoleLogsInStrictMode;
441
- window.__REACT_DEVTOOLS_BROWSER_THEME__ = settings.browserTheme;
435
}
436
437
export function installConsoleFunctionsToWindow(): void {
packages/react-devtools-shared/src/backend/types.js
+3
-9
@@ -31,7 +31,6 @@ import type {
31
} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
32
import type {InitBackend} from 'react-devtools-shared/src/backend';
33
import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
34
-import type {BrowserTheme} from 'react-devtools-shared/src/frontend/types';
34
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
35
import type {Source} from 'react-devtools-shared/src/shared/types';
36
import type Agent from './agent';
@@ -531,17 +530,12 @@ export type DevToolsHook = {
530
...
531
};
532
534
-export type ConsolePatchSettings = {
535
- appendComponentStack: boolean,
536
- breakOnConsoleErrors: boolean,
537
- showInlineWarningsAndErrors: boolean,
538
- hideConsoleLogsInStrictMode: boolean,
539
- browserTheme: BrowserTheme,
540
-};
541
-
533
export type DevToolsHookSettings = {
534
appendComponentStack: boolean,
535
breakOnConsoleErrors: boolean,
536
showInlineWarningsAndErrors: boolean,
537
hideConsoleLogsInStrictMode: boolean,
538
};
539
+
540
+// Will be removed together with console patching from backend/console.js to hook.js
541
+export type ConsolePatchSettings = DevToolsHookSettings;
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
-2
@@ -202,7 +202,6 @@ function SettingsContextController({
202
breakOnConsoleErrors,
203
showInlineWarningsAndErrors,
204
hideConsoleLogsInStrictMode,
205
- browserTheme,
205
});
206
}, [
207
bridge,
@@ -210,7 +209,6 @@ function SettingsContextController({
209
breakOnConsoleErrors,
210
showInlineWarningsAndErrors,
211
hideConsoleLogsInStrictMode,
213
- browserTheme,
212
]);
213
214
useEffect(() => {