[react devtools][easy] Change variable names, etc. (#25211)

* Change variable names, put stuff in constants, etc. in preparation for next diff

Author: rbalicki2

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);

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';
 

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 = () => {

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

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<Theme>(
-    'React::DevTools::theme',
+    LOCAL_STORAGE_BROWSER_THEME,
     'auto',
   );
   const [
@@ -133,7 +134,7 @@ function SettingsContextController({
   );
   const [
     hideConsoleLogsInStrictMode,
-    sethideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
   ] = useLocalStorageWithLog<boolean>(
     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,

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,97 +322,58 @@ export function getDefaultComponentFilters(): Array<ComponentFilter> {
 
 export function getSavedComponentFilters(): Array<ComponentFilter> {
   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);
     }
   } catch (error) {}
   return getDefaultComponentFilters();
 }
 
-export function saveComponentFilters(
+export function setSavedComponentFilters(
   componentFilters: Array<ComponentFilter>,
 ): 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 {