Bug 1352699 - Fix gStore instance issue in NetMonitorController r=Honza

MozReview-Commit-ID: CWAnmdEtJwc

--HG--
extra : rebase_source : 5d7f145bf29976c189b7675fae62ba7abba7c751

devtools/client/netmonitor/index.html

@@ -31,10 +31,6 @@
       // Inject EventEmitter into global window.
       EventEmitter.decorate(window);
 
-      // Export NetMonitorController to global window
-      // FIXME: Use module export mechanism instead of this tricky global variables
-      window.NetMonitorController = NetMonitorController;
-
       window.Netmonitor = {
         bootstrap({ toolbox }) {
           this.mount = document.querySelector("#mount");

devtools/client/netmonitor/index.js

@@ -13,7 +13,7 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 const { bootstrap } = require("devtools-launchpad");
 const { EventEmitter } = require("devtools-modules");
-const { Services: { pref }} = require("devtools-modules");
+const { Services: { appinfo, pref }} = require("devtools-modules");
 const { configureStore } = require("./src/utils/create-store");
 
 require("./src/assets/styles/netmonitor.css");
@@ -40,8 +40,15 @@ const App = require("./src/components/app");
 const store = window.gStore = configureStore();
 const { NetMonitorController } = require("./src/netmonitor-controller");
 
-// FIXME: Inject NetMonitorController to global window
-window.NetMonitorController = NetMonitorController;
+window.addEventListener("DOMContentLoaded", () => {
+  if (appinfo.OS === "Darwin") {
+    document.documentElement.setAttribute("platform", "mac");
+  } else if (appinfo.OS === "Linux") {
+    document.documentElement.setAttribute("platform", "linux");
+  } else {
+    document.documentElement.setAttribute("platform", "win");
+  }
+});
 
 bootstrap(React, ReactDOM, App, null, store).then(connection => {
   if (!connection || !connection.tab) {

devtools/client/netmonitor/src/actions/requests.js

@@ -12,6 +12,7 @@ const {
   SEND_CUSTOM_REQUEST,
   UPDATE_REQUEST,
 } = require("../constants");
+const { NetMonitorController } = require("../netmonitor-controller");
 const { getSelectedRequest } = require("../selectors/index");
 
 function addRequest(id, data, batch) {
@@ -46,7 +47,7 @@ function cloneSelectedRequest() {
  * Send a new HTTP request using the data in the custom request form.
  */
 function sendCustomRequest() {
-  if (!window.NetMonitorController.supportsCustomRequest) {
+  if (!NetMonitorController.supportsCustomRequest) {
     return cloneSelectedRequest();
   }
 
@@ -70,7 +71,7 @@ function sendCustomRequest() {
       data.body = selected.requestPostData.postData.text;
     }
 
-    window.NetMonitorController.webConsoleClient.sendHTTPRequest(data, (response) => {
+    NetMonitorController.webConsoleClient.sendHTTPRequest(data, (response) => {
       return dispatch({
         type: SEND_CUSTOM_REQUEST,
         id: response.eventActor.actor,

devtools/client/netmonitor/src/actions/ui.js

@@ -13,6 +13,7 @@ const {
   TOGGLE_COLUMN,
   WATERFALL_RESIZE,
 } = require("../constants");
+const { NetMonitorController } = require("../netmonitor-controller");
 
 /**
  * Change network details panel.
@@ -33,7 +34,7 @@ function openNetworkDetails(open) {
  */
 function openStatistics(open) {
   if (open) {
-    window.NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+    NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
   }
   return {
     type: OPEN_STATISTICS,

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "chrome://devtools/skin/widgets.css";
+@import "resource://devtools/client/themes/light-theme.css";
 @import "resource://devtools/client/shared/components/splitter/split-box.css";
 @import "resource://devtools/client/shared/components/tree/tree-view.css";
 @import "resource://devtools/client/shared/components/tabs/tabs.css";

devtools/client/netmonitor/src/components/headers-panel.js

@@ -10,6 +10,7 @@ const {
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
+const { NetMonitorController } = require("../netmonitor-controller");
 const { getFormattedSize } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const {
@@ -197,7 +198,7 @@ const HeadersPanel = createClass({
           statusCodeDocURL ? MDNLink({
             url: statusCodeDocURL,
           }) : null,
-          window.NetMonitorController.supportsCustomRequest && button({
+          NetMonitorController.supportsCustomRequest && button({
             className: "devtools-button",
             onClick: cloneSelectedRequest,
           }, EDIT_AND_RESEND),

devtools/client/netmonitor/src/components/request-list-content.js

@@ -39,7 +39,7 @@ const RequestListContent = createClass({
     dispatch: PropTypes.func.isRequired,
     displayedRequests: PropTypes.object.isRequired,
     firstRequestStartedMillis: PropTypes.number.isRequired,
-    fromCache: PropTypes.bool.isRequired,
+    fromCache: PropTypes.bool,
     onCauseBadgeClick: PropTypes.func.isRequired,
     onItemMouseDown: PropTypes.func.isRequired,
     onSecurityIconClick: PropTypes.func.isRequired,
@@ -266,6 +266,14 @@ module.exports = connect(
   }),
   (dispatch) => ({
     dispatch,
+    /**
+     * A handler that opens the stack trace tab when a stack trace is available
+     */
+    onCauseBadgeClick: (cause) => {
+      if (cause.stacktrace && cause.stacktrace.length > 0) {
+        dispatch(Actions.selectDetailsPanelTab("stack-trace"));
+      }
+    },
     onItemMouseDown: (id) => dispatch(Actions.selectRequest(id)),
     /**
      * A handler that opens the security tab in the details view if secure or
@@ -276,14 +284,6 @@ module.exports = connect(
         dispatch(Actions.selectDetailsPanelTab("security"));
       }
     },
-    /**
-     * A handler that opens the stack trace tab when a stack trace is available
-     */
-    onCauseBadgeClick: (cause) => {
-      if (cause.stacktrace && cause.stacktrace.length > 0) {
-        dispatch(Actions.selectDetailsPanelTab("stack-trace"));
-      }
-    },
     onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)),
   }),
 )(RequestListContent);

devtools/client/netmonitor/src/components/request-list-empty-notice.js

@@ -12,6 +12,7 @@ const {
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const Actions = require("../actions/index");
 const { ACTIVITY_TYPE } = require("../constants");
+const { NetMonitorController } = require("../netmonitor-controller");
 const { L10N } = require("../utils/l10n");
 
 const { button, div, span } = DOM;
@@ -64,7 +65,7 @@ module.exports = connect(
   dispatch => ({
     onPerfClick: () => dispatch(Actions.openStatistics(true)),
     onReloadClick: () =>
-      window.NetMonitorController
+      NetMonitorController
         .triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
   })
 )(RequestListEmptyNotice);

devtools/client/netmonitor/src/components/request-list-item.js

@@ -68,7 +68,7 @@ const RequestListItem = createClass({
     index: PropTypes.number.isRequired,
     isSelected: PropTypes.bool.isRequired,
     firstRequestStartedMillis: PropTypes.number.isRequired,
-    fromCache: PropTypes.bool.isRequired,
+    fromCache: PropTypes.bool,
     onCauseBadgeClick: PropTypes.func.isRequired,
     onContextMenu: PropTypes.func.isRequired,
     onFocusedNodeChange: PropTypes.func,

devtools/client/netmonitor/src/netmonitor-controller.js

@@ -23,8 +23,6 @@ const {
   getDisplayedRequestById,
 } = require("./selectors/index");
 
-const gStore = window.gStore;
-
 /**
  * Object defining the network monitor controller components.
  */
@@ -57,7 +55,7 @@ var NetMonitorController = {
       return this._shutdown;
     }
     this._shutdown = new Promise(async (resolve) => {
-      gStore.dispatch(Actions.batchReset());
+      window.gStore.dispatch(Actions.batchReset());
       onFirefoxDisconnect(this._target);
       this._target.off("close", this._onTabDetached);
       this.NetworkEventsHandler.disconnect();
@@ -243,18 +241,18 @@ var NetMonitorController = {
     return new Promise((resolve) => {
       let request = null;
       let inspector = function () {
-        request = getDisplayedRequestById(gStore.getState(), requestId);
+        request = getDisplayedRequestById(window.gStore.getState(), requestId);
         if (!request) {
           // Reset filters so that the request is visible.
-          gStore.dispatch(Actions.toggleRequestFilterType("all"));
-          request = getDisplayedRequestById(gStore.getState(), requestId);
+          window.gStore.dispatch(Actions.toggleRequestFilterType("all"));
+          request = getDisplayedRequestById(window.gStore.getState(), requestId);
         }
 
         // If the request was found, select it. Otherwise this function will be
         // called again once new requests arrive.
         if (request) {
           window.off(EVENTS.REQUEST_ADDED, inspector);
-          gStore.dispatch(Actions.selectRequest(request.id));
+          window.gStore.dispatch(Actions.selectRequest(request.id));
           resolve();
         }
       };
@@ -381,7 +379,7 @@ NetworkEventsHandler.prototype = {
    */
   _onDocLoadingMarker: function (marker) {
     window.emit(EVENTS.TIMELINE_EVENT, marker);
-    gStore.dispatch(Actions.addTimingMarker(marker));
+    window.gStore.dispatch(Actions.addTimingMarker(marker));
   },
 
   /**
@@ -412,7 +410,7 @@ NetworkEventsHandler.prototype = {
     let { method, url, isXHR, cause, startedDateTime, fromCache,
           fromServiceWorker } = data;
 
-    gStore.dispatch(Actions.addRequest(
+    window.gStore.dispatch(Actions.addRequest(
       id,
       {
         // Convert the received date/time string to a unix timestamp.
@@ -431,7 +429,7 @@ NetworkEventsHandler.prototype = {
 
   async updateRequest(id, data) {
     const action = Actions.updateRequest(id, data, true);
-    await gStore.dispatch(action);
+    await window.gStore.dispatch(action);
     let {
       responseContent,
       responseCookies,
@@ -440,12 +438,12 @@ NetworkEventsHandler.prototype = {
       requestHeaders,
       requestPostData,
     } = action.data;
-    let request = getRequestById(gStore.getState(), action.id);
+    let request = getRequestById(window.gStore.getState(), action.id);
 
     if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
       let headers = await fetchHeaders(requestHeaders, getLongString);
       if (headers) {
-        await gStore.dispatch(Actions.updateRequest(
+        await window.gStore.dispatch(Actions.updateRequest(
           action.id,
           { requestHeaders: headers },
           true,
@@ -456,7 +454,7 @@ NetworkEventsHandler.prototype = {
     if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
       let headers = await fetchHeaders(responseHeaders, getLongString);
       if (headers) {
-        await gStore.dispatch(Actions.updateRequest(
+        await window.gStore.dispatch(Actions.updateRequest(
           action.id,
           { responseHeaders: headers },
           true,
@@ -477,7 +475,7 @@ NetworkEventsHandler.prototype = {
       responseContent.content.text = response;
       payload.responseContent = responseContent;
 
-      await gStore.dispatch(Actions.updateRequest(action.id, payload, true));
+      await window.gStore.dispatch(Actions.updateRequest(action.id, payload, true));
 
       if (mimeType.includes("image/")) {
         window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
@@ -498,7 +496,7 @@ NetworkEventsHandler.prototype = {
       payload.requestPostData = Object.assign({}, requestPostData);
       payload.requestHeadersFromUploadStream = { headers, headersSize };
 
-      await gStore.dispatch(Actions.updateRequest(action.id, payload, true));
+      await window.gStore.dispatch(Actions.updateRequest(action.id, payload, true));
     }
 
     // Fetch request and response cookies long value.
@@ -517,7 +515,7 @@ NetworkEventsHandler.prototype = {
           }));
         }
         if (reqCookies.length) {
-          await gStore.dispatch(Actions.updateRequest(
+          await window.gStore.dispatch(Actions.updateRequest(
             action.id,
             { requestCookies: reqCookies },
             true));
@@ -538,7 +536,7 @@ NetworkEventsHandler.prototype = {
           }));
         }
         if (resCookies.length) {
-          await gStore.dispatch(Actions.updateRequest(
+          await window.gStore.dispatch(Actions.updateRequest(
             action.id,
             { responseCookies: resCookies },
             true));

devtools/client/netmonitor/src/request-list-context-menu.js

@@ -11,6 +11,7 @@ const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 const clipboardHelper = require("devtools/shared/platform/clipboard");
 const { HarExporter } = require("./har/har-exporter");
+const { NetMonitorController } = require("./netmonitor-controller");
 const { getLongString } = require("./utils/client");
 const { L10N } = require("./utils/l10n");
 const {
@@ -156,7 +157,7 @@ RequestListContextMenu.prototype = {
 
     menu.append(new MenuItem({
       type: "separator",
-      visible: !!(window.NetMonitorController.supportsCustomRequest &&
+      visible: !!(NetMonitorController.supportsCustomRequest &&
                selectedRequest && !selectedRequest.isCustom),
     }));
 
@@ -164,7 +165,7 @@ RequestListContextMenu.prototype = {
       id: "request-list-context-resend",
       label: L10N.getStr("netmonitor.context.editAndResend"),
       accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
-      visible: !!(window.NetMonitorController.supportsCustomRequest &&
+      visible: !!(NetMonitorController.supportsCustomRequest &&
                selectedRequest && !selectedRequest.isCustom),
       click: this.cloneSelectedRequest,
     }));
@@ -186,7 +187,7 @@ RequestListContextMenu.prototype = {
       id: "request-list-context-perf",
       label: L10N.getStr("netmonitor.context.perfTools"),
       accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
-      visible: !!window.NetMonitorController.supportsPerfStats,
+      visible: !!NetMonitorController.supportsPerfStats,
       click: () => this.openStatistics(true)
     }));
 
@@ -348,7 +349,7 @@ RequestListContextMenu.prototype = {
   },
 
   getDefaultHarOptions() {
-    let form = window.NetMonitorController._target.form;
+    let form = NetMonitorController._target.form;
     let title = form.title || form.url;
 
     return {

devtools/client/netmonitor/src/utils/create-store.js

@@ -6,7 +6,6 @@
 
 const Services = require("Services");
 const { createStore, applyMiddleware } = require("devtools/client/shared/vendor/redux");
-const { thunk } = require("devtools/client/shared/redux/middleware/thunk");
 const batching = require("../middleware/batching");
 const prefs = require("../middleware/prefs");
 const rootReducer = require("../reducers/index");
@@ -40,15 +39,7 @@ function configureStore() {
     }),
   };
 
-  return createStore(
-    rootReducer,
-    initialState,
-    applyMiddleware(
-      thunk,
-      prefs,
-      batching
-    )
-  );
+  return createStore(rootReducer, initialState, applyMiddleware(prefs, batching));
 }
 
 exports.configureStore = configureStore;