Add m-esr52 at 52.6.0

186 files changed, 19826 insertions, 0 deletions

diff --git a/devtools/client/netmonitor/.eslintrc.js b/devtools/client/netmonitor/.eslintrc.js
new file mode 100644
index 000000000..6e8808a3c
--- /dev/null
+++ b/devtools/client/netmonitor/.eslintrc.js
@@ -0,0 +1,15 @@
+"use strict";
+
+module.exports = {
+  // Extend from the devtools eslintrc.
+  "extends": "../../.eslintrc.js",
+
+  "rules": {
+    // The netmonitor is being migrated to HTML and cleaned of
+    // chrome-privileged code, so this rule disallows requiring chrome
+    // code. Some files in the netmonitor disable this rule still. The
+    // goal is to enable the rule globally on all files.
+    /* eslint-disable max-len */
+    "mozilla/reject-some-requires": ["error", "^(chrome|chrome:.*|resource:.*|devtools/server/.*|.*\\.jsm|devtools/shared/platform/(chome|content)/.*)$"],
+  },
+};
diff --git a/devtools/client/netmonitor/actions/filters.js b/devtools/client/netmonitor/actions/filters.js
new file mode 100644
index 000000000..71582546a
--- /dev/null
+++ b/devtools/client/netmonitor/actions/filters.js
@@ -0,0 +1,57 @@
+/* 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 {
+  TOGGLE_FILTER_TYPE,
+  ENABLE_FILTER_TYPE_ONLY,
+  SET_FILTER_TEXT,
+} = require("../constants");
+
+/**
+ * Toggle an existing filter type state.
+ * If type 'all' is specified, all the other filter types are set to false.
+ * Available filter types are defined in filters reducer.
+ *
+ * @param {string} filter - A filter type is going to be updated
+ */
+function toggleFilterType(filter) {
+  return {
+    type: TOGGLE_FILTER_TYPE,
+    filter,
+  };
+}
+
+/**
+ * Enable filter type exclusively.
+ * Except filter type is set to true, all the other filter types are set
+ * to false.
+ * Available filter types are defined in filters reducer.
+ *
+ * @param {string} filter - A filter type is going to be updated
+ */
+function enableFilterTypeOnly(filter) {
+  return {
+    type: ENABLE_FILTER_TYPE_ONLY,
+    filter,
+  };
+}
+
+/**
+ * Set filter text.
+ *
+ * @param {string} url - A filter text is going to be set
+ */
+function setFilterText(url) {
+  return {
+    type: SET_FILTER_TEXT,
+    url,
+  };
+}
+
+module.exports = {
+  toggleFilterType,
+  enableFilterTypeOnly,
+  setFilterText,
+};
diff --git a/devtools/client/netmonitor/actions/index.js b/devtools/client/netmonitor/actions/index.js
new file mode 100644
index 000000000..3f7b0bd2f
--- /dev/null
+++ b/devtools/client/netmonitor/actions/index.js
@@ -0,0 +1,9 @@
+/* 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 filters = require("./filters");
+const sidebar = require("./sidebar");
+
+module.exports = Object.assign({}, filters, sidebar);
diff --git a/devtools/client/netmonitor/actions/moz.build b/devtools/client/netmonitor/actions/moz.build
new file mode 100644
index 000000000..477cafb41
--- /dev/null
+++ b/devtools/client/netmonitor/actions/moz.build
@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'filters.js',
+    'index.js',
+    'sidebar.js',
+)
diff --git a/devtools/client/netmonitor/actions/sidebar.js b/devtools/client/netmonitor/actions/sidebar.js
new file mode 100644
index 000000000..7e8dca5c1
--- /dev/null
+++ b/devtools/client/netmonitor/actions/sidebar.js
@@ -0,0 +1,49 @@
+/* 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 {
+  DISABLE_TOGGLE_BUTTON,
+  SHOW_SIDEBAR,
+  TOGGLE_SIDEBAR,
+} = require("../constants");
+
+/**
+ * Change ToggleButton disabled state.
+ *
+ * @param {boolean} disabled - expected button disabled state
+ */
+function disableToggleButton(disabled) {
+  return {
+    type: DISABLE_TOGGLE_BUTTON,
+    disabled: disabled,
+  };
+}
+
+/**
+ * Change sidebar visible state.
+ *
+ * @param {boolean} visible - expected sidebar visible state
+ */
+function showSidebar(visible) {
+  return {
+    type: SHOW_SIDEBAR,
+    visible: visible,
+  };
+}
+
+/**
+ * Toggle to show/hide sidebar.
+ */
+function toggleSidebar() {
+  return {
+    type: TOGGLE_SIDEBAR,
+  };
+}
+
+module.exports = {
+  disableToggleButton,
+  showSidebar,
+  toggleSidebar,
+};
diff --git a/devtools/client/netmonitor/components/filter-buttons.js b/devtools/client/netmonitor/components/filter-buttons.js
new file mode 100644
index 000000000..f24db8c53
--- /dev/null
+++ b/devtools/client/netmonitor/components/filter-buttons.js
@@ -0,0 +1,49 @@
+/* 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 { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+
+const { button, div } = DOM;
+
+function FilterButtons({
+  filterTypes,
+  triggerFilterType,
+}) {
+  const buttons = filterTypes.entrySeq().map(([type, checked]) => {
+    let classList = ["menu-filter-button"];
+    checked && classList.push("checked");
+
+    return button({
+      id: `requests-menu-filter-${type}-button`,
+      className: classList.join(" "),
+      "data-key": type,
+      onClick: triggerFilterType,
+      onKeyDown: triggerFilterType,
+      "aria-pressed": checked,
+    }, L10N.getStr(`netmonitor.toolbar.filter.${type}`));
+  }).toArray();
+
+  return div({ id: "requests-menu-filter-buttons" }, buttons);
+}
+
+FilterButtons.PropTypes = {
+  state: PropTypes.object.isRequired,
+  triggerFilterType: PropTypes.func.iRequired,
+};
+
+module.exports = connect(
+  (state) => ({ filterTypes: state.filters.types }),
+  (dispatch) => ({
+    triggerFilterType: (evt) => {
+      if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
+        return;
+      }
+      dispatch(Actions.toggleFilterType(evt.target.dataset.key));
+    },
+  })
+)(FilterButtons);
diff --git a/devtools/client/netmonitor/components/moz.build b/devtools/client/netmonitor/components/moz.build
new file mode 100644
index 000000000..47ef7f026
--- /dev/null
+++ b/devtools/client/netmonitor/components/moz.build
@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'filter-buttons.js',
+    'search-box.js',
+    'toggle-button.js',
+)
diff --git a/devtools/client/netmonitor/components/search-box.js b/devtools/client/netmonitor/components/search-box.js
new file mode 100644
index 000000000..42400e232
--- /dev/null
+++ b/devtools/client/netmonitor/components/search-box.js
@@ -0,0 +1,24 @@
+/* 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 { connect } = require("devtools/client/shared/vendor/react-redux");
+const SearchBox = require("devtools/client/shared/components/search-box");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+const { FREETEXT_FILTER_SEARCH_DELAY } = require("../constants");
+
+module.exports = connect(
+  (state) => ({
+    delay: FREETEXT_FILTER_SEARCH_DELAY,
+    keyShortcut: L10N.getStr("netmonitor.toolbar.filterFreetext.key"),
+    placeholder: L10N.getStr("netmonitor.toolbar.filterFreetext.label"),
+    type: "filter",
+  }),
+  (dispatch) => ({
+    onChange: (url) => {
+      dispatch(Actions.setFilterText(url));
+    },
+  })
+)(SearchBox);
diff --git a/devtools/client/netmonitor/components/toggle-button.js b/devtools/client/netmonitor/components/toggle-button.js
new file mode 100644
index 000000000..db546c55d
--- /dev/null
+++ b/devtools/client/netmonitor/components/toggle-button.js
@@ -0,0 +1,69 @@
+/* -*- 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/. */
+/* globals NetMonitorView */
+"use strict";
+
+const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
+
+// Shortcuts
+const { button } = DOM;
+
+/**
+ * Button used to toggle sidebar
+ */
+function ToggleButton({
+  disabled,
+  onToggle,
+  visible,
+}) {
+  let className = ["devtools-button"];
+  if (!visible) {
+    className.push("pane-collapsed");
+  }
+  let titleMsg = visible ? L10N.getStr("collapseDetailsPane") :
+                           L10N.getStr("expandDetailsPane");
+
+  return button({
+    id: "details-pane-toggle",
+    className: className.join(" "),
+    title: titleMsg,
+    disabled: disabled,
+    tabIndex: "0",
+    onMouseDown: onToggle,
+  });
+}
+
+ToggleButton.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+};
+
+module.exports = connect(
+  (state) => ({
+    disabled: state.sidebar.toggleButtonDisabled,
+    visible: state.sidebar.visible,
+  }),
+  (dispatch) => ({
+    onToggle: () => {
+      dispatch(Actions.toggleSidebar());
+
+      let requestsMenu = NetMonitorView.RequestsMenu;
+      let selectedIndex = requestsMenu.selectedIndex;
+
+      // Make sure there's a selection if the button is pressed, to avoid
+      // showing an empty network details pane.
+      if (selectedIndex == -1 && requestsMenu.itemCount) {
+        requestsMenu.selectedIndex = 0;
+      } else {
+        requestsMenu.selectedIndex = -1;
+      }
+    },
+  })
+)(ToggleButton);
diff --git a/devtools/client/netmonitor/constants.js b/devtools/client/netmonitor/constants.js
new file mode 100644
index 000000000..a540d74b2
--- /dev/null
+++ b/devtools/client/netmonitor/constants.js
@@ -0,0 +1,19 @@
+/* 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 general = {
+  FREETEXT_FILTER_SEARCH_DELAY: 200,
+};
+
+const actionTypes = {
+  TOGGLE_FILTER_TYPE: "TOGGLE_FILTER_TYPE",
+  ENABLE_FILTER_TYPE_ONLY: "ENABLE_FILTER_TYPE_ONLY",
+  TOGGLE_SIDEBAR: "TOGGLE_SIDEBAR",
+  SHOW_SIDEBAR: "SHOW_SIDEBAR",
+  DISABLE_TOGGLE_BUTTON: "DISABLE_TOGGLE_BUTTON",
+  SET_FILTER_TEXT: "SET_FILTER_TEXT",
+};
+
+module.exports = Object.assign({}, general, actionTypes);
diff --git a/devtools/client/netmonitor/custom-request-view.js b/devtools/client/netmonitor/custom-request-view.js
new file mode 100644
index 000000000..3159ffcc7
--- /dev/null
+++ b/devtools/client/netmonitor/custom-request-view.js
@@ -0,0 +1,216 @@
+/* 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 window, dumpn, gNetwork, $, EVENTS, NetMonitorView */
+"use strict";
+
+const {Task} = require("devtools/shared/task");
+const {writeHeaderText, getKeyWithEvent} = require("./request-utils");
+
+loader.lazyRequireGetter(this, "NetworkHelper",
+  "devtools/shared/webconsole/network-helper");
+
+/**
+ * Functions handling the custom request view.
+ */
+function CustomRequestView() {
+  dumpn("CustomRequestView was instantiated");
+}
+
+CustomRequestView.prototype = {
+  /**
+   * Initialization function, called when the network monitor is started.
+   */
+  initialize: function () {
+    dumpn("Initializing the CustomRequestView");
+
+    this.updateCustomRequestEvent = getKeyWithEvent(this.onUpdate.bind(this));
+    $("#custom-pane").addEventListener("input",
+      this.updateCustomRequestEvent, false);
+  },
+
+  /**
+   * Destruction function, called when the network monitor is closed.
+   */
+  destroy: function () {
+    dumpn("Destroying the CustomRequestView");
+
+    $("#custom-pane").removeEventListener("input",
+      this.updateCustomRequestEvent, false);
+  },
+
+  /**
+   * Populates this view with the specified data.
+   *
+   * @param object data
+   *        The data source (this should be the attachment of a request item).
+   * @return object
+   *        Returns a promise that resolves upon population the view.
+   */
+  populate: Task.async(function* (data) {
+    $("#custom-url-value").value = data.url;
+    $("#custom-method-value").value = data.method;
+    this.updateCustomQuery(data.url);
+
+    if (data.requestHeaders) {
+      let headers = data.requestHeaders.headers;
+      $("#custom-headers-value").value = writeHeaderText(headers);
+    }
+    if (data.requestPostData) {
+      let postData = data.requestPostData.postData.text;
+      $("#custom-postdata-value").value = yield gNetwork.getString(postData);
+    }
+
+    window.emit(EVENTS.CUSTOMREQUESTVIEW_POPULATED);
+  }),
+
+  /**
+   * Handle user input in the custom request form.
+   *
+   * @param object field
+   *        the field that the user updated.
+   */
+  onUpdate: function (field) {
+    let selectedItem = NetMonitorView.RequestsMenu.selectedItem;
+    let value;
+
+    switch (field) {
+      case "method":
+        value = $("#custom-method-value").value.trim();
+        selectedItem.attachment.method = value;
+        break;
+      case "url":
+        value = $("#custom-url-value").value;
+        this.updateCustomQuery(value);
+        selectedItem.attachment.url = value;
+        break;
+      case "query":
+        let query = $("#custom-query-value").value;
+        this.updateCustomUrl(query);
+        field = "url";
+        value = $("#custom-url-value").value;
+        selectedItem.attachment.url = value;
+        break;
+      case "body":
+        value = $("#custom-postdata-value").value;
+        selectedItem.attachment.requestPostData = { postData: { text: value } };
+        break;
+      case "headers":
+        let headersText = $("#custom-headers-value").value;
+        value = parseHeadersText(headersText);
+        selectedItem.attachment.requestHeaders = { headers: value };
+        break;
+    }
+
+    NetMonitorView.RequestsMenu.updateMenuView(selectedItem, field, value);
+  },
+
+  /**
+   * Update the query string field based on the url.
+   *
+   * @param object url
+   *        The URL to extract query string from.
+   */
+  updateCustomQuery: function (url) {
+    let paramsArray = NetworkHelper.parseQueryString(
+      NetworkHelper.nsIURL(url).query);
+
+    if (!paramsArray) {
+      $("#custom-query").hidden = true;
+      return;
+    }
+
+    $("#custom-query").hidden = false;
+    $("#custom-query-value").value = writeQueryText(paramsArray);
+  },
+
+  /**
+   * Update the url based on the query string field.
+   *
+   * @param object queryText
+   *        The contents of the query string field.
+   */
+  updateCustomUrl: function (queryText) {
+    let params = parseQueryText(queryText);
+    let queryString = writeQueryString(params);
+
+    let url = $("#custom-url-value").value;
+    let oldQuery = NetworkHelper.nsIURL(url).query;
+    let path = url.replace(oldQuery, queryString);
+
+    $("#custom-url-value").value = path;
+  }
+};
+
+/**
+ * Parse text representation of multiple HTTP headers.
+ *
+ * @param string text
+ *        Text of headers
+ * @return array
+ *         Array of headers info {name, value}
+ */
+function parseHeadersText(text) {
+  return parseRequestText(text, "\\S+?", ":");
+}
+
+/**
+ * Parse readable text list of a query string.
+ *
+ * @param string text
+ *        Text of query string represetation
+ * @return array
+ *         Array of query params {name, value}
+ */
+function parseQueryText(text) {
+  return parseRequestText(text, ".+?", "=");
+}
+
+/**
+ * Parse a text representation of a name[divider]value list with
+ * the given name regex and divider character.
+ *
+ * @param string text
+ *        Text of list
+ * @return array
+ *         Array of headers info {name, value}
+ */
+function parseRequestText(text, namereg, divider) {
+  let regex = new RegExp("(" + namereg + ")\\" + divider + "\\s*(.+)");
+  let pairs = [];
+
+  for (let line of text.split("\n")) {
+    let matches;
+    if (matches = regex.exec(line)) { // eslint-disable-line
+      let [, name, value] = matches;
+      pairs.push({name: name, value: value});
+    }
+  }
+  return pairs;
+}
+
+/**
+ * Write out a list of query params into a chunk of text
+ *
+ * @param array params
+ *        Array of query params {name, value}
+ * @return string
+ *         List of query params in text format
+ */
+function writeQueryText(params) {
+  return params.map(({name, value}) => name + "=" + value).join("\n");
+}
+
+/**
+ * Write out a list of query params into a query string
+ *
+ * @param array params
+ *        Array of query  params {name, value}
+ * @return string
+ *         Query string that can be appended to a url.
+ */
+function writeQueryString(params) {
+  return params.map(({name, value}) => name + "=" + value).join("&");
+}
+
+exports.CustomRequestView = CustomRequestView;
diff --git a/devtools/client/netmonitor/events.js b/devtools/client/netmonitor/events.js
new file mode 100644
index 000000000..8062a2f8c
--- /dev/null
+++ b/devtools/client/netmonitor/events.js
@@ -0,0 +1,86 @@
+"use strict";
+
+// The panel's window global is an EventEmitter firing the following events:
+const EVENTS = {
+  // When the monitored target begins and finishes navigating.
+  TARGET_WILL_NAVIGATE: "NetMonitor:TargetWillNavigate",
+  TARGET_DID_NAVIGATE: "NetMonitor:TargetNavigate",
+
+  // When a network or timeline event is received.
+  // See https://developer.mozilla.org/docs/Tools/Web_Console/remoting for
+  // more information about what each packet is supposed to deliver.
+  NETWORK_EVENT: "NetMonitor:NetworkEvent",
+  TIMELINE_EVENT: "NetMonitor:TimelineEvent",
+
+  // When a network event is added to the view
+  REQUEST_ADDED: "NetMonitor:RequestAdded",
+
+  // When request headers begin and finish receiving.
+  UPDATING_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdating:RequestHeaders",
+  RECEIVED_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdated:RequestHeaders",
+
+  // When request cookies begin and finish receiving.
+  UPDATING_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdating:RequestCookies",
+  RECEIVED_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdated:RequestCookies",
+
+  // When request post data begins and finishes receiving.
+  UPDATING_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdating:RequestPostData",
+  RECEIVED_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdated:RequestPostData",
+
+  // When security information begins and finishes receiving.
+  UPDATING_SECURITY_INFO: "NetMonitor::NetworkEventUpdating:SecurityInfo",
+  RECEIVED_SECURITY_INFO: "NetMonitor::NetworkEventUpdated:SecurityInfo",
+
+  // When response headers begin and finish receiving.
+  UPDATING_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdating:ResponseHeaders",
+  RECEIVED_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdated:ResponseHeaders",
+
+  // When response cookies begin and finish receiving.
+  UPDATING_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdating:ResponseCookies",
+  RECEIVED_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdated:ResponseCookies",
+
+  // When event timings begin and finish receiving.
+  UPDATING_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdating:EventTimings",
+  RECEIVED_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdated:EventTimings",
+
+  // When response content begins, updates and finishes receiving.
+  STARTED_RECEIVING_RESPONSE: "NetMonitor:NetworkEventUpdating:ResponseStart",
+  UPDATING_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdating:ResponseContent",
+  RECEIVED_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdated:ResponseContent",
+
+  // When the request post params are displayed in the UI.
+  REQUEST_POST_PARAMS_DISPLAYED: "NetMonitor:RequestPostParamsAvailable",
+
+  // When the response body is displayed in the UI.
+  RESPONSE_BODY_DISPLAYED: "NetMonitor:ResponseBodyAvailable",
+
+  // When the html response preview is displayed in the UI.
+  RESPONSE_HTML_PREVIEW_DISPLAYED: "NetMonitor:ResponseHtmlPreviewAvailable",
+
+  // When the image response thumbnail is displayed in the UI.
+  RESPONSE_IMAGE_THUMBNAIL_DISPLAYED:
+    "NetMonitor:ResponseImageThumbnailAvailable",
+
+  // When a tab is selected in the NetworkDetailsView and subsequently rendered.
+  TAB_UPDATED: "NetMonitor:TabUpdated",
+
+  // Fired when Sidebar has finished being populated.
+  SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
+
+  // Fired when NetworkDetailsView has finished being populated.
+  NETWORKDETAILSVIEW_POPULATED: "NetMonitor:NetworkDetailsViewPopulated",
+
+  // Fired when CustomRequestView has finished being populated.
+  CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated",
+
+  // Fired when charts have been displayed in the PerformanceStatisticsView.
+  PLACEHOLDER_CHARTS_DISPLAYED: "NetMonitor:PlaceholderChartsDisplayed",
+  PRIMED_CACHE_CHART_DISPLAYED: "NetMonitor:PrimedChartsDisplayed",
+  EMPTY_CACHE_CHART_DISPLAYED: "NetMonitor:EmptyChartsDisplayed",
+
+  // Fired once the NetMonitorController establishes a connection to the debug
+  // target.
+  CONNECTED: "connected",
+};
+
+exports.EVENTS = EVENTS;
diff --git a/devtools/client/netmonitor/filter-predicates.js b/devtools/client/netmonitor/filter-predicates.js
new file mode 100644
index 000000000..9c8e49c62
--- /dev/null
+++ b/devtools/client/netmonitor/filter-predicates.js
@@ -0,0 +1,129 @@
+"use strict";
+
+/**
+ * Predicates used when filtering items.
+ *
+ * @param object item
+ *        The filtered item.
+ * @return boolean
+ *         True if the item should be visible, false otherwise.
+ */
+function all() {
+  return true;
+}
+
+function isHtml({ mimeType }) {
+  return mimeType && mimeType.includes("/html");
+}
+
+function isCss({ mimeType }) {
+  return mimeType && mimeType.includes("/css");
+}
+
+function isJs({ mimeType }) {
+  return mimeType && (
+    mimeType.includes("/ecmascript") ||
+    mimeType.includes("/javascript") ||
+    mimeType.includes("/x-javascript"));
+}
+
+function isXHR(item) {
+  // Show the request it is XHR, except if the request is a WS upgrade
+  return item.isXHR && !isWS(item);
+}
+
+function isFont({ url, mimeType }) {
+  // Fonts are a mess.
+  return (mimeType && (
+      mimeType.includes("font/") ||
+      mimeType.includes("/font"))) ||
+    url.includes(".eot") ||
+    url.includes(".ttf") ||
+    url.includes(".otf") ||
+    url.includes(".woff");
+}
+
+function isImage({ mimeType }) {
+  return mimeType && mimeType.includes("image/");
+}
+
+function isMedia({ mimeType }) {
+  // Not including images.
+  return mimeType && (
+    mimeType.includes("audio/") ||
+    mimeType.includes("video/") ||
+    mimeType.includes("model/"));
+}
+
+function isFlash({ url, mimeType }) {
+  // Flash is a mess.
+  return (mimeType && (
+      mimeType.includes("/x-flv") ||
+      mimeType.includes("/x-shockwave-flash"))) ||
+    url.includes(".swf") ||
+    url.includes(".flv");
+}
+
+function isWS({ requestHeaders, responseHeaders }) {
+  // Detect a websocket upgrade if request has an Upgrade header with value 'websocket'
+  if (!requestHeaders || !Array.isArray(requestHeaders.headers)) {
+    return false;
+  }
+
+  // Find the 'upgrade' header.
+  let upgradeHeader = requestHeaders.headers.find(header => {
+    return (header.name == "Upgrade");
+  });
+
+  // If no header found on request, check response - mainly to get
+  // something we can unit test, as it is impossible to set
+  // the Upgrade header on outgoing XHR as per the spec.
+  if (!upgradeHeader && responseHeaders &&
+      Array.isArray(responseHeaders.headers)) {
+    upgradeHeader = responseHeaders.headers.find(header => {
+      return (header.name == "Upgrade");
+    });
+  }
+
+  // Return false if there is no such header or if its value isn't 'websocket'.
+  if (!upgradeHeader || upgradeHeader.value != "websocket") {
+    return false;
+  }
+
+  return true;
+}
+
+function isOther(item) {
+  let tests = [isHtml, isCss, isJs, isXHR, isFont, isImage, isMedia, isFlash, isWS];
+  return tests.every(is => !is(item));
+}
+
+function isFreetextMatch({ url }, text) {
+  let lowerCaseUrl = url.toLowerCase();
+  let lowerCaseText = text.toLowerCase();
+  let textLength = text.length;
+  // Support negative filtering
+  if (text.startsWith("-") && textLength > 1) {
+    lowerCaseText = lowerCaseText.substring(1, textLength);
+    return !lowerCaseUrl.includes(lowerCaseText);
+  }
+
+  // no text is a positive match
+  return !text || lowerCaseUrl.includes(lowerCaseText);
+}
+
+exports.Filters = {
+  all: all,
+  html: isHtml,
+  css: isCss,
+  js: isJs,
+  xhr: isXHR,
+  fonts: isFont,
+  images: isImage,
+  media: isMedia,
+  flash: isFlash,
+  ws: isWS,
+  other: isOther,
+};
+
+exports.isFreetextMatch = isFreetextMatch;
diff --git a/devtools/client/netmonitor/har/har-automation.js b/devtools/client/netmonitor/har/har-automation.js
new file mode 100644
index 000000000..0885c4f96
--- /dev/null
+++ b/devtools/client/netmonitor/har/har-automation.js
@@ -0,0 +1,273 @@
+/* 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";
+/* eslint-disable mozilla/reject-some-requires */
+const { Ci } = require("chrome");
+const { Class } = require("sdk/core/heritage");
+const { resolve } = require("promise");
+const Services = require("Services");
+
+loader.lazyRequireGetter(this, "HarCollector", "devtools/client/netmonitor/har/har-collector", true);
+loader.lazyRequireGetter(this, "HarExporter", "devtools/client/netmonitor/har/har-exporter", true);
+loader.lazyRequireGetter(this, "HarUtils", "devtools/client/netmonitor/har/har-utils", true);
+
+const prefDomain = "devtools.netmonitor.har.";
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log: function (...args) {
+  }
+};
+
+/**
+ * This object is responsible for automated HAR export. It listens
+ * for Network activity, collects all HTTP data and triggers HAR
+ * export when the page is loaded.
+ *
+ * The user needs to enable the following preference to make the
+ * auto-export work: devtools.netmonitor.har.enableAutoExportToFile
+ *
+ * HAR files are stored within directory that is specified in this
+ * preference: devtools.netmonitor.har.defaultLogDir
+ *
+ * If the default log directory preference isn't set the following
+ * directory is used by default: <profile>/har/logs
+ */
+var HarAutomation = Class({
+  // Initialization
+
+  initialize: function (toolbox) {
+    this.toolbox = toolbox;
+
+    let target = toolbox.target;
+    target.makeRemote().then(() => {
+      this.startMonitoring(target.client, target.form);
+    });
+  },
+
+  destroy: function () {
+    if (this.collector) {
+      this.collector.stop();
+    }
+
+    if (this.tabWatcher) {
+      this.tabWatcher.disconnect();
+    }
+  },
+
+  // Automation
+
+  startMonitoring: function (client, tabGrip, callback) {
+    if (!client) {
+      return;
+    }
+
+    if (!tabGrip) {
+      return;
+    }
+
+    this.debuggerClient = client;
+    this.tabClient = this.toolbox.target.activeTab;
+    this.webConsoleClient = this.toolbox.target.activeConsole;
+
+    this.tabWatcher = new TabWatcher(this.toolbox, this);
+    this.tabWatcher.connect();
+  },
+
+  pageLoadBegin: function (response) {
+    this.resetCollector();
+  },
+
+  resetCollector: function () {
+    if (this.collector) {
+      this.collector.stop();
+    }
+
+    // A page is about to be loaded, start collecting HTTP
+    // data from events sent from the backend.
+    this.collector = new HarCollector({
+      webConsoleClient: this.webConsoleClient,
+      debuggerClient: this.debuggerClient
+    });
+
+    this.collector.start();
+  },
+
+  /**
+   * A page is done loading, export collected data. Note that
+   * some requests for additional page resources might be pending,
+   * so export all after all has been properly received from the backend.
+   *
+   * This collector still works and collects any consequent HTTP
+   * traffic (e.g. XHRs) happening after the page is loaded and
+   * The additional traffic can be exported by executing
+   * triggerExport on this object.
+   */
+  pageLoadDone: function (response) {
+    trace.log("HarAutomation.pageLoadDone; ", response);
+
+    if (this.collector) {
+      this.collector.waitForHarLoad().then(collector => {
+        return this.autoExport();
+      });
+    }
+  },
+
+  autoExport: function () {
+    let autoExport = Services.prefs.getBoolPref(prefDomain +
+      "enableAutoExportToFile");
+
+    if (!autoExport) {
+      return resolve();
+    }
+
+    // Auto export to file is enabled, so save collected data
+    // into a file and use all the default options.
+    let data = {
+      fileName: Services.prefs.getCharPref(prefDomain + "defaultFileName"),
+    };
+
+    return this.executeExport(data);
+  },
+
+  // Public API
+
+  /**
+   * Export all what is currently collected.
+   */
+  triggerExport: function (data) {
+    if (!data.fileName) {
+      data.fileName = Services.prefs.getCharPref(prefDomain +
+        "defaultFileName");
+    }
+
+    return this.executeExport(data);
+  },
+
+  /**
+   * Clear currently collected data.
+   */
+  clear: function () {
+    this.resetCollector();
+  },
+
+  // HAR Export
+
+  /**
+   * Execute HAR export. This method fetches all data from the
+   * Network panel (asynchronously) and saves it into a file.
+   */
+  executeExport: function (data) {
+    let items = this.collector.getItems();
+    let form = this.toolbox.target.form;
+    let title = form.title || form.url;
+
+    let options = {
+      getString: this.getString.bind(this),
+      view: this,
+      items: items,
+    };
+
+    options.defaultFileName = data.fileName;
+    options.compress = data.compress;
+    options.title = data.title || title;
+    options.id = data.id;
+    options.jsonp = data.jsonp;
+    options.includeResponseBodies = data.includeResponseBodies;
+    options.jsonpCallback = data.jsonpCallback;
+    options.forceExport = data.forceExport;
+
+    trace.log("HarAutomation.executeExport; " + data.fileName, options);
+
+    return HarExporter.fetchHarData(options).then(jsonString => {
+      // Save the HAR file if the file name is provided.
+      if (jsonString && options.defaultFileName) {
+        let file = getDefaultTargetFile(options);
+        if (file) {
+          HarUtils.saveToFile(file, jsonString, options.compress);
+        }
+      }
+
+      return jsonString;
+    });
+  },
+
+  /**
+   * Fetches the full text of a string.
+   */
+  getString: function (stringGrip) {
+    return this.webConsoleClient.getString(stringGrip);
+  },
+});
+
+// Helpers
+
+function TabWatcher(toolbox, listener) {
+  this.target = toolbox.target;
+  this.listener = listener;
+
+  this.onTabNavigated = this.onTabNavigated.bind(this);
+}
+
+TabWatcher.prototype = {
+  // Connection
+
+  connect: function () {
+    this.target.on("navigate", this.onTabNavigated);
+    this.target.on("will-navigate", this.onTabNavigated);
+  },
+
+  disconnect: function () {
+    if (!this.target) {
+      return;
+    }
+
+    this.target.off("navigate", this.onTabNavigated);
+    this.target.off("will-navigate", this.onTabNavigated);
+  },
+
+  // Event Handlers
+
+  /**
+   * Called for each location change in the monitored tab.
+   *
+   * @param string aType
+   *        Packet type.
+   * @param object aPacket
+   *        Packet received from the server.
+   */
+  onTabNavigated: function (type, packet) {
+    switch (type) {
+      case "will-navigate": {
+        this.listener.pageLoadBegin(packet);
+        break;
+      }
+      case "navigate": {
+        this.listener.pageLoadDone(packet);
+        break;
+      }
+    }
+  },
+};
+
+// Protocol Helpers
+
+/**
+ * Returns target file for exported HAR data.
+ */
+function getDefaultTargetFile(options) {
+  let path = options.defaultLogDir ||
+    Services.prefs.getCharPref("devtools.netmonitor.har.defaultLogDir");
+  let folder = HarUtils.getLocalDirectory(path);
+  let fileName = HarUtils.getHarFileName(options.defaultFileName,
+    options.jsonp, options.compress);
+
+  folder.append(fileName);
+  folder.createUnique(Ci.nsIFile.NORMAL_FILE_TYPE, parseInt("0666", 8));
+
+  return folder;
+}
+
+// Exports from this module
+exports.HarAutomation = HarAutomation;
diff --git a/devtools/client/netmonitor/har/har-builder.js b/devtools/client/netmonitor/har/har-builder.js
new file mode 100644
index 000000000..f28e43016
--- /dev/null
+++ b/devtools/client/netmonitor/har/har-builder.js
@@ -0,0 +1,491 @@
+/* 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 { defer, all } = require("promise");
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const Services = require("Services");
+const appInfo = Services.appinfo;
+const { CurlUtils } = require("devtools/client/shared/curl");
+const { getFormDataSections } = require("devtools/client/netmonitor/request-utils");
+
+loader.lazyRequireGetter(this, "NetworkHelper", "devtools/shared/webconsole/network-helper");
+
+loader.lazyGetter(this, "L10N", () => {
+  return new LocalizationHelper("devtools/client/locales/har.properties");
+});
+
+const HAR_VERSION = "1.1";
+
+/**
+ * This object is responsible for building HAR file. See HAR spec:
+ * https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html
+ * http://www.softwareishard.com/blog/har-12-spec/
+ *
+ * @param {Object} options configuration object
+ *
+ * The following options are supported:
+ *
+ * - items {Array}: List of Network requests to be exported. It is possible
+ *   to use directly: NetMonitorView.RequestsMenu.items
+ *
+ * - id {String}: ID of the exported page.
+ *
+ * - title {String}: Title of the exported page.
+ *
+ * - includeResponseBodies {Boolean}: Set to true to include HTTP response
+ *   bodies in the result data structure.
+ */
+var HarBuilder = function (options) {
+  this._options = options;
+  this._pageMap = [];
+};
+
+HarBuilder.prototype = {
+  // Public API
+
+  /**
+   * This is the main method used to build the entire result HAR data.
+   * The process is asynchronous since it can involve additional RDP
+   * communication (e.g. resolving long strings).
+   *
+   * @returns {Promise} A promise that resolves to the HAR object when
+   * the entire build process is done.
+   */
+  build: function () {
+    this.promises = [];
+
+    // Build basic structure for data.
+    let log = this.buildLog();
+
+    // Build entries.
+    let items = this._options.items;
+    for (let i = 0; i < items.length; i++) {
+      let file = items[i].attachment;
+      log.entries.push(this.buildEntry(log, file));
+    }
+
+    // Some data needs to be fetched from the backend during the
+    // build process, so wait till all is done.
+    let { resolve, promise } = defer();
+    all(this.promises).then(results => resolve({ log: log }));
+
+    return promise;
+  },
+
+  // Helpers
+
+  buildLog: function () {
+    return {
+      version: HAR_VERSION,
+      creator: {
+        name: appInfo.name,
+        version: appInfo.version
+      },
+      browser: {
+        name: appInfo.name,
+        version: appInfo.version
+      },
+      pages: [],
+      entries: [],
+    };
+  },
+
+  buildPage: function (file) {
+    let page = {};
+
+    // Page start time is set when the first request is processed
+    // (see buildEntry)
+    page.startedDateTime = 0;
+    page.id = "page_" + this._options.id;
+    page.title = this._options.title;
+
+    return page;
+  },
+
+  getPage: function (log, file) {
+    let id = this._options.id;
+    let page = this._pageMap[id];
+    if (page) {
+      return page;
+    }
+
+    this._pageMap[id] = page = this.buildPage(file);
+    log.pages.push(page);
+
+    return page;
+  },
+
+  buildEntry: function (log, file) {
+    let page = this.getPage(log, file);
+
+    let entry = {};
+    entry.pageref = page.id;
+    entry.startedDateTime = dateToJSON(new Date(file.startedMillis));
+    entry.time = file.endedMillis - file.startedMillis;
+
+    entry.request = this.buildRequest(file);
+    entry.response = this.buildResponse(file);
+    entry.cache = this.buildCache(file);
+    entry.timings = file.eventTimings ? file.eventTimings.timings : {};
+
+    if (file.remoteAddress) {
+      entry.serverIPAddress = file.remoteAddress;
+    }
+
+    if (file.remotePort) {
+      entry.connection = file.remotePort + "";
+    }
+
+    // Compute page load start time according to the first request start time.
+    if (!page.startedDateTime) {
+      page.startedDateTime = entry.startedDateTime;
+      page.pageTimings = this.buildPageTimings(page, file);
+    }
+
+    return entry;
+  },
+
+  buildPageTimings: function (page, file) {
+    // Event timing info isn't available
+    let timings = {
+      onContentLoad: -1,
+      onLoad: -1
+    };
+
+    return timings;
+  },
+
+  buildRequest: function (file) {
+    let request = {
+      bodySize: 0
+    };
+
+    request.method = file.method;
+    request.url = file.url;
+    request.httpVersion = file.httpVersion || "";
+
+    request.headers = this.buildHeaders(file.requestHeaders);
+    request.headers = this.appendHeadersPostData(request.headers, file);
+    request.cookies = this.buildCookies(file.requestCookies);
+
+    request.queryString = NetworkHelper.parseQueryString(
+      NetworkHelper.nsIURL(file.url).query) || [];
+
+    request.postData = this.buildPostData(file);
+
+    request.headersSize = file.requestHeaders.headersSize;
+
+    // Set request body size, but make sure the body is fetched
+    // from the backend.
+    if (file.requestPostData) {
+      this.fetchData(file.requestPostData.postData.text).then(value => {
+        request.bodySize = value.length;
+      });
+    }
+
+    return request;
+  },
+
+  /**
+   * Fetch all header values from the backend (if necessary) and
+   * build the result HAR structure.
+   *
+   * @param {Object} input Request or response header object.
+   */
+  buildHeaders: function (input) {
+    if (!input) {
+      return [];
+    }
+
+    return this.buildNameValuePairs(input.headers);
+  },
+
+  appendHeadersPostData: function (input = [], file) {
+    if (!file.requestPostData) {
+      return input;
+    }
+
+    this.fetchData(file.requestPostData.postData.text).then(value => {
+      let multipartHeaders = CurlUtils.getHeadersFromMultipartText(value);
+      for (let header of multipartHeaders) {
+        input.push(header);
+      }
+    });
+
+    return input;
+  },
+
+  buildCookies: function (input) {
+    if (!input) {
+      return [];
+    }
+
+    return this.buildNameValuePairs(input.cookies);
+  },
+
+  buildNameValuePairs: function (entries) {
+    let result = [];
+
+    // HAR requires headers array to be presented, so always
+    // return at least an empty array.
+    if (!entries) {
+      return result;
+    }
+
+    // Make sure header values are fully fetched from the server.
+    entries.forEach(entry => {
+      this.fetchData(entry.value).then(value => {
+        result.push({
+          name: entry.name,
+          value: value
+        });
+      });
+    });
+
+    return result;
+  },
+
+  buildPostData: function (file) {
+    let postData = {
+      mimeType: findValue(file.requestHeaders.headers, "content-type"),
+      params: [],
+      text: ""
+    };
+
+    if (!file.requestPostData) {
+      return postData;
+    }
+
+    if (file.requestPostData.postDataDiscarded) {
+      postData.comment = L10N.getStr("har.requestBodyNotIncluded");
+      return postData;
+    }
+
+    // Load request body from the backend.
+    this.fetchData(file.requestPostData.postData.text).then(postDataText => {
+      postData.text = postDataText;
+
+      // If we are dealing with URL encoded body, parse parameters.
+      let { headers } = file.requestHeaders;
+      if (CurlUtils.isUrlEncodedRequest({ headers, postDataText })) {
+        postData.mimeType = "application/x-www-form-urlencoded";
+
+        // Extract form parameters and produce nice HAR array.
+        getFormDataSections(
+          file.requestHeaders,
+          file.requestHeadersFromUploadStream,
+          file.requestPostData,
+          this._options.getString
+        ).then(formDataSections => {
+          formDataSections.forEach(section => {
+            let paramsArray = NetworkHelper.parseQueryString(section);
+            if (paramsArray) {
+              postData.params = [...postData.params, ...paramsArray];
+            }
+          });
+        });
+      }
+    });
+
+    return postData;
+  },
+
+  buildResponse: function (file) {
+    let response = {
+      status: 0
+    };
+
+    // Arbitrary value if it's aborted to make sure status has a number
+    if (file.status) {
+      response.status = parseInt(file.status, 10);
+    }
+
+    let responseHeaders = file.responseHeaders;
+
+    response.statusText = file.statusText || "";
+    response.httpVersion = file.httpVersion || "";
+
+    response.headers = this.buildHeaders(responseHeaders);
+    response.cookies = this.buildCookies(file.responseCookies);
+    response.content = this.buildContent(file);
+
+    let headers = responseHeaders ? responseHeaders.headers : null;
+    let headersSize = responseHeaders ? responseHeaders.headersSize : -1;
+
+    response.redirectURL = findValue(headers, "Location");
+    response.headersSize = headersSize;
+
+    // 'bodySize' is size of the received response body in bytes.
+    // Set to zero in case of responses coming from the cache (304).
+    // Set to -1 if the info is not available.
+    if (typeof file.transferredSize != "number") {
+      response.bodySize = (response.status == 304) ? 0 : -1;
+    } else {
+      response.bodySize = file.transferredSize;
+    }
+
+    return response;
+  },
+
+  buildContent: function (file) {
+    let content = {
+      mimeType: file.mimeType,
+      size: -1
+    };
+
+    let responseContent = file.responseContent;
+    if (responseContent && responseContent.content) {
+      content.size = responseContent.content.size;
+      content.encoding = responseContent.content.encoding;
+    }
+
+    let includeBodies = this._options.includeResponseBodies;
+    let contentDiscarded = responseContent ?
+      responseContent.contentDiscarded : false;
+
+    // The comment is appended only if the response content
+    // is explicitly discarded.
+    if (!includeBodies || contentDiscarded) {
+      content.comment = L10N.getStr("har.responseBodyNotIncluded");
+      return content;
+    }
+
+    if (responseContent) {
+      let text = responseContent.content.text;
+      this.fetchData(text).then(value => {
+        content.text = value;
+      });
+    }
+
+    return content;
+  },
+
+  buildCache: function (file) {
+    let cache = {};
+
+    if (!file.fromCache) {
+      return cache;
+    }
+
+    // There is no such info yet in the Net panel.
+    // cache.beforeRequest = {};
+
+    if (file.cacheEntry) {
+      cache.afterRequest = this.buildCacheEntry(file.cacheEntry);
+    } else {
+      cache.afterRequest = null;
+    }
+
+    return cache;
+  },
+
+  buildCacheEntry: function (cacheEntry) {
+    let cache = {};
+
+    cache.expires = findValue(cacheEntry, "Expires");
+    cache.lastAccess = findValue(cacheEntry, "Last Fetched");
+    cache.eTag = "";
+    cache.hitCount = findValue(cacheEntry, "Fetch Count");
+
+    return cache;
+  },
+
+  getBlockingEndTime: function (file) {
+    if (file.resolveStarted && file.connectStarted) {
+      return file.resolvingTime;
+    }
+
+    if (file.connectStarted) {
+      return file.connectingTime;
+    }
+
+    if (file.sendStarted) {
+      return file.sendingTime;
+    }
+
+    return (file.sendingTime > file.startTime) ?
+      file.sendingTime : file.waitingForTime;
+  },
+
+  // RDP Helpers
+
+  fetchData: function (string) {
+    let promise = this._options.getString(string).then(value => {
+      return value;
+    });
+
+    // Building HAR is asynchronous and not done till all
+    // collected promises are resolved.
+    this.promises.push(promise);
+
+    return promise;
+  }
+};
+
+// Helpers
+
+/**
+ * Find specified value within an array of name-value pairs
+ * (used for headers, cookies and cache entries)
+ */
+function findValue(arr, name) {
+  if (!arr) {
+    return "";
+  }
+
+  name = name.toLowerCase();
+  let result = arr.find(entry => entry.name.toLowerCase() == name);
+  return result ? result.value : "";
+}
+
+/**
+ * Generate HAR representation of a date.
+ * (YYYY-MM-DDThh:mm:ss.sTZD, e.g. 2009-07-24T19:20:30.45+01:00)
+ * See also HAR Schema: http://janodvarko.cz/har/viewer/
+ *
+ * Note: it would be great if we could utilize Date.toJSON(), but
+ * it doesn't return proper time zone offset.
+ *
+ * An example:
+ * This helper returns:    2015-05-29T16:10:30.424+02:00
+ * Date.toJSON() returns:  2015-05-29T14:10:30.424Z
+ *
+ * @param date {Date} The date object we want to convert.
+ */
+function dateToJSON(date) {
+  function f(n, c) {
+    if (!c) {
+      c = 2;
+    }
+    let s = new String(n);
+    while (s.length < c) {
+      s = "0" + s;
+    }
+    return s;
+  }
+
+  let result = date.getFullYear() + "-" +
+    f(date.getMonth() + 1) + "-" +
+    f(date.getDate()) + "T" +
+    f(date.getHours()) + ":" +
+    f(date.getMinutes()) + ":" +
+    f(date.getSeconds()) + "." +
+    f(date.getMilliseconds(), 3);
+
+  let offset = date.getTimezoneOffset();
+  let positive = offset > 0;
+
+  // Convert to positive number before using Math.floor (see issue 5512)
+  offset = Math.abs(offset);
+  let offsetHours = Math.floor(offset / 60);
+  let offsetMinutes = Math.floor(offset % 60);
+  let prettyOffset = (positive > 0 ? "-" : "+") + f(offsetHours) +
+    ":" + f(offsetMinutes);
+
+  return result + prettyOffset;
+}
+
+// Exports from this module
+exports.HarBuilder = HarBuilder;
diff --git a/devtools/client/netmonitor/har/har-collector.js b/devtools/client/netmonitor/har/har-collector.js
new file mode 100644
index 000000000..e3c510756
--- /dev/null
+++ b/devtools/client/netmonitor/har/har-collector.js
@@ -0,0 +1,462 @@
+/* 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 { defer, all } = require("promise");
+const { makeInfallible } = require("devtools/shared/DevToolsUtils");
+const Services = require("Services");
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log: function (...args) {
+  }
+};
+
+/**
+ * This object is responsible for collecting data related to all
+ * HTTP requests executed by the page (including inner iframes).
+ */
+function HarCollector(options) {
+  this.webConsoleClient = options.webConsoleClient;
+  this.debuggerClient = options.debuggerClient;
+
+  this.onNetworkEvent = this.onNetworkEvent.bind(this);
+  this.onNetworkEventUpdate = this.onNetworkEventUpdate.bind(this);
+  this.onRequestHeaders = this.onRequestHeaders.bind(this);
+  this.onRequestCookies = this.onRequestCookies.bind(this);
+  this.onRequestPostData = this.onRequestPostData.bind(this);
+  this.onResponseHeaders = this.onResponseHeaders.bind(this);
+  this.onResponseCookies = this.onResponseCookies.bind(this);
+  this.onResponseContent = this.onResponseContent.bind(this);
+  this.onEventTimings = this.onEventTimings.bind(this);
+
+  this.onPageLoadTimeout = this.onPageLoadTimeout.bind(this);
+
+  this.clear();
+}
+
+HarCollector.prototype = {
+  // Connection
+
+  start: function () {
+    this.debuggerClient.addListener("networkEvent", this.onNetworkEvent);
+    this.debuggerClient.addListener("networkEventUpdate",
+      this.onNetworkEventUpdate);
+  },
+
+  stop: function () {
+    this.debuggerClient.removeListener("networkEvent", this.onNetworkEvent);
+    this.debuggerClient.removeListener("networkEventUpdate",
+      this.onNetworkEventUpdate);
+  },
+
+  clear: function () {
+    // Any pending requests events will be ignored (they turn
+    // into zombies, since not present in the files array).
+    this.files = new Map();
+    this.items = [];
+    this.firstRequestStart = -1;
+    this.lastRequestStart = -1;
+    this.requests = [];
+  },
+
+  waitForHarLoad: function () {
+    // There should be yet another timeout e.g.:
+    // 'devtools.netmonitor.har.pageLoadTimeout'
+    // that should force export even if page isn't fully loaded.
+    let deferred = defer();
+    this.waitForResponses().then(() => {
+      trace.log("HarCollector.waitForHarLoad; DONE HAR loaded!");
+      deferred.resolve(this);
+    });
+
+    return deferred.promise;
+  },
+
+  waitForResponses: function () {
+    trace.log("HarCollector.waitForResponses; " + this.requests.length);
+
+    // All requests for additional data must be received to have complete
+    // HTTP info to generate the result HAR file. So, wait for all current
+    // promises. Note that new promises (requests) can be generated during the
+    // process of HTTP data collection.
+    return waitForAll(this.requests).then(() => {
+      // All responses are received from the backend now. We yet need to
+      // wait for a little while to see if a new request appears. If yes,
+      // lets's start gathering HTTP data again. If no, we can declare
+      // the page loaded.
+      // If some new requests appears in the meantime the promise will
+      // be rejected and we need to wait for responses all over again.
+      return this.waitForTimeout().then(() => {
+        // Page loaded!
+      }, () => {
+        trace.log("HarCollector.waitForResponses; NEW requests " +
+          "appeared during page timeout!");
+
+        // New requests executed, let's wait again.
+        return this.waitForResponses();
+      });
+    });
+  },
+
+  // Page Loaded Timeout
+
+  /**
+   * The page is loaded when there are no new requests within given period
+   * of time. The time is set in preferences:
+   * 'devtools.netmonitor.har.pageLoadedTimeout'
+   */
+  waitForTimeout: function () {
+    // The auto-export is not done if the timeout is set to zero (or less).
+    // This is useful in cases where the export is done manually through
+    // API exposed to the content.
+    let timeout = Services.prefs.getIntPref(
+      "devtools.netmonitor.har.pageLoadedTimeout");
+
+    trace.log("HarCollector.waitForTimeout; " + timeout);
+
+    this.pageLoadDeferred = defer();
+
+    if (timeout <= 0) {
+      this.pageLoadDeferred.resolve();
+      return this.pageLoadDeferred.promise;
+    }
+
+    this.pageLoadTimeout = setTimeout(this.onPageLoadTimeout, timeout);
+
+    return this.pageLoadDeferred.promise;
+  },
+
+  onPageLoadTimeout: function () {
+    trace.log("HarCollector.onPageLoadTimeout;");
+
+    // Ha, page has been loaded. Resolve the final timeout promise.
+    this.pageLoadDeferred.resolve();
+  },
+
+  resetPageLoadTimeout: function () {
+    // Remove the current timeout.
+    if (this.pageLoadTimeout) {
+      trace.log("HarCollector.resetPageLoadTimeout;");
+
+      clearTimeout(this.pageLoadTimeout);
+      this.pageLoadTimeout = null;
+    }
+
+    // Reject the current page load promise
+    if (this.pageLoadDeferred) {
+      this.pageLoadDeferred.reject();
+      this.pageLoadDeferred = null;
+    }
+  },
+
+  // Collected Data
+
+  getFile: function (actorId) {
+    return this.files.get(actorId);
+  },
+
+  getItems: function () {
+    return this.items;
+  },
+
+  // Event Handlers
+
+  onNetworkEvent: function (type, packet) {
+    // Skip events from different console actors.
+    if (packet.from != this.webConsoleClient.actor) {
+      return;
+    }
+
+    trace.log("HarCollector.onNetworkEvent; " + type, packet);
+
+    let { actor, startedDateTime, method, url, isXHR } = packet.eventActor;
+    let startTime = Date.parse(startedDateTime);
+
+    if (this.firstRequestStart == -1) {
+      this.firstRequestStart = startTime;
+    }
+
+    if (this.lastRequestEnd < startTime) {
+      this.lastRequestEnd = startTime;
+    }
+
+    let file = this.getFile(actor);
+    if (file) {
+      console.error("HarCollector.onNetworkEvent; ERROR " +
+                    "existing file conflict!");
+      return;
+    }
+
+    file = {
+      startedDeltaMillis: startTime - this.firstRequestStart,
+      startedMillis: startTime,
+      method: method,
+      url: url,
+      isXHR: isXHR
+    };
+
+    this.files.set(actor, file);
+
+    // Mimic the Net panel data structure
+    this.items.push({
+      attachment: file
+    });
+  },
+
+  onNetworkEventUpdate: function (type, packet) {
+    let actor = packet.from;
+
+    // Skip events from unknown actors (not in the list).
+    // It can happen when there are zombie requests received after
+    // the target is closed or multiple tabs are attached through
+    // one connection (one DebuggerClient object).
+    let file = this.getFile(packet.from);
+    if (!file) {
+      return;
+    }
+
+    trace.log("HarCollector.onNetworkEventUpdate; " +
+      packet.updateType, packet);
+
+    let includeResponseBodies = Services.prefs.getBoolPref(
+      "devtools.netmonitor.har.includeResponseBodies");
+
+    let request;
+    switch (packet.updateType) {
+      case "requestHeaders":
+        request = this.getData(actor, "getRequestHeaders",
+          this.onRequestHeaders);
+        break;
+      case "requestCookies":
+        request = this.getData(actor, "getRequestCookies",
+          this.onRequestCookies);
+        break;
+      case "requestPostData":
+        request = this.getData(actor, "getRequestPostData",
+          this.onRequestPostData);
+        break;
+      case "responseHeaders":
+        request = this.getData(actor, "getResponseHeaders",
+          this.onResponseHeaders);
+        break;
+      case "responseCookies":
+        request = this.getData(actor, "getResponseCookies",
+          this.onResponseCookies);
+        break;
+      case "responseStart":
+        file.httpVersion = packet.response.httpVersion;
+        file.status = packet.response.status;
+        file.statusText = packet.response.statusText;
+        break;
+      case "responseContent":
+        file.contentSize = packet.contentSize;
+        file.mimeType = packet.mimeType;
+        file.transferredSize = packet.transferredSize;
+
+        if (includeResponseBodies) {
+          request = this.getData(actor, "getResponseContent",
+            this.onResponseContent);
+        }
+        break;
+      case "eventTimings":
+        request = this.getData(actor, "getEventTimings",
+          this.onEventTimings);
+        break;
+    }
+
+    if (request) {
+      this.requests.push(request);
+    }
+
+    this.resetPageLoadTimeout();
+  },
+
+  getData: function (actor, method, callback) {
+    let deferred = defer();
+
+    if (!this.webConsoleClient[method]) {
+      console.error("HarCollector.getData; ERROR " +
+                    "Unknown method!");
+      return deferred.resolve();
+    }
+
+    let file = this.getFile(actor);
+
+    trace.log("HarCollector.getData; REQUEST " + method +
+      ", " + file.url, file);
+
+    this.webConsoleClient[method](actor, response => {
+      trace.log("HarCollector.getData; RESPONSE " + method +
+        ", " + file.url, response);
+
+      callback(response);
+      deferred.resolve(response);
+    });
+
+    return deferred.promise;
+  },
+
+  /**
+   * Handles additional information received for a "requestHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestHeaders: function (response) {
+    let file = this.getFile(response.from);
+    file.requestHeaders = response;
+
+    this.getLongHeaders(response.headers);
+  },
+
+  /**
+   * Handles additional information received for a "requestCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestCookies: function (response) {
+    let file = this.getFile(response.from);
+    file.requestCookies = response;
+
+    this.getLongHeaders(response.cookies);
+  },
+
+  /**
+   * Handles additional information received for a "requestPostData" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestPostData: function (response) {
+    trace.log("HarCollector.onRequestPostData;", response);
+
+    let file = this.getFile(response.from);
+    file.requestPostData = response;
+
+    // Resolve long string
+    let text = response.postData.text;
+    if (typeof text == "object") {
+      this.getString(text).then(value => {
+        response.postData.text = value;
+      });
+    }
+  },
+
+  /**
+   * Handles additional information received for a "responseHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseHeaders: function (response) {
+    let file = this.getFile(response.from);
+    file.responseHeaders = response;
+
+    this.getLongHeaders(response.headers);
+  },
+
+  /**
+   * Handles additional information received for a "responseCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseCookies: function (response) {
+    let file = this.getFile(response.from);
+    file.responseCookies = response;
+
+    this.getLongHeaders(response.cookies);
+  },
+
+  /**
+   * Handles additional information received for a "responseContent" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseContent: function (response) {
+    let file = this.getFile(response.from);
+    file.responseContent = response;
+
+    // Resolve long string
+    let text = response.content.text;
+    if (typeof text == "object") {
+      this.getString(text).then(value => {
+        response.content.text = value;
+      });
+    }
+  },
+
+  /**
+   * Handles additional information received for a "eventTimings" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onEventTimings: function (response) {
+    let file = this.getFile(response.from);
+    file.eventTimings = response;
+
+    let totalTime = response.totalTime;
+    file.totalTime = totalTime;
+    file.endedMillis = file.startedMillis + totalTime;
+  },
+
+  // Helpers
+
+  getLongHeaders: makeInfallible(function (headers) {
+    for (let header of headers) {
+      if (typeof header.value == "object") {
+        this.getString(header.value).then(value => {
+          header.value = value;
+        });
+      }
+    }
+  }),
+
+  /**
+   * Fetches the full text of a string.
+   *
+   * @param object | string stringGrip
+   *        The long string grip containing the corresponding actor.
+   *        If you pass in a plain string (by accident or because you're lazy),
+   *        then a promise of the same string is simply returned.
+   * @return object Promise
+   *         A promise that is resolved when the full string contents
+   *         are available, or rejected if something goes wrong.
+   */
+  getString: function (stringGrip) {
+    let promise = this.webConsoleClient.getString(stringGrip);
+    this.requests.push(promise);
+    return promise;
+  }
+};
+
+// Helpers
+
+/**
+ * Helper function that allows to wait for array of promises. It is
+ * possible to dynamically add new promises in the provided array.
+ * The function will wait even for the newly added promises.
+ * (this isn't possible with the default Promise.all);
+ */
+function waitForAll(promises) {
+  // Remove all from the original array and get clone of it.
+  let clone = promises.splice(0, promises.length);
+
+  // Wait for all promises in the given array.
+  return all(clone).then(() => {
+    // If there are new promises (in the original array)
+    // to wait for - chain them!
+    if (promises.length) {
+      return waitForAll(promises);
+    }
+    return undefined;
+  });
+}
+
+// Exports from this module
+exports.HarCollector = HarCollector;
diff --git a/devtools/client/netmonitor/har/har-exporter.js b/devtools/client/netmonitor/har/har-exporter.js
new file mode 100644
index 000000000..972cf87dc
--- /dev/null
+++ b/devtools/client/netmonitor/har/har-exporter.js
@@ -0,0 +1,187 @@
+/* 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";
+/* eslint-disable mozilla/reject-some-requires */
+const { Cc, Ci } = require("chrome");
+const Services = require("Services");
+/* eslint-disable mozilla/reject-some-requires */
+const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
+const { resolve } = require("promise");
+const { HarUtils } = require("./har-utils.js");
+const { HarBuilder } = require("./har-builder.js");
+
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function () {
+  return Cc["@mozilla.org/widget/clipboardhelper;1"]
+    .getService(Ci.nsIClipboardHelper);
+});
+
+var uid = 1;
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log: function (...args) {
+  }
+};
+
+/**
+ * This object represents the main public API designed to access
+ * Network export logic. Clients, such as the Network panel itself,
+ * should use this API to export collected HTTP data from the panel.
+ */
+const HarExporter = {
+  // Public API
+
+  /**
+   * Save collected HTTP data from the Network panel into HAR file.
+   *
+   * @param Object options
+   *        Configuration object
+   *
+   * The following options are supported:
+   *
+   * - includeResponseBodies {Boolean}: If set to true, HTTP response bodies
+   *   are also included in the HAR file (can produce significantly bigger
+   *   amount of data).
+   *
+   * - items {Array}: List of Network requests to be exported. It is possible
+   *   to use directly: NetMonitorView.RequestsMenu.items
+   *
+   * - jsonp {Boolean}: If set to true the export format is HARP (support
+   *   for JSONP syntax).
+   *
+   * - jsonpCallback {String}: Default name of JSONP callback (used for
+   *   HARP format).
+   *
+   * - compress {Boolean}: If set to true the final HAR file is zipped.
+   *   This represents great disk-space optimization.
+   *
+   * - defaultFileName {String}: Default name of the target HAR file.
+   *   The default file name supports formatters, see:
+   *   https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat
+   *
+   * - defaultLogDir {String}: Default log directory for automated logs.
+   *
+   * - id {String}: ID of the page (used in the HAR file).
+   *
+   * - title {String}: Title of the page (used in the HAR file).
+   *
+   * - forceExport {Boolean}: The result HAR file is created even if
+   *   there are no HTTP entries.
+   */
+  save: function (options) {
+    // Set default options related to save operation.
+    options.defaultFileName = Services.prefs.getCharPref(
+      "devtools.netmonitor.har.defaultFileName");
+    options.compress = Services.prefs.getBoolPref(
+      "devtools.netmonitor.har.compress");
+
+    // Get target file for exported data. Bail out, if the user
+    // presses cancel.
+    let file = HarUtils.getTargetFile(options.defaultFileName,
+      options.jsonp, options.compress);
+
+    if (!file) {
+      return resolve();
+    }
+
+    trace.log("HarExporter.save; " + options.defaultFileName, options);
+
+    return this.fetchHarData(options).then(jsonString => {
+      if (!HarUtils.saveToFile(file, jsonString, options.compress)) {
+        let msg = "Failed to save HAR file at: " + options.defaultFileName;
+        console.error(msg);
+      }
+      return jsonString;
+    });
+  },
+
+  /**
+   * Copy HAR string into the clipboard.
+   *
+   * @param Object options
+   *        Configuration object, see save() for detailed description.
+   */
+  copy: function (options) {
+    return this.fetchHarData(options).then(jsonString => {
+      clipboardHelper.copyString(jsonString);
+      return jsonString;
+    });
+  },
+
+  // Helpers
+
+  fetchHarData: function (options) {
+    // Generate page ID
+    options.id = options.id || uid++;
+
+    // Set default generic HAR export options.
+    options.jsonp = options.jsonp ||
+      Services.prefs.getBoolPref("devtools.netmonitor.har.jsonp");
+    options.includeResponseBodies = options.includeResponseBodies ||
+      Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.includeResponseBodies");
+    options.jsonpCallback = options.jsonpCallback ||
+      Services.prefs.getCharPref("devtools.netmonitor.har.jsonpCallback");
+    options.forceExport = options.forceExport ||
+      Services.prefs.getBoolPref("devtools.netmonitor.har.forceExport");
+
+    // Build HAR object.
+    return this.buildHarData(options).then(har => {
+      // Do not export an empty HAR file, unless the user
+      // explicitly says so (using the forceExport option).
+      if (!har.log.entries.length && !options.forceExport) {
+        return resolve();
+      }
+
+      let jsonString = this.stringify(har);
+      if (!jsonString) {
+        return resolve();
+      }
+
+      // If JSONP is wanted, wrap the string in a function call
+      if (options.jsonp) {
+        // This callback name is also used in HAR Viewer by default.
+        // http://www.softwareishard.com/har/viewer/
+        let callbackName = options.jsonpCallback || "onInputData";
+        jsonString = callbackName + "(" + jsonString + ");";
+      }
+
+      return jsonString;
+    }).then(null, function onError(err) {
+      console.error(err);
+    });
+  },
+
+  /**
+   * Build HAR data object. This object contains all HTTP data
+   * collected by the Network panel. The process is asynchronous
+   * since it can involve additional RDP communication (e.g. resolving
+   * long strings).
+   */
+  buildHarData: function (options) {
+    // Build HAR object from collected data.
+    let builder = new HarBuilder(options);
+    return builder.build();
+  },
+
+  /**
+   * Build JSON string from the HAR data object.
+   */
+  stringify: function (har) {
+    if (!har) {
+      return null;
+    }
+
+    try {
+      return JSON.stringify(har, null, "  ");
+    } catch (err) {
+      console.error(err);
+      return undefined;
+    }
+  },
+};
+
+// Exports from this module
+exports.HarExporter = HarExporter;
diff --git a/devtools/client/netmonitor/har/har-utils.js b/devtools/client/netmonitor/har/har-utils.js
new file mode 100644
index 000000000..aa9bd3811
--- /dev/null
+++ b/devtools/client/netmonitor/har/har-utils.js
@@ -0,0 +1,189 @@
+/* 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";
+/* eslint-disable mozilla/reject-some-requires */
+const { Ci, Cc, CC } = require("chrome");
+/* eslint-disable mozilla/reject-some-requires */
+const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyGetter(this, "dirService", function () {
+  return Cc["@mozilla.org/file/directory_service;1"]
+    .getService(Ci.nsIProperties);
+});
+
+XPCOMUtils.defineLazyGetter(this, "ZipWriter", function () {
+  return CC("@mozilla.org/zipwriter;1", "nsIZipWriter");
+});
+
+XPCOMUtils.defineLazyGetter(this, "LocalFile", function () {
+  return new CC("@mozilla.org/file/local;1", "nsILocalFile", "initWithPath");
+});
+
+XPCOMUtils.defineLazyGetter(this, "getMostRecentBrowserWindow", function () {
+  return require("sdk/window/utils").getMostRecentBrowserWindow;
+});
+
+const nsIFilePicker = Ci.nsIFilePicker;
+
+const OPEN_FLAGS = {
+  RDONLY: parseInt("0x01", 16),
+  WRONLY: parseInt("0x02", 16),
+  CREATE_FILE: parseInt("0x08", 16),
+  APPEND: parseInt("0x10", 16),
+  TRUNCATE: parseInt("0x20", 16),
+  EXCL: parseInt("0x80", 16)
+};
+
+/**
+ * Helper API for HAR export features.
+ */
+var HarUtils = {
+  /**
+   * Open File Save As dialog and let the user pick the proper file
+   * location for generated HAR log.
+   */
+  getTargetFile: function (fileName, jsonp, compress) {
+    let browser = getMostRecentBrowserWindow();
+
+    let fp = Cc["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
+    fp.init(browser, null, nsIFilePicker.modeSave);
+    fp.appendFilter(
+      "HTTP Archive Files", "*.har; *.harp; *.json; *.jsonp; *.zip");
+    fp.appendFilters(nsIFilePicker.filterAll | nsIFilePicker.filterText);
+    fp.filterIndex = 1;
+
+    fp.defaultString = this.getHarFileName(fileName, jsonp, compress);
+
+    let rv = fp.show();
+    if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) {
+      return fp.file;
+    }
+
+    return null;
+  },
+
+  getHarFileName: function (defaultFileName, jsonp, compress) {
+    let extension = jsonp ? ".harp" : ".har";
+
+    // Read more about toLocaleFormat & format string.
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleFormat
+    let now = new Date();
+    let name = now.toLocaleFormat(defaultFileName);
+    name = name.replace(/\:/gm, "-", "");
+    name = name.replace(/\//gm, "_", "");
+
+    let fileName = name + extension;
+
+    // Default file extension is zip if compressing is on.
+    if (compress) {
+      fileName += ".zip";
+    }
+
+    return fileName;
+  },
+
+  /**
+   * Save HAR string into a given file. The file might be compressed
+   * if specified in the options.
+   *
+   * @param {File} file Target file where the HAR string (JSON)
+   * should be stored.
+   * @param {String} jsonString HAR data (JSON or JSONP)
+   * @param {Boolean} compress The result file is zipped if set to true.
+   */
+  saveToFile: function (file, jsonString, compress) {
+    let openFlags = OPEN_FLAGS.WRONLY | OPEN_FLAGS.CREATE_FILE |
+      OPEN_FLAGS.TRUNCATE;
+
+    try {
+      let foStream = Cc["@mozilla.org/network/file-output-stream;1"]
+        .createInstance(Ci.nsIFileOutputStream);
+
+      let permFlags = parseInt("0666", 8);
+      foStream.init(file, openFlags, permFlags, 0);
+
+      let convertor = Cc["@mozilla.org/intl/converter-output-stream;1"]
+        .createInstance(Ci.nsIConverterOutputStream);
+      convertor.init(foStream, "UTF-8", 0, 0);
+
+      // The entire jsonString can be huge so, write the data in chunks.
+      let chunkLength = 1024 * 1024;
+      for (let i = 0; i <= jsonString.length; i++) {
+        let data = jsonString.substr(i, chunkLength + 1);
+        if (data) {
+          convertor.writeString(data);
+        }
+
+        i = i + chunkLength;
+      }
+
+      // this closes foStream
+      convertor.close();
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+
+    // If no compressing then bail out.
+    if (!compress) {
+      return true;
+    }
+
+    // Remember name of the original file, it'll be replaced by a zip file.
+    let originalFilePath = file.path;
+    let originalFileName = file.leafName;
+
+    try {
+      // Rename using unique name (the file is going to be removed).
+      file.moveTo(null, "temp" + (new Date()).getTime() + "temphar");
+
+      // Create compressed file with the original file path name.
+      let zipFile = Cc["@mozilla.org/file/local;1"]
+        .createInstance(Ci.nsILocalFile);
+      zipFile.initWithPath(originalFilePath);
+
+      // The file within the zipped file doesn't use .zip extension.
+      let fileName = originalFileName;
+      if (fileName.indexOf(".zip") == fileName.length - 4) {
+        fileName = fileName.substr(0, fileName.indexOf(".zip"));
+      }
+
+      let zip = new ZipWriter();
+      zip.open(zipFile, openFlags);
+      zip.addEntryFile(fileName, Ci.nsIZipWriter.COMPRESSION_DEFAULT,
+        file, false);
+      zip.close();
+
+      // Remove the original file (now zipped).
+      file.remove(true);
+      return true;
+    } catch (err) {
+      console.error(err);
+
+      // Something went wrong (disk space?) rename the original file back.
+      file.moveTo(null, originalFileName);
+    }
+
+    return false;
+  },
+
+  getLocalDirectory: function (path) {
+    let dir;
+
+    if (!path) {
+      dir = dirService.get("ProfD", Ci.nsILocalFile);
+      dir.append("har");
+      dir.append("logs");
+    } else {
+      dir = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);
+      dir.initWithPath(path);
+    }
+
+    return dir;
+  },
+};
+
+// Exports from this module
+exports.HarUtils = HarUtils;
diff --git a/devtools/client/netmonitor/har/moz.build b/devtools/client/netmonitor/har/moz.build
new file mode 100644
index 000000000..f6dd4aff8
--- /dev/null
+++ b/devtools/client/netmonitor/har/moz.build
@@ -0,0 +1,15 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'har-automation.js',
+    'har-builder.js',
+    'har-collector.js',
+    'har-exporter.js',
+    'har-utils.js',
+    'toolbox-overlay.js',
+)
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
diff --git a/devtools/client/netmonitor/har/test/.eslintrc.js b/devtools/client/netmonitor/har/test/.eslintrc.js
new file mode 100644
index 000000000..698ae9181
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the shared list of defined globals for mochitests.
+  "extends": "../../../../.eslintrc.mochitests.js"
+};
diff --git a/devtools/client/netmonitor/har/test/browser.ini b/devtools/client/netmonitor/har/test/browser.ini
new file mode 100644
index 000000000..14d4f846f
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/browser.ini
@@ -0,0 +1,12 @@
+[DEFAULT]
+tags = devtools
+subsuite = clipboard
+support-files =
+  head.js
+  html_har_post-data-test-page.html
+  !/devtools/client/netmonitor/test/head.js
+  !/devtools/client/netmonitor/test/html_simple-test-page.html
+
+[browser_net_har_copy_all_as_har.js]
+[browser_net_har_post_data.js]
+[browser_net_har_throttle_upload.js]
diff --git a/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js b/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js
new file mode 100644
index 000000000..10df7aba6
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/browser_net_har_copy_all_as_har.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Basic tests for exporting Network panel content into HAR format.
+ */
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  yield RequestsMenu.contextMenu.copyAllAsHar();
+
+  let jsonString = SpecialPowers.getClipboardData("text/unicode");
+  let har = JSON.parse(jsonString);
+
+  // Check out HAR log
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.creator.name, "Firefox", "The creator field must be set");
+  is(har.log.browser.name, "Firefox", "The browser field must be set");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  let entry = har.log.entries[0];
+  is(entry.request.method, "GET", "Check the method");
+  is(entry.request.url, SIMPLE_URL, "Check the URL");
+  is(entry.request.headers.length, 9, "Check number of request headers");
+  is(entry.response.status, 200, "Check response status");
+  is(entry.response.statusText, "OK", "Check response status text");
+  is(entry.response.headers.length, 6, "Check number of response headers");
+  is(entry.response.content.mimeType, // eslint-disable-line
+    "text/html", "Check response content type"); // eslint-disable-line
+  isnot(entry.response.content.text, undefined, // eslint-disable-line
+    "Check response body");
+  isnot(entry.timings, undefined, "Check timings");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/har/test/browser_net_har_post_data.js b/devtools/client/netmonitor/har/test/browser_net_har_post_data.js
new file mode 100644
index 000000000..b3d611ca7
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/browser_net_har_post_data.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests for exporting POST data into HAR format.
+ */
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_post-data-test-page.html");
+
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  // Execute one POST request on the page and wait till its done.
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.executeTest();
+  });
+  yield wait;
+
+  // Copy HAR into the clipboard (asynchronous).
+  let jsonString = yield RequestsMenu.contextMenu.copyAllAsHar();
+  let har = JSON.parse(jsonString);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  let entry = har.log.entries[0];
+  is(entry.request.postData.mimeType, "application/json",
+    "Check post data content type");
+  is(entry.request.postData.text, "{'first': 'John', 'last': 'Doe'}",
+    "Check post data payload");
+
+  // Clean up
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/har/test/browser_net_har_throttle_upload.js b/devtools/client/netmonitor/har/test/browser_net_har_throttle_upload.js
new file mode 100644
index 000000000..c0e424172
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/browser_net_har_throttle_upload.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test timing of upload when throttling.
+
+"use strict";
+
+add_task(function* () {
+  yield throttleUploadTest(true);
+  yield throttleUploadTest(false);
+});
+
+function* throttleUploadTest(actuallyThrottle) {
+  let { tab, monitor } = yield initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_post-data-test-page.html");
+
+  info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  const size = 4096;
+  const uploadSize = actuallyThrottle ? size / 3 : 0;
+
+  const request = {
+    "NetworkMonitor.throttleData": {
+      roundTripTimeMean: 0,
+      roundTripTimeMax: 0,
+      downloadBPSMean: 200000,
+      downloadBPSMax: 200000,
+      uploadBPSMean: uploadSize,
+      uploadBPSMax: uploadSize,
+    },
+  };
+  let client = monitor._controller.webConsoleClient;
+
+  info("sending throttle request");
+  let deferred = promise.defer();
+  client.setPreferences(request, response => {
+    deferred.resolve(response);
+  });
+  yield deferred.promise;
+
+  RequestsMenu.lazyUpdate = false;
+
+  // Execute one POST request on the page and wait till its done.
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, { size }, function* (args) {
+    content.wrappedJSObject.executeTest2(args.size);
+  });
+  yield wait;
+
+  // Copy HAR into the clipboard (asynchronous).
+  let jsonString = yield RequestsMenu.contextMenu.copyAllAsHar();
+  let har = JSON.parse(jsonString);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  let entry = har.log.entries[0];
+  is(entry.request.postData.text, "x".repeat(size),
+     "Check post data payload");
+
+  const wasTwoSeconds = entry.timings.send >= 2000;
+  if (actuallyThrottle) {
+    ok(wasTwoSeconds, "upload should have taken more than 2 seconds");
+  } else {
+    ok(!wasTwoSeconds, "upload should not have taken more than 2 seconds");
+  }
+
+  // Clean up
+  yield teardown(monitor);
+}
diff --git a/devtools/client/netmonitor/har/test/head.js b/devtools/client/netmonitor/har/test/head.js
new file mode 100644
index 000000000..22eb87fe6
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/head.js
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
+/* import-globals-from ../../test/head.js */
+
+// Load the NetMonitor head.js file to share its API.
+var netMonitorHead = "chrome://mochitests/content/browser/devtools/client/netmonitor/test/head.js";
+Services.scriptloader.loadSubScript(netMonitorHead, this);
+
+// Directory with HAR related test files.
+const HAR_EXAMPLE_URL = "http://example.com/browser/devtools/client/netmonitor/har/test/";
diff --git a/devtools/client/netmonitor/har/test/html_har_post-data-test-page.html b/devtools/client/netmonitor/har/test/html_har_post-data-test-page.html
new file mode 100644
index 000000000..816dad08e
--- /dev/null
+++ b/devtools/client/netmonitor/har/test/html_har_post-data-test-page.html
@@ -0,0 +1,39 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor Test Page</title>
+  </head>
+
+  <body>
+    <p>HAR POST data test</p>
+
+    <script type="text/javascript">
+      function post(aAddress, aData) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress, true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.send(aData);
+      }
+
+      function executeTest() {
+        var url = "html_har_post-data-test-page.html";
+        var data = "{'first': 'John', 'last': 'Doe'}";
+        post(url, data);
+      }
+
+      function executeTest2(size) {
+        var url = "html_har_post-data-test-page.html";
+        var data = "x".repeat(size);
+        post(url, data);
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/har/toolbox-overlay.js b/devtools/client/netmonitor/har/toolbox-overlay.js
new file mode 100644
index 000000000..4ba5d08a9
--- /dev/null
+++ b/devtools/client/netmonitor/har/toolbox-overlay.js
@@ -0,0 +1,85 @@
+/* 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 Services = require("Services");
+
+loader.lazyRequireGetter(this, "HarAutomation", "devtools/client/netmonitor/har/har-automation", true);
+
+// Map of all created overlays. There is always one instance of
+// an overlay per Toolbox instance (i.e. one per browser tab).
+const overlays = new WeakMap();
+
+/**
+ * This object is responsible for initialization and cleanup for HAR
+ * export feature. It represents an overlay for the Toolbox
+ * following the same life time by listening to its events.
+ *
+ * HAR APIs are designed for integration with tools (such as Selenium)
+ * that automates the browser. Primarily, it is for automating web apps
+ * and getting HAR file for every loaded page.
+ */
+function ToolboxOverlay(toolbox) {
+  this.toolbox = toolbox;
+
+  this.onInit = this.onInit.bind(this);
+  this.onDestroy = this.onDestroy.bind(this);
+
+  this.toolbox.on("ready", this.onInit);
+  this.toolbox.on("destroy", this.onDestroy);
+}
+
+ToolboxOverlay.prototype = {
+  /**
+   * Executed when the toolbox is ready.
+   */
+  onInit: function () {
+    let autoExport = Services.prefs.getBoolPref(
+      "devtools.netmonitor.har.enableAutoExportToFile");
+
+    if (!autoExport) {
+      return;
+    }
+
+    this.initAutomation();
+  },
+
+  /**
+   * Executed when the toolbox is destroyed.
+   */
+  onDestroy: function (eventId, toolbox) {
+    this.destroyAutomation();
+  },
+
+  // Automation
+
+  initAutomation: function () {
+    this.automation = new HarAutomation(this.toolbox);
+  },
+
+  destroyAutomation: function () {
+    if (this.automation) {
+      this.automation.destroy();
+    }
+  },
+};
+
+// Registration
+function register(toolbox) {
+  if (overlays.has(toolbox)) {
+    throw Error("There is an existing overlay for the toolbox");
+  }
+
+  // Instantiate an overlay for the toolbox.
+  let overlay = new ToolboxOverlay(toolbox);
+  overlays.set(toolbox, overlay);
+}
+
+function get(toolbox) {
+  return overlays.get(toolbox);
+}
+
+// Exports from this module
+exports.register = register;
+exports.get = get;
diff --git a/devtools/client/netmonitor/l10n.js b/devtools/client/netmonitor/l10n.js
new file mode 100644
index 000000000..3375483f0
--- /dev/null
+++ b/devtools/client/netmonitor/l10n.js
@@ -0,0 +1,9 @@
+"use strict";
+
+const {LocalizationHelper} = require("devtools/shared/l10n");
+
+const NET_STRINGS_URI = "devtools/client/locales/netmonitor.properties";
+const WEBCONSOLE_STRINGS_URI = "devtools/client/locales/webconsole.properties";
+
+exports.L10N = new LocalizationHelper(NET_STRINGS_URI);
+exports.WEBCONSOLE_L10N = new LocalizationHelper(WEBCONSOLE_STRINGS_URI);
diff --git a/devtools/client/netmonitor/moz.build b/devtools/client/netmonitor/moz.build
new file mode 100644
index 000000000..4b34b093b
--- /dev/null
+++ b/devtools/client/netmonitor/moz.build
@@ -0,0 +1,31 @@
+# vim: set filetype=python:
+# 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/.
+
+DIRS += [
+    'actions',
+    'components',
+    'har',
+    'reducers',
+    'selectors'
+]
+
+DevToolsModules(
+    'constants.js',
+    'custom-request-view.js',
+    'events.js',
+    'filter-predicates.js',
+    'l10n.js',
+    'panel.js',
+    'performance-statistics-view.js',
+    'prefs.js',
+    'request-list-context-menu.js',
+    'request-utils.js',
+    'requests-menu-view.js',
+    'sort-predicates.js',
+    'store.js',
+    'toolbar-view.js',
+)
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
diff --git a/devtools/client/netmonitor/netmonitor-controller.js b/devtools/client/netmonitor/netmonitor-controller.js
new file mode 100644
index 000000000..739e174fb
--- /dev/null
+++ b/devtools/client/netmonitor/netmonitor-controller.js
@@ -0,0 +1,816 @@
+/* -*- 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/. */
+/* globals window, document, NetMonitorView, gStore, Actions */
+/* exported loader */
+"use strict";
+
+var { utils: Cu } = Components;
+
+// Descriptions for what this frontend is currently doing.
+const ACTIVITY_TYPE = {
+  // Standing by and handling requests normally.
+  NONE: 0,
+
+  // Forcing the target to reload with cache enabled or disabled.
+  RELOAD: {
+    WITH_CACHE_ENABLED: 1,
+    WITH_CACHE_DISABLED: 2,
+    WITH_CACHE_DEFAULT: 3
+  },
+
+  // Enabling or disabling the cache without triggering a reload.
+  ENABLE_CACHE: 3,
+  DISABLE_CACHE: 4
+};
+
+var BrowserLoaderModule = {};
+Cu.import("resource://devtools/client/shared/browser-loader.js", BrowserLoaderModule);
+var { loader, require } = BrowserLoaderModule.BrowserLoader({
+  baseURI: "resource://devtools/client/netmonitor/",
+  window
+});
+
+const promise = require("promise");
+const Services = require("Services");
+/* eslint-disable mozilla/reject-some-requires */
+const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
+const EventEmitter = require("devtools/shared/event-emitter");
+const Editor = require("devtools/client/sourceeditor/editor");
+const {TimelineFront} = require("devtools/shared/fronts/timeline");
+const {Task} = require("devtools/shared/task");
+const {Prefs} = require("./prefs");
+const {EVENTS} = require("./events");
+const Actions = require("./actions/index");
+
+XPCOMUtils.defineConstant(this, "EVENTS", EVENTS);
+XPCOMUtils.defineConstant(this, "ACTIVITY_TYPE", ACTIVITY_TYPE);
+XPCOMUtils.defineConstant(this, "Editor", Editor);
+XPCOMUtils.defineConstant(this, "Prefs", Prefs);
+
+XPCOMUtils.defineLazyModuleGetter(this, "Chart",
+  "resource://devtools/client/shared/widgets/Chart.jsm");
+
+XPCOMUtils.defineLazyServiceGetter(this, "clipboardHelper",
+  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
+
+Object.defineProperty(this, "NetworkHelper", {
+  get: function () {
+    return require("devtools/shared/webconsole/network-helper");
+  },
+  configurable: true,
+  enumerable: true
+});
+
+/**
+ * Object defining the network monitor controller components.
+ */
+var NetMonitorController = {
+  /**
+   * Initializes the view and connects the monitor client.
+   *
+   * @return object
+   *         A promise that is resolved when the monitor finishes startup.
+   */
+  startupNetMonitor: Task.async(function* () {
+    if (this._startup) {
+      return this._startup.promise;
+    }
+    this._startup = promise.defer();
+    {
+      NetMonitorView.initialize();
+      yield this.connect();
+    }
+    this._startup.resolve();
+    return undefined;
+  }),
+
+  /**
+   * Destroys the view and disconnects the monitor client from the server.
+   *
+   * @return object
+   *         A promise that is resolved when the monitor finishes shutdown.
+   */
+  shutdownNetMonitor: Task.async(function* () {
+    if (this._shutdown) {
+      return this._shutdown.promise;
+    }
+    this._shutdown = promise.defer();
+    {
+      NetMonitorView.destroy();
+      this.TargetEventsHandler.disconnect();
+      this.NetworkEventsHandler.disconnect();
+      yield this.disconnect();
+    }
+    this._shutdown.resolve();
+    return undefined;
+  }),
+
+  /**
+   * Initiates remote or chrome network monitoring based on the current target,
+   * wiring event handlers as necessary. Since the TabTarget will have already
+   * started listening to network requests by now, this is largely
+   * netmonitor-specific initialization.
+   *
+   * @return object
+   *         A promise that is resolved when the monitor finishes connecting.
+   */
+  connect: Task.async(function* () {
+    if (this._connection) {
+      return this._connection.promise;
+    }
+    this._connection = promise.defer();
+
+    // Some actors like AddonActor or RootActor for chrome debugging
+    // aren't actual tabs.
+    if (this._target.isTabActor) {
+      this.tabClient = this._target.activeTab;
+    }
+
+    let connectTimeline = () => {
+      // Don't start up waiting for timeline markers if the server isn't
+      // recent enough to emit the markers we're interested in.
+      if (this._target.getTrait("documentLoadingMarkers")) {
+        this.timelineFront = new TimelineFront(this._target.client,
+          this._target.form);
+        return this.timelineFront.start({ withDocLoadingEvents: true });
+      }
+      return undefined;
+    };
+
+    this.webConsoleClient = this._target.activeConsole;
+    yield connectTimeline();
+
+    this.TargetEventsHandler.connect();
+    this.NetworkEventsHandler.connect();
+
+    window.emit(EVENTS.CONNECTED);
+
+    this._connection.resolve();
+    this._connected = true;
+    return undefined;
+  }),
+
+  /**
+   * Disconnects the debugger client and removes event handlers as necessary.
+   */
+  disconnect: Task.async(function* () {
+    if (this._disconnection) {
+      return this._disconnection.promise;
+    }
+    this._disconnection = promise.defer();
+
+    // Wait for the connection to finish first.
+    if (!this.isConnected()) {
+      yield this._connection.promise;
+    }
+
+    // When debugging local or a remote instance, the connection is closed by
+    // the RemoteTarget. The webconsole actor is stopped on disconnect.
+    this.tabClient = null;
+    this.webConsoleClient = null;
+
+    // The timeline front wasn't initialized and started if the server wasn't
+    // recent enough to emit the markers we were interested in.
+    if (this._target.getTrait("documentLoadingMarkers")) {
+      yield this.timelineFront.destroy();
+      this.timelineFront = null;
+    }
+
+    this._disconnection.resolve();
+    this._connected = false;
+    return undefined;
+  }),
+
+  /**
+   * Checks whether the netmonitor connection is active.
+   * @return boolean
+   */
+  isConnected: function () {
+    return !!this._connected;
+  },
+
+  /**
+   * Gets the activity currently performed by the frontend.
+   * @return number
+   */
+  getCurrentActivity: function () {
+    return this._currentActivity || ACTIVITY_TYPE.NONE;
+  },
+
+  /**
+   * Triggers a specific "activity" to be performed by the frontend.
+   * This can be, for example, triggering reloads or enabling/disabling cache.
+   *
+   * @param number type
+   *        The activity type. See the ACTIVITY_TYPE const.
+   * @return object
+   *         A promise resolved once the activity finishes and the frontend
+   *         is back into "standby" mode.
+   */
+  triggerActivity: function (type) {
+    // Puts the frontend into "standby" (when there's no particular activity).
+    let standBy = () => {
+      this._currentActivity = ACTIVITY_TYPE.NONE;
+    };
+
+    // Waits for a series of "navigation start" and "navigation stop" events.
+    let waitForNavigation = () => {
+      let deferred = promise.defer();
+      this._target.once("will-navigate", () => {
+        this._target.once("navigate", () => {
+          deferred.resolve();
+        });
+      });
+      return deferred.promise;
+    };
+
+    // Reconfigures the tab, optionally triggering a reload.
+    let reconfigureTab = options => {
+      let deferred = promise.defer();
+      this._target.activeTab.reconfigure(options, deferred.resolve);
+      return deferred.promise;
+    };
+
+    // Reconfigures the tab and waits for the target to finish navigating.
+    let reconfigureTabAndWaitForNavigation = options => {
+      options.performReload = true;
+      let navigationFinished = waitForNavigation();
+      return reconfigureTab(options).then(() => navigationFinished);
+    };
+    if (type == ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT) {
+      return reconfigureTabAndWaitForNavigation({}).then(standBy);
+    }
+    if (type == ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED) {
+      this._currentActivity = ACTIVITY_TYPE.ENABLE_CACHE;
+      this._target.once("will-navigate", () => {
+        this._currentActivity = type;
+      });
+      return reconfigureTabAndWaitForNavigation({
+        cacheDisabled: false,
+        performReload: true
+      }).then(standBy);
+    }
+    if (type == ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED) {
+      this._currentActivity = ACTIVITY_TYPE.DISABLE_CACHE;
+      this._target.once("will-navigate", () => {
+        this._currentActivity = type;
+      });
+      return reconfigureTabAndWaitForNavigation({
+        cacheDisabled: true,
+        performReload: true
+      }).then(standBy);
+    }
+    if (type == ACTIVITY_TYPE.ENABLE_CACHE) {
+      this._currentActivity = type;
+      return reconfigureTab({
+        cacheDisabled: false,
+        performReload: false
+      }).then(standBy);
+    }
+    if (type == ACTIVITY_TYPE.DISABLE_CACHE) {
+      this._currentActivity = type;
+      return reconfigureTab({
+        cacheDisabled: true,
+        performReload: false
+      }).then(standBy);
+    }
+    this._currentActivity = ACTIVITY_TYPE.NONE;
+    return promise.reject(new Error("Invalid activity type"));
+  },
+
+  /**
+   * Selects the specified request in the waterfall and opens the details view.
+   *
+   * @param string requestId
+   *        The actor ID of the request to inspect.
+   * @return object
+   *         A promise resolved once the task finishes.
+   */
+  inspectRequest: function (requestId) {
+    // Look for the request in the existing ones or wait for it to appear, if
+    // the network monitor is still loading.
+    let deferred = promise.defer();
+    let request = null;
+    let inspector = function () {
+      let predicate = i => i.value === requestId;
+      request = NetMonitorView.RequestsMenu.getItemForPredicate(predicate);
+      if (!request) {
+        // Reset filters so that the request is visible.
+        gStore.dispatch(Actions.toggleFilterType("all"));
+        request = NetMonitorView.RequestsMenu.getItemForPredicate(predicate);
+      }
+
+      // 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);
+        NetMonitorView.RequestsMenu.selectedItem = request;
+        deferred.resolve();
+      }
+    };
+
+    inspector();
+    if (!request) {
+      window.on(EVENTS.REQUEST_ADDED, inspector);
+    }
+    return deferred.promise;
+  },
+
+  /**
+   * Getter that tells if the server supports sending custom network requests.
+   * @type boolean
+   */
+  get supportsCustomRequest() {
+    return this.webConsoleClient &&
+           (this.webConsoleClient.traits.customNetworkRequest ||
+            !this._target.isApp);
+  },
+
+  /**
+   * Getter that tells if the server includes the transferred (compressed /
+   * encoded) response size.
+   * @type boolean
+   */
+  get supportsTransferredResponseSize() {
+    return this.webConsoleClient &&
+           this.webConsoleClient.traits.transferredResponseSize;
+  },
+
+  /**
+   * Getter that tells if the server can do network performance statistics.
+   * @type boolean
+   */
+  get supportsPerfStats() {
+    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);
+  }
+};
+
+/**
+ * Functions handling target-related lifetime events.
+ */
+function TargetEventsHandler() {
+  this._onTabNavigated = this._onTabNavigated.bind(this);
+  this._onTabDetached = this._onTabDetached.bind(this);
+}
+
+TargetEventsHandler.prototype = {
+  get target() {
+    return NetMonitorController._target;
+  },
+
+  /**
+   * Listen for events emitted by the current tab target.
+   */
+  connect: function () {
+    dumpn("TargetEventsHandler is connecting...");
+    this.target.on("close", this._onTabDetached);
+    this.target.on("navigate", this._onTabNavigated);
+    this.target.on("will-navigate", this._onTabNavigated);
+  },
+
+  /**
+   * Remove events emitted by the current tab target.
+   */
+  disconnect: function () {
+    if (!this.target) {
+      return;
+    }
+    dumpn("TargetEventsHandler is disconnecting...");
+    this.target.off("close", this._onTabDetached);
+    this.target.off("navigate", this._onTabNavigated);
+    this.target.off("will-navigate", this._onTabNavigated);
+  },
+
+  /**
+   * Called for each location change in the monitored tab.
+   *
+   * @param string type
+   *        Packet type.
+   * @param object packet
+   *        Packet received from the server.
+   */
+  _onTabNavigated: function (type, packet) {
+    switch (type) {
+      case "will-navigate": {
+        // Reset UI.
+        if (!Services.prefs.getBoolPref("devtools.webconsole.persistlog")) {
+          NetMonitorView.RequestsMenu.reset();
+          NetMonitorView.Sidebar.toggle(false);
+        }
+        // Switch to the default network traffic inspector view.
+        if (NetMonitorController.getCurrentActivity() == ACTIVITY_TYPE.NONE) {
+          NetMonitorView.showNetworkInspectorView();
+        }
+        // Clear any accumulated markers.
+        NetMonitorController.NetworkEventsHandler.clearMarkers();
+
+        window.emit(EVENTS.TARGET_WILL_NAVIGATE);
+        break;
+      }
+      case "navigate": {
+        window.emit(EVENTS.TARGET_DID_NAVIGATE);
+        break;
+      }
+    }
+  },
+
+  /**
+   * Called when the monitored tab is closed.
+   */
+  _onTabDetached: function () {
+    NetMonitorController.shutdownNetMonitor();
+  }
+};
+
+/**
+ * Functions handling target network events.
+ */
+function NetworkEventsHandler() {
+  this._markers = [];
+
+  this._onNetworkEvent = this._onNetworkEvent.bind(this);
+  this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this);
+  this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this);
+  this._onRequestHeaders = this._onRequestHeaders.bind(this);
+  this._onRequestCookies = this._onRequestCookies.bind(this);
+  this._onRequestPostData = this._onRequestPostData.bind(this);
+  this._onResponseHeaders = this._onResponseHeaders.bind(this);
+  this._onResponseCookies = this._onResponseCookies.bind(this);
+  this._onResponseContent = this._onResponseContent.bind(this);
+  this._onEventTimings = this._onEventTimings.bind(this);
+}
+
+NetworkEventsHandler.prototype = {
+  get client() {
+    return NetMonitorController._target.client;
+  },
+
+  get webConsoleClient() {
+    return NetMonitorController.webConsoleClient;
+  },
+
+  get timelineFront() {
+    return NetMonitorController.timelineFront;
+  },
+
+  get firstDocumentDOMContentLoadedTimestamp() {
+    let marker = this._markers.filter(e => {
+      return e.name == "document::DOMContentLoaded";
+    })[0];
+
+    return marker ? marker.unixTime / 1000 : -1;
+  },
+
+  get firstDocumentLoadTimestamp() {
+    let marker = this._markers.filter(e => e.name == "document::Load")[0];
+    return marker ? marker.unixTime / 1000 : -1;
+  },
+
+  /**
+   * Connect to the current target client.
+   */
+  connect: function () {
+    dumpn("NetworkEventsHandler is connecting...");
+    this.webConsoleClient.on("networkEvent", this._onNetworkEvent);
+    this.webConsoleClient.on("networkEventUpdate", this._onNetworkEventUpdate);
+
+    if (this.timelineFront) {
+      this.timelineFront.on("doc-loading", this._onDocLoadingMarker);
+    }
+
+    this._displayCachedEvents();
+  },
+
+  /**
+   * Disconnect from the client.
+   */
+  disconnect: function () {
+    if (!this.client) {
+      return;
+    }
+    dumpn("NetworkEventsHandler is disconnecting...");
+    this.webConsoleClient.off("networkEvent", this._onNetworkEvent);
+    this.webConsoleClient.off("networkEventUpdate", this._onNetworkEventUpdate);
+
+    if (this.timelineFront) {
+      this.timelineFront.off("doc-loading", this._onDocLoadingMarker);
+    }
+  },
+
+  /**
+   * Display any network events already in the cache.
+   */
+  _displayCachedEvents: function () {
+    for (let cachedEvent of this.webConsoleClient.getNetworkEvents()) {
+      // First add the request to the timeline.
+      this._onNetworkEvent("networkEvent", cachedEvent);
+      // Then replay any updates already received.
+      for (let update of cachedEvent.updates) {
+        this._onNetworkEventUpdate("networkEventUpdate", {
+          packet: {
+            updateType: update
+          },
+          networkInfo: cachedEvent
+        });
+      }
+    }
+  },
+
+  /**
+   * The "DOMContentLoaded" and "Load" events sent by the timeline actor.
+   * @param object marker
+   */
+  _onDocLoadingMarker: function (marker) {
+    window.emit(EVENTS.TIMELINE_EVENT, marker);
+    this._markers.push(marker);
+  },
+
+  /**
+   * The "networkEvent" message type handler.
+   *
+   * @param string type
+   *        Message type.
+   * @param object networkInfo
+   *        The network request information.
+   */
+  _onNetworkEvent: function (type, networkInfo) {
+    let { actor,
+      startedDateTime,
+      request: { method, url },
+      isXHR,
+      cause,
+      fromCache,
+      fromServiceWorker
+    } = networkInfo;
+
+    NetMonitorView.RequestsMenu.addRequest(
+      actor, startedDateTime, method, url, isXHR, cause, fromCache,
+        fromServiceWorker
+    );
+    window.emit(EVENTS.NETWORK_EVENT, actor);
+  },
+
+  /**
+   * The "networkEventUpdate" message type handler.
+   *
+   * @param string type
+   *        Message type.
+   * @param object packet
+   *        The message received from the server.
+   * @param object networkInfo
+   *        The network request information.
+   */
+  _onNetworkEventUpdate: function (type, { packet, networkInfo }) {
+    let { actor } = networkInfo;
+
+    switch (packet.updateType) {
+      case "requestHeaders":
+        this.webConsoleClient.getRequestHeaders(actor, this._onRequestHeaders);
+        window.emit(EVENTS.UPDATING_REQUEST_HEADERS, actor);
+        break;
+      case "requestCookies":
+        this.webConsoleClient.getRequestCookies(actor, this._onRequestCookies);
+        window.emit(EVENTS.UPDATING_REQUEST_COOKIES, actor);
+        break;
+      case "requestPostData":
+        this.webConsoleClient.getRequestPostData(actor,
+          this._onRequestPostData);
+        window.emit(EVENTS.UPDATING_REQUEST_POST_DATA, actor);
+        break;
+      case "securityInfo":
+        NetMonitorView.RequestsMenu.updateRequest(actor, {
+          securityState: networkInfo.securityInfo,
+        });
+        this.webConsoleClient.getSecurityInfo(actor, this._onSecurityInfo);
+        window.emit(EVENTS.UPDATING_SECURITY_INFO, actor);
+        break;
+      case "responseHeaders":
+        this.webConsoleClient.getResponseHeaders(actor,
+          this._onResponseHeaders);
+        window.emit(EVENTS.UPDATING_RESPONSE_HEADERS, actor);
+        break;
+      case "responseCookies":
+        this.webConsoleClient.getResponseCookies(actor,
+          this._onResponseCookies);
+        window.emit(EVENTS.UPDATING_RESPONSE_COOKIES, actor);
+        break;
+      case "responseStart":
+        NetMonitorView.RequestsMenu.updateRequest(actor, {
+          httpVersion: networkInfo.response.httpVersion,
+          remoteAddress: networkInfo.response.remoteAddress,
+          remotePort: networkInfo.response.remotePort,
+          status: networkInfo.response.status,
+          statusText: networkInfo.response.statusText,
+          headersSize: networkInfo.response.headersSize
+        });
+        window.emit(EVENTS.STARTED_RECEIVING_RESPONSE, actor);
+        break;
+      case "responseContent":
+        NetMonitorView.RequestsMenu.updateRequest(actor, {
+          contentSize: networkInfo.response.bodySize,
+          transferredSize: networkInfo.response.transferredSize,
+          mimeType: networkInfo.response.content.mimeType
+        });
+        this.webConsoleClient.getResponseContent(actor,
+          this._onResponseContent);
+        window.emit(EVENTS.UPDATING_RESPONSE_CONTENT, actor);
+        break;
+      case "eventTimings":
+        NetMonitorView.RequestsMenu.updateRequest(actor, {
+          totalTime: networkInfo.totalTime
+        });
+        this.webConsoleClient.getEventTimings(actor, this._onEventTimings);
+        window.emit(EVENTS.UPDATING_EVENT_TIMINGS, actor);
+        break;
+    }
+  },
+
+  /**
+   * Handles additional information received for a "requestHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onRequestHeaders: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      requestHeaders: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_REQUEST_HEADERS, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "requestCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onRequestCookies: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      requestCookies: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_REQUEST_COOKIES, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "requestPostData" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onRequestPostData: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      requestPostData: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_REQUEST_POST_DATA, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "securityInfo" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onSecurityInfo: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      securityInfo: response.securityInfo
+    }, () => {
+      window.emit(EVENTS.RECEIVED_SECURITY_INFO, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "responseHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onResponseHeaders: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      responseHeaders: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_RESPONSE_HEADERS, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "responseCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onResponseCookies: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      responseCookies: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_RESPONSE_COOKIES, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "responseContent" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onResponseContent: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      responseContent: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_RESPONSE_CONTENT, response.from);
+    });
+  },
+
+  /**
+   * Handles additional information received for a "eventTimings" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _onEventTimings: function (response) {
+    NetMonitorView.RequestsMenu.updateRequest(response.from, {
+      eventTimings: response
+    }, () => {
+      window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from);
+    });
+  },
+
+  /**
+   * Clears all accumulated markers.
+   */
+  clearMarkers: function () {
+    this._markers.length = 0;
+  },
+
+  /**
+   * Fetches the full text of a LongString.
+   *
+   * @param object | string stringGrip
+   *        The long string grip containing the corresponding actor.
+   *        If you pass in a plain string (by accident or because you're lazy),
+   *        then a promise of the same string is simply returned.
+   * @return object Promise
+   *         A promise that is resolved when the full string contents
+   *         are available, or rejected if something goes wrong.
+   */
+  getString: function (stringGrip) {
+    return this.webConsoleClient.getString(stringGrip);
+  }
+};
+
+/**
+ * Returns true if this is document is in RTL mode.
+ * @return boolean
+ */
+XPCOMUtils.defineLazyGetter(window, "isRTL", function () {
+  return window.getComputedStyle(document.documentElement, null)
+    .direction == "rtl";
+});
+
+/**
+ * Convenient way of emitting events from the panel window.
+ */
+EventEmitter.decorate(this);
+
+/**
+ * Preliminary setup for the NetMonitorController object.
+ */
+NetMonitorController.TargetEventsHandler = new TargetEventsHandler();
+NetMonitorController.NetworkEventsHandler = new NetworkEventsHandler();
+
+/**
+ * Export some properties to the global scope for easier access.
+ */
+Object.defineProperties(window, {
+  "gNetwork": {
+    get: function () {
+      return NetMonitorController.NetworkEventsHandler;
+    },
+    configurable: true
+  }
+});
+
+/**
+ * Helper method for debugging.
+ * @param string
+ */
+function dumpn(str) {
+  if (wantLogging) {
+    dump("NET-FRONTEND: " + str + "\n");
+  }
+}
+
+var wantLogging = Services.prefs.getBoolPref("devtools.debugger.log");
diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js
new file mode 100644
index 000000000..68470f7a9
--- /dev/null
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -0,0 +1,1230 @@
+/* -*- 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/. */
+/* import-globals-from ./netmonitor-controller.js */
+/* globals Prefs, gNetwork, setInterval, setTimeout, clearInterval, clearTimeout, btoa */
+/* exported $, $all */
+"use strict";
+
+XPCOMUtils.defineLazyGetter(this, "NetworkHelper", function () {
+  return require("devtools/shared/webconsole/network-helper");
+});
+
+/* eslint-disable mozilla/reject-some-requires */
+const {VariablesView} = require("resource://devtools/client/shared/widgets/VariablesView.jsm");
+/* eslint-disable mozilla/reject-some-requires */
+const {VariablesViewController} = require("resource://devtools/client/shared/widgets/VariablesViewController.jsm");
+const {ToolSidebar} = require("devtools/client/framework/sidebar");
+const {testing: isTesting} = require("devtools/shared/flags");
+const {ViewHelpers, Heritage} = require("devtools/client/shared/widgets/view-helpers");
+const {Filters} = require("./filter-predicates");
+const {getFormDataSections,
+       formDataURI,
+       getUriHostPort} = require("./request-utils");
+const {L10N} = require("./l10n");
+const {RequestsMenuView} = require("./requests-menu-view");
+const {CustomRequestView} = require("./custom-request-view");
+const {ToolbarView} = require("./toolbar-view");
+const {configureStore} = require("./store");
+const {PerformanceStatisticsView} = require("./performance-statistics-view");
+
+// Initialize the global redux variables
+var gStore = configureStore();
+
+// ms
+const WDA_DEFAULT_VERIFY_INTERVAL = 50;
+
+// Use longer timeout during testing as the tests need this process to succeed
+// and two seconds is quite short on slow debug builds. The timeout here should
+// be at least equal to the general mochitest timeout of 45 seconds so that this
+// never gets hit during testing.
+// ms
+const WDA_DEFAULT_GIVE_UP_TIMEOUT = isTesting ? 45000 : 2000;
+
+// 100 KB in bytes
+const SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE = 102400;
+const HEADERS_SIZE_DECIMALS = 3;
+const CONTENT_MIME_TYPE_MAPPINGS = {
+  "/ecmascript": Editor.modes.js,
+  "/javascript": Editor.modes.js,
+  "/x-javascript": Editor.modes.js,
+  "/html": Editor.modes.html,
+  "/xhtml": Editor.modes.html,
+  "/xml": Editor.modes.html,
+  "/atom": Editor.modes.html,
+  "/soap": Editor.modes.html,
+  "/vnd.mpeg.dash.mpd": Editor.modes.html,
+  "/rdf": Editor.modes.css,
+  "/rss": Editor.modes.css,
+  "/css": Editor.modes.css
+};
+
+const DEFAULT_EDITOR_CONFIG = {
+  mode: Editor.modes.text,
+  readOnly: true,
+  lineNumbers: true
+};
+const GENERIC_VARIABLES_VIEW_SETTINGS = {
+  lazyEmpty: true,
+  // ms
+  lazyEmptyDelay: 10,
+  searchEnabled: true,
+  editableValueTooltip: "",
+  editableNameTooltip: "",
+  preventDisableOnChange: true,
+  preventDescriptorModifiers: true,
+  eval: () => {}
+};
+
+/**
+ * Object defining the network monitor view components.
+ */
+var NetMonitorView = {
+  /**
+   * Initializes the network monitor view.
+   */
+  initialize: function () {
+    this._initializePanes();
+
+    this.Toolbar.initialize(gStore);
+    this.RequestsMenu.initialize(gStore);
+    this.NetworkDetails.initialize();
+    this.CustomRequest.initialize();
+    this.PerformanceStatistics.initialize(gStore);
+  },
+
+  /**
+   * Destroys the network monitor view.
+   */
+  destroy: function () {
+    this._isDestroyed = true;
+    this.Toolbar.destroy();
+    this.RequestsMenu.destroy();
+    this.NetworkDetails.destroy();
+    this.CustomRequest.destroy();
+
+    this._destroyPanes();
+  },
+
+  /**
+   * Initializes the UI for all the displayed panes.
+   */
+  _initializePanes: function () {
+    dumpn("Initializing the NetMonitorView panes");
+
+    this._body = $("#body");
+    this._detailsPane = $("#details-pane");
+
+    this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
+    this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
+    this.toggleDetailsPane({ visible: false });
+
+    // Disable the performance statistics mode.
+    if (!Prefs.statistics) {
+      $("#request-menu-context-perf").hidden = true;
+      $("#notice-perf-message").hidden = true;
+      $("#requests-menu-network-summary-button").hidden = true;
+    }
+  },
+
+  /**
+   * Destroys the UI for all the displayed panes.
+   */
+  _destroyPanes: Task.async(function* () {
+    dumpn("Destroying the NetMonitorView panes");
+
+    Prefs.networkDetailsWidth = this._detailsPane.getAttribute("width");
+    Prefs.networkDetailsHeight = this._detailsPane.getAttribute("height");
+
+    this._detailsPane = null;
+
+    for (let p of this._editorPromises.values()) {
+      let editor = yield p;
+      editor.destroy();
+    }
+  }),
+
+  /**
+   * Gets the visibility state of the network details pane.
+   * @return boolean
+   */
+  get detailsPaneHidden() {
+    return this._detailsPane.classList.contains("pane-collapsed");
+  },
+
+  /**
+   * Sets the network details pane hidden or visible.
+   *
+   * @param object flags
+   *        An object containing some of the following properties:
+   *        - visible: true if the pane should be shown, false to hide
+   *        - animated: true to display an animation on toggle
+   *        - delayed: true to wait a few cycles before toggle
+   *        - callback: a function to invoke when the toggle finishes
+   * @param number tabIndex [optional]
+   *        The index of the intended selected tab in the details pane.
+   */
+  toggleDetailsPane: function (flags, tabIndex) {
+    ViewHelpers.togglePane(flags, this._detailsPane);
+
+    if (flags.visible) {
+      this._body.classList.remove("pane-collapsed");
+      gStore.dispatch(Actions.showSidebar(true));
+    } else {
+      this._body.classList.add("pane-collapsed");
+      gStore.dispatch(Actions.showSidebar(false));
+    }
+
+    if (tabIndex !== undefined) {
+      $("#event-details-pane").selectedIndex = tabIndex;
+    }
+  },
+
+  /**
+   * Gets the current mode for this tool.
+   * @return string (e.g, "network-inspector-view" or "network-statistics-view")
+   */
+  get currentFrontendMode() {
+    // The getter may be called from a timeout after the panel is destroyed.
+    if (!this._body.selectedPanel) {
+      return null;
+    }
+    return this._body.selectedPanel.id;
+  },
+
+  /**
+   * Toggles between the frontend view modes ("Inspector" vs. "Statistics").
+   */
+  toggleFrontendMode: function () {
+    if (this.currentFrontendMode != "network-inspector-view") {
+      this.showNetworkInspectorView();
+    } else {
+      this.showNetworkStatisticsView();
+    }
+  },
+
+  /**
+   * Switches to the "Inspector" frontend view mode.
+   */
+  showNetworkInspectorView: function () {
+    this._body.selectedPanel = $("#network-inspector-view");
+    this.RequestsMenu._flushWaterfallViews(true);
+  },
+
+  /**
+   * Switches to the "Statistics" frontend view mode.
+   */
+  showNetworkStatisticsView: function () {
+    this._body.selectedPanel = $("#network-statistics-view");
+
+    let controller = NetMonitorController;
+    let requestsView = this.RequestsMenu;
+    let statisticsView = this.PerformanceStatistics;
+
+    Task.spawn(function* () {
+      statisticsView.displayPlaceholderCharts();
+      yield controller.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+
+      try {
+        // • The response headers and status code are required for determining
+        // whether a response is "fresh" (cacheable).
+        // • The response content size and request total time are necessary for
+        // populating the statistics view.
+        // • The response mime type is used for categorization.
+        yield whenDataAvailable(requestsView, [
+          "responseHeaders", "status", "contentSize", "mimeType", "totalTime"
+        ]);
+      } catch (ex) {
+        // Timed out while waiting for data. Continue with what we have.
+        console.error(ex);
+      }
+
+      statisticsView.createPrimedCacheChart(requestsView.items);
+      statisticsView.createEmptyCacheChart(requestsView.items);
+    });
+  },
+
+  reloadPage: function () {
+    NetMonitorController.triggerActivity(
+      ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT);
+  },
+
+  /**
+   * Lazily initializes and returns a promise for a Editor instance.
+   *
+   * @param string id
+   *        The id of the editor placeholder node.
+   * @return object
+   *         A promise that is resolved when the editor is available.
+   */
+  editor: function (id) {
+    dumpn("Getting a NetMonitorView editor: " + id);
+
+    if (this._editorPromises.has(id)) {
+      return this._editorPromises.get(id);
+    }
+
+    let deferred = promise.defer();
+    this._editorPromises.set(id, deferred.promise);
+
+    // Initialize the source editor and store the newly created instance
+    // in the ether of a resolved promise's value.
+    let editor = new Editor(DEFAULT_EDITOR_CONFIG);
+    editor.appendTo($(id)).then(() => deferred.resolve(editor));
+
+    return deferred.promise;
+  },
+
+  _body: null,
+  _detailsPane: null,
+  _editorPromises: new Map()
+};
+
+/**
+ * Functions handling the sidebar details view.
+ */
+function SidebarView() {
+  dumpn("SidebarView was instantiated");
+}
+
+SidebarView.prototype = {
+  /**
+   * Sets this view hidden or visible. It's visible by default.
+   *
+   * @param boolean visibleFlag
+   *        Specifies the intended visibility.
+   */
+  toggle: function (visibleFlag) {
+    NetMonitorView.toggleDetailsPane({ visible: visibleFlag });
+    NetMonitorView.RequestsMenu._flushWaterfallViews(true);
+  },
+
+  /**
+   * Populates this view with the specified data.
+   *
+   * @param object data
+   *        The data source (this should be the attachment of a request item).
+   * @return object
+   *        Returns a promise that resolves upon population of the subview.
+   */
+  populate: Task.async(function* (data) {
+    let isCustom = data.isCustom;
+    let view = isCustom ?
+      NetMonitorView.CustomRequest :
+      NetMonitorView.NetworkDetails;
+
+    yield view.populate(data);
+    $("#details-pane").selectedIndex = isCustom ? 0 : 1;
+
+    window.emit(EVENTS.SIDEBAR_POPULATED);
+  })
+};
+
+/**
+ * Functions handling the requests details view.
+ */
+function NetworkDetailsView() {
+  dumpn("NetworkDetailsView was instantiated");
+
+  // The ToolSidebar requires the panel object to be able to emit events.
+  EventEmitter.decorate(this);
+
+  this._onTabSelect = this._onTabSelect.bind(this);
+}
+
+NetworkDetailsView.prototype = {
+  /**
+   * An object containing the state of tabs.
+   */
+  _viewState: {
+    // if updating[tab] is true a task is currently updating the given tab.
+    updating: [],
+    // if dirty[tab] is true, the tab needs to be repopulated once current
+    // update task finishes
+    dirty: [],
+    // the most recently received attachment data for the request
+    latestData: null,
+  },
+
+  /**
+   * Initialization function, called when the network monitor is started.
+   */
+  initialize: function () {
+    dumpn("Initializing the NetworkDetailsView");
+
+    this.widget = $("#event-details-pane");
+    this.sidebar = new ToolSidebar(this.widget, this, "netmonitor", {
+      disableTelemetry: true,
+      showAllTabsMenu: true
+    });
+
+    this._headers = new VariablesView($("#all-headers"),
+      Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
+        emptyText: L10N.getStr("headersEmptyText"),
+        searchPlaceholder: L10N.getStr("headersFilterText")
+      }));
+    this._cookies = new VariablesView($("#all-cookies"),
+      Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
+        emptyText: L10N.getStr("cookiesEmptyText"),
+        searchPlaceholder: L10N.getStr("cookiesFilterText")
+      }));
+    this._params = new VariablesView($("#request-params"),
+      Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
+        emptyText: L10N.getStr("paramsEmptyText"),
+        searchPlaceholder: L10N.getStr("paramsFilterText")
+      }));
+    this._json = new VariablesView($("#response-content-json"),
+      Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {
+        onlyEnumVisible: true,
+        searchPlaceholder: L10N.getStr("jsonFilterText")
+      }));
+    VariablesViewController.attach(this._json);
+
+    this._paramsQueryString = L10N.getStr("paramsQueryString");
+    this._paramsFormData = L10N.getStr("paramsFormData");
+    this._paramsPostPayload = L10N.getStr("paramsPostPayload");
+    this._requestHeaders = L10N.getStr("requestHeaders");
+    this._requestHeadersFromUpload = L10N.getStr("requestHeadersFromUpload");
+    this._responseHeaders = L10N.getStr("responseHeaders");
+    this._requestCookies = L10N.getStr("requestCookies");
+    this._responseCookies = L10N.getStr("responseCookies");
+
+    $("tabpanels", this.widget).addEventListener("select", this._onTabSelect);
+  },
+
+  /**
+   * Destruction function, called when the network monitor is closed.
+   */
+  destroy: function () {
+    dumpn("Destroying the NetworkDetailsView");
+    this.sidebar.destroy();
+    $("tabpanels", this.widget).removeEventListener("select",
+      this._onTabSelect);
+  },
+
+  /**
+   * Populates this view with the specified data.
+   *
+   * @param object data
+   *        The data source (this should be the attachment of a request item).
+   * @return object
+   *        Returns a promise that resolves upon population the view.
+   */
+  populate: function (data) {
+    $("#request-params-box").setAttribute("flex", "1");
+    $("#request-params-box").hidden = false;
+    $("#request-post-data-textarea-box").hidden = true;
+    $("#response-content-info-header").hidden = true;
+    $("#response-content-json-box").hidden = true;
+    $("#response-content-textarea-box").hidden = true;
+    $("#raw-headers").hidden = true;
+    $("#response-content-image-box").hidden = true;
+
+    let isHtml = Filters.html(data);
+
+    // Show the "Preview" tabpanel only for plain HTML responses.
+    this.sidebar.toggleTab(isHtml, "preview-tab");
+
+    // Show the "Security" tab only for requests that
+    //   1) are https (state != insecure)
+    //   2) come from a target that provides security information.
+    let hasSecurityInfo = data.securityState &&
+                          data.securityState !== "insecure";
+    this.sidebar.toggleTab(hasSecurityInfo, "security-tab");
+
+    // Switch to the "Headers" tabpanel if the "Preview" previously selected
+    // and this is not an HTML response or "Security" was selected but this
+    // request has no security information.
+
+    if (!isHtml && this.widget.selectedPanel === $("#preview-tabpanel") ||
+        !hasSecurityInfo && this.widget.selectedPanel ===
+          $("#security-tabpanel")) {
+      this.widget.selectedIndex = 0;
+    }
+
+    this._headers.empty();
+    this._cookies.empty();
+    this._params.empty();
+    this._json.empty();
+
+    this._dataSrc = { src: data, populated: [] };
+    this._onTabSelect();
+    window.emit(EVENTS.NETWORKDETAILSVIEW_POPULATED);
+
+    return promise.resolve();
+  },
+
+  /**
+   * Listener handling the tab selection event.
+   */
+  _onTabSelect: function () {
+    let { src, populated } = this._dataSrc || {};
+    let tab = this.widget.selectedIndex;
+    let view = this;
+
+    // Make sure the data source is valid and don't populate the same tab twice.
+    if (!src || populated[tab]) {
+      return;
+    }
+
+    let viewState = this._viewState;
+    if (viewState.updating[tab]) {
+      // A task is currently updating this tab. If we started another update
+      // task now it would result in a duplicated content as described in bugs
+      // 997065 and 984687. As there's no way to stop the current task mark the
+      // tab dirty and refresh the panel once the current task finishes.
+      viewState.dirty[tab] = true;
+      viewState.latestData = src;
+      return;
+    }
+
+    Task.spawn(function* () {
+      viewState.updating[tab] = true;
+      switch (tab) {
+        // "Headers"
+        case 0:
+          yield view._setSummary(src);
+          yield view._setResponseHeaders(src.responseHeaders);
+          yield view._setRequestHeaders(
+            src.requestHeaders,
+            src.requestHeadersFromUploadStream);
+          break;
+        // "Cookies"
+        case 1:
+          yield view._setResponseCookies(src.responseCookies);
+          yield view._setRequestCookies(src.requestCookies);
+          break;
+        // "Params"
+        case 2:
+          yield view._setRequestGetParams(src.url);
+          yield view._setRequestPostParams(
+            src.requestHeaders,
+            src.requestHeadersFromUploadStream,
+            src.requestPostData);
+          break;
+        // "Response"
+        case 3:
+          yield view._setResponseBody(src.url, src.responseContent);
+          break;
+        // "Timings"
+        case 4:
+          yield view._setTimingsInformation(src.eventTimings);
+          break;
+        // "Security"
+        case 5:
+          yield view._setSecurityInfo(src.securityInfo, src.url);
+          break;
+        // "Preview"
+        case 6:
+          yield view._setHtmlPreview(src.responseContent);
+          break;
+      }
+      viewState.updating[tab] = false;
+    }).then(() => {
+      if (tab == this.widget.selectedIndex) {
+        if (viewState.dirty[tab]) {
+          // The request information was updated while the task was running.
+          viewState.dirty[tab] = false;
+          view.populate(viewState.latestData);
+        } else {
+          // Tab is selected but not dirty. We're done here.
+          populated[tab] = true;
+          window.emit(EVENTS.TAB_UPDATED);
+
+          if (NetMonitorController.isConnected()) {
+            NetMonitorView.RequestsMenu.ensureSelectedItemIsVisible();
+          }
+        }
+      } else if (viewState.dirty[tab]) {
+        // Tab is dirty but no longer selected. Don't refresh it now, it'll be
+        // done if the tab is shown again.
+        viewState.dirty[tab] = false;
+      }
+    }, e => console.error(e));
+  },
+
+  /**
+   * Sets the network request summary shown in this view.
+   *
+   * @param object data
+   *        The data source (this should be the attachment of a request item).
+   */
+  _setSummary: function (data) {
+    if (data.url) {
+      let unicodeUrl = NetworkHelper.convertToUnicode(unescape(data.url));
+      $("#headers-summary-url-value").setAttribute("value", unicodeUrl);
+      $("#headers-summary-url-value").setAttribute("tooltiptext", unicodeUrl);
+      $("#headers-summary-url").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-url").setAttribute("hidden", "true");
+    }
+
+    if (data.method) {
+      $("#headers-summary-method-value").setAttribute("value", data.method);
+      $("#headers-summary-method").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-method").setAttribute("hidden", "true");
+    }
+
+    if (data.remoteAddress) {
+      let address = data.remoteAddress;
+      if (address.indexOf(":") != -1) {
+        address = `[${address}]`;
+      }
+      if (data.remotePort) {
+        address += `:${data.remotePort}`;
+      }
+      $("#headers-summary-address-value").setAttribute("value", address);
+      $("#headers-summary-address-value").setAttribute("tooltiptext", address);
+      $("#headers-summary-address").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-address").setAttribute("hidden", "true");
+    }
+
+    if (data.status) {
+      // "code" attribute is only used by css to determine the icon color
+      let code;
+      if (data.fromCache) {
+        code = "cached";
+      } else if (data.fromServiceWorker) {
+        code = "service worker";
+      } else {
+        code = data.status;
+      }
+      $("#headers-summary-status-circle").setAttribute("code", code);
+      $("#headers-summary-status-value").setAttribute("value",
+        data.status + " " + data.statusText);
+      $("#headers-summary-status").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-status").setAttribute("hidden", "true");
+    }
+
+    if (data.httpVersion) {
+      $("#headers-summary-version-value").setAttribute("value",
+        data.httpVersion);
+      $("#headers-summary-version").removeAttribute("hidden");
+    } else {
+      $("#headers-summary-version").setAttribute("hidden", "true");
+    }
+  },
+
+  /**
+   * Sets the network request headers shown in this view.
+   *
+   * @param object headers
+   *        The "requestHeaders" message received from the server.
+   * @param object uploadHeaders
+   *        The "requestHeadersFromUploadStream" inferred from the POST payload.
+   * @return object
+   *        A promise that resolves when request headers are set.
+   */
+  _setRequestHeaders: Task.async(function* (headers, uploadHeaders) {
+    if (headers && headers.headers.length) {
+      yield this._addHeaders(this._requestHeaders, headers);
+    }
+    if (uploadHeaders && uploadHeaders.headers.length) {
+      yield this._addHeaders(this._requestHeadersFromUpload, uploadHeaders);
+    }
+  }),
+
+  /**
+   * Sets the network response headers shown in this view.
+   *
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        A promise that resolves when response headers are set.
+   */
+  _setResponseHeaders: Task.async(function* (response) {
+    if (response && response.headers.length) {
+      response.headers.sort((a, b) => a.name > b.name);
+      yield this._addHeaders(this._responseHeaders, response);
+    }
+  }),
+
+  /**
+   * Populates the headers container in this view with the specified data.
+   *
+   * @param string name
+   *        The type of headers to populate (request or response).
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        A promise that resolves when headers are added.
+   */
+  _addHeaders: Task.async(function* (name, response) {
+    let kb = response.headersSize / 1024;
+    let size = L10N.numberWithDecimals(kb, HEADERS_SIZE_DECIMALS);
+    let text = L10N.getFormatStr("networkMenu.sizeKB", size);
+
+    let headersScope = this._headers.addScope(name + " (" + text + ")");
+    headersScope.expanded = true;
+
+    for (let header of response.headers) {
+      let headerVar = headersScope.addItem(header.name, {}, {relaxed: true});
+      let headerValue = yield gNetwork.getString(header.value);
+      headerVar.setGrip(headerValue);
+    }
+  }),
+
+  /**
+   * Sets the network request cookies shown in this view.
+   *
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        A promise that is resolved when the request cookies are set.
+   */
+  _setRequestCookies: Task.async(function* (response) {
+    if (response && response.cookies.length) {
+      response.cookies.sort((a, b) => a.name > b.name);
+      yield this._addCookies(this._requestCookies, response);
+    }
+  }),
+
+  /**
+   * Sets the network response cookies shown in this view.
+   *
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        A promise that is resolved when the response cookies are set.
+   */
+  _setResponseCookies: Task.async(function* (response) {
+    if (response && response.cookies.length) {
+      yield this._addCookies(this._responseCookies, response);
+    }
+  }),
+
+  /**
+   * Populates the cookies container in this view with the specified data.
+   *
+   * @param string name
+   *        The type of cookies to populate (request or response).
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        Returns a promise that resolves upon the adding of cookies.
+   */
+  _addCookies: Task.async(function* (name, response) {
+    let cookiesScope = this._cookies.addScope(name);
+    cookiesScope.expanded = true;
+
+    for (let cookie of response.cookies) {
+      let cookieVar = cookiesScope.addItem(cookie.name, {}, {relaxed: true});
+      let cookieValue = yield gNetwork.getString(cookie.value);
+      cookieVar.setGrip(cookieValue);
+
+      // By default the cookie name and value are shown. If this is the only
+      // information available, then nothing else is to be displayed.
+      let cookieProps = Object.keys(cookie);
+      if (cookieProps.length == 2) {
+        continue;
+      }
+
+      // Display any other information other than the cookie name and value
+      // which may be available.
+      let rawObject = Object.create(null);
+      let otherProps = cookieProps.filter(e => e != "name" && e != "value");
+      for (let prop of otherProps) {
+        rawObject[prop] = cookie[prop];
+      }
+      cookieVar.populate(rawObject);
+      cookieVar.twisty = true;
+      cookieVar.expanded = true;
+    }
+  }),
+
+  /**
+   * Sets the network request get params shown in this view.
+   *
+   * @param string url
+   *        The request's url.
+   */
+  _setRequestGetParams: function (url) {
+    let query = NetworkHelper.nsIURL(url).query;
+    if (query) {
+      this._addParams(this._paramsQueryString, query);
+    }
+  },
+
+  /**
+   * Sets the network request post params shown in this view.
+   *
+   * @param object headers
+   *        The "requestHeaders" message received from the server.
+   * @param object uploadHeaders
+   *        The "requestHeadersFromUploadStream" inferred from the POST payload.
+   * @param object postData
+   *        The "requestPostData" message received from the server.
+   * @return object
+   *        A promise that is resolved when the request post params are set.
+   */
+  _setRequestPostParams: Task.async(function* (headers, uploadHeaders,
+    postData) {
+    if (!headers || !uploadHeaders || !postData) {
+      return;
+    }
+
+    let formDataSections = yield getFormDataSections(
+      headers,
+      uploadHeaders,
+      postData,
+      gNetwork.getString.bind(gNetwork));
+
+    this._params.onlyEnumVisible = false;
+
+    // Handle urlencoded form data sections (e.g. "?foo=bar&baz=42").
+    if (formDataSections.length > 0) {
+      formDataSections.forEach(section => {
+        this._addParams(this._paramsFormData, section);
+      });
+    } else {
+      // Handle JSON and actual forms ("multipart/form-data" content type).
+      let postDataLongString = postData.postData.text;
+      let text = yield gNetwork.getString(postDataLongString);
+      let jsonVal = null;
+      try {
+        jsonVal = JSON.parse(text);
+      } catch (ex) { // eslint-disable-line
+      }
+
+      if (jsonVal) {
+        this._params.onlyEnumVisible = true;
+        let jsonScopeName = L10N.getStr("jsonScopeName");
+        let jsonScope = this._params.addScope(jsonScopeName);
+        jsonScope.expanded = true;
+        let jsonItem = jsonScope.addItem(undefined, { enumerable: true });
+        jsonItem.populate(jsonVal, { sorted: true });
+      } else {
+        // This is really awkward, but hey, it works. Let's show an empty
+        // scope in the params view and place the source editor containing
+        // the raw post data directly underneath.
+        $("#request-params-box").removeAttribute("flex");
+        let paramsScope = this._params.addScope(this._paramsPostPayload);
+        paramsScope.expanded = true;
+        paramsScope.locked = true;
+
+        $("#request-post-data-textarea-box").hidden = false;
+        let editor = yield NetMonitorView.editor("#request-post-data-textarea");
+        editor.setMode(Editor.modes.text);
+        editor.setText(text);
+      }
+    }
+
+    window.emit(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  }),
+
+  /**
+   * Populates the params container in this view with the specified data.
+   *
+   * @param string name
+   *        The type of params to populate (get or post).
+   * @param string queryString
+   *        A query string of params (e.g. "?foo=bar&baz=42").
+   */
+  _addParams: function (name, queryString) {
+    let paramsArray = NetworkHelper.parseQueryString(queryString);
+    if (!paramsArray) {
+      return;
+    }
+    let paramsScope = this._params.addScope(name);
+    paramsScope.expanded = true;
+
+    for (let param of paramsArray) {
+      let paramVar = paramsScope.addItem(param.name, {}, {relaxed: true});
+      paramVar.setGrip(param.value);
+    }
+  },
+
+  /**
+   * Sets the network response body shown in this view.
+   *
+   * @param string url
+   *        The request's url.
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *         A promise that is resolved when the response body is set.
+   */
+  _setResponseBody: Task.async(function* (url, response) {
+    if (!response) {
+      return;
+    }
+    let { mimeType, text, encoding } = response.content;
+    let responseBody = yield gNetwork.getString(text);
+
+    // Handle json, which we tentatively identify by checking the MIME type
+    // for "json" after any word boundary. This works for the standard
+    // "application/json", and also for custom types like "x-bigcorp-json".
+    // Additionally, we also directly parse the response text content to
+    // verify whether it's json or not, to handle responses incorrectly
+    // labeled as text/plain instead.
+    let jsonMimeType, jsonObject, jsonObjectParseError;
+    try {
+      jsonMimeType = /\bjson/.test(mimeType);
+      jsonObject = JSON.parse(responseBody);
+    } catch (e) {
+      jsonObjectParseError = e;
+    }
+    if (jsonMimeType || jsonObject) {
+      // Extract the actual json substring in case this might be a "JSONP".
+      // This regex basically parses a function call and captures the
+      // function name and arguments in two separate groups.
+      let jsonpRegex = /^\s*([\w$]+)\s*\(\s*([^]*)\s*\)\s*;?\s*$/;
+      let [_, callbackPadding, jsonpString] = // eslint-disable-line
+        responseBody.match(jsonpRegex) || [];
+
+      // Make sure this is a valid JSON object first. If so, nicely display
+      // the parsing results in a variables view. Otherwise, simply show
+      // the contents as plain text.
+      if (callbackPadding && jsonpString) {
+        try {
+          jsonObject = JSON.parse(jsonpString);
+        } catch (e) {
+          jsonObjectParseError = e;
+        }
+      }
+
+      // Valid JSON or JSONP.
+      if (jsonObject) {
+        $("#response-content-json-box").hidden = false;
+        let jsonScopeName = callbackPadding
+          ? L10N.getFormatStr("jsonpScopeName", callbackPadding)
+          : L10N.getStr("jsonScopeName");
+
+        let jsonVar = { label: jsonScopeName, rawObject: jsonObject };
+        yield this._json.controller.setSingleVariable(jsonVar).expanded;
+      } else {
+        // Malformed JSON.
+        $("#response-content-textarea-box").hidden = false;
+        let infoHeader = $("#response-content-info-header");
+        infoHeader.setAttribute("value", jsonObjectParseError);
+        infoHeader.setAttribute("tooltiptext", jsonObjectParseError);
+        infoHeader.hidden = false;
+
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        editor.setMode(Editor.modes.js);
+        editor.setText(responseBody);
+      }
+    } else if (mimeType.includes("image/")) {
+      // Handle images.
+      $("#response-content-image-box").setAttribute("align", "center");
+      $("#response-content-image-box").setAttribute("pack", "center");
+      $("#response-content-image-box").hidden = false;
+      $("#response-content-image").src = formDataURI(mimeType, encoding, responseBody);
+
+      // Immediately display additional information about the image:
+      // file name, mime type and encoding.
+      $("#response-content-image-name-value").setAttribute("value",
+        NetworkHelper.nsIURL(url).fileName);
+      $("#response-content-image-mime-value").setAttribute("value", mimeType);
+
+      // Wait for the image to load in order to display the width and height.
+      $("#response-content-image").onload = e => {
+        // XUL images are majestic so they don't bother storing their dimensions
+        // in width and height attributes like the rest of the folk. Hack around
+        // this by getting the bounding client rect and subtracting the margins.
+        let { width, height } = e.target.getBoundingClientRect();
+        let dimensions = (width - 2) + " \u00D7 " + (height - 2);
+        $("#response-content-image-dimensions-value").setAttribute("value",
+          dimensions);
+      };
+    } else {
+      $("#response-content-textarea-box").hidden = false;
+      let editor = yield NetMonitorView.editor("#response-content-textarea");
+      editor.setMode(Editor.modes.text);
+      editor.setText(responseBody);
+
+      // Maybe set a more appropriate mode in the Source Editor if possible,
+      // but avoid doing this for very large files.
+      if (responseBody.length < SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE) {
+        let mapping = Object.keys(CONTENT_MIME_TYPE_MAPPINGS).find(key => {
+          return mimeType.includes(key);
+        });
+
+        if (mapping) {
+          editor.setMode(CONTENT_MIME_TYPE_MAPPINGS[mapping]);
+        }
+      }
+    }
+
+    window.emit(EVENTS.RESPONSE_BODY_DISPLAYED);
+  }),
+
+  /**
+   * Sets the timings information shown in this view.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  _setTimingsInformation: function (response) {
+    if (!response) {
+      return;
+    }
+    let { blocked, dns, connect, send, wait, receive } = response.timings;
+
+    let tabboxWidth = $("#details-pane").getAttribute("width");
+
+    // Other nodes also take some space.
+    let availableWidth = tabboxWidth / 2;
+    let scale = (response.totalTime > 0 ?
+                 Math.max(availableWidth / response.totalTime, 0) :
+                 0);
+
+    $("#timings-summary-blocked .requests-menu-timings-box")
+      .setAttribute("width", blocked * scale);
+    $("#timings-summary-blocked .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", blocked));
+
+    $("#timings-summary-dns .requests-menu-timings-box")
+      .setAttribute("width", dns * scale);
+    $("#timings-summary-dns .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", dns));
+
+    $("#timings-summary-connect .requests-menu-timings-box")
+      .setAttribute("width", connect * scale);
+    $("#timings-summary-connect .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", connect));
+
+    $("#timings-summary-send .requests-menu-timings-box")
+      .setAttribute("width", send * scale);
+    $("#timings-summary-send .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", send));
+
+    $("#timings-summary-wait .requests-menu-timings-box")
+      .setAttribute("width", wait * scale);
+    $("#timings-summary-wait .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", wait));
+
+    $("#timings-summary-receive .requests-menu-timings-box")
+      .setAttribute("width", receive * scale);
+    $("#timings-summary-receive .requests-menu-timings-total")
+      .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", receive));
+
+    $("#timings-summary-dns .requests-menu-timings-box")
+      .style.transform = "translateX(" + (scale * blocked) + "px)";
+    $("#timings-summary-connect .requests-menu-timings-box")
+      .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";
+    $("#timings-summary-send .requests-menu-timings-box")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect)) + "px)";
+    $("#timings-summary-wait .requests-menu-timings-box")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect + send)) + "px)";
+    $("#timings-summary-receive .requests-menu-timings-box")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect + send + wait)) +
+          "px)";
+
+    $("#timings-summary-dns .requests-menu-timings-total")
+      .style.transform = "translateX(" + (scale * blocked) + "px)";
+    $("#timings-summary-connect .requests-menu-timings-total")
+      .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";
+    $("#timings-summary-send .requests-menu-timings-total")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect)) + "px)";
+    $("#timings-summary-wait .requests-menu-timings-total")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect + send)) + "px)";
+    $("#timings-summary-receive .requests-menu-timings-total")
+      .style.transform =
+        "translateX(" + (scale * (blocked + dns + connect + send + wait)) +
+         "px)";
+  },
+
+  /**
+   * Sets the preview for HTML responses shown in this view.
+   *
+   * @param object response
+   *        The message received from the server.
+   * @return object
+   *        A promise that is resolved when the html preview is rendered.
+   */
+  _setHtmlPreview: Task.async(function* (response) {
+    if (!response) {
+      return promise.resolve();
+    }
+    let { text } = response.content;
+    let responseBody = yield gNetwork.getString(text);
+
+    // Always disable JS when previewing HTML responses.
+    let iframe = $("#response-preview");
+    iframe.contentDocument.docShell.allowJavascript = false;
+    iframe.contentDocument.documentElement.innerHTML = responseBody;
+
+    window.emit(EVENTS.RESPONSE_HTML_PREVIEW_DISPLAYED);
+    return undefined;
+  }),
+
+  /**
+   * Sets the security information shown in this view.
+   *
+   * @param object securityInfo
+   *        The data received from server
+   * @param string url
+   *        The URL of this request
+   * @return object
+   *        A promise that is resolved when the security info is rendered.
+   */
+  _setSecurityInfo: Task.async(function* (securityInfo, url) {
+    if (!securityInfo) {
+      // We don't have security info. This could mean one of two things:
+      // 1) This connection is not secure and this tab is not visible and thus
+      //    we shouldn't be here.
+      // 2) We have already received securityState and the tab is visible BUT
+      //    the rest of the information is still on its way. Once it arrives
+      //    this method is called again.
+      return;
+    }
+
+    /**
+     * A helper that sets value and tooltiptext attributes of an element to
+     * specified value.
+     *
+     * @param string selector
+     *        A selector for the element.
+     * @param string value
+     *        The value to set. If this evaluates to false a placeholder string
+     *        <Not Available> is used instead.
+     */
+    function setValue(selector, value) {
+      let label = $(selector);
+      if (!value) {
+        label.setAttribute("value", L10N.getStr(
+          "netmonitor.security.notAvailable"));
+        label.setAttribute("tooltiptext", label.getAttribute("value"));
+      } else {
+        label.setAttribute("value", value);
+        label.setAttribute("tooltiptext", value);
+      }
+    }
+
+    let errorbox = $("#security-error");
+    let infobox = $("#security-information");
+
+    if (securityInfo.state === "secure" || securityInfo.state === "weak") {
+      infobox.hidden = false;
+      errorbox.hidden = true;
+
+      // Warning icons
+      let cipher = $("#security-warning-cipher");
+
+      if (securityInfo.state === "weak") {
+        cipher.hidden = securityInfo.weaknessReasons.indexOf("cipher") === -1;
+      } else {
+        cipher.hidden = true;
+      }
+
+      let enabledLabel = L10N.getStr("netmonitor.security.enabled");
+      let disabledLabel = L10N.getStr("netmonitor.security.disabled");
+
+      // Connection parameters
+      setValue("#security-protocol-version-value",
+        securityInfo.protocolVersion);
+      setValue("#security-ciphersuite-value", securityInfo.cipherSuite);
+
+      // Host header
+      let domain = getUriHostPort(url);
+      let hostHeader = L10N.getFormatStr("netmonitor.security.hostHeader",
+        domain);
+      setValue("#security-info-host-header", hostHeader);
+
+      // Parameters related to the domain
+      setValue("#security-http-strict-transport-security-value",
+                securityInfo.hsts ? enabledLabel : disabledLabel);
+
+      setValue("#security-public-key-pinning-value",
+                securityInfo.hpkp ? enabledLabel : disabledLabel);
+
+      // Certificate parameters
+      let cert = securityInfo.cert;
+      setValue("#security-cert-subject-cn", cert.subject.commonName);
+      setValue("#security-cert-subject-o", cert.subject.organization);
+      setValue("#security-cert-subject-ou", cert.subject.organizationalUnit);
+
+      setValue("#security-cert-issuer-cn", cert.issuer.commonName);
+      setValue("#security-cert-issuer-o", cert.issuer.organization);
+      setValue("#security-cert-issuer-ou", cert.issuer.organizationalUnit);
+
+      setValue("#security-cert-validity-begins", cert.validity.start);
+      setValue("#security-cert-validity-expires", cert.validity.end);
+
+      setValue("#security-cert-sha1-fingerprint", cert.fingerprint.sha1);
+      setValue("#security-cert-sha256-fingerprint", cert.fingerprint.sha256);
+    } else {
+      infobox.hidden = true;
+      errorbox.hidden = false;
+
+      // Strip any HTML from the message.
+      let plain = new DOMParser().parseFromString(securityInfo.errorMessage,
+        "text/html");
+      setValue("#security-error-message", plain.body.textContent);
+    }
+  }),
+
+  _dataSrc: null,
+  _headers: null,
+  _cookies: null,
+  _params: null,
+  _json: null,
+  _paramsQueryString: "",
+  _paramsFormData: "",
+  _paramsPostPayload: "",
+  _requestHeaders: "",
+  _responseHeaders: "",
+  _requestCookies: "",
+  _responseCookies: ""
+};
+
+/**
+ * DOM query helper.
+ * TODO: Move it into "dom-utils.js" module and "require" it when needed.
+ */
+var $ = (selector, target = document) => target.querySelector(selector);
+var $all = (selector, target = document) => target.querySelectorAll(selector);
+
+/**
+ * Makes sure certain properties are available on all objects in a data store.
+ *
+ * @param array dataStore
+ *        The request view object from which to fetch the item list.
+ * @param array mandatoryFields
+ *        A list of strings representing properties of objects in dataStore.
+ * @return object
+ *         A promise resolved when all objects in dataStore contain the
+ *         properties defined in mandatoryFields.
+ */
+function whenDataAvailable(requestsView, mandatoryFields) {
+  let deferred = promise.defer();
+
+  let interval = setInterval(() => {
+    const { attachments } = requestsView;
+    if (attachments.length > 0 && attachments.every(item => {
+      return mandatoryFields.every(field => field in item);
+    })) {
+      clearInterval(interval);
+      clearTimeout(timer);
+      deferred.resolve();
+    }
+  }, WDA_DEFAULT_VERIFY_INTERVAL);
+
+  let timer = setTimeout(() => {
+    clearInterval(interval);
+    deferred.reject(new Error("Timed out while waiting for data"));
+  }, WDA_DEFAULT_GIVE_UP_TIMEOUT);
+
+  return deferred.promise;
+}
+
+/**
+ * Preliminary setup for the NetMonitorView object.
+ */
+NetMonitorView.Toolbar = new ToolbarView();
+NetMonitorView.RequestsMenu = new RequestsMenuView();
+NetMonitorView.Sidebar = new SidebarView();
+NetMonitorView.CustomRequest = new CustomRequestView();
+NetMonitorView.NetworkDetails = new NetworkDetailsView();
+NetMonitorView.PerformanceStatistics = new PerformanceStatisticsView();
diff --git a/devtools/client/netmonitor/netmonitor.xul b/devtools/client/netmonitor/netmonitor.xul
new file mode 100644
index 000000000..bb580f7ad
--- /dev/null
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -0,0 +1,741 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/netmonitor.css" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <script type="application/javascript;version=1.8"
+          src="chrome://devtools/content/shared/theme-switching.js"/>
+  <script type="text/javascript" src="netmonitor-controller.js"/>
+  <script type="text/javascript" src="netmonitor-view.js"/>
+
+  <deck id="body"
+        class="theme-sidebar"
+        flex="1"
+        data-localization-bundle="devtools/client/locales/netmonitor.properties">
+
+    <vbox id="network-inspector-view" flex="1">
+      <hbox id="netmonitor-toolbar" class="devtools-toolbar">
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="react-clear-button-hook"/>
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="react-filter-buttons-hook"/>
+        <spacer id="requests-menu-spacer"
+                flex="1"/>
+        <toolbarbutton id="requests-menu-network-summary-button"
+                       class="devtools-toolbarbutton icon-and-text"
+                       data-localization="tooltiptext=netmonitor.toolbar.perf"/>
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="react-search-box-hook"/>
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="react-details-pane-toggle-hook"/>
+      </hbox>
+      <hbox id="network-table-and-sidebar"
+            class="devtools-responsive-container"
+            flex="1">
+        <vbox id="network-table" flex="1" class="devtools-main-content">
+          <toolbar id="requests-menu-toolbar"
+                   class="devtools-toolbar"
+                   align="center">
+            <hbox id="toolbar-labels" flex="1">
+              <hbox id="requests-menu-status-header-box"
+                    class="requests-menu-header requests-menu-status"
+                    align="center">
+                <button id="requests-menu-status-button"
+                        class="requests-menu-header-button requests-menu-status"
+                        data-key="status"
+                        data-localization="label=netmonitor.toolbar.status3"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-method-header-box"
+                    class="requests-menu-header requests-menu-method"
+                    align="center">
+                <button id="requests-menu-method-button"
+                        class="requests-menu-header-button requests-menu-method"
+                        data-key="method"
+                        data-localization="label=netmonitor.toolbar.method"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-icon-and-file-header-box"
+                    class="requests-menu-header requests-menu-icon-and-file"
+                    align="center">
+                <button id="requests-menu-file-button"
+                        class="requests-menu-header-button requests-menu-file"
+                        data-key="file"
+                        data-localization="label=netmonitor.toolbar.file"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-domain-header-box"
+                    class="requests-menu-header requests-menu-security-and-domain"
+                    align="center">
+                <button id="requests-menu-domain-button"
+                        class="requests-menu-header-button requests-menu-security-and-domain"
+                        data-key="domain"
+                        data-localization="label=netmonitor.toolbar.domain"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-cause-header-box"
+                    class="requests-menu-header requests-menu-cause"
+                    align="center">
+                <button id="requests-menu-cause-button"
+                        class="requests-menu-header-button requests-menu-cause"
+                        data-key="cause"
+                        data-localization="label=netmonitor.toolbar.cause"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-type-header-box"
+                    class="requests-menu-header requests-menu-type"
+                    align="center">
+                <button id="requests-menu-type-button"
+                        class="requests-menu-header-button requests-menu-type"
+                        data-key="type"
+                        data-localization="label=netmonitor.toolbar.type"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-transferred-header-box"
+                    class="requests-menu-header requests-menu-transferred"
+                    align="center">
+                <button id="requests-menu-transferred-button"
+                        class="requests-menu-header-button requests-menu-transferred"
+                        data-key="transferred"
+                        data-localization="label=netmonitor.toolbar.transferred"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-size-header-box"
+                    class="requests-menu-header requests-menu-size"
+                    align="center">
+                <button id="requests-menu-size-button"
+                        class="requests-menu-header-button requests-menu-size"
+                        data-key="size"
+                        data-localization="label=netmonitor.toolbar.size"
+                        crop="end"
+                        flex="1">
+                </button>
+              </hbox>
+              <hbox id="requests-menu-waterfall-header-box"
+                    class="requests-menu-header requests-menu-waterfall"
+                    align="center"
+                    flex="1">
+                <button id="requests-menu-waterfall-button"
+                        class="requests-menu-header-button requests-menu-waterfall"
+                        data-key="waterfall"
+                        pack="start"
+                        data-localization="label=netmonitor.toolbar.waterfall"
+                        flex="1">
+                  <image id="requests-menu-waterfall-image"/>
+                  <box id="requests-menu-waterfall-label-wrapper">
+                    <label id="requests-menu-waterfall-label"
+                           class="plain requests-menu-waterfall"
+                           data-localization="value=netmonitor.toolbar.waterfall"/>
+                  </box>
+                </button>
+              </hbox>
+            </hbox>
+          </toolbar>
+
+          <vbox id="requests-menu-empty-notice"
+                class="side-menu-widget-empty-text">
+            <hbox id="notice-reload-message" align="center">
+              <label data-localization="content=netmonitor.reloadNotice1"/>
+              <button id="requests-menu-reload-notice-button"
+                      class="devtools-toolbarbutton"
+                      standalone="true"
+                      data-localization="label=netmonitor.reloadNotice2"/>
+              <label data-localization="content=netmonitor.reloadNotice3"/>
+            </hbox>
+            <hbox id="notice-perf-message" align="center">
+              <label data-localization="content=netmonitor.perfNotice1"/>
+              <button id="requests-menu-perf-notice-button"
+                      class="devtools-toolbarbutton"
+                      standalone="true"
+                      data-localization="tooltiptext=netmonitor.perfNotice3"/>
+              <label data-localization="content=netmonitor.perfNotice2"/>
+            </hbox>
+          </vbox>
+
+          <vbox id="requests-menu-contents" flex="1">
+            <hbox id="requests-menu-item-template" hidden="true">
+              <hbox class="requests-menu-subitem requests-menu-status"
+                    align="center">
+                <box class="requests-menu-status-icon"/>
+                <label class="plain requests-menu-status-code"
+                       crop="end"/>
+              </hbox>
+              <hbox class="requests-menu-subitem requests-menu-method-box"
+                    align="center">
+                <label class="plain requests-menu-method"
+                       crop="end"
+                       flex="1"/>
+              </hbox>
+              <hbox class="requests-menu-subitem requests-menu-icon-and-file"
+                    align="center">
+                <image class="requests-menu-icon" hidden="true"/>
+                <label class="plain requests-menu-file"
+                       crop="end"
+                       flex="1"/>
+              </hbox>
+              <hbox class="requests-menu-subitem requests-menu-security-and-domain"
+                    align="center">
+                <image class="requests-security-state-icon" />
+                <label class="plain requests-menu-domain"
+                       crop="end"
+                       flex="1"/>
+              </hbox>
+              <hbox class="requests-menu-subitem requests-menu-cause" align="center">
+                <label class="requests-menu-cause-stack" value="JS" hidden="true"/>
+                <label class="plain requests-menu-cause-label" flex="1" crop="end"/>
+              </hbox>
+              <label class="plain requests-menu-subitem requests-menu-type"
+                     crop="end"/>
+              <label class="plain requests-menu-subitem requests-menu-transferred"
+                     crop="end"/>
+              <label class="plain requests-menu-subitem requests-menu-size"
+                     crop="end"/>
+              <hbox class="requests-menu-subitem requests-menu-waterfall"
+                    align="center"
+                    flex="1">
+                <hbox class="requests-menu-timings"
+                      align="center">
+                  <label class="plain requests-menu-timings-total"/>
+                </hbox>
+              </hbox>
+            </hbox>
+          </vbox>
+        </vbox>
+
+        <splitter id="network-inspector-view-splitter"
+                  class="devtools-side-splitter"/>
+
+        <deck id="details-pane"
+              hidden="true">
+          <vbox id="custom-pane"
+                class="tabpanel-content">
+            <hbox align="baseline">
+              <label data-localization="content=netmonitor.custom.newRequest"
+                     class="plain tabpanel-summary-label
+                            custom-header"/>
+              <hbox flex="1" pack="end"
+                    class="devtools-toolbarbutton-group">
+                <button id="custom-request-send-button"
+                        class="devtools-toolbarbutton"
+                        data-localization="label=netmonitor.custom.send"/>
+                <button id="custom-request-close-button"
+                        class="devtools-toolbarbutton"
+                        data-localization="label=netmonitor.custom.cancel"/>
+              </hbox>
+            </hbox>
+            <hbox id="custom-method-and-url"
+                  class="tabpanel-summary-container"
+                  align="center">
+              <textbox id="custom-method-value"
+                       data-key="method"/>
+              <textbox id="custom-url-value"
+                       flex="1"
+                       data-key="url"/>
+            </hbox>
+            <vbox id="custom-query"
+                  class="tabpanel-summary-container custom-section">
+              <label class="plain tabpanel-summary-label"
+                     data-localization="content=netmonitor.custom.query"/>
+              <textbox id="custom-query-value"
+                       class="tabpanel-summary-input"
+                       multiline="true"
+                       rows="4"
+                       wrap="off"
+                       data-key="query"/>
+            </vbox>
+            <vbox id="custom-headers"
+                  class="tabpanel-summary-container custom-section">
+              <label class="plain tabpanel-summary-label"
+                     data-localization="content=netmonitor.custom.headers"/>
+              <textbox id="custom-headers-value"
+                       class="tabpanel-summary-input"
+                       multiline="true"
+                       rows="8"
+                       wrap="off"
+                       data-key="headers"/>
+            </vbox>
+            <vbox id="custom-postdata"
+                  class="tabpanel-summary-container custom-section">
+              <label class="plain tabpanel-summary-label"
+                     data-localization="content=netmonitor.custom.postData"/>
+              <textbox id="custom-postdata-value"
+                       class="tabpanel-summary-input"
+                       multiline="true"
+                       rows="6"
+                       wrap="off"
+                       data-key="body"/>
+            </vbox>
+          </vbox>
+          <tabbox id="event-details-pane"
+                  class="devtools-sidebar-tabs"
+                  handleCtrlTab="false">
+            <tabs>
+              <tab id="headers-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.headers"/>
+              <tab id="cookies-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.cookies"/>
+              <tab id="params-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.params"/>
+              <tab id="response-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.response"/>
+              <tab id="timings-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.timings"/>
+              <tab id="security-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.security"/>
+              <tab id="preview-tab"
+                   crop="end"
+                   data-localization="label=netmonitor.tab.preview"/>
+            </tabs>
+            <tabpanels flex="1">
+              <tabpanel id="headers-tabpanel"
+                        class="tabpanel-content">
+                <vbox flex="1">
+                  <hbox id="headers-summary-url"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.summary.url"/>
+                    <textbox id="headers-summary-url-value"
+                             class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                             flex="1"
+                             readonly="true"/>
+                  </hbox>
+                  <hbox id="headers-summary-method"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.summary.method"/>
+                    <label id="headers-summary-method-value"
+                           class="plain tabpanel-summary-value devtools-monospace"
+                           crop="end"
+                           flex="1"/>
+                  </hbox>
+                  <hbox id="headers-summary-address"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.summary.address"/>
+                    <textbox id="headers-summary-address-value"
+                             class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                             flex="1"
+                             readonly="true"/>
+                  </hbox>
+                  <hbox id="headers-summary-status"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.summary.status"/>
+                    <box id="headers-summary-status-circle"
+                         class="requests-menu-status-icon"/>
+                    <label id="headers-summary-status-value"
+                           class="plain tabpanel-summary-value devtools-monospace"
+                           crop="end"
+                           flex="1"/>
+                    <button id="headers-summary-resend"
+                            class="devtools-toolbarbutton"
+                            data-localization="label=netmonitor.summary.editAndResend"/>
+                    <button id="toggle-raw-headers"
+                            class="devtools-toolbarbutton"
+                            data-localization="label=netmonitor.summary.rawHeaders"/>
+                  </hbox>
+                  <hbox id="headers-summary-version"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.summary.version"/>
+                    <label id="headers-summary-version-value"
+                           class="plain tabpanel-summary-value devtools-monospace"
+                           crop="end"
+                           flex="1"/>
+                  </hbox>
+                  <hbox id="raw-headers"
+                        class="tabpanel-summary-container"
+                        align="center"
+                        hidden="true">
+                    <vbox id="raw-request-headers-textarea-box" flex="1" hidden="false">
+                      <label class="plain tabpanel-summary-label"
+                        data-localization="content=netmonitor.summary.rawHeaders.requestHeaders"/>
+                      <textbox id="raw-request-headers-textarea"
+                        class="raw-response-textarea"
+                        flex="1" multiline="true" readonly="true"/>
+                    </vbox>
+                    <vbox id="raw-response-headers-textarea-box" flex="1" hidden="false">
+                      <label class="plain tabpanel-summary-label"
+                        data-localization="content=netmonitor.summary.rawHeaders.responseHeaders"/>
+                      <textbox id="raw-response-headers-textarea"
+                        class="raw-response-textarea"
+                        flex="1" multiline="true" readonly="true"/>
+                    </vbox>
+                  </hbox>
+                  <vbox id="all-headers" flex="1"/>
+                </vbox>
+              </tabpanel>
+              <tabpanel id="cookies-tabpanel"
+                        class="tabpanel-content">
+                <vbox flex="1">
+                  <vbox id="all-cookies" flex="1"/>
+                </vbox>
+              </tabpanel>
+              <tabpanel id="params-tabpanel"
+                        class="tabpanel-content">
+                <vbox flex="1">
+                  <vbox id="request-params-box" flex="1" hidden="true">
+                    <vbox id="request-params" flex="1"/>
+                  </vbox>
+                  <vbox id="request-post-data-textarea-box" flex="1" hidden="true">
+                    <vbox id="request-post-data-textarea" flex="1"/>
+                  </vbox>
+                </vbox>
+              </tabpanel>
+              <tabpanel id="response-tabpanel"
+                        class="tabpanel-content">
+                <vbox flex="1">
+                  <label id="response-content-info-header"/>
+                  <vbox id="response-content-json-box" flex="1" hidden="true">
+                    <vbox id="response-content-json" flex="1" context="network-response-popup" />
+                  </vbox>
+                  <vbox id="response-content-textarea-box" flex="1" hidden="true">
+                    <vbox id="response-content-textarea" flex="1"/>
+                  </vbox>
+                  <vbox id="response-content-image-box" flex="1" hidden="true">
+                    <image id="response-content-image"/>
+                    <hbox>
+                      <label class="plain tabpanel-summary-label"
+                             data-localization="content=netmonitor.response.name"/>
+                      <label id="response-content-image-name-value"
+                             class="plain tabpanel-summary-value devtools-monospace"
+                             crop="end"
+                             flex="1"/>
+                    </hbox>
+                    <hbox>
+                      <label class="plain tabpanel-summary-label"
+                             data-localization="content=netmonitor.response.dimensions"/>
+                      <label id="response-content-image-dimensions-value"
+                             class="plain tabpanel-summary-value devtools-monospace"
+                             crop="end"
+                             flex="1"/>
+                    </hbox>
+                    <hbox>
+                      <label class="plain tabpanel-summary-label"
+                             data-localization="content=netmonitor.response.mime"/>
+                      <label id="response-content-image-mime-value"
+                             class="plain tabpanel-summary-value devtools-monospace"
+                             crop="end"
+                             flex="1"/>
+                    </hbox>
+                  </vbox>
+                </vbox>
+              </tabpanel>
+              <tabpanel id="timings-tabpanel"
+                        class="tabpanel-content">
+                <vbox flex="1">
+                  <hbox id="timings-summary-blocked"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.blocked"/>
+                    <hbox class="requests-menu-timings-box blocked"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                  <hbox id="timings-summary-dns"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.dns"/>
+                    <hbox class="requests-menu-timings-box dns"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                  <hbox id="timings-summary-connect"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.connect"/>
+                    <hbox class="requests-menu-timings-box connect"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                  <hbox id="timings-summary-send"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.send"/>
+                    <hbox class="requests-menu-timings-box send"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                  <hbox id="timings-summary-wait"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.wait"/>
+                    <hbox class="requests-menu-timings-box wait"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                  <hbox id="timings-summary-receive"
+                        class="tabpanel-summary-container"
+                        align="center">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.timings.receive"/>
+                    <hbox class="requests-menu-timings-box receive"/>
+                    <label class="plain requests-menu-timings-total"/>
+                  </hbox>
+                </vbox>
+              </tabpanel>
+              <tabpanel id="security-tabpanel"
+                        class="tabpanel-content">
+                  <vbox id="security-error"
+                        class="tabpanel-summary-container"
+                        flex="1">
+                    <label class="plain tabpanel-summary-label"
+                           data-localization="content=netmonitor.security.error"/>
+                    <hbox class="security-info-section"
+                          flex="1">
+                      <textbox id="security-error-message"
+                               class="plain"
+                               flex="1"
+                               multiline="true"
+                               readonly="true"/>
+                    </hbox>
+                  </vbox>
+                  <vbox id="security-information"
+                        flex="1">
+                    <vbox id="security-info-connection"
+                          class="tabpanel-summary-container">
+                      <label class="plain tabpanel-summary-label"
+                             data-localization="content=netmonitor.security.connection"/>
+                      <vbox class="security-info-section">
+                        <hbox id="security-protocol-version"
+                              class="tabpanel-summary-container"
+                              align="baseline">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=netmonitor.security.protocolVersion"/>
+                          <textbox id="security-protocol-version-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
+                        </hbox>
+                        <hbox id="security-ciphersuite"
+                              class="tabpanel-summary-container"
+                              align="baseline">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=netmonitor.security.cipherSuite"/>
+                          <textbox id="security-ciphersuite-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
+                          <image class="security-warning-icon"
+                                 id="security-warning-cipher"
+                                 data-localization="tooltiptext=netmonitor.security.warning.cipher" />
+                        </hbox>
+                      </vbox>
+                    </vbox>
+                    <vbox id="security-info-domain"
+                          class="tabpanel-summary-container">
+                      <label class="plain tabpanel-summary-label"
+                             id="security-info-host-header"/>
+                      <vbox class="security-info-section">
+                        <hbox id="security-http-strict-transport-security"
+                              class="tabpanel-summary-container"
+                              align="baseline">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=netmonitor.security.hsts"/>
+                          <textbox id="security-http-strict-transport-security-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
+                        </hbox>
+                        <hbox id="security-public-key-pinning"
+                              class="tabpanel-summary-container"
+                              align="baseline">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=netmonitor.security.hpkp"/>
+                          <textbox id="security-public-key-pinning-value"
+                                   class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                   flex="1"
+                                   readonly="true"/>
+                        </hbox>
+                      </vbox>
+                    </vbox>
+                    <vbox id="security-info-certificate"
+                          class="tabpanel-summary-container">
+                        <label class="plain tabpanel-summary-label"
+                               data-localization="content=netmonitor.security.certificate"/>
+                      <vbox class="security-info-section">
+                        <vbox class="tabpanel-summary-container">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=certmgr.subjectinfo.label" flex="1"/>
+                        </vbox>
+                        <vbox class="security-info-section">
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.cn"/>
+                            <textbox id="security-cert-subject-cn"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.o"/>
+                            <textbox id="security-cert-subject-o"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.ou"/>
+                            <textbox id="security-cert-subject-ou"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                        </vbox>
+                        <vbox class="tabpanel-summary-container">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=certmgr.issuerinfo.label"
+                                 flex="1"/>
+                        </vbox>
+                        <vbox class="security-info-section">
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.cn"/>
+                            <textbox id="security-cert-issuer-cn"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.o"/>
+                            <textbox id="security-cert-issuer-o"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.ou"/>
+                            <textbox id="security-cert-issuer-ou"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                        </vbox>
+                        <vbox class="tabpanel-summary-container">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=certmgr.periodofvalidity.label"
+                                 flex="1"/>
+                        </vbox>
+                        <vbox class="security-info-section">
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.begins"/>
+                            <textbox id="security-cert-validity-begins"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.expires"/>
+                            <textbox id="security-cert-validity-expires"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                        </vbox>
+                        <vbox class="tabpanel-summary-container">
+                          <label class="plain tabpanel-summary-label"
+                                 data-localization="content=certmgr.fingerprints.label"
+                                 flex="1"/>
+                        </vbox>
+                        <vbox class="security-info-section">
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.sha256fingerprint"/>
+                            <textbox id="security-cert-sha256-fingerprint"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                          <hbox class="tabpanel-summary-container"
+                                align="baseline">
+                            <label class="plain tabpanel-summary-label"
+                                   data-localization="content=certmgr.certdetail.sha1fingerprint"/>
+                            <textbox id="security-cert-sha1-fingerprint"
+                                     class="plain tabpanel-summary-value devtools-monospace cropped-textbox"
+                                     flex="1"
+                                     readonly="true"/>
+                          </hbox>
+                        </vbox>
+                      </vbox>
+                    </vbox>
+                  </vbox>
+              </tabpanel>
+              <tabpanel id="preview-tabpanel"
+                        class="tabpanel-content">
+                <html:iframe id="response-preview"
+                             frameborder="0"
+                             sandbox=""/>
+              </tabpanel>
+            </tabpanels>
+          </tabbox>
+        </deck>
+      </hbox>
+
+    </vbox>
+
+    <box id="network-statistics-view">
+      <toolbar id="network-statistics-toolbar"
+               class="devtools-toolbar">
+        <button id="network-statistics-back-button"
+                class="devtools-toolbarbutton"
+                data-localization="label=netmonitor.backButton"/>
+      </toolbar>
+      <box id="network-statistics-charts"
+           class="devtools-responsive-container"
+           flex="1">
+        <vbox id="primed-cache-chart" pack="center" flex="1"/>
+        <splitter id="network-statistics-view-splitter"
+                  class="devtools-side-splitter"/>
+        <vbox id="empty-cache-chart" pack="center" flex="1"/>
+      </box>
+    </box>
+
+  </deck>
+
+</window>
diff --git a/devtools/client/netmonitor/panel.js b/devtools/client/netmonitor/panel.js
new file mode 100644
index 000000000..5195e4178
--- /dev/null
+++ b/devtools/client/netmonitor/panel.js
@@ -0,0 +1,77 @@
+/* -*- 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/. */
+"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._view = this.panelWin.NetMonitorView;
+  this._controller = this.panelWin.NetMonitorController;
+  this._controller._target = this.target;
+  this._controller._toolbox = this._toolbox;
+
+  EventEmitter.decorate(this);
+}
+
+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;
+    }
+    // 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._controller.startupNetMonitor();
+    this.isReady = true;
+    this.emit("ready");
+
+    deferred.resolve(this);
+    return this._opening;
+  }),
+
+  // DevToolPanel API
+
+  get target() {
+    return this._toolbox.target;
+  },
+
+  destroy: Task.async(function* () {
+    if (this._destroying) {
+      return this._destroying;
+    }
+    let deferred = promise.defer();
+    this._destroying = deferred.promise;
+
+    yield this._controller.shutdownNetMonitor();
+    this.emit("destroyed");
+
+    deferred.resolve();
+    return this._destroying;
+  })
+};
diff --git a/devtools/client/netmonitor/performance-statistics-view.js b/devtools/client/netmonitor/performance-statistics-view.js
new file mode 100644
index 000000000..c712c083d
--- /dev/null
+++ b/devtools/client/netmonitor/performance-statistics-view.js
@@ -0,0 +1,265 @@
+/* -*- 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/. */
+/* import-globals-from ./netmonitor-controller.js */
+/* globals $ */
+"use strict";
+
+const {PluralForm} = require("devtools/shared/plural-form");
+const {Filters} = require("./filter-predicates");
+const {L10N} = require("./l10n");
+const Actions = require("./actions/index");
+
+const REQUEST_TIME_DECIMALS = 2;
+const CONTENT_SIZE_DECIMALS = 2;
+
+// px
+const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;
+
+/**
+ * Functions handling the performance statistics view.
+ */
+function PerformanceStatisticsView() {
+}
+
+PerformanceStatisticsView.prototype = {
+  /**
+   * Initialization function, called when the debugger is started.
+   */
+  initialize: function (store) {
+    this.store = store;
+  },
+
+  /**
+   * Initializes and displays empty charts in this container.
+   */
+  displayPlaceholderCharts: function () {
+    this._createChart({
+      id: "#primed-cache-chart",
+      title: "charts.cacheEnabled"
+    });
+    this._createChart({
+      id: "#empty-cache-chart",
+      title: "charts.cacheDisabled"
+    });
+    window.emit(EVENTS.PLACEHOLDER_CHARTS_DISPLAYED);
+  },
+
+  /**
+   * Populates and displays the primed cache chart in this container.
+   *
+   * @param array items
+   *        @see this._sanitizeChartDataSource
+   */
+  createPrimedCacheChart: function (items) {
+    this._createChart({
+      id: "#primed-cache-chart",
+      title: "charts.cacheEnabled",
+      data: this._sanitizeChartDataSource(items),
+      strings: this._commonChartStrings,
+      totals: this._commonChartTotals,
+      sorted: true
+    });
+    window.emit(EVENTS.PRIMED_CACHE_CHART_DISPLAYED);
+  },
+
+  /**
+   * Populates and displays the empty cache chart in this container.
+   *
+   * @param array items
+   *        @see this._sanitizeChartDataSource
+   */
+  createEmptyCacheChart: function (items) {
+    this._createChart({
+      id: "#empty-cache-chart",
+      title: "charts.cacheDisabled",
+      data: this._sanitizeChartDataSource(items, true),
+      strings: this._commonChartStrings,
+      totals: this._commonChartTotals,
+      sorted: true
+    });
+    window.emit(EVENTS.EMPTY_CACHE_CHART_DISPLAYED);
+  },
+
+  /**
+   * Common stringifier predicates used for items and totals in both the
+   * "primed" and "empty" cache charts.
+   */
+  _commonChartStrings: {
+    size: value => {
+      let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("charts.sizeKB", string);
+    },
+    time: value => {
+      let string = L10N.numberWithDecimals(value / 1000, REQUEST_TIME_DECIMALS);
+      return L10N.getFormatStr("charts.totalS", string);
+    }
+  },
+  _commonChartTotals: {
+    size: total => {
+      let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("charts.totalSize", string);
+    },
+    time: total => {
+      let seconds = total / 1000;
+      let string = L10N.numberWithDecimals(seconds, REQUEST_TIME_DECIMALS);
+      return PluralForm.get(seconds,
+        L10N.getStr("charts.totalSeconds")).replace("#1", string);
+    },
+    cached: total => {
+      return L10N.getFormatStr("charts.totalCached", total);
+    },
+    count: total => {
+      return L10N.getFormatStr("charts.totalCount", total);
+    }
+  },
+
+  /**
+   * Adds a specific chart to this container.
+   *
+   * @param object
+   *        An object containing all or some the following properties:
+   *          - id: either "#primed-cache-chart" or "#empty-cache-chart"
+   *          - title/data/strings/totals/sorted: @see Chart.jsm for details
+   */
+  _createChart: function ({ id, title, data, strings, totals, sorted }) {
+    let container = $(id);
+
+    // Nuke all existing charts of the specified type.
+    while (container.hasChildNodes()) {
+      container.firstChild.remove();
+    }
+
+    // Create a new chart.
+    let chart = Chart.PieTable(document, {
+      diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
+      title: L10N.getStr(title),
+      data: data,
+      strings: strings,
+      totals: totals,
+      sorted: sorted
+    });
+
+    chart.on("click", (_, item) => {
+      // Reset FilterButtons and enable one filter exclusively
+      this.store.dispatch(Actions.enableFilterTypeOnly(item.label));
+      NetMonitorView.showNetworkInspectorView();
+    });
+
+    container.appendChild(chart.node);
+  },
+
+  /**
+   * Sanitizes the data source used for creating charts, to follow the
+   * data format spec defined in Chart.jsm.
+   *
+   * @param array items
+   *        A collection of request items used as the data source for the chart.
+   * @param boolean emptyCache
+   *        True if the cache is considered enabled, false for disabled.
+   */
+  _sanitizeChartDataSource: function (items, emptyCache) {
+    let data = [
+      "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "ws", "other"
+    ].map(e => ({
+      cached: 0,
+      count: 0,
+      label: e,
+      size: 0,
+      time: 0
+    }));
+
+    for (let requestItem of items) {
+      let details = requestItem.attachment;
+      let type;
+
+      if (Filters.html(details)) {
+        // "html"
+        type = 0;
+      } else if (Filters.css(details)) {
+        // "css"
+        type = 1;
+      } else if (Filters.js(details)) {
+        // "js"
+        type = 2;
+      } else if (Filters.fonts(details)) {
+        // "fonts"
+        type = 4;
+      } else if (Filters.images(details)) {
+        // "images"
+        type = 5;
+      } else if (Filters.media(details)) {
+        // "media"
+        type = 6;
+      } else if (Filters.flash(details)) {
+        // "flash"
+        type = 7;
+      } else if (Filters.ws(details)) {
+        // "ws"
+        type = 8;
+      } else if (Filters.xhr(details)) {
+        // Verify XHR last, to categorize other mime types in their own blobs.
+        // "xhr"
+        type = 3;
+      } else {
+        // "other"
+        type = 9;
+      }
+
+      if (emptyCache || !responseIsFresh(details)) {
+        data[type].time += details.totalTime || 0;
+        data[type].size += details.contentSize || 0;
+      } else {
+        data[type].cached++;
+      }
+      data[type].count++;
+    }
+
+    return data.filter(e => e.count > 0);
+  },
+};
+
+/**
+ * Checks if the "Expiration Calculations" defined in section 13.2.4 of the
+ * "HTTP/1.1: Caching in HTTP" spec holds true for a collection of headers.
+ *
+ * @param object
+ *        An object containing the { responseHeaders, status } properties.
+ * @return boolean
+ *         True if the response is fresh and loaded from cache.
+ */
+function responseIsFresh({ responseHeaders, status }) {
+  // Check for a "304 Not Modified" status and response headers availability.
+  if (status != 304 || !responseHeaders) {
+    return false;
+  }
+
+  let list = responseHeaders.headers;
+  let cacheControl = list.filter(e => {
+    return e.name.toLowerCase() == "cache-control";
+  })[0];
+
+  let expires = list.filter(e => e.name.toLowerCase() == "expires")[0];
+
+  // Check the "Cache-Control" header for a maximum age value.
+  if (cacheControl) {
+    let maxAgeMatch =
+      cacheControl.value.match(/s-maxage\s*=\s*(\d+)/) ||
+      cacheControl.value.match(/max-age\s*=\s*(\d+)/);
+
+    if (maxAgeMatch && maxAgeMatch.pop() > 0) {
+      return true;
+    }
+  }
+
+  // Check the "Expires" header for a valid date.
+  if (expires && Date.parse(expires.value)) {
+    return true;
+  }
+
+  return false;
+}
+
+exports.PerformanceStatisticsView = PerformanceStatisticsView;
diff --git a/devtools/client/netmonitor/prefs.js b/devtools/client/netmonitor/prefs.js
new file mode 100644
index 000000000..6d4909d7c
--- /dev/null
+++ b/devtools/client/netmonitor/prefs.js
@@ -0,0 +1,14 @@
+"use strict";
+
+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"],
+  statistics: ["Bool", "statistics"],
+  filters: ["Json", "filters"]
+});
diff --git a/devtools/client/netmonitor/reducers/filters.js b/devtools/client/netmonitor/reducers/filters.js
new file mode 100644
index 000000000..cc81370d8
--- /dev/null
+++ b/devtools/client/netmonitor/reducers/filters.js
@@ -0,0 +1,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/. */
+"use strict";
+
+const I = require("devtools/client/shared/vendor/immutable");
+const {
+  TOGGLE_FILTER_TYPE,
+  ENABLE_FILTER_TYPE_ONLY,
+  SET_FILTER_TEXT,
+} = require("../constants");
+
+const FilterTypes = I.Record({
+  all: false,
+  html: false,
+  css: false,
+  js: false,
+  xhr: false,
+  fonts: false,
+  images: false,
+  media: false,
+  flash: false,
+  ws: false,
+  other: false,
+});
+
+const Filters = I.Record({
+  types: new FilterTypes({ all: true }),
+  url: "",
+});
+
+function toggleFilterType(state, action) {
+  let { filter } = action;
+  let newState;
+
+  // Ignore unknown filter type
+  if (!state.has(filter)) {
+    return state;
+  }
+  if (filter === "all") {
+    return new FilterTypes({ all: true });
+  }
+
+  newState = state.withMutations(types => {
+    types.set("all", false);
+    types.set(filter, !state.get(filter));
+  });
+
+  if (!newState.includes(true)) {
+    newState = new FilterTypes({ all: true });
+  }
+
+  return newState;
+}
+
+function enableFilterTypeOnly(state, action) {
+  let { filter } = action;
+
+  // Ignore unknown filter type
+  if (!state.has(filter)) {
+    return state;
+  }
+
+  return new FilterTypes({ [filter]: true });
+}
+
+function filters(state = new Filters(), action) {
+  switch (action.type) {
+    case TOGGLE_FILTER_TYPE:
+      return state.set("types", toggleFilterType(state.types, action));
+    case ENABLE_FILTER_TYPE_ONLY:
+      return state.set("types", enableFilterTypeOnly(state.types, action));
+    case SET_FILTER_TEXT:
+      return state.set("url", action.url);
+    default:
+      return state;
+  }
+}
+
+module.exports = filters;
diff --git a/devtools/client/netmonitor/reducers/index.js b/devtools/client/netmonitor/reducers/index.js
new file mode 100644
index 000000000..58638a030
--- /dev/null
+++ b/devtools/client/netmonitor/reducers/index.js
@@ -0,0 +1,13 @@
+/* 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 { combineReducers } = require("devtools/client/shared/vendor/redux");
+const filters = require("./filters");
+const sidebar = require("./sidebar");
+
+module.exports = combineReducers({
+  filters,
+  sidebar,
+});
diff --git a/devtools/client/netmonitor/reducers/moz.build b/devtools/client/netmonitor/reducers/moz.build
new file mode 100644
index 000000000..477cafb41
--- /dev/null
+++ b/devtools/client/netmonitor/reducers/moz.build
@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'filters.js',
+    'index.js',
+    'sidebar.js',
+)
diff --git a/devtools/client/netmonitor/reducers/sidebar.js b/devtools/client/netmonitor/reducers/sidebar.js
new file mode 100644
index 000000000..eaa8b63df
--- /dev/null
+++ b/devtools/client/netmonitor/reducers/sidebar.js
@@ -0,0 +1,43 @@
+/* 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 {
+  DISABLE_TOGGLE_BUTTON,
+  SHOW_SIDEBAR,
+  TOGGLE_SIDEBAR,
+} = require("../constants");
+
+const SidebarState = I.Record({
+  toggleButtonDisabled: true,
+  visible: false,
+});
+
+function disableToggleButton(state, action) {
+  return state.set("toggleButtonDisabled", action.disabled);
+}
+
+function showSidebar(state, action) {
+  return state.set("visible", action.visible);
+}
+
+function toggleSidebar(state, action) {
+  return state.set("visible", !state.visible);
+}
+
+function sidebar(state = new SidebarState(), action) {
+  switch (action.type) {
+    case DISABLE_TOGGLE_BUTTON:
+      return disableToggleButton(state, action);
+    case SHOW_SIDEBAR:
+      return showSidebar(state, action);
+    case TOGGLE_SIDEBAR:
+      return toggleSidebar(state, action);
+    default:
+      return state;
+  }
+}
+
+module.exports = sidebar;
diff --git a/devtools/client/netmonitor/request-list-context-menu.js b/devtools/client/netmonitor/request-list-context-menu.js
new file mode 100644
index 000000000..215296265
--- /dev/null
+++ b/devtools/client/netmonitor/request-list-context-menu.js
@@ -0,0 +1,357 @@
+/* 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 NetMonitorController, NetMonitorView, gNetwork */
+
+"use strict";
+
+const Services = require("Services");
+const { Task } = require("devtools/shared/task");
+const { Curl } = require("devtools/client/shared/curl");
+const { gDevTools } = require("devtools/client/framework/devtools");
+const Menu = require("devtools/client/framework/menu");
+const MenuItem = require("devtools/client/framework/menu-item");
+const { L10N } = require("./l10n");
+const { formDataURI, getFormDataSections } = require("./request-utils");
+
+loader.lazyRequireGetter(this, "HarExporter",
+  "devtools/client/netmonitor/har/har-exporter", true);
+
+loader.lazyServiceGetter(this, "clipboardHelper",
+  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
+
+loader.lazyRequireGetter(this, "NetworkHelper",
+  "devtools/shared/webconsole/network-helper");
+
+function RequestListContextMenu() {}
+
+RequestListContextMenu.prototype = {
+  get selectedItem() {
+    return NetMonitorView.RequestsMenu.selectedItem;
+  },
+
+  get items() {
+    return NetMonitorView.RequestsMenu.items;
+  },
+
+  /**
+   * Handle the context menu opening. Hide items if no request is selected.
+   * Since visible attribute only accept boolean value but the method call may
+   * return undefined, we use !! to force convert any object to boolean
+   */
+  open({ screenX = 0, screenY = 0 } = {}) {
+    let selectedItem = this.selectedItem;
+
+    let menu = new Menu();
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-url",
+      label: L10N.getStr("netmonitor.context.copyUrl"),
+      accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"),
+      visible: !!selectedItem,
+      click: () => this.copyUrl(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-url-params",
+      label: L10N.getStr("netmonitor.context.copyUrlParams"),
+      accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"),
+      visible: !!(selectedItem &&
+               NetworkHelper.nsIURL(selectedItem.attachment.url).query),
+      click: () => this.copyUrlParams(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-post-data",
+      label: L10N.getStr("netmonitor.context.copyPostData"),
+      accesskey: L10N.getStr("netmonitor.context.copyPostData.accesskey"),
+      visible: !!(selectedItem && selectedItem.attachment.requestPostData),
+      click: () => this.copyPostData(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-as-curl",
+      label: L10N.getStr("netmonitor.context.copyAsCurl"),
+      accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"),
+      visible: !!(selectedItem && selectedItem.attachment),
+      click: () => this.copyAsCurl(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedItem,
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-request-headers",
+      label: L10N.getStr("netmonitor.context.copyRequestHeaders"),
+      accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"),
+      visible: !!(selectedItem && selectedItem.attachment.requestHeaders),
+      click: () => this.copyRequestHeaders(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "response-menu-context-copy-response-headers",
+      label: L10N.getStr("netmonitor.context.copyResponseHeaders"),
+      accesskey: L10N.getStr("netmonitor.context.copyResponseHeaders.accesskey"),
+      visible: !!(selectedItem && selectedItem.attachment.responseHeaders),
+      click: () => this.copyResponseHeaders(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-response",
+      label: L10N.getStr("netmonitor.context.copyResponse"),
+      accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"),
+      visible: !!(selectedItem &&
+               selectedItem.attachment.responseContent &&
+               selectedItem.attachment.responseContent.content.text &&
+               selectedItem.attachment.responseContent.content.text.length !== 0),
+      click: () => this.copyResponse(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-image-as-data-uri",
+      label: L10N.getStr("netmonitor.context.copyImageAsDataUri"),
+      accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"),
+      visible: !!(selectedItem &&
+               selectedItem.attachment.responseContent &&
+               selectedItem.attachment.responseContent.content
+                 .mimeType.includes("image/")),
+      click: () => this.copyImageAsDataUri(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedItem,
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-copy-all-as-har",
+      label: L10N.getStr("netmonitor.context.copyAllAsHar"),
+      accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
+      visible: !!this.items.length,
+      click: () => this.copyAllAsHar(),
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-save-all-as-har",
+      label: L10N.getStr("netmonitor.context.saveAllAsHar"),
+      accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
+      visible: !!this.items.length,
+      click: () => this.saveAllAsHar(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedItem,
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-resend",
+      label: L10N.getStr("netmonitor.context.editAndResend"),
+      accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
+      visible: !!(NetMonitorController.supportsCustomRequest &&
+               selectedItem &&
+               !selectedItem.attachment.isCustom),
+      click: () => NetMonitorView.RequestsMenu.cloneSelectedRequest(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedItem,
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-newtab",
+      label: L10N.getStr("netmonitor.context.newTab"),
+      accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"),
+      visible: !!selectedItem,
+      click: () => this.openRequestInTab()
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-perf",
+      label: L10N.getStr("netmonitor.context.perfTools"),
+      accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
+      visible: !!NetMonitorController.supportsPerfStats,
+      click: () => NetMonitorView.toggleFrontendMode()
+    }));
+
+    menu.popup(screenX, screenY, NetMonitorController._toolbox);
+    return menu;
+  },
+
+  /**
+   * Opens selected item in a new tab.
+   */
+  openRequestInTab() {
+    let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+    let { url } = this.selectedItem.attachment;
+    win.openUILinkIn(url, "tab", { relatedToCurrent: true });
+  },
+
+  /**
+   * Copy the request url from the currently selected item.
+   */
+  copyUrl() {
+    clipboardHelper.copyString(this.selectedItem.attachment.url);
+  },
+
+  /**
+   * Copy the request url query string parameters from the currently
+   * selected item.
+   */
+  copyUrlParams() {
+    let { url } = this.selectedItem.attachment;
+    let params = NetworkHelper.nsIURL(url).query.split("&");
+    let string = params.join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n");
+    clipboardHelper.copyString(string);
+  },
+
+  /**
+   * Copy the request form data parameters (or raw payload) from
+   * the currently selected item.
+   */
+  copyPostData: Task.async(function* () {
+    let selected = this.selectedItem.attachment;
+
+    // Try to extract any form data parameters.
+    let formDataSections = yield getFormDataSections(
+      selected.requestHeaders,
+      selected.requestHeadersFromUploadStream,
+      selected.requestPostData,
+      gNetwork.getString.bind(gNetwork));
+
+    let params = [];
+    formDataSections.forEach(section => {
+      let paramsArray = NetworkHelper.parseQueryString(section);
+      if (paramsArray) {
+        params = [...params, ...paramsArray];
+      }
+    });
+
+    let string = params
+      .map(param => param.name + (param.value ? "=" + param.value : ""))
+      .join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n");
+
+    // Fall back to raw payload.
+    if (!string) {
+      let postData = selected.requestPostData.postData.text;
+      string = yield gNetwork.getString(postData);
+      if (Services.appinfo.OS !== "WINNT") {
+        string = string.replace(/\r/g, "");
+      }
+    }
+
+    clipboardHelper.copyString(string);
+  }),
+
+  /**
+   * Copy a cURL command from the currently selected item.
+   */
+  copyAsCurl: Task.async(function* () {
+    let selected = this.selectedItem.attachment;
+
+    // Create a sanitized object for the Curl command generator.
+    let data = {
+      url: selected.url,
+      method: selected.method,
+      headers: [],
+      httpVersion: selected.httpVersion,
+      postDataText: null
+    };
+
+    // Fetch header values.
+    for (let { name, value } of selected.requestHeaders.headers) {
+      let text = yield 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);
+    }
+
+    clipboardHelper.copyString(Curl.generateCommand(data));
+  }),
+
+  /**
+   * Copy the raw request headers from the currently selected item.
+   */
+  copyRequestHeaders() {
+    let selected = this.selectedItem.attachment;
+    let rawHeaders = selected.requestHeaders.rawHeaders.trim();
+    if (Services.appinfo.OS !== "WINNT") {
+      rawHeaders = rawHeaders.replace(/\r/g, "");
+    }
+    clipboardHelper.copyString(rawHeaders);
+  },
+
+  /**
+   * Copy the raw response headers from the currently selected item.
+   */
+  copyResponseHeaders() {
+    let selected = this.selectedItem.attachment;
+    let rawHeaders = selected.responseHeaders.rawHeaders.trim();
+    if (Services.appinfo.OS !== "WINNT") {
+      rawHeaders = rawHeaders.replace(/\r/g, "");
+    }
+    clipboardHelper.copyString(rawHeaders);
+  },
+
+  /**
+   * Copy image as data uri.
+   */
+  copyImageAsDataUri() {
+    let selected = this.selectedItem.attachment;
+    let { mimeType, text, encoding } = selected.responseContent.content;
+
+    gNetwork.getString(text).then(string => {
+      let data = formDataURI(mimeType, encoding, string);
+      clipboardHelper.copyString(data);
+    });
+  },
+
+  /**
+   * Copy response data as a string.
+   */
+  copyResponse() {
+    let selected = this.selectedItem.attachment;
+    let text = selected.responseContent.content.text;
+
+    gNetwork.getString(text).then(string => {
+      clipboardHelper.copyString(string);
+    });
+  },
+
+  /**
+   * Copy HAR from the network panel content to the clipboard.
+   */
+  copyAllAsHar() {
+    let options = this.getDefaultHarOptions();
+    return HarExporter.copy(options);
+  },
+
+  /**
+   * Save HAR from the network panel content to a file.
+   */
+  saveAllAsHar() {
+    let options = this.getDefaultHarOptions();
+    return HarExporter.save(options);
+  },
+
+  getDefaultHarOptions() {
+    let form = NetMonitorController._target.form;
+    let title = form.title || form.url;
+
+    return {
+      getString: gNetwork.getString.bind(gNetwork),
+      view: NetMonitorView.RequestsMenu,
+      items: NetMonitorView.RequestsMenu.items,
+      title: title
+    };
+  }
+};
+
+module.exports = RequestListContextMenu;
diff --git a/devtools/client/netmonitor/request-utils.js b/devtools/client/netmonitor/request-utils.js
new file mode 100644
index 000000000..ba54efb4f
--- /dev/null
+++ b/devtools/client/netmonitor/request-utils.js
@@ -0,0 +1,185 @@
+"use strict";
+/* eslint-disable mozilla/reject-some-requires */
+const { Ci } = require("chrome");
+const { KeyCodes } = require("devtools/client/shared/keycodes");
+const { Task } = require("devtools/shared/task");
+const NetworkHelper = require("devtools/shared/webconsole/network-helper");
+
+/**
+ * Helper method to get a wrapped function which can be bound to as
+ * an event listener directly and is executed only when data-key is
+ * present in event.target.
+ *
+ * @param function callback
+ *          Function to execute execute when data-key
+ *          is present in event.target.
+ * @param bool onlySpaceOrReturn
+ *          Flag to indicate if callback should only be called
+            when the space or return button is pressed
+ * @return function
+ *          Wrapped function with the target data-key as the first argument
+ *          and the event as the second argument.
+ */
+exports.getKeyWithEvent = function (callback, onlySpaceOrReturn) {
+  return function (event) {
+    let key = event.target.getAttribute("data-key");
+    let filterKeyboardEvent = !onlySpaceOrReturn ||
+                              event.keyCode === KeyCodes.DOM_VK_SPACE ||
+                              event.keyCode === KeyCodes.DOM_VK_RETURN;
+
+    if (key && filterKeyboardEvent) {
+      callback.call(null, key);
+    }
+  };
+};
+
+/**
+ * Extracts any urlencoded form data sections (e.g. "?foo=bar&baz=42") from a
+ * POST request.
+ *
+ * @param object headers
+ *        The "requestHeaders".
+ * @param object uploadHeaders
+ *        The "requestHeadersFromUploadStream".
+ * @param object postData
+ *        The "requestPostData".
+ * @param object getString
+          Callback to retrieve a string from a LongStringGrip.
+ * @return array
+ *        A promise that is resolved with the extracted form data.
+ */
+exports.getFormDataSections = Task.async(function* (headers, uploadHeaders, postData,
+                                                    getString) {
+  let formDataSections = [];
+
+  let { headers: requestHeaders } = headers;
+  let { headers: payloadHeaders } = uploadHeaders;
+  let allHeaders = [...payloadHeaders, ...requestHeaders];
+
+  let contentTypeHeader = allHeaders.find(e => {
+    return e.name.toLowerCase() == "content-type";
+  });
+
+  let contentTypeLongString = contentTypeHeader ? contentTypeHeader.value : "";
+
+  let contentType = yield getString(contentTypeLongString);
+
+  if (contentType.includes("x-www-form-urlencoded")) {
+    let postDataLongString = postData.postData.text;
+    let text = yield getString(postDataLongString);
+
+    for (let section of text.split(/\r\n|\r|\n/)) {
+      // Before displaying it, make sure this section of the POST data
+      // isn't a line containing upload stream headers.
+      if (payloadHeaders.every(header => !section.startsWith(header.name))) {
+        formDataSections.push(section);
+      }
+    }
+  }
+
+  return formDataSections;
+});
+
+/**
+ * Form a data: URI given a mime type, encoding, and some text.
+ *
+ * @param {String} mimeType the mime type
+ * @param {String} encoding the encoding to use; if not set, the
+ *        text will be base64-encoded.
+ * @param {String} text the text of the URI.
+ * @return {String} a data: URI
+ */
+exports.formDataURI = function (mimeType, encoding, text) {
+  if (!encoding) {
+    encoding = "base64";
+    text = btoa(text);
+  }
+  return "data:" + mimeType + ";" + encoding + "," + text;
+};
+
+/**
+ * Write out a list of headers into a chunk of text
+ *
+ * @param array headers
+ *        Array of headers info {name, value}
+ * @return string text
+ *         List of headers in text format
+ */
+exports.writeHeaderText = function (headers) {
+  return headers.map(({name, value}) => name + ": " + value).join("\n");
+};
+
+/**
+ * Helper for getting an abbreviated string for a mime type.
+ *
+ * @param string mimeType
+ * @return string
+ */
+exports.getAbbreviatedMimeType = function (mimeType) {
+  if (!mimeType) {
+    return "";
+  }
+  return (mimeType.split(";")[0].split("/")[1] || "").split("+")[0];
+};
+
+/**
+ * Helpers for getting details about an nsIURL.
+ *
+ * @param nsIURL | string url
+ * @return string
+ */
+exports.getUriNameWithQuery = function (url) {
+  if (!(url instanceof Ci.nsIURL)) {
+    url = NetworkHelper.nsIURL(url);
+  }
+
+  let name = NetworkHelper.convertToUnicode(
+    unescape(url.fileName || url.filePath || "/"));
+  let query = NetworkHelper.convertToUnicode(unescape(url.query));
+
+  return name + (query ? "?" + query : "");
+};
+
+exports.getUriHostPort = function (url) {
+  if (!(url instanceof Ci.nsIURL)) {
+    url = NetworkHelper.nsIURL(url);
+  }
+  return NetworkHelper.convertToUnicode(unescape(url.hostPort));
+};
+
+exports.getUriHost = function (url) {
+  return exports.getUriHostPort(url).replace(/:\d+$/, "");
+};
+
+/**
+ * Convert a nsIContentPolicy constant to a display string
+ */
+const LOAD_CAUSE_STRINGS = {
+  [Ci.nsIContentPolicy.TYPE_INVALID]: "invalid",
+  [Ci.nsIContentPolicy.TYPE_OTHER]: "other",
+  [Ci.nsIContentPolicy.TYPE_SCRIPT]: "script",
+  [Ci.nsIContentPolicy.TYPE_IMAGE]: "img",
+  [Ci.nsIContentPolicy.TYPE_STYLESHEET]: "stylesheet",
+  [Ci.nsIContentPolicy.TYPE_OBJECT]: "object",
+  [Ci.nsIContentPolicy.TYPE_DOCUMENT]: "document",
+  [Ci.nsIContentPolicy.TYPE_SUBDOCUMENT]: "subdocument",
+  [Ci.nsIContentPolicy.TYPE_REFRESH]: "refresh",
+  [Ci.nsIContentPolicy.TYPE_XBL]: "xbl",
+  [Ci.nsIContentPolicy.TYPE_PING]: "ping",
+  [Ci.nsIContentPolicy.TYPE_XMLHTTPREQUEST]: "xhr",
+  [Ci.nsIContentPolicy.TYPE_OBJECT_SUBREQUEST]: "objectSubdoc",
+  [Ci.nsIContentPolicy.TYPE_DTD]: "dtd",
+  [Ci.nsIContentPolicy.TYPE_FONT]: "font",
+  [Ci.nsIContentPolicy.TYPE_MEDIA]: "media",
+  [Ci.nsIContentPolicy.TYPE_WEBSOCKET]: "websocket",
+  [Ci.nsIContentPolicy.TYPE_CSP_REPORT]: "csp",
+  [Ci.nsIContentPolicy.TYPE_XSLT]: "xslt",
+  [Ci.nsIContentPolicy.TYPE_BEACON]: "beacon",
+  [Ci.nsIContentPolicy.TYPE_FETCH]: "fetch",
+  [Ci.nsIContentPolicy.TYPE_IMAGESET]: "imageset",
+  [Ci.nsIContentPolicy.TYPE_WEB_MANIFEST]: "webManifest"
+};
+
+exports.loadCauseString = function (causeType) {
+  return LOAD_CAUSE_STRINGS[causeType] || "unknown";
+};
diff --git a/devtools/client/netmonitor/requests-menu-view.js b/devtools/client/netmonitor/requests-menu-view.js
new file mode 100644
index 000000000..6ea6381ec
--- /dev/null
+++ b/devtools/client/netmonitor/requests-menu-view.js
@@ -0,0 +1,1649 @@
+/* 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 document, window, dumpn, $, gNetwork, EVENTS, Prefs,
+           NetMonitorController, NetMonitorView */
+
+"use strict";
+
+/* eslint-disable mozilla/reject-some-requires */
+const { Cu } = require("chrome");
+const {Task} = require("devtools/shared/task");
+const {DeferredTask} = Cu.import("resource://gre/modules/DeferredTask.jsm", {});
+/* eslint-disable mozilla/reject-some-requires */
+const {SideMenuWidget} = require("resource://devtools/client/shared/widgets/SideMenuWidget.jsm");
+const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
+const {setImageTooltip, getImageDimensions} =
+  require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+const {Heritage, WidgetMethods, setNamedTimeout} =
+  require("devtools/client/shared/widgets/view-helpers");
+const {CurlUtils} = require("devtools/client/shared/curl");
+const {PluralForm} = require("devtools/shared/plural-form");
+const {Filters, isFreetextMatch} = require("./filter-predicates");
+const {Sorters} = require("./sort-predicates");
+const {L10N, WEBCONSOLE_L10N} = require("./l10n");
+const {formDataURI,
+       writeHeaderText,
+       getKeyWithEvent,
+       getAbbreviatedMimeType,
+       getUriNameWithQuery,
+       getUriHostPort,
+       getUriHost,
+       loadCauseString} = require("./request-utils");
+const Actions = require("./actions/index");
+const RequestListContextMenu = require("./request-list-context-menu");
+
+loader.lazyRequireGetter(this, "NetworkHelper",
+  "devtools/shared/webconsole/network-helper");
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const EPSILON = 0.001;
+// ms
+const RESIZE_REFRESH_RATE = 50;
+// ms
+const REQUESTS_REFRESH_RATE = 50;
+// tooltip show/hide delay in ms
+const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
+// px
+const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400;
+// px
+const REQUESTS_TOOLTIP_STACK_TRACE_WIDTH = 600;
+// px
+const REQUESTS_WATERFALL_SAFE_BOUNDS = 90;
+// ms
+const REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE = 5;
+// px
+const REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN = 60;
+// ms
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_MULTIPLE = 5;
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_SCALES = 3;
+// px
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_SPACING_MIN = 10;
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_COLOR_RGB = [128, 136, 144];
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_MIN = 32;
+// byte
+const REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD = 32;
+const REQUESTS_WATERFALL_DOMCONTENTLOADED_TICKS_COLOR_RGBA = [255, 0, 0, 128];
+const REQUESTS_WATERFALL_LOAD_TICKS_COLOR_RGBA = [0, 0, 255, 128];
+
+// Constants for formatting bytes.
+const BYTES_IN_KB = 1024;
+const BYTES_IN_MB = Math.pow(BYTES_IN_KB, 2);
+const BYTES_IN_GB = Math.pow(BYTES_IN_KB, 3);
+const MAX_BYTES_SIZE = 1000;
+const MAX_KB_SIZE = 1000 * BYTES_IN_KB;
+const MAX_MB_SIZE = 1000 * BYTES_IN_MB;
+
+// TODO: duplicated from netmonitor-view.js. Move to a format-utils.js module.
+const REQUEST_TIME_DECIMALS = 2;
+const CONTENT_SIZE_DECIMALS = 2;
+
+const CONTENT_MIME_TYPE_ABBREVIATIONS = {
+  "ecmascript": "js",
+  "javascript": "js",
+  "x-javascript": "js"
+};
+
+// A smart store watcher to notify store changes as necessary
+function storeWatcher(initialValue, reduceValue, onChange) {
+  let currentValue = initialValue;
+
+  return () => {
+    const newValue = reduceValue(currentValue);
+    if (newValue !== currentValue) {
+      onChange(newValue, currentValue);
+      currentValue = newValue;
+    }
+  };
+}
+
+/**
+ * Functions handling the requests menu (containing details about each request,
+ * like status, method, file, domain, as well as a waterfall representing
+ * timing imformation).
+ */
+function RequestsMenuView() {
+  dumpn("RequestsMenuView was instantiated");
+
+  this._flushRequests = this._flushRequests.bind(this);
+  this._onHover = this._onHover.bind(this);
+  this._onSelect = this._onSelect.bind(this);
+  this._onSwap = this._onSwap.bind(this);
+  this._onResize = this._onResize.bind(this);
+  this._onScroll = this._onScroll.bind(this);
+  this._onSecurityIconClick = this._onSecurityIconClick.bind(this);
+}
+
+RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
+  /**
+   * Initialization function, called when the network monitor is started.
+   */
+  initialize: function (store) {
+    dumpn("Initializing the RequestsMenuView");
+
+    this.store = store;
+
+    this.contextMenu = new RequestListContextMenu();
+
+    let widgetParentEl = $("#requests-menu-contents");
+    this.widget = new SideMenuWidget(widgetParentEl);
+    this._splitter = $("#network-inspector-view-splitter");
+    this._summary = $("#requests-menu-network-summary-button");
+    this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
+
+    // Create a tooltip for the newly appended network request item.
+    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
+    this.tooltip.startTogglingOnHover(widgetParentEl, this._onHover, {
+      toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
+      interactive: true
+    });
+
+    this.sortContents((a, b) => Sorters.waterfall(a.attachment, b.attachment));
+
+    this.allowFocusOnRightClick = true;
+    this.maintainSelectionVisible = true;
+
+    this.widget.addEventListener("select", this._onSelect, false);
+    this.widget.addEventListener("swap", this._onSwap, false);
+    this._splitter.addEventListener("mousemove", this._onResize, false);
+    window.addEventListener("resize", this._onResize, false);
+
+    this.requestsMenuSortEvent = getKeyWithEvent(this.sortBy.bind(this));
+    this.requestsMenuSortKeyboardEvent = getKeyWithEvent(this.sortBy.bind(this), true);
+    this._onContextMenu = this._onContextMenu.bind(this);
+    this._onContextPerfCommand = () => NetMonitorView.toggleFrontendMode();
+    this._onReloadCommand = () => NetMonitorView.reloadPage();
+    this._flushRequestsTask = new DeferredTask(this._flushRequests,
+      REQUESTS_REFRESH_RATE);
+
+    this.sendCustomRequestEvent = this.sendCustomRequest.bind(this);
+    this.closeCustomRequestEvent = this.closeCustomRequest.bind(this);
+    this.cloneSelectedRequestEvent = this.cloneSelectedRequest.bind(this);
+    this.toggleRawHeadersEvent = this.toggleRawHeaders.bind(this);
+
+    this.reFilterRequests = this.reFilterRequests.bind(this);
+
+    $("#toolbar-labels").addEventListener("click",
+      this.requestsMenuSortEvent, false);
+    $("#toolbar-labels").addEventListener("keydown",
+      this.requestsMenuSortKeyboardEvent, false);
+    $("#toggle-raw-headers").addEventListener("click",
+      this.toggleRawHeadersEvent, false);
+    $("#requests-menu-contents").addEventListener("scroll", this._onScroll, true);
+    $("#requests-menu-contents").addEventListener("contextmenu", this._onContextMenu);
+
+    this.unsubscribeStore = store.subscribe(storeWatcher(
+      null,
+      () => store.getState().filters,
+      (newFilters) => {
+        this._activeFilters = newFilters.types
+          .toSeq()
+          .filter((checked, key) => checked)
+          .keySeq()
+          .toArray();
+        this._currentFreetextFilter = newFilters.url;
+        this.reFilterRequests();
+      }
+    ));
+
+    Prefs.filters.forEach(type =>
+      store.dispatch(Actions.toggleFilterType(type)));
+
+    window.once("connected", this._onConnect.bind(this));
+  },
+
+  _onConnect: function () {
+    $("#requests-menu-reload-notice-button").addEventListener("command",
+      this._onReloadCommand, false);
+
+    if (NetMonitorController.supportsCustomRequest) {
+      $("#custom-request-send-button").addEventListener("click",
+        this.sendCustomRequestEvent, false);
+      $("#custom-request-close-button").addEventListener("click",
+        this.closeCustomRequestEvent, false);
+      $("#headers-summary-resend").addEventListener("click",
+        this.cloneSelectedRequestEvent, false);
+    } else {
+      $("#headers-summary-resend").hidden = true;
+    }
+
+    if (NetMonitorController.supportsPerfStats) {
+      $("#requests-menu-perf-notice-button").addEventListener("command",
+        this._onContextPerfCommand, false);
+      $("#requests-menu-network-summary-button").addEventListener("command",
+        this._onContextPerfCommand, false);
+      $("#network-statistics-back-button").addEventListener("command",
+        this._onContextPerfCommand, false);
+    } else {
+      $("#notice-perf-message").hidden = true;
+      $("#requests-menu-network-summary-button").hidden = true;
+    }
+
+    if (!NetMonitorController.supportsTransferredResponseSize) {
+      $("#requests-menu-transferred-header-box").hidden = true;
+      $("#requests-menu-item-template .requests-menu-transferred")
+        .hidden = true;
+    }
+  },
+
+  /**
+   * Destruction function, called when the network monitor is closed.
+   */
+  destroy: function () {
+    dumpn("Destroying the RequestsMenuView");
+
+    Prefs.filters = this._activeFilters;
+
+    /* Destroy the tooltip */
+    this.tooltip.stopTogglingOnHover();
+    this.tooltip.destroy();
+    $("#requests-menu-contents").removeEventListener("scroll", this._onScroll, true);
+    $("#requests-menu-contents").removeEventListener("contextmenu", this._onContextMenu);
+
+    this.widget.removeEventListener("select", this._onSelect, false);
+    this.widget.removeEventListener("swap", this._onSwap, false);
+    this._splitter.removeEventListener("mousemove", this._onResize, false);
+    window.removeEventListener("resize", this._onResize, false);
+
+    $("#toolbar-labels").removeEventListener("click",
+      this.requestsMenuSortEvent, false);
+    $("#toolbar-labels").removeEventListener("keydown",
+      this.requestsMenuSortKeyboardEvent, false);
+
+    this._flushRequestsTask.disarm();
+
+    $("#requests-menu-reload-notice-button").removeEventListener("command",
+      this._onReloadCommand, false);
+    $("#requests-menu-perf-notice-button").removeEventListener("command",
+      this._onContextPerfCommand, false);
+    $("#requests-menu-network-summary-button").removeEventListener("command",
+      this._onContextPerfCommand, false);
+    $("#network-statistics-back-button").removeEventListener("command",
+      this._onContextPerfCommand, false);
+
+    $("#custom-request-send-button").removeEventListener("click",
+      this.sendCustomRequestEvent, false);
+    $("#custom-request-close-button").removeEventListener("click",
+      this.closeCustomRequestEvent, false);
+    $("#headers-summary-resend").removeEventListener("click",
+      this.cloneSelectedRequestEvent, false);
+    $("#toggle-raw-headers").removeEventListener("click",
+      this.toggleRawHeadersEvent, false);
+
+    this.unsubscribeStore();
+  },
+
+  /**
+   * Resets this container (removes all the networking information).
+   */
+  reset: function () {
+    this.empty();
+    this._addQueue = [];
+    this._updateQueue = [];
+    this._firstRequestStartedMillis = -1;
+    this._lastRequestEndedMillis = -1;
+  },
+
+  /**
+   * Specifies if this view may be updated lazily.
+   */
+  _lazyUpdate: true,
+
+  get lazyUpdate() {
+    return this._lazyUpdate;
+  },
+
+  set lazyUpdate(value) {
+    this._lazyUpdate = value;
+    if (!value) {
+      this._flushRequests();
+    }
+  },
+
+  /**
+   * Adds a network request to this container.
+   *
+   * @param string id
+   *        An identifier coming from the network monitor controller.
+   * @param string startedDateTime
+   *        A string representation of when the request was started, which
+   *        can be parsed by Date (for example "2012-09-17T19:50:03.699Z").
+   * @param string method
+   *        Specifies the request method (e.g. "GET", "POST", etc.)
+   * @param string url
+   *        Specifies the request's url.
+   * @param boolean isXHR
+   *        True if this request was initiated via XHR.
+   * @param object cause
+   *        Specifies the request's cause. Has the following properties:
+   *        - type: nsContentPolicyType constant
+   *        - loadingDocumentUri: URI of the request origin
+   *        - stacktrace: JS stacktrace of the request
+   * @param boolean fromCache
+   *        Indicates if the result came from the browser cache
+   * @param boolean fromServiceWorker
+   *        Indicates if the request has been intercepted by a Service Worker
+   */
+  addRequest: function (id, startedDateTime, method, url, isXHR, cause,
+    fromCache, fromServiceWorker) {
+    this._addQueue.push([id, startedDateTime, method, url, isXHR, cause,
+      fromCache, fromServiceWorker]);
+
+    // Lazy updating is disabled in some tests.
+    if (!this.lazyUpdate) {
+      return void this._flushRequests();
+    }
+
+    this._flushRequestsTask.arm();
+    return undefined;
+  },
+
+  /**
+   * Create a new custom request form populated with the data from
+   * the currently selected request.
+   */
+  cloneSelectedRequest: function () {
+    let selected = this.selectedItem.attachment;
+
+    // Create the element node for the network request item.
+    let menuView = this._createMenuView(selected.method, selected.url,
+      selected.cause);
+
+    // Append a network request item to this container.
+    let newItem = this.push([menuView], {
+      attachment: Object.create(selected, {
+        isCustom: { value: true }
+      })
+    });
+
+    // Immediately switch to new request pane.
+    this.selectedItem = newItem;
+  },
+
+  /**
+   * Send a new HTTP request using the data in the custom request form.
+   */
+  sendCustomRequest: function () {
+    let selected = this.selectedItem.attachment;
+
+    let data = {
+      url: selected.url,
+      method: selected.method,
+      httpVersion: selected.httpVersion,
+    };
+    if (selected.requestHeaders) {
+      data.headers = selected.requestHeaders.headers;
+    }
+    if (selected.requestPostData) {
+      data.body = selected.requestPostData.postData.text;
+    }
+
+    NetMonitorController.webConsoleClient.sendHTTPRequest(data, response => {
+      let id = response.eventActor.actor;
+      this._preferredItemId = id;
+    });
+
+    this.closeCustomRequest();
+  },
+
+  /**
+   * Remove the currently selected custom request.
+   */
+  closeCustomRequest: function () {
+    this.remove(this.selectedItem);
+    NetMonitorView.Sidebar.toggle(false);
+  },
+
+  /**
+   * Shows raw request/response headers in textboxes.
+   */
+  toggleRawHeaders: function () {
+    let requestTextarea = $("#raw-request-headers-textarea");
+    let responseTextare = $("#raw-response-headers-textarea");
+    let rawHeadersHidden = $("#raw-headers").getAttribute("hidden");
+
+    if (rawHeadersHidden) {
+      let selected = this.selectedItem.attachment;
+      let selectedRequestHeaders = selected.requestHeaders.headers;
+      let selectedResponseHeaders = selected.responseHeaders.headers;
+      requestTextarea.value = writeHeaderText(selectedRequestHeaders);
+      responseTextare.value = writeHeaderText(selectedResponseHeaders);
+      $("#raw-headers").hidden = false;
+    } else {
+      requestTextarea.value = null;
+      responseTextare.value = null;
+      $("#raw-headers").hidden = true;
+    }
+  },
+
+  /**
+   * Refreshes the view contents with the newly selected filters
+   */
+  reFilterRequests: function () {
+    this.filterContents(this._filterPredicate);
+    this.refreshSummary();
+    this.refreshZebra();
+  },
+
+  /**
+   * Returns a predicate that can be used to test if a request matches any of
+   * the active filters.
+   */
+  get _filterPredicate() {
+    let currentFreetextFilter = this._currentFreetextFilter;
+
+    return requestItem => {
+      const { attachment } = requestItem;
+      return this._activeFilters.some(filterName => Filters[filterName](attachment)) &&
+          isFreetextMatch(attachment, currentFreetextFilter);
+    };
+  },
+
+  /**
+   * Sorts all network requests in this container by a specified detail.
+   *
+   * @param string type
+   *        Either "status", "method", "file", "domain", "type", "transferred",
+   *        "size" or "waterfall".
+   */
+  sortBy: function (type = "waterfall") {
+    let target = $("#requests-menu-" + type + "-button");
+    let headers = document.querySelectorAll(".requests-menu-header-button");
+
+    for (let header of headers) {
+      if (header != target) {
+        header.removeAttribute("sorted");
+        header.removeAttribute("tooltiptext");
+        header.parentNode.removeAttribute("active");
+      }
+    }
+
+    let direction = "";
+    if (target) {
+      if (target.getAttribute("sorted") == "ascending") {
+        target.setAttribute("sorted", direction = "descending");
+        target.setAttribute("tooltiptext",
+          L10N.getStr("networkMenu.sortedDesc"));
+      } else {
+        target.setAttribute("sorted", direction = "ascending");
+        target.setAttribute("tooltiptext",
+          L10N.getStr("networkMenu.sortedAsc"));
+      }
+      // Used to style the next column.
+      target.parentNode.setAttribute("active", "true");
+    }
+
+    // Sort by whatever was requested.
+    switch (type) {
+      case "status":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.status(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.status(a.attachment, b.attachment));
+        }
+        break;
+      case "method":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.method(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.method(a.attachment, b.attachment));
+        }
+        break;
+      case "file":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.file(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.file(a.attachment, b.attachment));
+        }
+        break;
+      case "domain":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.domain(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.domain(a.attachment, b.attachment));
+        }
+        break;
+      case "cause":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.cause(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.cause(a.attachment, b.attachment));
+        }
+        break;
+      case "type":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.type(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.type(a.attachment, b.attachment));
+        }
+        break;
+      case "transferred":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.transferred(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.transferred(a.attachment, b.attachment));
+        }
+        break;
+      case "size":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.size(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.size(a.attachment, b.attachment));
+        }
+        break;
+      case "waterfall":
+        if (direction == "ascending") {
+          this.sortContents((a, b) => Sorters.waterfall(a.attachment, b.attachment));
+        } else {
+          this.sortContents((a, b) => -Sorters.waterfall(a.attachment, b.attachment));
+        }
+        break;
+    }
+
+    this.refreshSummary();
+    this.refreshZebra();
+  },
+
+  /**
+   * Removes all network requests and closes the sidebar if open.
+   */
+  clear: function () {
+    NetMonitorController.NetworkEventsHandler.clearMarkers();
+    NetMonitorView.Sidebar.toggle(false);
+
+    this.store.dispatch(Actions.disableToggleButton(true));
+    $("#requests-menu-empty-notice").hidden = false;
+
+    this.empty();
+    this.refreshSummary();
+  },
+
+  /**
+   * Refreshes the status displayed in this container's footer, providing
+   * concise information about all requests.
+   */
+  refreshSummary: function () {
+    let visibleItems = this.visibleItems;
+    let visibleRequestsCount = visibleItems.length;
+    if (!visibleRequestsCount) {
+      this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
+      return;
+    }
+
+    let totalBytes = this._getTotalBytesOfRequests(visibleItems);
+    let totalMillis =
+      this._getNewestRequest(visibleItems).attachment.endedMillis -
+      this._getOldestRequest(visibleItems).attachment.startedMillis;
+
+    // https://developer.mozilla.org/en-US/docs/Localization_and_Plurals
+    let str = PluralForm.get(visibleRequestsCount,
+      L10N.getStr("networkMenu.summary"));
+
+    this._summary.setAttribute("label", str
+      .replace("#1", visibleRequestsCount)
+      .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024,
+        CONTENT_SIZE_DECIMALS))
+      .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000,
+        REQUEST_TIME_DECIMALS))
+    );
+  },
+
+  /**
+   * Adds odd/even attributes to all the visible items in this container.
+   */
+  refreshZebra: function () {
+    let visibleItems = this.visibleItems;
+
+    for (let i = 0, len = visibleItems.length; i < len; i++) {
+      let requestItem = visibleItems[i];
+      let requestTarget = requestItem.target;
+
+      if (i % 2 == 0) {
+        requestTarget.setAttribute("even", "");
+        requestTarget.removeAttribute("odd");
+      } else {
+        requestTarget.setAttribute("odd", "");
+        requestTarget.removeAttribute("even");
+      }
+    }
+  },
+
+  /**
+   * Attaches security icon click listener for the given request menu item.
+   *
+   * @param object item
+   *        The network request item to attach the listener to.
+   */
+  attachSecurityIconClickListener: function ({ target }) {
+    let icon = $(".requests-security-state-icon", target);
+    icon.addEventListener("click", this._onSecurityIconClick);
+  },
+
+  /**
+   * Schedules adding additional information to a network request.
+   *
+   * @param string id
+   *        An identifier coming from the network monitor controller.
+   * @param object data
+   *        An object containing several { key: value } tuples of network info.
+   *        Supported keys are "httpVersion", "status", "statusText" etc.
+   * @param function callback
+   *        A function to call once the request has been updated in the view.
+   */
+  updateRequest: function (id, data, callback) {
+    this._updateQueue.push([id, data, callback]);
+
+    // Lazy updating is disabled in some tests.
+    if (!this.lazyUpdate) {
+      return void this._flushRequests();
+    }
+
+    this._flushRequestsTask.arm();
+    return undefined;
+  },
+
+  /**
+   * Starts adding all queued additional information about network requests.
+   */
+  _flushRequests: function () {
+    // Prevent displaying any updates received after the target closed.
+    if (NetMonitorView._isDestroyed) {
+      return;
+    }
+
+    let widget = NetMonitorView.RequestsMenu.widget;
+    let isScrolledToBottom = widget.isScrolledToBottom();
+
+    for (let [id, startedDateTime, method, url, isXHR, cause, fromCache,
+      fromServiceWorker] of this._addQueue) {
+      // Convert the received date/time string to a unix timestamp.
+      let unixTime = Date.parse(startedDateTime);
+
+      // Create the element node for the network request item.
+      let menuView = this._createMenuView(method, url, cause);
+
+      // Remember the first and last event boundaries.
+      this._registerFirstRequestStart(unixTime);
+      this._registerLastRequestEnd(unixTime);
+
+      // Append a network request item to this container.
+      let requestItem = this.push([menuView, id], {
+        attachment: {
+          startedDeltaMillis: unixTime - this._firstRequestStartedMillis,
+          startedMillis: unixTime,
+          method: method,
+          url: url,
+          isXHR: isXHR,
+          cause: cause,
+          fromCache: fromCache,
+          fromServiceWorker: fromServiceWorker
+        }
+      });
+
+      if (id == this._preferredItemId) {
+        this.selectedItem = requestItem;
+      }
+
+      window.emit(EVENTS.REQUEST_ADDED, id);
+    }
+
+    if (isScrolledToBottom && this._addQueue.length) {
+      widget.scrollToBottom();
+    }
+
+    // For each queued additional information packet, get the corresponding
+    // request item in the view and update it based on the specified data.
+    for (let [id, data, callback] of this._updateQueue) {
+      let requestItem = this.getItemByValue(id);
+      if (!requestItem) {
+        // Packet corresponds to a dead request item, target navigated.
+        continue;
+      }
+
+      // Each information packet may contain several { key: value } tuples of
+      // network info, so update the view based on each one.
+      for (let key in data) {
+        let val = data[key];
+        if (val === undefined) {
+          // The information in the packet is empty, it can be safely ignored.
+          continue;
+        }
+
+        switch (key) {
+          case "requestHeaders":
+            requestItem.attachment.requestHeaders = val;
+            break;
+          case "requestCookies":
+            requestItem.attachment.requestCookies = val;
+            break;
+          case "requestPostData":
+            // Search the POST data upload stream for request headers and add
+            // them to a separate store, different from the classic headers.
+            // XXX: Be really careful here! We're creating a function inside
+            // a loop, so remember the actual request item we want to modify.
+            let currentItem = requestItem;
+            let currentStore = { headers: [], headersSize: 0 };
+
+            Task.spawn(function* () {
+              let postData = yield gNetwork.getString(val.postData.text);
+              let payloadHeaders = CurlUtils.getHeadersFromMultipartText(
+                postData);
+
+              currentStore.headers = payloadHeaders;
+              currentStore.headersSize = payloadHeaders.reduce(
+                (acc, { name, value }) =>
+                  acc + name.length + value.length + 2, 0);
+
+              // The `getString` promise is async, so we need to refresh the
+              // information displayed in the network details pane again here.
+              refreshNetworkDetailsPaneIfNecessary(currentItem);
+            });
+
+            requestItem.attachment.requestPostData = val;
+            requestItem.attachment.requestHeadersFromUploadStream =
+              currentStore;
+            break;
+          case "securityState":
+            requestItem.attachment.securityState = val;
+            this.updateMenuView(requestItem, key, val);
+            break;
+          case "securityInfo":
+            requestItem.attachment.securityInfo = val;
+            break;
+          case "responseHeaders":
+            requestItem.attachment.responseHeaders = val;
+            break;
+          case "responseCookies":
+            requestItem.attachment.responseCookies = val;
+            break;
+          case "httpVersion":
+            requestItem.attachment.httpVersion = val;
+            break;
+          case "remoteAddress":
+            requestItem.attachment.remoteAddress = val;
+            this.updateMenuView(requestItem, key, val);
+            break;
+          case "remotePort":
+            requestItem.attachment.remotePort = val;
+            break;
+          case "status":
+            requestItem.attachment.status = val;
+            this.updateMenuView(requestItem, key, {
+              status: val,
+              cached: requestItem.attachment.fromCache,
+              serviceWorker: requestItem.attachment.fromServiceWorker
+            });
+            break;
+          case "statusText":
+            requestItem.attachment.statusText = val;
+            let text = (requestItem.attachment.status + " " +
+                        requestItem.attachment.statusText);
+            if (requestItem.attachment.fromCache) {
+              text += " (cached)";
+            } else if (requestItem.attachment.fromServiceWorker) {
+              text += " (service worker)";
+            }
+
+            this.updateMenuView(requestItem, key, text);
+            break;
+          case "headersSize":
+            requestItem.attachment.headersSize = val;
+            break;
+          case "contentSize":
+            requestItem.attachment.contentSize = val;
+            this.updateMenuView(requestItem, key, val);
+            break;
+          case "transferredSize":
+            if (requestItem.attachment.fromCache) {
+              requestItem.attachment.transferredSize = 0;
+              this.updateMenuView(requestItem, key, "cached");
+            } else if (requestItem.attachment.fromServiceWorker) {
+              requestItem.attachment.transferredSize = 0;
+              this.updateMenuView(requestItem, key, "service worker");
+            } else {
+              requestItem.attachment.transferredSize = val;
+              this.updateMenuView(requestItem, key, val);
+            }
+            break;
+          case "mimeType":
+            requestItem.attachment.mimeType = val;
+            this.updateMenuView(requestItem, key, val);
+            break;
+          case "responseContent":
+            // If there's no mime type available when the response content
+            // is received, assume text/plain as a fallback.
+            if (!requestItem.attachment.mimeType) {
+              requestItem.attachment.mimeType = "text/plain";
+              this.updateMenuView(requestItem, "mimeType", "text/plain");
+            }
+            requestItem.attachment.responseContent = val;
+            this.updateMenuView(requestItem, key, val);
+            break;
+          case "totalTime":
+            requestItem.attachment.totalTime = val;
+            requestItem.attachment.endedMillis =
+              requestItem.attachment.startedMillis + val;
+
+            this.updateMenuView(requestItem, key, val);
+            this._registerLastRequestEnd(requestItem.attachment.endedMillis);
+            break;
+          case "eventTimings":
+            requestItem.attachment.eventTimings = val;
+            this._createWaterfallView(
+              requestItem, val.timings,
+              requestItem.attachment.fromCache ||
+              requestItem.attachment.fromServiceWorker
+            );
+            break;
+        }
+      }
+      refreshNetworkDetailsPaneIfNecessary(requestItem);
+
+      if (callback) {
+        callback();
+      }
+    }
+
+    /**
+     * Refreshes the information displayed in the sidebar, in case this update
+     * may have additional information about a request which isn't shown yet
+     * in the network details pane.
+     *
+     * @param object requestItem
+     *        The item to repopulate the sidebar with in case it's selected in
+     *        this requests menu.
+     */
+    function refreshNetworkDetailsPaneIfNecessary(requestItem) {
+      let selectedItem = NetMonitorView.RequestsMenu.selectedItem;
+      if (selectedItem == requestItem) {
+        NetMonitorView.NetworkDetails.populate(selectedItem.attachment);
+      }
+    }
+
+    // We're done flushing all the requests, clear the update queue.
+    this._updateQueue = [];
+    this._addQueue = [];
+
+    this.store.dispatch(Actions.disableToggleButton(!this.itemCount));
+    $("#requests-menu-empty-notice").hidden = !!this.itemCount;
+
+    // Make sure all the requests are sorted and filtered.
+    // Freshly added requests may not yet contain all the information required
+    // for sorting and filtering predicates, so this is done each time the
+    // network requests table is flushed (don't worry, events are drained first
+    // so this doesn't happen once per network event update).
+    this.sortContents();
+    this.filterContents();
+    this.refreshSummary();
+    this.refreshZebra();
+
+    // Rescale all the waterfalls so that everything is visible at once.
+    this._flushWaterfallViews();
+  },
+
+  /**
+   * Customization function for creating an item's UI.
+   *
+   * @param string method
+   *        Specifies the request method (e.g. "GET", "POST", etc.)
+   * @param string url
+   *        Specifies the request's url.
+   * @param object cause
+   *        Specifies the request's cause. Has two properties:
+   *        - type: nsContentPolicyType constant
+   *        - uri: URI of the request origin
+   * @return nsIDOMNode
+   *         The network request view.
+   */
+  _createMenuView: function (method, url, cause) {
+    let template = $("#requests-menu-item-template");
+    let fragment = document.createDocumentFragment();
+
+    // Flatten the DOM by removing one redundant box (the template container).
+    for (let node of template.childNodes) {
+      fragment.appendChild(node.cloneNode(true));
+    }
+
+    this.updateMenuView(fragment, "method", method);
+    this.updateMenuView(fragment, "url", url);
+    this.updateMenuView(fragment, "cause", cause);
+
+    return fragment;
+  },
+
+  /**
+   * Get a human-readable string from a number of bytes, with the B, KB, MB, or
+   * GB value. Note that the transition between abbreviations is by 1000 rather
+   * than 1024 in order to keep the displayed digits smaller as "1016 KB" is
+   * more awkward than 0.99 MB"
+   */
+  getFormattedSize(bytes) {
+    if (bytes < MAX_BYTES_SIZE) {
+      return L10N.getFormatStr("networkMenu.sizeB", bytes);
+    } else if (bytes < MAX_KB_SIZE) {
+      let kb = bytes / BYTES_IN_KB;
+      let size = L10N.numberWithDecimals(kb, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("networkMenu.sizeKB", size);
+    } else if (bytes < MAX_MB_SIZE) {
+      let mb = bytes / BYTES_IN_MB;
+      let size = L10N.numberWithDecimals(mb, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("networkMenu.sizeMB", size);
+    }
+    let gb = bytes / BYTES_IN_GB;
+    let size = L10N.numberWithDecimals(gb, CONTENT_SIZE_DECIMALS);
+    return L10N.getFormatStr("networkMenu.sizeGB", size);
+  },
+
+  /**
+   * Updates the information displayed in a network request item view.
+   *
+   * @param object item
+   *        The network request item in this container.
+   * @param string key
+   *        The type of information that is to be updated.
+   * @param any value
+   *        The new value to be shown.
+   * @return object
+   *         A promise that is resolved once the information is displayed.
+   */
+  updateMenuView: Task.async(function* (item, key, value) {
+    let target = item.target || item;
+
+    switch (key) {
+      case "method": {
+        let node = $(".requests-menu-method", target);
+        node.setAttribute("value", value);
+        break;
+      }
+      case "url": {
+        let uri;
+        try {
+          uri = NetworkHelper.nsIURL(value);
+        } catch (e) {
+          // User input may not make a well-formed url yet.
+          break;
+        }
+        let nameWithQuery = getUriNameWithQuery(uri);
+        let hostPort = getUriHostPort(uri);
+        let host = getUriHost(uri);
+        let unicodeUrl = NetworkHelper.convertToUnicode(unescape(uri.spec));
+
+        let file = $(".requests-menu-file", target);
+        file.setAttribute("value", nameWithQuery);
+        file.setAttribute("tooltiptext", unicodeUrl);
+
+        let domain = $(".requests-menu-domain", target);
+        domain.setAttribute("value", hostPort);
+        domain.setAttribute("tooltiptext", hostPort);
+
+        // Mark local hosts specially, where "local" is  as defined in the W3C
+        // spec for secure contexts.
+        // http://www.w3.org/TR/powerful-features/
+        //
+        //  * If the name falls under 'localhost'
+        //  * If the name is an IPv4 address within 127.0.0.0/8
+        //  * If the name is an IPv6 address within ::1/128
+        //
+        // IPv6 parsing is a little sloppy; it assumes that the address has
+        // been validated before it gets here.
+        let icon = $(".requests-security-state-icon", target);
+        icon.classList.remove("security-state-local");
+        if (host.match(/(.+\.)?localhost$/) ||
+            host.match(/^127\.\d{1,3}\.\d{1,3}\.\d{1,3}/) ||
+            host.match(/\[[0:]+1\]/)) {
+          let tooltip = L10N.getStr("netmonitor.security.state.secure");
+          icon.classList.add("security-state-local");
+          icon.setAttribute("tooltiptext", tooltip);
+        }
+
+        break;
+      }
+      case "remoteAddress":
+        let domain = $(".requests-menu-domain", target);
+        let tooltip = (domain.getAttribute("value") +
+                       (value ? " (" + value + ")" : ""));
+        domain.setAttribute("tooltiptext", tooltip);
+        break;
+      case "securityState": {
+        let icon = $(".requests-security-state-icon", target);
+        this.attachSecurityIconClickListener(item);
+
+        // Security icon for local hosts is set in the "url" branch
+        if (icon.classList.contains("security-state-local")) {
+          break;
+        }
+
+        let tooltip2 = L10N.getStr("netmonitor.security.state." + value);
+        icon.classList.add("security-state-" + value);
+        icon.setAttribute("tooltiptext", tooltip2);
+        break;
+      }
+      case "status": {
+        let node = $(".requests-menu-status-icon", target);
+        // "code" attribute is only used by css to determine the icon color
+        let code;
+        if (value.cached) {
+          code = "cached";
+        } else if (value.serviceWorker) {
+          code = "service worker";
+        } else {
+          code = value.status;
+        }
+        node.setAttribute("code", code);
+        let codeNode = $(".requests-menu-status-code", target);
+        codeNode.setAttribute("value", value.status);
+        break;
+      }
+      case "statusText": {
+        let node = $(".requests-menu-status", target);
+        node.setAttribute("tooltiptext", value);
+        break;
+      }
+      case "cause": {
+        let labelNode = $(".requests-menu-cause-label", target);
+        labelNode.setAttribute("value", loadCauseString(value.type));
+        if (value.loadingDocumentUri) {
+          labelNode.setAttribute("tooltiptext", value.loadingDocumentUri);
+        }
+
+        let stackNode = $(".requests-menu-cause-stack", target);
+        if (value.stacktrace && value.stacktrace.length > 0) {
+          stackNode.removeAttribute("hidden");
+        }
+        break;
+      }
+      case "contentSize": {
+        let node = $(".requests-menu-size", target);
+
+        let text = this.getFormattedSize(value);
+
+        node.setAttribute("value", text);
+        node.setAttribute("tooltiptext", text);
+        break;
+      }
+      case "transferredSize": {
+        let node = $(".requests-menu-transferred", target);
+
+        let text;
+        if (value === null) {
+          text = L10N.getStr("networkMenu.sizeUnavailable");
+        } else if (value === "cached") {
+          text = L10N.getStr("networkMenu.sizeCached");
+          node.classList.add("theme-comment");
+        } else if (value === "service worker") {
+          text = L10N.getStr("networkMenu.sizeServiceWorker");
+          node.classList.add("theme-comment");
+        } else {
+          text = this.getFormattedSize(value);
+        }
+
+        node.setAttribute("value", text);
+        node.setAttribute("tooltiptext", text);
+        break;
+      }
+      case "mimeType": {
+        let type = getAbbreviatedMimeType(value);
+        let node = $(".requests-menu-type", target);
+        let text = CONTENT_MIME_TYPE_ABBREVIATIONS[type] || type;
+        node.setAttribute("value", text);
+        node.setAttribute("tooltiptext", value);
+        break;
+      }
+      case "responseContent": {
+        let { mimeType } = item.attachment;
+
+        if (mimeType.includes("image/")) {
+          let { text, encoding } = value.content;
+          let responseBody = yield gNetwork.getString(text);
+          let node = $(".requests-menu-icon", item.target);
+          node.src = formDataURI(mimeType, encoding, responseBody);
+          node.setAttribute("type", "thumbnail");
+          node.removeAttribute("hidden");
+
+          window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
+        }
+        break;
+      }
+      case "totalTime": {
+        let node = $(".requests-menu-timings-total", target);
+
+        // integer
+        let text = L10N.getFormatStr("networkMenu.totalMS", value);
+        node.setAttribute("value", text);
+        node.setAttribute("tooltiptext", text);
+        break;
+      }
+    }
+  }),
+
+  /**
+   * Creates a waterfall representing timing information in a network
+   * request item view.
+   *
+   * @param object item
+   *        The network request item in this container.
+   * @param object timings
+   *        An object containing timing information.
+   * @param boolean fromCache
+   *        Indicates if the result came from the browser cache or
+   *        a service worker
+   */
+  _createWaterfallView: function (item, timings, fromCache) {
+    let { target } = item;
+    let sections = ["blocked", "dns", "connect", "send", "wait", "receive"];
+    // Skipping "blocked" because it doesn't work yet.
+
+    let timingsNode = $(".requests-menu-timings", target);
+    let timingsTotal = $(".requests-menu-timings-total", timingsNode);
+
+    if (fromCache) {
+      timingsTotal.style.display = "none";
+      return;
+    }
+
+    // Add a set of boxes representing timing information.
+    for (let key of sections) {
+      let width = timings[key];
+
+      // Don't render anything if it surely won't be visible.
+      // One millisecond == one unscaled pixel.
+      if (width > 0) {
+        let timingBox = document.createElement("hbox");
+        timingBox.className = "requests-menu-timings-box " + key;
+        timingBox.setAttribute("width", width);
+        timingsNode.insertBefore(timingBox, timingsTotal);
+      }
+    }
+  },
+
+  /**
+   * Rescales and redraws all the waterfall views in this container.
+   *
+   * @param boolean reset
+   *        True if this container's width was changed.
+   */
+  _flushWaterfallViews: function (reset) {
+    // Don't paint things while the waterfall view isn't even visible,
+    // or there are no items added to this container.
+    if (NetMonitorView.currentFrontendMode !=
+      "network-inspector-view" || !this.itemCount) {
+      return;
+    }
+
+    // To avoid expensive operations like getBoundingClientRect() and
+    // rebuilding the waterfall background each time a new request comes in,
+    // stuff is cached. However, in certain scenarios like when the window
+    // is resized, this needs to be invalidated.
+    if (reset) {
+      this._cachedWaterfallWidth = 0;
+    }
+
+    // Determine the scaling to be applied to all the waterfalls so that
+    // everything is visible at once. One millisecond == one unscaled pixel.
+    let availableWidth = this._waterfallWidth - REQUESTS_WATERFALL_SAFE_BOUNDS;
+    let longestWidth = this._lastRequestEndedMillis -
+      this._firstRequestStartedMillis;
+    let scale = Math.min(Math.max(availableWidth / longestWidth, EPSILON), 1);
+
+    // Redraw and set the canvas background for each waterfall view.
+    this._showWaterfallDivisionLabels(scale);
+    this._drawWaterfallBackground(scale);
+
+    // Apply CSS transforms to each waterfall in this container totalTime
+    // accurately translate and resize as needed.
+    for (let { target, attachment } of this) {
+      let timingsNode = $(".requests-menu-timings", target);
+      let totalNode = $(".requests-menu-timings-total", target);
+      let direction = window.isRTL ? -1 : 1;
+
+      // Render the timing information at a specific horizontal translation
+      // based on the delta to the first monitored event network.
+      let translateX = "translateX(" + (direction *
+        attachment.startedDeltaMillis) + "px)";
+
+      // Based on the total time passed until the last request, rescale
+      // all the waterfalls to a reasonable size.
+      let scaleX = "scaleX(" + scale + ")";
+
+      // Certain nodes should not be scaled, even if they're children of
+      // another scaled node. In this case, apply a reversed transformation.
+      let revScaleX = "scaleX(" + (1 / scale) + ")";
+
+      timingsNode.style.transform = scaleX + " " + translateX;
+      totalNode.style.transform = revScaleX;
+    }
+  },
+
+  /**
+   * Creates the labels displayed on the waterfall header in this container.
+   *
+   * @param number scale
+   *        The current waterfall scale.
+   */
+  _showWaterfallDivisionLabels: function (scale) {
+    let container = $("#requests-menu-waterfall-label-wrapper");
+    let availableWidth = this._waterfallWidth - REQUESTS_WATERFALL_SAFE_BOUNDS;
+
+    // Nuke all existing labels.
+    while (container.hasChildNodes()) {
+      container.firstChild.remove();
+    }
+
+    // Build new millisecond tick labels...
+    let timingStep = REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE;
+    let optimalTickIntervalFound = false;
+
+    while (!optimalTickIntervalFound) {
+      // Ignore any divisions that would end up being too close to each other.
+      let scaledStep = scale * timingStep;
+      if (scaledStep < REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN) {
+        timingStep <<= 1;
+        continue;
+      }
+      optimalTickIntervalFound = true;
+
+      // Insert one label for each division on the current scale.
+      let fragment = document.createDocumentFragment();
+      let direction = window.isRTL ? -1 : 1;
+
+      for (let x = 0; x < availableWidth; x += scaledStep) {
+        let translateX = "translateX(" + ((direction * x) | 0) + "px)";
+        let millisecondTime = x / scale;
+
+        let normalizedTime = millisecondTime;
+        let divisionScale = "millisecond";
+
+        // If the division is greater than 1 minute.
+        if (normalizedTime > 60000) {
+          normalizedTime /= 60000;
+          divisionScale = "minute";
+        } else if (normalizedTime > 1000) {
+          // If the division is greater than 1 second.
+          normalizedTime /= 1000;
+          divisionScale = "second";
+        }
+
+        // Showing too many decimals is bad UX.
+        if (divisionScale == "millisecond") {
+          normalizedTime |= 0;
+        } else {
+          normalizedTime = L10N.numberWithDecimals(normalizedTime,
+            REQUEST_TIME_DECIMALS);
+        }
+
+        let node = document.createElement("label");
+        let text = L10N.getFormatStr("networkMenu." +
+          divisionScale, normalizedTime);
+        node.className = "plain requests-menu-timings-division";
+        node.setAttribute("division-scale", divisionScale);
+        node.style.transform = translateX;
+
+        node.setAttribute("value", text);
+        fragment.appendChild(node);
+      }
+      container.appendChild(fragment);
+
+      container.className = "requests-menu-waterfall-visible";
+    }
+  },
+
+  /**
+   * Creates the background displayed on each waterfall view in this container.
+   *
+   * @param number scale
+   *        The current waterfall scale.
+   */
+  _drawWaterfallBackground: function (scale) {
+    if (!this._canvas || !this._ctx) {
+      this._canvas = document.createElementNS(HTML_NS, "canvas");
+      this._ctx = this._canvas.getContext("2d");
+    }
+    let canvas = this._canvas;
+    let ctx = this._ctx;
+
+    // Nuke the context.
+    let canvasWidth = canvas.width = this._waterfallWidth;
+    // Awww yeah, 1px, repeats on Y axis.
+    let canvasHeight = canvas.height = 1;
+
+    // Start over.
+    let imageData = ctx.createImageData(canvasWidth, canvasHeight);
+    let pixelArray = imageData.data;
+
+    let buf = new ArrayBuffer(pixelArray.length);
+    let view8bit = new Uint8ClampedArray(buf);
+    let view32bit = new Uint32Array(buf);
+
+    // Build new millisecond tick lines...
+    let timingStep = REQUESTS_WATERFALL_BACKGROUND_TICKS_MULTIPLE;
+    let [r, g, b] = REQUESTS_WATERFALL_BACKGROUND_TICKS_COLOR_RGB;
+    let alphaComponent = REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_MIN;
+    let optimalTickIntervalFound = false;
+
+    while (!optimalTickIntervalFound) {
+      // Ignore any divisions that would end up being too close to each other.
+      let scaledStep = scale * timingStep;
+      if (scaledStep < REQUESTS_WATERFALL_BACKGROUND_TICKS_SPACING_MIN) {
+        timingStep <<= 1;
+        continue;
+      }
+      optimalTickIntervalFound = true;
+
+      // Insert one pixel for each division on each scale.
+      for (let i = 1; i <= REQUESTS_WATERFALL_BACKGROUND_TICKS_SCALES; i++) {
+        let increment = scaledStep * Math.pow(2, i);
+        for (let x = 0; x < canvasWidth; x += increment) {
+          let position = (window.isRTL ? canvasWidth - x : x) | 0;
+          view32bit[position] =
+            (alphaComponent << 24) | (b << 16) | (g << 8) | r;
+        }
+        alphaComponent += REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD;
+      }
+    }
+
+    {
+      let t = NetMonitorController.NetworkEventsHandler
+        .firstDocumentDOMContentLoadedTimestamp;
+
+      let delta = Math.floor((t - this._firstRequestStartedMillis) * scale);
+      let [r1, g1, b1, a1] =
+        REQUESTS_WATERFALL_DOMCONTENTLOADED_TICKS_COLOR_RGBA;
+      view32bit[delta] = (a1 << 24) | (r1 << 16) | (g1 << 8) | b1;
+    }
+    {
+      let t = NetMonitorController.NetworkEventsHandler
+        .firstDocumentLoadTimestamp;
+
+      let delta = Math.floor((t - this._firstRequestStartedMillis) * scale);
+      let [r2, g2, b2, a2] = REQUESTS_WATERFALL_LOAD_TICKS_COLOR_RGBA;
+      view32bit[delta] = (a2 << 24) | (r2 << 16) | (g2 << 8) | b2;
+    }
+
+    // Flush the image data and cache the waterfall background.
+    pixelArray.set(view8bit);
+    ctx.putImageData(imageData, 0, 0);
+    document.mozSetImageElement("waterfall-background", canvas);
+  },
+
+  /**
+   * The selection listener for this container.
+   */
+  _onSelect: function ({ detail: item }) {
+    if (item) {
+      NetMonitorView.Sidebar.populate(item.attachment);
+      NetMonitorView.Sidebar.toggle(true);
+    } else {
+      NetMonitorView.Sidebar.toggle(false);
+    }
+  },
+
+  /**
+   * The swap listener for this container.
+   * Called when two items switch places, when the contents are sorted.
+   */
+  _onSwap: function ({ detail: [firstItem, secondItem] }) {
+    // Reattach click listener to the security icons
+    this.attachSecurityIconClickListener(firstItem);
+    this.attachSecurityIconClickListener(secondItem);
+  },
+
+  /**
+   * The predicate used when deciding whether a popup should be shown
+   * over a request item or not.
+   *
+   * @param nsIDOMNode target
+   *        The element node currently being hovered.
+   * @param object tooltip
+   *        The current tooltip instance.
+   * @return {Promise}
+   */
+  _onHover: Task.async(function* (target, tooltip) {
+    let requestItem = this.getItemForElement(target);
+    if (!requestItem) {
+      return false;
+    }
+
+    let hovered = requestItem.attachment;
+    if (hovered.responseContent && target.closest(".requests-menu-icon-and-file")) {
+      return this._setTooltipImageContent(tooltip, requestItem);
+    } else if (hovered.cause && target.closest(".requests-menu-cause-stack")) {
+      return this._setTooltipStackTraceContent(tooltip, requestItem);
+    }
+
+    return false;
+  }),
+
+  _setTooltipImageContent: Task.async(function* (tooltip, requestItem) {
+    let { mimeType, text, encoding } = requestItem.attachment.responseContent.content;
+
+    if (!mimeType || !mimeType.includes("image/")) {
+      return false;
+    }
+
+    let string = yield gNetwork.getString(text);
+    let src = formDataURI(mimeType, encoding, string);
+    let maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
+    let { naturalWidth, naturalHeight } = yield getImageDimensions(tooltip.doc, src);
+    let options = { maxDim, naturalWidth, naturalHeight };
+    setImageTooltip(tooltip, tooltip.doc, src, options);
+
+    return $(".requests-menu-icon", requestItem.target);
+  }),
+
+  _setTooltipStackTraceContent: Task.async(function* (tooltip, requestItem) {
+    let {stacktrace} = requestItem.attachment.cause;
+
+    if (!stacktrace || stacktrace.length == 0) {
+      return false;
+    }
+
+    let doc = tooltip.doc;
+    let el = doc.createElementNS(HTML_NS, "div");
+    el.className = "stack-trace-tooltip devtools-monospace";
+
+    for (let f of stacktrace) {
+      let { functionName, filename, lineNumber, columnNumber, asyncCause } = f;
+
+      if (asyncCause) {
+        // if there is asyncCause, append a "divider" row into the trace
+        let asyncFrameEl = doc.createElementNS(HTML_NS, "div");
+        asyncFrameEl.className = "stack-frame stack-frame-async";
+        asyncFrameEl.textContent =
+          WEBCONSOLE_L10N.getFormatStr("stacktrace.asyncStack", asyncCause);
+        el.appendChild(asyncFrameEl);
+      }
+
+      // Parse a source name in format "url -> url"
+      let sourceUrl = filename.split(" -> ").pop();
+
+      let frameEl = doc.createElementNS(HTML_NS, "div");
+      frameEl.className = "stack-frame stack-frame-call";
+
+      let funcEl = doc.createElementNS(HTML_NS, "span");
+      funcEl.className = "stack-frame-function-name";
+      funcEl.textContent =
+        functionName || WEBCONSOLE_L10N.getStr("stacktrace.anonymousFunction");
+      frameEl.appendChild(funcEl);
+
+      let sourceEl = doc.createElementNS(HTML_NS, "span");
+      sourceEl.className = "stack-frame-source-name";
+      frameEl.appendChild(sourceEl);
+
+      let sourceInnerEl = doc.createElementNS(HTML_NS, "span");
+      sourceInnerEl.className = "stack-frame-source-name-inner";
+      sourceEl.appendChild(sourceInnerEl);
+
+      sourceInnerEl.textContent = sourceUrl;
+      sourceInnerEl.title = sourceUrl;
+
+      let lineEl = doc.createElementNS(HTML_NS, "span");
+      lineEl.className = "stack-frame-line";
+      lineEl.textContent = `:${lineNumber}:${columnNumber}`;
+      sourceInnerEl.appendChild(lineEl);
+
+      frameEl.addEventListener("click", () => {
+        // hide the tooltip immediately, not after delay
+        tooltip.hide();
+        NetMonitorController.viewSourceInDebugger(filename, lineNumber);
+      }, false);
+
+      el.appendChild(frameEl);
+    }
+
+    tooltip.setContent(el, {width: REQUESTS_TOOLTIP_STACK_TRACE_WIDTH});
+
+    return true;
+  }),
+
+  /**
+   * A handler that opens the security tab in the details view if secure or
+   * broken security indicator is clicked.
+   */
+  _onSecurityIconClick: function (e) {
+    let state = this.selectedItem.attachment.securityState;
+    if (state !== "insecure") {
+      // Choose the security tab.
+      NetMonitorView.NetworkDetails.widget.selectedIndex = 5;
+    }
+  },
+
+  /**
+   * The resize listener for this container's window.
+   */
+  _onResize: function (e) {
+    // Allow requests to settle down first.
+    setNamedTimeout("resize-events",
+      RESIZE_REFRESH_RATE, () => this._flushWaterfallViews(true));
+  },
+
+  /**
+   * Scroll listener for the requests menu view.
+   */
+  _onScroll: function () {
+    this.tooltip.hide();
+  },
+
+  /**
+   * Open context menu
+   */
+  _onContextMenu: function (e) {
+    e.preventDefault();
+    this.contextMenu.open(e);
+  },
+
+  /**
+   * Checks if the specified unix time is the first one to be known of,
+   * and saves it if so.
+   *
+   * @param number unixTime
+   *        The milliseconds to check and save.
+   */
+  _registerFirstRequestStart: function (unixTime) {
+    if (this._firstRequestStartedMillis == -1) {
+      this._firstRequestStartedMillis = unixTime;
+    }
+  },
+
+  /**
+   * Checks if the specified unix time is the last one to be known of,
+   * and saves it if so.
+   *
+   * @param number unixTime
+   *        The milliseconds to check and save.
+   */
+  _registerLastRequestEnd: function (unixTime) {
+    if (this._lastRequestEndedMillis < unixTime) {
+      this._lastRequestEndedMillis = unixTime;
+    }
+  },
+
+  /**
+   * Gets the total number of bytes representing the cumulated content size of
+   * a set of requests. Returns 0 for an empty set.
+   *
+   * @param array itemsArray
+   * @return number
+   */
+  _getTotalBytesOfRequests: function (itemsArray) {
+    if (!itemsArray.length) {
+      return 0;
+    }
+
+    let result = 0;
+    itemsArray.forEach(item => {
+      let size = item.attachment.contentSize;
+      result += (typeof size == "number") ? size : 0;
+    });
+
+    return result;
+  },
+
+  /**
+   * Gets the oldest (first performed) request in a set. Returns null for an
+   * empty set.
+   *
+   * @param array itemsArray
+   * @return object
+   */
+  _getOldestRequest: function (itemsArray) {
+    if (!itemsArray.length) {
+      return null;
+    }
+    return itemsArray.reduce((prev, curr) =>
+      prev.attachment.startedMillis < curr.attachment.startedMillis ?
+        prev : curr);
+  },
+
+  /**
+   * Gets the newest (latest performed) request in a set. Returns null for an
+   * empty set.
+   *
+   * @param array itemsArray
+   * @return object
+   */
+  _getNewestRequest: function (itemsArray) {
+    if (!itemsArray.length) {
+      return null;
+    }
+    return itemsArray.reduce((prev, curr) =>
+      prev.attachment.startedMillis > curr.attachment.startedMillis ?
+        prev : curr);
+  },
+
+  /**
+   * Gets the available waterfall width in this container.
+   * @return number
+   */
+  get _waterfallWidth() {
+    if (this._cachedWaterfallWidth == 0) {
+      let container = $("#requests-menu-toolbar");
+      let waterfall = $("#requests-menu-waterfall-header-box");
+      let containerBounds = container.getBoundingClientRect();
+      let waterfallBounds = waterfall.getBoundingClientRect();
+      if (!window.isRTL) {
+        this._cachedWaterfallWidth = containerBounds.width -
+          waterfallBounds.left;
+      } else {
+        this._cachedWaterfallWidth = waterfallBounds.right;
+      }
+    }
+    return this._cachedWaterfallWidth;
+  },
+
+  _splitter: null,
+  _summary: null,
+  _canvas: null,
+  _ctx: null,
+  _cachedWaterfallWidth: 0,
+  _firstRequestStartedMillis: -1,
+  _lastRequestEndedMillis: -1,
+  _updateQueue: [],
+  _addQueue: [],
+  _updateTimeout: null,
+  _resizeTimeout: null,
+  _activeFilters: ["all"],
+  _currentFreetextFilter: ""
+});
+
+exports.RequestsMenuView = RequestsMenuView;
diff --git a/devtools/client/netmonitor/selectors/index.js b/devtools/client/netmonitor/selectors/index.js
new file mode 100644
index 000000000..f473149b5
--- /dev/null
+++ b/devtools/client/netmonitor/selectors/index.js
@@ -0,0 +1,8 @@
+/* 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";
+
+module.exports = {
+  // selectors...
+};
diff --git a/devtools/client/netmonitor/selectors/moz.build b/devtools/client/netmonitor/selectors/moz.build
new file mode 100644
index 000000000..b3975906e
--- /dev/null
+++ b/devtools/client/netmonitor/selectors/moz.build
@@ -0,0 +1,8 @@
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    'index.js'
+)
diff --git a/devtools/client/netmonitor/sort-predicates.js b/devtools/client/netmonitor/sort-predicates.js
new file mode 100644
index 000000000..1ead67c22
--- /dev/null
+++ b/devtools/client/netmonitor/sort-predicates.js
@@ -0,0 +1,92 @@
+"use strict";
+
+const { getAbbreviatedMimeType,
+        getUriNameWithQuery,
+        getUriHostPort,
+        loadCauseString } = require("./request-utils");
+
+/**
+ * Predicates used when sorting items.
+ *
+ * @param object first
+ *        The first item used in the comparison.
+ * @param object second
+ *        The second item used in the comparison.
+ * @return number
+ *         <0 to sort first to a lower index than second
+ *         =0 to leave first and second unchanged with respect to each other
+ *         >0 to sort second to a lower index than first
+ */
+
+function waterfall(first, second) {
+  return first.startedMillis - second.startedMillis;
+}
+
+function status(first, second) {
+  return first.status == second.status
+         ? first.startedMillis - second.startedMillis
+         : first.status - second.status;
+}
+
+function method(first, second) {
+  if (first.method == second.method) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return first.method > second.method ? 1 : -1;
+}
+
+function file(first, second) {
+  let firstUrl = getUriNameWithQuery(first.url).toLowerCase();
+  let secondUrl = getUriNameWithQuery(second.url).toLowerCase();
+  if (firstUrl == secondUrl) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstUrl > secondUrl ? 1 : -1;
+}
+
+function domain(first, second) {
+  let firstDomain = getUriHostPort(first.url).toLowerCase();
+  let secondDomain = getUriHostPort(second.url).toLowerCase();
+  if (firstDomain == secondDomain) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstDomain > secondDomain ? 1 : -1;
+}
+
+function cause(first, second) {
+  let firstCause = loadCauseString(first.cause.type);
+  let secondCause = loadCauseString(second.cause.type);
+  if (firstCause == secondCause) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstCause > secondCause ? 1 : -1;
+}
+
+function type(first, second) {
+  let firstType = getAbbreviatedMimeType(first.mimeType).toLowerCase();
+  let secondType = getAbbreviatedMimeType(second.mimeType).toLowerCase();
+  if (firstType == secondType) {
+    return first.startedMillis - second.startedMillis;
+  }
+  return firstType > secondType ? 1 : -1;
+}
+
+function transferred(first, second) {
+  return first.transferredSize - second.transferredSize;
+}
+
+function size(first, second) {
+  return first.contentSize - second.contentSize;
+}
+
+exports.Sorters = {
+  status,
+  method,
+  file,
+  domain,
+  cause,
+  type,
+  transferred,
+  size,
+  waterfall,
+};
diff --git a/devtools/client/netmonitor/store.js b/devtools/client/netmonitor/store.js
new file mode 100644
index 000000000..454b94711
--- /dev/null
+++ b/devtools/client/netmonitor/store.js
@@ -0,0 +1,13 @@
+/* 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 createStore = require("devtools/client/shared/redux/create-store");
+const reducers = require("./reducers/index");
+
+function configureStore() {
+  return createStore()(reducers);
+}
+
+exports.configureStore = configureStore;
diff --git a/devtools/client/netmonitor/test/.eslintrc.js b/devtools/client/netmonitor/test/.eslintrc.js
new file mode 100644
index 000000000..8d15a76d9
--- /dev/null
+++ b/devtools/client/netmonitor/test/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the shared list of defined globals for mochitests.
+  "extends": "../../../.eslintrc.mochitests.js"
+};
diff --git a/devtools/client/netmonitor/test/browser.ini b/devtools/client/netmonitor/test/browser.ini
new file mode 100644
index 000000000..5dfe9012d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -0,0 +1,156 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  dropmarker.svg
+  head.js
+  html_cause-test-page.html
+  html_content-type-test-page.html
+  html_content-type-without-cache-test-page.html
+  html_brotli-test-page.html
+  html_image-tooltip-test-page.html
+  html_cors-test-page.html
+  html_custom-get-page.html
+  html_cyrillic-test-page.html
+  html_frame-test-page.html
+  html_frame-subdocument.html
+  html_filter-test-page.html
+  html_infinite-get-page.html
+  html_json-custom-mime-test-page.html
+  html_json-long-test-page.html
+  html_json-malformed-test-page.html
+  html_json-text-mime-test-page.html
+  html_jsonp-test-page.html
+  html_navigate-test-page.html
+  html_params-test-page.html
+  html_post-data-test-page.html
+  html_post-json-test-page.html
+  html_post-raw-test-page.html
+  html_post-raw-with-headers-test-page.html
+  html_simple-test-page.html
+  html_single-get-page.html
+  html_send-beacon.html
+  html_sorting-test-page.html
+  html_statistics-test-page.html
+  html_status-codes-test-page.html
+  html_api-calls-test-page.html
+  html_copy-as-curl.html
+  html_curl-utils.html
+  sjs_content-type-test-server.sjs
+  sjs_cors-test-server.sjs
+  sjs_https-redirect-test-server.sjs
+  sjs_hsts-test-server.sjs
+  sjs_simple-test-server.sjs
+  sjs_sorting-test-server.sjs
+  sjs_status-codes-test-server.sjs
+  sjs_truncate-test-server.sjs
+  test-image.png
+  service-workers/status-codes.html
+  service-workers/status-codes-service-worker.js
+  !/devtools/client/framework/test/shared-head.js
+
+[browser_net_aaa_leaktest.js]
+[browser_net_accessibility-01.js]
+[browser_net_accessibility-02.js]
+skip-if = (toolkit == "cocoa" && e10s) # bug 1252254
+[browser_net_api-calls.js]
+[browser_net_autoscroll.js]
+skip-if = true # Bug 1309191 - replace with rewritten version in React
+[browser_net_cached-status.js]
+[browser_net_cause.js]
+[browser_net_cause_redirect.js]
+[browser_net_service-worker-status.js]
+[browser_net_charts-01.js]
+[browser_net_charts-02.js]
+[browser_net_charts-03.js]
+[browser_net_charts-04.js]
+[browser_net_charts-05.js]
+[browser_net_charts-06.js]
+[browser_net_charts-07.js]
+[browser_net_clear.js]
+[browser_net_complex-params.js]
+[browser_net_content-type.js]
+[browser_net_brotli.js]
+[browser_net_curl-utils.js]
+[browser_net_copy_image_as_data_uri.js]
+subsuite = clipboard
+[browser_net_copy_svg_image_as_data_uri.js]
+subsuite = clipboard
+[browser_net_copy_url.js]
+subsuite = clipboard
+[browser_net_copy_params.js]
+subsuite = clipboard
+[browser_net_copy_response.js]
+subsuite = clipboard
+[browser_net_copy_headers.js]
+subsuite = clipboard
+[browser_net_copy_as_curl.js]
+subsuite = clipboard
+[browser_net_cors_requests.js]
+[browser_net_cyrillic-01.js]
+[browser_net_cyrillic-02.js]
+[browser_net_details-no-duplicated-content.js]
+skip-if = (os == 'linux' && e10s && debug) # Bug 1242204
+[browser_net_frame.js]
+[browser_net_filter-01.js]
+[browser_net_filter-02.js]
+[browser_net_filter-03.js]
+[browser_net_filter-04.js]
+[browser_net_footer-summary.js]
+[browser_net_html-preview.js]
+[browser_net_icon-preview.js]
+[browser_net_image-tooltip.js]
+[browser_net_json-long.js]
+[browser_net_json-malformed.js]
+[browser_net_json_custom_mime.js]
+[browser_net_json_text_mime.js]
+[browser_net_jsonp.js]
+[browser_net_large-response.js]
+[browser_net_leak_on_tab_close.js]
+[browser_net_open_request_in_tab.js]
+[browser_net_page-nav.js]
+[browser_net_pane-collapse.js]
+[browser_net_pane-toggle.js]
+[browser_net_post-data-01.js]
+[browser_net_post-data-02.js]
+[browser_net_post-data-03.js]
+[browser_net_post-data-04.js]
+[browser_net_prefs-and-l10n.js]
+[browser_net_prefs-reload.js]
+[browser_net_raw_headers.js]
+[browser_net_reload-button.js]
+[browser_net_reload-markers.js]
+[browser_net_req-resp-bodies.js]
+[browser_net_resend_cors.js]
+[browser_net_resend_headers.js]
+[browser_net_resend.js]
+[browser_net_security-details.js]
+[browser_net_security-error.js]
+[browser_net_security-icon-click.js]
+[browser_net_security-redirect.js]
+[browser_net_security-state.js]
+[browser_net_security-tab-deselect.js]
+[browser_net_security-tab-visibility.js]
+[browser_net_security-warnings.js]
+[browser_net_send-beacon.js]
+[browser_net_send-beacon-other-tab.js]
+[browser_net_simple-init.js]
+[browser_net_simple-request-data.js]
+skip-if = true # Bug 1258809
+[browser_net_simple-request-details.js]
+skip-if = true # Bug 1258809
+[browser_net_simple-request.js]
+[browser_net_sort-01.js]
+skip-if = (e10s && debug && os == 'mac') # Bug 1253037
+[browser_net_sort-02.js]
+[browser_net_sort-03.js]
+[browser_net_statistics-01.js]
+[browser_net_statistics-02.js]
+[browser_net_statistics-03.js]
+[browser_net_status-codes.js]
+[browser_net_streaming-response.js]
+[browser_net_throttle.js]
+[browser_net_timeline_ticks.js]
+[browser_net_timing-division.js]
+[browser_net_truncate.js]
+[browser_net_persistent_logs.js]
diff --git a/devtools/client/netmonitor/test/browser_net_aaa_leaktest.js b/devtools/client/netmonitor/test/browser_net_aaa_leaktest.js
new file mode 100644
index 000000000..31c1e03ad
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_aaa_leaktest.js
@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the network monitor leaks on initialization and sudden destruction.
+ * You can also use this initialization format as a template for other tests.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, NetMonitorView, NetMonitorController } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  ok(tab, "Should have a tab available.");
+  ok(monitor, "Should have a network monitor pane available.");
+
+  ok(document, "Should have a document available.");
+  ok(NetMonitorView, "Should have a NetMonitorView object available.");
+  ok(NetMonitorController, "Should have a NetMonitorController object available.");
+  ok(RequestsMenu, "Should have a RequestsMenu object available.");
+  ok(NetworkDetails, "Should have a NetworkDetails object available.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_accessibility-01.js b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
new file mode 100644
index 000000000..c0832064f
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
@@ -0,0 +1,87 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if focus modifiers work for the SideMenuWidget.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on Ubuntu builds running on ec2.
+  requestLongerTimeout(2);
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let count = 0;
+  function check(selectedIndex, paneVisibility) {
+    info("Performing check " + (count++) + ".");
+
+    is(RequestsMenu.selectedIndex, selectedIndex,
+      "The selected item in the requests menu was incorrect.");
+    is(NetMonitorView.detailsPaneHidden, !paneVisibility,
+      "The network requests details pane visibility state was incorrect.");
+  }
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(2);
+  });
+  yield wait;
+
+  check(-1, false);
+
+  RequestsMenu.focusLastVisibleItem();
+  check(1, true);
+  RequestsMenu.focusFirstVisibleItem();
+  check(0, true);
+
+  RequestsMenu.focusNextItem();
+  check(1, true);
+  RequestsMenu.focusPrevItem();
+  check(0, true);
+
+  RequestsMenu.focusItemAtDelta(+1);
+  check(1, true);
+  RequestsMenu.focusItemAtDelta(-1);
+  check(0, true);
+
+  RequestsMenu.focusItemAtDelta(+10);
+  check(1, true);
+  RequestsMenu.focusItemAtDelta(-10);
+  check(0, true);
+
+  wait = waitForNetworkEvents(monitor, 18);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(18);
+  });
+  yield wait;
+
+  RequestsMenu.focusLastVisibleItem();
+  check(19, true);
+  RequestsMenu.focusFirstVisibleItem();
+  check(0, true);
+
+  RequestsMenu.focusNextItem();
+  check(1, true);
+  RequestsMenu.focusPrevItem();
+  check(0, true);
+
+  RequestsMenu.focusItemAtDelta(+10);
+  check(10, true);
+  RequestsMenu.focusItemAtDelta(-10);
+  check(0, true);
+
+  RequestsMenu.focusItemAtDelta(+100);
+  check(19, true);
+  RequestsMenu.focusItemAtDelta(-100);
+  check(0, true);
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_accessibility-02.js b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
new file mode 100644
index 000000000..33420a440
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if keyboard and mouse navigation works in the network requests menu.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on Ubuntu builds running on ec2.
+  requestLongerTimeout(2);
+
+  let { window, $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let count = 0;
+  function check(selectedIndex, paneVisibility) {
+    info("Performing check " + (count++) + ".");
+
+    is(RequestsMenu.selectedIndex, selectedIndex,
+      "The selected item in the requests menu was incorrect.");
+    is(NetMonitorView.detailsPaneHidden, !paneVisibility,
+      "The network requests details pane visibility state was incorrect.");
+  }
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(2);
+  });
+  yield wait;
+
+  check(-1, false);
+
+  EventUtils.sendKey("DOWN", window);
+  check(0, true);
+  EventUtils.sendKey("UP", window);
+  check(0, true);
+
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(1, true);
+  EventUtils.sendKey("PAGE_UP", window);
+  check(0, true);
+
+  EventUtils.sendKey("END", window);
+  check(1, true);
+  EventUtils.sendKey("HOME", window);
+  check(0, true);
+
+  wait = waitForNetworkEvents(monitor, 18);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(18);
+  });
+  yield wait;
+
+  EventUtils.sendKey("DOWN", window);
+  check(1, true);
+  EventUtils.sendKey("DOWN", window);
+  check(2, true);
+  EventUtils.sendKey("UP", window);
+  check(1, true);
+  EventUtils.sendKey("UP", window);
+  check(0, true);
+
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(4, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(8, true);
+  EventUtils.sendKey("PAGE_UP", window);
+  check(4, true);
+  EventUtils.sendKey("PAGE_UP", window);
+  check(0, true);
+
+  EventUtils.sendKey("HOME", window);
+  check(0, true);
+  EventUtils.sendKey("HOME", window);
+  check(0, true);
+  EventUtils.sendKey("PAGE_UP", window);
+  check(0, true);
+  EventUtils.sendKey("HOME", window);
+  check(0, true);
+
+  EventUtils.sendKey("END", window);
+  check(19, true);
+  EventUtils.sendKey("END", window);
+  check(19, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(19, true);
+  EventUtils.sendKey("END", window);
+  check(19, true);
+
+  EventUtils.sendKey("PAGE_UP", window);
+  check(15, true);
+  EventUtils.sendKey("PAGE_UP", window);
+  check(11, true);
+  EventUtils.sendKey("UP", window);
+  check(10, true);
+  EventUtils.sendKey("UP", window);
+  check(9, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(13, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(17, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(19, true);
+  EventUtils.sendKey("PAGE_DOWN", window);
+  check(19, true);
+
+  EventUtils.sendKey("HOME", window);
+  check(0, true);
+  EventUtils.sendKey("DOWN", window);
+  check(1, true);
+  EventUtils.sendKey("END", window);
+  check(19, true);
+  EventUtils.sendKey("DOWN", window);
+  check(19, true);
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+  check(-1, false);
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $(".side-menu-widget-item"));
+  check(0, true);
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_api-calls.js b/devtools/client/netmonitor/test/browser_net_api-calls.js
new file mode 100644
index 000000000..994dc0354
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_api-calls.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests whether API call URLs (without a filename) are correctly displayed
+ * (including Unicode)
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(API_CALLS_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  const REQUEST_URIS = [
+    "http://example.com/api/fileName.xml",
+    "http://example.com/api/file%E2%98%A2.xml",
+    "http://example.com/api/ascii/get/",
+    "http://example.com/api/unicode/%E2%98%A2/",
+    "http://example.com/api/search/?q=search%E2%98%A2"
+  ];
+
+  let wait = waitForNetworkEvents(monitor, 5);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  REQUEST_URIS.forEach(function (uri, index) {
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(index), "GET", uri);
+  });
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_autoscroll.js b/devtools/client/netmonitor/test/browser_net_autoscroll.js
new file mode 100644
index 000000000..9abb3fd17
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Bug 863102 - Automatically scroll down upon new network requests.
+ */
+add_task(function* () {
+  requestLongerTimeout(2);
+
+  let { monitor } = yield initNetMonitor(INFINITE_GET_URL);
+  let win = monitor.panelWin;
+  let topNode = win.document.getElementById("requests-menu-contents");
+  let requestsContainer = topNode.getElementsByTagName("scrollbox")[0];
+  ok(!!requestsContainer, "Container element exists as expected.");
+
+  // (1) Check that the scroll position is maintained at the bottom
+  // when the requests overflow the vertical size of the container.
+  yield waitForRequestsToOverflowContainer();
+  yield waitForScroll();
+  ok(scrolledToBottom(requestsContainer), "Scrolled to bottom on overflow.");
+
+  // (2) Now set the scroll position somewhere in the middle and check
+  // that additional requests do not change the scroll position.
+  let children = requestsContainer.childNodes;
+  let middleNode = children.item(children.length / 2);
+  middleNode.scrollIntoView();
+  ok(!scrolledToBottom(requestsContainer), "Not scrolled to bottom.");
+  // save for comparison later
+  let scrollTop = requestsContainer.scrollTop;
+  yield waitForNetworkEvents(monitor, 8);
+  yield waitSomeTime();
+  is(requestsContainer.scrollTop, scrollTop, "Did not scroll.");
+
+  // (3) Now set the scroll position back at the bottom and check that
+  // additional requests *do* cause the container to scroll down.
+  requestsContainer.scrollTop = requestsContainer.scrollHeight;
+  ok(scrolledToBottom(requestsContainer), "Set scroll position to bottom.");
+  yield waitForNetworkEvents(monitor, 8);
+  yield waitForScroll();
+  ok(scrolledToBottom(requestsContainer), "Still scrolled to bottom.");
+
+  // (4) Now select an item in the list and check that additional requests
+  // do not change the scroll position.
+  monitor.panelWin.NetMonitorView.RequestsMenu.selectedIndex = 0;
+  yield waitForNetworkEvents(monitor, 8);
+  yield waitSomeTime();
+  is(requestsContainer.scrollTop, 0, "Did not scroll.");
+
+  // Done: clean up.
+  yield teardown(monitor);
+
+  function* waitForRequestsToOverflowContainer() {
+    while (true) {
+      yield waitForNetworkEvents(monitor, 1);
+      if (requestsContainer.scrollHeight > requestsContainer.clientHeight) {
+        return;
+      }
+    }
+  }
+
+  function scrolledToBottom(element) {
+    return element.scrollTop + element.clientHeight >= element.scrollHeight;
+  }
+
+  function waitSomeTime() {
+    // Wait to make sure no scrolls happen
+    return wait(50);
+  }
+
+  function waitForScroll() {
+    return monitor._view.RequestsMenu.widget.once("scroll-to-bottom");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_brotli.js b/devtools/client/netmonitor/test/browser_net_brotli.js
new file mode 100644
index 000000000..cc6908d68
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_brotli.js
@@ -0,0 +1,91 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const BROTLI_URL = HTTPS_EXAMPLE_URL + "html_brotli-test-page.html";
+const BROTLI_REQUESTS = 1;
+
+/**
+ * Test brotli encoded response is handled correctly on HTTPS.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(BROTLI_URL);
+  info("Starting test... ");
+
+  let { document, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, BROTLI_REQUESTS);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", HTTPS_CONTENT_TYPE_SJS + "?fmt=br", {
+      status: 200,
+      statusText: "Connected",
+      type: "plain",
+      fullMimeType: "text/plain",
+      transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 10),
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 64),
+      time: true
+    });
+
+  let onEvent = waitForResponseBodyDisplayed();
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+  yield testResponseTab("br");
+
+  yield teardown(monitor);
+
+  function* testResponseTab(type) {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    function checkVisibility(box) {
+      is(tabpanel.querySelector("#response-content-info-header")
+        .hasAttribute("hidden"), true,
+        "The response info header doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-json-box")
+        .hasAttribute("hidden"), box != "json",
+        "The response content json box doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-textarea-box")
+        .hasAttribute("hidden"), box != "textarea",
+        "The response content textarea box doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-image-box")
+        .hasAttribute("hidden"), box != "image",
+        "The response content image box doesn't have the intended visibility.");
+    }
+
+    switch (type) {
+      case "br": {
+        checkVisibility("textarea");
+
+        let expected = "X".repeat(64);
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), expected,
+          "The text shown in the source editor is incorrect for the brotli request.");
+        is(editor.getMode(), Editor.modes.text,
+          "The mode active in the source editor is incorrect for the brotli request.");
+        break;
+      }
+    }
+  }
+
+  function waitForResponseBodyDisplayed() {
+    return monitor.panelWin.once(monitor.panelWin.EVENTS.RESPONSE_BODY_DISPLAYED);
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_cached-status.js b/devtools/client/netmonitor/test/browser_net_cached-status.js
new file mode 100644
index 000000000..66b926bea
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cached-status.js
@@ -0,0 +1,111 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if cached requests have the correct status code
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL, null, true);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  const REQUEST_DATA = [
+    {
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=ok&cached",
+      details: {
+        status: 200,
+        statusText: "OK",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8"
+      }
+    },
+    {
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=redirect&cached",
+      details: {
+        status: 301,
+        statusText: "Moved Permanently",
+        type: "html",
+        fullMimeType: "text/html; charset=utf-8"
+      }
+    },
+    {
+      method: "GET",
+      uri: "http://example.com/redirected",
+      details: {
+        status: 404,
+        statusText: "Not Found",
+        type: "html",
+        fullMimeType: "text/html; charset=utf-8"
+      }
+    },
+    {
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=ok&cached",
+      details: {
+        status: 200,
+        statusText: "OK (cached)",
+        displayedStatus: "cached",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8"
+      }
+    },
+    {
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=redirect&cached",
+      details: {
+        status: 301,
+        statusText: "Moved Permanently (cached)",
+        displayedStatus: "cached",
+        type: "html",
+        fullMimeType: "text/html; charset=utf-8"
+      }
+    },
+    {
+      method: "GET",
+      uri: "http://example.com/redirected",
+      details: {
+        status: 404,
+        statusText: "Not Found",
+        type: "html",
+        fullMimeType: "text/html; charset=utf-8"
+      }
+    }
+  ];
+
+  info("Performing requests #1...");
+  yield performRequestsAndWait();
+
+  info("Performing requests #2...");
+  yield performRequestsAndWait();
+
+  let index = 0;
+  for (let request of REQUEST_DATA) {
+    let item = RequestsMenu.getItemAtIndex(index);
+
+    info("Verifying request #" + index);
+    yield verifyRequestItemTarget(item, request.method, request.uri, request.details);
+
+    index++;
+  }
+
+  yield teardown(monitor);
+
+  function* performRequestsAndWait() {
+    let wait = waitForNetworkEvents(monitor, 3);
+    yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+      content.wrappedJSObject.performCachedRequests();
+    });
+    yield wait;
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_cause.js b/devtools/client/netmonitor/test/browser_net_cause.js
new file mode 100644
index 000000000..2e73965d0
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cause.js
@@ -0,0 +1,147 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if request cause is reported correctly.
+ */
+
+const CAUSE_FILE_NAME = "html_cause-test-page.html";
+const CAUSE_URL = EXAMPLE_URL + CAUSE_FILE_NAME;
+
+const EXPECTED_REQUESTS = [
+  {
+    method: "GET",
+    url: CAUSE_URL,
+    causeType: "document",
+    causeUri: "",
+    // The document load has internal privileged JS code on the stack
+    stack: true
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "stylesheet_request",
+    causeType: "stylesheet",
+    causeUri: CAUSE_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "img_request",
+    causeType: "img",
+    causeUri: CAUSE_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "xhr_request",
+    causeType: "xhr",
+    causeUri: CAUSE_URL,
+    stack: [{ fn: "performXhrRequest", file: CAUSE_FILE_NAME, line: 22 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "fetch_request",
+    causeType: "fetch",
+    causeUri: CAUSE_URL,
+    stack: [{ fn: "performFetchRequest", file: CAUSE_FILE_NAME, line: 26 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "promise_fetch_request",
+    causeType: "fetch",
+    causeUri: CAUSE_URL,
+    stack: [
+      { fn: "performPromiseFetchRequest", file: CAUSE_FILE_NAME, line: 38 },
+      { fn: null, file: CAUSE_FILE_NAME, line: 37, asyncCause: "promise callback" },
+    ]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "timeout_fetch_request",
+    causeType: "fetch",
+    causeUri: CAUSE_URL,
+    stack: [
+      { fn: "performTimeoutFetchRequest", file: CAUSE_FILE_NAME, line: 40 },
+      { fn: "performPromiseFetchRequest", file: CAUSE_FILE_NAME, line: 39,
+        asyncCause: "setTimeout handler" },
+    ]
+  },
+  {
+    method: "POST",
+    url: EXAMPLE_URL + "beacon_request",
+    causeType: "beacon",
+    causeUri: CAUSE_URL,
+    stack: [{ fn: "performBeaconRequest", file: CAUSE_FILE_NAME, line: 30 }]
+  },
+];
+
+add_task(function* () {
+  // Async stacks aren't on by default in all builds
+  yield SpecialPowers.pushPrefEnv({ set: [["javascript.options.asyncstack", true]] });
+
+  // the initNetMonitor function clears the network request list after the
+  // page is loaded. That's why we first load a bogus page from SIMPLE_URL,
+  // and only then load the real thing from CAUSE_URL - we want to catch
+  // all the requests the page is making, not only the XHRs.
+  // We can't use about:blank here, because initNetMonitor checks that the
+  // page has actually made at least one request.
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length);
+  tab.linkedBrowser.loadURI(CAUSE_URL);
+  yield wait;
+
+  is(RequestsMenu.itemCount, EXPECTED_REQUESTS.length,
+    "All the page events should be recorded.");
+
+  EXPECTED_REQUESTS.forEach((spec, i) => {
+    let { method, url, causeType, causeUri, stack } = spec;
+
+    let requestItem = RequestsMenu.getItemAtIndex(i);
+    verifyRequestItemTarget(requestItem,
+      method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } }
+    );
+
+    let { stacktrace } = requestItem.attachment.cause;
+    let stackLen = stacktrace ? stacktrace.length : 0;
+
+    if (stack) {
+      ok(stacktrace, `Request #${i} has a stacktrace`);
+      ok(stackLen > 0,
+        `Request #${i} (${causeType}) has a stacktrace with ${stackLen} items`);
+
+      // if "stack" is array, check the details about the top stack frames
+      if (Array.isArray(stack)) {
+        stack.forEach((frame, j) => {
+          is(stacktrace[j].functionName, frame.fn,
+            `Request #${i} has the correct function on JS stack frame #${j}`);
+          is(stacktrace[j].filename.split("/").pop(), frame.file,
+            `Request #${i} has the correct file on JS stack frame #${j}`);
+          is(stacktrace[j].lineNumber, frame.line,
+            `Request #${i} has the correct line number on JS stack frame #${j}`);
+          is(stacktrace[j].asyncCause, frame.asyncCause,
+            `Request #${i} has the correct async cause on JS stack frame #${j}`);
+        });
+      }
+    } else {
+      is(stackLen, 0, `Request #${i} (${causeType}) has an empty stacktrace`);
+    }
+  });
+
+  // Sort the requests by cause and check the order
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-cause-button"));
+  let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort();
+  expectedOrder.forEach((expectedCause, i) => {
+    let { target } = RequestsMenu.getItemAtIndex(i);
+    let causeLabel = target.querySelector(".requests-menu-cause-label");
+    let cause = causeLabel.getAttribute("value");
+    is(cause, expectedCause, `The request #${i} has the expected cause after sorting`);
+  });
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_cause_redirect.js b/devtools/client/netmonitor/test/browser_net_cause_redirect.js
new file mode 100644
index 000000000..ace6390ab
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cause_redirect.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if request JS stack is property reported if the request is internally
+ * redirected without hitting the network (HSTS is one of such cases)
+ */
+
+add_task(function* () {
+  const EXPECTED_REQUESTS = [
+    // Request to HTTP URL, redirects to HTTPS, has callstack
+    { status: 302, hasStack: true },
+    // Serves HTTPS, sets the Strict-Transport-Security header, no stack
+    { status: 200, hasStack: false },
+    // Second request to HTTP redirects to HTTPS internally
+    { status: 200, hasStack: true },
+  ];
+
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length);
+  yield performRequests(2, HSTS_SJS);
+  yield wait;
+
+  EXPECTED_REQUESTS.forEach(({status, hasStack}, i) => {
+    let { attachment } = RequestsMenu.getItemAtIndex(i);
+
+    is(attachment.status, status, `Request #${i} has the expected status`);
+
+    let { stacktrace } = attachment.cause;
+    let stackLen = stacktrace ? stacktrace.length : 0;
+
+    if (hasStack) {
+      ok(stacktrace, `Request #${i} has a stacktrace`);
+      ok(stackLen > 0, `Request #${i} has a stacktrace with ${stackLen} items`);
+    } else {
+      is(stackLen, 0, `Request #${i} has an empty stacktrace`);
+    }
+  });
+
+  // Send a request to reset the HSTS policy to state before the test
+  wait = waitForNetworkEvents(monitor, 1);
+  yield performRequests(1, HSTS_SJS + "?reset");
+  yield wait;
+
+  yield teardown(monitor);
+
+  function performRequests(count, url) {
+    return ContentTask.spawn(tab.linkedBrowser, { count, url }, function* (args) {
+      content.wrappedJSObject.performRequests(args.count, args.url);
+    });
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-01.js b/devtools/client/netmonitor/test/browser_net_charts-01.js
new file mode 100644
index 000000000..987881836
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-01.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Pie Charts have the right internal structure.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let pie = Chart.Pie(document, {
+    width: 100,
+    height: 100,
+    data: [{
+      size: 1,
+      label: "foo"
+    }, {
+      size: 2,
+      label: "bar"
+    }, {
+      size: 3,
+      label: "baz"
+    }]
+  });
+
+  let node = pie.node;
+  let slices = node.querySelectorAll(".pie-chart-slice.chart-colored-blob");
+  let labels = node.querySelectorAll(".pie-chart-label");
+
+  ok(node.classList.contains("pie-chart-container") &&
+     node.classList.contains("generic-chart-container"),
+    "A pie chart container was created successfully.");
+
+  is(slices.length, 3,
+    "There should be 3 pie chart slices created.");
+  ok(slices[0].getAttribute("d").match(
+    /\s*M 50,50 L 49\.\d+,97\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,2\.5\d* Z/),
+    "The first slice has the correct data.");
+  ok(slices[1].getAttribute("d").match(
+    /\s*M 50,50 L 91\.\d+,26\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,97\.\d+ Z/),
+    "The second slice has the correct data.");
+  ok(slices[2].getAttribute("d").match(
+    /\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 0 1 91\.\d+,26\.\d+ Z/),
+    "The third slice has the correct data.");
+
+  ok(slices[0].hasAttribute("largest"),
+    "The first slice should be the largest one.");
+  ok(slices[2].hasAttribute("smallest"),
+    "The third slice should be the smallest one.");
+
+  ok(slices[0].getAttribute("name"), "baz",
+    "The first slice's name is correct.");
+  ok(slices[1].getAttribute("name"), "bar",
+    "The first slice's name is correct.");
+  ok(slices[2].getAttribute("name"), "foo",
+    "The first slice's name is correct.");
+
+  is(labels.length, 3,
+    "There should be 3 pie chart labels created.");
+  is(labels[0].textContent, "baz",
+    "The first label's text is correct.");
+  is(labels[1].textContent, "bar",
+    "The first label's text is correct.");
+  is(labels[2].textContent, "foo",
+    "The first label's text is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-02.js b/devtools/client/netmonitor/test/browser_net_charts-02.js
new file mode 100644
index 000000000..ae53147f0
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-02.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Pie Charts have the right internal structure when
+ * initialized with empty data.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let pie = Chart.Pie(document, {
+    data: null,
+    width: 100,
+    height: 100
+  });
+
+  let node = pie.node;
+  let slices = node.querySelectorAll(".pie-chart-slice.chart-colored-blob");
+  let labels = node.querySelectorAll(".pie-chart-label");
+
+  ok(node.classList.contains("pie-chart-container") &&
+     node.classList.contains("generic-chart-container"),
+    "A pie chart container was created successfully.");
+
+  is(slices.length, 1, "There should be 1 pie chart slice created.");
+  ok(slices[0].getAttribute("d").match(
+    /\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 1 1 49\.\d+,2\.5\d* Z/),
+    "The first slice has the correct data.");
+
+  ok(slices[0].hasAttribute("largest"),
+    "The first slice should be the largest one.");
+  ok(slices[0].hasAttribute("smallest"),
+    "The first slice should also be the smallest one.");
+  ok(slices[0].getAttribute("name"), L10N.getStr("pieChart.loading"),
+    "The first slice's name is correct.");
+
+  is(labels.length, 1, "There should be 1 pie chart label created.");
+  is(labels[0].textContent, "Loading", "The first label's text is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-03.js b/devtools/client/netmonitor/test/browser_net_charts-03.js
new file mode 100644
index 000000000..c7d9b0c1a
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-03.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Table Charts have the right internal structure.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let table = Chart.Table(document, {
+    title: "Table title",
+    data: [{
+      label1: 1,
+      label2: 11.1
+    }, {
+      label1: 2,
+      label2: 12.2
+    }, {
+      label1: 3,
+      label2: 13.3
+    }],
+    strings: {
+      label2: (value, index) => value + ["foo", "bar", "baz"][index]
+    },
+    totals: {
+      label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
+      label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    }
+  });
+
+  let node = table.node;
+  let title = node.querySelector(".table-chart-title");
+  let grid = node.querySelector(".table-chart-grid");
+  let totals = node.querySelector(".table-chart-totals");
+  let rows = grid.querySelectorAll(".table-chart-row");
+  let sums = node.querySelectorAll(".table-chart-summary-label");
+
+  ok(node.classList.contains("table-chart-container") &&
+     node.classList.contains("generic-chart-container"),
+    "A table chart container was created successfully.");
+
+  ok(title, "A title node was created successfully.");
+  is(title.getAttribute("value"), "Table title",
+    "The title node displays the correct text.");
+
+  is(rows.length, 3, "There should be 3 table chart rows created.");
+
+  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the firt row.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "label1",
+    "The first column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label2",
+    "The second column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "1",
+    "The first column of the first row displays the correct text.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
+    "The second column of the first row displays the correct text.");
+
+  ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the second row.");
+  is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "label1",
+    "The first column of the second row exists.");
+  is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label2",
+    "The second column of the second row exists.");
+  is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "2",
+    "The first column of the second row displays the correct text.");
+  is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
+    "The second column of the first row displays the correct text.");
+
+  ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the third row.");
+  is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1",
+    "The first column of the third row exists.");
+  is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2",
+    "The second column of the third row exists.");
+  is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "3",
+    "The first column of the third row displays the correct text.");
+  is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
+    "The second column of the third row displays the correct text.");
+
+  is(sums.length, 2, "There should be 2 total summaries created.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("name"),
+    "label1",
+    "The first sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("value"),
+    "Hello 6",
+    "The first sum's value is correct.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("name"),
+    "label2",
+    "The second sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("value"),
+    "World 36.60",
+    "The second sum's value is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-04.js b/devtools/client/netmonitor/test/browser_net_charts-04.js
new file mode 100644
index 000000000..0d150c409
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-04.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Pie Charts have the right internal structure when
+ * initialized with empty data.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let table = Chart.Table(document, {
+    title: "Table title",
+    data: null,
+    totals: {
+      label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
+      label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    }
+  });
+
+  let node = table.node;
+  let title = node.querySelector(".table-chart-title");
+  let grid = node.querySelector(".table-chart-grid");
+  let totals = node.querySelector(".table-chart-totals");
+  let rows = grid.querySelectorAll(".table-chart-row");
+  let sums = node.querySelectorAll(".table-chart-summary-label");
+
+  ok(node.classList.contains("table-chart-container") &&
+     node.classList.contains("generic-chart-container"),
+    "A table chart container was created successfully.");
+
+  ok(title, "A title node was created successfully.");
+  is(title.getAttribute("value"), "Table title",
+    "The title node displays the correct text.");
+
+  is(rows.length, 1, "There should be 1 table chart row created.");
+
+  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the firt row.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+    "The first column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+    "The second column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+    "The first column of the first row displays the correct text.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+    L10N.getStr("tableChart.loading"),
+    "The second column of the first row displays the correct text.");
+
+  is(sums.length, 2,
+    "There should be 2 total summaries created.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("name"),
+    "label1",
+    "The first sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("value"),
+    "Hello 0",
+    "The first sum's value is correct.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("name"),
+    "label2",
+    "The second sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("value"),
+    "World 0",
+    "The second sum's value is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-05.js b/devtools/client/netmonitor/test/browser_net_charts-05.js
new file mode 100644
index 000000000..00445b132
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-05.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Pie+Table Charts have the right internal structure.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let chart = Chart.PieTable(document, {
+    title: "Table title",
+    data: [{
+      size: 1,
+      label: 11.1
+    }, {
+      size: 2,
+      label: 12.2
+    }, {
+      size: 3,
+      label: 13.3
+    }],
+    strings: {
+      label2: (value, index) => value + ["foo", "bar", "baz"][index]
+    },
+    totals: {
+      size: value => "Hello " + L10N.numberWithDecimals(value, 2),
+      label: value => "World " + L10N.numberWithDecimals(value, 2)
+    }
+  });
+
+  ok(chart.pie, "The pie chart proxy is accessible.");
+  ok(chart.table, "The table chart proxy is accessible.");
+
+  let node = chart.node;
+  let rows = node.querySelectorAll(".table-chart-row");
+  let sums = node.querySelectorAll(".table-chart-summary-label");
+
+  ok(node.classList.contains("pie-table-chart-container"),
+    "A pie+table chart container was created successfully.");
+
+  ok(node.querySelector(".table-chart-title"),
+    "A title node was created successfully.");
+  ok(node.querySelector(".pie-chart-container"),
+    "A pie chart was created successfully.");
+  ok(node.querySelector(".table-chart-container"),
+    "A table chart was created successfully.");
+
+  is(rows.length, 3, "There should be 3 pie chart slices created.");
+  is(rows.length, 3, "There should be 3 table chart rows created.");
+  is(sums.length, 2, "There should be 2 total summaries created.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-06.js b/devtools/client/netmonitor/test/browser_net_charts-06.js
new file mode 100644
index 000000000..4bb70e53e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-06.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Pie Charts correctly handle empty source data.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let pie = Chart.Pie(document, {
+    data: [],
+    width: 100,
+    height: 100
+  });
+
+  let node = pie.node;
+  let slices = node.querySelectorAll(".pie-chart-slice.chart-colored-blob");
+  let labels = node.querySelectorAll(".pie-chart-label");
+
+  is(slices.length, 1,
+    "There should be 1 pie chart slice created.");
+  ok(slices[0].getAttribute("d").match(
+    /\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 1 1 49\.\d+,2\.5\d* Z/),
+    "The slice has the correct data.");
+
+  ok(slices[0].hasAttribute("largest"),
+    "The slice should be the largest one.");
+  ok(slices[0].hasAttribute("smallest"),
+    "The slice should also be the smallest one.");
+  ok(slices[0].getAttribute("name"), L10N.getStr("pieChart.unavailable"),
+    "The slice's name is correct.");
+
+  is(labels.length, 1,
+    "There should be 1 pie chart label created.");
+  is(labels[0].textContent, "Empty",
+    "The label's text is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-07.js b/devtools/client/netmonitor/test/browser_net_charts-07.js
new file mode 100644
index 000000000..bb992e4eb
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_charts-07.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Makes sure Table Charts correctly handle empty source data.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Chart } = monitor.panelWin;
+
+  let table = Chart.Table(document, {
+    data: [],
+    totals: {
+      label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
+      label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    }
+  });
+
+  let node = table.node;
+  let grid = node.querySelector(".table-chart-grid");
+  let totals = node.querySelector(".table-chart-totals");
+  let rows = grid.querySelectorAll(".table-chart-row");
+  let sums = node.querySelectorAll(".table-chart-summary-label");
+
+  is(rows.length, 1, "There should be 1 table chart row created.");
+
+  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the firt row.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+    "The first column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+    "The second column of the first row exists.");
+  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+    "The first column of the first row displays the correct text.");
+  is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+    L10N.getStr("tableChart.unavailable"),
+    "The second column of the first row displays the correct text.");
+
+  is(sums.length, 2, "There should be 2 total summaries created.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("name"),
+    "label1",
+    "The first sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("value"),
+    "Hello 0",
+    "The first sum's value is correct.");
+
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("name"),
+    "label2",
+    "The second sum's type is correct.");
+  is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("value"),
+    "World 0",
+    "The second sum's value is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_clear.js b/devtools/client/netmonitor/test/browser_net_clear.js
new file mode 100644
index 000000000..94a60cd39
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_clear.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the clear button empties the request menu.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  let detailsPane = $("#details-pane");
+  let detailsPaneToggleButton = $("#details-pane-toggle");
+  let clearButton = $("#requests-menu-clear-button");
+
+  RequestsMenu.lazyUpdate = false;
+
+  // Make sure we start in a sane state
+  assertNoRequestState(RequestsMenu, detailsPaneToggleButton);
+
+  // Load one request and assert it shows up in the list
+  let networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
+  tab.linkedBrowser.reload();
+  yield networkEvent;
+
+  assertSingleRequestState();
+
+  // Click clear and make sure the requests are gone
+  EventUtils.sendMouseEvent({ type: "click" }, clearButton);
+  assertNoRequestState();
+
+  // Load a second request and make sure they still show up
+  networkEvent = monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT);
+  tab.linkedBrowser.reload();
+  yield networkEvent;
+
+  assertSingleRequestState();
+
+  // Make sure we can now open the details pane
+  NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
+  ok(!detailsPane.classList.contains("pane-collapsed") &&
+    !detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should be visible after clicking the toggle button.");
+
+  // Click clear and make sure the details pane closes
+  EventUtils.sendMouseEvent({ type: "click" }, clearButton);
+  assertNoRequestState();
+  ok(detailsPane.classList.contains("pane-collapsed") &&
+    detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should not be visible clicking 'clear'.");
+
+  return teardown(monitor);
+
+  /**
+   * Asserts the state of the network monitor when one request has loaded
+   */
+  function assertSingleRequestState() {
+    is(RequestsMenu.itemCount, 1,
+      "The request menu should have one item at this point.");
+    is(detailsPaneToggleButton.hasAttribute("disabled"), false,
+      "The pane toggle button should be enabled after a request is made.");
+  }
+
+  /**
+   * Asserts the state of the network monitor when no requests have loaded
+   */
+  function assertNoRequestState() {
+    is(RequestsMenu.itemCount, 0,
+      "The request menu should be empty at this point.");
+    is(detailsPaneToggleButton.hasAttribute("disabled"), true,
+      "The pane toggle button should be disabled when the request menu is cleared.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_complex-params.js b/devtools/client/netmonitor/test/browser_net_complex-params.js
new file mode 100644
index 000000000..103c644bb
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_complex-params.js
@@ -0,0 +1,195 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests whether complex request params and payload sent via POST are
+ * displayed correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(PARAMS_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 1, 6);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[2]);
+  yield onEvent;
+  yield testParamsTab1("a", '""', '{ "foo": "bar" }', '""');
+
+  onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  RequestsMenu.selectedIndex = 1;
+  yield onEvent;
+  yield testParamsTab1("a", '"b"', '{ "foo": "bar" }', '""');
+
+  onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  RequestsMenu.selectedIndex = 2;
+  yield onEvent;
+  yield testParamsTab1("a", '"b"', "foo", '"bar"');
+
+  onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  RequestsMenu.selectedIndex = 3;
+  yield onEvent;
+  yield testParamsTab2("a", '""', '{ "foo": "bar" }', "js");
+
+  onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  RequestsMenu.selectedIndex = 4;
+  yield onEvent;
+  yield testParamsTab2("a", '"b"', '{ "foo": "bar" }', "js");
+
+  onEvent = monitor.panelWin.once(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);
+  RequestsMenu.selectedIndex = 5;
+  yield onEvent;
+  yield testParamsTab2("a", '"b"', "?foo=bar", "text");
+
+  onEvent = monitor.panelWin.once(EVENTS.SIDEBAR_POPULATED);
+  RequestsMenu.selectedIndex = 6;
+  yield onEvent;
+  yield testParamsTab3("a", '"b"');
+
+  yield teardown(monitor);
+
+  function testParamsTab1(queryStringParamName, queryStringParamValue,
+                          formDataParamName, formDataParamValue) {
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
+      "The number of param scopes displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 2,
+      "The number of param values displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    is(tabpanel.querySelector("#request-params-box")
+      .hasAttribute("hidden"), false,
+      "The request params box should not be hidden.");
+    is(tabpanel.querySelector("#request-post-data-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The request post data textarea box should be hidden.");
+
+    let paramsScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    let formDataScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
+
+    is(paramsScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("paramsQueryString"),
+      "The params scope doesn't have the correct title.");
+    is(formDataScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("paramsFormData"),
+      "The form data scope doesn't have the correct title.");
+
+    is(paramsScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      queryStringParamName,
+      "The first query string param name was incorrect.");
+    is(paramsScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      queryStringParamValue,
+      "The first query string param value was incorrect.");
+
+    is(formDataScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      formDataParamName,
+      "The first form data param name was incorrect.");
+    is(formDataScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      formDataParamValue,
+      "The first form data param value was incorrect.");
+  }
+
+  function* testParamsTab2(queryStringParamName, queryStringParamValue,
+                          requestPayload, editorMode) {
+    let isJSON = editorMode == "js";
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
+      "The number of param scopes displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, isJSON ? 4 : 1,
+      "The number of param values displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    is(tabpanel.querySelector("#request-params-box")
+      .hasAttribute("hidden"), false,
+      "The request params box should not be hidden.");
+    is(tabpanel.querySelector("#request-post-data-textarea-box")
+      .hasAttribute("hidden"), isJSON,
+      "The request post data textarea box should be hidden.");
+
+    let paramsScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    let payloadScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
+
+    is(paramsScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("paramsQueryString"),
+      "The params scope doesn't have the correct title.");
+    is(payloadScope.querySelector(".name").getAttribute("value"),
+      isJSON ? L10N.getStr("jsonScopeName") : L10N.getStr("paramsPostPayload"),
+      "The request payload scope doesn't have the correct title.");
+
+    is(paramsScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      queryStringParamName,
+      "The first query string param name was incorrect.");
+    is(paramsScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      queryStringParamValue,
+      "The first query string param value was incorrect.");
+
+    if (isJSON) {
+      let requestPayloadObject = JSON.parse(requestPayload);
+      let requestPairs = Object.keys(requestPayloadObject)
+        .map(k => [k, requestPayloadObject[k]]);
+      let displayedNames = payloadScope.querySelectorAll(
+        ".variables-view-property.variable-or-property .name");
+      let displayedValues = payloadScope.querySelectorAll(
+        ".variables-view-property.variable-or-property .value");
+      for (let i = 0; i < requestPairs.length; i++) {
+        let [requestPayloadName, requestPayloadValue] = requestPairs[i];
+        is(requestPayloadName, displayedNames[i].getAttribute("value"),
+          "JSON property name " + i + " should be displayed correctly");
+        is('"' + requestPayloadValue + '"', displayedValues[i].getAttribute("value"),
+          "JSON property value " + i + " should be displayed correctly");
+      }
+    } else {
+      let editor = yield NetMonitorView.editor("#request-post-data-textarea");
+      is(editor.getText(), requestPayload,
+        "The text shown in the source editor is incorrect.");
+      is(editor.getMode(), Editor.modes[editorMode],
+        "The mode active in the source editor is incorrect.");
+    }
+  }
+
+  function testParamsTab3(queryStringParamName, queryStringParamValue) {
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 0,
+      "The number of param scopes displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 0,
+      "The number of param values displayed in this tabpanel is incorrect.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 1,
+      "The empty notice should be displayed in this tabpanel.");
+
+    is(tabpanel.querySelector("#request-params-box")
+      .hasAttribute("hidden"), false,
+      "The request params box should not be hidden.");
+    is(tabpanel.querySelector("#request-post-data-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The request post data textarea box should be hidden.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_content-type.js b/devtools/client/netmonitor/test/browser_net_content-type.js
new file mode 100644
index 000000000..1951bc69d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_content-type.js
@@ -0,0 +1,255 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if different response content types are handled correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
+  info("Starting test... ");
+
+  let { document, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=xml", {
+      status: 200,
+      statusText: "OK",
+      type: "xml",
+      fullMimeType: "text/xml; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 42),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
+    "GET", CONTENT_TYPE_SJS + "?fmt=css", {
+      status: 200,
+      statusText: "OK",
+      type: "css",
+      fullMimeType: "text/css; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(2),
+    "GET", CONTENT_TYPE_SJS + "?fmt=js", {
+      status: 200,
+      statusText: "OK",
+      type: "js",
+      fullMimeType: "application/javascript; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 34),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(3),
+    "GET", CONTENT_TYPE_SJS + "?fmt=json", {
+      status: 200,
+      statusText: "OK",
+      type: "json",
+      fullMimeType: "application/json; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(4),
+    "GET", CONTENT_TYPE_SJS + "?fmt=bogus", {
+      status: 404,
+      statusText: "Not Found",
+      type: "html",
+      fullMimeType: "text/html; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 24),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(5),
+    "GET", TEST_IMAGE, {
+      fuzzyUrl: true,
+      status: 200,
+      statusText: "OK",
+      type: "png",
+      fullMimeType: "image/png",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 580),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(6),
+    "GET", CONTENT_TYPE_SJS + "?fmt=gzip", {
+      status: 200,
+      statusText: "OK",
+      type: "plain",
+      fullMimeType: "text/plain",
+      transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 73),
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 10.73),
+      time: true
+    });
+
+  let onEvent = waitForResponseBodyDisplayed();
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+  yield testResponseTab("xml");
+
+  yield selectIndexAndWaitForTabUpdated(1);
+  yield testResponseTab("css");
+
+  yield selectIndexAndWaitForTabUpdated(2);
+  yield testResponseTab("js");
+
+  yield selectIndexAndWaitForTabUpdated(3);
+  yield testResponseTab("json");
+
+  yield selectIndexAndWaitForTabUpdated(4);
+  yield testResponseTab("html");
+
+  yield selectIndexAndWaitForTabUpdated(5);
+  yield testResponseTab("png");
+
+  yield selectIndexAndWaitForTabUpdated(6);
+  yield testResponseTab("gzip");
+
+  yield teardown(monitor);
+
+  function* testResponseTab(type) {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    function checkVisibility(box) {
+      is(tabpanel.querySelector("#response-content-info-header")
+        .hasAttribute("hidden"), true,
+        "The response info header doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-json-box")
+        .hasAttribute("hidden"), box != "json",
+        "The response content json box doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-textarea-box")
+        .hasAttribute("hidden"), box != "textarea",
+        "The response content textarea box doesn't have the intended visibility.");
+      is(tabpanel.querySelector("#response-content-image-box")
+        .hasAttribute("hidden"), box != "image",
+        "The response content image box doesn't have the intended visibility.");
+    }
+
+    switch (type) {
+      case "xml": {
+        checkVisibility("textarea");
+
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), "<label value='greeting'>Hello XML!</label>",
+          "The text shown in the source editor is incorrect for the xml request.");
+        is(editor.getMode(), Editor.modes.html,
+          "The mode active in the source editor is incorrect for the xml request.");
+        break;
+      }
+      case "css": {
+        checkVisibility("textarea");
+
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), "body:pre { content: 'Hello CSS!' }",
+          "The text shown in the source editor is incorrect for the xml request.");
+        is(editor.getMode(), Editor.modes.css,
+          "The mode active in the source editor is incorrect for the xml request.");
+        break;
+      }
+      case "js": {
+        checkVisibility("textarea");
+
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), "function() { return 'Hello JS!'; }",
+          "The text shown in the source editor is incorrect for the xml request.");
+        is(editor.getMode(), Editor.modes.js,
+          "The mode active in the source editor is incorrect for the xml request.");
+        break;
+      }
+      case "json": {
+        checkVisibility("json");
+
+        is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+          "There should be 1 json scope displayed in this tabpanel.");
+        is(tabpanel.querySelectorAll(".variables-view-property").length, 2,
+          "There should be 2 json properties displayed in this tabpanel.");
+        is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+          "The empty notice should not be displayed in this tabpanel.");
+
+        let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+
+        is(jsonScope.querySelector(".name").getAttribute("value"),
+          L10N.getStr("jsonScopeName"),
+          "The json scope doesn't have the correct title.");
+
+        is(jsonScope.querySelectorAll(".variables-view-property .name")[0]
+          .getAttribute("value"),
+          "greeting", "The first json property name was incorrect.");
+        is(jsonScope.querySelectorAll(".variables-view-property .value")[0]
+          .getAttribute("value"),
+          "\"Hello JSON!\"", "The first json property value was incorrect.");
+
+        is(jsonScope.querySelectorAll(".variables-view-property .name")[1]
+          .getAttribute("value"),
+          "__proto__", "The second json property name was incorrect.");
+        is(jsonScope.querySelectorAll(".variables-view-property .value")[1]
+          .getAttribute("value"),
+          "Object", "The second json property value was incorrect.");
+        break;
+      }
+      case "html": {
+        checkVisibility("textarea");
+
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), "<blink>Not Found</blink>",
+          "The text shown in the source editor is incorrect for the xml request.");
+        is(editor.getMode(), Editor.modes.html,
+          "The mode active in the source editor is incorrect for the xml request.");
+        break;
+      }
+      case "png": {
+        checkVisibility("image");
+
+        let imageNode = tabpanel.querySelector("#response-content-image");
+        yield once(imageNode, "load");
+
+        is(tabpanel.querySelector("#response-content-image-name-value")
+          .getAttribute("value"), "test-image.png",
+          "The image name info isn't correct.");
+        is(tabpanel.querySelector("#response-content-image-mime-value")
+          .getAttribute("value"), "image/png",
+          "The image mime info isn't correct.");
+        is(tabpanel.querySelector("#response-content-image-dimensions-value")
+          .getAttribute("value"), "16" + " \u00D7 " + "16",
+          "The image dimensions info isn't correct.");
+        break;
+      }
+      case "gzip": {
+        checkVisibility("textarea");
+
+        let expected = new Array(1000).join("Hello gzip!");
+        let editor = yield NetMonitorView.editor("#response-content-textarea");
+        is(editor.getText(), expected,
+          "The text shown in the source editor is incorrect for the gzip request.");
+        is(editor.getMode(), Editor.modes.text,
+          "The mode active in the source editor is incorrect for the gzip request.");
+        break;
+      }
+    }
+  }
+
+  function selectIndexAndWaitForTabUpdated(index) {
+    let onTabUpdated = monitor.panelWin.once(monitor.panelWin.EVENTS.TAB_UPDATED);
+    RequestsMenu.selectedIndex = index;
+    return onTabUpdated;
+  }
+
+  function waitForResponseBodyDisplayed() {
+    return monitor.panelWin.once(monitor.panelWin.EVENTS.RESPONSE_BODY_DISPLAYED);
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_copy_as_curl.js b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
new file mode 100644
index 000000000..9cf66aa4f
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_as_curl.js
@@ -0,0 +1,88 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if Copy as cURL works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CURL_URL);
+  info("Starting test... ");
+
+  // Different quote chars are used for Windows and POSIX
+  const QUOTE = Services.appinfo.OS == "WINNT" ? "\"" : "'";
+
+  // Quote a string, escape the quotes inside the string
+  function quote(str) {
+    return QUOTE + str.replace(new RegExp(QUOTE, "g"), `\\${QUOTE}`) + QUOTE;
+  }
+
+  // Header param is formatted as -H "Header: value" or -H 'Header: value'
+  function header(h) {
+    return "-H " + quote(h);
+  }
+
+  // Construct the expected command
+  const EXPECTED_RESULT = [
+    "curl " + quote(SIMPLE_SJS),
+    "--compressed",
+    header("Host: example.com"),
+    header("User-Agent: " + navigator.userAgent),
+    header("Accept: */*"),
+    header("Accept-Language: " + navigator.language),
+    header("X-Custom-Header-1: Custom value"),
+    header("X-Custom-Header-2: 8.8.8.8"),
+    header("X-Custom-Header-3: Mon, 3 Mar 2014 11:11:11 GMT"),
+    header("Referer: " + CURL_URL),
+    header("Connection: keep-alive"),
+    header("Pragma: no-cache"),
+    header("Cache-Control: no-cache")
+  ];
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) {
+    content.wrappedJSObject.performRequest(url);
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(0);
+  RequestsMenu.selectedItem = requestItem;
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyAsCurl();
+  }, 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).
+    // Here we confirm that the commands are the same even in that case.
+
+    // This monster regexp parses the command line into an array of arguments,
+    // recognizing quoted args with matching quotes and escaped quotes inside:
+    // [ "curl 'url'", "--standalone-arg", "-arg-with-quoted-string 'value\'s'" ]
+    let matchRe = /[-A-Za-z1-9]+(?: ([\"'])(?:\\\1|.)*?\1)?/g;
+
+    let actual = result.match(matchRe);
+
+    // Must begin with the same "curl 'URL'" segment
+    if (!actual || EXPECTED_RESULT[0] != actual[0]) {
+      return false;
+    }
+
+    // Must match each of the params in the middle (headers and --compressed)
+    return EXPECTED_RESULT.length === actual.length &&
+      EXPECTED_RESULT.every(param => actual.includes(param));
+  });
+
+  info("Clipboard contains a cURL command for the currently selected item's url.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_copy_headers.js b/devtools/client/netmonitor/test/browser_net_copy_headers.js
new file mode 100644
index 000000000..36ce2fb34
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_headers.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if copying a request's request/response headers works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(0);
+  RequestsMenu.selectedItem = requestItem;
+
+  let { method, httpVersion, status, statusText } = requestItem.attachment;
+
+  const EXPECTED_REQUEST_HEADERS = [
+    `${method} ${SIMPLE_URL} ${httpVersion}`,
+    "Host: example.com",
+    "User-Agent: " + navigator.userAgent + "",
+    "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+    "Accept-Language: " + navigator.languages.join(",") + ";q=0.5",
+    "Accept-Encoding: gzip, deflate",
+    "Connection: keep-alive",
+    "Upgrade-Insecure-Requests: 1",
+    "Pragma: no-cache",
+    "Cache-Control: no-cache"
+  ].join("\n");
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyRequestHeaders();
+  }, 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.");
+
+  const EXPECTED_RESPONSE_HEADERS = [
+    `${httpVersion} ${status} ${statusText}`,
+    "Last-Modified: Sun, 3 May 2015 11:11:11 GMT",
+    "Content-Type: text/html",
+    "Content-Length: 465",
+    "Connection: close",
+    "Server: httpd.js",
+    "Date: Sun, 3 May 2015 11:11:11 GMT"
+  ].join("\n");
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyResponseHeaders();
+  }, 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;
+  });
+  info("Clipboard contains the currently selected item's response headers.");
+
+  yield teardown(monitor);
+});
diff --git 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
new file mode 100644
index 000000000..144ced80d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_image_as_data_uri.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if copying an image as data uri works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(5);
+  RequestsMenu.selectedItem = requestItem;
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyImageAsDataUri();
+  }, TEST_IMAGE_DATA_URI);
+
+  ok(true, "Clipboard contains the currently selected image as data uri.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_copy_params.js b/devtools/client/netmonitor/test/browser_net_copy_params.js
new file mode 100644
index 000000000..1cb6f6620
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_params.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests whether copying a request item's parameters works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(PARAMS_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1, 6);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(0);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("{ \"foo\": \"bar\" }");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(1);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a=b");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("{ \"foo\": \"bar\" }");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(2);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a=b");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("foo=bar");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(3);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("{ \"foo\": \"bar\" }");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(4);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a=b");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("{ \"foo\": \"bar\" }");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(5);
+  yield testCopyUrlParamsHidden(false);
+  yield testCopyUrlParams("a=b");
+  yield testCopyPostDataHidden(false);
+  yield testCopyPostData("?foo=bar");
+
+  RequestsMenu.selectedItem = RequestsMenu.getItemAtIndex(6);
+  yield testCopyUrlParamsHidden(true);
+  yield testCopyPostDataHidden(true);
+
+  return teardown(monitor);
+
+  function testCopyUrlParamsHidden(hidden) {
+    let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView);
+    let copyUrlParamsNode = allMenuItems.find(item =>
+      item.id === "request-menu-context-copy-url-params");
+    is(copyUrlParamsNode.visible, !hidden,
+      "The \"Copy URL Parameters\" context menu item should" + (hidden ? " " : " not ") +
+        "be hidden.");
+  }
+
+  function* testCopyUrlParams(queryString) {
+    yield waitForClipboardPromise(function setup() {
+      RequestsMenu.contextMenu.copyUrlParams();
+    }, queryString);
+    ok(true, "The url query string copied from the selected item is correct.");
+  }
+
+  function testCopyPostDataHidden(hidden) {
+    let allMenuItems = openContextMenuAndGetAllItems(NetMonitorView);
+    let copyPostDataNode = allMenuItems.find(item =>
+      item.id === "request-menu-context-copy-post-data");
+    is(copyPostDataNode.visible, !hidden,
+      "The \"Copy POST Data\" context menu item should" + (hidden ? " " : " not ") +
+        "be hidden.");
+  }
+
+  function* testCopyPostData(postData) {
+    yield waitForClipboardPromise(function setup() {
+      RequestsMenu.contextMenu.copyPostData();
+    }, postData);
+    ok(true, "The post data string copied from the selected item is correct.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_copy_response.js b/devtools/client/netmonitor/test/browser_net_copy_response.js
new file mode 100644
index 000000000..411fe5cf0
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_response.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if copying a request's response works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
+  info("Starting test... ");
+
+  const EXPECTED_RESULT = '{ "greeting": "Hello JSON!" }';
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(3);
+  RequestsMenu.selectedItem = requestItem;
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyResponse();
+  }, EXPECTED_RESULT);
+
+  yield teardown(monitor);
+});
diff --git 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
new file mode 100644
index 000000000..252ce92bd
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_svg_image_as_data_uri.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if copying an image as data uri works.
+ */
+
+const SVG_URL = EXAMPLE_URL + "dropmarker.svg";
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CURL_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, SVG_URL, function* (url) {
+    content.wrappedJSObject.performRequest(url);
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(0);
+  RequestsMenu.selectedItem = requestItem;
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyImageAsDataUri();
+  }, function check(text) {
+    return text.startsWith("data:") && !/undefined/.test(text);
+  });
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_copy_url.js b/devtools/client/netmonitor/test/browser_net_copy_url.js
new file mode 100644
index 000000000..660f5fe79
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_copy_url.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if copying a request's url works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(1);
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(0);
+  RequestsMenu.selectedItem = requestItem;
+
+  yield waitForClipboardPromise(function setup() {
+    RequestsMenu.contextMenu.copyUrl();
+  }, requestItem.attachment.url);
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_cors_requests.js b/devtools/client/netmonitor/test/browser_net_cors_requests.js
new file mode 100644
index 000000000..d61b8e2f0
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cors_requests.js
@@ -0,0 +1,33 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that CORS preflight requests are displayed by network monitor
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CORS_URL);
+  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1, 1);
+
+  info("Performing a CORS request");
+  let requestUrl = "http://test1.example.com" + CORS_SJS_PATH;
+  yield ContentTask.spawn(tab.linkedBrowser, requestUrl, function* (url) {
+    content.wrappedJSObject.performRequests(url, "triggering/preflight", "post-data");
+  });
+
+  info("Waiting until the requests appear in netmonitor");
+  yield wait;
+
+  info("Checking the preflight and flight methods");
+  ["OPTIONS", "POST"].forEach((method, i) => {
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i), method, requestUrl);
+  });
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_curl-utils.js b/devtools/client/netmonitor/test/browser_net_curl-utils.js
new file mode 100644
index 000000000..7a5fc7926
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_curl-utils.js
@@ -0,0 +1,228 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests Curl Utils functionality.
+ */
+
+const { CurlUtils } = require("devtools/client/shared/curl");
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CURL_UTILS_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView, gNetwork } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1, 3);
+  yield ContentTask.spawn(tab.linkedBrowser, SIMPLE_SJS, function* (url) {
+    content.wrappedJSObject.performRequests(url);
+  });
+  yield wait;
+
+  let requests = {
+    get: RequestsMenu.getItemAtIndex(0),
+    post: RequestsMenu.getItemAtIndex(1),
+    multipart: RequestsMenu.getItemAtIndex(2),
+    multipartForm: RequestsMenu.getItemAtIndex(3)
+  };
+
+  let data = yield createCurlData(requests.get.attachment, gNetwork);
+  testFindHeader(data);
+
+  data = yield createCurlData(requests.post.attachment, gNetwork);
+  testIsUrlEncodedRequest(data);
+  testWritePostDataTextParams(data);
+
+  data = yield createCurlData(requests.multipart.attachment, gNetwork);
+  testIsMultipartRequest(data);
+  testGetMultipartBoundary(data);
+  testRemoveBinaryDataFromMultipartText(data);
+
+  data = yield createCurlData(requests.multipartForm.attachment, gNetwork);
+  testGetHeadersFromMultipartText(data);
+
+  if (Services.appinfo.OS != "WINNT") {
+    testEscapeStringPosix();
+  } else {
+    testEscapeStringWin();
+  }
+
+  yield teardown(monitor);
+});
+
+function testIsUrlEncodedRequest(data) {
+  let isUrlEncoded = CurlUtils.isUrlEncodedRequest(data);
+  ok(isUrlEncoded, "Should return true for url encoded requests.");
+}
+
+function testIsMultipartRequest(data) {
+  let isMultipart = CurlUtils.isMultipartRequest(data);
+  ok(isMultipart, "Should return true for multipart/form-data requests.");
+}
+
+function testFindHeader(data) {
+  let headers = data.headers;
+  let hostName = CurlUtils.findHeader(headers, "Host");
+  let requestedWithLowerCased = CurlUtils.findHeader(headers, "x-requested-with");
+  let doesNotExist = CurlUtils.findHeader(headers, "X-Does-Not-Exist");
+
+  is(hostName, "example.com",
+    "Header with name 'Host' should be found in the request array.");
+  is(requestedWithLowerCased, "XMLHttpRequest",
+    "The search should be case insensitive.");
+  is(doesNotExist, null,
+    "Should return null when a header is not found.");
+}
+
+function testWritePostDataTextParams(data) {
+  let params = CurlUtils.writePostDataTextParams(data.postDataText);
+  is(params, "param1=value1&param2=value2&param3=value3",
+    "Should return a serialized representation of the request parameters");
+}
+
+function testGetMultipartBoundary(data) {
+  let boundary = CurlUtils.getMultipartBoundary(data);
+  ok(/-{3,}\w+/.test(boundary),
+    "A boundary string should be found in a multipart request.");
+}
+
+function testRemoveBinaryDataFromMultipartText(data) {
+  let generatedBoundary = CurlUtils.getMultipartBoundary(data);
+  let text = data.postDataText;
+  let binaryRemoved =
+    CurlUtils.removeBinaryDataFromMultipartText(text, generatedBoundary);
+  let boundary = "--" + generatedBoundary;
+
+  const EXPECTED_POSIX_RESULT = [
+    "$'",
+    boundary,
+    "\\r\\n\\r\\n",
+    "Content-Disposition: form-data; name=\"param1\"",
+    "\\r\\n\\r\\n",
+    "value1",
+    "\\r\\n",
+    boundary,
+    "\\r\\n\\r\\n",
+    "Content-Disposition: form-data; name=\"file\"; filename=\"filename.png\"",
+    "\\r\\n",
+    "Content-Type: image/png",
+    "\\r\\n\\r\\n",
+    boundary + "--",
+    "\\r\\n",
+    "'"
+  ].join("");
+
+  const EXPECTED_WIN_RESULT = [
+    '"' + boundary + '"^',
+    "\u000d\u000A\u000d\u000A",
+    '"Content-Disposition: form-data; name=""param1"""^',
+    "\u000d\u000A\u000d\u000A",
+    '"value1"^',
+    "\u000d\u000A",
+    '"' + boundary + '"^',
+    "\u000d\u000A\u000d\u000A",
+    '"Content-Disposition: form-data; name=""file""; filename=""filename.png"""^',
+    "\u000d\u000A",
+    '"Content-Type: image/png"^',
+    "\u000d\u000A\u000d\u000A",
+    '"' + boundary + '--"^',
+    "\u000d\u000A",
+    '""'
+  ].join("");
+
+  if (Services.appinfo.OS != "WINNT") {
+    is(CurlUtils.escapeStringPosix(binaryRemoved), EXPECTED_POSIX_RESULT,
+      "The mulitpart request payload should not contain binary data.");
+  } else {
+    is(CurlUtils.escapeStringWin(binaryRemoved), EXPECTED_WIN_RESULT,
+      "WinNT: The mulitpart request payload should not contain binary data.");
+  }
+}
+
+function testGetHeadersFromMultipartText(data) {
+  let headers = CurlUtils.getHeadersFromMultipartText(data.postDataText);
+
+  ok(Array.isArray(headers), "Should return an array.");
+  ok(headers.length > 0, "There should exist at least one request header.");
+  is(headers[0].name, "Content-Type", "The first header name should be 'Content-Type'.");
+}
+
+function testEscapeStringPosix() {
+  let surroundedWithQuotes = "A simple string";
+  is(CurlUtils.escapeStringPosix(surroundedWithQuotes), "'A simple string'",
+    "The string should be surrounded with single quotes.");
+
+  let singleQuotes = "It's unusual to put crickets in your coffee.";
+  is(CurlUtils.escapeStringPosix(singleQuotes),
+    "$'It\\'s unusual to put crickets in your coffee.'",
+    "Single quotes should be escaped.");
+
+  let newLines = "Line 1\r\nLine 2\u000d\u000ALine3";
+  is(CurlUtils.escapeStringPosix(newLines), "$'Line 1\\r\\nLine 2\\r\\nLine3'",
+    "Newlines should be escaped.");
+
+  let controlChars = "\u0007 \u0009 \u000C \u001B";
+  is(CurlUtils.escapeStringPosix(controlChars), "$'\\x07 \\x09 \\x0c \\x1b'",
+    "Control characters should be escaped.");
+
+  let extendedAsciiChars = "æ ø ü ß ö é";
+  is(CurlUtils.escapeStringPosix(extendedAsciiChars),
+    "$'\\xc3\\xa6 \\xc3\\xb8 \\xc3\\xbc \\xc3\\x9f \\xc3\\xb6 \\xc3\\xa9'",
+    "Character codes outside of the decimal range 32 - 126 should be escaped.");
+}
+
+function testEscapeStringWin() {
+  let surroundedWithDoubleQuotes = "A simple string";
+  is(CurlUtils.escapeStringWin(surroundedWithDoubleQuotes), '"A simple string"',
+    "The string should be surrounded with double quotes.");
+
+  let doubleQuotes = "Quote: \"Time is an illusion. Lunchtime doubly so.\"";
+  is(CurlUtils.escapeStringWin(doubleQuotes),
+    '"Quote: ""Time is an illusion. Lunchtime doubly so."""',
+    "Double quotes should be escaped.");
+
+  let percentSigns = "%AppData%";
+  is(CurlUtils.escapeStringWin(percentSigns), '""%"AppData"%""',
+    "Percent signs should be escaped.");
+
+  let backslashes = "\\A simple string\\";
+  is(CurlUtils.escapeStringWin(backslashes), '"\\\\A simple string\\\\"',
+    "Backslashes should be escaped.");
+
+  let newLines = "line1\r\nline2\r\nline3";
+  is(CurlUtils.escapeStringWin(newLines),
+    '"line1"^\u000d\u000A"line2"^\u000d\u000A"line3"',
+    "Newlines should be escaped.");
+}
+
+function* createCurlData(selected, network, controller) {
+  let { url, method, httpVersion } = selected;
+
+  // Create a sanitized object for the Curl command generator.
+  let data = {
+    url,
+    method,
+    headers: [],
+    httpVersion,
+    postDataText: null
+  };
+
+  // Fetch header values.
+  for (let { name, value } of selected.requestHeaders.headers) {
+    let text = yield network.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 network.getString(postData);
+  }
+
+  return data;
+}
diff --git a/devtools/client/netmonitor/test/browser_net_cyrillic-01.js b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
new file mode 100644
index 000000000..43d6f522e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-01.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if cyrillic text is rendered correctly in the source editor.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=txt", {
+      status: 200,
+      statusText: "DA DA DA"
+    });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+
+  yield monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  let editor = yield NetMonitorView.editor("#response-content-textarea");
+  // u044F = я
+  is(editor.getText().indexOf("\u044F"), 26,
+    "The text shown in the source editor is correct.");
+  is(editor.getMode(), Editor.modes.text,
+    "The mode active in the source editor is correct.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_cyrillic-02.js b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
new file mode 100644
index 000000000..cd6b2000e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_cyrillic-02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if cyrillic text is rendered correctly in the source editor
+ * when loaded directly from an HTML page.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CYRILLIC_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CYRILLIC_URL, {
+      status: 200,
+      statusText: "OK"
+    });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+
+  yield monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  let editor = yield NetMonitorView.editor("#response-content-textarea");
+  // u044F = я
+  is(editor.getText().indexOf("\u044F"), 486,
+    "The text shown in the source editor is correct.");
+  is(editor.getMode(), Editor.modes.html,
+    "The mode active in the source editor is correct.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_details-no-duplicated-content.js b/devtools/client/netmonitor/test/browser_net_details-no-duplicated-content.js
new file mode 100644
index 000000000..c3df51ced
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_details-no-duplicated-content.js
@@ -0,0 +1,172 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// A test to ensure that the content in details pane is not duplicated.
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let panel = monitor.panelWin;
+  let { NetMonitorView, EVENTS } = panel;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  const COOKIE_UNIQUE_PATH = "/do-not-use-in-other-tests-using-cookies";
+
+  let TEST_CASES = [
+    {
+      desc: "Test headers tab",
+      pageURI: CUSTOM_GET_URL,
+      requestURI: null,
+      isPost: false,
+      tabIndex: 0,
+      variablesView: NetworkDetails._headers,
+      expectedScopeLength: 2,
+    },
+    {
+      desc: "Test cookies tab",
+      pageURI: CUSTOM_GET_URL,
+      requestURI: COOKIE_UNIQUE_PATH,
+      isPost: false,
+      tabIndex: 1,
+      variablesView: NetworkDetails._cookies,
+      expectedScopeLength: 1,
+    },
+    {
+      desc: "Test params tab",
+      pageURI: POST_RAW_URL,
+      requestURI: null,
+      isPost: true,
+      tabIndex: 2,
+      variablesView: NetworkDetails._params,
+      expectedScopeLength: 1,
+    },
+  ];
+
+  info("Adding a cookie for the \"Cookie\" tab test");
+  yield setDocCookie("a=b; path=" + COOKIE_UNIQUE_PATH);
+
+  info("Running tests");
+  for (let spec of TEST_CASES) {
+    yield runTestCase(spec);
+  }
+
+  // Remove the cookie. If an error occurs the path of the cookie ensures it
+  // doesn't mess with the other tests.
+  info("Removing the added cookie.");
+  yield setDocCookie(
+    "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=" + COOKIE_UNIQUE_PATH);
+
+  yield teardown(monitor);
+
+  /**
+   * Set a content document cookie
+   */
+  function setDocCookie(cookie) {
+    return ContentTask.spawn(tab.linkedBrowser, cookie, function* (cookieArg) {
+      content.document.cookie = cookieArg;
+    });
+  }
+
+  /**
+   * A helper that handles the execution of each case.
+   */
+  function* runTestCase(spec) {
+    info("Running case: " + spec.desc);
+    let wait = waitForNetworkEvents(monitor, 1);
+    tab.linkedBrowser.loadURI(spec.pageURI);
+    yield wait;
+
+    RequestsMenu.clear();
+    yield waitForFinalDetailTabUpdate(spec.tabIndex, spec.isPost, spec.requestURI);
+
+    is(spec.variablesView._store.length, spec.expectedScopeLength,
+       "View contains " + spec.expectedScopeLength + " scope headers");
+  }
+
+  /**
+   * A helper that prepares the variables view for the actual testing. It
+   * - selects the correct tab
+   * - performs the specified request to specified URI
+   * - opens the details view
+   * - waits for the final update to happen
+   */
+  function* waitForFinalDetailTabUpdate(tabIndex, isPost, uri) {
+    let onNetworkEvent = panel.once(EVENTS.NETWORK_EVENT);
+    let onDetailsPopulated = panel.once(EVENTS.NETWORKDETAILSVIEW_POPULATED);
+    let onRequestFinished = isPost ?
+      waitForNetworkEvents(monitor, 0, 1) :
+      waitForNetworkEvents(monitor, 1);
+
+    info("Performing a request");
+    yield ContentTask.spawn(tab.linkedBrowser, uri, function* (url) {
+      content.wrappedJSObject.performRequests(1, url);
+    });
+
+    info("Waiting for NETWORK_EVENT");
+    yield onNetworkEvent;
+
+    if (!RequestsMenu.getItemAtIndex(0)) {
+      info("Waiting for the request to be added to the view");
+      yield monitor.panelWin.once(EVENTS.REQUEST_ADDED);
+    }
+
+    ok(true, "Received NETWORK_EVENT. Selecting the item.");
+    let item = RequestsMenu.getItemAtIndex(0);
+    RequestsMenu.selectedItem = item;
+
+    info("Item selected. Waiting for NETWORKDETAILSVIEW_POPULATED");
+    yield onDetailsPopulated;
+
+    info("Received populated event. Selecting tab at index " + tabIndex);
+    NetworkDetails.widget.selectedIndex = tabIndex;
+
+    info("Waiting for request to finish.");
+    yield onRequestFinished;
+
+    ok(true, "Request finished.");
+
+    /**
+     * Because this test uses lazy updates there's four scenarios to consider:
+     * #1: Everything is updated and test is ready to continue.
+     * #2: There's updates that are waiting to be flushed.
+     * #3: Updates are flushed but the tab update is still running.
+     * #4: There's pending updates and a tab update is still running.
+     *
+     * For case #1 there's not going to be a TAB_UPDATED event so don't wait for
+     * it (bug 1106181).
+     *
+     * For cases #2 and #3 it's enough to wait for one TAB_UPDATED event as for
+     * - case #2 the next flush will perform the final update and single
+     *   TAB_UPDATED event is emitted.
+     * - case #3 the running update is the final update that'll emit one
+     *   TAB_UPDATED event.
+     *
+     * For case #4 we must wait for the updates to be flushed before we can
+     * start waiting for TAB_UPDATED event or we'll continue the test right
+     * after the pending update finishes.
+     */
+    let hasQueuedUpdates = RequestsMenu._updateQueue.length !== 0;
+    let hasRunningTabUpdate = NetworkDetails._viewState.updating[tabIndex];
+
+    if (hasQueuedUpdates || hasRunningTabUpdate) {
+      info("There's pending updates - waiting for them to finish.");
+      info("  hasQueuedUpdates: " + hasQueuedUpdates);
+      info("  hasRunningTabUpdate: " + hasRunningTabUpdate);
+
+      if (hasQueuedUpdates && hasRunningTabUpdate) {
+        info("Waiting for updates to be flushed.");
+        // _flushRequests calls .populate which emits the following event
+        yield panel.once(EVENTS.NETWORKDETAILSVIEW_POPULATED);
+
+        info("Requests flushed.");
+      }
+
+      info("Waiting for final tab update.");
+      yield waitFor(panel, EVENTS.TAB_UPDATED);
+    }
+
+    info("All updates completed.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_filter-01.js b/devtools/client/netmonitor/test/browser_net_filter-01.js
new file mode 100644
index 000000000..b0d76c629
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_filter-01.js
@@ -0,0 +1,264 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if filtering items in the network table works correctly.
+ */
+const BASIC_REQUESTS = [
+  { url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined&text=Sample" },
+  { url: "sjs_content-type-test-server.sjs?fmt=css&text=sample" },
+  { url: "sjs_content-type-test-server.sjs?fmt=js&text=sample" },
+];
+
+const REQUESTS_WITH_MEDIA = BASIC_REQUESTS.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=font" },
+  { url: "sjs_content-type-test-server.sjs?fmt=image" },
+  { url: "sjs_content-type-test-server.sjs?fmt=audio" },
+  { url: "sjs_content-type-test-server.sjs?fmt=video" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH = REQUESTS_WITH_MEDIA.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=flash" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = REQUESTS_WITH_MEDIA_AND_FLASH.concat([
+  /* "Upgrade" is a reserved header and can not be set on XMLHttpRequest */
+  { url: "sjs_content-type-test-server.sjs?fmt=ws" },
+]);
+
+add_task(function* () {
+  let Actions = require("devtools/client/netmonitor/actions/index");
+  let { monitor } = yield initNetMonitor(FILTERING_URL);
+  let { gStore } = monitor.panelWin;
+
+  function setFreetextFilter(value) {
+    gStore.dispatch(Actions.setFilterText(value));
+  }
+
+  info("Starting test... ");
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 9);
+  loadCommonFrameScript();
+  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  // First test with single filters...
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  testFilterButtons(monitor, "html");
+  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  // Reset filters
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+  testFilterButtons(monitor, "css");
+  testContents([0, 1, 0, 0, 0, 0, 0, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-js-button"));
+  testFilterButtons(monitor, "js");
+  testContents([0, 0, 1, 0, 0, 0, 0, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-xhr-button"));
+  testFilterButtons(monitor, "xhr");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-fonts-button"));
+  testFilterButtons(monitor, "fonts");
+  testContents([0, 0, 0, 1, 0, 0, 0, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-images-button"));
+  testFilterButtons(monitor, "images");
+  testContents([0, 0, 0, 0, 1, 0, 0, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-media-button"));
+  testFilterButtons(monitor, "media");
+  testContents([0, 0, 0, 0, 0, 1, 1, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+  testFilterButtons(monitor, "flash");
+  testContents([0, 0, 0, 0, 0, 0, 0, 1, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-ws-button"));
+  testFilterButtons(monitor, "ws");
+  testContents([0, 0, 0, 0, 0, 0, 0, 0, 1]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  // Text in filter box that matches nothing should hide all.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  setFreetextFilter("foobar");
+  testContents([0, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  // Text in filter box that matches should filter out everything else.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  setFreetextFilter("sample");
+  testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
+
+  // Text in filter box that matches should filter out everything else.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  setFreetextFilter("SAMPLE");
+  testContents([1, 1, 1, 0, 0, 0, 0, 0, 0]);
+
+  // Test negative filtering (only show unmatched items)
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  setFreetextFilter("-sample");
+  testContents([0, 0, 0, 1, 1, 1, 1, 1, 1]);
+
+  // ...then combine multiple filters together.
+
+  // Enable filtering for html and css; should show request of both type.
+  setFreetextFilter("");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+  testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
+
+  // Html and css filter enabled and text filter should show just the html and css match.
+  // Should not show both the items matching the button plus the items matching the text.
+  setFreetextFilter("sample");
+  testContents([1, 1, 0, 0, 0, 0, 0, 0, 0]);
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+  setFreetextFilter("");
+  testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0]);
+  testContents([1, 1, 0, 0, 0, 0, 0, 1, 0]);
+
+  // Disable some filters. Only one left active.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
+  testFilterButtons(monitor, "html");
+  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  // Disable last active filter. Should toggle to all.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  // Enable few filters and click on all. Only "all" should be checked.
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-ws-button"));
+  testFilterButtonsCustom(monitor, [0, 1, 1, 0, 0, 0, 0, 0, 0, 1]);
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  yield teardown(monitor);
+
+  function testContents(visibility) {
+    isnot(RequestsMenu.selectedItem, null,
+      "There should still be a selected item after filtering.");
+    is(RequestsMenu.selectedIndex, 0,
+      "The first item should be still selected after filtering.");
+    is(NetMonitorView.detailsPaneHidden, false,
+      "The details pane should still be visible after filtering.");
+
+    is(RequestsMenu.items.length, visibility.length,
+      "There should be a specific amount of items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, visibility.filter(e => e).length,
+      "There should be a specific amount of visbile items in the requests menu.");
+
+    for (let i = 0; i < visibility.length; i++) {
+      is(RequestsMenu.getItemAtIndex(i).target.hidden, !visibility[i],
+        "The item at index " + i + " doesn't have the correct hidden state.");
+    }
+
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+      "GET", CONTENT_TYPE_SJS + "?fmt=html", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "html",
+        fullMimeType: "text/html; charset=utf-8"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
+      "GET", CONTENT_TYPE_SJS + "?fmt=css", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "css",
+        fullMimeType: "text/css; charset=utf-8"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(2),
+      "GET", CONTENT_TYPE_SJS + "?fmt=js", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "js",
+        fullMimeType: "application/javascript; charset=utf-8"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(3),
+      "GET", CONTENT_TYPE_SJS + "?fmt=font", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "woff",
+        fullMimeType: "font/woff"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(4),
+      "GET", CONTENT_TYPE_SJS + "?fmt=image", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "png",
+        fullMimeType: "image/png"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(5),
+      "GET", CONTENT_TYPE_SJS + "?fmt=audio", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "ogg",
+        fullMimeType: "audio/ogg"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(6),
+      "GET", CONTENT_TYPE_SJS + "?fmt=video", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "webm",
+        fullMimeType: "video/webm"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(7),
+      "GET", CONTENT_TYPE_SJS + "?fmt=flash", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "OK",
+        type: "x-shockwave-flash",
+        fullMimeType: "application/x-shockwave-flash"
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(8),
+      "GET", CONTENT_TYPE_SJS + "?fmt=ws", {
+        fuzzyUrl: true,
+        status: 101,
+        statusText: "Switching Protocols",
+      });
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_filter-02.js b/devtools/client/netmonitor/test/browser_net_filter-02.js
new file mode 100644
index 000000000..70a051b6d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_filter-02.js
@@ -0,0 +1,200 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if filtering items in the network table works correctly with new requests.
+ */
+
+const BASIC_REQUESTS = [
+  { url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined" },
+  { url: "sjs_content-type-test-server.sjs?fmt=css" },
+  { url: "sjs_content-type-test-server.sjs?fmt=js" },
+];
+
+const REQUESTS_WITH_MEDIA = BASIC_REQUESTS.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=font" },
+  { url: "sjs_content-type-test-server.sjs?fmt=image" },
+  { url: "sjs_content-type-test-server.sjs?fmt=audio" },
+  { url: "sjs_content-type-test-server.sjs?fmt=video" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH = REQUESTS_WITH_MEDIA.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=flash" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = REQUESTS_WITH_MEDIA_AND_FLASH.concat([
+  /* "Upgrade" is a reserved header and can not be set on XMLHttpRequest */
+  { url: "sjs_content-type-test-server.sjs?fmt=ws" },
+]);
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(FILTERING_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on Ubuntu builds running on ec2.
+  requestLongerTimeout(2);
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 9);
+  loadCommonFrameScript();
+  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  info("Testing html filtering.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  testFilterButtons(monitor, "html");
+  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  info("Performing more requests.");
+  wait = waitForNetworkEvents(monitor, 9);
+  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  yield wait;
+
+  info("Testing html filtering again.");
+  testFilterButtons(monitor, "html");
+  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  info("Performing more requests.");
+  wait = waitForNetworkEvents(monitor, 9);
+  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  yield wait;
+
+  info("Testing html filtering again.");
+  testFilterButtons(monitor, "html");
+  testContents([1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,
+                0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]);
+
+  info("Resetting filters.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-all-button"));
+  testFilterButtons(monitor, "all");
+  testContents([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+                1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+  yield teardown(monitor);
+
+  function testContents(visibility) {
+    isnot(RequestsMenu.selectedItem, null,
+      "There should still be a selected item after filtering.");
+    is(RequestsMenu.selectedIndex, 0,
+      "The first item should be still selected after filtering.");
+    is(NetMonitorView.detailsPaneHidden, false,
+      "The details pane should still be visible after filtering.");
+
+    is(RequestsMenu.items.length, visibility.length,
+      "There should be a specific amount of items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, visibility.filter(e => e).length,
+      "There should be a specific amount of visbile items in the requests menu.");
+
+    for (let i = 0; i < visibility.length; i++) {
+      is(RequestsMenu.getItemAtIndex(i).target.hidden, !visibility[i],
+        "The item at index " + i + " doesn't have the correct hidden state.");
+    }
+
+    for (let i = 0; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=html", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "html",
+          fullMimeType: "text/html; charset=utf-8"
+        });
+    }
+    for (let i = 1; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=css", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "css",
+          fullMimeType: "text/css; charset=utf-8"
+        });
+    }
+    for (let i = 2; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=js", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "js",
+          fullMimeType: "application/javascript; charset=utf-8"
+        });
+    }
+    for (let i = 3; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=font", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "woff",
+          fullMimeType: "font/woff"
+        });
+    }
+    for (let i = 4; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=image", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "png",
+          fullMimeType: "image/png"
+        });
+    }
+    for (let i = 5; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=audio", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "ogg",
+          fullMimeType: "audio/ogg"
+        });
+    }
+    for (let i = 6; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=video", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "webm",
+          fullMimeType: "video/webm"
+        });
+    }
+    for (let i = 7; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=flash", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "x-shockwave-flash",
+          fullMimeType: "application/x-shockwave-flash"
+        });
+    }
+    for (let i = 8; i < visibility.length; i += 9) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+        "GET", CONTENT_TYPE_SJS + "?fmt=ws", {
+          fuzzyUrl: true,
+          status: 101,
+          statusText: "Switching Protocols"
+        });
+    }
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_filter-03.js b/devtools/client/netmonitor/test/browser_net_filter-03.js
new file mode 100644
index 000000000..2babdaab3
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_filter-03.js
@@ -0,0 +1,185 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if filtering items in the network table works correctly with new requests
+ * and while sorting is enabled.
+ */
+const BASIC_REQUESTS = [
+  { url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined" },
+  { url: "sjs_content-type-test-server.sjs?fmt=css" },
+  { url: "sjs_content-type-test-server.sjs?fmt=js" },
+];
+
+const REQUESTS_WITH_MEDIA = BASIC_REQUESTS.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=font" },
+  { url: "sjs_content-type-test-server.sjs?fmt=image" },
+  { url: "sjs_content-type-test-server.sjs?fmt=audio" },
+  { url: "sjs_content-type-test-server.sjs?fmt=video" },
+]);
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(FILTERING_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on Ubuntu builds running on ec2.
+  requestLongerTimeout(2);
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  // The test assumes that the first HTML request here has a longer response
+  // body than the other HTML requests performed later during the test.
+  let requests = Cu.cloneInto(REQUESTS_WITH_MEDIA, {});
+  let newres = "res=<p>" + new Array(10).join(Math.random(10)) + "</p>";
+  requests[0].url = requests[0].url.replace("res=undefined", newres);
+
+  loadCommonFrameScript();
+
+  let wait = waitForNetworkEvents(monitor, 7);
+  yield performRequestsInContent(requests);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  testFilterButtons(monitor, "all");
+  testContents([0, 1, 2, 3, 4, 5, 6], 7, 0);
+
+  info("Sorting by size, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+  testFilterButtons(monitor, "all");
+  testContents([6, 4, 5, 0, 1, 2, 3], 7, 6);
+
+  info("Testing html filtering.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  testFilterButtons(monitor, "html");
+  testContents([6, 4, 5, 0, 1, 2, 3], 1, 6);
+
+  info("Performing more requests.");
+  wait = waitForNetworkEvents(monitor, 7);
+  performRequestsInContent(REQUESTS_WITH_MEDIA);
+  yield wait;
+
+  info("Testing html filtering again.");
+  resetSorting();
+  testFilterButtons(monitor, "html");
+  testContents([8, 13, 9, 11, 10, 12, 0, 4, 1, 5, 2, 6, 3, 7], 2, 13);
+
+  info("Performing more requests.");
+  performRequestsInContent(REQUESTS_WITH_MEDIA);
+  yield waitForNetworkEvents(monitor, 7);
+
+  info("Testing html filtering again.");
+  resetSorting();
+  testFilterButtons(monitor, "html");
+  testContents([12, 13, 20, 14, 16, 18, 15, 17, 19, 0, 4, 8, 1, 5, 9, 2, 6, 10, 3, 7, 11],
+    3, 20);
+
+  yield teardown(monitor);
+
+  function resetSorting() {
+    EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+    EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+  }
+
+  function testContents(order, visible, selection) {
+    isnot(RequestsMenu.selectedItem, null,
+      "There should still be a selected item after filtering.");
+    is(RequestsMenu.selectedIndex, selection,
+      "The first item should be still selected after filtering.");
+    is(NetMonitorView.detailsPaneHidden, false,
+      "The details pane should still be visible after filtering.");
+
+    is(RequestsMenu.items.length, order.length,
+      "There should be a specific amount of items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, visible,
+      "There should be a specific amount of visbile items in the requests menu.");
+
+    for (let i = 0; i < order.length; i++) {
+      is(RequestsMenu.getItemAtIndex(i), RequestsMenu.items[i],
+        "The requests menu items aren't ordered correctly. Misplaced item " + i + ".");
+    }
+
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=html", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "html",
+          fullMimeType: "text/html; charset=utf-8"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=css", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "css",
+          fullMimeType: "text/css; charset=utf-8"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 2]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=js", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "js",
+          fullMimeType: "application/javascript; charset=utf-8"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 3]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=font", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "woff",
+          fullMimeType: "font/woff"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 4]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=image", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "png",
+          fullMimeType: "image/png"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 5]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=audio", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "ogg",
+          fullMimeType: "audio/ogg"
+        });
+    }
+    for (let i = 0, len = order.length / 7; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 6]),
+        "GET", CONTENT_TYPE_SJS + "?fmt=video", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "OK",
+          type: "webm",
+          fullMimeType: "video/webm"
+        });
+    }
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_filter-04.js b/devtools/client/netmonitor/test/browser_net_filter-04.js
new file mode 100644
index 000000000..e617dbaa9
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_filter-04.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if invalid filter types are sanitized when loaded from the preferences.
+ */
+
+const BASIC_REQUESTS = [
+  { url: "sjs_content-type-test-server.sjs?fmt=html&res=undefined" },
+  { url: "sjs_content-type-test-server.sjs?fmt=css" },
+  { url: "sjs_content-type-test-server.sjs?fmt=js" },
+];
+
+const REQUESTS_WITH_MEDIA = BASIC_REQUESTS.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=font" },
+  { url: "sjs_content-type-test-server.sjs?fmt=image" },
+  { url: "sjs_content-type-test-server.sjs?fmt=audio" },
+  { url: "sjs_content-type-test-server.sjs?fmt=video" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH = REQUESTS_WITH_MEDIA.concat([
+  { url: "sjs_content-type-test-server.sjs?fmt=flash" },
+]);
+
+const REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS = REQUESTS_WITH_MEDIA_AND_FLASH.concat([
+  /* "Upgrade" is a reserved header and can not be set on XMLHttpRequest */
+  { url: "sjs_content-type-test-server.sjs?fmt=ws" },
+]);
+
+add_task(function* () {
+  Services.prefs.setCharPref("devtools.netmonitor.filters", '["js", "bogus"]');
+
+  let { monitor } = yield initNetMonitor(FILTERING_URL);
+  info("Starting test... ");
+
+  let { Prefs, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  is(Prefs.filters.length, 2,
+    "All filter types were loaded as an array from the preferences.");
+  is(Prefs.filters[0], "js",
+    "The first filter type is correct.");
+  is(Prefs.filters[1], "bogus",
+    "The second filter type is invalid, but loaded anyway.");
+
+  let wait = waitForNetworkEvents(monitor, 9);
+  loadCommonFrameScript();
+  yield performRequestsInContent(REQUESTS_WITH_MEDIA_AND_FLASH_AND_WS);
+  yield wait;
+
+  testFilterButtons(monitor, "js");
+  ok(true, "Only the correct filter type was taken into consideration.");
+
+  yield teardown(monitor);
+
+  let filters = Services.prefs.getCharPref("devtools.netmonitor.filters");
+  is(filters, '["js"]',
+    "The bogus filter type was ignored and removed from the preferences.");
+});
diff --git a/devtools/client/netmonitor/test/browser_net_footer-summary.js b/devtools/client/netmonitor/test/browser_net_footer-summary.js
new file mode 100644
index 000000000..e484b2097
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if the summary text displayed in the network requests menu footer
+ * is correct.
+ */
+
+add_task(function* () {
+  requestLongerTimeout(2);
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+  let { PluralForm } = require("devtools/shared/plural-form");
+
+  let { tab, monitor } = yield initNetMonitor(FILTERING_URL);
+  info("Starting test... ");
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  testStatus();
+
+  for (let i = 0; i < 2; i++) {
+    info(`Performing requests in batch #${i}`);
+    let wait = waitForNetworkEvents(monitor, 8);
+    yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+      content.wrappedJSObject.performRequests('{ "getMedia": true, "getFlash": true }');
+    });
+    yield wait;
+
+    testStatus();
+
+    let buttons = ["html", "css", "js", "xhr", "fonts", "images", "media", "flash"];
+    for (let button of buttons) {
+      let buttonEl = $(`#requests-menu-filter-${button}-button`);
+      EventUtils.sendMouseEvent({ type: "click" }, buttonEl);
+      testStatus();
+    }
+  }
+
+  yield teardown(monitor);
+
+  function testStatus() {
+    let summary = $("#requests-menu-network-summary-button");
+    let value = summary.getAttribute("label");
+    info("Current summary: " + value);
+
+    let visibleItems = RequestsMenu.visibleItems;
+    let visibleRequestsCount = visibleItems.length;
+    let totalRequestsCount = RequestsMenu.itemCount;
+    info("Current requests: " + visibleRequestsCount + " of " + totalRequestsCount + ".");
+
+    if (!totalRequestsCount || !visibleRequestsCount) {
+      is(value, L10N.getStr("networkMenu.empty"),
+        "The current summary text is incorrect, expected an 'empty' label.");
+      return;
+    }
+
+    let totalBytes = RequestsMenu._getTotalBytesOfRequests(visibleItems);
+    let totalMillis =
+      RequestsMenu._getNewestRequest(visibleItems).attachment.endedMillis -
+      RequestsMenu._getOldestRequest(visibleItems).attachment.startedMillis;
+
+    info("Computed total bytes: " + totalBytes);
+    info("Computed total millis: " + totalMillis);
+
+    is(value, PluralForm.get(visibleRequestsCount, L10N.getStr("networkMenu.summary"))
+      .replace("#1", visibleRequestsCount)
+      .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, 2))
+      .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, 2))
+    , "The current summary text is incorrect.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_frame.js b/devtools/client/netmonitor/test/browser_net_frame.js
new file mode 100644
index 000000000..eeded652b
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_frame.js
@@ -0,0 +1,221 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests for all expected requests when an iframe is loading a subdocument.
+ */
+
+const TOP_FILE_NAME = "html_frame-test-page.html";
+const SUB_FILE_NAME = "html_frame-subdocument.html";
+const TOP_URL = EXAMPLE_URL + TOP_FILE_NAME;
+const SUB_URL = EXAMPLE_URL + SUB_FILE_NAME;
+
+const EXPECTED_REQUESTS_TOP = [
+  {
+    method: "GET",
+    url: TOP_URL,
+    causeType: "document",
+    causeUri: "",
+    stack: true
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "stylesheet_request",
+    causeType: "stylesheet",
+    causeUri: TOP_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "img_request",
+    causeType: "img",
+    causeUri: TOP_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "xhr_request",
+    causeType: "xhr",
+    causeUri: TOP_URL,
+    stack: [{ fn: "performXhrRequest", file: TOP_FILE_NAME, line: 23 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "fetch_request",
+    causeType: "fetch",
+    causeUri: TOP_URL,
+    stack: [{ fn: "performFetchRequest", file: TOP_FILE_NAME, line: 27 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "promise_fetch_request",
+    causeType: "fetch",
+    causeUri: TOP_URL,
+    stack: [
+      { fn: "performPromiseFetchRequest", file: TOP_FILE_NAME, line: 39 },
+      { fn: null, file: TOP_FILE_NAME, line: 38, asyncCause: "promise callback" },
+    ]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "timeout_fetch_request",
+    causeType: "fetch",
+    causeUri: TOP_URL,
+    stack: [
+      { fn: "performTimeoutFetchRequest", file: TOP_FILE_NAME, line: 41 },
+      { fn: "performPromiseFetchRequest", file: TOP_FILE_NAME, line: 40,
+        asyncCause: "setTimeout handler" },
+    ]
+  },
+  {
+    method: "POST",
+    url: EXAMPLE_URL + "beacon_request",
+    causeType: "beacon",
+    causeUri: TOP_URL,
+    stack: [{ fn: "performBeaconRequest", file: TOP_FILE_NAME, line: 31 }]
+  },
+];
+
+const EXPECTED_REQUESTS_SUB = [
+  {
+    method: "GET",
+    url: SUB_URL,
+    causeType: "subdocument",
+    causeUri: TOP_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "stylesheet_request",
+    causeType: "stylesheet",
+    causeUri: SUB_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "img_request",
+    causeType: "img",
+    causeUri: SUB_URL,
+    stack: false
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "xhr_request",
+    causeType: "xhr",
+    causeUri: SUB_URL,
+    stack: [{ fn: "performXhrRequest", file: SUB_FILE_NAME, line: 22 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "fetch_request",
+    causeType: "fetch",
+    causeUri: SUB_URL,
+    stack: [{ fn: "performFetchRequest", file: SUB_FILE_NAME, line: 26 }]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "promise_fetch_request",
+    causeType: "fetch",
+    causeUri: SUB_URL,
+    stack: [
+      { fn: "performPromiseFetchRequest", file: SUB_FILE_NAME, line: 38 },
+      { fn: null, file: SUB_FILE_NAME, line: 37, asyncCause: "promise callback" },
+    ]
+  },
+  {
+    method: "GET",
+    url: EXAMPLE_URL + "timeout_fetch_request",
+    causeType: "fetch",
+    causeUri: SUB_URL,
+    stack: [
+      { fn: "performTimeoutFetchRequest", file: SUB_FILE_NAME, line: 40 },
+      { fn: "performPromiseFetchRequest", file: SUB_FILE_NAME, line: 39,
+        asyncCause: "setTimeout handler" },
+    ]
+  },
+  {
+    method: "POST",
+    url: EXAMPLE_URL + "beacon_request",
+    causeType: "beacon",
+    causeUri: SUB_URL,
+    stack: [{ fn: "performBeaconRequest", file: SUB_FILE_NAME, line: 30 }]
+  },
+];
+
+const REQUEST_COUNT = EXPECTED_REQUESTS_TOP.length + EXPECTED_REQUESTS_SUB.length;
+
+add_task(function* () {
+  // Async stacks aren't on by default in all builds
+  yield SpecialPowers.pushPrefEnv({ set: [["javascript.options.asyncstack", true]] });
+
+  // the initNetMonitor function clears the network request list after the
+  // page is loaded. That's why we first load a bogus page from SIMPLE_URL,
+  // and only then load the real thing from TOP_URL - we want to catch
+  // all the requests the page is making, not only the XHRs.
+  // We can't use about:blank here, because initNetMonitor checks that the
+  // page has actually made at least one request.
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  tab.linkedBrowser.loadURI(TOP_URL, null, null);
+
+  yield waitForNetworkEvents(monitor, REQUEST_COUNT);
+
+  is(RequestsMenu.itemCount, REQUEST_COUNT,
+    "All the page events should be recorded.");
+
+  // While there is a defined order for requests in each document separately, the requests
+  // from different documents may interleave in various ways that change per test run, so
+  // there is not a single order when considering all the requests together.
+  let currentTop = 0;
+  let currentSub = 0;
+  for (let i = 0; i < REQUEST_COUNT; i++) {
+    let requestItem = RequestsMenu.getItemAtIndex(i);
+
+    let itemUrl = requestItem.attachment.url;
+    let itemCauseUri = requestItem.target.querySelector(".requests-menu-cause-label")
+                                         .getAttribute("tooltiptext");
+    let spec;
+    if (itemUrl == SUB_URL || itemCauseUri == SUB_URL) {
+      spec = EXPECTED_REQUESTS_SUB[currentSub++];
+    } else {
+      spec = EXPECTED_REQUESTS_TOP[currentTop++];
+    }
+    let { method, url, causeType, causeUri, stack } = spec;
+
+    verifyRequestItemTarget(requestItem,
+      method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } }
+    );
+
+    let { stacktrace } = requestItem.attachment.cause;
+    let stackLen = stacktrace ? stacktrace.length : 0;
+
+    if (stack) {
+      ok(stacktrace, `Request #${i} has a stacktrace`);
+      ok(stackLen > 0,
+        `Request #${i} (${causeType}) has a stacktrace with ${stackLen} items`);
+
+      // if "stack" is array, check the details about the top stack frames
+      if (Array.isArray(stack)) {
+        stack.forEach((frame, j) => {
+          is(stacktrace[j].functionName, frame.fn,
+            `Request #${i} has the correct function on JS stack frame #${j}`);
+          is(stacktrace[j].filename.split("/").pop(), frame.file,
+            `Request #${i} has the correct file on JS stack frame #${j}`);
+          is(stacktrace[j].lineNumber, frame.line,
+            `Request #${i} has the correct line number on JS stack frame #${j}`);
+          is(stacktrace[j].asyncCause, frame.asyncCause,
+            `Request #${i} has the correct async cause on JS stack frame #${j}`);
+        });
+      }
+    } else {
+      is(stackLen, 0, `Request #${i} (${causeType}) has an empty stacktrace`);
+    }
+  }
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_html-preview.js b/devtools/client/netmonitor/test/browser_net_html-preview.js
new file mode 100644
index 000000000..351009de5
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_html-preview.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if html responses show and properly populate a "Preview" tab.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_URL);
+  info("Starting test... ");
+
+  let { $, document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 6);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+
+  is($("#event-details-pane").selectedIndex, 0,
+    "The first tab in the details pane should be selected.");
+  is($("#preview-tab").hidden, true,
+    "The preview tab should be hidden for non html responses.");
+  is($("#preview-tabpanel").hidden, false,
+    "The preview tabpanel is not hidden for non html responses.");
+
+  RequestsMenu.selectedIndex = 4;
+  NetMonitorView.toggleDetailsPane({ visible: true, animated: false }, 6);
+
+  is($("#event-details-pane").selectedIndex, 6,
+    "The sixth tab in the details pane should be selected.");
+  is($("#preview-tab").hidden, false,
+    "The preview tab should be visible now.");
+
+  yield monitor.panelWin.once(EVENTS.RESPONSE_HTML_PREVIEW_DISPLAYED);
+  let iframe = $("#response-preview");
+  ok(iframe,
+    "There should be a response preview iframe available.");
+  ok(iframe.contentDocument,
+    "The iframe's content document should be available.");
+  is(iframe.contentDocument.querySelector("blink").textContent, "Not Found",
+    "The iframe's content document should be loaded and correct.");
+
+  RequestsMenu.selectedIndex = 5;
+
+  is($("#event-details-pane").selectedIndex, 0,
+    "The first tab in the details pane should be selected again.");
+  is($("#preview-tab").hidden, true,
+    "The preview tab should be hidden again for non html responses.");
+  is($("#preview-tabpanel").hidden, false,
+    "The preview tabpanel is not hidden again for non html responses.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_icon-preview.js b/devtools/client/netmonitor/test/browser_net_icon-preview.js
new file mode 100644
index 000000000..e3c5bde4e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_icon-preview.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if image responses show a thumbnail in the requests menu.
+ */
+
+add_task(function* () {
+  let Actions = require("devtools/client/netmonitor/actions/index");
+
+  let { tab, monitor } = yield initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL);
+  info("Starting test... ");
+
+  let { $, $all, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController,
+        gStore } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  let wait = waitForEvents();
+  yield performRequests();
+  yield wait;
+
+  info("Checking the image thumbnail when all items are shown.");
+  checkImageThumbnail();
+
+  RequestsMenu.sortBy("size");
+  info("Checking the image thumbnail when all items are sorted.");
+  checkImageThumbnail();
+
+  gStore.dispatch(Actions.toggleFilterType("images"));
+  info("Checking the image thumbnail when only images are shown.");
+  checkImageThumbnail();
+
+  info("Reloading the debuggee and performing all requests again...");
+  wait = waitForEvents();
+  yield reloadAndPerformRequests();
+  yield wait;
+
+  info("Checking the image thumbnail after a reload.");
+  checkImageThumbnail();
+
+  yield teardown(monitor);
+
+  function waitForEvents() {
+    return promise.all([
+      waitForNetworkEvents(monitor, CONTENT_TYPE_WITHOUT_CACHE_REQUESTS),
+      monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED)
+    ]);
+  }
+
+  function performRequests() {
+    return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+      content.wrappedJSObject.performRequests();
+    });
+  }
+
+  function* reloadAndPerformRequests() {
+    yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+    yield performRequests();
+  }
+
+  function checkImageThumbnail() {
+    is($all(".requests-menu-icon[type=thumbnail]").length, 1,
+      "There should be only one image request with a thumbnail displayed.");
+    is($(".requests-menu-icon[type=thumbnail]").src, TEST_IMAGE_DATA_URI,
+      "The image requests-menu-icon thumbnail is displayed correctly.");
+    is($(".requests-menu-icon[type=thumbnail]").hidden, false,
+      "The image requests-menu-icon thumbnail should not be hidden.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_image-tooltip.js b/devtools/client/netmonitor/test/browser_net_image-tooltip.js
new file mode 100644
index 000000000..04cd26959
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_image-tooltip.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const IMAGE_TOOLTIP_URL = EXAMPLE_URL + "html_image-tooltip-test-page.html";
+const IMAGE_TOOLTIP_REQUESTS = 1;
+
+/**
+ * Tests if image responses show a popup in the requests menu when hovered.
+ */
+add_task(function* test() {
+  let { tab, monitor } = yield initNetMonitor(IMAGE_TOOLTIP_URL);
+  info("Starting test... ");
+
+  let { $, EVENTS, ACTIVITY_TYPE, NetMonitorView, NetMonitorController } =
+    monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = true;
+
+  let onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS);
+  let onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
+
+  yield performRequests();
+  yield onEvents;
+  yield onThumbnail;
+
+  info("Checking the image thumbnail after a few requests were made...");
+  yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.items[0]);
+
+  // 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(RequestsMenu.tooltip, RequestsMenu.items[0]);
+
+  // +1 extra document reload
+  onEvents = waitForNetworkEvents(monitor, IMAGE_TOOLTIP_REQUESTS + 1);
+  onThumbnail = monitor.panelWin.once(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
+
+  info("Reloading the debuggee and performing all requests again...");
+  yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+  yield performRequests();
+  yield onEvents;
+  yield onThumbnail;
+
+  info("Checking the image thumbnail after a reload.");
+  yield showTooltipAndVerify(RequestsMenu.tooltip, RequestsMenu.items[1]);
+
+  info("Checking if the image thumbnail is hidden when mouse leaves the menu widget");
+  let requestsMenuEl = $("#requests-menu-contents");
+  let onHidden = RequestsMenu.tooltip.once("hidden");
+  EventUtils.synthesizeMouse(requestsMenuEl, 0, 0, {type: "mouseout"}, monitor.panelWin);
+  yield onHidden;
+
+  yield teardown(monitor);
+
+  function performRequests() {
+    return ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+      content.wrappedJSObject.performRequests();
+    });
+  }
+
+  /**
+   * Show a tooltip on the {requestItem} and verify that it was displayed
+   * with the expected content.
+   */
+  function* showTooltipAndVerify(tooltip, requestItem) {
+    let anchor = $(".requests-menu-file", requestItem.target);
+    yield showTooltipOn(tooltip, anchor);
+
+    info("Tooltip was successfully opened for the image request.");
+    is(tooltip.panel.querySelector("img").src, TEST_IMAGE_DATA_URI,
+      "The tooltip's image content is displayed correctly.");
+  }
+
+  /**
+   * Trigger a tooltip over an element by sending mousemove event.
+   * @return a promise that resolves when the tooltip is shown
+   */
+  function showTooltipOn(tooltip, element) {
+    let onShown = tooltip.once("shown");
+    let win = element.ownerDocument.defaultView;
+    EventUtils.synthesizeMouseAtCenter(element, {type: "mousemove"}, win);
+    return onShown;
+  }
+
+  /**
+   * Hide a tooltip on the {requestItem} and verify that it was closed.
+   */
+  function* hideTooltipAndVerify(tooltip, requestItem) {
+    // Hovering method hides tooltip.
+    let anchor = $(".requests-menu-method", requestItem.target);
+
+    let onHidden = tooltip.once("hidden");
+    let win = anchor.ownerDocument.defaultView;
+    EventUtils.synthesizeMouseAtCenter(anchor, {type: "mousemove"}, win);
+    yield onHidden;
+
+    info("Tooltip was successfully closed.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_json-long.js b/devtools/client/netmonitor/test/browser_net_json-long.js
new file mode 100644
index 000000000..2347d26c4
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_json-long.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if very long JSON responses are handled correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(JSON_LONG_URL);
+  info("Starting test... ");
+
+  // This is receiving over 80 KB of json and will populate over 6000 items
+  // in a variables view instance. Debug builds are slow.
+  requestLongerTimeout(4);
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=json-long", {
+      status: 200,
+      statusText: "OK",
+      type: "json",
+      fullMimeType: "text/json; charset=utf-8",
+      size: L10N.getFormatStr("networkMenu.sizeKB",
+        L10N.numberWithDecimals(85975 / 1024, 2)),
+      time: true
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  testResponseTab();
+
+  yield teardown(monitor);
+
+  function testResponseTab() {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#response-content-info-header")
+      .hasAttribute("hidden"), true,
+      "The response info header doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-json-box")
+      .hasAttribute("hidden"), false,
+      "The response content json box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The response content textarea box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-image-box")
+      .hasAttribute("hidden"), true,
+      "The response content image box doesn't have the intended visibility.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+      "There should be 1 json scope displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-property").length, 6143,
+      "There should be 6143 json properties displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    let names = ".variables-view-property > .title > .name";
+    let values = ".variables-view-property > .title > .value";
+
+    is(jsonScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("jsonScopeName"),
+      "The json scope doesn't have the correct title.");
+
+    is(jsonScope.querySelectorAll(names)[0].getAttribute("value"),
+      "0", "The first json property name was incorrect.");
+    is(jsonScope.querySelectorAll(values)[0].getAttribute("value"),
+      "Object", "The first json property value was incorrect.");
+
+    is(jsonScope.querySelectorAll(names)[1].getAttribute("value"),
+      "greeting", "The second json property name was incorrect.");
+    is(jsonScope.querySelectorAll(values)[1].getAttribute("value"),
+      "\"Hello long string JSON!\"", "The second json property value was incorrect.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_json-malformed.js b/devtools/client/netmonitor/test/browser_net_json-malformed.js
new file mode 100644
index 000000000..6bed60480
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_json-malformed.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if malformed JSON responses are handled correctly.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(JSON_MALFORMED_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=json-malformed", {
+      status: 200,
+      statusText: "OK",
+      type: "json",
+      fullMimeType: "text/json; charset=utf-8"
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  let tabEl = document.querySelectorAll("#details-pane tab")[3];
+  let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+  is(tabEl.getAttribute("selected"), "true",
+    "The response tab in the network details pane should be selected.");
+
+  is(tabpanel.querySelector("#response-content-info-header")
+    .hasAttribute("hidden"), false,
+    "The response info header doesn't have the intended visibility.");
+  is(tabpanel.querySelector("#response-content-info-header")
+    .getAttribute("value"),
+    "SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data" +
+      " at line 1 column 40 of the JSON data",
+    "The response info header doesn't have the intended value attribute.");
+  is(tabpanel.querySelector("#response-content-info-header")
+    .getAttribute("tooltiptext"),
+    "SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data" +
+      " at line 1 column 40 of the JSON data",
+    "The response info header doesn't have the intended tooltiptext attribute.");
+
+  is(tabpanel.querySelector("#response-content-json-box")
+    .hasAttribute("hidden"), true,
+    "The response content json box doesn't have the intended visibility.");
+  is(tabpanel.querySelector("#response-content-textarea-box")
+    .hasAttribute("hidden"), false,
+    "The response content textarea box doesn't have the intended visibility.");
+  is(tabpanel.querySelector("#response-content-image-box")
+    .hasAttribute("hidden"), true,
+    "The response content image box doesn't have the intended visibility.");
+
+  let editor = yield NetMonitorView.editor("#response-content-textarea");
+  is(editor.getText(), "{ \"greeting\": \"Hello malformed JSON!\" },",
+    "The text shown in the source editor is incorrect.");
+  is(editor.getMode(), Editor.modes.js,
+    "The mode active in the source editor is incorrect.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_json_custom_mime.js b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
new file mode 100644
index 000000000..210ffbbe8
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_json_custom_mime.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if JSON responses with unusal/custom MIME types are handled correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(JSON_CUSTOM_MIME_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=json-custom-mime", {
+      status: 200,
+      statusText: "OK",
+      type: "x-bigcorp-json",
+      fullMimeType: "text/x-bigcorp-json; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
+      time: true
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  testResponseTab();
+
+  yield teardown(monitor);
+
+  function testResponseTab() {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#response-content-info-header")
+      .hasAttribute("hidden"), true,
+      "The response info header doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-json-box")
+      .hasAttribute("hidden"), false,
+      "The response content json box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The response content textarea box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-image-box")
+      .hasAttribute("hidden"), true,
+      "The response content image box doesn't have the intended visibility.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+      "There should be 1 json scope displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-property").length, 2,
+      "There should be 2 json properties displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[0]
+      .getAttribute("value"),
+      "greeting", "The first json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[0]
+      .getAttribute("value"),
+      "\"Hello oddly-named JSON!\"", "The first json property value was incorrect.");
+
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[1]
+      .getAttribute("value"),
+      "__proto__", "The second json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[1]
+      .getAttribute("value"),
+      "Object", "The second json property value was incorrect.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_json_text_mime.js b/devtools/client/netmonitor/test/browser_net_json_text_mime.js
new file mode 100644
index 000000000..edc98a5c9
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_json_text_mime.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if JSON responses with unusal/custom MIME types are handled correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(JSON_TEXT_MIME_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=json-text-mime", {
+      status: 200,
+      statusText: "OK",
+      type: "plain",
+      fullMimeType: "text/plain; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
+      time: true
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  testResponseTab();
+
+  yield teardown(monitor);
+
+  function testResponseTab() {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#response-content-info-header")
+      .hasAttribute("hidden"), true,
+      "The response info header doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-json-box")
+      .hasAttribute("hidden"), false,
+      "The response content json box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The response content textarea box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-image-box")
+      .hasAttribute("hidden"), true,
+      "The response content image box doesn't have the intended visibility.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+      "There should be 1 json scope displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-property").length, 2,
+      "There should be 2 json properties displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[0]
+      .getAttribute("value"),
+      "greeting", "The first json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[0]
+      .getAttribute("value"),
+      "\"Hello third-party JSON!\"", "The first json property value was incorrect.");
+
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[1]
+      .getAttribute("value"),
+      "__proto__", "The second json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[1]
+      .getAttribute("value"),
+      "Object", "The second json property value was incorrect.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_jsonp.js b/devtools/client/netmonitor/test/browser_net_jsonp.js
new file mode 100644
index 000000000..3007d8c4d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_jsonp.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if JSONP responses are handled correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(JSONP_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._json.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=jsonp&jsonp=$_0123Fun", {
+      status: 200,
+      statusText: "OK",
+      type: "json",
+      fullMimeType: "text/json; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 41),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
+    "GET", CONTENT_TYPE_SJS + "?fmt=jsonp2&jsonp=$_4567Sad", {
+      status: 200,
+      statusText: "OK",
+      type: "json",
+      fullMimeType: "text/json; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 54),
+      time: true
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  testResponseTab("$_0123Fun", "\"Hello JSONP!\"");
+
+  onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  RequestsMenu.selectedIndex = 1;
+  yield onEvent;
+
+  testResponseTab("$_4567Sad", "\"Hello weird JSONP!\"");
+
+  yield teardown(monitor);
+
+  function testResponseTab(func, greeting) {
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#response-content-info-header")
+      .hasAttribute("hidden"), true,
+      "The response info header doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-json-box")
+      .hasAttribute("hidden"), false,
+      "The response content json box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The response content textarea box doesn't have the intended visibility.");
+    is(tabpanel.querySelector("#response-content-image-box")
+      .hasAttribute("hidden"), true,
+      "The response content image box doesn't have the intended visibility.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+      "There should be 1 json scope displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-property").length, 2,
+      "There should be 2 json properties displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+
+    is(jsonScope.querySelector(".name").getAttribute("value"),
+      L10N.getFormatStr("jsonpScopeName", func),
+      "The json scope doesn't have the correct title.");
+
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[0]
+      .getAttribute("value"),
+      "greeting", "The first json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[0]
+      .getAttribute("value"),
+      greeting, "The first json property value was incorrect.");
+
+    is(jsonScope.querySelectorAll(".variables-view-property .name")[1]
+      .getAttribute("value"),
+      "__proto__", "The second json property name was incorrect.");
+    is(jsonScope.querySelectorAll(".variables-view-property .value")[1]
+      .getAttribute("value"),
+      "Object", "The second json property value was incorrect.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_large-response.js b/devtools/client/netmonitor/test/browser_net_large-response.js
new file mode 100644
index 000000000..98d67b46d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_large-response.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if very large response contents are just displayed as plain text.
+ */
+
+const HTML_LONG_URL = CONTENT_TYPE_SJS + "?fmt=html-long";
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  // This test could potentially be slow because over 100 KB of stuff
+  // is going to be requested and displayed in the source editor.
+  requestLongerTimeout(2);
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, HTML_LONG_URL, function* (url) {
+    content.wrappedJSObject.performRequests(1, url);
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "GET", CONTENT_TYPE_SJS + "?fmt=html-long", {
+      status: 200,
+      statusText: "OK"
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.RESPONSE_BODY_DISPLAYED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+  yield onEvent;
+
+  let editor = yield NetMonitorView.editor("#response-content-textarea");
+  ok(editor.getText().match(/^<p>/),
+    "The text shown in the source editor is incorrect.");
+  is(editor.getMode(), Editor.modes.text,
+    "The mode active in the source editor is incorrect.");
+
+  yield teardown(monitor);
+
+  // This test uses a lot of memory, so force a GC to help fragmentation.
+  info("Forcing GC after netmonitor test.");
+  Cu.forceGC();
+});
diff --git a/devtools/client/netmonitor/test/browser_net_leak_on_tab_close.js b/devtools/client/netmonitor/test/browser_net_leak_on_tab_close.js
new file mode 100644
index 000000000..9e788f36c
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_leak_on_tab_close.js
@@ -0,0 +1,17 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that netmonitor doesn't leak windows on parent-side pages (bug 1285638)
+ */
+
+add_task(function* () {
+  // Tell initNetMonitor to enable cache. Otherwise it will assert that there were more
+  // than zero network requests during the page load. But when loading about:config,
+  // there are none.
+  let { monitor } = yield initNetMonitor("about:config", null, true);
+  ok(monitor, "The network monitor was opened");
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
new file mode 100644
index 000000000..8e7ffcc84
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_open_request_in_tab.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if Open in new tab works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test...");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(1);
+  });
+  yield wait;
+
+  let requestItem = RequestsMenu.getItemAtIndex(0);
+  RequestsMenu.selectedItem = requestItem;
+
+  let onTabOpen = once(gBrowser.tabContainer, "TabOpen", false);
+  RequestsMenu.contextMenu.openRequestInTab();
+  yield onTabOpen;
+
+  ok(true, "A new tab has been opened");
+
+  yield teardown(monitor);
+
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/netmonitor/test/browser_net_page-nav.js b/devtools/client/netmonitor/test/browser_net_page-nav.js
new file mode 100644
index 000000000..6ac18297c
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_page-nav.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if page navigation ("close", "navigate", etc.) triggers an appropriate
+ * action in the network monitor.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { EVENTS } = monitor.panelWin;
+
+  yield testNavigate();
+  yield testNavigateBack();
+  yield testClose();
+
+  function* testNavigate() {
+    info("Navigating forward...");
+
+    let onWillNav = monitor.panelWin.once(EVENTS.TARGET_WILL_NAVIGATE);
+    let onDidNav = monitor.panelWin.once(EVENTS.TARGET_DID_NAVIGATE);
+
+    tab.linkedBrowser.loadURI(NAVIGATE_URL);
+    yield onWillNav;
+
+    is(tab.linkedBrowser.currentURI.spec, SIMPLE_URL,
+      "Target started navigating to the correct location.");
+
+    yield onDidNav;
+    is(tab.linkedBrowser.currentURI.spec, NAVIGATE_URL,
+      "Target finished navigating to the correct location.");
+  }
+
+  function* testNavigateBack() {
+    info("Navigating backward...");
+
+    let onWillNav = monitor.panelWin.once(EVENTS.TARGET_WILL_NAVIGATE);
+    let onDidNav = monitor.panelWin.once(EVENTS.TARGET_DID_NAVIGATE);
+
+    tab.linkedBrowser.loadURI(SIMPLE_URL);
+    yield onWillNav;
+
+    is(tab.linkedBrowser.currentURI.spec, NAVIGATE_URL,
+      "Target started navigating back to the previous location.");
+
+    yield onDidNav;
+    is(tab.linkedBrowser.currentURI.spec, SIMPLE_URL,
+      "Target finished navigating back to the previous location.");
+  }
+
+  function* testClose() {
+    info("Closing...");
+
+    let onDestroyed = monitor.once("destroyed");
+    removeTab(tab);
+    yield onDestroyed;
+
+    ok(!monitor._controller.client,
+      "There shouldn't be a client available after destruction.");
+    ok(!monitor._controller.tabClient,
+      "There shouldn't be a tabClient available after destruction.");
+    ok(!monitor._controller.webConsoleClient,
+      "There shouldn't be a webConsoleClient available after destruction.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_pane-collapse.js b/devtools/client/netmonitor/test/browser_net_pane-collapse.js
new file mode 100644
index 000000000..2760ec000
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_pane-collapse.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the network monitor panes collapse properly.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, Prefs, NetMonitorView } = monitor.panelWin;
+  let detailsPane = document.getElementById("details-pane");
+  let detailsPaneToggleButton = document.getElementById("details-pane-toggle");
+
+  ok(detailsPane.classList.contains("pane-collapsed") &&
+     detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should initially be hidden.");
+
+  NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
+
+  let width = ~~(detailsPane.getAttribute("width"));
+  is(width, Prefs.networkDetailsWidth,
+    "The details pane has an incorrect width.");
+  is(detailsPane.style.marginLeft, "0px",
+    "The details pane has an incorrect left margin.");
+  is(detailsPane.style.marginRight, "0px",
+    "The details pane has an incorrect right margin.");
+  ok(!detailsPane.hasAttribute("animated"),
+    "The details pane has an incorrect animated attribute.");
+  ok(!detailsPane.classList.contains("pane-collapsed") &&
+     !detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should at this point be visible.");
+
+  // Trigger reflow to make sure the UI is in required state.
+  document.documentElement.getBoundingClientRect();
+
+  NetMonitorView.toggleDetailsPane({ visible: false, animated: true });
+
+  yield once(detailsPane, "transitionend");
+
+  let margin = -(width + 1) + "px";
+  is(width, Prefs.networkDetailsWidth,
+    "The details pane has an incorrect width after collapsing.");
+  is(detailsPane.style.marginLeft, margin,
+    "The details pane has an incorrect left margin after collapsing.");
+  is(detailsPane.style.marginRight, margin,
+    "The details pane has an incorrect right margin after collapsing.");
+  ok(!detailsPane.hasAttribute("animated"),
+    "The details pane has an incorrect attribute after an animated collapsing.");
+  ok(detailsPane.classList.contains("pane-collapsed") &&
+     detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should not be visible after collapsing.");
+
+  NetMonitorView.toggleDetailsPane({ visible: true, animated: false });
+
+  is(width, Prefs.networkDetailsWidth,
+    "The details pane has an incorrect width after uncollapsing.");
+  is(detailsPane.style.marginLeft, "0px",
+    "The details pane has an incorrect left margin after uncollapsing.");
+  is(detailsPane.style.marginRight, "0px",
+    "The details pane has an incorrect right margin after uncollapsing.");
+  ok(!detailsPane.hasAttribute("animated"),
+    "The details pane has an incorrect attribute after an unanimated uncollapsing.");
+  ok(!detailsPane.classList.contains("pane-collapsed") &&
+     !detailsPaneToggleButton.classList.contains("pane-collapsed"),
+    "The details pane should be visible again after uncollapsing.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_pane-toggle.js b/devtools/client/netmonitor/test/browser_net_pane-toggle.js
new file mode 100644
index 000000000..87b71019c
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_pane-toggle.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if toggling the details pane works as expected.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  let { NETWORK_EVENT, TAB_UPDATED } = monitor.panelWin.EVENTS;
+  RequestsMenu.lazyUpdate = false;
+
+  let toggleButton = $("#details-pane-toggle");
+
+  is(toggleButton.hasAttribute("disabled"), true,
+    "The pane toggle button should be disabled when the frontend is opened.");
+  is(toggleButton.classList.contains("pane-collapsed"), true,
+    "The pane toggle button should indicate that the details pane is " +
+    "collapsed when the frontend is opened.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should be hidden when the frontend is opened.");
+  is(RequestsMenu.selectedItem, null,
+    "There should be no selected item in the requests menu.");
+
+  let networkEvent = monitor.panelWin.once(NETWORK_EVENT);
+  tab.linkedBrowser.reload();
+  yield networkEvent;
+
+  is(toggleButton.hasAttribute("disabled"), false,
+    "The pane toggle button should be enabled after the first request.");
+  is(toggleButton.classList.contains("pane-collapsed"), true,
+    "The pane toggle button should still indicate that the details pane is " +
+    "collapsed after the first request.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should still be hidden after the first request.");
+  is(RequestsMenu.selectedItem, null,
+    "There should still be no selected item in the requests menu.");
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
+
+  yield monitor.panelWin.once(TAB_UPDATED);
+
+  is(toggleButton.hasAttribute("disabled"), false,
+    "The pane toggle button should still be enabled after being pressed.");
+  is(toggleButton.classList.contains("pane-collapsed"), false,
+    "The pane toggle button should now indicate that the details pane is " +
+    "not collapsed anymore after being pressed.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, toggleButton);
+
+  is(toggleButton.hasAttribute("disabled"), false,
+    "The pane toggle button should still be enabled after being pressed again.");
+  is(toggleButton.classList.contains("pane-collapsed"), true,
+    "The pane toggle button should now indicate that the details pane is " +
+    "collapsed after being pressed again.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should now be hidden after the toggle button was pressed again.");
+  is(RequestsMenu.selectedItem, null,
+    "There should now be no selected item in the requests menu.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_persistent_logs.js b/devtools/client/netmonitor/test/browser_net_persistent_logs.js
new file mode 100644
index 000000000..ac2371e1f
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_persistent_logs.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the network monitor leaks on initialization and sudden destruction.
+ * You can also use this initialization format as a template for other tests.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SINGLE_GET_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  Services.prefs.setBoolPref("devtools.webconsole.persistlog", false);
+
+  yield reloadAndWait();
+
+  is(RequestsMenu.itemCount, 2,
+    "The request menu should have two items at this point.");
+
+  yield reloadAndWait();
+
+  // Since the reload clears the log, we still expect two requests in the log
+  is(RequestsMenu.itemCount, 2,
+    "The request menu should still have two items at this point.");
+
+  // Now we toggle the persistence logs on
+  Services.prefs.setBoolPref("devtools.webconsole.persistlog", true);
+
+  yield reloadAndWait();
+
+  // Since we togged the persistence logs, we expect four items after the reload
+  is(RequestsMenu.itemCount, 4,
+    "The request menu should now have four items at this point.");
+
+  Services.prefs.setBoolPref("devtools.webconsole.persistlog", false);
+  return teardown(monitor);
+
+  /**
+   * Reload the page and wait for 2 GET requests. Race-free.
+   */
+  function reloadAndWait() {
+    let wait = waitForNetworkEvents(monitor, 2);
+    tab.linkedBrowser.reload();
+    return wait;
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_post-data-01.js b/devtools/client/netmonitor/test/browser_net_post-data-01.js
new file mode 100644
index 000000000..6d5f8dc1b
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js
@@ -0,0 +1,166 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the POST requests display the correct information in the UI.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(0),
+    "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=urlencoded", {
+      status: 200,
+      statusText: "Och Aye",
+      type: "plain",
+      fullMimeType: "text/plain; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
+      time: true
+    });
+  verifyRequestItemTarget(RequestsMenu.getItemAtIndex(1),
+    "POST", SIMPLE_SJS + "?foo=bar&baz=42&type=multipart", {
+      status: 200,
+      statusText: "Och Aye",
+      type: "plain",
+      fullMimeType: "text/plain; charset=utf-8",
+      size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 12),
+      time: true
+    });
+
+  let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[2]);
+  yield onEvent;
+  yield testParamsTab("urlencoded");
+
+  onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  RequestsMenu.selectedIndex = 1;
+  yield onEvent;
+  yield testParamsTab("multipart");
+
+  return teardown(monitor);
+
+  function* testParamsTab(type) {
+    let tabEl = document.querySelectorAll("#details-pane tab")[2];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The params tab in the network details pane should be selected.");
+
+    function checkVisibility(box) {
+      is(tabpanel.querySelector("#request-params-box")
+        .hasAttribute("hidden"), !box.includes("params"),
+        "The request params box doesn't have the indended visibility.");
+      is(tabpanel.querySelector("#request-post-data-textarea-box")
+        .hasAttribute("hidden"), !box.includes("textarea"),
+        "The request post data textarea box doesn't have the indended visibility.");
+    }
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
+      "There should be 2 param scopes displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let queryScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    let postScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
+
+    is(queryScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("paramsQueryString"),
+      "The query scope doesn't have the correct title.");
+
+    is(postScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr(type == "urlencoded" ? "paramsFormData" : "paramsPostPayload"),
+      "The post scope doesn't have the correct title.");
+
+    is(queryScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      "foo", "The first query param name was incorrect.");
+    is(queryScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      "\"bar\"", "The first query param value was incorrect.");
+    is(queryScope.querySelectorAll(".variables-view-variable .name")[1]
+      .getAttribute("value"),
+      "baz", "The second query param name was incorrect.");
+    is(queryScope.querySelectorAll(".variables-view-variable .value")[1]
+      .getAttribute("value"),
+      "\"42\"", "The second query param value was incorrect.");
+    is(queryScope.querySelectorAll(".variables-view-variable .name")[2]
+      .getAttribute("value"),
+      "type", "The third query param name was incorrect.");
+    is(queryScope.querySelectorAll(".variables-view-variable .value")[2]
+      .getAttribute("value"),
+      "\"" + type + "\"", "The third query param value was incorrect.");
+
+    if (type == "urlencoded") {
+      checkVisibility("params");
+
+      is(tabpanel.querySelectorAll(".variables-view-variable").length, 5,
+        "There should be 5 param values displayed in this tabpanel.");
+      is(queryScope.querySelectorAll(".variables-view-variable").length, 3,
+        "There should be 3 param values displayed in the query scope.");
+      is(postScope.querySelectorAll(".variables-view-variable").length, 2,
+        "There should be 2 param values displayed in the post scope.");
+
+      is(postScope.querySelectorAll(".variables-view-variable .name")[0]
+        .getAttribute("value"),
+        "foo", "The first post param name was incorrect.");
+      is(postScope.querySelectorAll(".variables-view-variable .value")[0]
+        .getAttribute("value"),
+        "\"bar\"", "The first post param value was incorrect.");
+      is(postScope.querySelectorAll(".variables-view-variable .name")[1]
+        .getAttribute("value"),
+        "baz", "The second post param name was incorrect.");
+      is(postScope.querySelectorAll(".variables-view-variable .value")[1]
+        .getAttribute("value"),
+        "\"123\"", "The second post param value was incorrect.");
+    } else {
+      checkVisibility("params textarea");
+
+      is(tabpanel.querySelectorAll(".variables-view-variable").length, 3,
+        "There should be 3 param values displayed in this tabpanel.");
+      is(queryScope.querySelectorAll(".variables-view-variable").length, 3,
+        "There should be 3 param values displayed in the query scope.");
+      is(postScope.querySelectorAll(".variables-view-variable").length, 0,
+        "There should be 0 param values displayed in the post scope.");
+
+      let editor = yield NetMonitorView.editor("#request-post-data-textarea");
+      let text = editor.getText();
+
+      ok(text.includes("Content-Disposition: form-data; name=\"text\""),
+        "The text shown in the source editor is incorrect (1.1).");
+      ok(text.includes("Content-Disposition: form-data; name=\"email\""),
+        "The text shown in the source editor is incorrect (2.1).");
+      ok(text.includes("Content-Disposition: form-data; name=\"range\""),
+        "The text shown in the source editor is incorrect (3.1).");
+      ok(text.includes("Content-Disposition: form-data; name=\"Custom field\""),
+        "The text shown in the source editor is incorrect (4.1).");
+      ok(text.includes("Some text..."),
+        "The text shown in the source editor is incorrect (2.2).");
+      ok(text.includes("42"),
+        "The text shown in the source editor is incorrect (3.2).");
+      ok(text.includes("Extra data"),
+        "The text shown in the source editor is incorrect (4.2).");
+      is(editor.getMode(), Editor.modes.text,
+        "The mode active in the source editor is incorrect.");
+    }
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_post-data-02.js b/devtools/client/netmonitor/test/browser_net_post-data-02.js
new file mode 100644
index 000000000..3cdd2f14a
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_post-data-02.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the POST requests display the correct information in the UI,
+ * for raw payloads with attached content-type headers.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(POST_RAW_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  NetMonitorView.toggleDetailsPane({ visible: true }, 2);
+  RequestsMenu.selectedIndex = 0;
+  yield onEvent;
+
+  let tabEl = document.querySelectorAll("#event-details-pane tab")[2];
+  let tabpanel = document.querySelectorAll("#event-details-pane tabpanel")[2];
+
+  is(tabEl.getAttribute("selected"), "true",
+    "The params tab in the network details pane should be selected.");
+
+  is(tabpanel.querySelector("#request-params-box")
+    .hasAttribute("hidden"), false,
+    "The request params box doesn't have the indended visibility.");
+  is(tabpanel.querySelector("#request-post-data-textarea-box")
+    .hasAttribute("hidden"), true,
+    "The request post data textarea box doesn't have the indended visibility.");
+
+  is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+    "There should be 1 param scopes displayed in this tabpanel.");
+  is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+    "The empty notice should not be displayed in this tabpanel.");
+
+  let postScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+  is(postScope.querySelector(".name").getAttribute("value"),
+    L10N.getStr("paramsFormData"),
+    "The post scope doesn't have the correct title.");
+
+  is(postScope.querySelectorAll(".variables-view-variable").length, 2,
+    "There should be 2 param values displayed in the post scope.");
+  is(postScope.querySelectorAll(".variables-view-variable .name")[0]
+    .getAttribute("value"),
+    "foo", "The first query param name was incorrect.");
+  is(postScope.querySelectorAll(".variables-view-variable .value")[0]
+    .getAttribute("value"),
+    "\"bar\"", "The first query param value was incorrect.");
+  is(postScope.querySelectorAll(".variables-view-variable .name")[1]
+    .getAttribute("value"),
+    "baz", "The second query param name was incorrect.");
+  is(postScope.querySelectorAll(".variables-view-variable .value")[1]
+    .getAttribute("value"),
+    "\"123\"", "The second query param value was incorrect.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_post-data-03.js b/devtools/client/netmonitor/test/browser_net_post-data-03.js
new file mode 100644
index 000000000..3433f89ce
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_post-data-03.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the POST requests display the correct information in the UI,
+ * for raw payloads with content-type headers attached to the upload stream.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(POST_RAW_WITH_HEADERS_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  NetMonitorView.toggleDetailsPane({ visible: true });
+  RequestsMenu.selectedIndex = 0;
+  yield onEvent;
+
+  let tabEl = document.querySelectorAll("#details-pane tab")[0];
+  let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
+  let requestFromUploadScope = tabpanel.querySelectorAll(".variables-view-scope")[2];
+
+  is(tabEl.getAttribute("selected"), "true",
+    "The headers tab in the network details pane should be selected.");
+  is(tabpanel.querySelectorAll(".variables-view-scope").length, 3,
+    "There should be 3 header scopes displayed in this tabpanel.");
+
+  is(requestFromUploadScope.querySelector(".name").getAttribute("value"),
+    L10N.getStr("requestHeadersFromUpload") + " (" +
+    L10N.getFormatStr("networkMenu.sizeKB", L10N.numberWithDecimals(74 / 1024, 3)) + ")",
+    "The request headers from upload scope doesn't have the correct title.");
+
+  is(requestFromUploadScope.querySelectorAll(".variables-view-variable").length, 2,
+    "There should be 2 headers displayed in the request headers from upload scope.");
+
+  is(requestFromUploadScope.querySelectorAll(".variables-view-variable .name")[0]
+    .getAttribute("value"),
+    "content-type", "The first request header name was incorrect.");
+  is(requestFromUploadScope.querySelectorAll(".variables-view-variable .value")[0]
+    .getAttribute("value"), "\"application/x-www-form-urlencoded\"",
+    "The first request header value was incorrect.");
+  is(requestFromUploadScope.querySelectorAll(".variables-view-variable .name")[1]
+    .getAttribute("value"),
+    "custom-header", "The second request header name was incorrect.");
+  is(requestFromUploadScope.querySelectorAll(".variables-view-variable .value")[1]
+    .getAttribute("value"),
+    "\"hello world!\"", "The second request header value was incorrect.");
+
+  onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[2]);
+  yield onEvent;
+
+  tabEl = document.querySelectorAll("#details-pane tab")[2];
+  tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+  let formDataScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+
+  is(tab.getAttribute("selected"), "true",
+    "The response tab in the network details pane should be selected.");
+  is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+    "There should be 1 header scope displayed in this tabpanel.");
+
+  is(formDataScope.querySelector(".name").getAttribute("value"),
+    L10N.getStr("paramsFormData"),
+    "The form data scope doesn't have the correct title.");
+
+  is(formDataScope.querySelectorAll(".variables-view-variable").length, 2,
+    "There should be 2 payload values displayed in the form data scope.");
+
+  is(formDataScope.querySelectorAll(".variables-view-variable .name")[0]
+    .getAttribute("value"),
+    "foo", "The first payload param name was incorrect.");
+  is(formDataScope.querySelectorAll(".variables-view-variable .value")[0]
+    .getAttribute("value"),
+    "\"bar\"", "The first payload param value was incorrect.");
+  is(formDataScope.querySelectorAll(".variables-view-variable .name")[1]
+    .getAttribute("value"),
+    "baz", "The second payload param name was incorrect.");
+  is(formDataScope.querySelectorAll(".variables-view-variable .value")[1]
+    .getAttribute("value"),
+    "\"123\"", "The second payload param value was incorrect.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_post-data-04.js b/devtools/client/netmonitor/test/browser_net_post-data-04.js
new file mode 100644
index 000000000..565792287
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_post-data-04.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the POST requests display the correct information in the UI,
+ * for JSON payloads.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(POST_JSON_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  NetMonitorView.toggleDetailsPane({ visible: true }, 2);
+  RequestsMenu.selectedIndex = 0;
+  yield onEvent;
+
+  let tabEl = document.querySelectorAll("#event-details-pane tab")[2];
+  let tabpanel = document.querySelectorAll("#event-details-pane tabpanel")[2];
+
+  is(tabEl.getAttribute("selected"), "true",
+    "The params tab in the network details pane should be selected.");
+
+  is(tabpanel.querySelector("#request-params-box")
+    .hasAttribute("hidden"), false,
+    "The request params box doesn't have the intended visibility.");
+  is(tabpanel.querySelector("#request-post-data-textarea-box")
+    .hasAttribute("hidden"), true,
+    "The request post data textarea box doesn't have the intended visibility.");
+
+  is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+    "There should be 1 param scopes displayed in this tabpanel.");
+  is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+    "The empty notice should not be displayed in this tabpanel.");
+
+  let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+  is(jsonScope.querySelector(".name").getAttribute("value"),
+    L10N.getStr("jsonScopeName"),
+    "The JSON scope doesn't have the correct title.");
+
+  let valueScope = tabpanel.querySelector(
+    ".variables-view-scope > .variables-view-element-details");
+
+  is(valueScope.querySelectorAll(".variables-view-variable").length, 1,
+    "There should be 1 value displayed in the JSON scope.");
+  is(valueScope.querySelector(".variables-view-property .name")
+    .getAttribute("value"),
+    "a", "The JSON var name was incorrect.");
+  is(valueScope.querySelector(".variables-view-property .value")
+    .getAttribute("value"),
+    "1", "The JSON var value was incorrect.");
+
+  let detailsParent = valueScope.querySelector(".variables-view-property .name")
+    .closest(".variables-view-element-details");
+  is(detailsParent.hasAttribute("open"), true, "The JSON value must be visible");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js b/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js
new file mode 100644
index 000000000..e73f94d6d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_prefs-and-l10n.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the preferences and localization objects work correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  ok(monitor.panelWin.Prefs,
+    "Should have a preferences object available on the panel window.");
+
+  testL10N();
+  testPrefs();
+
+  return teardown(monitor);
+
+  function testL10N() {
+    is(typeof L10N.getStr("netmonitor.security.enabled"), "string",
+      "The getStr() method didn't return a valid string.");
+    is(typeof L10N.getFormatStr("networkMenu.totalMS", "foo"), "string",
+      "The getFormatStr() method didn't return a valid string.");
+  }
+
+  function testPrefs() {
+    let { Prefs } = monitor.panelWin;
+
+    is(Prefs.networkDetailsWidth,
+      Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"),
+      "Getting a pref should work correctly.");
+
+    let previousValue = Prefs.networkDetailsWidth;
+    let bogusValue = ~~(Math.random() * 100);
+    Prefs.networkDetailsWidth = bogusValue;
+    is(Prefs.networkDetailsWidth,
+      Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"),
+      "Getting a pref after it has been modified should work correctly.");
+    is(Prefs.networkDetailsWidth, bogusValue,
+      "The pref wasn't updated correctly in the preferences object.");
+
+    Prefs.networkDetailsWidth = previousValue;
+    is(Prefs.networkDetailsWidth,
+      Services.prefs.getIntPref("devtools.netmonitor.panes-network-details-width"),
+      "Getting a pref after it has been modified again should work correctly.");
+    is(Prefs.networkDetailsWidth, previousValue,
+      "The pref wasn't updated correctly again in the preferences object.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_prefs-reload.js b/devtools/client/netmonitor/test/browser_net_prefs-reload.js
new file mode 100644
index 000000000..ee56ee446
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_prefs-reload.js
@@ -0,0 +1,215 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the prefs that should survive across tool reloads work.
+ */
+
+add_task(function* () {
+  let Actions = require("devtools/client/netmonitor/actions/index");
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  // This test reopens the network monitor a bunch of times, for different
+  // hosts (bottom, side, window). This seems to be slow on debug builds.
+  requestLongerTimeout(3);
+
+  // Use these getters instead of caching instances inside the panel win,
+  // since the tool is reopened a bunch of times during this test
+  // and the instances will differ.
+  let getView = () => monitor.panelWin.NetMonitorView;
+  let getStore = () => monitor.panelWin.gStore;
+
+  let prefsToCheck = {
+    filters: {
+      // A custom new value to be used for the verified preference.
+      newValue: ["html", "css"],
+      // Getter used to retrieve the current value from the frontend, in order
+      // to verify that the pref was applied properly.
+      validateValue: ($) => getView().RequestsMenu._activeFilters,
+      // Predicate used to modify the frontend when setting the new pref value,
+      // before trying to validate the changes.
+      modifyFrontend: ($, value) => value.forEach(e =>
+        getStore().dispatch(Actions.toggleFilterType(e)))
+    },
+    networkDetailsWidth: {
+      newValue: ~~(Math.random() * 200 + 100),
+      validateValue: ($) => ~~$("#details-pane").getAttribute("width"),
+      modifyFrontend: ($, value) => $("#details-pane").setAttribute("width", value)
+    },
+    networkDetailsHeight: {
+      newValue: ~~(Math.random() * 300 + 100),
+      validateValue: ($) => ~~$("#details-pane").getAttribute("height"),
+      modifyFrontend: ($, value) => $("#details-pane").setAttribute("height", value)
+    }
+    /* add more prefs here... */
+  };
+
+  yield testBottom();
+  yield testSide();
+  yield testWindow();
+
+  info("Moving toolbox back to the bottom...");
+  yield monitor._toolbox.switchHost(Toolbox.HostType.BOTTOM);
+  return teardown(monitor);
+
+  function storeFirstPrefValues() {
+    info("Caching initial pref values.");
+
+    for (let name in prefsToCheck) {
+      let currentValue = monitor.panelWin.Prefs[name];
+      prefsToCheck[name].firstValue = currentValue;
+    }
+  }
+
+  function validateFirstPrefValues() {
+    info("Validating current pref values to the UI elements.");
+
+    for (let name in prefsToCheck) {
+      let currentValue = monitor.panelWin.Prefs[name];
+      let firstValue = prefsToCheck[name].firstValue;
+      let validateValue = prefsToCheck[name].validateValue;
+
+      is(currentValue.toSource(), firstValue.toSource(),
+        "Pref " + name + " should be equal to first value: " + firstValue);
+      is(currentValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+        "Pref " + name + " should validate: " + currentValue);
+    }
+  }
+
+  function modifyFrontend() {
+    info("Modifying UI elements to the specified new values.");
+
+    for (let name in prefsToCheck) {
+      let currentValue = monitor.panelWin.Prefs[name];
+      let firstValue = prefsToCheck[name].firstValue;
+      let newValue = prefsToCheck[name].newValue;
+      let validateValue = prefsToCheck[name].validateValue;
+      let modFrontend = prefsToCheck[name].modifyFrontend;
+
+      modFrontend(monitor.panelWin.$, newValue);
+      info("Modified UI element affecting " + name + " to: " + newValue);
+
+      is(currentValue.toSource(), firstValue.toSource(),
+        "Pref " + name + " should still be equal to first value: " + firstValue);
+      isnot(currentValue.toSource(), newValue.toSource(),
+        "Pref " + name + " should't yet be equal to second value: " + newValue);
+      is(newValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+        "The UI element affecting " + name + " should validate: " + newValue);
+    }
+  }
+
+  function validateNewPrefValues() {
+    info("Invalidating old pref values to the modified UI elements.");
+
+    for (let name in prefsToCheck) {
+      let currentValue = monitor.panelWin.Prefs[name];
+      let firstValue = prefsToCheck[name].firstValue;
+      let newValue = prefsToCheck[name].newValue;
+      let validateValue = prefsToCheck[name].validateValue;
+
+      isnot(currentValue.toSource(), firstValue.toSource(),
+        "Pref " + name + " should't be equal to first value: " + firstValue);
+      is(currentValue.toSource(), newValue.toSource(),
+        "Pref " + name + " should now be equal to second value: " + newValue);
+      is(newValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+        "The UI element affecting " + name + " should validate: " + newValue);
+    }
+  }
+
+  function resetFrontend() {
+    info("Resetting UI elements to the cached initial pref values.");
+
+    for (let name in prefsToCheck) {
+      let currentValue = monitor.panelWin.Prefs[name];
+      let firstValue = prefsToCheck[name].firstValue;
+      let newValue = prefsToCheck[name].newValue;
+      let validateValue = prefsToCheck[name].validateValue;
+      let modFrontend = prefsToCheck[name].modifyFrontend;
+
+      modFrontend(monitor.panelWin.$, firstValue);
+      info("Modified UI element affecting " + name + " to: " + firstValue);
+
+      isnot(currentValue.toSource(), firstValue.toSource(),
+        "Pref " + name + " should't yet be equal to first value: " + firstValue);
+      is(currentValue.toSource(), newValue.toSource(),
+        "Pref " + name + " should still be equal to second value: " + newValue);
+      is(firstValue.toSource(), validateValue(monitor.panelWin.$).toSource(),
+        "The UI element affecting " + name + " should validate: " + firstValue);
+    }
+  }
+
+  function* testBottom() {
+    info("Testing prefs reload for a bottom host.");
+    storeFirstPrefValues();
+
+    // Validate and modify while toolbox is on the bottom.
+    validateFirstPrefValues();
+    modifyFrontend();
+
+    let newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate and reset frontend while toolbox is on the bottom.
+    validateNewPrefValues();
+    resetFrontend();
+
+    newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate.
+    validateFirstPrefValues();
+  }
+
+  function* testSide() {
+    info("Moving toolbox to the side...");
+
+    yield monitor._toolbox.switchHost(Toolbox.HostType.SIDE);
+    info("Testing prefs reload for a side host.");
+    storeFirstPrefValues();
+
+    // Validate and modify frontend while toolbox is on the side.
+    validateFirstPrefValues();
+    modifyFrontend();
+
+    let newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate and reset frontend while toolbox is on the side.
+    validateNewPrefValues();
+    resetFrontend();
+
+    newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate.
+    validateFirstPrefValues();
+  }
+
+  function* testWindow() {
+    info("Moving toolbox into a window...");
+
+    yield monitor._toolbox.switchHost(Toolbox.HostType.WINDOW);
+    info("Testing prefs reload for a window host.");
+    storeFirstPrefValues();
+
+    // Validate and modify frontend while toolbox is in a window.
+    validateFirstPrefValues();
+    modifyFrontend();
+
+    let newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate and reset frontend while toolbox is in a window.
+    validateNewPrefValues();
+    resetFrontend();
+
+    newMonitor = yield restartNetMonitor(monitor);
+    monitor = newMonitor.monitor;
+
+    // Revalidate.
+    validateFirstPrefValues();
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_raw_headers.js b/devtools/client/netmonitor/test/browser_net_raw_headers.js
new file mode 100644
index 000000000..2cb734745
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_raw_headers.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if showing raw headers works.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let origItem = RequestsMenu.getItemAtIndex(0);
+
+  let onTabEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  RequestsMenu.selectedItem = origItem;
+  yield onTabEvent;
+
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.getElementById("toggle-raw-headers"));
+
+  testShowRawHeaders(origItem.attachment);
+
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.getElementById("toggle-raw-headers"));
+
+  testHideRawHeaders(document);
+
+  return teardown(monitor);
+
+  /*
+   * Tests that raw headers were displayed correctly
+   */
+  function testShowRawHeaders(data) {
+    let requestHeaders = document.getElementById("raw-request-headers-textarea").value;
+    for (let header of data.requestHeaders.headers) {
+      ok(requestHeaders.indexOf(header.name + ": " + header.value) >= 0,
+        "textarea contains request headers");
+    }
+    let responseHeaders = document.getElementById("raw-response-headers-textarea").value;
+    for (let header of data.responseHeaders.headers) {
+      ok(responseHeaders.indexOf(header.name + ": " + header.value) >= 0,
+        "textarea contains response headers");
+    }
+  }
+
+  /*
+   * Tests that raw headers textareas are hidden and empty
+   */
+  function testHideRawHeaders() {
+    let rawHeadersHidden = document.getElementById("raw-headers").getAttribute("hidden");
+    let requestTextarea = document.getElementById("raw-request-headers-textarea");
+    let responseTextarea = document.getElementById("raw-response-headers-textarea");
+    ok(rawHeadersHidden, "raw headers textareas are hidden");
+    ok(requestTextarea.value == "", "raw request headers textarea is empty");
+    ok(responseTextarea.value == "", "raw response headers textarea is empty");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_reload-button.js b/devtools/client/netmonitor/test/browser_net_reload-button.js
new file mode 100644
index 000000000..e91de8302
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_reload-button.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the empty-requests reload button works.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(SINGLE_GET_URL);
+  info("Starting test... ");
+
+  let { document, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  let button = document.querySelector("#requests-menu-reload-notice-button");
+  button.click();
+  yield wait;
+
+  is(RequestsMenu.itemCount, 2, "The request menu should have two items after reloading");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_reload-markers.js b/devtools/client/netmonitor/test/browser_net_reload-markers.js
new file mode 100644
index 000000000..26866830f
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_reload-markers.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the empty-requests reload button works.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(SINGLE_GET_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS } = monitor.panelWin;
+  let button = document.querySelector("#requests-menu-reload-notice-button");
+  button.click();
+
+  let markers = [];
+
+  monitor.panelWin.on(EVENTS.TIMELINE_EVENT, (_, marker) => {
+    markers.push(marker);
+  });
+
+  yield waitForNetworkEvents(monitor, 2);
+  yield waitUntil(() => markers.length == 2);
+
+  ok(true, "Reloading finished");
+
+  is(markers[0].name, "document::DOMContentLoaded",
+    "The first received marker is correct.");
+  is(markers[1].name, "document::Load",
+    "The second received marker is correct.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js b/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
new file mode 100644
index 000000000..71a913501
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_req-resp-bodies.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if request and response body logging stays on after opening the console.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(JSON_LONG_URL);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  // Perform first batch of requests.
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequest(0);
+
+  // Switch to the 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");
+  yield onNetMonitor;
+
+  // Reload debugee.
+  wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  // Perform another batch of requests.
+  wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  verifyRequest(1);
+
+  return teardown(monitor);
+
+  function verifyRequest(offset) {
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(offset),
+      "GET", CONTENT_TYPE_SJS + "?fmt=json-long", {
+        status: 200,
+        statusText: "OK",
+        type: "json",
+        fullMimeType: "text/json; charset=utf-8",
+        size: L10N.getFormatStr("networkMenu.sizeKB",
+          L10N.numberWithDecimals(85975 / 1024, 2)),
+        time: true
+      });
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_resend.js b/devtools/client/netmonitor/test/browser_net_resend.js
new file mode 100644
index 000000000..7b540ec50
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_resend.js
@@ -0,0 +1,174 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if resending a request works.
+ */
+
+const ADD_QUERY = "t1=t2";
+const ADD_HEADER = "Test-header: true";
+const ADD_UA_HEADER = "User-Agent: Custom-Agent";
+const ADD_POSTDATA = "&t3=t4";
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(POST_DATA_URL);
+  info("Starting test... ");
+
+  let { panelWin } = monitor;
+  let { document, EVENTS, NetMonitorView } = panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let origItem = RequestsMenu.getItemAtIndex(0);
+
+  let onTabUpdated = panelWin.once(EVENTS.TAB_UPDATED);
+  RequestsMenu.selectedItem = origItem;
+  yield onTabUpdated;
+
+  // add a new custom request cloned from selected request
+  let onPopulated = panelWin.once(EVENTS.CUSTOMREQUESTVIEW_POPULATED);
+  RequestsMenu.cloneSelectedRequest();
+  yield onPopulated;
+
+  testCustomForm(origItem.attachment);
+
+  let customItem = RequestsMenu.selectedItem;
+  testCustomItem(customItem, origItem);
+
+  // edit the custom request
+  yield editCustomForm();
+  testCustomItemChanged(customItem, origItem);
+
+  // send the new request
+  wait = waitForNetworkEvents(monitor, 0, 1);
+  RequestsMenu.sendCustomRequest();
+  yield wait;
+
+  let sentItem = RequestsMenu.selectedItem;
+  testSentRequest(sentItem.attachment, origItem.attachment);
+
+  return teardown(monitor);
+
+  function testCustomItem(item, orig) {
+    let method = item.target.querySelector(".requests-menu-method").value;
+    let origMethod = orig.target.querySelector(".requests-menu-method").value;
+    is(method, origMethod, "menu item is showing the same method as original request");
+
+    let file = item.target.querySelector(".requests-menu-file").value;
+    let origFile = orig.target.querySelector(".requests-menu-file").value;
+    is(file, origFile, "menu item is showing the same file name as original request");
+
+    let domain = item.target.querySelector(".requests-menu-domain").value;
+    let origDomain = orig.target.querySelector(".requests-menu-domain").value;
+    is(domain, origDomain, "menu item is showing the same domain as original request");
+  }
+
+  function testCustomItemChanged(item, orig) {
+    let file = item.target.querySelector(".requests-menu-file").value;
+    let expectedFile = orig.target.querySelector(".requests-menu-file").value +
+      "&" + ADD_QUERY;
+
+    is(file, expectedFile, "menu item is updated to reflect url entered in form");
+  }
+
+  /*
+   * Test that the New Request form was populated correctly
+   */
+  function testCustomForm(data) {
+    is(document.getElementById("custom-method-value").value, data.method,
+       "new request form showing correct method");
+
+    is(document.getElementById("custom-url-value").value, data.url,
+       "new request form showing correct url");
+
+    let query = document.getElementById("custom-query-value");
+    is(query.value, "foo=bar\nbaz=42\ntype=urlencoded",
+       "new request form showing correct query string");
+
+    let headers = document.getElementById("custom-headers-value").value.split("\n");
+    for (let {name, value} of data.requestHeaders.headers) {
+      ok(headers.indexOf(name + ": " + value) >= 0, "form contains header from request");
+    }
+
+    let postData = document.getElementById("custom-postdata-value");
+    is(postData.value, data.requestPostData.postData.text,
+       "new request form showing correct post data");
+  }
+
+  /*
+   * Add some params and headers to the request form
+   */
+  function* editCustomForm() {
+    panelWin.focus();
+
+    let query = document.getElementById("custom-query-value");
+    let queryFocus = once(query, "focus", false);
+    // Bug 1195825: Due to some unexplained dark-matter with promise,
+    // focus only works if delayed by one tick.
+    query.setSelectionRange(query.value.length, query.value.length);
+    executeSoon(() => query.focus());
+    yield queryFocus;
+
+    // add params to url query string field
+    type(["VK_RETURN"]);
+    type(ADD_QUERY);
+
+    let headers = document.getElementById("custom-headers-value");
+    let headersFocus = once(headers, "focus", false);
+    headers.setSelectionRange(headers.value.length, headers.value.length);
+    headers.focus();
+    yield headersFocus;
+
+    // add a header
+    type(["VK_RETURN"]);
+    type(ADD_HEADER);
+
+    // add a User-Agent header, to check if default headers can be modified
+    // (there will be two of them, first gets overwritten by the second)
+    type(["VK_RETURN"]);
+    type(ADD_UA_HEADER);
+
+    let postData = document.getElementById("custom-postdata-value");
+    let postFocus = once(postData, "focus", false);
+    postData.setSelectionRange(postData.value.length, postData.value.length);
+    postData.focus();
+    yield postFocus;
+
+    // add to POST data
+    type(ADD_POSTDATA);
+  }
+
+  /*
+   * Make sure newly created event matches expected request
+   */
+  function testSentRequest(data, origData) {
+    is(data.method, origData.method, "correct method in sent request");
+    is(data.url, origData.url + "&" + ADD_QUERY, "correct url in sent request");
+
+    let { headers } = data.requestHeaders;
+    let hasHeader = headers.some(h => `${h.name}: ${h.value}` == ADD_HEADER);
+    ok(hasHeader, "new header added to sent request");
+
+    let hasUAHeader = headers.some(h => `${h.name}: ${h.value}` == ADD_UA_HEADER);
+    ok(hasUAHeader, "User-Agent header added to sent request");
+
+    is(data.requestPostData.postData.text,
+       origData.requestPostData.postData.text + ADD_POSTDATA,
+       "post data added to sent request");
+  }
+
+  function type(string) {
+    for (let ch of string) {
+      EventUtils.synthesizeKey(ch, {}, panelWin);
+    }
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_resend_cors.js b/devtools/client/netmonitor/test/browser_net_resend_cors.js
new file mode 100644
index 000000000..d63c3b54e
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_resend_cors.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if resending a CORS request avoids the security checks and doesn't send
+ * a preflight OPTIONS request (bug 1270096 and friends)
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CORS_URL);
+  info("Starting test... ");
+
+  let { EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let requestUrl = "http://test1.example.com" + CORS_SJS_PATH;
+
+  info("Waiting for OPTIONS, then POST");
+  let wait = waitForNetworkEvents(monitor, 1, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, requestUrl, function* (url) {
+    content.wrappedJSObject.performRequests(url, "triggering/preflight", "post-data");
+  });
+  yield wait;
+
+  const METHODS = ["OPTIONS", "POST"];
+
+  // Check the requests that were sent
+  for (let [i, method] of METHODS.entries()) {
+    let { attachment } = RequestsMenu.getItemAtIndex(i);
+    is(attachment.method, method, `The ${method} request has the right method`);
+    is(attachment.url, requestUrl, `The ${method} request has the right URL`);
+  }
+
+  // Resend both requests without modification. Wait for resent OPTIONS, then POST.
+  // POST is supposed to have no preflight OPTIONS request this time (CORS is disabled)
+  let onRequests = waitForNetworkEvents(monitor, 1, 1);
+  for (let [i, method] of METHODS.entries()) {
+    let item = RequestsMenu.getItemAtIndex(i);
+
+    info(`Selecting the ${method} request (at index ${i})`);
+    let onUpdate = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+    RequestsMenu.selectedItem = item;
+    yield onUpdate;
+
+    info("Cloning the selected request into a custom clone");
+    let onPopulate = monitor.panelWin.once(EVENTS.CUSTOMREQUESTVIEW_POPULATED);
+    RequestsMenu.cloneSelectedRequest();
+    yield onPopulate;
+
+    info("Sending the cloned request (without change)");
+    RequestsMenu.sendCustomRequest();
+  }
+
+  info("Waiting for both resent requests");
+  yield onRequests;
+
+  // Check the resent requests
+  for (let [i, method] of METHODS.entries()) {
+    let index = i + 2;
+    let item = RequestsMenu.getItemAtIndex(index).attachment;
+    is(item.method, method, `The ${method} request has the right method`);
+    is(item.url, requestUrl, `The ${method} request has the right URL`);
+    is(item.status, 200, `The ${method} response has the right status`);
+
+    if (method === "POST") {
+      is(item.requestPostData.postData.text, "post-data",
+        "The POST request has the right POST data");
+      // eslint-disable-next-line mozilla/no-cpows-in-tests
+      is(item.responseContent.content.text, "Access-Control-Allow-Origin: *",
+        "The POST response has the right content");
+    }
+  }
+
+  info("Finishing the test");
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_resend_headers.js b/devtools/client/netmonitor/test/browser_net_resend_headers.js
new file mode 100644
index 000000000..0503817e3
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_resend_headers.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if custom request headers are not ignored (bug 1270096 and friends)
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(SIMPLE_SJS);
+  info("Starting test... ");
+
+  let { NetMonitorView, NetMonitorController } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let requestUrl = SIMPLE_SJS;
+  let requestHeaders = [
+    { name: "Host", value: "fakehost.example.com" },
+    { name: "User-Agent", value: "Testzilla" },
+    { name: "Referer", value: "http://example.com/referrer" },
+    { name: "Accept", value: "application/jarda"},
+    { name: "Accept-Encoding", value: "compress, identity, funcoding" },
+    { name: "Accept-Language", value: "cs-CZ" }
+  ];
+
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  NetMonitorController.webConsoleClient.sendHTTPRequest({
+    url: requestUrl,
+    method: "POST",
+    headers: requestHeaders,
+    body: "Hello"
+  });
+  yield wait;
+
+  let { attachment } = RequestsMenu.getItemAtIndex(0);
+  is(attachment.method, "POST", "The request has the right method");
+  is(attachment.url, requestUrl, "The request has the right URL");
+
+  for (let { name, value } of attachment.requestHeaders.headers) {
+    info(`Request header: ${name}: ${value}`);
+  }
+
+  function hasRequestHeader(name, value) {
+    let { headers } = attachment.requestHeaders;
+    return headers.some(h => h.name === name && h.value === value);
+  }
+
+  function hasNotRequestHeader(name) {
+    let { headers } = attachment.requestHeaders;
+    return headers.every(h => h.name !== name);
+  }
+
+  for (let { name, value } of requestHeaders) {
+    ok(hasRequestHeader(name, value), `The ${name} header has the right value`);
+  }
+
+  // Check that the Cookie header was not added silently (i.e., that the request is
+  // anonymous.
+  for (let name of ["Cookie"]) {
+    ok(hasNotRequestHeader(name), `The ${name} header is not present`);
+  }
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-details.js b/devtools/client/netmonitor/test/browser_net_security-details.js
new file mode 100644
index 000000000..0a83b3ed9
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-details.js
@@ -0,0 +1,102 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that Security details tab contains the expected data.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  info("Performing a secure request.");
+  const REQUESTS_URL = "https://example.com" + CORS_SJS_PATH;
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, REQUESTS_URL, function* (url) {
+    content.wrappedJSObject.performRequests(1, url);
+  });
+  yield wait;
+
+  info("Selecting the request.");
+  RequestsMenu.selectedIndex = 0;
+
+  info("Waiting for details pane to be updated.");
+  yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+  info("Selecting security tab.");
+  NetworkDetails.widget.selectedIndex = 5;
+
+  info("Waiting for security tab to be updated.");
+  yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+  let errorbox = $("#security-error");
+  let infobox = $("#security-information");
+
+  is(errorbox.hidden, true, "Error box is hidden.");
+  is(infobox.hidden, false, "Information box visible.");
+
+  // Connection
+
+  // The protocol will be TLS but the exact version depends on which protocol
+  // the test server example.com supports.
+  let protocol = $("#security-protocol-version-value").value;
+  ok(protocol.startsWith("TLS"), "The protocol " + protocol + " seems valid.");
+
+  // The cipher suite used by the test server example.com might change at any
+  // moment but all of them should start with "TLS_".
+  // http://www.iana.org/assignments/tls-parameters/tls-parameters.xhtml
+  let suite = $("#security-ciphersuite-value").value;
+  ok(suite.startsWith("TLS_"), "The suite " + suite + " seems valid.");
+
+  // Host
+  checkLabel("#security-info-host-header", "Host example.com:");
+  checkLabel("#security-http-strict-transport-security-value", "Disabled");
+  checkLabel("#security-public-key-pinning-value", "Disabled");
+
+  // Cert
+  checkLabel("#security-cert-subject-cn", "example.com");
+  checkLabel("#security-cert-subject-o", "<Not Available>");
+  checkLabel("#security-cert-subject-ou", "<Not Available>");
+
+  checkLabel("#security-cert-issuer-cn", "Temporary Certificate Authority");
+  checkLabel("#security-cert-issuer-o", "Mozilla Testing");
+  checkLabel("#security-cert-issuer-ou", "<Not Available>");
+
+  // Locale sensitive and varies between timezones. Cant't compare equality or
+  // the test fails depending on which part of the world the test is executed.
+  checkLabelNotEmpty("#security-cert-validity-begins");
+  checkLabelNotEmpty("#security-cert-validity-expires");
+
+  checkLabelNotEmpty("#security-cert-sha1-fingerprint");
+  checkLabelNotEmpty("#security-cert-sha256-fingerprint");
+  yield teardown(monitor);
+
+  /**
+   * A helper that compares value attribute of a label with given selector to the
+   * expected value.
+   */
+  function checkLabel(selector, expected) {
+    info("Checking label " + selector);
+
+    let element = $(selector);
+
+    ok(element, "Selector matched an element.");
+    is(element.value, expected, "Label has the expected value.");
+  }
+
+  /**
+   * A helper that checks the label with given selector is not an empty string.
+   */
+  function checkLabelNotEmpty(selector) {
+    info("Checking that label " + selector + " is non-empty.");
+
+    let element = $(selector);
+
+    ok(element, "Selector matched an element.");
+    isnot(element.value, "", "Label was not empty.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-error.js b/devtools/client/netmonitor/test/browser_net_security-error.js
new file mode 100644
index 000000000..f6b8b34f3
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-error.js
@@ -0,0 +1,70 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that Security details tab shows an error message with broken connections.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  info("Requesting a resource that has a certificate problem.");
+
+  let wait = waitForSecurityBrokenNetworkEvent();
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(1, "https://nocert.example.com");
+  });
+  yield wait;
+
+  info("Selecting the request.");
+  RequestsMenu.selectedIndex = 0;
+
+  info("Waiting for details pane to be updated.");
+  yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+  info("Selecting security tab.");
+  NetworkDetails.widget.selectedIndex = 5;
+
+  info("Waiting for security tab to be updated.");
+  yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+  let errorbox = $("#security-error");
+  let errormsg = $("#security-error-message");
+  let infobox = $("#security-information");
+
+  is(errorbox.hidden, false, "Error box is visble.");
+  is(infobox.hidden, true, "Information box is hidden.");
+
+  isnot(errormsg.value, "", "Error message is not empty.");
+
+  return teardown(monitor);
+
+  /**
+   * Returns a promise that's resolved once a request with security issues is
+   * completed.
+   */
+  function waitForSecurityBrokenNetworkEvent() {
+    let awaitedEvents = [
+      "UPDATING_REQUEST_HEADERS",
+      "RECEIVED_REQUEST_HEADERS",
+      "UPDATING_REQUEST_COOKIES",
+      "RECEIVED_REQUEST_COOKIES",
+      "STARTED_RECEIVING_RESPONSE",
+      "UPDATING_RESPONSE_CONTENT",
+      "RECEIVED_RESPONSE_CONTENT",
+      "UPDATING_EVENT_TIMINGS",
+      "RECEIVED_EVENT_TIMINGS",
+    ];
+
+    let promises = awaitedEvents.map((event) => {
+      return monitor.panelWin.once(EVENTS[event]);
+    });
+
+    return Promise.all(promises);
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-icon-click.js b/devtools/client/netmonitor/test/browser_net_security-icon-click.js
new file mode 100644
index 000000000..2385b11aa
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-icon-click.js
@@ -0,0 +1,57 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that clicking on the security indicator opens the security details tab.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  info("Requesting a resource over HTTPS.");
+  yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_2");
+  yield performRequestAndWait("https://example.com" + CORS_SJS_PATH + "?request_1");
+
+  is(RequestsMenu.itemCount, 2, "Two events event logged.");
+
+  yield clickAndTestSecurityIcon();
+
+  info("Selecting headers panel again.");
+  NetworkDetails.widget.selectedIndex = 0;
+  yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+  info("Sorting the items by filename.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+
+  info("Testing that security icon can be clicked after the items were sorted.");
+  yield clickAndTestSecurityIcon();
+
+  return teardown(monitor);
+
+  function* performRequestAndWait(url) {
+    let wait = waitForNetworkEvents(monitor, 1);
+    yield ContentTask.spawn(tab.linkedBrowser, { url }, function* (args) {
+      content.wrappedJSObject.performRequests(1, args.url);
+    });
+    return wait;
+  }
+
+  function* clickAndTestSecurityIcon() {
+    let item = RequestsMenu.items[0];
+    let icon = $(".requests-security-state-icon", item.target);
+
+    info("Clicking security icon of the first request and waiting for the " +
+         "panel to update.");
+
+    icon.click();
+    yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+    is(NetworkDetails.widget.selectedPanel, $("#security-tabpanel"),
+      "Security tab is selected.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-redirect.js b/devtools/client/netmonitor/test/browser_net_security-redirect.js
new file mode 100644
index 000000000..5f2956dbb
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-redirect.js
@@ -0,0 +1,38 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test a http -> https redirect shows secure icon only for redirected https
+ * request.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  yield ContentTask.spawn(tab.linkedBrowser, HTTPS_REDIRECT_SJS, function* (url) {
+    content.wrappedJSObject.performRequests(1, url);
+  });
+  yield wait;
+
+  is(RequestsMenu.itemCount, 2, "There were two requests due to redirect.");
+
+  let initial = RequestsMenu.items[0];
+  let redirect = RequestsMenu.items[1];
+
+  let initialSecurityIcon = $(".requests-security-state-icon", initial.target);
+  let redirectSecurityIcon = $(".requests-security-state-icon", redirect.target);
+
+  ok(initialSecurityIcon.classList.contains("security-state-insecure"),
+     "Initial request was marked insecure.");
+
+  ok(redirectSecurityIcon.classList.contains("security-state-secure"),
+     "Redirected request was marked secure.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-state.js b/devtools/client/netmonitor/test/browser_net_security-state.js
new file mode 100644
index 000000000..054e7c969
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-state.js
@@ -0,0 +1,119 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that correct security state indicator appears depending on the security
+ * state.
+ */
+
+add_task(function* () {
+  const EXPECTED_SECURITY_STATES = {
+    "test1.example.com": "security-state-insecure",
+    "example.com": "security-state-secure",
+    "nocert.example.com": "security-state-broken",
+    "localhost": "security-state-local",
+  };
+
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  yield performRequests();
+
+  for (let item of RequestsMenu.items) {
+    let domain = $(".requests-menu-domain", item.target).value;
+
+    info("Found a request to " + domain);
+    ok(domain in EXPECTED_SECURITY_STATES, "Domain " + domain + " was expected.");
+
+    let classes = $(".requests-security-state-icon", item.target).classList;
+    let expectedClass = EXPECTED_SECURITY_STATES[domain];
+
+    info("Classes of security state icon are: " + classes);
+    info("Security state icon is expected to contain class: " + expectedClass);
+    ok(classes.contains(expectedClass), "Icon contained the correct class name.");
+  }
+
+  return teardown(monitor);
+
+  /**
+   * A helper that performs requests to
+   *  - https://nocert.example.com (broken)
+   *  - https://example.com (secure)
+   *  - http://test1.example.com (insecure)
+   *  - http://localhost (local)
+   * and waits until NetworkMonitor has handled all packets sent by the server.
+   */
+  function* performRequests() {
+    function executeRequests(count, url) {
+      return ContentTask.spawn(tab.linkedBrowser, {count, url}, function* (args) {
+        content.wrappedJSObject.performRequests(args.count, args.url);
+      });
+    }
+
+    // waitForNetworkEvents does not work for requests with security errors as
+    // those only emit 9/13 events of a successful request.
+    let done = waitForSecurityBrokenNetworkEvent();
+
+    info("Requesting a resource that has a certificate problem.");
+    yield executeRequests(1, "https://nocert.example.com");
+
+    // Wait for the request to complete before firing another request. Otherwise
+    // the request with security issues interfere with waitForNetworkEvents.
+    info("Waiting for request to complete.");
+    yield done;
+
+    // Next perform a request over HTTP. If done the other way around the latter
+    // occasionally hangs waiting for event timings that don't seem to appear...
+    done = waitForNetworkEvents(monitor, 1);
+    info("Requesting a resource over HTTP.");
+    yield executeRequests(1, "http://test1.example.com" + CORS_SJS_PATH);
+    yield done;
+
+    done = waitForNetworkEvents(monitor, 1);
+    info("Requesting a resource over HTTPS.");
+    yield executeRequests(1, "https://example.com" + CORS_SJS_PATH);
+    yield done;
+
+    done = waitForSecurityBrokenNetworkEvent(true);
+    info("Requesting a resource over HTTP to localhost.");
+    yield executeRequests(1, "http://localhost" + CORS_SJS_PATH);
+    yield done;
+
+    const expectedCount = Object.keys(EXPECTED_SECURITY_STATES).length;
+    is(RequestsMenu.itemCount, expectedCount, expectedCount + " events logged.");
+  }
+
+  /**
+   * Returns a promise that's resolved once a request with security issues is
+   * completed.
+   */
+  function waitForSecurityBrokenNetworkEvent(networkError) {
+    let awaitedEvents = [
+      "UPDATING_REQUEST_HEADERS",
+      "RECEIVED_REQUEST_HEADERS",
+      "UPDATING_REQUEST_COOKIES",
+      "RECEIVED_REQUEST_COOKIES",
+      "STARTED_RECEIVING_RESPONSE",
+      "UPDATING_RESPONSE_CONTENT",
+      "RECEIVED_RESPONSE_CONTENT",
+      "UPDATING_EVENT_TIMINGS",
+      "RECEIVED_EVENT_TIMINGS",
+    ];
+
+    // If the reason for breakage is a network error, then the
+    // STARTED_RECEIVING_RESPONSE event does not fire.
+    if (networkError) {
+      awaitedEvents = awaitedEvents.filter(e => e !== "STARTED_RECEIVING_RESPONSE");
+    }
+
+    let promises = awaitedEvents.map((event) => {
+      return monitor.panelWin.once(EVENTS[event]);
+    });
+
+    return Promise.all(promises);
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js b/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js
new file mode 100644
index 000000000..4a2dd0885
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-tab-deselect.js
@@ -0,0 +1,46 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that security details tab is no longer selected if an insecure request
+ * is selected.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  info("Performing requests.");
+  let wait = waitForNetworkEvents(monitor, 2);
+  const REQUEST_URLS = [
+    "https://example.com" + CORS_SJS_PATH,
+    "http://example.com" + CORS_SJS_PATH,
+  ];
+  yield ContentTask.spawn(tab.linkedBrowser, REQUEST_URLS, function* (urls) {
+    for (let url of urls) {
+      content.wrappedJSObject.performRequests(1, url);
+    }
+  });
+  yield wait;
+
+  info("Selecting secure request.");
+  RequestsMenu.selectedIndex = 0;
+
+  info("Selecting security tab.");
+  NetworkDetails.widget.selectedIndex = 5;
+
+  info("Selecting insecure request.");
+  RequestsMenu.selectedIndex = 1;
+
+  info("Waiting for security tab to be updated.");
+  yield monitor.panelWin.once(EVENTS.NETWORKDETAILSVIEW_POPULATED);
+
+  is(NetworkDetails.widget.selectedIndex, 0,
+    "Selected tab was reset when selected security tab was hidden.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js
new file mode 100644
index 000000000..b6685d7fe
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-tab-visibility.js
@@ -0,0 +1,121 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that security details tab is visible only when it should.
+ */
+
+add_task(function* () {
+  const TEST_DATA = [
+    {
+      desc: "http request",
+      uri: "http://example.com" + CORS_SJS_PATH,
+      visibleOnNewEvent: false,
+      visibleOnSecurityInfo: false,
+      visibleOnceComplete: false,
+    }, {
+      desc: "working https request",
+      uri: "https://example.com" + CORS_SJS_PATH,
+      visibleOnNewEvent: false,
+      visibleOnSecurityInfo: true,
+      visibleOnceComplete: true,
+    }, {
+      desc: "broken https request",
+      uri: "https://nocert.example.com",
+      isBroken: true,
+      visibleOnNewEvent: false,
+      visibleOnSecurityInfo: true,
+      visibleOnceComplete: true,
+    }
+  ];
+
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  for (let testcase of TEST_DATA) {
+    info("Testing Security tab visibility for " + testcase.desc);
+    let onNewItem = monitor.panelWin.once(EVENTS.NETWORK_EVENT);
+    let onSecurityInfo = monitor.panelWin.once(EVENTS.RECEIVED_SECURITY_INFO);
+    let onComplete = testcase.isBroken ?
+                       waitForSecurityBrokenNetworkEvent() :
+                       waitForNetworkEvents(monitor, 1);
+
+    let tabEl = $("#security-tab");
+    let tabpanel = $("#security-tabpanel");
+
+    info("Performing a request to " + testcase.uri);
+    yield ContentTask.spawn(tab.linkedBrowser, testcase.uri, function* (url) {
+      content.wrappedJSObject.performRequests(1, url);
+    });
+
+    info("Waiting for new network event.");
+    yield onNewItem;
+
+    info("Selecting the request.");
+    RequestsMenu.selectedIndex = 0;
+
+    is(RequestsMenu.selectedItem.attachment.securityState, undefined,
+       "Security state has not yet arrived.");
+    is(tabEl.hidden, !testcase.visibleOnNewEvent,
+       "Security tab is " +
+        (testcase.visibleOnNewEvent ? "visible" : "hidden") +
+       " after new request was added to the menu.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after new request was added to the menu.");
+
+    info("Waiting for security information to arrive.");
+    yield onSecurityInfo;
+
+    ok(RequestsMenu.selectedItem.attachment.securityState,
+       "Security state arrived.");
+    is(tabEl.hidden, !testcase.visibleOnSecurityInfo,
+       "Security tab is " +
+        (testcase.visibleOnSecurityInfo ? "visible" : "hidden") +
+       " after security information arrived.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after security information arrived.");
+
+    info("Waiting for request to complete.");
+    yield onComplete;
+
+    is(tabEl.hidden, !testcase.visibleOnceComplete,
+       "Security tab is " +
+        (testcase.visibleOnceComplete ? "visible" : "hidden") +
+       " after request has been completed.");
+    is(tabpanel.hidden, false,
+      "#security-tabpanel is visible after request is complete.");
+
+    info("Clearing requests.");
+    RequestsMenu.clear();
+  }
+
+  return teardown(monitor);
+
+  /**
+   * Returns a promise that's resolved once a request with security issues is
+   * completed.
+   */
+  function waitForSecurityBrokenNetworkEvent() {
+    let awaitedEvents = [
+      "UPDATING_REQUEST_HEADERS",
+      "RECEIVED_REQUEST_HEADERS",
+      "UPDATING_REQUEST_COOKIES",
+      "RECEIVED_REQUEST_COOKIES",
+      "STARTED_RECEIVING_RESPONSE",
+      "UPDATING_RESPONSE_CONTENT",
+      "RECEIVED_RESPONSE_CONTENT",
+      "UPDATING_EVENT_TIMINGS",
+      "RECEIVED_EVENT_TIMINGS",
+    ];
+
+    let promises = awaitedEvents.map((event) => {
+      return monitor.panelWin.once(EVENTS[event]);
+    });
+
+    return Promise.all(promises);
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_security-warnings.js b/devtools/client/netmonitor/test/browser_net_security-warnings.js
new file mode 100644
index 000000000..cdfee70a1
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_security-warnings.js
@@ -0,0 +1,56 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test that warning indicators are shown when appropriate.
+ */
+
+const TEST_CASES = [
+  {
+    desc: "no warnings",
+    uri: "https://example.com" + CORS_SJS_PATH,
+    warnCipher: false,
+  },
+];
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  let { $, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let cipher = $("#security-warning-cipher");
+
+  for (let test of TEST_CASES) {
+    info("Testing site with " + test.desc);
+
+    info("Performing request to " + test.uri);
+    let wait = waitForNetworkEvents(monitor, 1);
+    yield ContentTask.spawn(tab.linkedBrowser, test.uri, function* (url) {
+      content.wrappedJSObject.performRequests(1, url);
+    });
+    yield wait;
+
+    info("Selecting the request.");
+    RequestsMenu.selectedIndex = 0;
+
+    info("Waiting for details pane to be updated.");
+    yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+
+    if (NetworkDetails.widget.selectedIndex !== 5) {
+      info("Selecting security tab.");
+      NetworkDetails.widget.selectedIndex = 5;
+
+      info("Waiting for details pane to be updated.");
+      yield monitor.panelWin.once(EVENTS.TAB_UPDATED);
+    }
+
+    is(cipher.hidden, !test.warnCipher, "Cipher suite warning is hidden.");
+
+    RequestsMenu.clear();
+  }
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js b/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js
new file mode 100644
index 000000000..b425ad5ca
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_send-beacon-other-tab.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if beacons from other tabs are properly ignored.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let beaconTab = yield addTab(SEND_BEACON_URL);
+  info("Beacon tab added successfully.");
+
+  is(RequestsMenu.itemCount, 0, "The requests menu should be empty.");
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(beaconTab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequest();
+  });
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  is(RequestsMenu.itemCount, 1, "Only the reload should be recorded.");
+  let request = RequestsMenu.getItemAtIndex(0);
+  is(request.attachment.method, "GET", "The method is correct.");
+  is(request.attachment.status, "200", "The status is correct.");
+
+  yield removeTab(beaconTab);
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_send-beacon.js b/devtools/client/netmonitor/test/browser_net_send-beacon.js
new file mode 100644
index 000000000..bdc30a960
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_send-beacon.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if beacons are handled correctly.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SEND_BEACON_URL);
+  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  is(RequestsMenu.itemCount, 0, "The requests menu should be empty.");
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequest();
+  });
+  yield wait;
+
+  is(RequestsMenu.itemCount, 1, "The beacon should be recorded.");
+  let request = RequestsMenu.getItemAtIndex(0);
+  is(request.attachment.method, "POST", "The method is correct.");
+  ok(request.attachment.url.endsWith("beacon_request"), "The URL is correct.");
+  is(request.attachment.status, "404", "The status is correct.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_service-worker-status.js b/devtools/client/netmonitor/test/browser_net_service-worker-status.js
new file mode 100644
index 000000000..d7ada1645
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_service-worker-status.js
@@ -0,0 +1,87 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Tests if requests intercepted by service workers have the correct status code
+ */
+
+// Service workers only work on https
+const URL = EXAMPLE_URL.replace("http:", "https:");
+
+const TEST_URL = URL + "service-workers/status-codes.html";
+
+add_task(function* () {
+  yield new Promise(done => {
+    let options = { "set": [
+      // Accept workers from mochitest's http.
+      ["dom.serviceWorkers.enabled", true],
+      ["dom.serviceWorkers.openWindow.enabled", true],
+      ["dom.serviceWorkers.testing.enabled", true],
+    ]};
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  let { tab, monitor } = yield initNetMonitor(TEST_URL, null, true);
+  info("Starting test... ");
+
+  let { NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  const REQUEST_DATA = [
+    {
+      method: "GET",
+      uri: URL + "service-workers/test/200",
+      details: {
+        status: 200,
+        statusText: "OK (service worker)",
+        displayedStatus: "service worker",
+        type: "plain",
+        fullMimeType: "text/plain; charset=UTF-8"
+      },
+      stackFunctions: ["doXHR", "performRequests"]
+    },
+  ];
+
+  info("Registering the service worker...");
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    yield content.wrappedJSObject.registerServiceWorker();
+  });
+
+  info("Performing requests...");
+  let wait = waitForNetworkEvents(monitor, REQUEST_DATA.length);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let index = 0;
+  for (let request of REQUEST_DATA) {
+    let item = RequestsMenu.getItemAtIndex(index);
+
+    info(`Verifying request #${index}`);
+    yield verifyRequestItemTarget(item, request.method, request.uri, request.details);
+
+    let { stacktrace } = item.attachment.cause;
+    let stackLen = stacktrace ? stacktrace.length : 0;
+
+    ok(stacktrace, `Request #${index} has a stacktrace`);
+    ok(stackLen >= request.stackFunctions.length,
+      `Request #${index} has a stacktrace with enough (${stackLen}) items`);
+
+    request.stackFunctions.forEach((functionName, j) => {
+      is(stacktrace[j].functionName, functionName,
+      `Request #${index} has the correct function at position #${j} on the stack`);
+    });
+
+    index++;
+  }
+
+  info("Unregistering the service worker...");
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    yield content.wrappedJSObject.unregisterServiceWorker();
+  });
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_simple-init.js b/devtools/client/netmonitor/test/browser_net_simple-init.js
new file mode 100644
index 000000000..19d05811c
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_simple-init.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Simple check if the network monitor starts up and shuts down properly.
+ */
+
+function test() {
+  // These test suite functions are removed from the global scope inside a
+  // cleanup function. However, we still need them.
+  let gInfo = info;
+  let gOk = ok;
+
+  initNetMonitor(SIMPLE_URL).then(({ tab, monitor }) => {
+    info("Starting test... ");
+
+    is(tab.linkedBrowser.currentURI.spec, SIMPLE_URL,
+      "The current tab's location is the correct one.");
+
+    function checkIfInitialized(tag) {
+      info(`Checking if initialization is ok (${tag}).`);
+
+      ok(monitor._view,
+        `The network monitor view object exists (${tag}).`);
+      ok(monitor._controller,
+        `The network monitor controller object exists (${tag}).`);
+      ok(monitor._controller._startup,
+        `The network monitor controller object exists and is initialized (${tag}).`);
+
+      ok(monitor.isReady,
+        `The network monitor panel appears to be ready (${tag}).`);
+
+      ok(monitor._controller.tabClient,
+        `There should be a tabClient available at this point (${tag}).`);
+      ok(monitor._controller.webConsoleClient,
+        `There should be a webConsoleClient available at this point (${tag}).`);
+      ok(monitor._controller.timelineFront,
+        `There should be a timelineFront available at this point (${tag}).`);
+    }
+
+    function checkIfDestroyed(tag) {
+      gInfo("Checking if destruction is ok.");
+
+      gOk(monitor._view,
+        `The network monitor view object still exists (${tag}).`);
+      gOk(monitor._controller,
+        `The network monitor controller object still exists (${tag}).`);
+      gOk(monitor._controller._shutdown,
+        `The network monitor controller object still exists and is destroyed (${tag}).`);
+
+      gOk(!monitor._controller.tabClient,
+        `There shouldn't be a tabClient available after destruction (${tag}).`);
+      gOk(!monitor._controller.webConsoleClient,
+        `There shouldn't be a webConsoleClient available after destruction (${tag}).`);
+      gOk(!monitor._controller.timelineFront,
+        `There shouldn't be a timelineFront available after destruction (${tag}).`);
+    }
+
+    executeSoon(() => {
+      checkIfInitialized(1);
+
+      monitor._controller.startupNetMonitor()
+        .then(() => {
+          info("Starting up again shouldn't do anything special.");
+          checkIfInitialized(2);
+          return monitor._controller.connect();
+        })
+        .then(() => {
+          info("Connecting again shouldn't do anything special.");
+          checkIfInitialized(3);
+          return teardown(monitor);
+        })
+        .then(finish);
+    });
+
+    registerCleanupFunction(() => {
+      checkIfDestroyed(1);
+
+      monitor._controller.shutdownNetMonitor()
+        .then(() => {
+          gInfo("Shutting down again shouldn't do anything special.");
+          checkIfDestroyed(2);
+          return monitor._controller.disconnect();
+        })
+        .then(() => {
+          gInfo("Disconnecting again shouldn't do anything special.");
+          checkIfDestroyed(3);
+        });
+    });
+  });
+}
diff --git a/devtools/client/netmonitor/test/browser_net_simple-request-data.js b/devtools/client/netmonitor/test/browser_net_simple-request-data.js
new file mode 100644
index 000000000..1b952bd71
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-data.js
@@ -0,0 +1,247 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if requests render correct information in the menu UI.
+ */
+
+function test() {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  initNetMonitor(SIMPLE_SJS).then(({ tab, monitor }) => {
+    info("Starting test... ");
+
+    let { NetMonitorView } = monitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+
+    RequestsMenu.lazyUpdate = false;
+
+    waitForNetworkEvents(monitor, 1)
+      .then(() => teardown(monitor))
+      .then(finish);
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.NETWORK_EVENT, () => {
+      is(RequestsMenu.selectedItem, null,
+        "There shouldn't be any selected item in the requests menu.");
+      is(RequestsMenu.itemCount, 1,
+        "The requests menu should not be empty after the first request.");
+      is(NetMonitorView.detailsPaneHidden, true,
+        "The details pane should still be hidden after the first request.");
+
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      is(typeof requestItem.value, "string",
+        "The attached request id is incorrect.");
+      isnot(requestItem.value, "",
+        "The attached request id should not be empty.");
+
+      is(typeof requestItem.attachment.startedDeltaMillis, "number",
+        "The attached startedDeltaMillis is incorrect.");
+      is(requestItem.attachment.startedDeltaMillis, 0,
+        "The attached startedDeltaMillis should be zero.");
+
+      is(typeof requestItem.attachment.startedMillis, "number",
+        "The attached startedMillis is incorrect.");
+      isnot(requestItem.attachment.startedMillis, 0,
+        "The attached startedMillis should not be zero.");
+
+      is(requestItem.attachment.requestHeaders, undefined,
+        "The requestHeaders should not yet be set.");
+      is(requestItem.attachment.requestCookies, undefined,
+        "The requestCookies should not yet be set.");
+      is(requestItem.attachment.requestPostData, undefined,
+        "The requestPostData should not yet be set.");
+
+      is(requestItem.attachment.responseHeaders, undefined,
+        "The responseHeaders should not yet be set.");
+      is(requestItem.attachment.responseCookies, undefined,
+        "The responseCookies should not yet be set.");
+
+      is(requestItem.attachment.httpVersion, undefined,
+        "The httpVersion should not yet be set.");
+      is(requestItem.attachment.status, undefined,
+        "The status should not yet be set.");
+      is(requestItem.attachment.statusText, undefined,
+        "The statusText should not yet be set.");
+
+      is(requestItem.attachment.headersSize, undefined,
+        "The headersSize should not yet be set.");
+      is(requestItem.attachment.transferredSize, undefined,
+        "The transferredSize should not yet be set.");
+      is(requestItem.attachment.contentSize, undefined,
+        "The contentSize should not yet be set.");
+
+      is(requestItem.attachment.mimeType, undefined,
+        "The mimeType should not yet be set.");
+      is(requestItem.attachment.responseContent, undefined,
+        "The responseContent should not yet be set.");
+
+      is(requestItem.attachment.totalTime, undefined,
+        "The totalTime should not yet be set.");
+      is(requestItem.attachment.eventTimings, undefined,
+        "The eventTimings should not yet be set.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_HEADERS, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.requestHeaders,
+        "There should be a requestHeaders attachment available.");
+      is(requestItem.attachment.requestHeaders.headers.length, 9,
+        "The requestHeaders attachment has an incorrect |headers| property.");
+      isnot(requestItem.attachment.requestHeaders.headersSize, 0,
+        "The requestHeaders attachment has an incorrect |headersSize| property.");
+      // Can't test for the exact request headers size because the value may
+      // vary across platforms ("User-Agent" header differs).
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_COOKIES, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.requestCookies,
+        "There should be a requestCookies attachment available.");
+      is(requestItem.attachment.requestCookies.cookies.length, 2,
+        "The requestCookies attachment has an incorrect |cookies| property.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_REQUEST_POST_DATA, () => {
+      ok(false, "Trap listener: this request doesn't have any post data.");
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_HEADERS, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.responseHeaders,
+        "There should be a responseHeaders attachment available.");
+      is(requestItem.attachment.responseHeaders.headers.length, 10,
+        "The responseHeaders attachment has an incorrect |headers| property.");
+      is(requestItem.attachment.responseHeaders.headersSize, 330,
+        "The responseHeaders attachment has an incorrect |headersSize| property.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_COOKIES, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.responseCookies,
+        "There should be a responseCookies attachment available.");
+      is(requestItem.attachment.responseCookies.cookies.length, 2,
+        "The responseCookies attachment has an incorrect |cookies| property.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS);
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.STARTED_RECEIVING_RESPONSE, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      is(requestItem.attachment.httpVersion, "HTTP/1.1",
+        "The httpVersion attachment has an incorrect value.");
+      is(requestItem.attachment.status, "200",
+        "The status attachment has an incorrect value.");
+      is(requestItem.attachment.statusText, "Och Aye",
+        "The statusText attachment has an incorrect value.");
+      is(requestItem.attachment.headersSize, 330,
+        "The headersSize attachment has an incorrect value.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
+        status: "200",
+        statusText: "Och Aye"
+      });
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_RESPONSE_CONTENT, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      is(requestItem.attachment.transferredSize, "12",
+        "The transferredSize attachment has an incorrect value.");
+      is(requestItem.attachment.contentSize, "12",
+        "The contentSize attachment has an incorrect value.");
+      is(requestItem.attachment.mimeType, "text/plain; charset=utf-8",
+        "The mimeType attachment has an incorrect value.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.01),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.01),
+      });
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.responseContent,
+        "There should be a responseContent attachment available.");
+      is(requestItem.attachment.responseContent.content.mimeType,
+        "text/plain; charset=utf-8",
+        "The responseContent attachment has an incorrect |content.mimeType| property.");
+      is(requestItem.attachment.responseContent.content.text,
+        "Hello world!",
+        "The responseContent attachment has an incorrect |content.text| property.");
+      is(requestItem.attachment.responseContent.content.size,
+        12,
+        "The responseContent attachment has an incorrect |content.size| property.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.01),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeKB", 0.01),
+      });
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.UPDATING_EVENT_TIMINGS, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      is(typeof requestItem.attachment.totalTime, "number",
+        "The attached totalTime is incorrect.");
+      ok(requestItem.attachment.totalTime >= 0,
+        "The attached totalTime should be positive.");
+
+      is(typeof requestItem.attachment.endedMillis, "number",
+        "The attached endedMillis is incorrect.");
+      ok(requestItem.attachment.endedMillis >= 0,
+        "The attached endedMillis should be positive.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
+        time: true
+      });
+    });
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_EVENT_TIMINGS, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      ok(requestItem.attachment.eventTimings,
+        "There should be a eventTimings attachment available.");
+      is(typeof requestItem.attachment.eventTimings.timings.blocked, "number",
+        "The eventTimings attachment has an incorrect |timings.blocked| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.dns, "number",
+        "The eventTimings attachment has an incorrect |timings.dns| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.connect, "number",
+        "The eventTimings attachment has an incorrect |timings.connect| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.send, "number",
+        "The eventTimings attachment has an incorrect |timings.send| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.wait, "number",
+        "The eventTimings attachment has an incorrect |timings.wait| property.");
+      is(typeof requestItem.attachment.eventTimings.timings.receive, "number",
+        "The eventTimings attachment has an incorrect |timings.receive| property.");
+      is(typeof requestItem.attachment.eventTimings.totalTime, "number",
+        "The eventTimings attachment has an incorrect |totalTime| property.");
+
+      verifyRequestItemTarget(requestItem, "GET", SIMPLE_SJS, {
+        time: true
+      });
+    });
+
+    tab.linkedBrowser.reload();
+  });
+}
diff --git a/devtools/client/netmonitor/test/browser_net_simple-request-details.js b/devtools/client/netmonitor/test/browser_net_simple-request-details.js
new file mode 100644
index 000000000..6be634e68
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_simple-request-details.js
@@ -0,0 +1,261 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if requests render correct information in the details UI.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_SJS);
+  info("Starting test... ");
+
+  let { document, EVENTS, Editor, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  is(RequestsMenu.selectedItem, null,
+    "There shouldn't be any selected item in the requests menu.");
+  is(RequestsMenu.itemCount, 1,
+    "The requests menu should not be empty after the first request.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should still be hidden after the first request.");
+
+  let onTabUpdated = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  yield onTabUpdated;
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  testHeadersTab();
+  yield testCookiesTab();
+  testParamsTab();
+  yield testResponseTab();
+  testTimingsTab();
+  return teardown(monitor);
+
+  function testHeadersTab() {
+    let tabEl = document.querySelectorAll("#details-pane tab")[0];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The headers tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("value"),
+      SIMPLE_SJS, "The url summary value is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("tooltiptext"),
+      SIMPLE_SJS, "The url summary tooltiptext is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
+      "GET", "The method summary value is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-address-value").getAttribute("value"),
+      "127.0.0.1:8888", "The remote address summary value is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
+      "200", "The status summary code is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),
+      "200 Och Aye", "The status summary value is incorrect.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
+      "There should be 2 header scopes displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 19,
+      "There should be 19 header values displayed in this tabpanel.");
+
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let responseScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+    let requestScope = tabpanel.querySelectorAll(".variables-view-scope")[1];
+
+    is(responseScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("responseHeaders") + " (" +
+      L10N.getFormatStr("networkMenu.sizeKB",
+        L10N.numberWithDecimals(330 / 1024, 3)) + ")",
+      "The response headers scope doesn't have the correct title.");
+
+    ok(requestScope.querySelector(".name").getAttribute("value").includes(
+      L10N.getStr("requestHeaders") + " (0"),
+      "The request headers scope doesn't have the correct title.");
+    // Can't test for full request headers title because the size may
+    // vary across platforms ("User-Agent" header differs). We're pretty
+    // sure it's smaller than 1 MB though, so it starts with a 0.
+
+    is(responseScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      "Cache-Control", "The first response header name was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      "\"no-cache, no-store, must-revalidate\"",
+      "The first response header value was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .name")[1]
+      .getAttribute("value"),
+      "Connection", "The second response header name was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .value")[1]
+      .getAttribute("value"),
+      "\"close\"", "The second response header value was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .name")[2]
+      .getAttribute("value"),
+      "Content-Length", "The third response header name was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .value")[2]
+      .getAttribute("value"),
+      "\"12\"", "The third response header value was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .name")[3]
+      .getAttribute("value"),
+      "Content-Type", "The fourth response header name was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .value")[3]
+      .getAttribute("value"),
+      "\"text/plain; charset=utf-8\"", "The fourth response header value was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .name")[9]
+      .getAttribute("value"),
+      "foo-bar", "The last response header name was incorrect.");
+    is(responseScope.querySelectorAll(".variables-view-variable .value")[9]
+      .getAttribute("value"),
+      "\"baz\"", "The last response header value was incorrect.");
+
+    is(requestScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      "Host", "The first request header name was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      "\"example.com\"", "The first request header value was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .name")[6]
+      .getAttribute("value"),
+      "Connection", "The ante-penultimate request header name was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .value")[6]
+      .getAttribute("value"),
+      "\"keep-alive\"", "The ante-penultimate request header value was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .name")[7]
+      .getAttribute("value"),
+      "Pragma", "The penultimate request header name was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .value")[7]
+      .getAttribute("value"),
+      "\"no-cache\"", "The penultimate request header value was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .name")[8]
+      .getAttribute("value"),
+      "Cache-Control", "The last request header name was incorrect.");
+    is(requestScope.querySelectorAll(".variables-view-variable .value")[8]
+      .getAttribute("value"),
+      "\"no-cache\"", "The last request header value was incorrect.");
+  }
+
+  function* testCookiesTab() {
+    let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+    EventUtils.sendMouseEvent({ type: "mousedown" },
+      document.querySelectorAll("#details-pane tab")[1]);
+    yield onEvent;
+
+    let tabEl = document.querySelectorAll("#details-pane tab")[1];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[1];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The cookies tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 2,
+      "There should be 2 cookie scopes displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 6,
+      "There should be 6 cookie values displayed in this tabpanel.");
+  }
+
+  function testParamsTab() {
+    EventUtils.sendMouseEvent({ type: "mousedown" },
+      document.querySelectorAll("#details-pane tab")[2]);
+
+    let tabEl = document.querySelectorAll("#details-pane tab")[2];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The params tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 0,
+      "There should be no param scopes displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 0,
+      "There should be no param values displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 1,
+      "The empty notice should be displayed in this tabpanel.");
+
+    is(tabpanel.querySelector("#request-params-box")
+      .hasAttribute("hidden"), false,
+      "The request params box should not be hidden.");
+    is(tabpanel.querySelector("#request-post-data-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The request post data textarea box should be hidden.");
+  }
+
+  function* testResponseTab() {
+    let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+    EventUtils.sendMouseEvent({ type: "mousedown" },
+      document.querySelectorAll("#details-pane tab")[3]);
+    yield onEvent;
+
+    let tabEl = document.querySelectorAll("#details-pane tab")[3];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[3];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The response tab in the network details pane should be selected.");
+
+    is(tabpanel.querySelector("#response-content-info-header")
+      .hasAttribute("hidden"), true,
+      "The response info header should be hidden.");
+    is(tabpanel.querySelector("#response-content-json-box")
+      .hasAttribute("hidden"), true,
+      "The response content json box should be hidden.");
+    is(tabpanel.querySelector("#response-content-textarea-box")
+      .hasAttribute("hidden"), false,
+      "The response content textarea box should not be hidden.");
+    is(tabpanel.querySelector("#response-content-image-box")
+      .hasAttribute("hidden"), true,
+      "The response content image box should be hidden.");
+
+    let editor = yield NetMonitorView.editor("#response-content-textarea");
+    is(editor.getText(), "Hello world!",
+      "The text shown in the source editor is incorrect.");
+    is(editor.getMode(), Editor.modes.text,
+      "The mode active in the source editor is incorrect.");
+  }
+
+  function testTimingsTab() {
+    EventUtils.sendMouseEvent({ type: "mousedown" },
+      document.querySelectorAll("#details-pane tab")[4]);
+
+    let tabEl = document.querySelectorAll("#details-pane tab")[4];
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[4];
+
+    is(tabEl.getAttribute("selected"), "true",
+      "The timings tab in the network details pane should be selected.");
+
+    ok(tabpanel.querySelector("#timings-summary-blocked .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The blocked timing info does not appear to be correct.");
+
+    ok(tabpanel.querySelector("#timings-summary-dns .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The dns timing info does not appear to be correct.");
+
+    ok(tabpanel.querySelector("#timings-summary-connect .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The connect timing info does not appear to be correct.");
+
+    ok(tabpanel.querySelector("#timings-summary-send .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The send timing info does not appear to be correct.");
+
+    ok(tabpanel.querySelector("#timings-summary-wait .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The wait timing info does not appear to be correct.");
+
+    ok(tabpanel.querySelector("#timings-summary-receive .requests-menu-timings-total")
+      .getAttribute("value").match(/[0-9]+/),
+      "The receive timing info does not appear to be correct.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_simple-request.js b/devtools/client/netmonitor/test/browser_net_simple-request.js
new file mode 100644
index 000000000..898cb3710
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_simple-request.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Test whether the UI state properly reflects existence of requests
+ * displayed in the Net panel. The following parts of the UI are
+ * tested:
+ * 1) Side panel visibility
+ * 2) Side panel toggle button
+ * 3) Empty user message visibility
+ * 4) Number of requests displayed
+ */
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { document, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), true,
+    "The pane toggle button should be disabled when the frontend is opened.");
+  is(document.querySelector("#requests-menu-empty-notice").hasAttribute("hidden"), false,
+    "An empty notice should be displayed when the frontend is opened.");
+  is(RequestsMenu.itemCount, 0,
+    "The requests menu should be empty when the frontend is opened.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should be hidden when the frontend is opened.");
+
+  yield reloadAndWait();
+
+  is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), false,
+    "The pane toggle button should be enabled after the first request.");
+  is(document.querySelector("#requests-menu-empty-notice").hasAttribute("hidden"), true,
+    "The empty notice should be hidden after the first request.");
+  is(RequestsMenu.itemCount, 1,
+    "The requests menu should not be empty after the first request.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should still be hidden after the first request.");
+
+  yield reloadAndWait();
+
+  is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), false,
+    "The pane toggle button should be still be enabled after a reload.");
+  is(document.querySelector("#requests-menu-empty-notice").hasAttribute("hidden"), true,
+    "The empty notice should be still hidden after a reload.");
+  is(RequestsMenu.itemCount, 1,
+    "The requests menu should not be empty after a reload.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should still be hidden after a reload.");
+
+  RequestsMenu.clear();
+
+  is(document.querySelector("#details-pane-toggle").hasAttribute("disabled"), true,
+    "The pane toggle button should be disabled when after clear.");
+  is(document.querySelector("#requests-menu-empty-notice").hasAttribute("hidden"), false,
+    "An empty notice should be displayed again after clear.");
+  is(RequestsMenu.itemCount, 0,
+    "The requests menu should be empty after clear.");
+  is(NetMonitorView.detailsPaneHidden, true,
+    "The details pane should be hidden after clear.");
+
+  return teardown(monitor);
+
+  function* reloadAndWait() {
+    let wait = waitForNetworkEvents(monitor, 1);
+    tab.linkedBrowser.reload();
+    return wait;
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_sort-01.js b/devtools/client/netmonitor/test/browser_net_sort-01.js
new file mode 100644
index 000000000..2c4e718dc
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_sort-01.js
@@ -0,0 +1,230 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if the sorting mechanism works correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL);
+  info("Starting test... ");
+
+  let { $all, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 5);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing swap(0, 0)");
+  RequestsMenu.swapItemsAtIndices(0, 0);
+  RequestsMenu.refreshZebra();
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing swap(0, 1)");
+  RequestsMenu.swapItemsAtIndices(0, 1);
+  RequestsMenu.refreshZebra();
+  testContents([1, 0, 2, 3, 4]);
+
+  info("Testing swap(0, 2)");
+  RequestsMenu.swapItemsAtIndices(0, 2);
+  RequestsMenu.refreshZebra();
+  testContents([1, 2, 0, 3, 4]);
+
+  info("Testing swap(0, 3)");
+  RequestsMenu.swapItemsAtIndices(0, 3);
+  RequestsMenu.refreshZebra();
+  testContents([1, 2, 3, 0, 4]);
+
+  info("Testing swap(0, 4)");
+  RequestsMenu.swapItemsAtIndices(0, 4);
+  RequestsMenu.refreshZebra();
+  testContents([1, 2, 3, 4, 0]);
+
+  info("Testing swap(1, 0)");
+  RequestsMenu.swapItemsAtIndices(1, 0);
+  RequestsMenu.refreshZebra();
+  testContents([0, 2, 3, 4, 1]);
+
+  info("Testing swap(1, 1)");
+  RequestsMenu.swapItemsAtIndices(1, 1);
+  RequestsMenu.refreshZebra();
+  testContents([0, 2, 3, 4, 1]);
+
+  info("Testing swap(1, 2)");
+  RequestsMenu.swapItemsAtIndices(1, 2);
+  RequestsMenu.refreshZebra();
+  testContents([0, 1, 3, 4, 2]);
+
+  info("Testing swap(1, 3)");
+  RequestsMenu.swapItemsAtIndices(1, 3);
+  RequestsMenu.refreshZebra();
+  testContents([0, 3, 1, 4, 2]);
+
+  info("Testing swap(1, 4)");
+  RequestsMenu.swapItemsAtIndices(1, 4);
+  RequestsMenu.refreshZebra();
+  testContents([0, 3, 4, 1, 2]);
+
+  info("Testing swap(2, 0)");
+  RequestsMenu.swapItemsAtIndices(2, 0);
+  RequestsMenu.refreshZebra();
+  testContents([2, 3, 4, 1, 0]);
+
+  info("Testing swap(2, 1)");
+  RequestsMenu.swapItemsAtIndices(2, 1);
+  RequestsMenu.refreshZebra();
+  testContents([1, 3, 4, 2, 0]);
+
+  info("Testing swap(2, 2)");
+  RequestsMenu.swapItemsAtIndices(2, 2);
+  RequestsMenu.refreshZebra();
+  testContents([1, 3, 4, 2, 0]);
+
+  info("Testing swap(2, 3)");
+  RequestsMenu.swapItemsAtIndices(2, 3);
+  RequestsMenu.refreshZebra();
+  testContents([1, 2, 4, 3, 0]);
+
+  info("Testing swap(2, 4)");
+  RequestsMenu.swapItemsAtIndices(2, 4);
+  RequestsMenu.refreshZebra();
+  testContents([1, 4, 2, 3, 0]);
+
+  info("Testing swap(3, 0)");
+  RequestsMenu.swapItemsAtIndices(3, 0);
+  RequestsMenu.refreshZebra();
+  testContents([1, 4, 2, 0, 3]);
+
+  info("Testing swap(3, 1)");
+  RequestsMenu.swapItemsAtIndices(3, 1);
+  RequestsMenu.refreshZebra();
+  testContents([3, 4, 2, 0, 1]);
+
+  info("Testing swap(3, 2)");
+  RequestsMenu.swapItemsAtIndices(3, 2);
+  RequestsMenu.refreshZebra();
+  testContents([2, 4, 3, 0, 1]);
+
+  info("Testing swap(3, 3)");
+  RequestsMenu.swapItemsAtIndices(3, 3);
+  RequestsMenu.refreshZebra();
+  testContents([2, 4, 3, 0, 1]);
+
+  info("Testing swap(3, 4)");
+  RequestsMenu.swapItemsAtIndices(3, 4);
+  RequestsMenu.refreshZebra();
+  testContents([2, 3, 4, 0, 1]);
+
+  info("Testing swap(4, 0)");
+  RequestsMenu.swapItemsAtIndices(4, 0);
+  RequestsMenu.refreshZebra();
+  testContents([2, 3, 0, 4, 1]);
+
+  info("Testing swap(4, 1)");
+  RequestsMenu.swapItemsAtIndices(4, 1);
+  RequestsMenu.refreshZebra();
+  testContents([2, 3, 0, 1, 4]);
+
+  info("Testing swap(4, 2)");
+  RequestsMenu.swapItemsAtIndices(4, 2);
+  RequestsMenu.refreshZebra();
+  testContents([4, 3, 0, 1, 2]);
+
+  info("Testing swap(4, 3)");
+  RequestsMenu.swapItemsAtIndices(4, 3);
+  RequestsMenu.refreshZebra();
+  testContents([3, 4, 0, 1, 2]);
+
+  info("Testing swap(4, 4)");
+  RequestsMenu.swapItemsAtIndices(4, 4);
+  RequestsMenu.refreshZebra();
+  testContents([3, 4, 0, 1, 2]);
+
+  info("Clearing sort.");
+  RequestsMenu.sortBy();
+  testContents([0, 1, 2, 3, 4]);
+
+  return teardown(monitor);
+
+  function testContents([a, b, c, d, e]) {
+    is(RequestsMenu.items.length, 5,
+      "There should be a total of 5 items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, 5,
+      "There should be a total of 5 visbile items in the requests menu.");
+    is($all(".side-menu-widget-item").length, 5,
+      "The visible items in the requests menu are, in fact, visible!");
+
+    is(RequestsMenu.getItemAtIndex(0), RequestsMenu.items[0],
+      "The requests menu items aren't ordered correctly. First item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(1), RequestsMenu.items[1],
+      "The requests menu items aren't ordered correctly. Second item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(2), RequestsMenu.items[2],
+      "The requests menu items aren't ordered correctly. Third item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(3), RequestsMenu.items[3],
+      "The requests menu items aren't ordered correctly. Fourth item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(4), RequestsMenu.items[4],
+      "The requests menu items aren't ordered correctly. Fifth item is misplaced.");
+
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(a),
+      "GET", STATUS_CODES_SJS + "?sts=100", {
+        status: 101,
+        statusText: "Switching Protocols",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getStr("networkMenu.sizeUnavailable"),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(b),
+      "GET", STATUS_CODES_SJS + "?sts=200", {
+        status: 202,
+        statusText: "Created",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(c),
+      "GET", STATUS_CODES_SJS + "?sts=300", {
+        status: 303,
+        statusText: "See Other",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(d),
+      "GET", STATUS_CODES_SJS + "?sts=400", {
+        status: 404,
+        statusText: "Not Found",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(e),
+      "GET", STATUS_CODES_SJS + "?sts=500", {
+        status: 501,
+        statusText: "Not Implemented",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      });
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_sort-02.js b/devtools/client/netmonitor/test/browser_net_sort-02.js
new file mode 100644
index 000000000..ce8c69e45
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_sort-02.js
@@ -0,0 +1,272 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if sorting columns in the network table works correctly.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SORTING_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on debug builds. This could be because
+  // of the heavy dom manipulation associated with sorting.
+  requestLongerTimeout(2);
+
+  let { $, $all, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  // Loading the frame script and preparing the xhr request URLs so we can
+  // generate some requests later.
+  loadCommonFrameScript();
+  let requests = [{
+    url: "sjs_sorting-test-server.sjs?index=1&" + Math.random(),
+    method: "GET1"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=5&" + Math.random(),
+    method: "GET5"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=2&" + Math.random(),
+    method: "GET2"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=4&" + Math.random(),
+    method: "GET4"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=3&" + Math.random(),
+    method: "GET3"
+  }];
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 5);
+  yield performRequestsInContent(requests);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  testHeaders();
+  testContents([0, 2, 4, 3, 1]);
+
+  info("Testing status sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing status sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing status sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing method sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+  testHeaders("method", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing method sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+  testHeaders("method", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing method sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-method-button"));
+  testHeaders("method", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing file sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+  testHeaders("file", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing file sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+  testHeaders("file", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing file sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-file-button"));
+  testHeaders("file", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing type sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+  testHeaders("type", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing type sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+  testHeaders("type", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing type sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-type-button"));
+  testHeaders("type", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing transferred sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+  testHeaders("transferred", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing transferred sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+  testHeaders("transferred", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing transferred sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-transferred-button"));
+  testHeaders("transferred", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing size sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+  testHeaders("size", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing size sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+  testHeaders("size", "descending");
+  testContents([4, 3, 2, 1, 0]);
+
+  info("Testing size sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-size-button"));
+  testHeaders("size", "ascending");
+  testContents([0, 1, 2, 3, 4]);
+
+  info("Testing waterfall sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+  testHeaders("waterfall", "ascending");
+  testContents([0, 2, 4, 3, 1]);
+
+  info("Testing waterfall sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+  testHeaders("waterfall", "descending");
+  testContents([4, 2, 0, 1, 3]);
+
+  info("Testing waterfall sort, ascending. Checking sort loops correctly.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-waterfall-button"));
+  testHeaders("waterfall", "ascending");
+  testContents([0, 2, 4, 3, 1]);
+
+  return teardown(monitor);
+
+  function testHeaders(sortType, direction) {
+    let doc = monitor.panelWin.document;
+    let target = doc.querySelector("#requests-menu-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-menu-header-button");
+
+    for (let header of headers) {
+      if (header != target) {
+        is(header.hasAttribute("sorted"), false,
+          "The " + header.id + " header should not have a 'sorted' attribute.");
+        is(header.hasAttribute("tooltiptext"), false,
+          "The " + header.id + " header should not have a 'tooltiptext' attribute.");
+      } else {
+        is(header.getAttribute("sorted"), direction,
+          "The " + header.id + " header has an incorrect 'sorted' attribute.");
+        is(header.getAttribute("tooltiptext"), direction == "ascending"
+          ? L10N.getStr("networkMenu.sortedAsc")
+          : L10N.getStr("networkMenu.sortedDesc"),
+          "The " + header.id + " has an incorrect 'tooltiptext' attribute.");
+      }
+    }
+  }
+
+  function testContents([a, b, c, d, e]) {
+    isnot(RequestsMenu.selectedItem, null,
+      "There should still be a selected item after sorting.");
+    is(RequestsMenu.selectedIndex, a,
+      "The first item should be still selected after sorting.");
+    is(NetMonitorView.detailsPaneHidden, false,
+      "The details pane should still be visible after sorting.");
+
+    is(RequestsMenu.items.length, 5,
+      "There should be a total of 5 items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, 5,
+      "There should be a total of 5 visbile items in the requests menu.");
+    is($all(".side-menu-widget-item").length, 5,
+      "The visible items in the requests menu are, in fact, visible!");
+
+    is(RequestsMenu.getItemAtIndex(0), RequestsMenu.items[0],
+      "The requests menu items aren't ordered correctly. First item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(1), RequestsMenu.items[1],
+      "The requests menu items aren't ordered correctly. Second item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(2), RequestsMenu.items[2],
+      "The requests menu items aren't ordered correctly. Third item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(3), RequestsMenu.items[3],
+      "The requests menu items aren't ordered correctly. Fourth item is misplaced.");
+    is(RequestsMenu.getItemAtIndex(4), RequestsMenu.items[4],
+      "The requests menu items aren't ordered correctly. Fifth item is misplaced.");
+
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(a),
+      "GET1", SORTING_SJS + "?index=1", {
+        fuzzyUrl: true,
+        status: 101,
+        statusText: "Meh",
+        type: "1",
+        fullMimeType: "text/1",
+        transferred: L10N.getStr("networkMenu.sizeUnavailable"),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(b),
+      "GET2", SORTING_SJS + "?index=2", {
+        fuzzyUrl: true,
+        status: 200,
+        statusText: "Meh",
+        type: "2",
+        fullMimeType: "text/2",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(c),
+      "GET3", SORTING_SJS + "?index=3", {
+        fuzzyUrl: true,
+        status: 300,
+        statusText: "Meh",
+        type: "3",
+        fullMimeType: "text/3",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(d),
+      "GET4", SORTING_SJS + "?index=4", {
+        fuzzyUrl: true,
+        status: 400,
+        statusText: "Meh",
+        type: "4",
+        fullMimeType: "text/4",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
+        time: true
+      });
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(e),
+      "GET5", SORTING_SJS + "?index=5", {
+        fuzzyUrl: true,
+        status: 500,
+        statusText: "Meh",
+        type: "5",
+        fullMimeType: "text/5",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
+        time: true
+      });
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_sort-03.js b/devtools/client/netmonitor/test/browser_net_sort-03.js
new file mode 100644
index 000000000..ada0872a8
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_sort-03.js
@@ -0,0 +1,209 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if sorting columns in the network table works correctly with new requests.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { monitor } = yield initNetMonitor(SORTING_URL);
+  info("Starting test... ");
+
+  // It seems that this test may be slow on debug builds. This could be because
+  // of the heavy dom manipulation associated with sorting.
+  requestLongerTimeout(2);
+
+  let { $, $all, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  // Loading the frame script and preparing the xhr request URLs so we can
+  // generate some requests later.
+  loadCommonFrameScript();
+  let requests = [{
+    url: "sjs_sorting-test-server.sjs?index=1&" + Math.random(),
+    method: "GET1"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=5&" + Math.random(),
+    method: "GET5"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=2&" + Math.random(),
+    method: "GET2"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=4&" + Math.random(),
+    method: "GET4"
+  }, {
+    url: "sjs_sorting-test-server.sjs?index=3&" + Math.random(),
+    method: "GET3"
+  }];
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 5);
+  yield performRequestsInContent(requests);
+  yield wait;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, $("#details-pane-toggle"));
+
+  isnot(RequestsMenu.selectedItem, null,
+    "There should be a selected item in the requests menu.");
+  is(RequestsMenu.selectedIndex, 0,
+    "The first item should be selected in the requests menu.");
+  is(NetMonitorView.detailsPaneHidden, false,
+    "The details pane should not be hidden after toggle button was pressed.");
+
+  testHeaders();
+  testContents([0, 2, 4, 3, 1], 0);
+
+  info("Testing status sort, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "ascending");
+  testContents([0, 1, 2, 3, 4], 0);
+
+  info("Performing more requests.");
+  wait = waitForNetworkEvents(monitor, 5);
+  yield performRequestsInContent(requests);
+  yield wait;
+
+  info("Testing status sort again, ascending.");
+  testHeaders("status", "ascending");
+  testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 0);
+
+  info("Testing status sort, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "descending");
+  testContents([9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 9);
+
+  info("Performing more requests.");
+  wait = waitForNetworkEvents(monitor, 5);
+  yield performRequestsInContent(requests);
+  yield wait;
+
+  info("Testing status sort again, descending.");
+  testHeaders("status", "descending");
+  testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
+
+  info("Testing status sort yet again, ascending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "ascending");
+  testContents([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], 0);
+
+  info("Testing status sort yet again, descending.");
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-status-button"));
+  testHeaders("status", "descending");
+  testContents([14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 14);
+
+  return teardown(monitor);
+
+  function testHeaders(sortType, direction) {
+    let doc = monitor.panelWin.document;
+    let target = doc.querySelector("#requests-menu-" + sortType + "-button");
+    let headers = doc.querySelectorAll(".requests-menu-header-button");
+
+    for (let header of headers) {
+      if (header != target) {
+        is(header.hasAttribute("sorted"), false,
+          "The " + header.id + " header should not have a 'sorted' attribute.");
+        is(header.hasAttribute("tooltiptext"), false,
+          "The " + header.id + " header should not have a 'tooltiptext' attribute.");
+      } else {
+        is(header.getAttribute("sorted"), direction,
+          "The " + header.id + " header has an incorrect 'sorted' attribute.");
+        is(header.getAttribute("tooltiptext"), direction == "ascending"
+          ? L10N.getStr("networkMenu.sortedAsc")
+          : L10N.getStr("networkMenu.sortedDesc"),
+          "The " + header.id + " has an incorrect 'tooltiptext' attribute.");
+      }
+    }
+  }
+
+  function testContents(order, selection) {
+    isnot(RequestsMenu.selectedItem, null,
+      "There should still be a selected item after sorting.");
+    is(RequestsMenu.selectedIndex, selection,
+      "The first item should be still selected after sorting.");
+    is(NetMonitorView.detailsPaneHidden, false,
+      "The details pane should still be visible after sorting.");
+
+    is(RequestsMenu.items.length, order.length,
+      "There should be a specific number of items in the requests menu.");
+    is(RequestsMenu.visibleItems.length, order.length,
+      "There should be a specific number of visbile items in the requests menu.");
+    is($all(".side-menu-widget-item").length, order.length,
+      "The visible items in the requests menu are, in fact, visible!");
+
+    for (let i = 0; i < order.length; i++) {
+      is(RequestsMenu.getItemAtIndex(i), RequestsMenu.items[i],
+        "The requests menu items aren't ordered correctly. Misplaced item " + i + ".");
+    }
+
+    for (let i = 0, len = order.length / 5; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i]),
+        "GET1", SORTING_SJS + "?index=1", {
+          fuzzyUrl: true,
+          status: 101,
+          statusText: "Meh",
+          type: "1",
+          fullMimeType: "text/1",
+          transferred: L10N.getStr("networkMenu.sizeUnavailable"),
+          size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
+          time: true
+        });
+    }
+    for (let i = 0, len = order.length / 5; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len]),
+        "GET2", SORTING_SJS + "?index=2", {
+          fuzzyUrl: true,
+          status: 200,
+          statusText: "Meh",
+          type: "2",
+          fullMimeType: "text/2",
+          transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
+          size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 19),
+          time: true
+        });
+    }
+    for (let i = 0, len = order.length / 5; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 2]),
+        "GET3", SORTING_SJS + "?index=3", {
+          fuzzyUrl: true,
+          status: 300,
+          statusText: "Meh",
+          type: "3",
+          fullMimeType: "text/3",
+          transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
+          size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 29),
+          time: true
+        });
+    }
+    for (let i = 0, len = order.length / 5; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 3]),
+        "GET4", SORTING_SJS + "?index=4", {
+          fuzzyUrl: true,
+          status: 400,
+          statusText: "Meh",
+          type: "4",
+          fullMimeType: "text/4",
+          transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
+          size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 39),
+          time: true
+        });
+    }
+    for (let i = 0, len = order.length / 5; i < len; i++) {
+      verifyRequestItemTarget(RequestsMenu.getItemAtIndex(order[i + len * 4]),
+        "GET5", SORTING_SJS + "?index=5", {
+          fuzzyUrl: true,
+          status: 500,
+          statusText: "Meh",
+          type: "5",
+          fullMimeType: "text/5",
+          transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
+          size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 49),
+          time: true
+        });
+    }
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_statistics-01.js b/devtools/client/netmonitor/test/browser_net_statistics-01.js
new file mode 100644
index 000000000..d7e75b997
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_statistics-01.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the statistics view is populated correctly.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(STATISTICS_URL);
+  info("Starting test... ");
+
+  let panel = monitor.panelWin;
+  let { $, $all, EVENTS, NetMonitorView } = panel;
+  is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+    "The initial frontend mode is correct.");
+
+  is($("#primed-cache-chart").childNodes.length, 0,
+    "There should be no primed cache chart created yet.");
+  is($("#empty-cache-chart").childNodes.length, 0,
+    "There should be no empty cache chart created yet.");
+
+  let onChartDisplayed = Promise.all([
+    panel.once(EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
+    panel.once(EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
+  ]);
+  let onPlaceholderDisplayed = panel.once(EVENTS.PLACEHOLDER_CHARTS_DISPLAYED);
+
+  info("Displaying statistics view");
+  NetMonitorView.toggleFrontendMode();
+  is(NetMonitorView.currentFrontendMode, "network-statistics-view",
+    "The current frontend mode is correct.");
+
+  info("Waiting for placeholder to display");
+  yield onPlaceholderDisplayed;
+  is($("#primed-cache-chart").childNodes.length, 1,
+    "There should be a placeholder primed cache chart created now.");
+  is($("#empty-cache-chart").childNodes.length, 1,
+    "There should be a placeholder empty cache chart created now.");
+
+  is($all(".pie-chart-container[placeholder=true]").length, 2,
+    "Two placeholder pie chart appear to be rendered correctly.");
+  is($all(".table-chart-container[placeholder=true]").length, 2,
+    "Two placeholder table chart appear to be rendered correctly.");
+
+  info("Waiting for chart to display");
+  yield onChartDisplayed;
+  is($("#primed-cache-chart").childNodes.length, 1,
+    "There should be a real primed cache chart created now.");
+  is($("#empty-cache-chart").childNodes.length, 1,
+    "There should be a real empty cache chart created now.");
+
+  yield waitUntil(
+    () => $all(".pie-chart-container:not([placeholder=true])").length == 2);
+  ok(true, "Two real pie charts appear to be rendered correctly.");
+
+  yield waitUntil(
+    () => $all(".table-chart-container:not([placeholder=true])").length == 2);
+  ok(true, "Two real table charts appear to be rendered correctly.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_statistics-02.js b/devtools/client/netmonitor/test/browser_net_statistics-02.js
new file mode 100644
index 000000000..361247e16
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_statistics-02.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the network inspector view is shown when the target navigates
+ * away while in the statistics view.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(STATISTICS_URL);
+  info("Starting test... ");
+
+  let panel = monitor.panelWin;
+  let { EVENTS, NetMonitorView } = panel;
+  is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+      "The initial frontend mode is correct.");
+
+  let onChartDisplayed = Promise.all([
+    panel.once(EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
+    panel.once(EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
+  ]);
+
+  info("Displaying statistics view");
+  NetMonitorView.toggleFrontendMode();
+  yield onChartDisplayed;
+  is(NetMonitorView.currentFrontendMode, "network-statistics-view",
+        "The frontend mode is currently in the statistics view.");
+
+  info("Reloading page");
+  let onWillNavigate = panel.once(EVENTS.TARGET_WILL_NAVIGATE);
+  let onDidNavigate = panel.once(EVENTS.TARGET_DID_NAVIGATE);
+  tab.linkedBrowser.reload();
+  yield onWillNavigate;
+  is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+          "The frontend mode switched back to the inspector view.");
+  yield onDidNavigate;
+  is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+            "The frontend mode is still in the inspector view.");
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_statistics-03.js b/devtools/client/netmonitor/test/browser_net_statistics-03.js
new file mode 100644
index 000000000..f3c6bf691
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_statistics-03.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test if the correct filtering predicates are used when filtering from
+ * the performance analysis view.
+ */
+
+add_task(function* () {
+  let { monitor } = yield initNetMonitor(FILTERING_URL);
+  info("Starting test... ");
+
+  let panel = monitor.panelWin;
+  let { $, EVENTS, NetMonitorView } = panel;
+
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-html-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-css-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-js-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-ws-button"));
+  EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-other-button"));
+  testFilterButtonsCustom(monitor, [0, 1, 1, 1, 0, 0, 0, 0, 0, 1]);
+  info("The correct filtering predicates are used before entering perf. analysis mode.");
+
+  let onEvents = promise.all([
+    panel.once(EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
+    panel.once(EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
+  ]);
+  NetMonitorView.toggleFrontendMode();
+  yield onEvents;
+
+  is(NetMonitorView.currentFrontendMode, "network-statistics-view",
+    "The frontend mode is switched to the statistics view.");
+
+  EventUtils.sendMouseEvent({ type: "click" }, $(".pie-chart-slice"));
+
+  is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+    "The frontend mode is switched back to the inspector view.");
+
+  testFilterButtons(monitor, "html");
+  info("The correct filtering predicate is used when exiting perf. analysis mode.");
+
+  yield teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_status-codes.js b/devtools/client/netmonitor/test/browser_net_status-codes.js
new file mode 100644
index 000000000..f38ee71e4
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_status-codes.js
@@ -0,0 +1,213 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/**
+ * Tests if requests display the correct status code and text in the UI.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(STATUS_CODES_URL);
+
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+  let requestItems = [];
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  const REQUEST_DATA = [
+    {
+      // request #0
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=100",
+      details: {
+        status: 101,
+        statusText: "Switching Protocols",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 0),
+        time: true
+      }
+    },
+    {
+      // request #1
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=200",
+      details: {
+        status: 202,
+        statusText: "Created",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      }
+    },
+    {
+      // request #2
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=300",
+      details: {
+        status: 303,
+        statusText: "See Other",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      }
+    },
+    {
+      // request #3
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=400",
+      details: {
+        status: 404,
+        statusText: "Not Found",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      }
+    },
+    {
+      // request #4
+      method: "GET",
+      uri: STATUS_CODES_SJS + "?sts=500",
+      details: {
+        status: 501,
+        statusText: "Not Implemented",
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeB", 22),
+        time: true
+      }
+    }
+  ];
+
+  let wait = waitForNetworkEvents(monitor, 5);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  info("Performing tests");
+  yield verifyRequests();
+  yield testTab(0, testSummary);
+  yield testTab(2, testParams);
+
+  return teardown(monitor);
+
+  /**
+   * A helper that verifies all requests show the correct information and caches
+   * RequestsMenu items to requestItems array.
+   */
+  function* verifyRequests() {
+    info("Verifying requests contain correct information.");
+    let index = 0;
+    for (let request of REQUEST_DATA) {
+      let item = RequestsMenu.getItemAtIndex(index);
+      requestItems[index] = item;
+
+      info("Verifying request #" + index);
+      yield verifyRequestItemTarget(item, request.method, request.uri, request.details);
+
+      index++;
+    }
+  }
+
+  /**
+   * A helper that opens a given tab of request details pane, selects and passes
+   * all requests to the given test function.
+   *
+   * @param Number tabIdx
+   *               The index of NetworkDetails tab to activate.
+   * @param Function testFn(requestItem)
+   *        A function that should perform all necessary tests. It's called once
+   *        for every item of REQUEST_DATA with that item being selected in the
+   *        NetworkMonitor.
+   */
+  function* testTab(tabIdx, testFn) {
+    info("Testing tab #" + tabIdx);
+    EventUtils.sendMouseEvent({ type: "mousedown" },
+          document.querySelectorAll("#details-pane tab")[tabIdx]);
+
+    let counter = 0;
+    for (let item of REQUEST_DATA) {
+      info("Waiting tab #" + tabIdx + " to update with request #" + counter);
+      yield chooseRequest(counter);
+
+      info("Tab updated. Performing checks");
+      yield testFn(item);
+
+      counter++;
+    }
+  }
+
+  /**
+   * A function that tests "Summary" contains correct information.
+   */
+  function* testSummary(data) {
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[0];
+
+    let { method, uri, details: { status, statusText } } = data;
+    is(tabpanel.querySelector("#headers-summary-url-value").getAttribute("value"),
+      uri, "The url summary value is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-method-value").getAttribute("value"),
+      method, "The method summary value is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-status-circle").getAttribute("code"),
+      status, "The status summary code is incorrect.");
+    is(tabpanel.querySelector("#headers-summary-status-value").getAttribute("value"),
+      status + " " + statusText, "The status summary value is incorrect.");
+  }
+
+  /**
+   * A function that tests "Params" tab contains correct information.
+   */
+  function* testParams(data) {
+    let tabpanel = document.querySelectorAll("#details-pane tabpanel")[2];
+    let statusParamValue = data.uri.split("=").pop();
+    let statusParamShownValue = "\"" + statusParamValue + "\"";
+
+    is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+      "There should be 1 param scope displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variable-or-property").length, 1,
+      "There should be 1 param value displayed in this tabpanel.");
+    is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+      "The empty notice should not be displayed in this tabpanel.");
+
+    let paramsScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+
+    is(paramsScope.querySelector(".name").getAttribute("value"),
+      L10N.getStr("paramsQueryString"),
+      "The params scope doesn't have the correct title.");
+
+    is(paramsScope.querySelectorAll(".variables-view-variable .name")[0]
+      .getAttribute("value"),
+      "sts", "The param name was incorrect.");
+    is(paramsScope.querySelectorAll(".variables-view-variable .value")[0]
+      .getAttribute("value"),
+      statusParamShownValue, "The param value was incorrect.");
+
+    is(tabpanel.querySelector("#request-params-box")
+      .hasAttribute("hidden"), false,
+      "The request params box should not be hidden.");
+    is(tabpanel.querySelector("#request-post-data-textarea-box")
+      .hasAttribute("hidden"), true,
+      "The request post data textarea box should be hidden.");
+  }
+
+  /**
+   * A helper that clicks on a specified request and returns a promise resolved
+   * when NetworkDetails has been populated with the data of the given request.
+   */
+  function chooseRequest(index) {
+    let onTabUpdated = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+    EventUtils.sendMouseEvent({ type: "mousedown" }, requestItems[index].target);
+    return onTabUpdated;
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_streaming-response.js b/devtools/client/netmonitor/test/browser_net_streaming-response.js
new file mode 100644
index 000000000..49a75ec32
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_streaming-response.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if reponses from streaming content types (MPEG-DASH, HLS) are
+ * displayed as XML or plain text
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+
+  info("Starting test... ");
+  let { panelWin } = monitor;
+  let { document, Editor, NetMonitorView } = panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  const REQUESTS = [
+    [ "hls-m3u8", /^#EXTM3U/, Editor.modes.text ],
+    [ "mpeg-dash", /^<\?xml/, Editor.modes.html ]
+  ];
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, REQUESTS.length);
+  for (let [fmt] of REQUESTS) {
+    let url = CONTENT_TYPE_SJS + "?fmt=" + fmt;
+    yield ContentTask.spawn(tab.linkedBrowser, { url }, function* (args) {
+      content.wrappedJSObject.performRequests(1, args.url);
+    });
+  }
+  yield wait;
+
+  REQUESTS.forEach(([ fmt ], i) => {
+    verifyRequestItemTarget(RequestsMenu.getItemAtIndex(i),
+      "GET", CONTENT_TYPE_SJS + "?fmt=" + fmt, {
+        status: 200,
+        statusText: "OK"
+      });
+  });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.getElementById("details-pane-toggle"));
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    document.querySelectorAll("#details-pane tab")[3]);
+
+  yield panelWin.once(panelWin.EVENTS.RESPONSE_BODY_DISPLAYED);
+  let editor = yield NetMonitorView.editor("#response-content-textarea");
+
+  // the hls-m3u8 part
+  testEditorContent(editor, REQUESTS[0]);
+
+  RequestsMenu.selectedIndex = 1;
+  yield panelWin.once(panelWin.EVENTS.TAB_UPDATED);
+  yield panelWin.once(panelWin.EVENTS.RESPONSE_BODY_DISPLAYED);
+
+  // the mpeg-dash part
+  testEditorContent(editor, REQUESTS[1]);
+
+  return teardown(monitor);
+
+  function testEditorContent(e, [ fmt, textRe, mode ]) {
+    ok(e.getText().match(textRe),
+      "The text shown in the source editor for " + fmt + " is correct.");
+    is(e.getMode(), mode,
+      "The mode active in the source editor for " + fmt + " is correct.");
+  }
+});
diff --git a/devtools/client/netmonitor/test/browser_net_throttle.js b/devtools/client/netmonitor/test/browser_net_throttle.js
new file mode 100644
index 000000000..c1e7723b8
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_throttle.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Network throttling integration test.
+
+"use strict";
+
+add_task(function* () {
+  yield throttleTest(true);
+  yield throttleTest(false);
+});
+
+function* throttleTest(actuallyThrottle) {
+  requestLongerTimeout(2);
+
+  let { monitor } = yield initNetMonitor(SIMPLE_URL);
+  const {ACTIVITY_TYPE, EVENTS, NetMonitorController, NetMonitorView} = monitor.panelWin;
+
+  info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
+
+  // When throttling, must be smaller than the length of the content
+  // of SIMPLE_URL in bytes.
+  const size = actuallyThrottle ? 200 : 0;
+
+  const request = {
+    "NetworkMonitor.throttleData": {
+      roundTripTimeMean: 0,
+      roundTripTimeMax: 0,
+      downloadBPSMean: size,
+      downloadBPSMax: size,
+      uploadBPSMean: 10000,
+      uploadBPSMax: 10000,
+    },
+  };
+  let client = monitor._controller.webConsoleClient;
+
+  info("sending throttle request");
+  let deferred = promise.defer();
+  client.setPreferences(request, response => {
+    deferred.resolve(response);
+  });
+  yield deferred.promise;
+
+  let eventPromise = monitor.panelWin.once(EVENTS.RECEIVED_EVENT_TIMINGS);
+  yield NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED);
+  yield eventPromise;
+
+  let requestItem = NetMonitorView.RequestsMenu.getItemAtIndex(0);
+  const reportedOneSecond = requestItem.attachment.eventTimings.timings.receive > 1000;
+  if (actuallyThrottle) {
+    ok(reportedOneSecond, "download reported as taking more than one second");
+  } else {
+    ok(!reportedOneSecond, "download reported as taking less than one second");
+  }
+
+  yield teardown(monitor);
+}
diff --git a/devtools/client/netmonitor/test/browser_net_timeline_ticks.js b/devtools/client/netmonitor/test/browser_net_timeline_ticks.js
new file mode 100644
index 000000000..2aafcb98d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_timeline_ticks.js
@@ -0,0 +1,142 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if timeline correctly displays interval divisions.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(SIMPLE_URL);
+  info("Starting test... ");
+
+  let { $, $all, NetMonitorView, NetMonitorController } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  // Disable transferred size column support for this test.
+  // Without this, the waterfall only has enough room for one division, which
+  // would remove most of the value of this test.
+  $("#requests-menu-transferred-header-box").hidden = true;
+  $("#requests-menu-item-template .requests-menu-transferred").hidden = true;
+
+  RequestsMenu.lazyUpdate = false;
+
+  ok($("#requests-menu-waterfall-label"),
+    "An timeline label should be displayed when the frontend is opened.");
+  ok($all(".requests-menu-timings-division").length == 0,
+    "No tick labels should be displayed when the frontend is opened.");
+
+  ok(!RequestsMenu._canvas, "No canvas should be created when the frontend is opened.");
+  ok(!RequestsMenu._ctx, "No 2d context should be created when the frontend is opened.");
+
+  let wait = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  yield wait;
+
+  // Make sure the DOMContentLoaded and load markers don't interfere with
+  // this test by removing them and redrawing the waterfall (bug 1224088).
+  NetMonitorController.NetworkEventsHandler.clearMarkers();
+  RequestsMenu._flushWaterfallViews(true);
+
+  ok(!$("#requests-menu-waterfall-label"),
+    "The timeline label should be hidden after the first request.");
+  ok($all(".requests-menu-timings-division").length >= 3,
+    "There should be at least 3 tick labels in the network requests header.");
+
+  is($all(".requests-menu-timings-division")[0].getAttribute("value"),
+    L10N.getFormatStr("networkMenu.millisecond", 0),
+    "The first tick label has an incorrect value");
+  is($all(".requests-menu-timings-division")[1].getAttribute("value"),
+    L10N.getFormatStr("networkMenu.millisecond", 80),
+    "The second tick label has an incorrect value");
+  is($all(".requests-menu-timings-division")[2].getAttribute("value"),
+    L10N.getFormatStr("networkMenu.millisecond", 160),
+    "The third tick label has an incorrect value");
+
+  is($all(".requests-menu-timings-division")[0].style.transform, "translateX(0px)",
+    "The first tick label has an incorrect translation");
+  is($all(".requests-menu-timings-division")[1].style.transform, "translateX(80px)",
+    "The second tick label has an incorrect translation");
+  is($all(".requests-menu-timings-division")[2].style.transform, "translateX(160px)",
+    "The third tick label has an incorrect translation");
+
+  ok(RequestsMenu._canvas, "A canvas should be created after the first request.");
+  ok(RequestsMenu._ctx, "A 2d context should be created after the first request.");
+
+  let imageData = RequestsMenu._ctx.getImageData(0, 0, 161, 1);
+  ok(imageData, "The image data should have been created.");
+
+  let data = imageData.data;
+  ok(data, "The image data should contain a pixel array.");
+
+  ok(hasPixelAt(0), "The tick at 0 is should not be empty.");
+  ok(!hasPixelAt(1), "The tick at 1 is should be empty.");
+  ok(!hasPixelAt(19), "The tick at 19 is should be empty.");
+  ok(hasPixelAt(20), "The tick at 20 is should not be empty.");
+  ok(!hasPixelAt(21), "The tick at 21 is should be empty.");
+  ok(!hasPixelAt(39), "The tick at 39 is should be empty.");
+  ok(hasPixelAt(40), "The tick at 40 is should not be empty.");
+  ok(!hasPixelAt(41), "The tick at 41 is should be empty.");
+  ok(!hasPixelAt(59), "The tick at 59 is should be empty.");
+  ok(hasPixelAt(60), "The tick at 60 is should not be empty.");
+  ok(!hasPixelAt(61), "The tick at 61 is should be empty.");
+  ok(!hasPixelAt(79), "The tick at 79 is should be empty.");
+  ok(hasPixelAt(80), "The tick at 80 is should not be empty.");
+  ok(!hasPixelAt(81), "The tick at 81 is should be empty.");
+  ok(!hasPixelAt(159), "The tick at 159 is should be empty.");
+  ok(hasPixelAt(160), "The tick at 160 is should not be empty.");
+  ok(!hasPixelAt(161), "The tick at 161 is should be empty.");
+
+  ok(isPixelBrighterAtThan(0, 20),
+    "The tick at 0 should be brighter than the one at 20");
+  ok(isPixelBrighterAtThan(40, 20),
+    "The tick at 40 should be brighter than the one at 20");
+  ok(isPixelBrighterAtThan(40, 60),
+    "The tick at 40 should be brighter than the one at 60");
+  ok(isPixelBrighterAtThan(80, 60),
+    "The tick at 80 should be brighter than the one at 60");
+
+  ok(isPixelBrighterAtThan(80, 100),
+    "The tick at 80 should be brighter than the one at 100");
+  ok(isPixelBrighterAtThan(120, 100),
+    "The tick at 120 should be brighter than the one at 100");
+  ok(isPixelBrighterAtThan(120, 140),
+    "The tick at 120 should be brighter than the one at 140");
+  ok(isPixelBrighterAtThan(160, 140),
+    "The tick at 160 should be brighter than the one at 140");
+
+  ok(isPixelEquallyBright(20, 60),
+    "The tick at 20 should be equally bright to the one at 60");
+  ok(isPixelEquallyBright(100, 140),
+    "The tick at 100 should be equally bright to the one at 140");
+
+  ok(isPixelEquallyBright(40, 120),
+    "The tick at 40 should be equally bright to the one at 120");
+
+  ok(isPixelEquallyBright(0, 80),
+    "The tick at 80 should be equally bright to the one at 160");
+  ok(isPixelEquallyBright(80, 160),
+    "The tick at 80 should be equally bright to the one at 160");
+
+  function hasPixelAt(x) {
+    let i = (x | 0) * 4;
+    return data[i] && data[i + 1] && data[i + 2] && data[i + 3];
+  }
+
+  function isPixelBrighterAtThan(x1, x2) {
+    let i = (x1 | 0) * 4;
+    let j = (x2 | 0) * 4;
+    return data[i + 3] > data [j + 3];
+  }
+
+  function isPixelEquallyBright(x1, x2) {
+    let i = (x1 | 0) * 4;
+    let j = (x2 | 0) * 4;
+    return data[i + 3] == data [j + 3];
+  }
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_timing-division.js b/devtools/client/netmonitor/test/browser_net_timing-division.js
new file mode 100644
index 000000000..0114ba235
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_timing-division.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if timing intervals are divided againts seconds when appropriate.
+ */
+
+add_task(function* () {
+  let { tab, monitor } = yield initNetMonitor(CUSTOM_GET_URL);
+  info("Starting test... ");
+
+  let { $all, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+
+  let wait = waitForNetworkEvents(monitor, 2);
+  // Timeout needed for having enough divisions on the time scale.
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests(2, null, 3000);
+  });
+  yield wait;
+
+  let milDivs = $all(".requests-menu-timings-division[division-scale=millisecond]");
+  let secDivs = $all(".requests-menu-timings-division[division-scale=second]");
+  let minDivs = $all(".requests-menu-timings-division[division-scale=minute]");
+
+  info("Number of millisecond divisions: " + milDivs.length);
+  info("Number of second divisions: " + secDivs.length);
+  info("Number of minute divisions: " + minDivs.length);
+
+  for (let div of milDivs) {
+    info("Millisecond division: " + div.getAttribute("value"));
+  }
+  for (let div of secDivs) {
+    info("Second division: " + div.getAttribute("value"));
+  }
+  for (let div of minDivs) {
+    info("Minute division: " + div.getAttribute("value"));
+  }
+
+  is(RequestsMenu.itemCount, 2,
+    "There should be only two requests made.");
+
+  let firstRequest = RequestsMenu.getItemAtIndex(0);
+  let lastRequest = RequestsMenu.getItemAtIndex(1);
+
+  info("First request happened at: " +
+    firstRequest.attachment.responseHeaders.headers.find(e => e.name == "Date").value);
+  info("Last request happened at: " +
+    lastRequest.attachment.responseHeaders.headers.find(e => e.name == "Date").value);
+
+  ok(secDivs.length,
+    "There should be at least one division on the seconds time scale.");
+  ok(secDivs[0].getAttribute("value").match(/\d+\.\d{2}\s\w+/),
+    "The division on the seconds time scale looks legit.");
+
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/test/browser_net_truncate.js b/devtools/client/netmonitor/test/browser_net_truncate.js
new file mode 100644
index 000000000..bfb5c896d
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_truncate.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Verifies that truncated response bodies still have the correct reported size.
+ */
+
+function test() {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+  const { RESPONSE_BODY_LIMIT } = require("devtools/shared/webconsole/network-monitor");
+
+  const URL = EXAMPLE_URL + "sjs_truncate-test-server.sjs?limit=" + RESPONSE_BODY_LIMIT;
+
+  // Another slow test on Linux debug.
+  requestLongerTimeout(2);
+
+  initNetMonitor(URL).then(({ tab, monitor }) => {
+    info("Starting test... ");
+
+    let { NetMonitorView } = monitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+
+    RequestsMenu.lazyUpdate = false;
+
+    waitForNetworkEvents(monitor, 1)
+      .then(() => teardown(monitor))
+      .then(finish);
+
+    monitor.panelWin.once(monitor.panelWin.EVENTS.RECEIVED_RESPONSE_CONTENT, () => {
+      let requestItem = RequestsMenu.getItemAtIndex(0);
+
+      verifyRequestItemTarget(RequestsMenu, requestItem, "GET", URL, {
+        type: "plain",
+        fullMimeType: "text/plain; charset=utf-8",
+        transferred: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2),
+        size: L10N.getFormatStrWithNumbers("networkMenu.sizeMB", 2),
+      });
+    });
+
+    tab.linkedBrowser.reload();
+  });
+}
diff --git a/devtools/client/netmonitor/test/dropmarker.svg b/devtools/client/netmonitor/test/dropmarker.svg
new file mode 100644
index 000000000..3e2987682
--- /dev/null
+++ b/devtools/client/netmonitor/test/dropmarker.svg
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4">
+  <polygon points="0,0 4,4 8,0" fill="#b6babf"/>
+</svg>
diff --git a/devtools/client/netmonitor/test/head.js b/devtools/client/netmonitor/test/head.js
new file mode 100644
index 000000000..d733cc1d4
--- /dev/null
+++ b/devtools/client/netmonitor/test/head.js
@@ -0,0 +1,518 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+/* import-globals-from ../../framework/test/shared-head.js */
+
+// shared-head.js handles imports, constants, and utility functions
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
+  this);
+
+var NetworkHelper = require("devtools/shared/webconsole/network-helper");
+var { Toolbox } = require("devtools/client/framework/toolbox");
+
+const EXAMPLE_URL = "http://example.com/browser/devtools/client/netmonitor/test/";
+const HTTPS_EXAMPLE_URL = "https://example.com/browser/devtools/client/netmonitor/test/";
+
+const API_CALLS_URL = EXAMPLE_URL + "html_api-calls-test-page.html";
+const SIMPLE_URL = EXAMPLE_URL + "html_simple-test-page.html";
+const NAVIGATE_URL = EXAMPLE_URL + "html_navigate-test-page.html";
+const CONTENT_TYPE_URL = EXAMPLE_URL + "html_content-type-test-page.html";
+const CONTENT_TYPE_WITHOUT_CACHE_URL = EXAMPLE_URL + "html_content-type-without-cache-test-page.html";
+const CONTENT_TYPE_WITHOUT_CACHE_REQUESTS = 8;
+const CYRILLIC_URL = EXAMPLE_URL + "html_cyrillic-test-page.html";
+const STATUS_CODES_URL = EXAMPLE_URL + "html_status-codes-test-page.html";
+const POST_DATA_URL = EXAMPLE_URL + "html_post-data-test-page.html";
+const POST_JSON_URL = EXAMPLE_URL + "html_post-json-test-page.html";
+const POST_RAW_URL = EXAMPLE_URL + "html_post-raw-test-page.html";
+const POST_RAW_WITH_HEADERS_URL = EXAMPLE_URL + "html_post-raw-with-headers-test-page.html";
+const PARAMS_URL = EXAMPLE_URL + "html_params-test-page.html";
+const JSONP_URL = EXAMPLE_URL + "html_jsonp-test-page.html";
+const JSON_LONG_URL = EXAMPLE_URL + "html_json-long-test-page.html";
+const JSON_MALFORMED_URL = EXAMPLE_URL + "html_json-malformed-test-page.html";
+const JSON_CUSTOM_MIME_URL = EXAMPLE_URL + "html_json-custom-mime-test-page.html";
+const JSON_TEXT_MIME_URL = EXAMPLE_URL + "html_json-text-mime-test-page.html";
+const SORTING_URL = EXAMPLE_URL + "html_sorting-test-page.html";
+const FILTERING_URL = EXAMPLE_URL + "html_filter-test-page.html";
+const INFINITE_GET_URL = EXAMPLE_URL + "html_infinite-get-page.html";
+const CUSTOM_GET_URL = EXAMPLE_URL + "html_custom-get-page.html";
+const SINGLE_GET_URL = EXAMPLE_URL + "html_single-get-page.html";
+const STATISTICS_URL = EXAMPLE_URL + "html_statistics-test-page.html";
+const CURL_URL = EXAMPLE_URL + "html_copy-as-curl.html";
+const CURL_UTILS_URL = EXAMPLE_URL + "html_curl-utils.html";
+const SEND_BEACON_URL = EXAMPLE_URL + "html_send-beacon.html";
+const CORS_URL = EXAMPLE_URL + "html_cors-test-page.html";
+
+const SIMPLE_SJS = EXAMPLE_URL + "sjs_simple-test-server.sjs";
+const CONTENT_TYPE_SJS = EXAMPLE_URL + "sjs_content-type-test-server.sjs";
+const HTTPS_CONTENT_TYPE_SJS = HTTPS_EXAMPLE_URL + "sjs_content-type-test-server.sjs";
+const STATUS_CODES_SJS = EXAMPLE_URL + "sjs_status-codes-test-server.sjs";
+const SORTING_SJS = EXAMPLE_URL + "sjs_sorting-test-server.sjs";
+const HTTPS_REDIRECT_SJS = EXAMPLE_URL + "sjs_https-redirect-test-server.sjs";
+const CORS_SJS_PATH = "/browser/devtools/client/netmonitor/test/sjs_cors-test-server.sjs";
+const HSTS_SJS = EXAMPLE_URL + "sjs_hsts-test-server.sjs";
+
+const HSTS_BASE_URL = EXAMPLE_URL;
+const HSTS_PAGE_URL = CUSTOM_GET_URL;
+
+const TEST_IMAGE = EXAMPLE_URL + "test-image.png";
+const TEST_IMAGE_DATA_URI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==";
+
+const FRAME_SCRIPT_UTILS_URL = "chrome://devtools/content/shared/frame-script-utils.js";
+
+// All tests are asynchronous.
+waitForExplicitFinish();
+
+const gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+// To enable logging for try runs, just set the pref to true.
+Services.prefs.setBoolPref("devtools.debugger.log", false);
+
+// Uncomment this pref to dump all devtools emitted events to the console.
+// Services.prefs.setBoolPref("devtools.dump.emit", true);
+
+// Always reset some prefs to their original values after the test finishes.
+const gDefaultFilters = Services.prefs.getCharPref("devtools.netmonitor.filters");
+
+registerCleanupFunction(() => {
+  info("finish() was called, cleaning up...");
+
+  Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
+  Services.prefs.setCharPref("devtools.netmonitor.filters", gDefaultFilters);
+  Services.prefs.clearUserPref("devtools.cache.disabled");
+});
+
+function waitForNavigation(aTarget) {
+  let deferred = promise.defer();
+  aTarget.once("will-navigate", () => {
+    aTarget.once("navigate", () => {
+      deferred.resolve();
+    });
+  });
+  return deferred.promise;
+}
+
+function reconfigureTab(aTarget, aOptions) {
+  let deferred = promise.defer();
+  aTarget.activeTab.reconfigure(aOptions, deferred.resolve);
+  return deferred.promise;
+}
+
+function toggleCache(aTarget, aDisabled) {
+  let options = { cacheDisabled: aDisabled, performReload: true };
+  let navigationFinished = waitForNavigation(aTarget);
+
+  // Disable the cache for any toolbox that it is opened from this point on.
+  Services.prefs.setBoolPref("devtools.cache.disabled", aDisabled);
+
+  return reconfigureTab(aTarget, options).then(() => navigationFinished);
+}
+
+function initNetMonitor(aUrl, aWindow, aEnableCache) {
+  info("Initializing a network monitor pane.");
+
+  return Task.spawn(function* () {
+    let tab = yield addTab(aUrl);
+    info("Net tab added successfully: " + aUrl);
+
+    let target = TargetFactory.forTab(tab);
+
+    yield target.makeRemote();
+    info("Target remoted.");
+
+    if (!aEnableCache) {
+      info("Disabling cache and reloading page.");
+      yield toggleCache(target, true);
+      info("Cache disabled when the current and all future toolboxes are open.");
+      // Remove any requests generated by the reload while toggling the cache to
+      // avoid interfering with the test.
+      isnot([...target.activeConsole.getNetworkEvents()].length, 0,
+         "Request to reconfigure the tab was recorded.");
+      target.activeConsole.clearNetworkRequests();
+    }
+
+    let toolbox = yield gDevTools.showToolbox(target, "netmonitor");
+    info("Network monitor pane shown successfully.");
+
+    let monitor = toolbox.getCurrentPanel();
+    return {tab, monitor};
+  });
+}
+
+function restartNetMonitor(monitor, newUrl) {
+  info("Restarting the specified network monitor.");
+
+  return Task.spawn(function* () {
+    let tab = monitor.target.tab;
+    let url = newUrl || tab.linkedBrowser.currentURI.spec;
+
+    let onDestroyed = monitor.once("destroyed");
+    yield removeTab(tab);
+    yield onDestroyed;
+
+    return initNetMonitor(url);
+  });
+}
+
+function teardown(monitor) {
+  info("Destroying the specified network monitor.");
+
+  return Task.spawn(function* () {
+    let tab = monitor.target.tab;
+
+    let onDestroyed = monitor.once("destroyed");
+    yield removeTab(tab);
+    yield onDestroyed;
+  });
+}
+
+function waitForNetworkEvents(aMonitor, aGetRequests, aPostRequests = 0) {
+  let deferred = promise.defer();
+
+  let panel = aMonitor.panelWin;
+  let events = panel.EVENTS;
+
+  let progress = {};
+  let genericEvents = 0;
+  let postEvents = 0;
+
+  let awaitedEventsToListeners = [
+    ["UPDATING_REQUEST_HEADERS", onGenericEvent],
+    ["RECEIVED_REQUEST_HEADERS", onGenericEvent],
+    ["UPDATING_REQUEST_COOKIES", onGenericEvent],
+    ["RECEIVED_REQUEST_COOKIES", onGenericEvent],
+    ["UPDATING_REQUEST_POST_DATA", onPostEvent],
+    ["RECEIVED_REQUEST_POST_DATA", onPostEvent],
+    ["UPDATING_RESPONSE_HEADERS", onGenericEvent],
+    ["RECEIVED_RESPONSE_HEADERS", onGenericEvent],
+    ["UPDATING_RESPONSE_COOKIES", onGenericEvent],
+    ["RECEIVED_RESPONSE_COOKIES", onGenericEvent],
+    ["STARTED_RECEIVING_RESPONSE", onGenericEvent],
+    ["UPDATING_RESPONSE_CONTENT", onGenericEvent],
+    ["RECEIVED_RESPONSE_CONTENT", onGenericEvent],
+    ["UPDATING_EVENT_TIMINGS", onGenericEvent],
+    ["RECEIVED_EVENT_TIMINGS", onGenericEvent]
+  ];
+
+  function initProgressForURL(url) {
+    if (progress[url]) return;
+    progress[url] = {};
+    awaitedEventsToListeners.forEach(([e]) => progress[url][e] = 0);
+  }
+
+  function updateProgressForURL(url, event) {
+    initProgressForURL(url);
+    progress[url][Object.keys(events).find(e => events[e] == event)] = 1;
+  }
+
+  function onGenericEvent(event, actor) {
+    genericEvents++;
+    maybeResolve(event, actor);
+  }
+
+  function onPostEvent(event, actor) {
+    postEvents++;
+    maybeResolve(event, actor);
+  }
+
+  function maybeResolve(event, actor) {
+    info("> Network events progress: " +
+      genericEvents + "/" + ((aGetRequests + aPostRequests) * 13) + ", " +
+      postEvents + "/" + (aPostRequests * 2) + ", " +
+      "got " + event + " for " + actor);
+
+    let networkInfo =
+      panel.NetMonitorController.webConsoleClient.getNetworkRequest(actor);
+    let url = networkInfo.request.url;
+    updateProgressForURL(url, event);
+
+    // Uncomment this to get a detailed progress logging (when debugging a test)
+    // info("> Current state: " + JSON.stringify(progress, null, 2));
+
+    // There are 15 updates which need to be fired for a request to be
+    // considered finished. The "requestPostData" packet isn't fired for
+    // non-POST requests.
+    if (genericEvents >= (aGetRequests + aPostRequests) * 13 &&
+        postEvents >= aPostRequests * 2) {
+
+      awaitedEventsToListeners.forEach(([e, l]) => panel.off(events[e], l));
+      executeSoon(deferred.resolve);
+    }
+  }
+
+  awaitedEventsToListeners.forEach(([e, l]) => panel.on(events[e], l));
+  return deferred.promise;
+}
+
+function verifyRequestItemTarget(aRequestItem, aMethod, aUrl, aData = {}) {
+  info("> Verifying: " + aMethod + " " + aUrl + " " + aData.toSource());
+  // This bloats log sizes significantly in automation (bug 992485)
+  // info("> Request: " + aRequestItem.attachment.toSource());
+
+  let requestsMenu = aRequestItem.ownerView;
+  let widgetIndex = requestsMenu.indexOfItem(aRequestItem);
+  let visibleIndex = requestsMenu.visibleItems.indexOf(aRequestItem);
+
+  info("Widget index of item: " + widgetIndex);
+  info("Visible index of item: " + visibleIndex);
+
+  let { fuzzyUrl, status, statusText, cause, type, fullMimeType,
+        transferred, size, time, displayedStatus } = aData;
+  let { attachment, target } = aRequestItem;
+
+  let uri = Services.io.newURI(aUrl, null, null).QueryInterface(Ci.nsIURL);
+  let unicodeUrl = NetworkHelper.convertToUnicode(unescape(aUrl));
+  let name = NetworkHelper.convertToUnicode(unescape(uri.fileName || uri.filePath || "/"));
+  let query = NetworkHelper.convertToUnicode(unescape(uri.query));
+  let hostPort = uri.hostPort;
+  let remoteAddress = attachment.remoteAddress;
+
+  if (fuzzyUrl) {
+    ok(attachment.method.startsWith(aMethod), "The attached method is correct.");
+    ok(attachment.url.startsWith(aUrl), "The attached url is correct.");
+  } else {
+    is(attachment.method, aMethod, "The attached method is correct.");
+    is(attachment.url, aUrl, "The attached url is correct.");
+  }
+
+  is(target.querySelector(".requests-menu-method").getAttribute("value"),
+    aMethod, "The displayed method is correct.");
+
+  if (fuzzyUrl) {
+    ok(target.querySelector(".requests-menu-file").getAttribute("value").startsWith(
+      name + (query ? "?" + query : "")), "The displayed file is correct.");
+    ok(target.querySelector(".requests-menu-file").getAttribute("tooltiptext").startsWith(unicodeUrl),
+      "The tooltip file is correct.");
+  } else {
+    is(target.querySelector(".requests-menu-file").getAttribute("value"),
+      name + (query ? "?" + query : ""), "The displayed file is correct.");
+    is(target.querySelector(".requests-menu-file").getAttribute("tooltiptext"),
+      unicodeUrl, "The tooltip file is correct.");
+  }
+
+  is(target.querySelector(".requests-menu-domain").getAttribute("value"),
+    hostPort, "The displayed domain is correct.");
+
+  let domainTooltip = hostPort + (remoteAddress ? " (" + remoteAddress + ")" : "");
+  is(target.querySelector(".requests-menu-domain").getAttribute("tooltiptext"),
+    domainTooltip, "The tooltip domain is correct.");
+
+  if (status !== undefined) {
+    let value = target.querySelector(".requests-menu-status-icon").getAttribute("code");
+    let codeValue = target.querySelector(".requests-menu-status-code").getAttribute("value");
+    let tooltip = target.querySelector(".requests-menu-status").getAttribute("tooltiptext");
+    info("Displayed status: " + value);
+    info("Displayed code: " + codeValue);
+    info("Tooltip status: " + tooltip);
+    is(value, displayedStatus ? displayedStatus : status, "The displayed status is correct.");
+    is(codeValue, status, "The displayed status code is correct.");
+    is(tooltip, status + " " + statusText, "The tooltip status is correct.");
+  }
+  if (cause !== undefined) {
+    let causeLabel = target.querySelector(".requests-menu-cause-label");
+    let value = causeLabel.getAttribute("value");
+    let tooltip = causeLabel.getAttribute("tooltiptext");
+    info("Displayed cause: " + value);
+    info("Tooltip cause: " + tooltip);
+    is(value, cause.type, "The displayed cause is correct.");
+    is(tooltip, cause.loadingDocumentUri, "The tooltip cause is correct.")
+  }
+  if (type !== undefined) {
+    let value = target.querySelector(".requests-menu-type").getAttribute("value");
+    let tooltip = target.querySelector(".requests-menu-type").getAttribute("tooltiptext");
+    info("Displayed type: " + value);
+    info("Tooltip type: " + tooltip);
+    is(value, type, "The displayed type is correct.");
+    is(tooltip, fullMimeType, "The tooltip type is correct.");
+  }
+  if (transferred !== undefined) {
+    let value = target.querySelector(".requests-menu-transferred").getAttribute("value");
+    let tooltip = target.querySelector(".requests-menu-transferred").getAttribute("tooltiptext");
+    info("Displayed transferred size: " + value);
+    info("Tooltip transferred size: " + tooltip);
+    is(value, transferred, "The displayed transferred size is correct.");
+    is(tooltip, transferred, "The tooltip transferred size is correct.");
+  }
+  if (size !== undefined) {
+    let value = target.querySelector(".requests-menu-size").getAttribute("value");
+    let tooltip = target.querySelector(".requests-menu-size").getAttribute("tooltiptext");
+    info("Displayed size: " + value);
+    info("Tooltip size: " + tooltip);
+    is(value, size, "The displayed size is correct.");
+    is(tooltip, size, "The tooltip size is correct.");
+  }
+  if (time !== undefined) {
+    let value = target.querySelector(".requests-menu-timings-total").getAttribute("value");
+    let tooltip = target.querySelector(".requests-menu-timings-total").getAttribute("tooltiptext");
+    info("Displayed time: " + value);
+    info("Tooltip time: " + tooltip);
+    ok(~~(value.match(/[0-9]+/)) >= 0, "The displayed time is correct.");
+    ok(~~(tooltip.match(/[0-9]+/)) >= 0, "The tooltip time is correct.");
+  }
+
+  if (visibleIndex != -1) {
+    if (visibleIndex % 2 == 0) {
+      ok(aRequestItem.target.hasAttribute("even"),
+        aRequestItem.value + " should have 'even' attribute.");
+      ok(!aRequestItem.target.hasAttribute("odd"),
+        aRequestItem.value + " shouldn't have 'odd' attribute.");
+    } else {
+      ok(!aRequestItem.target.hasAttribute("even"),
+        aRequestItem.value + " shouldn't have 'even' attribute.");
+      ok(aRequestItem.target.hasAttribute("odd"),
+        aRequestItem.value + " should have 'odd' attribute.");
+    }
+  }
+}
+
+/**
+ * Helper function for waiting for an event to fire before resolving a promise.
+ * Example: waitFor(aMonitor.panelWin, aMonitor.panelWin.EVENTS.TAB_UPDATED);
+ *
+ * @param object subject
+ *        The event emitter object that is being listened to.
+ * @param string eventName
+ *        The name of the event to listen to.
+ * @return object
+ *        Returns a promise that resolves upon firing of the event.
+ */
+function waitFor(subject, eventName) {
+  let deferred = promise.defer();
+  subject.once(eventName, deferred.resolve);
+  return deferred.promise;
+}
+
+/**
+ * Tests if a button for a filter of given type is the only one checked.
+ *
+ * @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-menu-filter-" + filterType + "-button");
+  ok(target, `Filter button '${filterType}' was found`);
+  let buttons = [...doc.querySelectorAll(".menu-filter-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);
+}
+
+/**
+ * Tests if filter buttons have 'checked' attributes set correctly.
+ *
+ * @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(aMonitor, aIsChecked) {
+  let doc = aMonitor.panelWin.document;
+  let buttons = doc.querySelectorAll(".menu-filter-button");
+  for (let i = 0; i < aIsChecked.length; i++) {
+    let button = buttons[i];
+    if (aIsChecked[i]) {
+      is(button.classList.contains("checked"), true,
+        "The " + button.id + " button should have a 'checked' class.");
+    } else {
+      is(button.classList.contains("checked"), false,
+        "The " + button.id + " button should not have a 'checked' class.");
+    }
+  }
+}
+
+/**
+ * Loads shared/frame-script-utils.js in the specified tab.
+ *
+ * @param tab
+ *        Optional tab to load the frame script in. Defaults to the current tab.
+ */
+function loadCommonFrameScript(tab) {
+  let browser = tab ? tab.linkedBrowser : gBrowser.selectedBrowser;
+
+  browser.messageManager.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
+}
+
+/**
+ * Perform the specified requests in the context of the page content.
+ *
+ * @param Array requests
+ *        An array of objects specifying the requests to perform. See
+ *        shared/frame-script-utils.js for more information.
+ *
+ * @return A promise that resolves once the requests complete.
+ */
+function performRequestsInContent(requests) {
+  info("Performing requests in the context of the content.");
+  return executeInContent("devtools:test:xhr", requests);
+}
+
+/**
+ * Send an async message to the frame script (chrome -> content) and wait for a
+ * response message with the same name (content -> chrome).
+ *
+ * @param String name
+ *        The message name. Should be one of the messages defined
+ *        shared/frame-script-utils.js
+ * @param Object data
+ *        Optional data to send along
+ * @param Object objects
+ *        Optional CPOW objects to send along
+ * @param Boolean expectResponse
+ *        If set to false, don't wait for a response with the same name from the
+ *        content script. Defaults to true.
+ *
+ * @return Promise
+ *         Resolves to the response data if a response is expected, immediately
+ *         resolves otherwise
+ */
+function executeInContent(name, data = {}, objects = {}, expectResponse = true) {
+  let mm = gBrowser.selectedBrowser.messageManager;
+
+  mm.sendAsyncMessage(name, data, objects);
+  if (expectResponse) {
+    return waitForContentMessage(name);
+  } else {
+    return promise.resolve();
+  }
+}
+
+/**
+ * Wait for a content -> chrome message on the message manager (the window
+ * messagemanager is used).
+ * @param {String} name The message name
+ * @return {Promise} A promise that resolves to the response data when the
+ * message has been received
+ */
+function waitForContentMessage(name) {
+  let mm = gBrowser.selectedBrowser.messageManager;
+
+  let def = promise.defer();
+  mm.addMessageListener(name, function onMessage(msg) {
+    mm.removeMessageListener(name, onMessage);
+    def.resolve(msg);
+  });
+  return def.promise;
+}
+
+/**
+ * Open the requestMenu menu and return all of it's items in a flat array
+ * @param {netmonitorPanel} netmonitor
+ * @param {Event} event mouse event with screenX and screenX coordinates
+ * @return An array of MenuItems
+ */
+function openContextMenuAndGetAllItems(netmonitor, event) {
+  let menu = netmonitor.RequestsMenu.contextMenu.open(event);
+
+  // Flatten all menu items into a single array to make searching through it easier
+  let allItems = [].concat.apply([], menu.items.map(function addItem(item) {
+    if (item.submenu) {
+      return addItem(item.submenu.items);
+    }
+    return item;
+  }));
+
+  return allItems;
+}
diff --git a/devtools/client/netmonitor/test/html_api-calls-test-page.html b/devtools/client/netmonitor/test/html_api-calls-test-page.html
new file mode 100644
index 000000000..e31872319
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_api-calls-test-page.html
@@ -0,0 +1,46 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>API calls request test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send();
+      }
+
+      function performRequests() {
+        get("/api/fileName.xml", function() {
+          get("/api/file%E2%98%A2.xml", function() {
+            get("/api/ascii/get/", function() {
+              get("/api/unicode/%E2%98%A2/", function() {
+                get("/api/search/?q=search%E2%98%A2", function() {
+                  // Done.
+                });
+              });
+            });
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_brotli-test-page.html b/devtools/client/netmonitor/test/html_brotli-test-page.html
new file mode 100644
index 000000000..d5afae4b3
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_brotli-test-page.html
@@ -0,0 +1,38 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Brotli test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=br", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_cause-test-page.html b/devtools/client/netmonitor/test/html_cause-test-page.html
new file mode 100644
index 000000000..d2b86682b
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_cause-test-page.html
@@ -0,0 +1,48 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+    <link rel="stylesheet" type="text/css" href="stylesheet_request" />
+  </head>
+
+  <body>
+    <p>Request cause test</p>
+    <img src="img_request" />
+    <script type="text/javascript">
+      function performXhrRequest() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "xhr_request", true);
+        xhr.send();
+      }
+
+      function performFetchRequest() {
+        fetch("fetch_request");
+      }
+
+      function performBeaconRequest() {
+        navigator.sendBeacon("beacon_request");
+      }
+
+      performXhrRequest();
+      performFetchRequest();
+
+      // Perform some requests with async stacks
+      Promise.resolve().then(function performPromiseFetchRequest() {
+        fetch("promise_fetch_request");
+        setTimeout(function performTimeoutFetchRequest() {
+          fetch("timeout_fetch_request");
+
+          // Finally, send a beacon request
+          performBeaconRequest();
+        }, 0);
+      });
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/netmonitor/test/html_content-type-test-page.html b/devtools/client/netmonitor/test/html_content-type-test-page.html
new file mode 100644
index 000000000..23ecf1f44
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_content-type-test-page.html
@@ -0,0 +1,48 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Content type test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=xml", function() {
+          get("sjs_content-type-test-server.sjs?fmt=css", function() {
+            get("sjs_content-type-test-server.sjs?fmt=js", function() {
+              get("sjs_content-type-test-server.sjs?fmt=json", function() {
+                get("sjs_content-type-test-server.sjs?fmt=bogus", function() {
+                  get("test-image.png", function() {
+                    // Done.
+                  });
+                });
+              });
+            });
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_content-type-without-cache-test-page.html b/devtools/client/netmonitor/test/html_content-type-without-cache-test-page.html
new file mode 100644
index 000000000..f27e6e105
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_content-type-without-cache-test-page.html
@@ -0,0 +1,52 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Content type test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=xml", function() {
+          get("sjs_content-type-test-server.sjs?fmt=css", function() {
+            get("sjs_content-type-test-server.sjs?fmt=js", function() {
+              get("sjs_content-type-test-server.sjs?fmt=json", function() {
+                get("sjs_content-type-test-server.sjs?fmt=bogus", function() {
+                  get("test-image.png?v=" + Math.random(), function() {
+                    get("sjs_content-type-test-server.sjs?fmt=gzip", function() {
+                      get("sjs_content-type-test-server.sjs?fmt=br", function() {
+                        // Done.
+                      });
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_copy-as-curl.html b/devtools/client/netmonitor/test/html_copy-as-curl.html
new file mode 100644
index 000000000..3ddcfbced
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_copy-as-curl.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Performing a GET request</p>
+
+    <script type="text/javascript">
+      function performRequest(aUrl) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aUrl, true);
+        xhr.setRequestHeader("Accept-Language", window.navigator.language);
+        xhr.setRequestHeader("X-Custom-Header-1", "Custom value");
+        xhr.setRequestHeader("X-Custom-Header-2", "8.8.8.8");
+        xhr.setRequestHeader("X-Custom-Header-3", "Mon, 3 Mar 2014 11:11:11 GMT");
+        xhr.send(null);
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_cors-test-page.html b/devtools/client/netmonitor/test/html_cors-test-page.html
new file mode 100644
index 000000000..179b2ed00
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_cors-test-page.html
@@ -0,0 +1,31 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>POST with CORS test page</p>
+
+    <script type="text/javascript">
+      function post(url, contentType, postData) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", url, true);
+        xhr.setRequestHeader("Content-Type", contentType);
+        xhr.send(postData);
+      }
+
+      function performRequests(url, contentType, postData) {
+        post(url, contentType, postData);
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_curl-utils.html b/devtools/client/netmonitor/test/html_curl-utils.html
new file mode 100644
index 000000000..8ff7ecdf0
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_curl-utils.html
@@ -0,0 +1,102 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Performing requests</p>
+
+    <p>
+      <canvas width="100" height="100"></canvas>
+    </p>
+
+    <hr/>
+
+    <form method="post" action="#" enctype="multipart/form-data" target="target" id="post-form">
+      <input type="text" name="param1" value="value1"/>
+      <input type="text" name="param2" value="value2"/>
+      <input type="text" name="param3" value="value3"/>
+      <input type="submit"/>
+    </form>
+    <iframe name="target"></iframe>
+
+    <script type="text/javascript">
+
+      function ajaxGet(aUrl, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aUrl + "?param1=value1&param2=value2&param3=value3", true);
+        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+        xhr.onload = function() {
+          aCallback();
+        };
+        xhr.send();
+      }
+
+      function ajaxPost(aUrl, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aUrl, true);
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+        xhr.onload = function() {
+          aCallback();
+        };
+        var params = "param1=value1&param2=value2&param3=value3";
+        xhr.send(params);
+      }
+
+      function ajaxMultipart(aUrl, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aUrl, true);
+        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+        xhr.onload = function() {
+          aCallback();
+        };
+
+        getCanvasElem().toBlob((blob) => {
+          var formData = new FormData();
+          formData.append("param1", "value1");
+          formData.append("file", blob, "filename.png");
+          xhr.send(formData);
+        });
+      }
+
+      function submitForm() {
+        var form = document.querySelector("#post-form");
+        form.submit();
+      }
+
+      function getCanvasElem() {
+        return document.querySelector("canvas");
+      }
+
+      function initCanvas() {
+        var canvas = getCanvasElem();
+        var ctx = canvas.getContext("2d");
+        ctx.fillRect(0,0,100,100);
+        ctx.clearRect(20,20,60,60);
+        ctx.strokeRect(25,25,50,50);
+      }
+
+      function performRequests(aUrl) {
+        ajaxGet(aUrl, () => {
+          ajaxPost(aUrl, () => {
+            ajaxMultipart(aUrl, () => {
+              submitForm();
+            });
+          });
+        });
+      }
+
+      initCanvas();
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_custom-get-page.html b/devtools/client/netmonitor/test/html_custom-get-page.html
new file mode 100644
index 000000000..19e40f93a
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_custom-get-page.html
@@ -0,0 +1,44 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Performing a custom number of GETs</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      // Use a count parameter to defeat caching.
+      var count = 0;
+
+      function performRequests(aTotal, aUrl, aTimeout = 0) {
+        if (!aTotal) {
+          return;
+        }
+        get(aUrl || "request_" + (count++), function() {
+          setTimeout(performRequests.bind(this, --aTotal, aUrl, aTimeout), aTimeout);
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_cyrillic-test-page.html b/devtools/client/netmonitor/test/html_cyrillic-test-page.html
new file mode 100644
index 000000000..8735ac674
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_cyrillic-test-page.html
@@ -0,0 +1,39 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Cyrillic type test</p>
+    <p>Братан, ты вообще качаешься?</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=txt", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_filter-test-page.html b/devtools/client/netmonitor/test/html_filter-test-page.html
new file mode 100644
index 000000000..eb5d02ed9
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_filter-test-page.html
@@ -0,0 +1,60 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Filtering test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        // Use a random parameter to defeat caching.
+        xhr.open("GET", aAddress + "&" + Math.random(), true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests(aOptions) {
+        var options = JSON.parse(aOptions);
+        get("sjs_content-type-test-server.sjs?fmt=html&res=" + options.htmlContent, function() {
+          get("sjs_content-type-test-server.sjs?fmt=css", function() {
+            get("sjs_content-type-test-server.sjs?fmt=js", function() {
+              if (!options.getMedia) {
+                return;
+              }
+              get("sjs_content-type-test-server.sjs?fmt=font", function() {
+                get("sjs_content-type-test-server.sjs?fmt=image", function() {
+                  get("sjs_content-type-test-server.sjs?fmt=audio", function() {
+                    get("sjs_content-type-test-server.sjs?fmt=video", function() {
+                      if (!options.getFlash) {
+                        return;
+                      }
+                      get("sjs_content-type-test-server.sjs?fmt=flash", function() {
+                        // Done.
+                      });
+                    });
+                  });
+                });
+              });
+            });
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_frame-subdocument.html b/devtools/client/netmonitor/test/html_frame-subdocument.html
new file mode 100644
index 000000000..9e800582c
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_frame-subdocument.html
@@ -0,0 +1,48 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+    <link rel="stylesheet" type="text/css" href="stylesheet_request" />
+  </head>
+
+  <body>
+    <p>Request frame test</p>
+    <img src="img_request" />
+    <script type="text/javascript">
+      function performXhrRequest() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "xhr_request", true);
+        xhr.send();
+      }
+
+      function performFetchRequest() {
+        fetch("fetch_request");
+      }
+
+      function performBeaconRequest() {
+        navigator.sendBeacon("beacon_request");
+      }
+
+      performXhrRequest();
+      performFetchRequest();
+
+      // Perform some requests with async stacks
+      Promise.resolve().then(function performPromiseFetchRequest() {
+        fetch("promise_fetch_request");
+        setTimeout(function performTimeoutFetchRequest() {
+          fetch("timeout_fetch_request");
+
+          // Finally, send a beacon request
+          performBeaconRequest();
+        }, 0);
+      });
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/netmonitor/test/html_frame-test-page.html b/devtools/client/netmonitor/test/html_frame-test-page.html
new file mode 100644
index 000000000..66f6620af
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_frame-test-page.html
@@ -0,0 +1,49 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+    <link rel="stylesheet" type="text/css" href="stylesheet_request" />
+  </head>
+
+  <body>
+    <p>Request frame test</p>
+    <img src="img_request" />
+    <iframe src="html_frame-subdocument.html"></iframe>
+    <script type="text/javascript">
+      function performXhrRequest() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "xhr_request", true);
+        xhr.send();
+      }
+
+      function performFetchRequest() {
+        fetch("fetch_request");
+      }
+
+      function performBeaconRequest() {
+        navigator.sendBeacon("beacon_request");
+      }
+
+      performXhrRequest();
+      performFetchRequest();
+
+      // Perform some requests with async stacks
+      Promise.resolve().then(function performPromiseFetchRequest() {
+        fetch("promise_fetch_request");
+        setTimeout(function performTimeoutFetchRequest() {
+          fetch("timeout_fetch_request");
+
+          // Finally, send a beacon request
+          performBeaconRequest();
+        }, 0);
+      });
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/netmonitor/test/html_image-tooltip-test-page.html b/devtools/client/netmonitor/test/html_image-tooltip-test-page.html
new file mode 100644
index 000000000..c39db909e
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_image-tooltip-test-page.html
@@ -0,0 +1,26 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>tooltip test</p>
+
+    <script type="text/javascript">
+      function performRequests() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "test-image.png?v=" + Math.random(), true);
+        xhr.send(null);
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_infinite-get-page.html b/devtools/client/netmonitor/test/html_infinite-get-page.html
new file mode 100644
index 000000000..f51b718ad
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_infinite-get-page.html
@@ -0,0 +1,41 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Infinite GETs</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      // Use a count parameter to defeat caching.
+      var count = 0;
+
+      (function performRequests() {
+        get("request_" + (count++), function() {
+          setTimeout(performRequests, 50);
+        });
+      })();
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_json-custom-mime-test-page.html b/devtools/client/netmonitor/test/html_json-custom-mime-test-page.html
new file mode 100644
index 000000000..646fc60ea
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_json-custom-mime-test-page.html
@@ -0,0 +1,38 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>JSONP test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=json-custom-mime", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_json-long-test-page.html b/devtools/client/netmonitor/test/html_json-long-test-page.html
new file mode 100644
index 000000000..b538b4c27
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_json-long-test-page.html
@@ -0,0 +1,38 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>JSON long string test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=json-long", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_json-malformed-test-page.html b/devtools/client/netmonitor/test/html_json-malformed-test-page.html
new file mode 100644
index 000000000..0c8627ab5
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_json-malformed-test-page.html
@@ -0,0 +1,38 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>JSON malformed test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=json-malformed", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_json-text-mime-test-page.html b/devtools/client/netmonitor/test/html_json-text-mime-test-page.html
new file mode 100644
index 000000000..2c64e2531
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_json-text-mime-test-page.html
@@ -0,0 +1,38 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>JSON text test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=json-text-mime", function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_jsonp-test-page.html b/devtools/client/netmonitor/test/html_jsonp-test-page.html
new file mode 100644
index 000000000..78c0da08b
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_jsonp-test-page.html
@@ -0,0 +1,40 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>JSONP test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=jsonp&jsonp=$_0123Fun", function() {
+          get("sjs_content-type-test-server.sjs?fmt=jsonp2&jsonp=$_4567Sad", function() {
+            // Done.
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_navigate-test-page.html b/devtools/client/netmonitor/test/html_navigate-test-page.html
new file mode 100644
index 000000000..23f00f3df
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_navigate-test-page.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Navigation test</p>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_params-test-page.html b/devtools/client/netmonitor/test/html_params-test-page.html
new file mode 100644
index 000000000..3f30e3d76
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_params-test-page.html
@@ -0,0 +1,67 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Request params type test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aQuery) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress + aQuery, true);
+        xhr.send();
+      }
+
+      function post(aAddress, aQuery, aContentType, aPostBody) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress + aQuery, true);
+        xhr.setRequestHeader("content-type", aContentType);
+        xhr.send(aPostBody);
+      }
+
+      function performRequests() {
+        var urlencoded = "application/x-www-form-urlencoded";
+
+        setTimeout(function() {
+          post("baz", "?a", urlencoded, '{ "foo": "bar" }');
+
+          setTimeout(function() {
+            post("baz", "?a=b", urlencoded, '{ "foo": "bar" }');
+
+            setTimeout(function() {
+              post("baz", "?a=b", urlencoded, '?foo=bar');
+
+              setTimeout(function() {
+                post("baz", "?a", undefined, '{ "foo": "bar" }');
+
+                setTimeout(function() {
+                  post("baz", "?a=b", undefined, '{ "foo": "bar" }');
+
+                  setTimeout(function() {
+                    post("baz", "?a=b", undefined, '?foo=bar');
+
+                    setTimeout(function() {
+                      get("baz", "");
+
+                      // Done.
+                    }, 10);
+                  }, 10);
+                }, 10);
+              }, 10);
+            }, 10);
+          }, 10);
+        }, 10);
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_post-data-test-page.html b/devtools/client/netmonitor/test/html_post-data-test-page.html
new file mode 100644
index 000000000..8dedc7b60
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_post-data-test-page.html
@@ -0,0 +1,77 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+    <style>
+      input {
+        display: block;
+        margin: 12px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>POST data test</p>
+    <form enctype="multipart/form-data" method="post" name="form-name">
+      <input type="text" name="text" placeholder="text" value="Some text..."/>
+      <input type="email" name="email" placeholder="email"/>
+      <input type="range" name="range" value="42"/>
+      <input type="button" value="Post me!" onclick="window.form()">
+    </form>
+
+    <script type="text/javascript">
+      function post(aAddress, aMessage, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress, true);
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+        var data = "";
+        for (var i in aMessage) {
+          data += "&" + i + "=" + aMessage[i];
+        }
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(data);
+      }
+
+      function form(aAddress, aForm, aCallback) {
+        var formData = new FormData(document.forms.namedItem(aForm));
+        formData.append("Custom field", "Extra data");
+
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(formData);
+      }
+
+      function performRequests() {
+        var url = "sjs_simple-test-server.sjs";
+        var url1 = url + "?foo=bar&baz=42&type=urlencoded";
+        var url2 = url + "?foo=bar&baz=42&type=multipart";
+
+        post(url1, { foo: "bar", baz: 123 }, function() {
+          form(url2, "form-name", function() {
+            // Done.
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_post-json-test-page.html b/devtools/client/netmonitor/test/html_post-json-test-page.html
new file mode 100644
index 000000000..129feaf08
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_post-json-test-page.html
@@ -0,0 +1,39 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>POST raw test</p>
+
+    <script type="text/javascript">
+      function post(address, message, callback) {
+        let xhr = new XMLHttpRequest();
+        xhr.open("POST", address, true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+
+        xhr.onreadystatechange = function () {
+          if (this.readyState == this.DONE) {
+            callback();
+          }
+        };
+        xhr.send(message);
+      }
+
+      function performRequests() {
+        post("sjs_simple-test-server.sjs", JSON.stringify({a: 1}), function () {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_post-raw-test-page.html b/devtools/client/netmonitor/test/html_post-raw-test-page.html
new file mode 100644
index 000000000..b4456348c
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_post-raw-test-page.html
@@ -0,0 +1,40 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>POST raw test</p>
+
+    <script type="text/javascript">
+      function post(aAddress, aMessage, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress, true);
+        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(aMessage);
+      }
+
+      function performRequests() {
+        var rawData = "foo=bar&baz=123";
+        post("sjs_simple-test-server.sjs", rawData, function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_post-raw-with-headers-test-page.html b/devtools/client/netmonitor/test/html_post-raw-with-headers-test-page.html
new file mode 100644
index 000000000..3bb8f9071
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_post-raw-with-headers-test-page.html
@@ -0,0 +1,45 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>POST raw with headers test</p>
+
+    <script type="text/javascript">
+      function post(aAddress, aMessage, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(aMessage);
+      }
+
+      function performRequests() {
+        var rawData = [
+          "content-type: application/x-www-form-urlencoded\r",
+          "custom-header: hello world!\r",
+          "\r",
+          "\r",
+          "foo=bar&baz=123"
+        ];
+        post("sjs_simple-test-server.sjs", rawData.join("\n"), function() {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_send-beacon.html b/devtools/client/netmonitor/test/html_send-beacon.html
new file mode 100644
index 000000000..95cc005bd
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_send-beacon.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Send beacon test</p>
+
+    <script type="text/javascript">
+    function performRequest() {
+      navigator.sendBeacon("beacon_request");
+    }
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/netmonitor/test/html_simple-test-page.html b/devtools/client/netmonitor/test/html_simple-test-page.html
new file mode 100644
index 000000000..846681dbd
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_simple-test-page.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Simple test</p>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_single-get-page.html b/devtools/client/netmonitor/test/html_single-get-page.html
new file mode 100644
index 000000000..0055d4ee0
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_single-get-page.html
@@ -0,0 +1,36 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Performing a custom number of GETs</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      (function performRequests() {
+        get("request_0", function() {});
+      })();
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_sorting-test-page.html b/devtools/client/netmonitor/test/html_sorting-test-page.html
new file mode 100644
index 000000000..640c58b8e
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_sorting-test-page.html
@@ -0,0 +1,18 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Sorting test</p>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_statistics-test-page.html b/devtools/client/netmonitor/test/html_statistics-test-page.html
new file mode 100644
index 000000000..b4b15b82b
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_statistics-test-page.html
@@ -0,0 +1,40 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Statistics test</p>
+
+    <script type="text/javascript">
+      function get(aAddress) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+        xhr.send(null);
+      }
+
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=txt");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=xml");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=html");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=css");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=js");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=json");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=jsonp");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=font");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=image");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=audio");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=video");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=flash");
+      get("test-image.png?v=" + Math.random());
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/html_status-codes-test-page.html b/devtools/client/netmonitor/test/html_status-codes-test-page.html
new file mode 100644
index 000000000..4be779bd4
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_status-codes-test-page.html
@@ -0,0 +1,55 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Status codes test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_status-codes-test-server.sjs?sts=100", function() {
+          get("sjs_status-codes-test-server.sjs?sts=200", function() {
+            get("sjs_status-codes-test-server.sjs?sts=300", function() {
+              get("sjs_status-codes-test-server.sjs?sts=400", function() {
+                get("sjs_status-codes-test-server.sjs?sts=500", function() {
+                  // Done.
+                });
+              });
+            });
+          });
+        });
+      }
+
+      function performCachedRequests() {
+        get("sjs_status-codes-test-server.sjs?sts=ok&cached", function() {
+          get("sjs_status-codes-test-server.sjs?sts=redirect&cached", function() {
+            // Done.
+          });
+        });
+      }
+
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/service-workers/status-codes-service-worker.js b/devtools/client/netmonitor/test/service-workers/status-codes-service-worker.js
new file mode 100644
index 000000000..3c70c7dcb
--- /dev/null
+++ b/devtools/client/netmonitor/test/service-workers/status-codes-service-worker.js
@@ -0,0 +1,15 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+self.addEventListener("activate", event => {
+  // start controlling the already loaded page
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("fetch", event => {
+  let response = new Response("Service worker response");
+  event.respondWith(response);
+});
diff --git a/devtools/client/netmonitor/test/service-workers/status-codes.html b/devtools/client/netmonitor/test/service-workers/status-codes.html
new file mode 100644
index 000000000..65c79ee00
--- /dev/null
+++ b/devtools/client/netmonitor/test/service-workers/status-codes.html
@@ -0,0 +1,59 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Status codes test</p>
+
+    <script type="text/javascript">
+      let swRegistration;
+
+      function registerServiceWorker() {
+        let sw = navigator.serviceWorker;
+        return sw.register("status-codes-service-worker.js")
+          .then(registration => {
+            swRegistration = registration;
+            console.log("Registered, scope is:", registration.scope);
+            return sw.ready;
+          }).then(() => {
+            // wait until the page is controlled
+            return new Promise(resolve => {
+              if (sw.controller) {
+                resolve();
+              } else {
+                sw.addEventListener('controllerchange', function onControllerChange() {
+                  sw.removeEventListener('controllerchange', onControllerChange);
+                  resolve();
+                });
+              }
+            });
+          }).catch(err => {
+            console.error("Registration failed");
+          });
+      }
+
+      function unregisterServiceWorker() {
+        return swRegistration.unregister();
+      }
+
+      function performRequests() {
+        return new Promise(function doXHR(done) {
+          let xhr = new XMLHttpRequest();
+          xhr.open("GET", "test/200", true);
+          xhr.onreadystatechange = done;
+          xhr.send(null);
+        });
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/test/sjs_content-type-test-server.sjs b/devtools/client/netmonitor/test/sjs_content-type-test-server.sjs
new file mode 100644
index 000000000..ee9a82e27
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_content-type-test-server.sjs
@@ -0,0 +1,273 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { classes: Cc, interfaces: Ci } = Components;
+
+function gzipCompressString(string, obs) {
+
+  let scs = Cc["@mozilla.org/streamConverters;1"]
+           .getService(Ci.nsIStreamConverterService);
+  let listener = Cc["@mozilla.org/network/stream-loader;1"]
+                .createInstance(Ci.nsIStreamLoader);
+  listener.init(obs);
+  let converter = scs.asyncConvertData("uncompressed", "gzip",
+                                        listener, null);
+  let stringStream = Cc["@mozilla.org/io/string-input-stream;1"]
+                    .createInstance(Ci.nsIStringInputStream);
+  stringStream.data = string;
+  converter.onStartRequest(null, null);
+  converter.onDataAvailable(null, null, stringStream, 0, string.length);
+  converter.onStopRequest(null, null, null);
+}
+
+function doubleGzipCompressString(string, observer) {
+  let observer2 = {
+    onStreamComplete: function(loader, context, status, length, result) {
+      let buffer = String.fromCharCode.apply(this, result);
+      gzipCompressString(buffer, observer);
+    }
+  };
+  gzipCompressString(string, observer2);
+}
+
+function handleRequest(request, response) {
+  response.processAsync();
+
+  let params = request.queryString.split("&");
+  let format = (params.filter((s) => s.includes("fmt="))[0] || "").split("=")[1];
+  let status = (params.filter((s) => s.includes("sts="))[0] || "").split("=")[1] || 200;
+
+  let cachedCount = 0;
+  let cacheExpire = 60; // seconds
+
+  function setCacheHeaders() {
+    if (status != 304) {
+      response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+      response.setHeader("Pragma", "no-cache");
+      response.setHeader("Expires", "0");
+      return;
+    }
+    // Spice things up a little!
+    if (cachedCount % 2) {
+      response.setHeader("Cache-Control", "max-age=" + cacheExpire, false);
+    } else {
+      response.setHeader("Expires", Date(Date.now() + cacheExpire * 1000), false);
+    }
+    cachedCount++;
+  }
+
+  let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  timer.initWithCallback(() => {
+    // to avoid garbage collection
+    timer = null;
+    switch (format) {
+      case "txt": {
+        response.setStatusLine(request.httpVersion, status, "DA DA DA");
+        response.setHeader("Content-Type", "text/plain", false);
+        setCacheHeaders();
+        response.write("Братан, ты вообще качаешься?");
+        response.finish();
+        break;
+      }
+      case "xml": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/xml; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("<label value='greeting'>Hello XML!</label>");
+        response.finish();
+        break;
+      }
+      case "html": {
+        let content = (params.filter((s) => s.includes("res="))[0] || "").split("=")[1];
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+        setCacheHeaders();
+        response.write(content || "<p>Hello HTML!</p>");
+        response.finish();
+        break;
+      }
+      case "html-long": {
+        let str = new Array(102400 /* 100 KB in bytes */).join(".");
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("<p>" + str + "</p>");
+        response.finish();
+        break;
+      }
+      case "css": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/css; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("body:pre { content: 'Hello CSS!' }");
+        response.finish();
+        break;
+      }
+      case "js": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "application/javascript; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("function() { return 'Hello JS!'; }");
+        response.finish();
+        break;
+      }
+      case "json": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "application/json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("{ \"greeting\": \"Hello JSON!\" }");
+        response.finish();
+        break;
+      }
+      case "jsonp": {
+        let fun = (params.filter((s) => s.includes("jsonp="))[0] || "").split("=")[1];
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write(fun + "({ \"greeting\": \"Hello JSONP!\" })");
+        response.finish();
+        break;
+      }
+      case "jsonp2": {
+        let fun = (params.filter((s) => s.includes("jsonp="))[0] || "").split("=")[1];
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write(" " + fun + " ( { \"greeting\": \"Hello weird JSONP!\" } ) ; ");
+        response.finish();
+        break;
+      }
+      case "json-long": {
+        let str = "{ \"greeting\": \"Hello long string JSON!\" },";
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("[" + new Array(2048).join(str).slice(0, -1) + "]");
+        response.finish();
+        break;
+      }
+      case "json-malformed": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("{ \"greeting\": \"Hello malformed JSON!\" },");
+        response.finish();
+        break;
+      }
+      case "json-text-mime": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("{ \"greeting\": \"Hello third-party JSON!\" }");
+        response.finish();
+        break;
+      }
+      case "json-custom-mime": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/x-bigcorp-json; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("{ \"greeting\": \"Hello oddly-named JSON!\" }");
+        response.finish();
+        break;
+      }
+      case "font": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "font/woff", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "image": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "image/png", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "audio": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "audio/ogg", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "video": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "video/webm", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "flash": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "application/x-shockwave-flash", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "ws": {
+        response.setStatusLine(request.httpVersion, 101, "Switching Protocols");
+        response.setHeader("Connection", "upgrade", false);
+        response.setHeader("Upgrade", "websocket", false);
+        setCacheHeaders();
+        response.finish();
+        break;
+      }
+      case "gzip": {
+        // Note: we're doing a double gzip encoding to test multiple
+        // converters in network monitor.
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "text/plain", false);
+        response.setHeader("Content-Encoding", "gzip\t ,gzip", false);
+        setCacheHeaders();
+        let observer = {
+          onStreamComplete: function(loader, context, status, length, result) {
+            let buffer = String.fromCharCode.apply(this, result);
+            response.setHeader("Content-Length", "" + buffer.length, false);
+            response.write(buffer);
+            response.finish();
+          }
+        };
+        let data = new Array(1000).join("Hello gzip!");
+        doubleGzipCompressString(data, observer);
+        break;
+      }
+      case "br": {
+        response.setStatusLine(request.httpVersion, status, "Connected");
+        response.setHeader("Content-Type", "text/plain", false);
+        response.setHeader("Content-Encoding", "br", false);
+        setCacheHeaders();
+        response.setHeader("Content-Length", "10", false);
+        // Use static data since we cannot encode brotli.
+        response.write("\x1b\x3f\x00\x00\x24\xb0\xe2\x99\x80\x12");
+        response.finish();
+        break;
+      }
+      case "hls-m3u8": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "application/x-mpegurl", false);
+        setCacheHeaders();
+        response.write("#EXTM3U\n");
+        response.finish();
+        break;
+      }
+      case "mpeg-dash": {
+        response.setStatusLine(request.httpVersion, status, "OK");
+        response.setHeader("Content-Type", "video/vnd.mpeg.dash.mpd", false);
+        setCacheHeaders();
+        response.write('<?xml version="1.0" encoding="UTF-8"?>\n');
+        response.write('<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"></MPD>\n');
+        response.finish();
+        break;
+      }
+      default: {
+        response.setStatusLine(request.httpVersion, 404, "Not Found");
+        response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+        setCacheHeaders();
+        response.write("<blink>Not Found</blink>");
+        response.finish();
+        break;
+      }
+    }
+  }, 10, Ci.nsITimer.TYPE_ONE_SHOT); // Make sure this request takes a few ms.
+}
diff --git a/devtools/client/netmonitor/test/sjs_cors-test-server.sjs b/devtools/client/netmonitor/test/sjs_cors-test-server.sjs
new file mode 100644
index 000000000..0bab80901
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_cors-test-server.sjs
@@ -0,0 +1,17 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 200, "Och Aye");
+
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+
+  response.setHeader("Access-Control-Allow-Origin", "*", false);
+  response.setHeader("Access-Control-Allow-Headers", "content-type", false);
+
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+
+  response.write("Access-Control-Allow-Origin: *");
+}
diff --git a/devtools/client/netmonitor/test/sjs_hsts-test-server.sjs b/devtools/client/netmonitor/test/sjs_hsts-test-server.sjs
new file mode 100644
index 000000000..c5715886e
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_hsts-test-server.sjs
@@ -0,0 +1,22 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+
+  if (request.queryString === "reset") {
+    // Reset the HSTS policy, prevent influencing other tests
+    response.setStatusLine(request.httpVersion, 200, "OK");
+    response.setHeader("Strict-Transport-Security", "max-age=0");
+    response.write("Resetting HSTS");
+  } else if (request.scheme === "http") {
+    response.setStatusLine(request.httpVersion, 302, "Found");
+    response.setHeader("Location", "https://" + request.host + request.path);
+  } else {
+    response.setStatusLine(request.httpVersion, 200, "OK");
+    response.setHeader("Strict-Transport-Security", "max-age=100");
+    response.write("Page was accessed over HTTPS!");
+  }
+}
diff --git a/devtools/client/netmonitor/test/sjs_https-redirect-test-server.sjs b/devtools/client/netmonitor/test/sjs_https-redirect-test-server.sjs
new file mode 100644
index 000000000..14ea34559
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_https-redirect-test-server.sjs
@@ -0,0 +1,19 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+
+  response.setHeader("Access-Control-Allow-Origin", "*", false);
+
+  if (request.scheme === "http") {
+    response.setStatusLine(request.httpVersion, 302, "Found");
+    response.setHeader("Location", "https://" + request.host + request.path);
+  } else {
+    response.setStatusLine(request.httpVersion, 200, "OK");
+    response.write("Page was accessed over HTTPS!");
+  }
+
+}
diff --git a/devtools/client/netmonitor/test/sjs_simple-test-server.sjs b/devtools/client/netmonitor/test/sjs_simple-test-server.sjs
new file mode 100644
index 000000000..9a3d44b6d
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_simple-test-server.sjs
@@ -0,0 +1,17 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 200, "Och Aye");
+
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+
+  response.setHeader("Set-Cookie", "bob=true; Max-Age=10; HttpOnly", true);
+  response.setHeader("Set-Cookie", "tom=cool; Max-Age=10; HttpOnly", true);
+
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+  response.setHeader("Foo-Bar", "baz", false);
+  response.write("Hello world!");
+}
diff --git a/devtools/client/netmonitor/test/sjs_sorting-test-server.sjs b/devtools/client/netmonitor/test/sjs_sorting-test-server.sjs
new file mode 100644
index 000000000..54c62866b
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_sorting-test-server.sjs
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { classes: Cc, interfaces: Ci } = Components;
+
+function handleRequest(request, response) {
+  response.processAsync();
+
+  let params = request.queryString.split("&");
+  let index = params.filter((s) => s.includes("index="))[0].split("=")[1];
+
+  let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  timer.initWithCallback(() => {
+    // to avoid garbage collection
+    timer = null;
+    response.setStatusLine(request.httpVersion, index == 1 ? 101 : index * 100, "Meh");
+
+    response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+    response.setHeader("Pragma", "no-cache");
+    response.setHeader("Expires", "0");
+
+    response.setHeader("Content-Type", "text/" + index, false);
+    response.write(new Array(index * 10).join(index)); // + 0.01 KB
+    response.finish();
+  }, 10, Ci.nsITimer.TYPE_ONE_SHOT); // Make sure this request takes a few ms.
+}
diff --git a/devtools/client/netmonitor/test/sjs_status-codes-test-server.sjs b/devtools/client/netmonitor/test/sjs_status-codes-test-server.sjs
new file mode 100644
index 000000000..4f17d1235
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_status-codes-test-server.sjs
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const { classes: Cc, interfaces: Ci } = Components;
+
+function handleRequest(request, response) {
+  response.processAsync();
+
+  let params = request.queryString.split("&");
+  let status = params.filter(s => s.includes("sts="))[0].split("=")[1];
+  let cached = params.filter(s => s === 'cached').length !== 0;
+
+  let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+  timer.initWithCallback(() => {
+    // to avoid garbage collection
+    timer = null;
+    switch (status) {
+      case "100":
+        response.setStatusLine(request.httpVersion, 101, "Switching Protocols");
+        break;
+      case "200":
+        response.setStatusLine(request.httpVersion, 202, "Created");
+        break;
+      case "300":
+        response.setStatusLine(request.httpVersion, 303, "See Other");
+        break;
+      case "400":
+        response.setStatusLine(request.httpVersion, 404, "Not Found");
+        break;
+      case "500":
+        response.setStatusLine(request.httpVersion, 501, "Not Implemented");
+        break;
+      case "ok":
+        response.setStatusLine(request.httpVersion, 200, "OK");
+        break;
+      case "redirect":
+        response.setStatusLine(request.httpVersion, 301, "Moved Permanently");
+        response.setHeader("Location", "http://example.com/redirected");
+        break;
+    }
+
+    if(!cached) {
+      response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+      response.setHeader("Pragma", "no-cache");
+      response.setHeader("Expires", "0");
+    }
+    else {
+      response.setHeader("Cache-Control", "no-transform,public,max-age=300,s-maxage=900");
+      response.setHeader("Expires", "Thu, 01 Dec 2100 20:00:00 GMT");
+    }
+
+    response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+    response.write("Hello status code " + status + "!");
+    response.finish();
+  }, 10, Ci.nsITimer.TYPE_ONE_SHOT); // Make sure this request takes a few ms.
+}
diff --git a/devtools/client/netmonitor/test/sjs_truncate-test-server.sjs b/devtools/client/netmonitor/test/sjs_truncate-test-server.sjs
new file mode 100644
index 000000000..54db23d9a
--- /dev/null
+++ b/devtools/client/netmonitor/test/sjs_truncate-test-server.sjs
@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function handleRequest(request, response) {
+  let params = request.queryString.split("&");
+  let limit = (params.filter((s) => s.includes("limit="))[0] || "").split("=")[1];
+
+  response.setStatusLine(request.httpVersion, 200, "Och Aye");
+
+  response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+  response.setHeader("Pragma", "no-cache");
+  response.setHeader("Expires", "0");
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+
+  response.write("x".repeat(2 * parseInt(limit, 10)));
+
+  response.write("Hello world!");
+}
diff --git a/devtools/client/netmonitor/test/test-image.png b/devtools/client/netmonitor/test/test-image.png
new file mode 100644
index 000000000..769c63634
--- /dev/null
+++ b/devtools/client/netmonitor/test/test-image.png
diff --git a/devtools/client/netmonitor/toolbar-view.js b/devtools/client/netmonitor/toolbar-view.js
new file mode 100644
index 000000000..28c3cf99b
--- /dev/null
+++ b/devtools/client/netmonitor/toolbar-view.js
@@ -0,0 +1,77 @@
+/* globals dumpn, $, NetMonitorView */
+"use strict";
+
+const { createFactory, DOM } = 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);
+const FilterButtons = createFactory(require("./components/filter-buttons"));
+const ToggleButton = createFactory(require("./components/toggle-button"));
+const SearchBox = createFactory(require("./components/search-box"));
+const { L10N } = require("./l10n");
+
+// Shortcuts
+const { button } = DOM;
+
+/**
+ * Functions handling the toolbar view: expand/collapse button etc.
+ */
+function ToolbarView() {
+  dumpn("ToolbarView was instantiated");
+}
+
+ToolbarView.prototype = {
+  /**
+   * Initialization function, called when the debugger is started.
+   */
+  initialize: function (store) {
+    dumpn("Initializing the ToolbarView");
+
+    this._clearContainerNode = $("#react-clear-button-hook");
+    this._filterContainerNode = $("#react-filter-buttons-hook");
+    this._toggleContainerNode = $("#react-details-pane-toggle-hook");
+    this._searchContainerNode = $("#react-search-box-hook");
+
+    // clear button
+    ReactDOM.render(button({
+      id: "requests-menu-clear-button",
+      className: "devtools-button devtools-clear-icon",
+      title: L10N.getStr("netmonitor.toolbar.clear"),
+      onClick: () => {
+        NetMonitorView.RequestsMenu.clear();
+      }
+    }), this._clearContainerNode);
+
+    // filter button
+    ReactDOM.render(Provider(
+      { store },
+      FilterButtons()
+    ), this._filterContainerNode);
+
+    // search box
+    ReactDOM.render(Provider(
+      { store },
+      SearchBox()
+    ), this._searchContainerNode);
+
+    // details pane toggle button
+    ReactDOM.render(Provider(
+      { store },
+      ToggleButton()
+    ), this._toggleContainerNode);
+  },
+
+  /**
+   * Destruction function, called when the debugger is closed.
+   */
+  destroy: function () {
+    dumpn("Destroying the ToolbarView");
+
+    ReactDOM.unmountComponentAtNode(this._clearContainerNode);
+    ReactDOM.unmountComponentAtNode(this._filterContainerNode);
+    ReactDOM.unmountComponentAtNode(this._toggleContainerNode);
+    ReactDOM.unmountComponentAtNode(this._searchContainerNode);
+  }
+
+};
+
+exports.ToolbarView = ToolbarView;