[react devtools][easy] Centralize calls to patchConsoleUsingWindowValues (#25222)

* Instead of reading from window in two separate places, do this in a single function
* Add some type safety

Author: rbalicki2

packages/react-devtools-shared/src/backend/console.js

@@ -371,3 +371,37 @@ export function unpatchForStrictMode(): void {
     }
   }
 }
+
+export function patchConsoleUsingWindowValues() {
+  const appendComponentStack =
+    castBool(window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__) ?? true;
+  const breakOnConsoleErrors =
+    castBool(window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__) ?? false;
+  const showInlineWarningsAndErrors =
+    castBool(window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__) ?? true;
+  const hideConsoleLogsInStrictMode =
+    castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ??
+    false;
+  const browserTheme =
+    castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark';
+
+  patch({
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
+  });
+}
+
+function castBool(v: any): ?boolean {
+  if (v === true || v === false) {
+    return v;
+  }
+}
+
+function castBrowserTheme(v: any): ?BrowserTheme {
+  if (v === 'light' || v === 'dark' || v === 'auto') {
+    return v;
+  }
+}

packages/react-devtools-shared/src/backend/renderer.js

@@ -63,7 +63,7 @@ import {
 } from '../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
   patchForStrictMode as patchConsoleForStrictMode,
   unpatchForStrictMode as unpatchConsoleForStrictMode,
@@ -817,23 +817,7 @@ export function attach(
   // The renderer interface can't read these preferences directly,
   // because it is stored in localStorage within the context of the extension.
   // It relies on the extension to pass the preference through via the global.
-  const appendComponentStack =
-    window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-  const breakOnConsoleErrors =
-    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-  const showInlineWarningsAndErrors =
-    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-  const hideConsoleLogsInStrictMode =
-    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-  const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
-  patchConsole({
-    appendComponentStack,
-    breakOnConsoleErrors,
-    showInlineWarningsAndErrors,
-    hideConsoleLogsInStrictMode,
-    browserTheme,
-  });
+  patchConsoleUsingWindowValues();
 
   const debug = (
     name: string,

packages/react-devtools-shared/src/hook.js

@@ -12,7 +12,7 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevToo
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
 
@@ -343,16 +343,6 @@ export function installHook(target: any): DevToolsHook | null {
     // (See comments in the try/catch below for more context on inlining.)
     if (!__TEST__ && !__EXTENSION__) {
       try {
-        const appendComponentStack =
-          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-        const breakOnConsoleErrors =
-          window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-        const showInlineWarningsAndErrors =
-          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-        const hideConsoleLogsInStrictMode =
-          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
         //
@@ -361,13 +351,7 @@ export function installHook(target: any): DevToolsHook | null {
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
         registerRendererWithConsole(renderer);
-        patchConsole({
-          appendComponentStack,
-          breakOnConsoleErrors,
-          showInlineWarningsAndErrors,
-          hideConsoleLogsInStrictMode,
-          browserTheme,
-        });
+        patchConsoleUsingWindowValues();
       } catch (error) {}
     }