Replaced direct calls to window.postMessage() with Bridge.send()

Author: Brian Vaughn

packages/react-devtools-inline/README.md

@@ -56,7 +56,7 @@ const iframe = document.getElementById(frameID);
 const contentWindow = iframe.contentWindow;
 
 // This returns a React component that can be rendered into your app.
-// <DevTools {...props} />
+// e.g. render(<DevTools {...props} />);
 const DevTools = initialize(contentWindow);
 ```
 

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

@@ -5,67 +5,54 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import {initBackend} from 'react-devtools-shared/src/backend';
 import {installHook} from 'react-devtools-shared/src/hook';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
-import {
-  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
-  MESSAGE_TYPE_SAVED_PREFERENCES,
-} from './constants';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wall} from 'react-devtools-shared/src/types';
 
 function startActivation(contentWindow: window, bridge: BackendBridge) {
-  const {parent} = contentWindow;
-
-  const onMessage = ({data}) => {
-    switch (data.type) {
-      case MESSAGE_TYPE_SAVED_PREFERENCES:
-        // This is the only message we're listening for,
-        // so it's safe to cleanup after we've received it.
-        contentWindow.removeEventListener('message', onMessage);
-
-        const {
-          appendComponentStack,
-          breakOnConsoleErrors,
-          componentFilters,
-          showInlineWarningsAndErrors,
-          hideConsoleLogsInStrictMode,
-        } = 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;
-        contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
-
-        // TRICKY
-        // The backend entry point may be required in the context of an iframe or the parent window.
-        // If it's required within the parent window, store the saved values on it as well,
-        // since the injected renderer interface will read from window.
-        // Technically we don't need to store them on the contentWindow in this case,
-        // but it doesn't really hurt anything to store them there too.
-        if (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;
-          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
-        }
-
-        finishActivation(contentWindow, bridge);
-        break;
-      default:
-        break;
+  const onSavedPreferences = data => {
+    // This is the only message we're listening for,
+    // so it's safe to cleanup after we've received it.
+    bridge.removeListener('savedPreferences', onSavedPreferences);
+
+    const {
+      appendComponentStack,
+      breakOnConsoleErrors,
+      componentFilters,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+    } = 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;
+    contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
+
+    // TRICKY
+    // The backend entry point may be required in the context of an iframe or the parent window.
+    // If it's required within the parent window, store the saved values on it as well,
+    // since the injected renderer interface will read from window.
+    // Technically we don't need to store them on the contentWindow in this case,
+    // but it doesn't really hurt anything to store them there too.
+    if (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;
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
     }
+
+    finishActivation(contentWindow, bridge);
   };
 
-  contentWindow.addEventListener('message', onMessage);
+  bridge.addListener('savedPreferences', onSavedPreferences);
 
   // The backend may be unable to read saved preferences directly,
   // because they are stored in localStorage within the context of the extension (on the frontend).
   // Instead it relies on the extension to pass preferences through.
   // Because we might be in a sandboxed iframe, we have to ask for them by way of postMessage().
-  // TODO WHAT HUH
-  parent.postMessage({type: MESSAGE_TYPE_GET_SAVED_PREFERENCES}, '*');
+  bridge.send('getSavedPreferences');
 }
 
 function finishActivation(contentWindow: window, bridge: BackendBridge) {
@@ -114,9 +101,9 @@ export function createBridge(
         const onMessage = ({data}) => {
           fn(data);
         };
-        window.addEventListener('message', onMessage);
+        contentWindow.addEventListener('message', onMessage);
         return () => {
-          window.removeEventListener('message', onMessage);
+          contentWindow.removeEventListener('message', onMessage);
         };
       },
       send(event: string, payload: any, transferable?: Array<any>) {

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

@@ -12,10 +12,6 @@ import {
   getShowInlineWarningsAndErrors,
   getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
-import {
-  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
-  MESSAGE_TYPE_SAVED_PREFERENCES,
-} from './constants';
 
 import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -68,49 +64,40 @@ export function initialize(
     store?: Store,
   |} = {},
 ): React.AbstractComponent<Props, mixed> {
-  const onGetSavedPreferencesMessage = ({data, source}) => {
-    if (source === 'react-devtools-content-script') {
-      // Ignore messages from the DevTools browser extension.
-    }
-
-    switch (data.type) {
-      case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
-        // This is the only message we're listening for,
-        // so it's safe to cleanup after we've received it.
-        window.removeEventListener('message', onGetSavedPreferencesMessage);
-
-        // The renderer interface can't read saved preferences directly,
-        // because they are stored in localStorage within the context of the extension.
-        // Instead it relies on the extension to pass them through.
-        contentWindow.postMessage(
-          {
-            type: MESSAGE_TYPE_SAVED_PREFERENCES,
-            appendComponentStack: getAppendComponentStack(),
-            breakOnConsoleErrors: getBreakOnConsoleErrors(),
-            componentFilters: getSavedComponentFilters(),
-            showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
-            hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
-          },
-          '*',
-        );
-        break;
-      default:
-        break;
-    }
-  };
-
-  window.addEventListener('message', onGetSavedPreferencesMessage);
-
   if (bridge == null) {
     bridge = createBridge(contentWindow);
   }
 
+  // Type refinement.
+  const frontendBridge = ((bridge: any): FrontendBridge);
+
   if (store == null) {
-    store = createStore(bridge);
+    store = createStore(frontendBridge);
   }
 
+  const onGetSavedPreferences = () => {
+    // This is the only message we're listening for,
+    // so it's safe to cleanup after we've received it.
+    frontendBridge.removeListener('getSavedPreferences', onGetSavedPreferences);
+
+    const data = {
+      appendComponentStack: getAppendComponentStack(),
+      breakOnConsoleErrors: getBreakOnConsoleErrors(),
+      componentFilters: getSavedComponentFilters(),
+      showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
+      hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
+    };
+
+    // The renderer interface can't read saved preferences directly,
+    // because they are stored in localStorage within the context of the extension.
+    // Instead it relies on the extension to pass them through.
+    frontendBridge.send('savedPreferences', data);
+  };
+
+  frontendBridge.addListener('getSavedPreferences', onGetSavedPreferences);
+
   const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
-    <DevTools ref={ref} bridge={bridge} store={store} {...props} />
+    <DevTools ref={ref} bridge={frontendBridge} store={store} {...props} />
   ));
   ForwardRef.displayName = 'DevTools';
 

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

@@ -176,10 +176,19 @@ type UpdateConsolePatchSettingsParams = {|
   browserTheme: BrowserTheme,
 |};
 
+type SavedPreferencesParams = {|
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+  componentFilters: Array<ComponentFilter>,
+  showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+|};
+
 export type BackendEvents = {|
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   fastRefreshScheduled: [],
+  getSavedPreferences: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   isSynchronousXHRSupported: [boolean],
@@ -223,6 +232,7 @@ type FrontendEvents = {|
   profilingData: [ProfilingDataBackend],
   reloadAndProfile: [boolean],
   renamePath: [RenamePath],
+  savedPreferences: [SavedPreferencesParams],
   selectFiber: [number],
   setTraceUpdatesEnabled: [boolean],
   shutdown: [],
@@ -277,7 +287,9 @@ class Bridge<
 
     this._wallUnlisten =
       wall.listen((message: Message) => {
-        (this: any).emit(message.event, message.payload);
+        if (message && message.event) {
+          (this: any).emit(message.event, message.payload);
+        }
       }) || null;
 
     // Temporarily support older standalone front-ends sending commands to newer embedded backends.