Update UI in react-devtools extension

Author: Jchinonso

packages/react-devtools-extensions/src/main.js

@@ -7,6 +7,7 @@ import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {
+  getEnableDoubleLogging,
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
@@ -30,12 +31,16 @@ let panelCreated = false;
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
   const appendComponentStack = getAppendComponentStack();
+  const enableDoubleLogging = getEnableDoubleLogging();
   const breakOnConsoleErrors = getBreakOnConsoleErrors();
   const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
       appendComponentStack,
     )};
+    window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = ${JSON.stringify(
+      enableDoubleLogging,
+    )};
     window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
       breakOnConsoleErrors,
     )};

packages/react-devtools-inline/src/backend.js

@@ -41,7 +41,7 @@ function startActivation(contentWindow: window) {
         if (contentWindow !== window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
-          Window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = enableDoubleLogging;
+          window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = enableDoubleLogging;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
         }
 

packages/react-devtools-inline/src/frontend.js

@@ -9,7 +9,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
-  getEnableDoubleLogging
+  getEnableDoubleLogging,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -86,7 +86,6 @@ describe('console', () => {
       appendComponentStack: true,
       breakOnWarn: false,
     });
-
     expect(fakeConsole.error).toBe(error);
     expect(fakeConsole.warn).toBe(warn);
   });

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

@@ -446,9 +446,11 @@ export default class Agent extends EventEmitter<{|
   updateConsolePatchSettings = ({
     appendComponentStack,
     breakOnConsoleErrors,
+    enableDoubleLogging,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
+    enableDoubleLogging: boolean,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-

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

@@ -88,7 +88,7 @@ type NativeStyleEditor_SetValueParams = {|
 type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
-  
+  enableDoubleLogging: boolean,
 |};
 
 type BackendEvents = {|

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

@@ -32,7 +32,7 @@ export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
 
 export const LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING =
   'React::DevTools::enableDoubleLogging';
-  
+
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -21,7 +21,7 @@ import {
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
-  LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING
+  LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -39,7 +39,7 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
-  enableDoubleLogging : boolean,
+  enableDoubleLogging: boolean,
   setEnableDoubleLogging: (value: boolean) => void,
 
   appendComponentStack: boolean,
@@ -85,9 +85,12 @@ function SettingsContextController({
   );
 
   const [
-   enableDoubleLogging,
-   setEnableDoubleLogging,
-  ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING, false);
+    enableDoubleLogging,
+    setEnableDoubleLogging,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
+    false,
+  );
 
   const [
     appendComponentStack,
@@ -157,8 +160,9 @@ function SettingsContextController({
     bridge.send('updateConsolePatchSettings', {
       appendComponentStack,
       breakOnConsoleErrors,
+      enableDoubleLogging,
     });
-  }, [bridge, appendComponentStack, breakOnConsoleErrors]);
+  }, [bridge, appendComponentStack, breakOnConsoleErrors, enableDoubleLogging]);
 
   useEffect(() => {
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);

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

@@ -34,7 +34,7 @@ import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
-  LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING
+  LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
 } from './constants';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
@@ -271,9 +271,7 @@ export function setEnableDoubleLogging(value: boolean): void {
 
 export function getEnableDoubleLogging(): boolean {
   try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
-    );
+    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING);
     if (raw != null) {
       return JSON.parse(raw);
     }