Bug 1336384 - Implement top level NetworkMonitor component r=gasolin,Honza

MozReview-Commit-ID: 6E3his8E20A

--HG--
extra : rebase_source : 49135fd3686eff5cc28d51090cbd62683f595186

devtools/client/netmonitor/actions/requests.js

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorController */
-
 "use strict";
 
 const {
@@ -48,7 +46,7 @@ function cloneSelectedRequest() {
  * Send a new HTTP request using the data in the custom request form.
  */
 function sendCustomRequest() {
-  if (!NetMonitorController.supportsCustomRequest) {
+  if (!window.NetMonitorController.supportsCustomRequest) {
     return cloneSelectedRequest();
   }
 
@@ -72,7 +70,7 @@ function sendCustomRequest() {
       data.body = selected.requestPostData.postData.text;
     }
 
-    NetMonitorController.webConsoleClient.sendHTTPRequest(data, (response) => {
+    window.NetMonitorController.webConsoleClient.sendHTTPRequest(data, (response) => {
       return dispatch({
         type: SEND_CUSTOM_REQUEST,
         id: response.eventActor.actor,

devtools/client/netmonitor/actions/ui.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const {
+  ACTIVITY_TYPE,
   OPEN_NETWORK_DETAILS,
   OPEN_STATISTICS,
   SELECT_DETAILS_PANEL_TAB,
@@ -29,6 +30,9 @@ function openNetworkDetails(open) {
  * @param {boolean} visible - expected performance statistics panel open state
  */
 function openStatistics(open) {
+  if (open) {
+    window.NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+  }
   return {
     type: OPEN_STATISTICS,
     open,

devtools/client/netmonitor/components/monitor-panel.js

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals gNetwork, NetMonitorController */
-
 "use strict";
 
 const {
@@ -55,7 +53,6 @@ const MonitorPanel = createClass({
 
   componentWillReceiveProps(nextProps) {
     let {
-      openNetworkDetails,
       request = {},
       updateRequest,
     } = nextProps;
@@ -66,19 +63,13 @@ const MonitorPanel = createClass({
       requestPostData,
     } = request;
 
-    if (nextProps.isEmpty) {
-      openNetworkDetails(false);
-    } else if (nextProps.request && nextProps.request !== this.props.request) {
-      openNetworkDetails(true);
-    }
-
     if (!formDataSections && requestHeaders &&
         requestHeadersFromUploadStream && requestPostData) {
       getFormDataSections(
         requestHeaders,
         requestHeadersFromUploadStream,
         requestPostData,
-        gNetwork.getString.bind(gNetwork),
+        window.gNetwork.getString.bind(window.gNetwork),
       ).then((newFormDataSections) => {
         updateRequest(
           request.id,
@@ -122,7 +113,7 @@ const MonitorPanel = createClass({
           endPanel: networkDetailsOpen ?
             NetworkDetailsPanel({
               ref: "networkDetailsPanel",
-              toolbox: NetMonitorController._toolbox,
+              toolbox: window.NetMonitorController._toolbox,
             }) : null,
           endPanelControl: true,
           vert: this.state.isVerticalSpliter,

devtools/client/netmonitor/components/moz.build

@@ -4,6 +4,7 @@
 
 DevToolsModules(
     'monitor-panel.js',
+    'network-monitor.js',
     'request-list-content.js',
     'request-list-empty.js',
     'request-list-header.js',

devtools/client/netmonitor/components/network-monitor.js

@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  createFactory,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+// Components
+const MonitoPanel = createFactory(require("./monitor-panel"));
+const StatisticsPanel = createFactory(require("./statistics-panel"));
+
+const { div } = DOM;
+
+/*
+ * Network monitor component
+ */
+function NetworkMonitor({ statisticsOpen }) {
+  return (
+    div({ className: "network-monitor theme-sidebar" },
+      !statisticsOpen ? MonitoPanel() : StatisticsPanel()
+    )
+  );
+}
+
+NetworkMonitor.displayName = "NetworkMonitor";
+
+NetworkMonitor.propTypes = {
+  statisticsOpen: PropTypes.bool.isRequired,
+};
+
+module.exports = connect(
+  (state) => ({ statisticsOpen: state.ui.statisticsOpen }),
+)(NetworkMonitor);

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

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorController */
-
 "use strict";
 
 const { KeyCodes } = require("devtools/client/shared/keycodes");
@@ -58,7 +56,10 @@ const RequestListContent = createClass({
       cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
       openStatistics: (open) => dispatch(Actions.openStatistics(open)),
     });
-    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
+    this.tooltip = new HTMLTooltip(
+      window.NetMonitorController._toolbox.doc,
+      { type: "arrow" }
+     );
   },
 
   componentDidMount() {

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

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorController */
-
 "use strict";
 
 const {
@@ -69,6 +67,7 @@ module.exports = connect(
   dispatch => ({
     onPerfClick: () => dispatch(Actions.openStatistics(true)),
     onReloadClick: () =>
-      NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
+      window.NetMonitorController
+        .triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
   })
 )(RequestListEmptyNotice);

devtools/client/netmonitor/components/request-list-header.js

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals document */
-
 "use strict";
 
 const { createClass, PropTypes, DOM } = require("devtools/client/shared/vendor/react");

devtools/client/netmonitor/components/statistics-panel.js

@@ -43,7 +43,7 @@ const StatisticsPanel = createClass({
 
   componentDidUpdate(prevProps) {
     const { requests } = this.props;
-    let ready = requests && requests.every((req) =>
+    let ready = requests && !requests.isEmpty() && requests.every((req) =>
       req.contentSize !== undefined && req.mimeType && req.responseHeaders &&
       req.status !== undefined && req.totalTime !== undefined
     );

devtools/client/netmonitor/l10n.js

@@ -4,7 +4,7 @@
 
 "use strict";
 
-const {LocalizationHelper} = require("devtools/shared/l10n");
+const { LocalizationHelper } = require("devtools/shared/l10n");
 
 const NET_STRINGS_URI = "devtools/client/locales/netmonitor.properties";
 const WEBCONSOLE_STRINGS_URI = "devtools/client/locales/webconsole.properties";

devtools/client/netmonitor/moz.build

@@ -19,7 +19,6 @@ DevToolsModules(
     'filter-predicates.js',
     'l10n.js',
     'netmonitor-controller.js',
-    'netmonitor-view.js',
     'panel.js',
     'prefs.js',
     'request-list-context-menu.js',

devtools/client/netmonitor/netmonitor-controller.js

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals window, NetMonitorView, gStore, gNetwork */
-
 "use strict";
 
 const promise = require("promise");
@@ -25,8 +23,7 @@ const {
   getDisplayedRequestById,
 } = require("./selectors/index");
 
-// Initialize the global Redux store
-window.gStore = configureStore();
+const gStore = window.gStore = configureStore();
 
 /**
  * Object defining the network monitor controller components.
@@ -43,10 +40,7 @@ var NetMonitorController = {
       return this._startup.promise;
     }
     this._startup = promise.defer();
-    {
-      NetMonitorView.initialize();
-      yield this.connect();
-    }
+    yield this.connect();
     this._startup.resolve();
     return undefined;
   }),
@@ -62,13 +56,10 @@ var NetMonitorController = {
       return this._shutdown.promise;
     }
     this._shutdown = promise.defer();
-    {
-      gStore.dispatch(Actions.batchReset());
-      NetMonitorView.destroy();
-      this.TargetEventsHandler.disconnect();
-      this.NetworkEventsHandler.disconnect();
-      yield this.disconnect();
-    }
+    gStore.dispatch(Actions.batchReset());
+    this.TargetEventsHandler.disconnect();
+    this.NetworkEventsHandler.disconnect();
+    yield this.disconnect();
     this._shutdown.resolve();
     return undefined;
   }),
@@ -446,6 +437,7 @@ TargetEventsHandler.prototype = {
 function NetworkEventsHandler() {
   this.addRequest = this.addRequest.bind(this);
   this.updateRequest = this.updateRequest.bind(this);
+  this.getString = this.getString.bind(this);
   this._onNetworkEvent = this._onNetworkEvent.bind(this);
   this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this);
   this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this);
@@ -588,8 +580,7 @@ NetworkEventsHandler.prototype = {
     let request = getRequestById(gStore.getState(), action.id);
 
     if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
-      let headers = yield fetchHeaders(
-        requestHeaders, gNetwork.getString.bind(gNetwork));
+      let headers = yield fetchHeaders(requestHeaders, this.getString);
       if (headers) {
         yield gStore.dispatch(Actions.updateRequest(
           action.id,
@@ -600,8 +591,7 @@ NetworkEventsHandler.prototype = {
     }
 
     if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
-      let headers = yield fetchHeaders(
-        responseHeaders, gNetwork.getString.bind(gNetwork));
+      let headers = yield fetchHeaders(responseHeaders, this.getString);
       if (headers) {
         yield gStore.dispatch(Actions.updateRequest(
           action.id,
@@ -614,7 +604,7 @@ NetworkEventsHandler.prototype = {
     if (request && responseContent && responseContent.content) {
       let { mimeType } = request;
       let { text, encoding } = responseContent.content;
-      let response = yield gNetwork.getString(text);
+      let response = yield this.getString(text);
       let payload = {};
 
       if (mimeType.includes("image/")) {
@@ -635,7 +625,7 @@ NetworkEventsHandler.prototype = {
     // them as a separate property, different from the classic headers.
     if (requestPostData && requestPostData.postData) {
       let { text } = requestPostData.postData;
-      let postData = yield gNetwork.getString(text);
+      let postData = yield this.getString(text);
       const headers = CurlUtils.getHeadersFromMultipartText(postData);
       const headersSize = headers.reduce((acc, { name, value }) => {
         return acc + name.length + value.length + 2;
@@ -660,7 +650,7 @@ NetworkEventsHandler.prototype = {
       if (typeof cookies[Symbol.iterator] === "function") {
         for (let cookie of cookies) {
           reqCookies.push(Object.assign({}, cookie, {
-            value: yield gNetwork.getString(cookie.value),
+            value: yield this.getString(cookie.value),
           }));
         }
         if (reqCookies.length) {
@@ -681,7 +671,7 @@ NetworkEventsHandler.prototype = {
       if (typeof cookies[Symbol.iterator] === "function") {
         for (let cookie of cookies) {
           resCookies.push(Object.assign({}, cookie, {
-            value: yield gNetwork.getString(cookie.value),
+            value: yield this.getString(cookie.value),
           }));
         }
         if (resCookies.length) {

devtools/client/netmonitor/netmonitor-view.js

@@ -1,79 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* globals gStore, NetMonitorController */
-
-"use strict";
-
-const { ACTIVITY_TYPE } = require("./constants");
-const { createFactory } = require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
-
-// Components
-const MonitorPanel = createFactory(require("./components/monitor-panel"));
-const StatisticsPanel = createFactory(require("./components/statistics-panel"));
-
-/**
- * Object defining the network monitor view components.
- */
-exports.NetMonitorView = {
-  /**
-   * Initializes the network monitor view.
-   */
-  initialize: function () {
-    this._body = document.querySelector("#body");
-
-    this.monitorPanel = document.querySelector("#react-monitor-panel-hook");
-    ReactDOM.render(Provider(
-      { store: gStore },
-      MonitorPanel(),
-    ), this.monitorPanel);
-
-    this.statisticsPanel = document.querySelector("#react-statistics-panel-hook");
-    ReactDOM.render(Provider(
-      { store: gStore },
-      StatisticsPanel(),
-    ), this.statisticsPanel);
-
-    // Store watcher here is for observing the statisticsOpen state change.
-    // It should be removed once we migrate to react and apply react/redex binding.
-    this.unsubscribeStore = gStore.subscribe(storeWatcher(
-      false,
-      () => gStore.getState().ui.statisticsOpen,
-      this.toggleFrontendMode.bind(this)
-    ));
-  },
-
-  /**
-   * Destroys the network monitor view.
-   */
-  destroy: function () {
-    ReactDOM.unmountComponentAtNode(this.monitorPanel);
-    ReactDOM.unmountComponentAtNode(this.statisticsPanel);
-    this.unsubscribeStore();
-  },
-
-  toggleFrontendMode: function () {
-    if (gStore.getState().ui.statisticsOpen) {
-      this._body.selectedPanel = this.statisticsPanel;
-      NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
-    } else {
-      this._body.selectedPanel = this.monitorPanel;
-    }
-  },
-};
-
-// A smart store watcher to notify store changes as necessary
-function storeWatcher(initialValue, reduceValue, onChange) {
-  let currentValue = initialValue;
-
-  return () => {
-    const newValue = reduceValue();
-    if (newValue !== currentValue) {
-      onChange();
-      currentValue = newValue;
-    }
-  };
-}

devtools/client/netmonitor/netmonitor.js

@@ -2,8 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals window, document, NetMonitorController, NetMonitorView */
-/* exported Netmonitor, NetMonitorController, NetMonitorView */
+/* exported Netmonitor, NetMonitorController */
 
 "use strict";
 
@@ -11,30 +10,43 @@ const Cu = Components.utils;
 const { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
 
 function Netmonitor(toolbox) {
-  const { require } = BrowserLoader({
+  const require = window.windowRequire = BrowserLoader({
     baseURI: "resource://devtools/client/netmonitor/",
     window,
     commonLibRequire: toolbox.browserRequire,
-  });
+  }).require;
 
-  window.windowRequire = require;
-
-  const { NetMonitorController } = require("./netmonitor-controller.js");
-  const { NetMonitorView } = require("./netmonitor-view.js");
-
-  window.NetMonitorController = NetMonitorController;
-  window.NetMonitorView = NetMonitorView;
-
-  NetMonitorController._toolbox = toolbox;
-  NetMonitorController._target = toolbox.target;
+  window.NetMonitorController = require("./netmonitor-controller").NetMonitorController;
+  window.NetMonitorController._toolbox = toolbox;
+  window.NetMonitorController._target = toolbox.target;
 }
 
 Netmonitor.prototype = {
   init() {
+    const require = window.windowRequire;
+    const { createFactory } = require("devtools/client/shared/vendor/react");
+    const { render } = require("devtools/client/shared/vendor/react-dom");
+    const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
+
+    // Components
+    const NetworkMonitor = createFactory(require("./components/network-monitor"));
+
+    this.networkMonitor = document.querySelector("#react-network-monitor-hook");
+
+    render(Provider(
+      { store: window.gStore },
+      NetworkMonitor({ toolbox: window.NetMonitorController._toolbox }),
+    ), this.networkMonitor);
+
     return window.NetMonitorController.startupNetMonitor();
   },
 
   destroy() {
+    const require = window.windowRequire;
+    const { unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
+
+    unmountComponentAtNode(this.networkMonitor);
+
     return window.NetMonitorController.shutdownNetMonitor();
   }
 };

devtools/client/netmonitor/netmonitor.xul

@@ -14,16 +14,6 @@
           src="chrome://devtools/content/shared/theme-switching.js"/>
   <script type="text/javascript" src="netmonitor.js"/>
 
-  <deck id="body"
-        class="theme-sidebar"
-        flex="1"
-        data-localization-bundle="devtools/client/locales/netmonitor.properties">
-    <html:div xmlns="http://www.w3.org/1999/xhtml"
-              id="react-monitor-panel-hook">
-    </html:div>
-    <html:div xmlns="http://www.w3.org/1999/xhtml"
-              id="react-statistics-panel-hook">
-    </html:div>
-  </deck>
-
+  <html:div xmlns="http://www.w3.org/1999/xhtml"
+               id="react-network-monitor-hook"/>
 </window>

devtools/client/netmonitor/panel.js

@@ -4,71 +4,29 @@
 
 "use strict";
 
-const promise = require("promise");
-const EventEmitter = require("devtools/shared/event-emitter");
-const { Task } = require("devtools/shared/task");
-const { localizeMarkup } = require("devtools/shared/l10n");
-
 function NetMonitorPanel(iframeWindow, toolbox) {
   this.panelWin = iframeWindow;
   this.panelDoc = iframeWindow.document;
-  this._toolbox = toolbox;
-
-  this._netmonitor = new iframeWindow.Netmonitor(toolbox);
-
-  EventEmitter.decorate(this);
+  this.toolbox = toolbox;
+  this.netmonitor = new iframeWindow.Netmonitor(toolbox);
 }
 
-exports.NetMonitorPanel = NetMonitorPanel;
-
 NetMonitorPanel.prototype = {
-  /**
-   * Open is effectively an asynchronous constructor.
-   *
-   * @return object
-   *         A promise that is resolved when the NetMonitor completes opening.
-   */
-  open: Task.async(function* () {
-    if (this._opening) {
-      return this._opening;
+  open: async function () {
+    if (!this.toolbox.target.isRemote) {
+      await this.toolbox.target.makeRemote();
     }
-    // Localize all the nodes containing a data-localization attribute.
-    localizeMarkup(this.panelDoc);
-
-    let deferred = promise.defer();
-    this._opening = deferred.promise;
-
-    // Local monitoring needs to make the target remote.
-    if (!this.target.isRemote) {
-      yield this.target.makeRemote();
-    }
-
-    yield this._netmonitor.init();
-
-    this.isReady = true;
+    await this.netmonitor.init();
     this.emit("ready");
-
-    deferred.resolve(this);
-    return this._opening;
-  }),
-
-  // DevToolPanel API
-
-  get target() {
-    return this._toolbox.target;
+    this.isReady = true;
+    return this;
   },
 
-  destroy: Task.async(function* () {
-    if (this._destroying) {
-      return this._destroying;
-    }
-    let deferred = promise.defer();
-    this._destroying = deferred.promise;
-
-    yield this._netmonitor.destroy();
+  destroy: async function () {
+    await this.netmonitor.destroy();
     this.emit("destroyed");
-
-    deferred.resolve();
-    return this._destroying;
-  })
+    return this;
+  },
 };
+
+exports.NetMonitorPanel = NetMonitorPanel;

devtools/client/netmonitor/prefs.js

@@ -4,12 +4,11 @@
 
 "use strict";
 
-const {PrefsHelper} = require("devtools/client/shared/prefs");
+const { PrefsHelper } = require("devtools/client/shared/prefs");
 
 /**
  * Shortcuts for accessing various network monitor preferences.
  */
-
 exports.Prefs = new PrefsHelper("devtools.netmonitor", {
   networkDetailsWidth: ["Int", "panes-network-details-width"],
   networkDetailsHeight: ["Int", "panes-network-details-height"],

devtools/client/netmonitor/reducers/ui.js

@@ -6,11 +6,13 @@
 
 const I = require("devtools/client/shared/vendor/immutable");
 const {
+  CLEAR_REQUESTS,
   OPEN_NETWORK_DETAILS,
   OPEN_STATISTICS,
   REMOVE_SELECTED_CUSTOM_REQUEST,
   SELECT_DETAILS_PANEL_TAB,
   SEND_CUSTOM_REQUEST,
+  SELECT_REQUEST,
   WATERFALL_RESIZE,
 } = require("../constants");
 
@@ -42,6 +44,8 @@ function setDetailsPanelTab(state, action) {
 
 function ui(state = new UI(), action) {
   switch (action.type) {
+    case CLEAR_REQUESTS:
+      return openNetworkDetails(state, { open: false });
     case OPEN_NETWORK_DETAILS:
       return openNetworkDetails(state, action);
     case OPEN_STATISTICS:
@@ -51,6 +55,8 @@ function ui(state = new UI(), action) {
       return openNetworkDetails(state, { open: false });
     case SELECT_DETAILS_PANEL_TAB:
       return setDetailsPanelTab(state, action);
+    case SELECT_REQUEST:
+      return openNetworkDetails(state, { open: true });
     case WATERFALL_RESIZE:
       return resizeWaterfall(state, action);
     default:

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

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorController, gNetwork, gStore */
-
 "use strict";
 
 const Services = require("Services");
@@ -40,11 +38,11 @@ function RequestListContextMenu({
 
 RequestListContextMenu.prototype = {
   get selectedRequest() {
-    return getSelectedRequest(gStore.getState());
+    return getSelectedRequest(window.gStore.getState());
   },
 
   get sortedRequests() {
-    return getSortedRequests(gStore.getState());
+    return getSortedRequests(window.gStore.getState());
   },
 
   /**
@@ -160,7 +158,7 @@ RequestListContextMenu.prototype = {
       id: "request-menu-context-resend",
       label: L10N.getStr("netmonitor.context.editAndResend"),
       accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
-      visible: !!(NetMonitorController.supportsCustomRequest &&
+      visible: !!(window.NetMonitorController.supportsCustomRequest &&
                selectedRequest && !selectedRequest.isCustom),
       click: this.cloneSelectedRequest,
     }));
@@ -182,11 +180,11 @@ RequestListContextMenu.prototype = {
       id: "request-menu-context-perf",
       label: L10N.getStr("netmonitor.context.perfTools"),
       accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
-      visible: !!NetMonitorController.supportsPerfStats,
+      visible: !!window.NetMonitorController.supportsPerfStats,
       click: () => this.openStatistics(true)
     }));
 
-    menu.popup(screenX, screenY, NetMonitorController._toolbox);
+    menu.popup(screenX, screenY, window.NetMonitorController._toolbox);
     return menu;
   },
 
@@ -228,7 +226,7 @@ RequestListContextMenu.prototype = {
       selected.requestHeaders,
       selected.requestHeadersFromUploadStream,
       selected.requestPostData,
-      gNetwork.getString.bind(gNetwork));
+      window.gNetwork.getString.bind(window.gNetwork));
 
     let params = [];
     formDataSections.forEach(section => {
@@ -245,7 +243,7 @@ RequestListContextMenu.prototype = {
     // Fall back to raw payload.
     if (!string) {
       let postData = selected.requestPostData.postData.text;
-      string = yield gNetwork.getString(postData);
+      string = yield window.gNetwork.getString(postData);
       if (Services.appinfo.OS !== "WINNT") {
         string = string.replace(/\r/g, "");
       }
@@ -271,14 +269,14 @@ RequestListContextMenu.prototype = {
 
     // Fetch header values.
     for (let { name, value } of selected.requestHeaders.headers) {
-      let text = yield gNetwork.getString(value);
+      let text = yield window.gNetwork.getString(value);
       data.headers.push({ name: name, value: text });
     }
 
     // Fetch the request payload.
     if (selected.requestPostData) {
       let postData = selected.requestPostData.postData.text;
-      data.postDataText = yield gNetwork.getString(postData);
+      data.postDataText = yield window.gNetwork.getString(postData);
     }
 
     clipboardHelper.copyString(Curl.generateCommand(data));
@@ -312,7 +310,7 @@ RequestListContextMenu.prototype = {
   copyImageAsDataUri() {
     const { mimeType, text, encoding } = this.selectedRequest.responseContent.content;
 
-    gNetwork.getString(text).then(string => {
+    window.gNetwork.getString(text).then(string => {
       let data = formDataURI(mimeType, encoding, string);
       clipboardHelper.copyString(data);
     });
@@ -324,7 +322,7 @@ RequestListContextMenu.prototype = {
   copyResponse() {
     const { text } = this.selectedRequest.responseContent.content;
 
-    gNetwork.getString(text).then(string => {
+    window.gNetwork.getString(text).then(string => {
       clipboardHelper.copyString(string);
     });
   },
@@ -346,11 +344,11 @@ RequestListContextMenu.prototype = {
   },
 
   getDefaultHarOptions() {
-    let form = NetMonitorController._target.form;
+    let form = window.NetMonitorController._target.form;
     let title = form.title || form.url;
 
     return {
-      getString: gNetwork.getString.bind(gNetwork),
+      getString: window.gNetwork.getString.bind(window.gNetwork),
       items: this.sortedRequests,
       title: title
     };

devtools/client/netmonitor/request-list-tooltip.js

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals gNetwork, NetMonitorController */
-
 "use strict";
 
 const { Task } = require("devtools/shared/task");
@@ -28,7 +26,7 @@ const setTooltipImageContent = Task.async(function* (tooltip, itemEl, requestIte
     return false;
   }
 
-  let string = yield gNetwork.getString(text);
+  let string = yield window.gNetwork.getString(text);
   let src = formDataURI(mimeType, encoding, string);
   let maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
   let { naturalWidth, naturalHeight } = yield getImageDimensions(tooltip.doc, src);
@@ -92,7 +90,7 @@ const setTooltipStackTraceContent = Task.async(function* (tooltip, requestItem)
     frameEl.addEventListener("click", () => {
       // hide the tooltip immediately, not after delay
       tooltip.hide();
-      NetMonitorController.viewSourceInDebugger(filename, lineNumber);
+      window.NetMonitorController.viewSourceInDebugger(filename, lineNumber);
     });
 
     el.appendChild(frameEl);

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

@@ -2,8 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorController */
-
 "use strict";
 
 const {
@@ -162,7 +160,7 @@ const HeadersPanel = createClass({
             readOnly: true,
             value: `${status} ${statusText}`,
           }),
-          NetMonitorController.supportsCustomRequest && button({
+          window.NetMonitorController.supportsCustomRequest && button({
             className: "devtools-button",
             onClick: cloneSelectedRequest,
           }, EDIT_AND_RESEND),

devtools/client/netmonitor/test/browser_net_copy_as_curl.js

@@ -57,8 +57,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-as-curl").click();
   }, function validate(result) {
     if (typeof result !== "string") {

devtools/client/netmonitor/test/browser_net_copy_headers.js

@@ -42,8 +42,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-request-headers").click();
   }, function validate(result) {
     // Sometimes, a "Cookie" header is left over from other tests. Remove it:
@@ -67,8 +67,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // _oolbox.doc
+    monitor.toolbox.doc
       .querySelector("#response-menu-context-copy-response-headers").click();
   }, function validate(result) {
     // Fake the "Last-Modified" and "Date" headers because they will vary:

devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js

@@ -26,8 +26,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-image-as-data-uri").click();
   }, TEST_IMAGE_DATA_URI);
 

devtools/client/netmonitor/test/browser_net_copy_params.js

@@ -62,7 +62,7 @@ add_task(function* () {
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
-    let copyUrlParamsNode = monitor._toolbox.doc
+    let copyUrlParamsNode = monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-url-params");
     is(!!copyUrlParamsNode, !hidden,
       "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") +
@@ -75,7 +75,7 @@ add_task(function* () {
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
-      monitor._toolbox.doc
+      monitor.toolbox.doc
         .querySelector("#request-menu-context-copy-url-params").click();
     }, queryString);
     ok(true, "The url query string copied from the selected item is correct.");
@@ -86,7 +86,7 @@ add_task(function* () {
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
-    let copyPostDataNode = monitor._toolbox.doc
+    let copyPostDataNode = monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-post-data");
     is(!!copyPostDataNode, !hidden,
       "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") +
@@ -99,7 +99,7 @@ add_task(function* () {
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
-      monitor._toolbox.doc
+      monitor.toolbox.doc
         .querySelector("#request-menu-context-copy-post-data").click();
     }, postData);
     ok(true, "The post data string copied from the selected item is correct.");

devtools/client/netmonitor/test/browser_net_copy_response.js

@@ -28,8 +28,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-response").click();
   }, EXPECTED_RESULT);
 

devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js

@@ -28,8 +28,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-image-as-data-uri").click();
   }, function check(text) {
     return text.startsWith("data:") && !/undefined/.test(text);

devtools/client/netmonitor/test/browser_net_copy_url.js

@@ -29,8 +29,8 @@ add_task(function* () {
 
   yield waitForClipboardPromise(function setup() {
     // Context menu is appending in XUL document, we must select it from
-    // _toolbox.doc
-    monitor._toolbox.doc
+    // toolbox.doc
+    monitor.toolbox.doc
       .querySelector("#request-menu-context-copy-url").click();
   }, requestItem.url);
 

devtools/client/netmonitor/test/browser_net_image-tooltip.js

@@ -21,7 +21,7 @@ add_task(function* test() {
     getDisplayedRequests,
     getSortedRequests,
   } = windowRequire("devtools/client/netmonitor/selectors/index");
-  let toolboxDoc = monitor._toolbox.doc;
+  let toolboxDoc = monitor.toolbox.doc;
 
   gStore.dispatch(Actions.batchEnable(false));
 
@@ -38,7 +38,7 @@ add_task(function* test() {
   // Hide tooltip before next test, to avoid the situation that tooltip covers
   // the icon for the request of the next test.
   info("Checking the image thumbnail gets hidden...");
-  yield hideTooltipAndVerify(monitor._toolbox.doc,
+  yield hideTooltipAndVerify(monitor.toolbox.doc,
     document.querySelectorAll(".request-list-item")[0]);
 
   // +1 extra document reload

devtools/client/netmonitor/test/browser_net_open_request_in_tab.js

@@ -33,8 +33,8 @@ add_task(function* () {
 
   let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false);
   // Context menu is appending in XUL document, we must select it from
-  // _toolbox.doc
-  monitor._toolbox.doc
+  // toolbox.doc
+  monitor.toolbox.doc
     .querySelector("#request-menu-context-newtab").click();
   yield onTabOpen;
 

devtools/client/netmonitor/test/browser_net_prefs-reload.js

@@ -62,7 +62,7 @@ add_task(function* () {
   yield testWindow();
 
   info("Moving toolbox back to the bottom...");
-  yield monitor._toolbox.switchHost(Toolbox.HostType.BOTTOM);
+  yield monitor.toolbox.switchHost(Toolbox.HostType.BOTTOM);
   return teardown(monitor);
 
   function storeFirstPrefValues() {
@@ -212,7 +212,7 @@ add_task(function* () {
 
     info("Moving toolbox to the side...");
 
-    yield monitor._toolbox.switchHost(Toolbox.HostType.SIDE);
+    yield monitor.toolbox.switchHost(Toolbox.HostType.SIDE);
     info("Testing prefs reload for a side host.");
     storeFirstPrefValues();
 
@@ -237,7 +237,7 @@ add_task(function* () {
 
     info("Moving toolbox into a window...");
 
-    yield monitor._toolbox.switchHost(Toolbox.HostType.WINDOW);
+    yield monitor.toolbox.switchHost(Toolbox.HostType.WINDOW);
     info("Testing prefs reload for a window host.");
     storeFirstPrefValues();
 

devtools/client/netmonitor/test/browser_net_req-resp-bodies.js

@@ -32,13 +32,13 @@ add_task(function* () {
   verifyRequest(0);
 
   // Switch to the webconsole.
-  let onWebConsole = monitor._toolbox.once("webconsole-selected");
-  monitor._toolbox.selectTool("webconsole");
+  let onWebConsole = monitor.toolbox.once("webconsole-selected");
+  monitor.toolbox.selectTool("webconsole");
   yield onWebConsole;
 
   // Switch back to the netmonitor.
-  let onNetMonitor = monitor._toolbox.once("netmonitor-selected");
-  monitor._toolbox.selectTool("netmonitor");
+  let onNetMonitor = monitor.toolbox.once("netmonitor-selected");
+  monitor.toolbox.selectTool("netmonitor");
   yield onNetMonitor;
 
   // Reload debugee.

devtools/client/netmonitor/test/browser_net_simple-init.js

@@ -22,8 +22,6 @@ function test() {
     function checkIfInitialized(tag) {
       info(`Checking if initialization is ok (${tag}).`);
 
-      ok(monitor.panelWin.NetMonitorView,
-        `The network monitor view object exists (${tag}).`);
       ok(monitor.panelWin.NetMonitorController,
         `The network monitor controller object exists (${tag}).`);
       ok(monitor.panelWin.NetMonitorController._startup,
@@ -43,8 +41,6 @@ function test() {
     function checkIfDestroyed(tag) {
       gInfo("Checking if destruction is ok.");
 
-      gOk(monitor.panelWin.NetMonitorView,
-        `The network monitor view object still exists (${tag}).`);
       gOk(monitor.panelWin.NetMonitorController,
         `The network monitor controller object still exists (${tag}).`);
       gOk(monitor.panelWin.NetMonitorController._shutdown,

devtools/client/netmonitor/test/browser_net_statistics-01.js

@@ -4,7 +4,7 @@
 "use strict";
 
 /**
- * Tests if the statistics view is populated correctly.
+ * Tests if the statistics panel displays correctly.
  */
 
 add_task(function* () {
@@ -15,36 +15,27 @@ add_task(function* () {
   let { document, gStore, windowRequire } = panel;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
-  let body = document.querySelector("#body");
-
-  is(body.selectedPanel.id, "react-monitor-panel-hook",
+  ok(document.querySelector(".monitor-panel"),
     "The current main panel is correct.");
 
-  info("Displaying statistics view");
+  info("Displaying statistics panel");
   gStore.dispatch(Actions.openStatistics(true));
 
-  is(body.selectedPanel.id, "react-statistics-panel-hook",
+  ok(document.querySelector(".statistics-panel"),
     "The current main panel is correct.");
 
   info("Waiting for placeholder to display");
 
-  is(document.querySelector(".primed-cache-chart").childNodes.length, 1,
-    "There should be a placeholder primed cache chart created now.");
-  is(document.querySelector(".empty-cache-chart").childNodes.length, 1,
-    "There should be a placeholder empty cache chart created now.");
+  yield waitUntil(
+    () => document.querySelectorAll(".pie-chart-container[placeholder=true]").length == 2);
+  ok(true, "Two placeholder pie charts appear to be rendered correctly.");
 
-  is(document.querySelectorAll(".pie-chart-container[placeholder=true]").length, 2,
-    "Two placeholder pie chart appear to be rendered correctly.");
-  is(document.querySelectorAll(".table-chart-container[placeholder=true]").length, 2,
-    "Two placeholder table chart appear to be rendered correctly.");
+  yield waitUntil(
+    () => document.querySelectorAll(".table-chart-container[placeholder=true]").length == 2);
+  ok(true, "Two placeholde table charts appear to be rendered correctly.");
 
   info("Waiting for chart to display");
 
-  is(document.querySelector(".primed-cache-chart").childNodes.length, 1,
-    "There should be a real primed cache chart created now.");
-  is(document.querySelector(".empty-cache-chart").childNodes.length, 1,
-    "There should be a real empty cache chart created now.");
-
   yield waitUntil(
     () => document.querySelectorAll(".pie-chart-container:not([placeholder=true])").length == 2);
   ok(true, "Two real pie charts appear to be rendered correctly.");

devtools/client/netmonitor/test/browser_net_statistics-02.js

@@ -31,9 +31,7 @@ add_task(function* () {
 
   gStore.dispatch(Actions.openStatistics(true));
 
-  let body = document.querySelector("#body");
-
-  is(body.selectedPanel.id, "react-statistics-panel-hook",
+  ok(document.querySelector(".statistics-panel"),
     "The main panel is switched to the statistics panel.");
 
   yield waitUntil(
@@ -43,8 +41,8 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".pie-chart-slice"));
 
-  is(body.selectedPanel.id, "react-monitor-panel-hook",
-    "The main panel is switched back to the inspector panel.");
+  ok(document.querySelector(".monitor-panel"),
+    "The main panel is switched back to the monitor panel.");
 
   testFilterButtons(monitor, "html");
   info("The correct filtering predicate is used when exiting perf. analysis mode.");

devtools/client/netmonitor/test/head.js

@@ -152,7 +152,7 @@ function restartNetMonitor(monitor, newUrl) {
   info("Restarting the specified network monitor.");
 
   return Task.spawn(function* () {
-    let tab = monitor.target.tab;
+    let tab = monitor.toolbox.target.tab;
     let url = newUrl || tab.linkedBrowser.currentURI.spec;
 
     let onDestroyed = monitor.once("destroyed");
@@ -167,7 +167,7 @@ function teardown(monitor) {
   info("Destroying the specified network monitor.");
 
   return Task.spawn(function* () {
-    let tab = monitor.target.tab;
+    let tab = monitor.toolbox.target.tab;
 
     let onDestroyed = monitor.once("destroyed");
     yield removeTab(tab);

devtools/client/themes/netmonitor.css

@@ -1270,3 +1270,8 @@
 .split-box {
   width: 100vw;
 }
+
+.network-monitor {
+  width: 100vw;
+  height: 100vh;
+}