Support for iframes from devpanel

Related to #209.

Author: zalmoxisus

src/app/middlewares/api.js

@@ -142,26 +142,35 @@ function onConnect(port) {
     };
     port.onMessage.addListener(listener);
     port.onDisconnect.addListener(disconnect);
+  } else if (port.name === 'monitor') {
+    id = getId(port.sender);
+    connections.monitor[id] = port;
+    monitorInstances(true);
+    monitors++;
+    disconnect = () => {
+      monitors--;
+      connections.monitor[id].onDisconnect.removeListener(disconnect);
+      delete connections.monitor[id];
+      if (!monitors) monitorInstances(false);
+    };
+    port.onDisconnect.addListener(disconnect);
   } else {
-    let type;
-    if (port.name === 'monitor') {
-      id = getId(port.sender);
-      type = 'monitor';
-    } else {
-      id = port.name;
-      type = 'panel';
-    }
-    connections[type][id] = port;
-    monitorInstances(true, type === 'panel' && id);
+    id = port.name;
+    connections.panel[id] = port;
+    monitorInstances(true, id);
     monitors++;
+    listener = msg => {
+      window.store.dispatch(msg);
+    };
     disconnect = () => {
       monitors--;
-      connections[type][id].onDisconnect.removeListener(disconnect);
-      delete connections[type][id];
-      if (!monitors) {
-        monitorInstances(false);
-      }
+      const p = connections.panel[id];
+      p.onMessage.removeListener(listener);
+      p.onDisconnect.removeListener(disconnect);
+      delete connections.panel[id];
+      if (!monitors) monitorInstances(false);
     };
+    port.onMessage.addListener(listener);
     port.onDisconnect.addListener(disconnect);
   }
 }

src/app/middlewares/panelDispatcher.js

@@ -0,0 +1,27 @@
+import { LIFTED_ACTION, SELECT_INSTANCE } from 'remotedev-app/lib/constants/actionTypes';
+import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
+
+function panelDispatcher(bgConnection) {
+  let autoselected = false;
+  const tabId = chrome.devtools.inspectedWindow.tabId;
+
+  return store => next => action => {
+    const result = next(action);
+    if (!autoselected) {
+      autoselected = true;
+      const connections = store.getState()
+        .instances.connections[tabId];
+      if (connections && connections.length === 1) {
+        next({ type: SELECT_INSTANCE, selected: connections[0] });
+      }
+    }
+    if (action.type === LIFTED_ACTION) {
+      const instances = store.getState().instances;
+      const instanceId = getActiveInstance(instances);
+      bgConnection.postMessage({ ...action, instanceId, id: tabId });
+    }
+    return result;
+  };
+}
+
+export default panelDispatcher;

src/app/middlewares/panelSync.js

@@ -1,8 +1,9 @@
 import { createStore, applyMiddleware } from 'redux';
 import persist from 'remotedev-app/lib/middlewares/persist';
-import panelDispatcher from '../middlewares/panelDispatcher';
+import panelDispatcher from '../middlewares/panelSync';
 import rootReducer from '../reducers/panel';
 
-export default function configureStore(position, preloadedState) {
-  return createStore(rootReducer, preloadedState, applyMiddleware(persist(position), panelDispatcher));
+export default function configureStore(position, bgConnection, preloadedState) {
+  const enhancer = applyMiddleware(persist(position), panelDispatcher(bgConnection));
+  return createStore(rootReducer, preloadedState, enhancer);
 }

src/app/middlewares/syncStores.js renamed to src/app/middlewares/windowSync.js

@@ -1,6 +1,6 @@
 import { createStore, compose, applyMiddleware } from 'redux';
 import persist from 'remotedev-app/lib/middlewares/persist';
-import syncStores from '../middlewares/syncStores';
+import syncStores from '../middlewares/windowSync';
 import popupSelector from '../middlewares/popupSelector';
 import rootReducer from '../reducers/window';
 

src/app/stores/panelStore.js

@@ -17,7 +17,7 @@ function renderDevTools() {
   const node = document.getElementById('root');
   unmountComponentAtNode(node);
   clearTimeout(naTimeout);
-  store = configureStore(position, preloadedState);
+  store = configureStore(position, bgConnection, preloadedState);
   render(
     <Provider store={store}>
       <App position={position} />