Bug 1344155 - Remove toolbox in netmonitor r?honza draft
authorRicky Chien <ricky060709@gmail.com>
Thu, 02 Mar 2017 22:59:56 +0800
changeset 493180 1160f12a3b8fadf6105cdbe4bda69f313ec65160
parent 492625 b23d6277acca34a4b1be9a4c24efd3b999e47ec3
child 547776 77e1114d5a59785e8d0ee115afcb824fa1b6bd57
push id47666
push userbmo:rchien@mozilla.com
push dateFri, 03 Mar 2017 12:24:35 +0000
reviewershonza
bugs1344155
milestone54.0a1
Bug 1344155 - Remove toolbox in netmonitor r?honza MozReview-Commit-ID: BM0RoiuRaPh
devtools/client/inspector/toolsidebar.js
devtools/client/netmonitor/components/monitor-panel.js
devtools/client/netmonitor/components/request-list-content.js
devtools/client/netmonitor/components/toolbar.js
devtools/client/netmonitor/netmonitor-controller.js
devtools/client/netmonitor/netmonitor.js
devtools/client/netmonitor/reducers/timing-markers.js
devtools/client/netmonitor/request-list-context-menu.js
devtools/client/netmonitor/shared/components/network-details-panel.js
devtools/client/netmonitor/shared/components/tabbox-panel.js
devtools/client/netmonitor/test/browser_net_copy_as_curl.js
devtools/client/netmonitor/test/browser_net_copy_headers.js
devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
devtools/client/netmonitor/test/browser_net_copy_params.js
devtools/client/netmonitor/test/browser_net_copy_response.js
devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
devtools/client/netmonitor/test/browser_net_copy_url.js
devtools/client/netmonitor/test/browser_net_image-tooltip.js
devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
devtools/client/netmonitor/test/head.js
devtools/client/netmonitor/waterfall-background.js
devtools/client/shared/components/tabs/tabbar.js
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -71,17 +71,16 @@ ToolSidebar.prototype = {
 
   // Rendering
 
   render: function () {
     let Tabbar = this.React.createFactory(this.browserRequire(
       "devtools/client/shared/components/tabs/tabbar"));
 
     let sidebar = Tabbar({
-      toolbox: this._toolPanel._toolbox,
       showAllTabsMenu: true,
       onSelect: this.handleSelectionChange.bind(this),
     });
 
     this._tabbar = this.ReactDOM.render(sidebar, this._tabbox);
   },
 
   /**
--- a/devtools/client/netmonitor/components/monitor-panel.js
+++ b/devtools/client/netmonitor/components/monitor-panel.js
@@ -77,21 +77,23 @@ const MonitorPanel = createClass({
           true,
         );
       });
     }
   },
 
   componentWillUnmount() {
     MediaQueryList.removeListener(this.onLayoutChange);
-    let { clientWidth, clientHeight } = findDOMNode(this.refs.networkDetailsPanel) || {};
+
+    let { clientWidth, clientHeight } = findDOMNode(this.refs.endPanel) || {};
 
     if (this.state.isVerticalSpliter && clientWidth) {
       Prefs.networkDetailsWidth = clientWidth;
-    } else if (clientHeight) {
+    }
+    if (!this.state.isVerticalSpliter && clientHeight) {
       Prefs.networkDetailsHeight = clientHeight;
     }
   },
 
   onLayoutChange() {
     this.setState({
       isVerticalSpliter: MediaQueryList.matches,
     });
@@ -105,21 +107,17 @@ const MonitorPanel = createClass({
         SplitBox({
           className: "devtools-responsive-container",
           initialWidth: `${Prefs.networkDetailsWidth}px`,
           initialHeight: `${Prefs.networkDetailsHeight}px`,
           minSize: "50px",
           maxSize: "80%",
           splitterSize: "1px",
           startPanel: RequestList({ isEmpty }),
-          endPanel: networkDetailsOpen ?
-            NetworkDetailsPanel({
-              ref: "networkDetailsPanel",
-              toolbox: window.NetMonitorController._toolbox,
-            }) : null,
+          endPanel: networkDetailsOpen && NetworkDetailsPanel({ ref: "endPanel" }),
           endPanelControl: true,
           vert: this.state.isVerticalSpliter,
         }),
       )
     );
   }
 });
 
--- a/devtools/client/netmonitor/components/request-list-content.js
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -50,20 +50,17 @@ const RequestListContent = createClass({
   },
 
   componentWillMount() {
     const { dispatch } = this.props;
     this.contextMenu = new RequestListContextMenu({
       cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
       openStatistics: (open) => dispatch(Actions.openStatistics(open)),
     });
-    this.tooltip = new HTMLTooltip(
-      window.NetMonitorController._toolbox.doc,
-      { type: "arrow" }
-     );
+    this.tooltip = new HTMLTooltip(window.parent.document, { type: "arrow" });
   },
 
   componentDidMount() {
     // Set the CSS variables for waterfall scaling
     this.setScalingStyles();
 
     // Install event handler for displaying a tooltip
     this.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, {
--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -116,17 +116,17 @@ const Toolbar = createClass({
     return (
       span({ className: "devtools-toolbar devtools-toolbar-container" },
         span({ className: "devtools-toolbar-group" },
           button({
             className: "devtools-button devtools-clear-icon requests-list-clear-button",
             title: TOOLBAR_CLEAR,
             onClick: clearRequests,
           }),
-          div({ id: "requests-list-filter-buttons" }, buttons),
+          div({ className: "requests-list-filter-buttons" }, buttons),
         ),
         span({ className: "devtools-toolbar-group" },
           button({
             className: "devtools-button requests-list-network-summary-button",
             title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
             onClick: openStatistics,
           },
             span({ className: "summary-info-icon" }),
--- a/devtools/client/netmonitor/netmonitor-controller.js
+++ b/devtools/client/netmonitor/netmonitor-controller.js
@@ -2,32 +2,31 @@
  * 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 { TimelineFront } = require("devtools/shared/fronts/timeline");
 const { CurlUtils } = require("devtools/client/shared/curl");
 const { ACTIVITY_TYPE, EVENTS } = require("./constants");
-const { configureStore } = require("./store");
 const Actions = require("./actions/index");
 const {
   fetchHeaders,
   formDataURI,
 } = require("./utils/request-utils");
 const {
   onFirefoxConnect,
   onFirefoxDisconnect,
 } = require("./utils/client");
 const {
   getRequestById,
   getDisplayedRequestById,
 } = require("./selectors/index");
 
-const gStore = window.gStore = configureStore();
+const gStore = window.gStore;
 
 /**
  * Object defining the network monitor controller components.
  */
 var NetMonitorController = {
   /**
    * Initializes the view and connects the monitor client.
    *
@@ -307,17 +306,17 @@ var NetMonitorController = {
     return this.tabClient &&
            (this.tabClient.traits.reconfigure || !this._target.isApp);
   },
 
   /**
    * Open a given source in Debugger
    */
   viewSourceInDebugger(sourceURL, sourceLine) {
-    return this._toolbox.viewSourceInDebugger(sourceURL, sourceLine);
+    return this.toolbox.viewSourceInDebugger(sourceURL, sourceLine);
   },
 
   /**
    * Start monitoring all incoming update events about network requests and wait until
    * a complete info about all requests is received. (We wait for the timings info
    * explicitly, because that's always the last piece of information that is received.)
    *
    * This method is designed to wait for network requests that are issued during a page
@@ -824,11 +823,12 @@ NetworkEventsHandler.prototype = {
     return this.webConsoleClient.getString(stringGrip);
   }
 };
 
 /**
  * Preliminary setup for the NetMonitorController object.
  */
 NetMonitorController.NetworkEventsHandler = new NetworkEventsHandler();
+window.NetMonitorController = NetMonitorController;
 window.gNetwork = NetMonitorController.NetworkEventsHandler;
 
 exports.NetMonitorController = NetMonitorController;
--- a/devtools/client/netmonitor/netmonitor.js
+++ b/devtools/client/netmonitor/netmonitor.js
@@ -15,38 +15,37 @@ var Netmonitor = {
       window,
       commonLibRequire: toolbox.browserRequire,
     }).require;
 
     const EventEmitter = require("devtools/shared/event-emitter");
     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);
+    const { configureStore } = require("./store");
+    const store = window.gStore = configureStore();
+    const { NetMonitorController } = require("./netmonitor-controller");
+    NetMonitorController.toolbox = toolbox;
+    NetMonitorController._target = toolbox.target;
+    this.NetMonitorController = NetMonitorController;
 
     // Components
     const NetworkMonitor = createFactory(require("./components/network-monitor"));
 
     // Inject EventEmitter into netmonitor window.
     EventEmitter.decorate(window);
 
-    window.NetMonitorController = require("./netmonitor-controller").NetMonitorController;
-    window.NetMonitorController._toolbox = toolbox;
-    window.NetMonitorController._target = tabTarget;
-
     this.root = document.querySelector(".root");
 
-    render(Provider(
-      { store: window.gStore },
-      NetworkMonitor(),
-    ), this.root);
+    render(Provider({ store }, NetworkMonitor()), this.root);
 
-    return window.NetMonitorController.startupNetMonitor();
+    return NetMonitorController.startupNetMonitor();
   },
 
   destroy: () => {
     const require = window.windowRequire;
     const { unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
 
     unmountComponentAtNode(this.root);
 
-    return window.NetMonitorController.shutdownNetMonitor();
+    return this.NetMonitorController.shutdownNetMonitor();
   }
 };
--- a/devtools/client/netmonitor/reducers/timing-markers.js
+++ b/devtools/client/netmonitor/reducers/timing-markers.js
@@ -1,33 +1,35 @@
 /* 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 I = require("devtools/client/shared/vendor/immutable");
-const { ADD_TIMING_MARKER,
-        CLEAR_TIMING_MARKERS,
-        CLEAR_REQUESTS } = require("../constants");
+const {
+  ADD_TIMING_MARKER,
+  CLEAR_TIMING_MARKERS,
+  CLEAR_REQUESTS,
+} = require("../constants");
 
 const TimingMarkers = I.Record({
   firstDocumentDOMContentLoadedTimestamp: -1,
   firstDocumentLoadTimestamp: -1,
 });
 
 function addTimingMarker(state, action) {
-  if (action.marker.name == "document::DOMContentLoaded" &&
-      state.firstDocumentDOMContentLoadedTimestamp == -1) {
+  if (action.marker.name === "document::DOMContentLoaded" &&
+      state.firstDocumentDOMContentLoadedTimestamp === -1) {
     return state.set("firstDocumentDOMContentLoadedTimestamp",
                      action.marker.unixTime / 1000);
   }
 
-  if (action.marker.name == "document::Load" &&
-      state.firstDocumentLoadTimestamp == -1) {
+  if (action.marker.name === "document::Load" &&
+      state.firstDocumentLoadTimestamp === -1) {
     return state.set("firstDocumentLoadTimestamp",
                      action.marker.unixTime / 1000);
   }
 
   return state;
 }
 
 function clearTimingMarkers(state) {
--- a/devtools/client/netmonitor/request-list-context-menu.js
+++ b/devtools/client/netmonitor/request-list-context-menu.js
@@ -174,17 +174,17 @@ RequestListContextMenu.prototype = {
     menu.append(new MenuItem({
       id: "request-list-context-perf",
       label: L10N.getStr("netmonitor.context.perfTools"),
       accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
       visible: !!window.NetMonitorController.supportsPerfStats,
       click: () => this.openStatistics(true)
     }));
 
-    menu.popup(screenX, screenY, window.NetMonitorController._toolbox);
+    menu.popup(screenX, screenY, { doc: window.parent.document });
     return menu;
   },
 
   /**
    * Opens selected item in a new tab.
    */
   openRequestInTab() {
     let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
--- a/devtools/client/netmonitor/shared/components/network-details-panel.js
+++ b/devtools/client/netmonitor/shared/components/network-details-panel.js
@@ -22,30 +22,28 @@ const { div } = DOM;
 /*
  * Network details panel component
  */
 function NetworkDetailsPanel({
   activeTabId,
   cloneSelectedRequest,
   request,
   selectTab,
-  toolbox,
 }) {
   if (!request) {
     return null;
   }
 
   return (
     div({ className: "network-details-panel" },
       !request.isCustom ?
         TabboxPanel({
           activeTabId,
           request,
           selectTab,
-          toolbox,
         }) :
         CustomRequestPanel({
           cloneSelectedRequest,
           request,
         })
     )
   );
 }
@@ -53,17 +51,16 @@ function NetworkDetailsPanel({
 NetworkDetailsPanel.displayName = "NetworkDetailsPanel";
 
 NetworkDetailsPanel.propTypes = {
   activeTabId: PropTypes.string,
   cloneSelectedRequest: PropTypes.func.isRequired,
   open: PropTypes.bool,
   request: PropTypes.object,
   selectTab: PropTypes.func.isRequired,
-  toolbox: PropTypes.object.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
     activeTabId: state.ui.detailsPanelSelectedTab,
     request: getSelectedRequest(state),
   }),
   (dispatch) => ({
--- a/devtools/client/netmonitor/shared/components/tabbox-panel.js
+++ b/devtools/client/netmonitor/shared/components/tabbox-panel.js
@@ -37,29 +37,27 @@ const PREVIEW_TITLE = L10N.getStr("netmo
  * Tabbox panel component
  * Display the network request details
  */
 function TabboxPanel({
   activeTabId,
   cloneSelectedRequest,
   request,
   selectTab,
-  toolbox,
 }) {
   if (!request) {
     return null;
   }
 
   return (
     Tabbar({
       activeTabId,
       onSelect: selectTab,
       renderOnlySelected: true,
       showAllTabsMenu: true,
-      toolbox,
     },
       TabPanel({
         id: "headers",
         title: HEADERS_TITLE,
       },
         HeadersPanel({ request, cloneSelectedRequest }),
       ),
       TabPanel({
@@ -106,17 +104,16 @@ function TabboxPanel({
 
 TabboxPanel.displayName = "TabboxPanel";
 
 TabboxPanel.propTypes = {
   activeTabId: PropTypes.string,
   cloneSelectedRequest: PropTypes.func.isRequired,
   request: PropTypes.object,
   selectTab: PropTypes.func.isRequired,
-  toolbox: PropTypes.object.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
     activeTabId: state.ui.detailsPanelSelectedTab,
     request: getSelectedRequest(state),
   }),
   (dispatch) => ({
--- a/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
@@ -50,19 +50,17 @@ add_task(function* () {
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-as-curl").click();
   }, function validate(result) {
     if (typeof result !== "string") {
       return false;
     }
 
     // Different setups may produce the same command, but with the
     // parameters in a different order in the commandline (which is fine).
--- a/devtools/client/netmonitor/test/browser_net_copy_headers.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_headers.js
@@ -36,19 +36,17 @@ add_task(function* () {
     "Accept-Encoding: gzip, deflate",
     "Connection: keep-alive",
     "Upgrade-Insecure-Requests: 1",
     "Pragma: no-cache",
     "Cache-Control: no-cache"
   ].join("\n");
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-request-headers").click();
   }, function validate(result) {
     // Sometimes, a "Cookie" header is left over from other tests. Remove it:
     result = String(result).replace(/Cookie: [^\n]+\n/, "");
     return result === EXPECTED_REQUEST_HEADERS;
   });
   info("Clipboard contains the currently selected item's request headers.");
 
@@ -61,19 +59,17 @@ add_task(function* () {
     "Server: httpd.js",
     "Date: Sun, 3 May 2015 11:11:11 GMT"
   ].join("\n");
 
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // _oolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#response-list-context-copy-response-headers").click();
   }, function validate(result) {
     // Fake the "Last-Modified" and "Date" headers because they will vary:
     result = String(result)
       .replace(/Last-Modified: [^\n]+ GMT/, "Last-Modified: Sun, 3 May 2015 11:11:11 GMT")
       .replace(/Date: [^\n]+ GMT/, "Date: Sun, 3 May 2015 11:11:11 GMT");
     return result === EXPECTED_RESPONSE_HEADERS;
   });
--- a/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
@@ -20,18 +20,16 @@ add_task(function* () {
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[5]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[5]);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-image-as-data-uri").click();
   }, TEST_IMAGE_DATA_URI);
 
   ok(true, "Clipboard contains the currently selected image as data uri.");
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_copy_params.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_params.js
@@ -57,51 +57,51 @@ add_task(function* () {
 
   return teardown(monitor);
 
   function testCopyUrlParamsHidden(index, hidden) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
-    let copyUrlParamsNode = monitor.toolbox.doc
+    let copyUrlParamsNode = monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-url-params");
     is(!!copyUrlParamsNode, !hidden,
       "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") +
         "be hidden.");
   }
 
   function* testCopyUrlParams(index, queryString) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
-      monitor.toolbox.doc
+      monitor.panelWin.parent.document
         .querySelector("#request-list-context-copy-url-params").click();
     }, queryString);
     ok(true, "The url query string copied from the selected item is correct.");
   }
 
   function testCopyPostDataHidden(index, hidden) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
-    let copyPostDataNode = monitor.toolbox.doc
+    let copyPostDataNode = monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-post-data");
     is(!!copyPostDataNode, !hidden,
       "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") +
         "be hidden.");
   }
 
   function* testCopyPostData(index, postData) {
     EventUtils.sendMouseEvent({ type: "mousedown" },
       document.querySelectorAll(".request-list-item")[index]);
     EventUtils.sendMouseEvent({ type: "contextmenu" },
       document.querySelectorAll(".request-list-item")[index]);
     yield waitForClipboardPromise(function setup() {
-      monitor.toolbox.doc
+      monitor.panelWin.parent.document
         .querySelector("#request-list-context-copy-post-data").click();
     }, postData);
     ok(true, "The post data string copied from the selected item is correct.");
   }
 });
--- a/devtools/client/netmonitor/test/browser_net_copy_response.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_response.js
@@ -22,16 +22,14 @@ add_task(function* () {
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[3]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[3]);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-response").click();
   }, EXPECTED_RESULT);
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
@@ -22,18 +22,16 @@ add_task(function* () {
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-image-as-data-uri").click();
   }, function check(text) {
     return text.startsWith("data:") && !/undefined/.test(text);
   });
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_copy_url.js
+++ b/devtools/client/netmonitor/test/browser_net_copy_url.js
@@ -23,16 +23,14 @@ add_task(function* () {
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   let requestItem = getSortedRequests(gStore.getState()).get(0);
 
   yield waitForClipboardPromise(function setup() {
-    // Context menu is appending in XUL document, we must select it from
-    // toolbox.doc
-    monitor.toolbox.doc
+    monitor.panelWin.parent.document
       .querySelector("#request-list-context-copy-url").click();
   }, requestItem.url);
 
   yield teardown(monitor);
 });
--- a/devtools/client/netmonitor/test/browser_net_image-tooltip.js
+++ b/devtools/client/netmonitor/test/browser_net_image-tooltip.js
@@ -11,17 +11,17 @@ const IMAGE_TOOLTIP_REQUESTS = 1;
  */
 add_task(function* test() {
   let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL);
   info("Starting test... ");
 
   let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
   let { ACTIVITY_TYPE, EVENTS } = windowRequire("devtools/client/netmonitor/constants");
-  let toolboxDoc = monitor.toolbox.doc;
+  let toolboxDoc = monitor.panelWin.parent.document;
 
   gStore.dispatch(Actions.batchEnable(false));
 
   let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS);
   let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
   yield performRequests();
   yield onEvents;
   yield onThumbnail;
--- a/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
+++ b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
@@ -23,19 +23,17 @@ add_task(function* () {
   yield wait;
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[0]);
   EventUtils.sendMouseEvent({ type: "contextmenu" },
     document.querySelectorAll(".request-list-item")[0]);
 
   let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false);
-  // Context menu is appending in XUL document, we must select it from
-  // toolbox.doc
-  monitor.toolbox.doc
+  monitor.panelWin.parent.document
     .querySelector("#request-list-context-newtab").click();
   yield onTabOpen;
 
   ok(true, "A new tab has been opened");
 
   yield teardown(monitor);
 
   gBrowser.removeCurrentTab();
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -395,17 +395,17 @@ function waitFor(subject, eventName) {
  *
  * @param string filterType
  *        The type of the filter that should be the only one checked.
  */
 function testFilterButtons(monitor, filterType) {
   let doc = monitor.panelWin.document;
   let target = doc.querySelector(".requests-list-filter-" + filterType + "-button");
   ok(target, `Filter button '${filterType}' was found`);
-  let buttons = [...doc.querySelectorAll("#requests-list-filter-buttons button")];
+  let buttons = [...doc.querySelectorAll(".requests-list-filter-buttons button")];
   ok(buttons.length > 0, "More than zero filter buttons were found");
 
   // Only target should be checked.
   let checkStatus = buttons.map(button => button == target ? 1 : 0);
   testFilterButtonsCustom(monitor, checkStatus);
 }
 
 /**
@@ -413,17 +413,17 @@ function testFilterButtons(monitor, filt
  *
  * @param array aIsChecked
  *        An array specifying if a button at given index should have a
  *        'checked' attribute. For example, if the third item of the array
  *        evaluates to true, the third button should be checked.
  */
 function testFilterButtonsCustom(monitor, isChecked) {
   let doc = monitor.panelWin.document;
-  let buttons = doc.querySelectorAll("#requests-list-filter-buttons button");
+  let buttons = doc.querySelectorAll(".requests-list-filter-buttons button");
   for (let i = 0; i < isChecked.length; i++) {
     let button = buttons[i];
     if (isChecked[i]) {
       is(button.classList.contains("checked"), true,
         "The " + button.id + " button should have a 'checked' class.");
       is(button.getAttribute("aria-pressed"), "true",
         "The " + button.id + " button should set 'aria-pressed' = true.");
     } else {
--- a/devtools/client/netmonitor/waterfall-background.js
+++ b/devtools/client/netmonitor/waterfall-background.js
@@ -23,35 +23,34 @@ const STATE_KEYS = [
   "waterfallWidth",
   "firstRequestStartedMillis",
   "timingMarkers",
 ];
 
 /**
  * Creates the background displayed on each waterfall view in this container.
  */
-function WaterfallBackground(document) {
-  this.document = document;
+function WaterfallBackground() {
   this.canvas = document.createElementNS(HTML_NS, "canvas");
   this.ctx = this.canvas.getContext("2d");
   this.prevState = {};
 }
 
 WaterfallBackground.prototype = {
   draw(state) {
     // Do a shallow compare of the previous and the new state
     const shouldUpdate = STATE_KEYS.some(key => this.prevState[key] !== state[key]);
     if (!shouldUpdate) {
       return;
     }
 
     this.prevState = state;
 
-    if (state.waterfallWidth == null || state.scale == null) {
-      this.document.mozSetImageElement("waterfall-background", null);
+    if (state.waterfallWidth === null || state.scale === null) {
+      document.mozSetImageElement("waterfall-background", null);
       return;
     }
 
     // Nuke the context.
     let canvasWidth = this.canvas.width = state.waterfallWidth;
     // Awww yeah, 1px, repeats on Y axis.
     let canvasHeight = this.canvas.height = 1;
 
@@ -73,17 +72,17 @@ WaterfallBackground.prototype = {
       scaledStep = state.scale * timingStep;
       if (scaledStep < REQUESTS_WATERFALL_BACKGROUND_TICKS_SPACING_MIN) {
         timingStep <<= 1;
         continue;
       }
       optimalTickIntervalFound = true;
     }
 
-    const isRTL = isDocumentRTL(this.document);
+    const isRTL = isDocumentRTL(document);
     const [r, g, b] = REQUESTS_WATERFALL_BACKGROUND_TICKS_COLOR_RGB;
     let alphaComponent = REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_MIN;
 
     function drawPixelAt(offset, color) {
       let position = (isRTL ? canvasWidth - offset : offset - 1) | 0;
       let [rc, gc, bc, ac] = color;
       view32bit[position] = (ac << 24) | (bc << 16) | (gc << 8) | rc;
     }
@@ -93,17 +92,17 @@ WaterfallBackground.prototype = {
       let increment = scaledStep * Math.pow(2, i);
       for (let x = 0; x < canvasWidth; x += increment) {
         drawPixelAt(x, [r, g, b, alphaComponent]);
       }
       alphaComponent += REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD;
     }
 
     function drawTimestamp(timestamp, color) {
-      if (timestamp == -1) {
+      if (timestamp === -1) {
         return;
       }
 
       let delta = Math.floor((timestamp - state.firstRequestStartedMillis) * state.scale);
       drawPixelAt(delta, color);
     }
 
     drawTimestamp(state.timingMarkers.firstDocumentDOMContentLoadedTimestamp,
@@ -111,21 +110,21 @@ WaterfallBackground.prototype = {
 
     drawTimestamp(state.timingMarkers.firstDocumentLoadTimestamp,
                   REQUESTS_WATERFALL_LOAD_TICKS_COLOR_RGBA);
 
     // Flush the image data and cache the waterfall background.
     pixelArray.set(view8bit);
     this.ctx.putImageData(imageData, 0, 0);
 
-    this.document.mozSetImageElement("waterfall-background", this.canvas);
+    document.mozSetImageElement("waterfall-background", this.canvas);
   },
 
   destroy() {
-    this.document.mozSetImageElement("waterfall-background", null);
+    document.mozSetImageElement("waterfall-background", null);
   }
 };
 
 /**
  * Returns true if this is document is in RTL mode.
  * @return boolean
  */
 function isDocumentRTL(doc) {
--- a/devtools/client/shared/components/tabs/tabbar.js
+++ b/devtools/client/shared/components/tabs/tabbar.js
@@ -1,14 +1,16 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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/. */
 
+/* eslint-env browser */
+
 "use strict";
 
 const { DOM, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const Tabs = createFactory(require("devtools/client/shared/components/tabs/tabs").Tabs);
 
 const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 
@@ -21,17 +23,16 @@ const { div } = DOM;
 let Tabbar = createClass({
   displayName: "Tabbar",
 
   propTypes: {
     children: PropTypes.array,
     onSelect: PropTypes.func,
     showAllTabsMenu: PropTypes.bool,
     activeTabId: PropTypes.string,
-    toolbox: PropTypes.object,
     renderOnlySelected: PropTypes.bool,
   },
 
   getDefaultProps: function () {
     return {
       showAllTabsMenu: false,
     };
   },
@@ -190,17 +191,18 @@ let Tabbar = createClass({
     // Show a drop down menu with frames.
     // XXX Missing menu API for specifying target (anchor)
     // and relative position to it. See also:
     // https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopup
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1274551
     let rect = target.getBoundingClientRect();
     let screenX = target.ownerDocument.defaultView.mozInnerScreenX;
     let screenY = target.ownerDocument.defaultView.mozInnerScreenY;
-    menu.popup(rect.left + screenX, rect.bottom + screenY, this.props.toolbox);
+    menu.popup(rect.left + screenX, rect.bottom + screenY,
+      { doc: window.parent.document });
 
     return menu;
   },
 
   // Rendering
 
   renderTab: function (tab) {
     if (typeof tab.panel === "function") {