diff --git a/devtools/client/netmonitor/index.html b/devtools/client/netmonitor/index.html index 891a0c76d95f..1b8cfbeb1210 100644 --- a/devtools/client/netmonitor/index.html +++ b/devtools/client/netmonitor/index.html @@ -23,11 +23,9 @@ const EventEmitter = require("devtools/shared/event-emitter"); const { createFactory } = require("devtools/client/shared/vendor/react"); const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom"); - const { bindActionCreators } = require("devtools/client/shared/vendor/redux"); const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider); const { configureStore } = require("./src/utils/create-store"); const store = window.gStore = configureStore(); - const actions = bindActionCreators(require("./src/actions/index"), store.dispatch); const { NetMonitorController } = require("./src/netmonitor-controller"); // Inject EventEmitter into global window. @@ -43,7 +41,7 @@ tabTarget: toolbox.target, }, toolbox, - }, actions); + }); }, destroy() { diff --git a/devtools/client/netmonitor/index.js b/devtools/client/netmonitor/index.js index ce66ed0be014..346b85796a45 100644 --- a/devtools/client/netmonitor/index.js +++ b/devtools/client/netmonitor/index.js @@ -11,7 +11,6 @@ */ const React = require("react"); const ReactDOM = require("react-dom"); -const { bindActionCreators } = require("redux"); const { bootstrap, renderRoot } = require("devtools-launchpad"); const { EventEmitter } = require("devtools-modules"); const { Services: { appinfo, pref }} = require("devtools-modules"); @@ -39,7 +38,6 @@ pref("devtools.webconsole.persistlog", false); const App = require("./src/components/app"); const store = window.gStore = configureStore(); -const actions = bindActionCreators(require("./src/actions"), store.dispatch); const { NetMonitorController } = require("./src/netmonitor-controller"); /** @@ -71,5 +69,5 @@ bootstrap(React, ReactDOM).then(connection => { return; } renderRoot(React, ReactDOM, App, store); - NetMonitorController.startupNetMonitor(connection, actions); + NetMonitorController.startupNetMonitor(connection); }); diff --git a/devtools/client/netmonitor/src/netmonitor-controller.js b/devtools/client/netmonitor/src/netmonitor-controller.js index d7ba2d6706f2..3c023d10939f 100644 --- a/devtools/client/netmonitor/src/netmonitor-controller.js +++ b/devtools/client/netmonitor/src/netmonitor-controller.js @@ -7,10 +7,7 @@ const { TimelineFront } = require("devtools/shared/fronts/timeline"); const { CurlUtils } = require("devtools/client/shared/curl"); const { ACTIVITY_TYPE, EVENTS } = require("./constants"); -const { - getDisplayedRequestById, - getRequestById, -} = require("./selectors/index"); +const Actions = require("./actions/index"); const { fetchHeaders, formDataURI, @@ -21,6 +18,10 @@ const { onFirefoxConnect, onFirefoxDisconnect, } = require("./utils/client"); +const { + getRequestById, + getDisplayedRequestById, +} = require("./selectors/index"); /** * Object defining the network monitor controller components. @@ -32,11 +33,10 @@ var NetMonitorController = { * @param {Object} connection connection data wrapper * @return {Object} A promise that is resolved when the monitor finishes startup. */ - startupNetMonitor(connection, actions) { + startupNetMonitor(connection) { if (this._startup) { return this._startup; } - this.actions = actions; this._startup = new Promise(async (resolve) => { await this.connect(connection); resolve(); @@ -55,7 +55,7 @@ var NetMonitorController = { return this._shutdown; } this._shutdown = new Promise(async (resolve) => { - this.actions.batchReset(); + window.gStore.dispatch(Actions.batchReset()); onFirefoxDisconnect(this._target); this._target.off("close", this._onTabDetached); this.NetworkEventsHandler.disconnect(); @@ -105,7 +105,7 @@ var NetMonitorController = { this.webConsoleClient = getWebConsoleClient(); this.NetworkEventsHandler = new NetworkEventsHandler(); - this.NetworkEventsHandler.connect(this.actions); + this.NetworkEventsHandler.connect(); window.emit(EVENTS.CONNECTED); @@ -260,7 +260,7 @@ var NetMonitorController = { request = getDisplayedRequestById(window.gStore.getState(), requestId); if (!request) { // Reset filters so that the request is visible. - this.actions.toggleRequestFilterType("all"); + window.gStore.dispatch(Actions.toggleRequestFilterType("all")); request = getDisplayedRequestById(window.gStore.getState(), requestId); } @@ -268,7 +268,7 @@ var NetMonitorController = { // called again once new requests arrive. if (request) { window.off(EVENTS.REQUEST_ADDED, inspector); - this.actions.selectRequest(request.id); + window.gStore.dispatch(Actions.selectRequest(request.id)); resolve(); } }; @@ -402,8 +402,7 @@ NetworkEventsHandler.prototype = { /** * Connect to the current target client. */ - connect: function (actions) { - this.actions = actions; + connect: function () { this.webConsoleClient.on("networkEvent", this._onNetworkEvent); this.webConsoleClient.on("networkEventUpdate", this._onNetworkEventUpdate); @@ -454,7 +453,7 @@ NetworkEventsHandler.prototype = { */ _onDocLoadingMarker: function (marker) { window.emit(EVENTS.TIMELINE_EVENT, marker); - this.actions.addTimingMarker(marker); + window.gStore.dispatch(Actions.addTimingMarker(marker)); }, /** @@ -485,7 +484,7 @@ NetworkEventsHandler.prototype = { let { method, url, isXHR, cause, startedDateTime, fromCache, fromServiceWorker } = data; - this.actions.addRequest( + window.gStore.dispatch(Actions.addRequest( id, { // Convert the received date/time string to a unix timestamp. @@ -498,12 +497,13 @@ NetworkEventsHandler.prototype = { fromServiceWorker, }, true - ) + )) .then(() => window.emit(EVENTS.REQUEST_ADDED, id)); }, async updateRequest(id, data) { - await this.actions.updateRequest(id, data, true); + const action = Actions.updateRequest(id, data, true); + await window.gStore.dispatch(action); let { responseContent, responseCookies, @@ -511,28 +511,28 @@ NetworkEventsHandler.prototype = { requestCookies, requestHeaders, requestPostData, - } = data; - let request = getRequestById(window.gStore.getState(), id); + } = action.data; + let request = getRequestById(window.gStore.getState(), action.id); if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) { let headers = await fetchHeaders(requestHeaders, getLongString); if (headers) { - await this.actions.updateRequest( - id, + await window.gStore.dispatch(Actions.updateRequest( + action.id, { requestHeaders: headers }, true, - ); + )); } } if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) { let headers = await fetchHeaders(responseHeaders, getLongString); if (headers) { - await this.actions.updateRequest( - id, + await window.gStore.dispatch(Actions.updateRequest( + action.id, { responseHeaders: headers }, true, - ); + )); } } @@ -549,7 +549,7 @@ NetworkEventsHandler.prototype = { responseContent.content.text = response; payload.responseContent = responseContent; - await this.actions.updateRequest(id, payload, true); + await window.gStore.dispatch(Actions.updateRequest(action.id, payload, true)); if (mimeType.includes("image/")) { window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED); @@ -570,7 +570,7 @@ NetworkEventsHandler.prototype = { payload.requestPostData = Object.assign({}, requestPostData); payload.requestHeadersFromUploadStream = { headers, headersSize }; - await this.actions.updateRequest(id, payload, true); + await window.gStore.dispatch(Actions.updateRequest(action.id, payload, true)); } // Fetch request and response cookies long value. @@ -589,10 +589,10 @@ NetworkEventsHandler.prototype = { })); } if (reqCookies.length) { - await this.actions.updateRequest( - id, + await window.gStore.dispatch(Actions.updateRequest( + action.id, { requestCookies: reqCookies }, - true); + true)); } } } @@ -610,10 +610,10 @@ NetworkEventsHandler.prototype = { })); } if (resCookies.length) { - await this.actions.updateRequest( - id, + await window.gStore.dispatch(Actions.updateRequest( + action.id, { responseCookies: resCookies }, - true); + true)); } } } diff --git a/devtools/client/netmonitor/src/utils/create-store.js b/devtools/client/netmonitor/src/utils/create-store.js index 1c64c648316d..6ed7259faaa3 100644 --- a/devtools/client/netmonitor/src/utils/create-store.js +++ b/devtools/client/netmonitor/src/utils/create-store.js @@ -5,7 +5,7 @@ "use strict"; const Services = require("Services"); -const { applyMiddleware, createStore } = require("devtools/client/shared/vendor/redux"); +const { createStore, applyMiddleware } = require("devtools/client/shared/vendor/redux"); const batching = require("../middleware/batching"); const prefs = require("../middleware/prefs"); const thunk = require("../middleware/thunk"); diff --git a/devtools/client/netmonitor/webpack.config.js b/devtools/client/netmonitor/webpack.config.js index d8ef9419e5d5..3cb4ff2e003a 100644 --- a/devtools/client/netmonitor/webpack.config.js +++ b/devtools/client/netmonitor/webpack.config.js @@ -55,7 +55,7 @@ let webpackConfig = { "devtools/client/locales": path.join(__dirname, "../locales/en-US"), "devtools/client/shared/components/reps/reps": "devtools-reps", "devtools/client/shared/components/search-box": "devtools-modules/client/shared/components/search-box", - "devtools/client/shared/components/splitter/split-box": "devtools-splitter", + "devtools/client/shared/components/splitter/split-box": "devtools-modules/client/shared/components/splitter/SplitBox", "devtools/client/shared/components/stack-trace": "devtools-modules/client/shared/components/stack-trace", "devtools/client/shared/components/tabs/tabbar": "devtools-modules/client/shared/components/tabs/tabbar", "devtools/client/shared/components/tabs/tabs": "devtools-modules/client/shared/components/tabs/tabs", @@ -76,7 +76,7 @@ let webpackConfig = { "devtools/client/shared/widgets/Chart": "devtools-modules", "devtools/client/sourceeditor/editor": "devtools-modules", "devtools/shared/fronts/timeline": "devtools-modules", - "devtools/shared/l10n": "devtools-modules/shared/l10n", + "devtools/shared/l10n": "devtools-modules", "devtools/shared/locales": path.join(__dirname, "../../shared/locales/en-US"), "devtools/shared/platform/clipboard": "devtools-modules", "devtools/shared/plural-form": "devtools-modules",