Expose DEV-mode warnings in devtools UI (#20463)

Co-authored-by: Brian Vaughn <[email protected]>

Author: eps1lon

packages/react-devtools-core/src/standalone.js

@@ -20,6 +20,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -303,6 +304,9 @@ function startServer(
       )};
       window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
         getSavedComponentFilters(),
+      )};
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+        getShowInlineWarningsAndErrors(),
       )};`;
 
     response.end(

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

@@ -10,6 +10,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -29,18 +30,18 @@ let panelCreated = false;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
-  const appendComponentStack = getAppendComponentStack();
-  const breakOnConsoleErrors = getBreakOnConsoleErrors();
-  const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-      appendComponentStack,
+      getAppendComponentStack(),
     )};
     window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
-      breakOnConsoleErrors,
+      getBreakOnConsoleErrors(),
     )};
     window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      componentFilters,
+      getSavedComponentFilters(),
+    )};
+    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+      getShowInlineWarningsAndErrors(),
     )};`,
   );
 }

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

@@ -24,11 +24,13 @@ function startActivation(contentWindow: window) {
           appendComponentStack,
           breakOnConsoleErrors,
           componentFilters,
+          showInlineWarningsAndErrors,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+        contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
 
         // TRICKY
         // The backend entry point may be required in the context of an iframe or the parent window.
@@ -40,6 +42,7 @@ function startActivation(contentWindow: window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
         }
 
         finishActivation(contentWindow);

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

@@ -9,6 +9,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -41,6 +42,7 @@ export function initialize(
             appendComponentStack: getAppendComponentStack(),
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
+            showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
           },
           '*',
         );

packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap

@@ -12,19 +12,19 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 7,
+    "id": 2,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
-    "id": 9,
+    "id": 3,
     "type": 5,
   },
   Object {
     "displayName": "Child",
     "hocDisplayNames": null,
-    "id": 8,
+    "id": 4,
     "type": 5,
   },
 ]
@@ -115,7 +115,7 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 5,
+    "id": 2,
     "type": 5,
   },
 ]