From 0397dfeb68f06375b8bbd3801daab6d8f91f553b Mon Sep 17 00:00:00 2001 From: Zalmoxisus Date: Fri, 16 Sep 2016 17:12:59 +0300 Subject: [PATCH] Support for iframes from devpanel Related to #209. --- src/app/middlewares/api.js | 39 ++++++++++++------- src/app/middlewares/panelDispatcher.js | 35 ----------------- src/app/middlewares/panelSync.js | 27 +++++++++++++ .../{syncStores.js => windowSync.js} | 0 src/app/stores/panelStore.js | 7 ++-- src/app/stores/windowStore.js | 2 +- src/browser/extension/devpanel/index.js | 2 +- 7 files changed, 57 insertions(+), 55 deletions(-) delete mode 100644 src/app/middlewares/panelDispatcher.js create mode 100644 src/app/middlewares/panelSync.js rename src/app/middlewares/{syncStores.js => windowSync.js} (100%) diff --git a/src/app/middlewares/api.js b/src/app/middlewares/api.js index 05083d25..3c2adc94 100644 --- a/src/app/middlewares/api.js +++ b/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); } } diff --git a/src/app/middlewares/panelDispatcher.js b/src/app/middlewares/panelDispatcher.js deleted file mode 100644 index 9d581a5f..00000000 --- a/src/app/middlewares/panelDispatcher.js +++ /dev/null @@ -1,35 +0,0 @@ -import { LIFTED_ACTION, SELECT_INSTANCE } from 'remotedev-app/lib/constants/actionTypes'; -import { nonReduxDispatch } from 'remotedev-app/lib/store/monitorActions'; -import { getActiveInstance } from 'remotedev-app/lib/reducers/instances'; - -export default function panelDispatcher(store) { - let autoselected = false; - function inject({ message, action, state }) { - const instances = store.getState().instances; - const instanceId = getActiveInstance(instances); - chrome.devtools.inspectedWindow.eval( - `window.postMessage({ - type: '${message}', - payload: ${JSON.stringify(action)}, - state: '${nonReduxDispatch(store, message, instanceId, action, state, instances)}', - id: '${instanceId}', - source: '@devtools-extension' - }, '*');`, - { useContentScriptContext: false } - ); - } - - return next => action => { - const result = next(action); - if (!autoselected) { - autoselected = true; - const connections = store.getState() - .instances.connections[chrome.devtools.inspectedWindow.tabId]; - if (connections && connections.length === 1) { - next({ type: SELECT_INSTANCE, selected: connections[0] }); - } - } - if (action.type === LIFTED_ACTION) inject(action); - return result; - }; -} diff --git a/src/app/middlewares/panelSync.js b/src/app/middlewares/panelSync.js new file mode 100644 index 00000000..3761db71 --- /dev/null +++ b/src/app/middlewares/panelSync.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; diff --git a/src/app/middlewares/syncStores.js b/src/app/middlewares/windowSync.js similarity index 100% rename from src/app/middlewares/syncStores.js rename to src/app/middlewares/windowSync.js diff --git a/src/app/stores/panelStore.js b/src/app/stores/panelStore.js index 573aabe4..462607e1 100644 --- a/src/app/stores/panelStore.js +++ b/src/app/stores/panelStore.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); } diff --git a/src/app/stores/windowStore.js b/src/app/stores/windowStore.js index e0295637..84e5c826 100644 --- a/src/app/stores/windowStore.js +++ b/src/app/stores/windowStore.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'; diff --git a/src/browser/extension/devpanel/index.js b/src/browser/extension/devpanel/index.js index 45da917f..a6f786b1 100644 --- a/src/browser/extension/devpanel/index.js +++ b/src/browser/extension/devpanel/index.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(