diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js index 37ca023381bd2..ca77678451145 100644 --- a/packages/react-devtools-shared/src/__tests__/setupTests.js +++ b/packages/react-devtools-shared/src/__tests__/setupTests.js @@ -52,8 +52,7 @@ env.beforeEach(() => { const {installHook} = require('react-devtools-shared/src/hook'); const { getDefaultComponentFilters, - saveComponentFilters, - setShowInlineWarningsAndErrors, + setSavedComponentFilters, } = require('react-devtools-shared/src/utils'); // Fake timers let us flush Bridge operations between setup and assertions. @@ -118,11 +117,10 @@ env.beforeEach(() => { }; // Initialize filters to a known good state. - saveComponentFilters(getDefaultComponentFilters()); + setSavedComponentFilters(getDefaultComponentFilters()); global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters(); // Also initialize inline warnings so that we can test them. - setShowInlineWarningsAndErrors(true); global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true; installHook(global); diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index 8853e46f24c17..1ef8b4dd80831 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -30,7 +30,7 @@ export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10; export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab'; -export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY = +export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY = 'React::DevTools::componentFilters'; export const SESSION_STORAGE_LAST_SELECTION_KEY = @@ -51,6 +51,8 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY = 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'; diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 2c5703505c965..56f1131205c11 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -23,7 +23,7 @@ import { import {ElementTypeRoot} from '../types'; import { getSavedComponentFilters, - saveComponentFilters, + setSavedComponentFilters, separateDisplayNameAndHOCs, shallowDiffers, utfDecodeString, @@ -365,7 +365,7 @@ export default class Store extends EventEmitter<{| this._componentFilters = value; // Update persisted filter preferences stored in localStorage. - saveComponentFilters(value); + setSavedComponentFilters(value); // Notify the renderer that filter preferences have changed. // This is an expensive operation; it unmounts and remounts the entire tree, @@ -1332,7 +1332,7 @@ export default class Store extends EventEmitter<{| ) => { this._componentFilters = componentFilters; - saveComponentFilters(componentFilters); + setSavedComponentFilters(componentFilters); }; onBridgeShutdown = () => { diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js index 46b8b343721ff..de05978ec3ba0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js @@ -22,7 +22,7 @@ export default function DebuggingSettings(_: {||}) { setBreakOnConsoleErrors, setShowInlineWarningsAndErrors, showInlineWarningsAndErrors, - sethideConsoleLogsInStrictMode, + setHideConsoleLogsInStrictMode, } = useContext(SettingsContext); return ( @@ -72,7 +72,7 @@ export default function DebuggingSettings(_: {||}) { type="checkbox" checked={hideConsoleLogsInStrictMode} onChange={({currentTarget}) => - sethideConsoleLogsInStrictMode(currentTarget.checked) + setHideConsoleLogsInStrictMode(currentTarget.checked) } />{' '} Hide logs during second render in Strict Mode diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js index d9c522ca689ff..8eda55d13dbdc 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js @@ -18,6 +18,7 @@ import { import { COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT, + LOCAL_STORAGE_BROWSER_THEME, LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY, LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS, LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY, @@ -52,7 +53,7 @@ type Context = {| setParseHookNames: (value: boolean) => void, hideConsoleLogsInStrictMode: boolean, - sethideConsoleLogsInStrictMode: (value: boolean) => void, + setHideConsoleLogsInStrictMode: (value: boolean) => void, showInlineWarningsAndErrors: boolean, setShowInlineWarningsAndErrors: (value: boolean) => void, @@ -110,7 +111,7 @@ function SettingsContextController({ 'compact', ); const [theme, setTheme] = useLocalStorageWithLog( - 'React::DevTools::theme', + LOCAL_STORAGE_BROWSER_THEME, 'auto', ); const [ @@ -133,7 +134,7 @@ function SettingsContextController({ ); const [ hideConsoleLogsInStrictMode, - sethideConsoleLogsInStrictMode, + setHideConsoleLogsInStrictMode, ] = useLocalStorageWithLog( LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE, false, @@ -240,7 +241,7 @@ function SettingsContextController({ setTraceUpdatesEnabled, setShowInlineWarningsAndErrors, showInlineWarningsAndErrors, - sethideConsoleLogsInStrictMode, + setHideConsoleLogsInStrictMode, hideConsoleLogsInStrictMode, theme, browserTheme, @@ -259,7 +260,7 @@ function SettingsContextController({ setTraceUpdatesEnabled, setShowInlineWarningsAndErrors, showInlineWarningsAndErrors, - sethideConsoleLogsInStrictMode, + setHideConsoleLogsInStrictMode, hideConsoleLogsInStrictMode, theme, browserTheme, diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 1f4582026318d..36063f4f0e0c4 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -34,16 +34,14 @@ import { TREE_OPERATION_SET_SUBTREE_MODE, TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS, TREE_OPERATION_UPDATE_TREE_BASE_DURATION, -} from './constants'; -import {ElementTypeRoot} from 'react-devtools-shared/src/types'; -import { - LOCAL_STORAGE_FILTER_PREFERENCES_KEY, + LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY, LOCAL_STORAGE_OPEN_IN_EDITOR_URL, LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS, LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY, LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY, LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE, } from './constants'; +import {ElementTypeRoot} from 'react-devtools-shared/src/types'; import {ComponentFilterElementType, ElementTypeHostComponent} from './types'; import { ElementTypeClass, @@ -324,7 +322,9 @@ export function getDefaultComponentFilters(): Array { export function getSavedComponentFilters(): Array { try { - const raw = localStorageGetItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY); + const raw = localStorageGetItem( + LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY, + ); if (raw != null) { return JSON.parse(raw); } @@ -332,89 +332,48 @@ export function getSavedComponentFilters(): Array { return getDefaultComponentFilters(); } -export function saveComponentFilters( +export function setSavedComponentFilters( componentFilters: Array, ): void { localStorageSetItem( - LOCAL_STORAGE_FILTER_PREFERENCES_KEY, + LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY, JSON.stringify(componentFilters), ); } -export function getAppendComponentStack(): boolean { - try { - const raw = localStorageGetItem( - LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY, - ); - if (raw != null) { - return JSON.parse(raw); - } - } catch (error) {} - return true; +function parseBool(s: ?string): ?boolean { + if (s === 'true') { + return true; + } + if (s === 'false') { + return false; + } } -export function setAppendComponentStack(value: boolean): void { - localStorageSetItem( +export function getAppendComponentStack(): boolean { + const raw = localStorageGetItem( LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY, - JSON.stringify(value), ); + return parseBool(raw) ?? true; } export function getBreakOnConsoleErrors(): boolean { - try { - const raw = localStorageGetItem( - LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS, - ); - if (raw != null) { - return JSON.parse(raw); - } - } catch (error) {} - return false; -} - -export function setBreakOnConsoleErrors(value: boolean): void { - localStorageSetItem( - LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS, - JSON.stringify(value), - ); + const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS); + return parseBool(raw) ?? false; } export function getHideConsoleLogsInStrictMode(): boolean { - try { - const raw = localStorageGetItem( - LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE, - ); - if (raw != null) { - return JSON.parse(raw); - } - } catch (error) {} - return false; -} - -export function sethideConsoleLogsInStrictMode(value: boolean): void { - localStorageSetItem( + const raw = localStorageGetItem( LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE, - JSON.stringify(value), ); + return parseBool(raw) ?? false; } export function getShowInlineWarningsAndErrors(): boolean { - try { - const raw = localStorageGetItem( - LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY, - ); - if (raw != null) { - return JSON.parse(raw); - } - } catch (error) {} - return true; -} - -export function setShowInlineWarningsAndErrors(value: boolean): void { - localStorageSetItem( + const raw = localStorageGetItem( LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY, - JSON.stringify(value), ); + return parseBool(raw) ?? true; } export function getDefaultOpenInEditorURL(): string {