--- a/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
+++ b/devtools/client/framework/test/browser_ignore_toolbox_network_requests.js
@@ -18,16 +18,18 @@ add_task(function* () {
   let tab = yield addTab(URL_ROOT + "doc_viewsource.html");
   let target = TargetFactory.forTab(tab);
   let toolbox = yield gDevTools.showToolbox(target, "styleeditor");
   let panel = toolbox.getPanel("styleeditor");
 
   is(panel.UI.editors.length, 1, "correct number of editors opened");
 
   let monitor = yield toolbox.selectTool("netmonitor");
-  let { RequestsMenu } = monitor.panelWin.NetMonitorView;
-  is(RequestsMenu.itemCount, 0, "No network requests appear in the network panel");
+  let { gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+
+  is(gStore.getState().requests.requests.size, 0, "No network requests appear in the network panel");
 
   yield gDevTools.closeToolbox(target);
   tab = target = toolbox = panel = null;
   gBrowser.removeCurrentTab();
   flags.testing = isTesting;
 });

--- a/devtools/client/netmonitor/actions/selection.js
+++ b/devtools/client/netmonitor/actions/selection.js
@@ -1,28 +1,45 @@
 /* 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 { getDisplayedRequests } = require("../selectors/index");
 const { SELECT_REQUEST } = require("../constants");
+const {
+  getDisplayedRequests,
+  getSortedRequests,
+} = require("../selectors/index");
+
+const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
 
 /**
  * Select request with a given id.
  */
 function selectRequest(id) {
   return {
     type: SELECT_REQUEST,
-    id
+    id,
   };
 }
 
-const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
+/**
+ * Select request with a given index (sorted order)
+ */
+function selectRequestByIndex(index) {
+  return (dispatch, getState) => {
+    const requests = getSortedRequests(getState());
+    let itemId;
+    if (index >= 0 && index < requests.size) {
+      itemId = requests.get(index).id;
+    }
+    dispatch(selectRequest(itemId));
+  };
+}
 
 /**
  * Move the selection up to down according to the "delta" parameter. Possible values:
  * - Number: positive or negative, move up or down by specified distance
  * - "PAGE_UP" | "PAGE_DOWN" (String): page up or page down
  * - +Infinity | -Infinity: move to the start or end of the list
  */
 function selectDelta(delta) {
@@ -45,10 +62,11 @@ function selectDelta(delta) {
     const newIndex = Math.min(Math.max(0, selIndex + delta), requests.size - 1);
     const newItem = requests.get(newIndex);
     dispatch(selectRequest(newItem.id));
   };
 }
 
 module.exports = {
   selectRequest,
+  selectRequestByIndex,
   selectDelta,
 };

--- a/devtools/client/netmonitor/actions/ui.js
+++ b/devtools/client/netmonitor/actions/ui.js
@@ -19,19 +19,19 @@ const {
 function openNetworkDetails(open) {
   return {
     type: OPEN_NETWORK_DETAILS,
     open,
   };
 }
 
 /**
- * Change performance statistics view open state.
+ * Change performance statistics panel open state.
  *
- * @param {boolean} visible - expected performance statistics open state
+ * @param {boolean} visible - expected performance statistics panel open state
  */
 function openStatistics(open) {
   return {
     type: OPEN_STATISTICS,
     open,
   };
 }
 
@@ -61,20 +61,21 @@ function selectDetailsPanelTab(id) {
  * Toggle network details panel.
  */
 function toggleNetworkDetails() {
   return (dispatch, getState) =>
     dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
 }
 
 /**
- * Toggle to show/hide performance statistics view.
+ * Toggle performance statistics panel.
  */
 function toggleStatistics() {
-  return (dispatch, getState) => dispatch(openStatistics(!getState().ui.statisticsOpen));
+  return (dispatch, getState) =>
+    dispatch(openStatistics(!getState().ui.statisticsOpen));
 }
 
 module.exports = {
   openNetworkDetails,
   openStatistics,
   resizeWaterfall,
   selectDetailsPanelTab,
   toggleNetworkDetails,

--- a/devtools/client/netmonitor/components/moz.build
+++ b/devtools/client/netmonitor/components/moz.build
@@ -1,14 +1,15 @@
 # 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(
     'request-list-content.js',
+    'request-list-context-menu.js',
     'request-list-empty.js',
     'request-list-header.js',
     'request-list-item.js',
     'request-list-tooltip.js',
     'request-list.js',
     'statistics-panel.js',
     'toolbar.js',
 )

--- a/devtools/client/netmonitor/components/request-list-content.js
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -1,58 +1,83 @@
 /* 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 */
+
+/* globals NetMonitorController */
 
 "use strict";
 
-const { Task } = require("devtools/shared/task");
-const { createClass, createFactory, DOM, PropTypes } = require("devtools/client/shared/vendor/react");
-const { div } = DOM;
-const Actions = require("../actions/index");
-const RequestListItem = createFactory(require("./request-list-item"));
+const { KeyCodes } = require("devtools/client/shared/keycodes");
+const {
+  createClass,
+  createFactory,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const { setTooltipImageContent,
-        setTooltipStackTraceContent } = require("./request-list-tooltip");
-const { getDisplayedRequests,
-        getWaterfallScale } = require("../selectors/index");
-const { KeyCodes } = require("devtools/client/shared/keycodes");
+const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
+const { Task } = require("devtools/shared/task");
+const Actions = require("../actions/index");
+const {
+  setTooltipImageContent,
+  setTooltipStackTraceContent,
+} = require("./request-list-tooltip");
+const {
+  getDisplayedRequests,
+  getWaterfallScale,
+} = require("../selectors/index");
+
+// Components
+const RequestListItem = createFactory(require("./request-list-item"));
+const RequestListContextMenu = require("./request-list-context-menu");
+
+const { div } = DOM;
 
 // tooltip show/hide delay in ms
 const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
 
 /**
  * Renders the actual contents of the request list.
  */
 const RequestListContent = createClass({
   displayName: "RequestListContent",
 
   propTypes: {
+    contextMenu: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
     displayedRequests: PropTypes.object.isRequired,
     firstRequestStartedMillis: PropTypes.number.isRequired,
-    onItemContextMenu: PropTypes.func.isRequired,
     onItemMouseDown: PropTypes.func.isRequired,
     onSecurityIconClick: PropTypes.func.isRequired,
     onSelectDelta: PropTypes.func.isRequired,
     scale: PropTypes.number,
     selectedRequestId: PropTypes.string,
     tooltip: PropTypes.shape({
       hide: PropTypes.func.isRequired,
       startTogglingOnHover: PropTypes.func.isRequired,
       stopTogglingOnHover: PropTypes.func.isRequired,
     }).isRequired
   },
 
+  componentWillMount() {
+    const { dispatch } = this.props;
+    this.contextMenu = new RequestListContextMenu({
+      cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
+      openStatistics: (open) => dispatch(Actions.openStatistics(open)),
+    });
+    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
+  },
+
   componentDidMount() {
     // Set the CSS variables for waterfall scaling
     this.setScalingStyles();
 
     // Install event handler for displaying a tooltip
-    this.props.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, {
+    this.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, {
       toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
       interactive: true
     });
 
     // Install event handler to hide the tooltip on scroll
     this.refs.contentEl.addEventListener("scroll", this.onScroll, true);
   },
 
@@ -73,17 +98,17 @@ const RequestListContent = createClass({
       node.scrollTop = node.scrollHeight;
     }
   },
 
   componentWillUnmount() {
     this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
 
     // Uninstall the tooltip event handler
-    this.props.tooltip.stopTogglingOnHover();
+    this.tooltip.stopTogglingOnHover();
   },
 
   /**
    * Set the CSS variables for waterfall scaling. If React supported setting CSS
    * variables as part of the "style" property of a DOM element, we would use that.
    *
    * However, React doesn't support this, so we need to use a hack and update the
    * DOM element directly: https://github.com/facebook/react/issues/6411
@@ -147,17 +172,17 @@ const RequestListContent = createClass({
 
     return false;
   }),
 
   /**
    * Scroll listener for the requests menu view.
    */
   onScroll() {
-    this.props.tooltip.hide();
+    this.tooltip.hide();
   },
 
   /**
    * Handler for keyboard events. For arrow up/down, page up/down, home/end,
    * move the selection up or down.
    */
   onKeyDown(e) {
     let delta;
@@ -188,16 +213,21 @@ const RequestListContent = createClass({
     if (delta) {
       // Prevent scrolling when pressing navigation keys.
       e.preventDefault();
       e.stopPropagation();
       this.props.onSelectDelta(delta);
     }
   },
 
+  onContextMenu(evt) {
+    evt.preventDefault();
+    this.contextMenu.open(evt);
+  },
+
   /**
    * If selection has just changed (by keyboard navigation), don't keep the list
    * scrolled to bottom, but allow scrolling up with the selection.
    */
   onFocusedNodeChange() {
     this.shouldScrollBottom = false;
   },
 
@@ -206,66 +236,62 @@ const RequestListContent = createClass({
    */
   onFocusedNodeUnmount() {
     if (this.refs.contentEl) {
       this.refs.contentEl.focus();
     }
   },
 
   render() {
-    const { selectedRequestId,
-            displayedRequests,
-            firstRequestStartedMillis,
-            onItemMouseDown,
-            onItemContextMenu,
-            onSecurityIconClick } = this.props;
+    const {
+      displayedRequests,
+      firstRequestStartedMillis,
+      selectedRequestId,
+      onItemMouseDown,
+      onSecurityIconClick,
+    } = this.props;
 
-    return div(
-      {
+    return (
+      div({
         ref: "contentEl",
         className: "requests-menu-contents",
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
       },
-      displayedRequests.map((item, index) => RequestListItem({
-        key: item.id,
-        item,
-        index,
-        isSelected: item.id === selectedRequestId,
-        firstRequestStartedMillis,
-        onMouseDown: e => onItemMouseDown(e, item.id),
-        onContextMenu: e => onItemContextMenu(e, item.id),
-        onSecurityIconClick: e => onSecurityIconClick(e, item),
-        onFocusedNodeChange: this.onFocusedNodeChange,
-        onFocusedNodeUnmount: this.onFocusedNodeUnmount,
-      }))
+        displayedRequests.map((item, index) => RequestListItem({
+          key: item.id,
+          item,
+          index,
+          isSelected: item.id === selectedRequestId,
+          firstRequestStartedMillis,
+          onMouseDown: () => onItemMouseDown(item.id),
+          onContextMenu: this.onContextMenu,
+          onFocusedNodeChange: this.onFocusedNodeChange,
+          onFocusedNodeUnmount: this.onFocusedNodeUnmount,
+          onSecurityIconClick: () => onSecurityIconClick(item.securityState),
+        }))
+      )
     );
   },
 });
 
 module.exports = connect(
-  state => ({
+  (state) => ({
     displayedRequests: getDisplayedRequests(state),
+    firstRequestStartedMillis: state.requests.firstStartedMillis,
     selectedRequestId: state.requests.selectedId,
     scale: getWaterfallScale(state),
-    firstRequestStartedMillis: state.requests.firstStartedMillis,
-    tooltip: NetMonitorView.RequestsMenu.tooltip,
   }),
-  dispatch => ({
-    onItemMouseDown: (e, item) => dispatch(Actions.selectRequest(item)),
-    onItemContextMenu: (e, item) => {
-      e.preventDefault();
-      NetMonitorView.RequestsMenu.contextMenu.open(e);
-    },
-    onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)),
+  (dispatch) => ({
+    dispatch,
+    onItemMouseDown: (id) => dispatch(Actions.selectRequest(id)),
     /**
      * A handler that opens the security tab in the details view if secure or
      * broken security indicator is clicked.
      */
-    onSecurityIconClick: (e, item) => {
-      const { securityState } = item;
-      // Choose the security tab.
+    onSecurityIconClick: (securityState) => {
       if (securityState && securityState !== "insecure") {
         dispatch(Actions.selectDetailsPanelTab("security"));
       }
     },
-  })
+    onSelectDelta: (delta) => dispatch(Actions.selectDelta(delta)),
+  }),
 )(RequestListContent);

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-context-menu.js
@@ -0,0 +1,360 @@
+/* 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, gNetwork, gStore */
+
+"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,
+  getUrlQuery,
+  parseQueryString,
+} = require("../request-utils");
+const {
+  getSelectedRequest,
+  getSortedRequests,
+} = require("../selectors/index");
+
+loader.lazyRequireGetter(this, "HarExporter",
+  "devtools/client/netmonitor/har/har-exporter", true);
+
+loader.lazyServiceGetter(this, "clipboardHelper",
+  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
+
+function RequestListContextMenu({
+  cloneSelectedRequest,
+  openStatistics,
+}) {
+  this.cloneSelectedRequest = cloneSelectedRequest;
+  this.openStatistics = openStatistics;
+}
+
+RequestListContextMenu.prototype = {
+  get selectedRequest() {
+    return getSelectedRequest(gStore.getState());
+  },
+
+  get sortedRequests() {
+    return getSortedRequests(gStore.getState());
+  },
+
+  /**
+   * 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 selectedRequest = this.selectedRequest;
+
+    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: !!selectedRequest,
+      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: !!(selectedRequest && getUrlQuery(selectedRequest.url)),
+      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: !!(selectedRequest && selectedRequest.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: !!selectedRequest,
+      click: () => this.copyAsCurl(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedRequest,
+    }));
+
+    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: !!(selectedRequest && selectedRequest.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: !!(selectedRequest && selectedRequest.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: !!(selectedRequest &&
+               selectedRequest.responseContent &&
+               selectedRequest.responseContent.content.text &&
+               selectedRequest.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: !!(selectedRequest &&
+               selectedRequest.responseContent &&
+               selectedRequest.responseContent.content.mimeType.includes("image/")),
+      click: () => this.copyImageAsDataUri(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedRequest,
+    }));
+
+    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.sortedRequests.size > 0,
+      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.sortedRequests.size > 0,
+      click: () => this.saveAllAsHar(),
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedRequest,
+    }));
+
+    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 &&
+               selectedRequest && !selectedRequest.isCustom),
+      click: this.cloneSelectedRequest,
+    }));
+
+    menu.append(new MenuItem({
+      type: "separator",
+      visible: !!selectedRequest,
+    }));
+
+    menu.append(new MenuItem({
+      id: "request-menu-context-newtab",
+      label: L10N.getStr("netmonitor.context.newTab"),
+      accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"),
+      visible: !!selectedRequest,
+      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: () => this.openStatistics(true)
+    }));
+
+    menu.popup(screenX, screenY, NetMonitorController._toolbox);
+    return menu;
+  },
+
+  /**
+   * Opens selected item in a new tab.
+   */
+  openRequestInTab() {
+    let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+    win.openUILinkIn(this.selectedRequest.url, "tab", { relatedToCurrent: true });
+  },
+
+  /**
+   * Copy the request url from the currently selected item.
+   */
+  copyUrl() {
+    clipboardHelper.copyString(this.selectedRequest.url);
+  },
+
+  /**
+   * Copy the request url query string parameters from the currently
+   * selected item.
+   */
+  copyUrlParams() {
+    let { url } = this.selectedRequest;
+    let params = getUrlQuery(url).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.selectedRequest;
+
+    // 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 = 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.selectedRequest;
+
+    // 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 rawHeaders = this.selectedRequest.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 rawHeaders = this.selectedRequest.responseHeaders.rawHeaders.trim();
+    if (Services.appinfo.OS !== "WINNT") {
+      rawHeaders = rawHeaders.replace(/\r/g, "");
+    }
+    clipboardHelper.copyString(rawHeaders);
+  },
+
+  /**
+   * Copy image as data uri.
+   */
+  copyImageAsDataUri() {
+    const { mimeType, text, encoding } = this.selectedRequest.responseContent.content;
+
+    gNetwork.getString(text).then(string => {
+      let data = formDataURI(mimeType, encoding, string);
+      clipboardHelper.copyString(data);
+    });
+  },
+
+  /**
+   * Copy response data as a string.
+   */
+  copyResponse() {
+    const { text } = this.selectedRequest.responseContent.content;
+
+    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),
+      items: this.sortedRequests,
+      title: title
+    };
+  }
+};
+
+module.exports = RequestListContextMenu;

--- a/devtools/client/netmonitor/components/request-list-empty.js
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -62,13 +62,13 @@ const RequestListEmptyNotice = createCla
       )
     );
   }
 });
 
 module.exports = connect(
   undefined,
   dispatch => ({
-    onPerfClick: e => dispatch(Actions.openStatistics(true)),
-    onReloadClick: e =>
+    onPerfClick: () => dispatch(Actions.openStatistics(true)),
+    onReloadClick: () =>
       NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
   })
 )(RequestListEmptyNotice);

--- a/devtools/client/netmonitor/components/request-list-item.js
+++ b/devtools/client/netmonitor/components/request-list-item.js
@@ -1,21 +1,27 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-disable react/prop-types */
 
 "use strict";
 
-const { createClass, createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
-const { div, span, img } = DOM;
+const {
+  createClass,
+  createFactory,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
 const { L10N } = require("../l10n");
+const { getAbbreviatedMimeType } = require("../request-utils");
 const { getFormattedSize } = require("../utils/format-utils");
-const { getAbbreviatedMimeType } = require("../request-utils");
+
+const { div, img, span } = DOM;
 
 /**
  * Compare two objects on a subset of their properties
  */
 function propertiesEqual(props, item1, item2) {
   return item1 === item2 || props.every(p => item1[p] === item2[p]);
 }
 
@@ -42,17 +48,17 @@ const UPDATED_REQ_ITEM_PROPS = [
   "transferredSize",
   "startedMillis",
   "totalTime",
 ];
 
 const UPDATED_REQ_PROPS = [
   "index",
   "isSelected",
-  "firstRequestStartedMillis"
+  "firstRequestStartedMillis",
 ];
 
 /**
  * Render one row in the request list.
  */
 const RequestListItem = createClass({
   displayName: "RequestListItem",
 
@@ -71,17 +77,17 @@ const RequestListItem = createClass({
   componentDidMount() {
     if (this.props.isSelected) {
       this.refs.el.focus();
     }
   },
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_REQ_ITEM_PROPS, this.props.item, nextProps.item) ||
-           !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps);
+      !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps);
   },
 
   componentDidUpdate(prevProps) {
     if (!prevProps.isSelected && this.props.isSelected) {
       this.refs.el.focus();
       if (this.props.onFocusedNodeChange) {
         this.props.onFocusedNodeChange();
       }
@@ -114,46 +120,49 @@ const RequestListItem = createClass({
     } = this.props;
 
     let classList = [ "request-list-item" ];
     if (isSelected) {
       classList.push("selected");
     }
     classList.push(index % 2 ? "odd" : "even");
 
-    return div(
-      {
+    return (
+      div({
         ref: "el",
         className: classList.join(" "),
         "data-id": item.id,
         tabIndex: 0,
         onContextMenu,
         onMouseDown,
       },
-      StatusColumn({ item }),
-      MethodColumn({ item }),
-      FileColumn({ item }),
-      DomainColumn({ item, onSecurityIconClick }),
-      CauseColumn({ item }),
-      TypeColumn({ item }),
-      TransferredSizeColumn({ item }),
-      ContentSizeColumn({ item }),
-      WaterfallColumn({ item, firstRequestStartedMillis })
+        StatusColumn({ item }),
+        MethodColumn({ item }),
+        FileColumn({ item }),
+        DomainColumn({ item, onSecurityIconClick }),
+        CauseColumn({ item }),
+        TypeColumn({ item }),
+        TransferredSizeColumn({ item }),
+        ContentSizeColumn({ item }),
+        WaterfallColumn({ item, firstRequestStartedMillis }),
+      )
     );
   }
 });
 
 const UPDATED_STATUS_PROPS = [
   "status",
   "statusText",
   "fromCache",
   "fromServiceWorker",
 ];
 
 const StatusColumn = createFactory(createClass({
+  displayName: "StatusColumn",
+
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { status, statusText, fromCache, fromServiceWorker } = this.props.item;
 
     let code, title;
@@ -173,74 +182,85 @@ const StatusColumn = createFactory(creat
           title += " (cached)";
         }
         if (fromServiceWorker) {
           title += " (service worker)";
         }
       }
     }
 
-    return div({ className: "requests-menu-subitem requests-menu-status", title },
-      div({ className: "requests-menu-status-icon", "data-code": code }),
-      span({ className: "subitem-label requests-menu-status-code" }, status)
+    return (
+      div({ className: "requests-menu-subitem requests-menu-status", title },
+        div({ className: "requests-menu-status-icon", "data-code": code }),
+        span({ className: "subitem-label requests-menu-status-code" }, status),
+      )
     );
   }
 }));
 
 const MethodColumn = createFactory(createClass({
+  displayName: "MethodColumn",
+
   shouldComponentUpdate(nextProps) {
     return this.props.item.method !== nextProps.item.method;
   },
 
   render() {
     const { method } = this.props.item;
-    return div({ className: "requests-menu-subitem requests-menu-method-box" },
-      span({ className: "subitem-label requests-menu-method" }, method)
+    return (
+      div({ className: "requests-menu-subitem requests-menu-method-box" },
+        span({ className: "subitem-label requests-menu-method" }, method)
+      )
     );
   }
 }));
 
 const UPDATED_FILE_PROPS = [
   "urlDetails",
   "responseContentDataUri",
 ];
 
 const FileColumn = createFactory(createClass({
+  displayName: "FileColumn",
+
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { urlDetails, responseContentDataUri } = this.props.item;
 
-    return div({ className: "requests-menu-subitem requests-menu-icon-and-file" },
-      img({
-        className: "requests-menu-icon",
-        src: responseContentDataUri,
-        hidden: !responseContentDataUri,
-        "data-type": responseContentDataUri ? "thumbnail" : undefined
-      }),
-      div(
-        {
+    return (
+      div({ className: "requests-menu-subitem requests-menu-icon-and-file" },
+        img({
+          className: "requests-menu-icon",
+          src: responseContentDataUri,
+          hidden: !responseContentDataUri,
+          "data-type": responseContentDataUri ? "thumbnail" : undefined,
+        }),
+        div({
           className: "subitem-label requests-menu-file",
-          title: urlDetails.unicodeUrl
+          title: urlDetails.unicodeUrl,
         },
-        urlDetails.baseNameWithQuery
+          urlDetails.baseNameWithQuery,
+        ),
       )
     );
   }
 }));
 
 const UPDATED_DOMAIN_PROPS = [
   "urlDetails",
   "remoteAddress",
   "securityState",
 ];
 
 const DomainColumn = createFactory(createClass({
+  displayName: "DomainColumn",
+
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_DOMAIN_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { item, onSecurityIconClick } = this.props;
     const { urlDetails, remoteAddress, securityState } = item;
 
@@ -251,29 +271,32 @@ const DomainColumn = createFactory(creat
       iconTitle = L10N.getStr("netmonitor.security.state.secure");
     } else if (securityState) {
       iconClassList.push(`security-state-${securityState}`);
       iconTitle = L10N.getStr(`netmonitor.security.state.${securityState}`);
     }
 
     let title = urlDetails.host + (remoteAddress ? ` (${remoteAddress})` : "");
 
-    return div(
-      { className: "requests-menu-subitem requests-menu-security-and-domain" },
-      div({
-        className: iconClassList.join(" "),
-        title: iconTitle,
-        onClick: onSecurityIconClick,
-      }),
-      span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host)
+    return (
+      div({ className: "requests-menu-subitem requests-menu-security-and-domain" },
+        div({
+          className: iconClassList.join(" "),
+          title: iconTitle,
+          onClick: onSecurityIconClick,
+        }),
+        span({ className: "subitem-label requests-menu-domain", title }, urlDetails.host),
+      )
     );
   }
 }));
 
 const CauseColumn = createFactory(createClass({
+  displayName: "CauseColumn",
+
   shouldComponentUpdate(nextProps) {
     return this.props.item.cause !== nextProps.item.cause;
   },
 
   render() {
     const { cause } = this.props.item;
 
     let causeType = "";
@@ -282,57 +305,72 @@ const CauseColumn = createFactory(create
 
     if (cause) {
       // Legacy server might send a numeric value. Display it as "unknown"
       causeType = typeof cause.type === "string" ? cause.type : "unknown";
       causeUri = cause.loadingDocumentUri;
       causeHasStack = cause.stacktrace && cause.stacktrace.length > 0;
     }
 
-    return div(
-      { className: "requests-menu-subitem requests-menu-cause", title: causeUri },
-      span({ className: "requests-menu-cause-stack", hidden: !causeHasStack }, "JS"),
-      span({ className: "subitem-label" }, causeType)
+    return (
+      div({
+        className: "requests-menu-subitem requests-menu-cause",
+        title: causeUri,
+      },
+        span({
+          className: "requests-menu-cause-stack",
+          hidden: !causeHasStack,
+        }, "JS"),
+        span({ className: "subitem-label" }, causeType),
+      )
     );
   }
 }));
 
 const CONTENT_MIME_TYPE_ABBREVIATIONS = {
   "ecmascript": "js",
   "javascript": "js",
   "x-javascript": "js"
 };
 
 const TypeColumn = createFactory(createClass({
+  displayName: "TypeColumn",
+
   shouldComponentUpdate(nextProps) {
     return this.props.item.mimeType !== nextProps.item.mimeType;
   },
 
   render() {
     const { mimeType } = this.props.item;
     let abbrevType;
     if (mimeType) {
       abbrevType = getAbbreviatedMimeType(mimeType);
       abbrevType = CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType;
     }
 
-    return div(
-      { className: "requests-menu-subitem requests-menu-type", title: mimeType },
-      span({ className: "subitem-label" }, abbrevType)
+    return (
+      div({
+        className: "requests-menu-subitem requests-menu-type",
+        title: mimeType,
+      },
+        span({ className: "subitem-label" }, abbrevType),
+      )
     );
   }
 }));
 
 const UPDATED_TRANSFERRED_PROPS = [
   "transferredSize",
   "fromCache",
   "fromServiceWorker",
 ];
 
 const TransferredSizeColumn = createFactory(createClass({
+  displayName: "TransferredSizeColumn",
+
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { transferredSize, fromCache, fromServiceWorker } = this.props.item;
 
     let text;
@@ -344,68 +382,81 @@ const TransferredSizeColumn = createFact
       text = L10N.getStr("networkMenu.sizeServiceWorker");
       className += " theme-comment";
     } else if (typeof transferredSize == "number") {
       text = getFormattedSize(transferredSize);
     } else if (transferredSize === null) {
       text = L10N.getStr("networkMenu.sizeUnavailable");
     }
 
-    return div(
-      { className: "requests-menu-subitem requests-menu-transferred", title: text },
-      span({ className }, text)
+    return (
+      div({
+        className: "requests-menu-subitem requests-menu-transferred",
+        title: text,
+      },
+        span({ className }, text),
+      )
     );
   }
 }));
 
 const ContentSizeColumn = createFactory(createClass({
+  displayName: "ContentSizeColumn",
+
   shouldComponentUpdate(nextProps) {
     return this.props.item.contentSize !== nextProps.item.contentSize;
   },
 
   render() {
     const { contentSize } = this.props.item;
 
     let text;
     if (typeof contentSize == "number") {
       text = getFormattedSize(contentSize);
     }
 
-    return div(
-      {
+    return (
+      div({
         className: "requests-menu-subitem subitem-label requests-menu-size",
-        title: text
+        title: text,
       },
-      span({ className: "subitem-label" }, text)
+        span({ className: "subitem-label" }, text),
+      )
     );
   }
 }));
 
 const UPDATED_WATERFALL_PROPS = [
   "eventTimings",
   "totalTime",
   "fromCache",
   "fromServiceWorker",
 ];
 
 const WaterfallColumn = createFactory(createClass({
+  displayName: "WaterfallColumn",
+
   shouldComponentUpdate(nextProps) {
     return this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis ||
-           !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item);
+      !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item);
   },
 
   render() {
     const { item, firstRequestStartedMillis } = this.props;
-    const startedDeltaMillis = item.startedMillis - firstRequestStartedMillis;
-    const paddingInlineStart = `${startedDeltaMillis}px`;
 
-    return div({ className: "requests-menu-subitem requests-menu-waterfall" },
-      div(
-        { className: "requests-menu-timings", style: { paddingInlineStart } },
-        timingBoxes(item)
+    return (
+      div({ className: "requests-menu-subitem requests-menu-waterfall" },
+        div({
+          className: "requests-menu-timings",
+          style: {
+            paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`,
+          },
+        },
+          timingBoxes(item),
+        )
       )
     );
   }
 }));
 
 // List of properties of the timing info we want to create boxes for
 const TIMING_KEYS = ["blocked", "dns", "connect", "send", "wait", "receive"];
 

--- a/devtools/client/netmonitor/components/request-list-tooltip.js
+++ b/devtools/client/netmonitor/components/request-list-tooltip.js
@@ -2,20 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* globals gNetwork, NetMonitorController */
 
 "use strict";
 
 const { Task } = require("devtools/shared/task");
-const { formDataURI } = require("../request-utils");
+const {
+  setImageTooltip,
+  getImageDimensions,
+} = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
 const { WEBCONSOLE_L10N } = require("../l10n");
-const { setImageTooltip,
-        getImageDimensions } = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+const { formDataURI } = require("../request-utils");
 
 // px
 const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400;
 // px
 const REQUESTS_TOOLTIP_STACK_TRACE_WIDTH = 600;
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 

--- a/devtools/client/netmonitor/components/request-list.js
+++ b/devtools/client/netmonitor/components/request-list.js
@@ -1,34 +1,127 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* eslint-env browser */
+/* globals gNetwork */
+
 "use strict";
 
-const { createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
-const { div } = DOM;
+const {
+  createClass,
+  createFactory,
+  DOM,
+  PropTypes,
+} = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
-const RequestListHeader = createFactory(require("./request-list-header"));
+const { setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
+const Actions = require("../actions/index");
+const { Prefs } = require("../prefs");
+const { getFormDataSections } = require("../request-utils");
+const {
+  getActiveFilters,
+  getSelectedRequest,
+} = require("../selectors/index");
+
+// Components
+const RequestListContent = createFactory(require("./request-list-content"));
 const RequestListEmptyNotice = createFactory(require("./request-list-empty"));
-const RequestListContent = createFactory(require("./request-list-content"));
+const RequestListHeader = createFactory(require("./request-list-header"));
+
+const { div } = DOM;
 
 /**
- * Renders the request list - header, empty text, the actual content with rows
+ * Request panel component
  */
-const RequestList = function ({ isEmpty }) {
-  return div({ className: "request-list-container" },
-    RequestListHeader(),
-    isEmpty ? RequestListEmptyNotice() : RequestListContent()
-  );
-};
+const RequestList = createClass({
+  displayName: "RequestList",
+
+  propTypes: {
+    activeFilters: PropTypes.array,
+    dispatch: PropTypes.func,
+    isEmpty: PropTypes.bool.isRequired,
+    request: PropTypes.object,
+    networkDetailsOpen: PropTypes.bool,
+  },
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+
+    Prefs.filters.forEach((type) => dispatch(Actions.toggleRequestFilterType(type)));
+    this.splitter = document.querySelector("#network-inspector-view-splitter");
+    this.splitter.addEventListener("mouseup", this.resize);
+    window.addEventListener("resize", this.resize);
+  },
+
+  componentWillReceiveProps(nextProps) {
+    const { dispatch, request = {}, networkDetailsOpen } = this.props;
+
+    if (nextProps.request && nextProps.request !== request) {
+      dispatch(Actions.openNetworkDetails(true));
+    }
+
+    if (nextProps.networkDetailsOpen !== networkDetailsOpen) {
+      this.resize();
+    }
+
+    const {
+      formDataSections,
+      requestHeaders,
+      requestHeadersFromUploadStream,
+      requestPostData,
+    } = nextProps.request || {};
 
-RequestList.displayName = "RequestList";
+    if (!formDataSections && requestHeaders &&
+        requestHeadersFromUploadStream && requestPostData) {
+      getFormDataSections(
+        requestHeaders,
+        requestHeadersFromUploadStream,
+        requestPostData,
+        gNetwork.getString.bind(gNetwork),
+      ).then((newFormDataSections) => {
+        dispatch(Actions.updateRequest(
+          request.id,
+          { formDataSections: newFormDataSections },
+          true,
+        ));
+      });
+    }
+  },
+
+  componentWillUnmount() {
+    Prefs.filters = this.props.activeFilters;
+    this.splitter.removeEventListener("mouseup", this.resize);
+    window.removeEventListener("resize", this.resize);
+  },
 
-RequestList.propTypes = {
-  isEmpty: PropTypes.bool.isRequired,
-};
+  resize() {
+    const { dispatch } = this.props;
+    // Allow requests to settle down first.
+    setNamedTimeout("resize-events", 50, () => {
+      const waterfallHeaderEl =
+        document.querySelector("#requests-menu-waterfall-header-box");
+      if (waterfallHeaderEl) {
+        const { width } = waterfallHeaderEl.getBoundingClientRect();
+        dispatch(Actions.resizeWaterfall(width));
+      }
+    });
+  },
+
+  render() {
+    return (
+      div({ className: "request-list-container" },
+        RequestListHeader(),
+        this.props.isEmpty ? RequestListEmptyNotice() : RequestListContent(),
+      )
+    );
+  }
+});
 
 module.exports = connect(
-  state => ({
-    isEmpty: state.requests.requests.isEmpty()
+  (state) => ({
+    activeFilters: getActiveFilters(state),
+    isEmpty: state.requests.requests.isEmpty(),
+    request: getSelectedRequest(state),
+    networkDetailsOpen: state.ui.networkDetailsOpen,
   })
 )(RequestList);

--- a/devtools/client/netmonitor/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -111,17 +111,17 @@ function Toolbar({
           type: "filter",
           onChange: setRequestFilterText,
         }),
         button({
           className: toggleButtonClassName.join(" "),
           title: networkDetailsOpen ? COLLPASE_DETAILS_PANE : EXPAND_DETAILS_PANE,
           disabled: networkDetailsToggleDisabled,
           tabIndex: "0",
-          onMouseDown: toggleNetworkDetails,
+          onClick: toggleNetworkDetails,
         }),
       )
     )
   );
 }
 
 Toolbar.displayName = "Toolbar";
 

--- a/devtools/client/netmonitor/har/har-builder.js
+++ b/devtools/client/netmonitor/har/har-builder.js
@@ -25,18 +25,17 @@ 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
+ * - items {Array}: List of Network requests to be exported.
  *
  * - 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.
  */

--- a/devtools/client/netmonitor/har/har-exporter.js
+++ b/devtools/client/netmonitor/har/har-exporter.js
@@ -41,18 +41,17 @@ const HarExporter = {
    *        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
+   * - items {Array}: List of Network requests to be exported.
    *
    * - 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.

--- 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
@@ -6,26 +6,29 @@
 /**
  * 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;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let RequestListContextMenu = windowRequire(
+    "devtools/client/netmonitor/components/request-list-context-menu");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(false));
 
   let wait = waitForNetworkEvents(monitor, 1);
   tab.linkedBrowser.reload();
   yield wait;
 
-  yield RequestsMenu.contextMenu.copyAllAsHar();
+  let contextMenu = new RequestListContextMenu({});
+  yield 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");

--- a/devtools/client/netmonitor/har/test/browser_net_har_post_data.js
+++ b/devtools/client/netmonitor/har/test/browser_net_har_post_data.js
@@ -7,30 +7,33 @@
  * 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;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let RequestListContextMenu = windowRequire(
+    "devtools/client/netmonitor/components/request-list-context-menu");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(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 contextMenu = new RequestListContextMenu({});
+  let jsonString = yield 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];

--- a/devtools/client/netmonitor/har/test/browser_net_har_throttle_upload.js
+++ b/devtools/client/netmonitor/har/test/browser_net_har_throttle_upload.js
@@ -11,18 +11,22 @@ add_task(function* () {
 });
 
 function* throttleUploadTest(actuallyThrottle) {
   let { tab, monitor } = yield initNetMonitor(
     HAR_EXAMPLE_URL + "html_har_post-data-test-page.html");
 
   info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
 
-  let { NetMonitorController, NetMonitorView } = monitor.panelWin;
-  let { RequestsMenu } = NetMonitorView;
+  let { document, gStore, windowRequire, NetMonitorController } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let RequestListContextMenu = windowRequire(
+    "devtools/client/netmonitor/components/request-list-context-menu");
+
+  gStore.dispatch(Actions.batchEnable(false));
 
   const size = 4096;
   const uploadSize = actuallyThrottle ? size / 3 : 0;
 
   const request = {
     "NetworkMonitor.throttleData": {
       latencyMean: 0,
       latencyMax: 0,
@@ -30,33 +34,32 @@ function* throttleUploadTest(actuallyThr
       downloadBPSMax: 200000,
       uploadBPSMean: uploadSize,
       uploadBPSMax: uploadSize,
     },
   };
   let client = NetMonitorController.webConsoleClient;
 
   info("sending throttle request");
-  let deferred = promise.defer();
-  client.setPreferences(request, response => {
-    deferred.resolve(response);
+  yield new Promise((resolve) => {
+    client.setPreferences(request, response => {
+      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 contextMenu = new RequestListContextMenu({});
+  let jsonString = yield 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];

--- a/devtools/client/netmonitor/moz.build
+++ b/devtools/client/netmonitor/moz.build
@@ -17,19 +17,17 @@ DevToolsModules(
     'constants.js',
     'events.js',
     'filter-predicates.js',
     'l10n.js',
     'netmonitor-controller.js',
     'netmonitor-view.js',
     'panel.js',
     'prefs.js',
-    'request-list-context-menu.js',
     'request-utils.js',
-    'requests-menu-view.js',
     'sort-predicates.js',
     'store.js',
     'waterfall-background.js',
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 
 with Files('**'):

--- a/devtools/client/netmonitor/netmonitor-controller.js
+++ b/devtools/client/netmonitor/netmonitor-controller.js
@@ -1,35 +1,35 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-disable mozilla/reject-some-requires */
-/* globals window, NetMonitorView, gStore, dumpn */
+/* globals window, NetMonitorView, gStore, gNetwork, dumpn */
 
 "use strict";
 
 const promise = require("promise");
 const Services = require("Services");
-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 { TimelineFront } = require("devtools/shared/fronts/timeline");
+const { CurlUtils } = require("devtools/client/shared/curl");
+const { Task } = require("devtools/shared/task");
 const { ACTIVITY_TYPE } = require("./constants");
 const { EVENTS } = require("./events");
 const { configureStore } = require("./store");
 const Actions = require("./actions/index");
-const { getDisplayedRequestById } = require("./selectors/index");
-const { Prefs } = require("./prefs");
-
-XPCOMUtils.defineConstant(window, "EVENTS", EVENTS);
-XPCOMUtils.defineConstant(window, "ACTIVITY_TYPE", ACTIVITY_TYPE);
-XPCOMUtils.defineConstant(window, "Editor", Editor);
-XPCOMUtils.defineConstant(window, "Prefs", Prefs);
+const {
+  fetchHeaders,
+  formDataURI,
+} = require("./request-utils");
+const {
+  getRequestById,
+  getDisplayedRequestById,
+} = require("./selectors/index");
 
 // Initialize the global Redux store
 window.gStore = configureStore();
 
 /**
  * Object defining the network monitor controller components.
  */
 var NetMonitorController = {
@@ -413,17 +413,18 @@ TargetEventsHandler.prototype = {
    * @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();
+          gStore.dispatch(Actions.batchReset());
+          gStore.dispatch(Actions.clearRequests());
         } else {
           // If the log is persistent, just clear all accumulated timing markers.
           gStore.dispatch(Actions.clearTimingMarkers());
         }
 
         window.emit(EVENTS.TARGET_WILL_NAVIGATE);
         break;
       }
@@ -441,25 +442,28 @@ TargetEventsHandler.prototype = {
     NetMonitorController.shutdownNetMonitor();
   }
 };
 
 /**
  * Functions handling target network events.
  */
 function NetworkEventsHandler() {
+  this.addRequest = this.addRequest.bind(this);
+  this.updateRequest = this.updateRequest.bind(this);
   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._onSecurityInfo = this._onSecurityInfo.bind(this);
   this._onEventTimings = this._onEventTimings.bind(this);
 }
 
 NetworkEventsHandler.prototype = {
   get client() {
     return NetMonitorController._target.client;
   },
 
@@ -543,203 +547,343 @@ NetworkEventsHandler.prototype = {
       startedDateTime,
       request: { method, url },
       isXHR,
       cause,
       fromCache,
       fromServiceWorker
     } = networkInfo;
 
-    NetMonitorView.RequestsMenu.addRequest(
+    this.addRequest(
       actor, {startedDateTime, method, url, isXHR, cause, fromCache, fromServiceWorker}
     );
     window.emit(EVENTS.NETWORK_EVENT, actor);
   },
 
+  addRequest(id, data) {
+    let { method, url, isXHR, cause, startedDateTime, fromCache,
+          fromServiceWorker } = data;
+
+    gStore.dispatch(Actions.addRequest(
+      id,
+      {
+        // Convert the received date/time string to a unix timestamp.
+        startedMillis: Date.parse(startedDateTime),
+        method,
+        url,
+        isXHR,
+        cause,
+        fromCache,
+        fromServiceWorker,
+      },
+      true
+    ))
+    .then(() => window.emit(EVENTS.REQUEST_ADDED, id));
+  },
+
+  updateRequest: Task.async(function* (id, data) {
+    const action = Actions.updateRequest(id, data, true);
+    yield gStore.dispatch(action);
+    let {
+      responseContent,
+      responseCookies,
+      responseHeaders,
+      requestCookies,
+      requestHeaders,
+      requestPostData,
+    } = action.data;
+    let request = getRequestById(gStore.getState(), action.id);
+
+    if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
+      let headers = yield fetchHeaders(
+        requestHeaders, gNetwork.getString.bind(gNetwork));
+      if (headers) {
+        yield gStore.dispatch(Actions.updateRequest(
+          action.id,
+          { requestHeaders: headers },
+          true,
+        ));
+      }
+    }
+
+    if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
+      let headers = yield fetchHeaders(
+        responseHeaders, gNetwork.getString.bind(gNetwork));
+      if (headers) {
+        yield gStore.dispatch(Actions.updateRequest(
+          action.id,
+          { responseHeaders: headers },
+          true,
+        ));
+      }
+    }
+
+    if (request && responseContent && responseContent.content) {
+      let { mimeType } = request;
+      let { text, encoding } = responseContent.content;
+      let response = yield gNetwork.getString(text);
+      let payload = {};
+
+      if (mimeType.includes("image/")) {
+        payload.responseContentDataUri = formDataURI(mimeType, encoding, response);
+      }
+
+      responseContent.content.text = response;
+      payload.responseContent = responseContent;
+
+      yield gStore.dispatch(Actions.updateRequest(action.id, payload, true));
+
+      if (mimeType.includes("image/")) {
+        window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
+      }
+    }
+
+    // Search the POST data upload stream for request headers and add
+    // them as a separate property, different from the classic headers.
+    if (requestPostData && requestPostData.postData) {
+      let { text } = requestPostData.postData;
+      let postData = yield gNetwork.getString(text);
+      const headers = CurlUtils.getHeadersFromMultipartText(postData);
+      const headersSize = headers.reduce((acc, { name, value }) => {
+        return acc + name.length + value.length + 2;
+      }, 0);
+      let payload = {};
+      requestPostData.postData.text = postData;
+      payload.requestPostData = Object.assign({}, requestPostData);
+      payload.requestHeadersFromUploadStream = { headers, headersSize };
+
+      yield gStore.dispatch(Actions.updateRequest(action.id, payload, true));
+    }
+
+    // Fetch request and response cookies long value.
+    // Actor does not provide full sized cookie value when the value is too long
+    // To display values correctly, we need fetch them in each request.
+    if (requestCookies) {
+      let reqCookies = [];
+      // request store cookies in requestCookies or requestCookies.cookies
+      let cookies = requestCookies.cookies ?
+        requestCookies.cookies : requestCookies;
+      // make sure cookies is iterable
+      if (typeof cookies[Symbol.iterator] === "function") {
+        for (let cookie of cookies) {
+          reqCookies.push(Object.assign({}, cookie, {
+            value: yield gNetwork.getString(cookie.value),
+          }));
+        }
+        if (reqCookies.length) {
+          yield gStore.dispatch(Actions.updateRequest(
+            action.id,
+            { requestCookies: reqCookies },
+            true));
+        }
+      }
+    }
+
+    if (responseCookies) {
+      let resCookies = [];
+      // response store cookies in responseCookies or responseCookies.cookies
+      let cookies = responseCookies.cookies ?
+        responseCookies.cookies : responseCookies;
+      // make sure cookies is iterable
+      if (typeof cookies[Symbol.iterator] === "function") {
+        for (let cookie of cookies) {
+          resCookies.push(Object.assign({}, cookie, {
+            value: yield gNetwork.getString(cookie.value),
+          }));
+        }
+        if (resCookies.length) {
+          yield gStore.dispatch(Actions.updateRequest(
+            action.id,
+            { responseCookies: resCookies },
+            true));
+        }
+      }
+    }
+  }),
+
   /**
    * 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, {
+        this.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, {
+        this.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, {
+        this.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, {
+        this.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, {
+    this.updateRequest(response.from, {
       requestHeaders: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       requestCookies: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       requestPostData: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       securityInfo: response.securityInfo
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       responseHeaders: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       responseCookies: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       responseContent: response
     }).then(() => {
       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, {
+    this.updateRequest(response.from, {
       eventTimings: response
     }).then(() => {
       window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from);
     });
   },
 
   /**
    * Fetches the full text of a LongString.

--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -1,102 +1,97 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* eslint-disable mozilla/reject-some-requires */
-/* globals $, gStore, NetMonitorController */
+/* eslint-env browser */
+/* globals gStore, NetMonitorController */
 
 "use strict";
 
-const { RequestsMenuView } = require("./requests-menu-view");
 const { ACTIVITY_TYPE } = require("./constants");
 const { createFactory } = require("devtools/client/shared/vendor/react");
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const Provider = createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
 
 // Components
 const NetworkDetailsPanel = createFactory(require("./shared/components/network-details-panel"));
+const RequestList = createFactory(require("./components/request-list"));
 const StatisticsPanel = createFactory(require("./components/statistics-panel"));
 const Toolbar = createFactory(require("./components/toolbar"));
 
 /**
  * Object defining the network monitor view components.
  */
-var NetMonitorView = {
+exports.NetMonitorView = {
   /**
    * Initializes the network monitor view.
    */
   initialize: function () {
-    this._body = $("#body");
+    this._body = document.querySelector("#body");
 
-    this.networkDetailsPanel = $("#react-network-details-panel-hook");
-
+    this.networkDetailsPanel = document.querySelector(
+      "#react-network-details-panel-hook");
     ReactDOM.render(Provider(
       { store: gStore },
       NetworkDetailsPanel({ toolbox: NetMonitorController._toolbox }),
     ), this.networkDetailsPanel);
 
-    this.statisticsPanel = $("#react-statistics-panel-hook");
+    this.requestList = document.querySelector("#react-request-list-hook");
+    ReactDOM.render(Provider(
+      { store: gStore },
+      RequestList({ toolbox: NetMonitorController._toolbox })
+    ), this.requestList);
 
+    this.statisticsPanel = document.querySelector("#react-statistics-panel-hook");
     ReactDOM.render(Provider(
       { store: gStore },
       StatisticsPanel(),
     ), this.statisticsPanel);
 
-    this.toolbar = $("#react-toolbar-hook");
-
+    this.toolbar = document.querySelector("#react-toolbar-hook");
     ReactDOM.render(Provider(
       { store: gStore },
       Toolbar(),
     ), this.toolbar);
 
-    this.RequestsMenu.initialize(gStore);
-
     // Store watcher here is for observing the statisticsOpen state change.
     // It should be removed once we migrate to react and apply react/redex binding.
     this.unsubscribeStore = gStore.subscribe(storeWatcher(
       false,
       () => gStore.getState().ui.statisticsOpen,
       this.toggleFrontendMode.bind(this)
     ));
   },
 
   /**
    * Destroys the network monitor view.
    */
   destroy: function () {
-    this.RequestsMenu.destroy();
     ReactDOM.unmountComponentAtNode(this.networkDetailsPanel);
+    ReactDOM.unmountComponentAtNode(this.requestList);
     ReactDOM.unmountComponentAtNode(this.statisticsPanel);
     ReactDOM.unmountComponentAtNode(this.toolbar);
     this.unsubscribeStore();
   },
 
   toggleFrontendMode: function () {
     if (gStore.getState().ui.statisticsOpen) {
-      this._body.selectedPanel = $("#react-statistics-panel-hook");
+      this._body.selectedPanel = document.querySelector("#react-statistics-panel-hook");
       NetMonitorController.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
     } else {
-      this._body.selectedPanel = $("#inspector-panel");
+      this._body.selectedPanel = document.querySelector("#inspector-panel");
     }
   },
 };
 
 // A smart store watcher to notify store changes as necessary
 function storeWatcher(initialValue, reduceValue, onChange) {
   let currentValue = initialValue;
 
   return () => {
     const newValue = reduceValue();
     if (newValue !== currentValue) {
       onChange();
       currentValue = newValue;
     }
   };
 }
-
-/**
- * Preliminary setup for the NetMonitorView object.
- */
-NetMonitorView.RequestsMenu = new RequestsMenuView();
-
-exports.NetMonitorView = NetMonitorView;

--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -21,17 +21,17 @@
 
     <vbox id="inspector-panel" flex="1">
       <html:div xmlns="http://www.w3.org/1999/xhtml"
                 id="react-toolbar-hook"/>
       <hbox id="network-table-and-sidebar"
             class="devtools-responsive-container"
             flex="1">
         <html:div xmlns="http://www.w3.org/1999/xhtml"
-                  id="network-table"
+                  id="react-request-list-hook"
                   class="devtools-main-content">
         </html:div>
 
         <splitter id="network-inspector-view-splitter"
                   class="devtools-side-splitter"/>
 
         <box id="splitter-adjustable-box"
              hidden="true">

deleted file mode 100644
--- a/devtools/client/netmonitor/request-list-context-menu.js
+++ /dev/null
@@ -1,358 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* globals 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,
-  getUrlQuery,
-  parseQueryString,
-} = require("./request-utils");
-const Actions = require("./actions/index");
-
-loader.lazyRequireGetter(this, "HarExporter",
-  "devtools/client/netmonitor/har/har-exporter", true);
-
-loader.lazyServiceGetter(this, "clipboardHelper",
-  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
-
-function RequestListContextMenu() {}
-
-RequestListContextMenu.prototype = {
-  get selectedItem() {
-    return NetMonitorView.RequestsMenu.selectedItem;
-  },
-
-  get items() {
-    return NetMonitorView.RequestsMenu.items;
-  },
-
-  /**
-   * Initialization function, called when the RequestsMenu is initialized.
-   */
-  initialize: function (store) {
-    this.store = store;
-  },
-
-  /**
-   * 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 && getUrlQuery(selectedItem.url)),
-      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.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,
-      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.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.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.responseContent &&
-               selectedItem.responseContent.content.text &&
-               selectedItem.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.responseContent &&
-               selectedItem.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.size > 0,
-      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.size > 0,
-      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.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: () => this.store.dispatch(Actions.openStatistics(true))
-    }));
-
-    menu.popup(screenX, screenY, NetMonitorController._toolbox);
-    return menu;
-  },
-
-  /**
-   * Opens selected item in a new tab.
-   */
-  openRequestInTab() {
-    let win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
-    win.openUILinkIn(this.selectedItem.url, "tab", { relatedToCurrent: true });
-  },
-
-  /**
-   * Copy the request url from the currently selected item.
-   */
-  copyUrl() {
-    clipboardHelper.copyString(this.selectedItem.url);
-  },
-
-  /**
-   * Copy the request url query string parameters from the currently
-   * selected item.
-   */
-  copyUrlParams() {
-    let { url } = this.selectedItem;
-    let params = getUrlQuery(url).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;
-
-    // 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 = 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;
-
-    // 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 rawHeaders = this.selectedItem.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 rawHeaders = this.selectedItem.responseHeaders.rawHeaders.trim();
-    if (Services.appinfo.OS !== "WINNT") {
-      rawHeaders = rawHeaders.replace(/\r/g, "");
-    }
-    clipboardHelper.copyString(rawHeaders);
-  },
-
-  /**
-   * Copy image as data uri.
-   */
-  copyImageAsDataUri() {
-    const { mimeType, text, encoding } = this.selectedItem.responseContent.content;
-
-    gNetwork.getString(text).then(string => {
-      let data = formDataURI(mimeType, encoding, string);
-      clipboardHelper.copyString(data);
-    });
-  },
-
-  /**
-   * Copy response data as a string.
-   */
-  copyResponse() {
-    const { text } = this.selectedItem.responseContent.content;
-
-    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),
-      items: this.items,
-      title: title
-    };
-  }
-};
-
-module.exports = RequestListContextMenu;

deleted file mode 100644
--- a/devtools/client/netmonitor/requests-menu-view.js
+++ /dev/null
@@ -1,410 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* globals window, dumpn, $, gNetwork, NetMonitorController */
-
-"use strict";
-
-const { Task } = require("devtools/shared/task");
-const { HTMLTooltip } = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
-const { setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
-const { CurlUtils } = require("devtools/client/shared/curl");
-const { L10N } = require("./l10n");
-const { EVENTS } = require("./events");
-const { createElement, createFactory } = require("devtools/client/shared/vendor/react");
-const ReactDOM = require("devtools/client/shared/vendor/react-dom");
-const { Provider } = require("devtools/client/shared/vendor/react-redux");
-const RequestList = createFactory(require("./components/request-list"));
-const RequestListContextMenu = require("./request-list-context-menu");
-const Actions = require("./actions/index");
-const { Prefs } = require("./prefs");
-
-const {
-  fetchHeaders,
-  formDataURI,
-  getFormDataSections,
-} = require("./request-utils");
-
-const {
-  getActiveFilters,
-  getDisplayedRequests,
-  getRequestById,
-  getSelectedRequest,
-  getSortedRequests,
-} = require("./selectors/index");
-
-// ms
-const RESIZE_REFRESH_RATE = 50;
-
-// A smart store watcher to notify store changes as necessary
-function storeWatcher(initialValue, reduceValue, onChange) {
-  let currentValue = initialValue;
-
-  return () => {
-    const oldValue = currentValue;
-    const newValue = reduceValue(currentValue);
-    if (newValue !== oldValue) {
-      currentValue = newValue;
-      onChange(newValue, oldValue);
-    }
-  };
-}
-
-/**
- * Functions handling the requests menu (containing details about each request,
- * like status, method, file, domain, as well as a waterfall representing
- * timing information).
- */
-function RequestsMenuView() {
-  dumpn("RequestsMenuView was instantiated");
-}
-
-RequestsMenuView.prototype = {
-  /**
-   * Initialization function, called when the network monitor is started.
-   */
-  initialize: function (store) {
-    dumpn("Initializing the RequestsMenuView");
-
-    this.store = store;
-
-    this.contextMenu = new RequestListContextMenu();
-    this.contextMenu.initialize(store);
-
-    Prefs.filters.forEach(type => store.dispatch(Actions.toggleRequestFilterType(type)));
-
-    // Watch selection changes
-    this.store.subscribe(storeWatcher(
-      null,
-      () => getSelectedRequest(this.store.getState()),
-      (newSelected, oldSelected) => this.onSelectionUpdate(newSelected, oldSelected)
-    ));
-
-    // Watch the network details panel toggle and resize the waterfall column on change
-    this.store.subscribe(storeWatcher(
-      false,
-      () => this.store.getState().ui.networkDetailsOpen,
-      () => this.onResize()
-    ));
-
-    // Watch the requestHeaders, requestHeadersFromUploadStream and requestPostData
-    // in order to update formDataSections for composing form data
-    this.store.subscribe(storeWatcher(
-      false,
-      (currentRequest) => {
-        const request = getSelectedRequest(this.store.getState());
-        if (!request) {
-          return {};
-        }
-
-        const isChanged = request.requestHeaders !== currentRequest.requestHeaders ||
-        request.requestHeadersFromUploadStream !==
-        currentRequest.requestHeadersFromUploadStream ||
-        request.requestPostData !== currentRequest.requestPostData;
-
-        if (isChanged) {
-          return {
-            id: request.id,
-            requestHeaders: request.requestHeaders,
-            requestHeadersFromUploadStream: request.requestHeadersFromUploadStream,
-            requestPostData: request.requestPostData,
-          };
-        }
-
-        return currentRequest;
-      },
-      (newRequest) => {
-        const {
-          id,
-          requestHeaders,
-          requestHeadersFromUploadStream,
-          requestPostData,
-        } = newRequest;
-
-        if (requestHeaders && requestHeadersFromUploadStream && requestPostData) {
-          getFormDataSections(
-            requestHeaders,
-            requestHeadersFromUploadStream,
-            requestPostData,
-            gNetwork.getString.bind(gNetwork),
-          ).then((formDataSections) => {
-            this.store.dispatch(Actions.updateRequest(
-              id,
-              { formDataSections },
-              true,
-            ));
-          });
-        }
-      },
-    ));
-
-    this._summary = $("#requests-menu-network-summary-button");
-    this._summary.setAttribute("label", L10N.getStr("networkMenu.empty"));
-
-    this.onResize = this.onResize.bind(this);
-    this._splitter = $("#network-inspector-view-splitter");
-    this._splitter.addEventListener("mouseup", this.onResize);
-    window.addEventListener("resize", this.onResize);
-
-    this.tooltip = new HTMLTooltip(NetMonitorController._toolbox.doc, { type: "arrow" });
-
-    this.mountPoint = $("#network-table");
-    ReactDOM.render(createElement(Provider,
-      { store: this.store },
-      RequestList()
-    ), this.mountPoint);
-  },
-
-  /**
-   * Destruction function, called when the network monitor is closed.
-   */
-  destroy() {
-    dumpn("Destroying the RequestsMenuView");
-
-    Prefs.filters = getActiveFilters(this.store.getState());
-
-    this._splitter.removeEventListener("mouseup", this.onResize);
-    window.removeEventListener("resize", this.onResize);
-
-    this.tooltip.destroy();
-
-    ReactDOM.unmountComponentAtNode(this.mountPoint);
-  },
-
-  /**
-   * Resets this container (removes all the networking information).
-   */
-  reset() {
-    this.store.dispatch(Actions.batchReset());
-    this.store.dispatch(Actions.clearRequests());
-  },
-
-  /**
-   * Removes all network requests and closes the network details panel if open.
-   */
-  clear() {
-    this.store.dispatch(Actions.clearRequests());
-  },
-
-  addRequest(id, data) {
-    let { method, url, isXHR, cause, startedDateTime, fromCache,
-          fromServiceWorker } = data;
-
-    // Convert the received date/time string to a unix timestamp.
-    let startedMillis = Date.parse(startedDateTime);
-
-    const action = Actions.addRequest(
-      id,
-      {
-        startedMillis,
-        method,
-        url,
-        isXHR,
-        cause,
-        fromCache,
-        fromServiceWorker,
-      },
-      true
-    );
-
-    this.store.dispatch(action).then(() => window.emit(EVENTS.REQUEST_ADDED, action.id));
-  },
-
-  updateRequest: Task.async(function* (id, data) {
-    const action = Actions.updateRequest(id, data, true);
-    yield this.store.dispatch(action);
-    let {
-      responseContent,
-      responseCookies,
-      responseHeaders,
-      requestCookies,
-      requestHeaders,
-      requestPostData,
-    } = action.data;
-    let request = getRequestById(this.store.getState(), action.id);
-
-    if (requestHeaders && requestHeaders.headers && requestHeaders.headers.length) {
-      let headers = yield fetchHeaders(
-        requestHeaders, gNetwork.getString.bind(gNetwork));
-      if (headers) {
-        yield this.store.dispatch(Actions.updateRequest(
-          action.id,
-          { requestHeaders: headers },
-          true,
-        ));
-      }
-    }
-
-    if (responseHeaders && responseHeaders.headers && responseHeaders.headers.length) {
-      let headers = yield fetchHeaders(
-        responseHeaders, gNetwork.getString.bind(gNetwork));
-      if (headers) {
-        yield this.store.dispatch(Actions.updateRequest(
-          action.id,
-          { responseHeaders: headers },
-          true,
-        ));
-      }
-    }
-
-    if (request && responseContent && responseContent.content) {
-      let { mimeType } = request;
-      let { text, encoding } = responseContent.content;
-      let response = yield gNetwork.getString(text);
-      let payload = {};
-
-      if (mimeType.includes("image/")) {
-        payload.responseContentDataUri = formDataURI(mimeType, encoding, response);
-      }
-
-      responseContent.content.text = response;
-      payload.responseContent = responseContent;
-
-      yield this.store.dispatch(Actions.updateRequest(action.id, payload, true));
-
-      if (mimeType.includes("image/")) {
-        window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);
-      }
-    }
-
-    // Search the POST data upload stream for request headers and add
-    // them as a separate property, different from the classic headers.
-    if (requestPostData && requestPostData.postData) {
-      let { text } = requestPostData.postData;
-      let postData = yield gNetwork.getString(text);
-      const headers = CurlUtils.getHeadersFromMultipartText(postData);
-      const headersSize = headers.reduce((acc, { name, value }) => {
-        return acc + name.length + value.length + 2;
-      }, 0);
-      let payload = {};
-      requestPostData.postData.text = postData;
-      payload.requestPostData = Object.assign({}, requestPostData);
-      payload.requestHeadersFromUploadStream = { headers, headersSize };
-
-      yield this.store.dispatch(Actions.updateRequest(action.id, payload, true));
-    }
-
-    // Fetch request and response cookies long value.
-    // Actor does not provide full sized cookie value when the value is too long
-    // To display values correctly, we need fetch them in each request.
-    if (requestCookies) {
-      let reqCookies = [];
-      // request store cookies in requestCookies or requestCookies.cookies
-      let cookies = requestCookies.cookies ?
-        requestCookies.cookies : requestCookies;
-      // make sure cookies is iterable
-      if (typeof cookies[Symbol.iterator] === "function") {
-        for (let cookie of cookies) {
-          reqCookies.push(Object.assign({}, cookie, {
-            value: yield gNetwork.getString(cookie.value),
-          }));
-        }
-        if (reqCookies.length) {
-          yield this.store.dispatch(Actions.updateRequest(
-            action.id,
-            { requestCookies: reqCookies },
-            true));
-        }
-      }
-    }
-
-    if (responseCookies) {
-      let resCookies = [];
-      // response store cookies in responseCookies or responseCookies.cookies
-      let cookies = responseCookies.cookies ?
-        responseCookies.cookies : responseCookies;
-      // make sure cookies is iterable
-      if (typeof cookies[Symbol.iterator] === "function") {
-        for (let cookie of cookies) {
-          resCookies.push(Object.assign({}, cookie, {
-            value: yield gNetwork.getString(cookie.value),
-          }));
-        }
-        if (resCookies.length) {
-          yield this.store.dispatch(Actions.updateRequest(
-            action.id,
-            { responseCookies: resCookies },
-            true));
-        }
-      }
-    }
-  }),
-
-  /**
-   * Disable batched updates. Used by tests.
-   */
-  set lazyUpdate(value) {
-    this.store.dispatch(Actions.batchEnable(value));
-  },
-
-  get items() {
-    return getSortedRequests(this.store.getState());
-  },
-
-  get visibleItems() {
-    return getDisplayedRequests(this.store.getState());
-  },
-
-  get itemCount() {
-    return this.store.getState().requests.requests.size;
-  },
-
-  getItemAtIndex(index) {
-    return getSortedRequests(this.store.getState()).get(index);
-  },
-
-  get selectedIndex() {
-    const state = this.store.getState();
-    if (!state.requests.selectedId) {
-      return -1;
-    }
-    return getSortedRequests(state).findIndex(r => r.id === state.requests.selectedId);
-  },
-
-  set selectedIndex(index) {
-    const requests = getSortedRequests(this.store.getState());
-    let itemId = null;
-    if (index >= 0 && index < requests.size) {
-      itemId = requests.get(index).id;
-    }
-    this.store.dispatch(Actions.selectRequest(itemId));
-  },
-
-  get selectedItem() {
-    return getSelectedRequest(this.store.getState());
-  },
-
-  set selectedItem(item) {
-    this.store.dispatch(Actions.selectRequest(item ? item.id : null));
-  },
-
-  /**
-   * Updates the network details panel state when something about the selection changes
-   */
-  onSelectionUpdate(newSelected, oldSelected) {
-    if (newSelected) {
-      // Another item just got selected
-      this.store.dispatch(Actions.openNetworkDetails(true));
-    } else {
-      // Selection just got empty
-      this.store.dispatch(Actions.openNetworkDetails(false));
-    }
-  },
-
-  /**
-   * The resize listener for this container's window.
-   */
-  onResize() {
-    // Allow requests to settle down first.
-    setNamedTimeout("resize-events", RESIZE_REFRESH_RATE, () => {
-      const waterfallHeaderEl = $("#requests-menu-waterfall-header-box");
-      if (waterfallHeaderEl) {
-        const { width } = waterfallHeaderEl.getBoundingClientRect();
-        this.store.dispatch(Actions.resizeWaterfall(width));
-      }
-    });
-  }
-};
-
-exports.RequestsMenuView = RequestsMenuView;

--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -143,24 +143,21 @@ skip-if = true # bug 1309183, it should 
 [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 = true # Redundant for React/Redux version
 [browser_net_sort-02.js]
-[browser_net_sort-03.js]
 [browser_net_statistics-01.js]
 [browser_net_statistics-02.js]
 [browser_net_status-codes.js]
 [browser_net_streaming-response.js]
 [browser_net_throttle.js]
 [browser_net_timeline_ticks.js]
 skip-if = true # TODO: fix the test
 [browser_net_timing-division.js]

--- a/devtools/client/netmonitor/test/browser_net_accessibility-01.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-01.js
@@ -9,28 +9,27 @@
 
 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 { document, NetMonitorView, gStore, windowRequire } = monitor.panelWin;
-  let { RequestsMenu } = NetMonitorView;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
-  RequestsMenu.lazyUpdate = false;
-
-  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  gStore.dispatch(Actions.batchEnable(false));
 
   let count = 0;
   function check(selectedIndex, panelVisibility) {
     info("Performing check " + (count++) + ".");
 
-    is(RequestsMenu.selectedIndex, selectedIndex,
+    let requestItems = Array.from(document.querySelectorAll(".request-list-item"));
+    is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
       "The selected item in the requests menu was incorrect.");
     is(!!document.querySelector(".network-details-panel"), panelVisibility,
       "The network details panel should render correctly.");
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);

--- a/devtools/client/netmonitor/test/browser_net_accessibility-02.js
+++ b/devtools/client/netmonitor/test/browser_net_accessibility-02.js
@@ -9,26 +9,27 @@
 
 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, document, NetMonitorView } = monitor.panelWin;
-  let { RequestsMenu } = NetMonitorView;
+  let { window, document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(false));
 
   let count = 0;
   function check(selectedIndex, panelVisibility) {
     info("Performing check " + (count++) + ".");
 
-    is(RequestsMenu.selectedIndex, selectedIndex,
+    let requestItems = Array.from(document.querySelectorAll(".request-list-item"));
+    is(requestItems.findIndex((item) => item.matches(".selected")), selectedIndex,
       "The selected item in the requests menu was incorrect.");
     is(!!document.querySelector(".network-details-panel"), panelVisibility,
       "The network details panel should render correctly.");
   }
 
   let wait = waitForNetworkEvents(monitor, 2);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests(2);

--- a/devtools/client/netmonitor/test/browser_net_api-calls.js
+++ b/devtools/client/netmonitor/test/browser_net_api-calls.js
@@ -7,33 +7,43 @@
  * 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;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let {
+    getDisplayedRequests,
+    getSortedRequests,
+  } = windowRequire("devtools/client/netmonitor/selectors/index");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(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, RequestsMenu.getItemAtIndex(index), "GET", uri);
+    verifyRequestItemTarget(
+      document,
+      getDisplayedRequests(gStore.getState()),
+      getSortedRequests(gStore.getState()).get(index),
+      "GET",
+      uri
+     );
   });
 
   yield teardown(monitor);
 });

--- a/devtools/client/netmonitor/test/browser_net_autoscroll.js
+++ b/devtools/client/netmonitor/test/browser_net_autoscroll.js
@@ -5,22 +5,23 @@
 
 /**
  * Bug 863102 - Automatically scroll down upon new network requests.
  */
 add_task(function* () {
   requestLongerTimeout(2);
 
   let { monitor } = yield initNetMonitor(INFINITE_GET_URL);
-  let { $ } = monitor.panelWin;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
 
   // Wait until the first request makes the empty notice disappear
   yield waitForRequestListToAppear();
 
-  let requestsContainer = $(".requests-menu-contents");
+  let requestsContainer = document.querySelector(".requests-menu-contents");
   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(true, "Scrolled to bottom on overflow.");
 
@@ -41,34 +42,36 @@ add_task(function* () {
   requestsContainer.scrollTop = requestsContainer.scrollHeight;
   ok(scrolledToBottom(requestsContainer), "Set scroll position to bottom.");
   yield waitForNetworkEvents(monitor, 8);
   yield waitForScroll();
   ok(true, "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;
+  gStore.dispatch(Actions.selectRequestByIndex(0));
   yield waitForNetworkEvents(monitor, 8);
   yield waitSomeTime();
   is(requestsContainer.scrollTop, 0, "Did not scroll.");
 
   // Done: clean up.
   return teardown(monitor);
 
   function waitForRequestListToAppear() {
     info("Waiting until the empty notice disappears and is replaced with the list");
-    return waitUntil(() => !!$(".requests-menu-contents"));
+    return waitUntil(() => !!document.querySelector(".requests-menu-contents"));
   }
 
   function* waitForRequestsToOverflowContainer() {
     info("Waiting for enough requests to overflow the container");
     while (true) {
       info("Waiting for one network request");
       yield waitForNetworkEvents(monitor, 1);
+      console.log(requestsContainer.scrollHeight);
+      console.log(requestsContainer.clientHeight)
       if (requestsContainer.scrollHeight > requestsContainer.clientHeight) {
         info("The list is long enough, returning");
         return;
       }
     }
   }
 
   function scrolledToBottom(element) {

--- a/devtools/client/netmonitor/test/browser_net_brotli.js
+++ b/devtools/client/netmonitor/test/browser_net_brotli.js
@@ -11,42 +11,50 @@ const BROTLI_REQUESTS = 1;
  */
 
 add_task(function* () {
   let { L10N } = require("devtools/client/netmonitor/l10n");
 
   let { tab, monitor } = yield initNetMonitor(BROTLI_URL);
   info("Starting test... ");
 
-  let { document, NetMonitorView } = monitor.panelWin;
-  let { RequestsMenu } = NetMonitorView;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let {
+    getDisplayedRequests,
+    getSortedRequests,
+  } = windowRequire("devtools/client/netmonitor/selectors/index");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(false));
 
   let wait = waitForNetworkEvents(monitor, BROTLI_REQUESTS);
   yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
     content.wrappedJSObject.performRequests();
   });
   yield wait;
 
-  verifyRequestItemTarget(RequestsMenu, RequestsMenu.getItemAtIndex(0),
+  verifyRequestItemTarget(
+    document,
+    getDisplayedRequests(gStore.getState()),
+    getSortedRequests(gStore.getState()).get(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
     });
 
   wait = waitForDOM(document, "#response-panel .editor-mount iframe");
-  EventUtils.sendMouseEvent({ type: "mousedown" },
+  EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector(".network-details-panel-toggle"));
-  document.querySelector("#response-tab").click();
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.querySelector("#response-tab"));
   let [editorFrame] = yield wait;
 
   yield once(editorFrame, "DOMContentLoaded");
   yield waitForDOM(editorFrame.contentDocument, ".CodeMirror-code");
   yield testResponse("br");
 
   yield teardown(monitor);
 

--- a/devtools/client/netmonitor/test/browser_net_cached-status.js
+++ b/devtools/client/netmonitor/test/browser_net_cached-status.js
@@ -6,20 +6,24 @@
 /**
  * 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;
+  let { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let {
+    getDisplayedRequests,
+    getSortedRequests,
+  } = windowRequire("devtools/client/netmonitor/selectors/index");
 
-  RequestsMenu.lazyUpdate = false;
+  gStore.dispatch(Actions.batchEnable(false));
 
   const REQUEST_DATA = [
     {
       method: "GET",
       uri: STATUS_CODES_SJS + "?sts=ok&cached",
       details: {
         status: 200,
         statusText: "OK",
@@ -84,21 +88,25 @@ add_task(function* () {
   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(RequestsMenu, item,
-      request.method, request.uri, request.details);
+    yield verifyRequestItemTarget(
+      document,
+      getDisplayedRequests(gStore.getState()),
+      getSortedRequests(gStore.getState()).get(index),
+      request.method,
+      request.uri,
+      request.details
+    );
 
     index++;
   }
 
   yield teardown(monitor);
 
   function* performRequestsAndWait() {
     let wait = waitForNetworkEvents(monitor, 3);

--- a/devtools/client/netmonitor/test/browser_net_cause.js
+++ b/devtools/client/netmonitor/test/browser_net_cause.js
@@ -83,33 +83,43 @@ add_task(function* () {
 
   // 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 { document, gStore, windowRequire } = monitor.panelWin;
+  let Actions = windowRequire("devtools/client/netmonitor/actions/index");
+  let {
+    getDisplayedRequests,
+    getSortedRequests,
+  } = windowRequire("devtools/client/netmonitor/selectors/index");
+
+  gStore.dispatch(Actions.batchEnable(false));
   let wait = waitForNetworkEvents(monitor, EXPECTED_REQUESTS.length);
   tab.linkedBrowser.loadURI(CAUSE_URL);
   yield wait;
 
-  is(RequestsMenu.itemCount, EXPECTED_REQUESTS.length,
+  is(gStore.getState().requests.requests.size, 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(RequestsMenu, requestItem,
-      method, url, { cause: { type: causeType, loadingDocumentUri: causeUri } }
+    let requestItem = getSortedRequests(gStore.getState()).get(i);
+    verifyRequestItemTarget(
+      document,
+      getDisplayedRequests(gStore.getState()),
+      requestItem,
+      method,
+      url,
+      { cause: { type: causeType, loadingDocumentUri: causeUri } }
     );
 
     let { stacktrace } = requestItem.cause;
     let stackLen = stacktrace ? stacktrace.length : 0;
 
     if (stack) {
       ok(stacktrace, `Request #${i} has a stacktrace`);
       ok(stackLen > 0,
@@ -129,17 +139,18 @@ add_task(function* () {
         });
       }
     } 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"));
+  EventUtils.sendMouseEvent({ type: "click" },
+    document.querySelector("#requests-menu-cause-button"));
   let expectedOrder = EXPECTED_REQUESTS.map(r => r.causeType).sort();
   expectedOrder.forEach((expectedCause, i) => {
-    const cause = RequestsMenu.getItemAtIndex(i).cause.type;
+    const cause = getSortedRequests(gStore.getState()).get(i).cause.type;
     is(cause, expectedCause, `The request #${i} has the expected cause after sorting`);
   });
 
   yield teardown(monitor);
 });