--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -9,18 +9,17 @@ devtools.jar:
     content/shared/widgets/widgets.css (shared/widgets/widgets.css)
     content/shared/widgets/VariablesView.xul (shared/widgets/VariablesView.xul)
     content/projecteditor/chrome/content/projecteditor.xul (projecteditor/chrome/content/projecteditor.xul)
     content/projecteditor/lib/helpers/readdir.js (projecteditor/lib/helpers/readdir.js)
     content/projecteditor/chrome/content/projecteditor-loader.xul (projecteditor/chrome/content/projecteditor-loader.xul)
     content/projecteditor/chrome/content/projecteditor-test.xul (projecteditor/chrome/content/projecteditor-test.xul)
     content/projecteditor/chrome/content/projecteditor-loader.js (projecteditor/chrome/content/projecteditor-loader.js)
     content/netmonitor/netmonitor.xul (netmonitor/netmonitor.xul)
-    content/netmonitor/netmonitor-controller.js (netmonitor/netmonitor-controller.js)
-    content/netmonitor/netmonitor-view.js (netmonitor/netmonitor-view.js)
+    content/netmonitor/netmonitor.js (netmonitor/netmonitor.js)
     content/webconsole/webconsole.xul (webconsole/webconsole.xul)
 *   content/scratchpad/scratchpad.xul (scratchpad/scratchpad.xul)
     content/scratchpad/scratchpad.js (scratchpad/scratchpad.js)
     content/shared/splitview.css (shared/splitview.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/shared/frame-script-utils.js (shared/frame-script-utils.js)
     content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
     content/storage/storage.xul (storage/storage.xul)

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/actions/batching.js
@@ -0,0 +1,42 @@
+/* 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 {
+  BATCH_ACTIONS,
+  BATCH_ENABLE,
+  BATCH_RESET,
+} = require("../constants");
+
+/**
+ * Process multiple actions at once as part of one dispatch, and produce only one
+ * state update at the end. This action is not processed by any reducer, but by a
+ * special store enhancer.
+ */
+function batchActions(actions) {
+  return {
+    type: BATCH_ACTIONS,
+    actions
+  };
+}
+
+function batchEnable(enabled) {
+  return {
+    type: BATCH_ENABLE,
+    enabled
+  };
+}
+
+function batchReset() {
+  return {
+    type: BATCH_RESET,
+  };
+}
+
+module.exports = {
+  batchActions,
+  batchEnable,
+  batchReset,
+};

--- a/devtools/client/netmonitor/actions/filters.js
+++ b/devtools/client/netmonitor/actions/filters.js
@@ -37,22 +37,22 @@ function enableFilterTypeOnly(filter) {
     type: ENABLE_FILTER_TYPE_ONLY,
     filter,
   };
 }
 
 /**
  * Set filter text.
  *
- * @param {string} url - A filter text is going to be set
+ * @param {string} text - A filter text is going to be set
  */
-function setFilterText(url) {
+function setFilterText(text) {
   return {
     type: SET_FILTER_TEXT,
-    url,
+    text,
   };
 }
 
 module.exports = {
   toggleFilterType,
   enableFilterTypeOnly,
   setFilterText,
 };

--- a/devtools/client/netmonitor/actions/index.js
+++ b/devtools/client/netmonitor/actions/index.js
@@ -1,11 +1,23 @@
 /* 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 batching = require("./batching");
 const filters = require("./filters");
 const requests = require("./requests");
+const selection = require("./selection");
+const sort = require("./sort");
+const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
 
-module.exports = Object.assign({}, filters, requests, ui);
+Object.assign(exports,
+  batching,
+  filters,
+  requests,
+  selection,
+  sort,
+  timingMarkers,
+  ui
+);

--- a/devtools/client/netmonitor/actions/moz.build
+++ b/devtools/client/netmonitor/actions/moz.build
@@ -1,10 +1,14 @@
 # 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(
+    'batching.js',
     'filters.js',
     'index.js',
     'requests.js',
+    'selection.js',
+    'sort.js',
+    'timing-markers.js',
     'ui.js',
 )

--- a/devtools/client/netmonitor/actions/requests.js
+++ b/devtools/client/netmonitor/actions/requests.js
@@ -1,25 +1,65 @@
 /* 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 {
-  UPDATE_REQUESTS,
+  ADD_REQUEST,
+  UPDATE_REQUEST,
+  CLONE_SELECTED_REQUEST,
+  REMOVE_SELECTED_CUSTOM_REQUEST,
+  CLEAR_REQUESTS,
 } = require("../constants");
 
+function addRequest(id, data, batch) {
+  return {
+    type: ADD_REQUEST,
+    id,
+    data,
+    meta: { batch },
+  };
+}
+
+function updateRequest(id, data, batch) {
+  return {
+    type: UPDATE_REQUEST,
+    id,
+    data,
+    meta: { batch },
+  };
+}
+
 /**
- * Update request items
- *
- * @param {array} requests - visible request items
+ * Clone the currently selected request, set the "isCustom" attribute.
+ * Used by the "Edit and Resend" feature.
  */
-function updateRequests(items) {
+function cloneSelectedRequest() {
   return {
-    type: UPDATE_REQUESTS,
-    items,
+    type: CLONE_SELECTED_REQUEST
+  };
+}
+
+/**
+ * Remove a request from the list. Supports removing only cloned requests with a
+ * "isCustom" attribute. Other requests never need to be removed.
+ */
+function removeSelectedCustomRequest() {
+  return {
+    type: REMOVE_SELECTED_CUSTOM_REQUEST
+  };
+}
+
+function clearRequests() {
+  return {
+    type: CLEAR_REQUESTS
   };
 }
 
 module.exports = {
-  updateRequests,
+  addRequest,
+  updateRequest,
+  cloneSelectedRequest,
+  removeSelectedCustomRequest,
+  clearRequests,
 };

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/actions/selection.js
@@ -0,0 +1,67 @@
+/* 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, PRESELECT_REQUEST } = require("../constants");
+
+/**
+ * When a new request with a given id is added in future, select it immediately.
+ * Used by the "Edit and Resend" feature, where we know in advance the ID of the
+ * request, at a time when it wasn't sent yet.
+ */
+function preselectRequest(id) {
+  return {
+    type: PRESELECT_REQUEST,
+    id
+  };
+}
+
+/**
+ * Select request with a given id.
+ */
+function selectRequest(id) {
+  return {
+    type: SELECT_REQUEST,
+    id
+  };
+}
+
+const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
+
+/**
+ * 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) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const requests = getDisplayedRequests(state);
+
+    if (requests.isEmpty()) {
+      return;
+    }
+
+    const selIndex = requests.findIndex(r => r.id === state.requests.selectedId);
+
+    if (delta === "PAGE_DOWN") {
+      delta = Math.ceil(requests.size / PAGE_SIZE_ITEM_COUNT_RATIO);
+    } else if (delta === "PAGE_UP") {
+      delta = -Math.ceil(requests.size / PAGE_SIZE_ITEM_COUNT_RATIO);
+    }
+
+    const newIndex = Math.min(Math.max(0, selIndex + delta), requests.size - 1);
+    const newItem = requests.get(newIndex);
+    dispatch(selectRequest(newItem.id));
+  };
+}
+
+module.exports = {
+  preselectRequest,
+  selectRequest,
+  selectDelta,
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/actions/sort.js
@@ -0,0 +1,18 @@
+/* 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 { SORT_BY } = require("../constants");
+
+function sortBy(sortType) {
+  return {
+    type: SORT_BY,
+    sortType
+  };
+}
+
+module.exports = {
+  sortBy
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/actions/timing-markers.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+const { ADD_TIMING_MARKER, CLEAR_TIMING_MARKERS } = require("../constants");
+
+exports.addTimingMarker = (marker) => {
+  return {
+    type: ADD_TIMING_MARKER,
+    marker
+  };
+};
+
+exports.clearTimingMarkers = () => {
+  return {
+    type: CLEAR_TIMING_MARKERS
+  };
+};

--- a/devtools/client/netmonitor/actions/ui.js
+++ b/devtools/client/netmonitor/actions/ui.js
@@ -1,17 +1,17 @@
 /* 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 {
   OPEN_SIDEBAR,
-  TOGGLE_SIDEBAR,
+  WATERFALL_RESIZE,
 } = require("../constants");
 
 /**
  * Change sidebar open state.
  *
  * @param {boolean} open - open state
  */
 function openSidebar(open) {
@@ -20,17 +20,26 @@ function openSidebar(open) {
     open,
   };
 }
 
 /**
  * Toggle sidebar open state.
  */
 function toggleSidebar() {
+  return (dispatch, getState) => dispatch(openSidebar(!getState().ui.sidebarOpen));
+}
+
+/**
+ * Waterfall width has changed (likely on window resize). Update the UI.
+ */
+function resizeWaterfall(width) {
   return {
-    type: TOGGLE_SIDEBAR,
+    type: WATERFALL_RESIZE,
+    width
   };
 }
 
 module.exports = {
   openSidebar,
   toggleSidebar,
+  resizeWaterfall,
 };

--- a/devtools/client/netmonitor/components/clear-button.js
+++ b/devtools/client/netmonitor/components/clear-button.js
@@ -1,29 +1,32 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorView */
-
 "use strict";
 
 const { DOM } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../l10n");
+const Actions = require("../actions/index");
 
 const { button } = DOM;
 
 /*
  * Clear button component
  * A type of tool button is responsible for cleaning network requests.
  */
-function ClearButton() {
+function ClearButton({ onClick }) {
   return button({
     id: "requests-menu-clear-button",
     className: "devtools-button devtools-clear-icon",
     title: L10N.getStr("netmonitor.toolbar.clear"),
-    onClick: () => {
-      NetMonitorView.RequestsMenu.clear();
-    },
+    onClick,
   });
 }
 
-module.exports = ClearButton;
+module.exports = connect(
+  undefined,
+  dispatch => ({
+    onClick: () => dispatch(Actions.clearRequests())
+  })
+)(ClearButton);

--- a/devtools/client/netmonitor/components/moz.build
+++ b/devtools/client/netmonitor/components/moz.build
@@ -1,12 +1,18 @@
 # 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(
     'clear-button.js',
     'filter-buttons.js',
+    'request-list-content.js',
+    'request-list-empty.js',
+    'request-list-header.js',
+    'request-list-item.js',
+    'request-list-tooltip.js',
+    'request-list.js',
     'search-box.js',
     'summary-button.js',
     'toggle-button.js',
     'toolbar.js',
 )

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -0,0 +1,255 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* globals NetMonitorView */
+
+"use strict";
+
+const { Task } = require("devtools/shared/task");
+const { createClass, createFactory, DOM } = require("devtools/client/shared/vendor/react");
+const { div } = DOM;
+const Actions = require("../actions/index");
+const RequestListItem = createFactory(require("./request-list-item"));
+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");
+
+// 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",
+
+  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, {
+      toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
+      interactive: true
+    });
+
+    // Install event handler to hide the tooltip on scroll
+    this.refs.contentEl.addEventListener("scroll", this.onScroll, true);
+  },
+
+  componentWillUpdate() {
+    // Check if the list is scrolled to bottom, before UI update
+    this.shouldScrollBottom = this.isScrolledToBottom();
+  },
+
+  componentDidUpdate(prevProps) {
+    // Update the CSS variables for waterfall scaling after props change
+    this.setScalingStyles();
+
+    // Keep the list scrolled to bottom if a new row was added
+    if (this.shouldScrollBottom) {
+      let node = this.refs.contentEl;
+      node.scrollTop = node.scrollHeight;
+    }
+  },
+
+  componentWillUnmount() {
+    this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
+
+    // Uninstall the tooltip event handler
+    this.props.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
+   */
+  setScalingStyles(prevProps) {
+    const { scale } = this.props;
+    if (scale == this.currentScale) {
+      return;
+    }
+
+    this.currentScale = scale;
+
+    const { style } = this.refs.contentEl;
+    style.removeProperty("--timings-scale");
+    style.removeProperty("--timings-rev-scale");
+    style.setProperty("--timings-scale", scale);
+    style.setProperty("--timings-rev-scale", 1 / scale);
+  },
+
+  isScrolledToBottom() {
+    const { contentEl } = this.refs;
+    const lastChildEl = contentEl.lastElementChild;
+
+    if (!lastChildEl) {
+      return false;
+    }
+
+    let lastChildRect = lastChildEl.getBoundingClientRect();
+    let contentRect = contentEl.getBoundingClientRect();
+
+    return (lastChildRect.height + lastChildRect.top) <= contentRect.bottom;
+  },
+
+  /**
+   * The predicate used when deciding whether a popup should be shown
+   * over a request item or not.
+   *
+   * @param nsIDOMNode target
+   *        The element node currently being hovered.
+   * @param object tooltip
+   *        The current tooltip instance.
+   * @return {Promise}
+   */
+  onHover: Task.async(function* (target, tooltip) {
+    let itemEl = target.closest(".request-list-item");
+    if (!itemEl) {
+      return false;
+    }
+    let itemId = itemEl.dataset.id;
+    if (!itemId) {
+      return false;
+    }
+    let requestItem = this.props.displayedRequests.find(r => r.id == itemId);
+    if (!requestItem) {
+      return false;
+    }
+
+    if (requestItem.responseContent && target.closest(".requests-menu-icon-and-file")) {
+      return setTooltipImageContent(tooltip, itemEl, requestItem);
+    } else if (requestItem.cause && target.closest(".requests-menu-cause-stack")) {
+      return setTooltipStackTraceContent(tooltip, requestItem);
+    }
+
+    return false;
+  }),
+
+  /**
+   * Scroll listener for the requests menu view.
+   */
+  onScroll() {
+    this.props.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;
+
+    switch (e.keyCode) {
+      case KeyCodes.DOM_VK_UP:
+      case KeyCodes.DOM_VK_LEFT:
+        delta = -1;
+        break;
+      case KeyCodes.DOM_VK_DOWN:
+      case KeyCodes.DOM_VK_RIGHT:
+        delta = +1;
+        break;
+      case KeyCodes.DOM_VK_PAGE_UP:
+        delta = "PAGE_UP";
+        break;
+      case KeyCodes.DOM_VK_PAGE_DOWN:
+        delta = "PAGE_DOWN";
+        break;
+      case KeyCodes.DOM_VK_HOME:
+        delta = -Infinity;
+        break;
+      case KeyCodes.DOM_VK_END:
+        delta = +Infinity;
+        break;
+    }
+
+    if (delta) {
+      // Prevent scrolling when pressing navigation keys.
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.onSelectDelta(delta);
+    }
+  },
+
+  /**
+   * 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;
+  },
+
+  /**
+   * If a focused item was unmounted, transfer the focus to the container element.
+   */
+  onFocusedNodeUnmount() {
+    if (this.refs.contentEl) {
+      this.refs.contentEl.focus();
+    }
+  },
+
+  render() {
+    const { selectedRequestId,
+            displayedRequests,
+            firstRequestStartedMillis,
+            onItemMouseDown,
+            onItemContextMenu,
+            onSecurityIconClick } = this.props;
+
+    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,
+      }))
+    );
+  },
+});
+
+module.exports = connect(
+  state => ({
+    displayedRequests: getDisplayedRequests(state),
+    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)),
+    /**
+     * 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;
+      if (securityState && securityState !== "insecure") {
+        // Choose the security tab.
+        NetMonitorView.NetworkDetails.widget.selectedIndex = 5;
+      }
+    },
+  })
+)(RequestListContent);

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-empty.js
@@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* globals NetMonitorView */
+
+"use strict";
+
+const { createClass, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
+const { L10N } = require("../l10n");
+const { div, span, button } = DOM;
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+
+/**
+ * UI displayed when the request list is empty. Contains instructions on reloading
+ * the page and on triggering performance analysis of the page.
+ */
+const RequestListEmptyNotice = createClass({
+  displayName: "RequestListEmptyNotice",
+
+  propTypes: {
+    onReloadClick: PropTypes.func.isRequired,
+    onPerfClick: PropTypes.func.isRequired,
+  },
+
+  render() {
+    return div(
+      {
+        id: "requests-menu-empty-notice",
+        className: "request-list-empty-notice",
+      },
+      div({ id: "notice-reload-message" },
+        span(null, L10N.getStr("netmonitor.reloadNotice1")),
+        button(
+          {
+            id: "requests-menu-reload-notice-button",
+            className: "devtools-toolbarbutton",
+            "data-standalone": true,
+            onClick: this.props.onReloadClick,
+          },
+          L10N.getStr("netmonitor.reloadNotice2")
+        ),
+        span(null, L10N.getStr("netmonitor.reloadNotice3"))
+      ),
+      div({ id: "notice-perf-message" },
+        span(null, L10N.getStr("netmonitor.perfNotice1")),
+        button({
+          id: "requests-menu-perf-notice-button",
+          title: L10N.getStr("netmonitor.perfNotice3"),
+          className: "devtools-button",
+          "data-standalone": true,
+          onClick: this.props.onPerfClick,
+        }),
+        span(null, L10N.getStr("netmonitor.perfNotice2"))
+      )
+    );
+  }
+});
+
+module.exports = connect(
+  undefined,
+  dispatch => ({
+    onPerfClick: e => NetMonitorView.toggleFrontendMode(),
+    onReloadClick: e => NetMonitorView.reloadPage(),
+  })
+)(RequestListEmptyNotice);

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-header.js
@@ -0,0 +1,197 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* globals document */
+
+"use strict";
+
+const { createClass, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
+const { div, button } = DOM;
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { L10N } = require("../l10n");
+const { getWaterfallScale } = require("../selectors/index");
+const Actions = require("../actions/index");
+const WaterfallBackground = require("../waterfall-background");
+
+// ms
+const REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE = 5;
+// px
+const REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN = 60;
+
+const REQUEST_TIME_DECIMALS = 2;
+
+const HEADERS = [
+  { name: "status", label: "status3" },
+  { name: "method" },
+  { name: "file", boxName: "icon-and-file" },
+  { name: "domain", boxName: "security-and-domain" },
+  { name: "cause" },
+  { name: "type" },
+  { name: "transferred" },
+  { name: "size" },
+  { name: "waterfall" }
+];
+
+/**
+ * Render the request list header with sorting arrows for columns.
+ * Displays tick marks in the waterfall column header.
+ * Also draws the waterfall background canvas and updates it when needed.
+ */
+const RequestListHeader = createClass({
+  displayName: "RequestListHeader",
+
+  propTypes: {
+    sort: PropTypes.object,
+    scale: PropTypes.number,
+    waterfallWidth: PropTypes.number,
+    onHeaderClick: PropTypes.func.isRequired,
+  },
+
+  componentDidMount() {
+    this.background = new WaterfallBackground(document);
+    this.background.draw(this.props);
+  },
+
+  componentDidUpdate() {
+    this.background.draw(this.props);
+  },
+
+  componentWillUnmount() {
+    this.background.destroy();
+    this.background = null;
+  },
+
+  render() {
+    const { sort, scale, waterfallWidth, onHeaderClick } = this.props;
+
+    return div(
+      { id: "requests-menu-toolbar", className: "devtools-toolbar" },
+      div({ id: "toolbar-labels" },
+        HEADERS.map(header => {
+          const name = header.name;
+          const boxName = header.boxName || name;
+          const label = L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
+
+          let sorted, sortedTitle;
+          const active = sort.type == name ? true : undefined;
+          if (active) {
+            sorted = sort.ascending ? "ascending" : "descending";
+            sortedTitle = L10N.getStr(sort.ascending
+              ? "networkMenu.sortedAsc"
+              : "networkMenu.sortedDesc");
+          }
+
+          return div(
+            {
+              id: `requests-menu-${boxName}-header-box`,
+              key: name,
+              className: `requests-menu-header requests-menu-${boxName}`,
+              // Used to style the next column.
+              "data-active": active,
+            },
+            button(
+              {
+                id: `requests-menu-${name}-button`,
+                className: `requests-menu-header-button requests-menu-${name}`,
+                "data-sorted": sorted,
+                title: sortedTitle,
+                onClick: () => onHeaderClick(name),
+              },
+              name == "waterfall" ? WaterfallLabel(waterfallWidth, scale, label)
+                                  : div({ className: "button-text" }, label),
+              div({ className: "button-icon" })
+            )
+          );
+        })
+      )
+    );
+  }
+});
+
+/**
+ * Build the waterfall header - timing tick marks with the right spacing
+ */
+function waterfallDivisionLabels(waterfallWidth, scale) {
+  let labels = [];
+
+  // Build new millisecond tick labels...
+  let timingStep = REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE;
+  let scaledStep = scale * timingStep;
+
+  // Ignore any divisions that would end up being too close to each other.
+  while (scaledStep < REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN) {
+    scaledStep *= 2;
+  }
+
+  // Insert one label for each division on the current scale.
+  for (let x = 0; x < waterfallWidth; x += scaledStep) {
+    let millisecondTime = x / scale;
+
+    let normalizedTime = millisecondTime;
+    let divisionScale = "millisecond";
+
+    // If the division is greater than 1 minute.
+    if (normalizedTime > 60000) {
+      normalizedTime /= 60000;
+      divisionScale = "minute";
+    } else if (normalizedTime > 1000) {
+      // If the division is greater than 1 second.
+      normalizedTime /= 1000;
+      divisionScale = "second";
+    }
+
+    // Showing too many decimals is bad UX.
+    if (divisionScale == "millisecond") {
+      normalizedTime |= 0;
+    } else {
+      normalizedTime = L10N.numberWithDecimals(normalizedTime, REQUEST_TIME_DECIMALS);
+    }
+
+    let width = (x + scaledStep | 0) - (x | 0);
+    // Adjust the first marker for the borders
+    if (x == 0) {
+      width -= 2;
+    }
+    // Last marker doesn't need a width specified at all
+    if (x + scaledStep >= waterfallWidth) {
+      width = undefined;
+    }
+
+    labels.push(div(
+      {
+        key: labels.length,
+        className: "requests-menu-timings-division",
+        "data-division-scale": divisionScale,
+        style: { width }
+      },
+      L10N.getFormatStr("networkMenu." + divisionScale, normalizedTime)
+    ));
+  }
+
+  return labels;
+}
+
+function WaterfallLabel(waterfallWidth, scale, label) {
+  let className = "button-text requests-menu-waterfall-label-wrapper";
+
+  if (scale != null) {
+    label = waterfallDivisionLabels(waterfallWidth, scale);
+    className += " requests-menu-waterfall-visible";
+  }
+
+  return div({ className }, label);
+}
+
+module.exports = connect(
+  state => ({
+    sort: state.sort,
+    scale: getWaterfallScale(state),
+    waterfallWidth: state.ui.waterfallWidth,
+    firstRequestStartedMillis: state.requests.firstStartedMillis,
+    timingMarkers: state.timingMarkers,
+  }),
+  dispatch => ({
+    onHeaderClick: type => dispatch(Actions.sortBy(type)),
+  })
+)(RequestListHeader);

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-item.js
@@ -0,0 +1,346 @@
+/* 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 { createClass, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
+const { div, span, img } = DOM;
+const { L10N } = require("../l10n");
+const { getFormattedSize } = require("../utils/format-utils");
+const { getAbbreviatedMimeType } = require("../request-utils");
+
+/**
+ * Render one row in the request list.
+ */
+const RequestListItem = createClass({
+  displayName: "RequestListItem",
+
+  propTypes: {
+    item: PropTypes.object.isRequired,
+    index: PropTypes.number.isRequired,
+    isSelected: PropTypes.bool.isRequired,
+    firstRequestStartedMillis: PropTypes.number.isRequired,
+    onContextMenu: PropTypes.func.isRequired,
+    onMouseDown: PropTypes.func.isRequired,
+    onSecurityIconClick: PropTypes.func.isRequired,
+  },
+
+  componentDidMount() {
+    if (this.props.isSelected) {
+      this.refs.el.focus();
+    }
+  },
+
+  shouldComponentUpdate(nextProps) {
+    return !relevantPropsEqual(this.props.item, nextProps.item)
+      || this.props.index !== nextProps.index
+      || this.props.isSelected !== nextProps.isSelected
+      || this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis;
+  },
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isSelected && this.props.isSelected) {
+      this.refs.el.focus();
+      if (this.props.onFocusedNodeChange) {
+        this.props.onFocusedNodeChange();
+      }
+    }
+  },
+
+  componentWillUnmount() {
+    // If this node is being destroyed and has focus, transfer the focus manually
+    // to the parent tree component. Otherwise, the focus will get lost and keyboard
+    // navigation in the tree will stop working. This is a workaround for a XUL bug.
+    // See bugs 1259228 and 1152441 for details.
+    // DE-XUL: Remove this hack once all usages are only in HTML documents.
+    if (this.props.isSelected) {
+      this.refs.el.blur();
+      if (this.props.onFocusedNodeUnmount) {
+        this.props.onFocusedNodeUnmount();
+      }
+    }
+  },
+
+  render() {
+    const {
+      item,
+      index,
+      isSelected,
+      firstRequestStartedMillis,
+      onContextMenu,
+      onMouseDown,
+      onSecurityIconClick
+    } = this.props;
+
+    let classList = [ "request-list-item" ];
+    if (isSelected) {
+      classList.push("selected");
+    }
+    classList.push(index % 2 ? "odd" : "even");
+
+    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)
+    );
+  }
+});
+
+/**
+ * Used by shouldComponentUpdate: compare two items, and compare only properties
+ * relevant for rendering the RequestListItem. Other properties (like request and
+ * response headers, cookies, bodies) are ignored. These are very useful for the
+ * sidebar details, but not here.
+ */
+const RELEVANT_ITEM_PROPS = [
+  "status",
+  "statusText",
+  "fromCache",
+  "fromServiceWorker",
+  "method",
+  "url",
+  "responseContentDataUri",
+  "remoteAddress",
+  "securityState",
+  "cause",
+  "mimeType",
+  "contentSize",
+  "transferredSize",
+  "startedMillis",
+  "totalTime",
+  "eventTimings",
+];
+
+function relevantPropsEqual(item1, item2) {
+  return item1 === item2 || RELEVANT_ITEM_PROPS.every(p => item1[p] === item2[p]);
+}
+
+function StatusColumn(item) {
+  const { status, statusText, fromCache, fromServiceWorker } = item;
+
+  let code, title;
+
+  if (status) {
+    if (fromCache) {
+      code = "cached";
+    } else if (fromServiceWorker) {
+      code = "service worker";
+    } else {
+      code = status;
+    }
+
+    if (statusText) {
+      title = `${status} ${statusText}`;
+      if (fromCache) {
+        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)
+  );
+}
+
+function MethodColumn(item) {
+  const { method } = item;
+  return div({ className: "requests-menu-subitem requests-menu-method-box" },
+    span({ className: "subitem-label requests-menu-method" }, method)
+  );
+}
+
+function FileColumn(item) {
+  const { urlDetails, responseContentDataUri } = 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(
+      {
+        className: "subitem-label requests-menu-file",
+        title: urlDetails.unicodeUrl
+      },
+      urlDetails.baseNameWithQuery
+    )
+  );
+}
+
+function DomainColumn(item, onSecurityIconClick) {
+  const { urlDetails, remoteAddress, securityState } = item;
+
+  let iconClassList = [ "requests-security-state-icon" ];
+  let iconTitle;
+  if (urlDetails.isLocal) {
+    iconClassList.push("security-state-local");
+    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)
+  );
+}
+
+function CauseColumn(item) {
+  const { cause } = item;
+
+  let causeType = "";
+  let causeUri = undefined;
+  let causeHasStack = false;
+
+  if (cause) {
+    causeType = cause.type;
+    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)
+  );
+}
+
+const CONTENT_MIME_TYPE_ABBREVIATIONS = {
+  "ecmascript": "js",
+  "javascript": "js",
+  "x-javascript": "js"
+};
+
+function TypeColumn(item) {
+  const { mimeType } = 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)
+  );
+}
+
+function TransferredSizeColumn(item) {
+  const { transferredSize, fromCache, fromServiceWorker } = item;
+
+  let text;
+  let className = "subitem-label";
+  if (fromCache) {
+    text = L10N.getStr("networkMenu.sizeCached");
+    className += " theme-comment";
+  } else if (fromServiceWorker) {
+    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)
+  );
+}
+
+function ContentSizeColumn(item) {
+  const { contentSize } = item;
+
+  let text;
+  if (typeof contentSize == "number") {
+    text = getFormattedSize(contentSize);
+  }
+
+  return div(
+    { className: "requests-menu-subitem subitem-label requests-menu-size", title: text },
+    span({ className: "subitem-label" }, text)
+  );
+}
+
+// List of properties of the timing info we want to create boxes for
+const TIMING_KEYS = ["blocked", "dns", "connect", "send", "wait", "receive"];
+
+function timingBoxes(item) {
+  const { eventTimings, totalTime, fromCache, fromServiceWorker } = item;
+  let boxes = [];
+
+  if (fromCache || fromServiceWorker) {
+    return boxes;
+  }
+
+  if (eventTimings) {
+    // Add a set of boxes representing timing information.
+    for (let key of TIMING_KEYS) {
+      let width = eventTimings.timings[key];
+
+      // Don't render anything if it surely won't be visible.
+      // One millisecond == one unscaled pixel.
+      if (width > 0) {
+        boxes.push(div({
+          key,
+          className: "requests-menu-timings-box " + key,
+          style: { width }
+        }));
+      }
+    }
+  }
+
+  if (typeof totalTime == "number") {
+    let text = L10N.getFormatStr("networkMenu.totalMS", totalTime);
+    boxes.push(div({
+      key: "total",
+      className: "requests-menu-timings-total",
+      title: text
+    }, text));
+  }
+
+  return boxes;
+}
+
+function WaterfallColumn(item, firstRequestStartedMillis) {
+  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)
+    )
+  );
+}
+
+module.exports = RequestListItem;

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list-tooltip.js
@@ -0,0 +1,107 @@
+/* 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 gNetwork, NetMonitorController */
+
+"use strict";
+
+const { Task } = require("devtools/shared/task");
+const { formDataURI } = require("../request-utils");
+const { WEBCONSOLE_L10N } = require("../l10n");
+const { setImageTooltip,
+        getImageDimensions } = require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
+
+// 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";
+
+const setTooltipImageContent = Task.async(function* (tooltip, itemEl, requestItem) {
+  let { mimeType, text, encoding } = requestItem.responseContent.content;
+
+  if (!mimeType || !mimeType.includes("image/")) {
+    return false;
+  }
+
+  let string = yield gNetwork.getString(text);
+  let src = formDataURI(mimeType, encoding, string);
+  let maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
+  let { naturalWidth, naturalHeight } = yield getImageDimensions(tooltip.doc, src);
+  let options = { maxDim, naturalWidth, naturalHeight };
+  setImageTooltip(tooltip, tooltip.doc, src, options);
+
+  return itemEl.querySelector(".requests-menu-icon");
+});
+
+const setTooltipStackTraceContent = Task.async(function* (tooltip, requestItem) {
+  let {stacktrace} = requestItem.cause;
+
+  if (!stacktrace || stacktrace.length == 0) {
+    return false;
+  }
+
+  let doc = tooltip.doc;
+  let el = doc.createElementNS(HTML_NS, "div");
+  el.className = "stack-trace-tooltip devtools-monospace";
+
+  for (let f of stacktrace) {
+    let { functionName, filename, lineNumber, columnNumber, asyncCause } = f;
+
+    if (asyncCause) {
+      // if there is asyncCause, append a "divider" row into the trace
+      let asyncFrameEl = doc.createElementNS(HTML_NS, "div");
+      asyncFrameEl.className = "stack-frame stack-frame-async";
+      asyncFrameEl.textContent =
+        WEBCONSOLE_L10N.getFormatStr("stacktrace.asyncStack", asyncCause);
+      el.appendChild(asyncFrameEl);
+    }
+
+    // Parse a source name in format "url -> url"
+    let sourceUrl = filename.split(" -> ").pop();
+
+    let frameEl = doc.createElementNS(HTML_NS, "div");
+    frameEl.className = "stack-frame stack-frame-call";
+
+    let funcEl = doc.createElementNS(HTML_NS, "span");
+    funcEl.className = "stack-frame-function-name";
+    funcEl.textContent =
+      functionName || WEBCONSOLE_L10N.getStr("stacktrace.anonymousFunction");
+    frameEl.appendChild(funcEl);
+
+    let sourceEl = doc.createElementNS(HTML_NS, "span");
+    sourceEl.className = "stack-frame-source-name";
+    frameEl.appendChild(sourceEl);
+
+    let sourceInnerEl = doc.createElementNS(HTML_NS, "span");
+    sourceInnerEl.className = "stack-frame-source-name-inner";
+    sourceEl.appendChild(sourceInnerEl);
+
+    sourceInnerEl.textContent = sourceUrl;
+    sourceInnerEl.title = sourceUrl;
+
+    let lineEl = doc.createElementNS(HTML_NS, "span");
+    lineEl.className = "stack-frame-line";
+    lineEl.textContent = `:${lineNumber}:${columnNumber}`;
+    sourceInnerEl.appendChild(lineEl);
+
+    frameEl.addEventListener("click", () => {
+      // hide the tooltip immediately, not after delay
+      tooltip.hide();
+      NetMonitorController.viewSourceInDebugger(filename, lineNumber);
+    }, false);
+
+    el.appendChild(frameEl);
+  }
+
+  tooltip.setContent(el, {width: REQUESTS_TOOLTIP_STACK_TRACE_WIDTH});
+
+  return true;
+});
+
+module.exports = {
+  setTooltipImageContent,
+  setTooltipStackTraceContent,
+};

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/components/request-list.js
@@ -0,0 +1,34 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { createFactory, PropTypes, DOM } = require("devtools/client/shared/vendor/react");
+const { div } = DOM;
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const RequestListHeader = createFactory(require("./request-list-header"));
+const RequestListEmptyNotice = createFactory(require("./request-list-empty"));
+const RequestListContent = createFactory(require("./request-list-content"));
+
+/**
+ * Renders the request list - header, empty text, the actual content with rows
+ */
+const RequestList = function ({ isEmpty }) {
+  return div({ className: "request-list-container" },
+    RequestListHeader(),
+    isEmpty ? RequestListEmptyNotice() : RequestListContent()
+  );
+};
+
+RequestList.displayName = "RequestList";
+
+RequestList.propTypes = {
+  isEmpty: PropTypes.bool.isRequired,
+};
+
+module.exports = connect(
+  state => ({
+    isEmpty: state.requests.requests.isEmpty()
+  })
+)(RequestList);

--- a/devtools/client/netmonitor/components/summary-button.js
+++ b/devtools/client/netmonitor/components/summary-button.js
@@ -9,32 +9,30 @@
 const {
   CONTENT_SIZE_DECIMALS,
   REQUEST_TIME_DECIMALS,
 } = require("../constants");
 const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { PluralForm } = require("devtools/shared/plural-form");
 const { L10N } = require("../l10n");
-const { getSummary } = require("../selectors/index");
+const { getDisplayedRequestsSummary } = require("../selectors/index");
 
 const { button, span } = DOM;
 
 function SummaryButton({
   summary,
   triggerSummary,
 }) {
-  let { count, totalBytes, totalMillis } = summary;
+  let { count, bytes, millis } = summary;
   const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
     PluralForm.get(count, L10N.getStr("networkMenu.summary"))
     .replace("#1", count)
-    .replace("#2", L10N.numberWithDecimals(totalBytes / 1024,
-      CONTENT_SIZE_DECIMALS))
-    .replace("#3", L10N.numberWithDecimals(totalMillis / 1000,
-      REQUEST_TIME_DECIMALS));
+    .replace("#2", L10N.numberWithDecimals(bytes / 1024, CONTENT_SIZE_DECIMALS))
+    .replace("#3", L10N.numberWithDecimals(millis / 1000, REQUEST_TIME_DECIMALS));
 
   return button({
     id: "requests-menu-network-summary-button",
     className: "devtools-button",
     title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
     onClick: triggerSummary,
   },
   span({ className: "summary-info-icon" }),
@@ -42,16 +40,16 @@ function SummaryButton({
 }
 
 SummaryButton.propTypes = {
   summary: PropTypes.object.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
-    summary: getSummary(state),
+    summary: getDisplayedRequestsSummary(state),
   }),
   (dispatch) => ({
     triggerSummary: () => {
       NetMonitorView.toggleFrontendMode();
     },
   })
 )(SummaryButton);

--- a/devtools/client/netmonitor/components/toggle-button.js
+++ b/devtools/client/netmonitor/components/toggle-button.js
@@ -1,65 +1,51 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals NetMonitorView */
-
 "use strict";
 
 const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../l10n");
 const Actions = require("../actions/index");
+const { isSidebarToggleButtonDisabled } = require("../selectors/index");
 
 const { button } = DOM;
 
 function ToggleButton({
   disabled,
   open,
-  triggerSidebar,
+  onToggle,
 }) {
   let className = ["devtools-button"];
   if (!open) {
     className.push("pane-collapsed");
   }
 
   const title = open ? L10N.getStr("collapseDetailsPane") :
                        L10N.getStr("expandDetailsPane");
 
   return button({
     id: "details-pane-toggle",
     className: className.join(" "),
     title,
     disabled,
     tabIndex: "0",
-    onMouseDown: triggerSidebar,
+    onMouseDown: onToggle,
   });
 }
 
 ToggleButton.propTypes = {
   disabled: PropTypes.bool.isRequired,
-  triggerSidebar: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
-    disabled: state.requests.items.length === 0,
-    open: state.ui.sidebar.open,
+    disabled: isSidebarToggleButtonDisabled(state),
+    open: state.ui.sidebarOpen,
   }),
   (dispatch) => ({
-    triggerSidebar: () => {
-      dispatch(Actions.toggleSidebar());
-
-      let requestsMenu = NetMonitorView.RequestsMenu;
-      let selectedIndex = requestsMenu.selectedIndex;
-
-      // Make sure there's a selection if the button is pressed, to avoid
-      // showing an empty network details pane.
-      if (selectedIndex == -1 && requestsMenu.itemCount) {
-        requestsMenu.selectedIndex = 0;
-      } else {
-        requestsMenu.selectedIndex = -1;
-      }
-    },
+    onToggle: () => dispatch(Actions.toggleSidebar())
   })
 )(ToggleButton);

--- a/devtools/client/netmonitor/constants.js
+++ b/devtools/client/netmonitor/constants.js
@@ -6,17 +6,45 @@
 
 const general = {
   FREETEXT_FILTER_SEARCH_DELAY: 200,
   CONTENT_SIZE_DECIMALS: 2,
   REQUEST_TIME_DECIMALS: 2,
 };
 
 const actionTypes = {
+  BATCH_ACTIONS: "BATCH_ACTIONS",
+  BATCH_ENABLE: "BATCH_ENABLE",
+  ADD_TIMING_MARKER: "ADD_TIMING_MARKER",
+  CLEAR_TIMING_MARKERS: "CLEAR_TIMING_MARKERS",
+  ADD_REQUEST: "ADD_REQUEST",
+  UPDATE_REQUEST: "UPDATE_REQUEST",
+  CLEAR_REQUESTS: "CLEAR_REQUESTS",
+  CLONE_SELECTED_REQUEST: "CLONE_SELECTED_REQUEST",
+  REMOVE_SELECTED_CUSTOM_REQUEST: "REMOVE_SELECTED_CUSTOM_REQUEST",
+  SELECT_REQUEST: "SELECT_REQUEST",
+  PRESELECT_REQUEST: "PRESELECT_REQUEST",
+  SORT_BY: "SORT_BY",
   TOGGLE_FILTER_TYPE: "TOGGLE_FILTER_TYPE",
   ENABLE_FILTER_TYPE_ONLY: "ENABLE_FILTER_TYPE_ONLY",
   SET_FILTER_TEXT: "SET_FILTER_TEXT",
   OPEN_SIDEBAR: "OPEN_SIDEBAR",
-  TOGGLE_SIDEBAR: "TOGGLE_SIDEBAR",
-  UPDATE_REQUESTS: "UPDATE_REQUESTS",
+  WATERFALL_RESIZE: "WATERFALL_RESIZE",
 };
 
-module.exports = Object.assign({}, general, actionTypes);
+// Descriptions for what this frontend is currently doing.
+const ACTIVITY_TYPE = {
+  // Standing by and handling requests normally.
+  NONE: 0,
+
+  // Forcing the target to reload with cache enabled or disabled.
+  RELOAD: {
+    WITH_CACHE_ENABLED: 1,
+    WITH_CACHE_DISABLED: 2,
+    WITH_CACHE_DEFAULT: 3
+  },
+
+  // Enabling or disabling the cache without triggering a reload.
+  ENABLE_CACHE: 3,
+  DISABLE_CACHE: 4
+};
+
+module.exports = Object.assign({ ACTIVITY_TYPE }, general, actionTypes);

--- a/devtools/client/netmonitor/custom-request-view.js
+++ b/devtools/client/netmonitor/custom-request-view.js
@@ -2,22 +2,21 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* globals window, dumpn, gNetwork, $, EVENTS, NetMonitorView */
 
 "use strict";
 
 const { Task } = require("devtools/shared/task");
-const {
-  writeHeaderText,
-  getKeyWithEvent,
-  getUrlQuery,
-  parseQueryString,
-} = require("./request-utils");
+const { writeHeaderText,
+        getKeyWithEvent,
+        getUrlQuery,
+        parseQueryString } = require("./request-utils");
+const Actions = require("./actions/index");
 
 /**
  * Functions handling the custom request view.
  */
 function CustomRequestView() {
   dumpn("CustomRequestView was instantiated");
 }
 
@@ -71,47 +70,51 @@ CustomRequestView.prototype = {
   /**
    * Handle user input in the custom request form.
    *
    * @param object field
    *        the field that the user updated.
    */
   onUpdate: function (field) {
     let selectedItem = NetMonitorView.RequestsMenu.selectedItem;
+    let store = NetMonitorView.RequestsMenu.store;
     let value;
 
     switch (field) {
       case "method":
         value = $("#custom-method-value").value.trim();
-        selectedItem.attachment.method = value;
+        store.dispatch(Actions.updateRequest(selectedItem.id, { method: value }));
         break;
       case "url":
         value = $("#custom-url-value").value;
         this.updateCustomQuery(value);
-        selectedItem.attachment.url = value;
+        store.dispatch(Actions.updateRequest(selectedItem.id, { url: value }));
         break;
       case "query":
         let query = $("#custom-query-value").value;
         this.updateCustomUrl(query);
-        field = "url";
         value = $("#custom-url-value").value;
-        selectedItem.attachment.url = value;
+        store.dispatch(Actions.updateRequest(selectedItem.id, { url: value }));
         break;
       case "body":
         value = $("#custom-postdata-value").value;
-        selectedItem.attachment.requestPostData = { postData: { text: value } };
+        store.dispatch(Actions.updateRequest(selectedItem.id, {
+          requestPostData: {
+            postData: { text: value }
+          }
+        }));
         break;
       case "headers":
         let headersText = $("#custom-headers-value").value;
         value = parseHeadersText(headersText);
-        selectedItem.attachment.requestHeaders = { headers: value };
+        store.dispatch(Actions.updateRequest(selectedItem.id, {
+          requestHeaders: { headers: value }
+        }));
         break;
     }
-
-    NetMonitorView.RequestsMenu.updateMenuView(selectedItem, field, value);
   },
 
   /**
    * Update the query string field based on the url.
    *
    * @param object url
    *        The URL to extract query string from.
    */
@@ -156,17 +159,17 @@ CustomRequestView.prototype = {
 function parseHeadersText(text) {
   return parseRequestText(text, "\\S+?", ":");
 }
 
 /**
  * Parse readable text list of a query string.
  *
  * @param string text
- *        Text of query string represetation
+ *        Text of query string representation
  * @return array
  *         Array of query params {name, value}
  */
 function parseQueryText(text) {
   return parseRequestText(text, ".+?", "=");
 }
 
 /**

--- a/devtools/client/netmonitor/details-view.js
+++ b/devtools/client/netmonitor/details-view.js
@@ -1,20 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* import-globals-from ./netmonitor-controller.js */
 /* eslint-disable mozilla/reject-some-requires */
-/* globals dumpn, $, NetMonitorView, gNetwork */
+/* globals window, dumpn, $, NetMonitorView, gNetwork */
 
 "use strict";
 
 const promise = require("promise");
 const EventEmitter = require("devtools/shared/event-emitter");
+const Editor = require("devtools/client/sourceeditor/editor");
 const { Heritage } = require("devtools/client/shared/widgets/view-helpers");
 const { Task } = require("devtools/shared/task");
 const { ToolSidebar } = require("devtools/client/framework/sidebar");
 const { VariablesView } = require("resource://devtools/client/shared/widgets/VariablesView.jsm");
 const { VariablesViewController } = require("resource://devtools/client/shared/widgets/VariablesViewController.jsm");
 const { EVENTS } = require("./events");
 const { L10N } = require("./l10n");
 const { Filters } = require("./filter-predicates");
@@ -262,20 +262,16 @@ DetailsView.prototype = {
         if (viewState.dirty[tab]) {
           // The request information was updated while the task was running.
           viewState.dirty[tab] = false;
           view.populate(viewState.latestData);
         } else {
           // Tab is selected but not dirty. We're done here.
           populated[tab] = true;
           window.emit(EVENTS.TAB_UPDATED);
-
-          if (NetMonitorController.isConnected()) {
-            NetMonitorView.RequestsMenu.ensureSelectedItemIsVisible();
-          }
         }
       } else if (viewState.dirty[tab]) {
         // Tab is dirty but no longer selected. Don't refresh it now, it'll be
         // done if the tab is shown again.
         viewState.dirty[tab] = false;
       }
     }, e => console.error(e));
   },
@@ -323,17 +319,17 @@ DetailsView.prototype = {
       let code;
       if (data.fromCache) {
         code = "cached";
       } else if (data.fromServiceWorker) {
         code = "service worker";
       } else {
         code = data.status;
       }
-      $("#headers-summary-status-circle").setAttribute("code", code);
+      $("#headers-summary-status-circle").setAttribute("data-code", code);
       $("#headers-summary-status-value").setAttribute("value",
         data.status + " " + data.statusText);
       $("#headers-summary-status").removeAttribute("hidden");
     } else {
       $("#headers-summary-status").setAttribute("hidden", "true");
     }
 
     if (data.httpVersion) {

--- a/devtools/client/netmonitor/har/har-builder.js
+++ b/devtools/client/netmonitor/har/har-builder.js
@@ -58,19 +58,17 @@ HarBuilder.prototype = {
    */
   build: function () {
     this.promises = [];
 
     // Build basic structure for data.
     let log = this.buildLog();
 
     // Build entries.
-    let items = this._options.items;
-    for (let i = 0; i < items.length; i++) {
-      let file = items[i].attachment;
+    for (let file of this._options.items) {
       log.entries.push(this.buildEntry(log, file));
     }
 
     // Some data needs to be fetched from the backend during the
     // build process, so wait till all is done.
     let { resolve, promise } = defer();
     all(this.promises).then(results => resolve({ log: log }));
 

--- a/devtools/client/netmonitor/har/har-collector.js
+++ b/devtools/client/netmonitor/har/har-collector.js
@@ -196,19 +196,17 @@ HarCollector.prototype = {
       method: method,
       url: url,
       isXHR: isXHR
     };
 
     this.files.set(actor, file);
 
     // Mimic the Net panel data structure
-    this.items.push({
-      attachment: file
-    });
+    this.items.push(file);
   },
 
   onNetworkEventUpdate: function (type, packet) {
     let actor = packet.from;
 
     // Skip events from unknown actors (not in the list).
     // It can happen when there are zombie requests received after
     // the target is closed or multiple tabs are attached through

--- 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,33 +11,33 @@ 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 { NetMonitorView } = monitor.panelWin;
+  let { NetMonitorController, NetMonitorView } = monitor.panelWin;
   let { RequestsMenu } = NetMonitorView;
 
   const size = 4096;
   const uploadSize = actuallyThrottle ? size / 3 : 0;
 
   const request = {
     "NetworkMonitor.throttleData": {
       latencyMean: 0,
       latencyMax: 0,
       downloadBPSMean: 200000,
       downloadBPSMax: 200000,
       uploadBPSMean: uploadSize,
       uploadBPSMax: uploadSize,
     },
   };
-  let client = monitor._controller.webConsoleClient;
+  let client = NetMonitorController.webConsoleClient;
 
   info("sending throttle request");
   let deferred = promise.defer();
   client.setPreferences(request, response => {
     deferred.resolve(response);
   });
   yield deferred.promise;
 

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/middleware/batching.js
@@ -0,0 +1,132 @@
+/* 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 { BATCH_ACTIONS, BATCH_ENABLE, BATCH_RESET } = require("../constants");
+
+// ms
+const REQUESTS_REFRESH_RATE = 50;
+
+/**
+ * Middleware that watches for actions with a "batch = true" value in their meta field.
+ * These actions are queued and dispatched as one batch after a timeout.
+ * Special actions that are handled by this middleware:
+ * - BATCH_ENABLE can be used to enable and disable the batching.
+ * - BATCH_RESET discards the actions that are currently in the queue.
+ */
+function batchingMiddleware(store) {
+  return next => {
+    let queuedActions = [];
+    let enabled = true;
+    let flushTask = null;
+
+    return action => {
+      if (action.type === BATCH_ENABLE) {
+        return setEnabled(action.enabled);
+      }
+
+      if (action.type === BATCH_RESET) {
+        return resetQueue();
+      }
+
+      if (action.meta && action.meta.batch) {
+        if (!enabled) {
+          next(action);
+          return Promise.resolve();
+        }
+
+        queuedActions.push(action);
+
+        if (!flushTask) {
+          flushTask = new DelayedTask(flushActions, REQUESTS_REFRESH_RATE);
+        }
+
+        return flushTask.promise;
+      }
+
+      return next(action);
+    };
+
+    function setEnabled(value) {
+      enabled = value;
+
+      // If disabling the batching, flush the actions that have been queued so far
+      if (!enabled && flushTask) {
+        flushTask.runNow();
+      }
+    }
+
+    function resetQueue() {
+      queuedActions = [];
+
+      if (flushTask) {
+        flushTask.cancel();
+        flushTask = null;
+      }
+    }
+
+    function flushActions() {
+      const actions = queuedActions;
+      queuedActions = [];
+
+      next({
+        type: BATCH_ACTIONS,
+        actions,
+      });
+
+      flushTask = null;
+    }
+  };
+}
+
+/**
+ * Create a delayed task that calls the specified task function after a delay.
+ */
+function DelayedTask(taskFn, delay) {
+  this._promise = new Promise((resolve, reject) => {
+    this.runTask = (cancel) => {
+      if (cancel) {
+        reject("Task cancelled");
+      } else {
+        taskFn();
+        resolve();
+      }
+      this.runTask = null;
+    };
+    this.timeout = setTimeout(this.runTask, delay);
+  }).catch(console.error);
+}
+
+DelayedTask.prototype = {
+  /**
+   * Return a promise that is resolved after the task is performed or canceled.
+   */
+  get promise() {
+    return this._promise;
+  },
+
+  /**
+   * Cancel the execution of the task.
+   */
+  cancel() {
+    clearTimeout(this.timeout);
+    if (this.runTask) {
+      this.runTask(true);
+    }
+  },
+
+  /**
+   * Execute the scheduled task immediately, without waiting for the timeout.
+   * Resolves the promise correctly.
+   */
+  runNow() {
+    clearTimeout(this.timeout);
+    if (this.runTask) {
+      this.runTask();
+    }
+  }
+};
+
+module.exports = batchingMiddleware;

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/middleware/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'batching.js',
+)

--- a/devtools/client/netmonitor/moz.build
+++ b/devtools/client/netmonitor/moz.build
@@ -1,32 +1,37 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
     'actions',
     'components',
     'har',
+    'middleware',
     'reducers',
-    'selectors'
+    'selectors',
+    'utils',
 ]
 
 DevToolsModules(
     'constants.js',
     'custom-request-view.js',
     'details-view.js',
     'events.js',
     'filter-predicates.js',
     'l10n.js',
+    'netmonitor-controller.js',
+    'netmonitor-view.js',
     'panel.js',
     'performance-statistics-view.js',
     'prefs.js',
     'request-list-context-menu.js',
     'request-utils.js',
     'requests-menu-view.js',
     'sidebar-view.js',
     'sort-predicates.js',
     'store.js',
     'toolbar-view.js',
+    'waterfall-background.js',
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

--- a/devtools/client/netmonitor/netmonitor-controller.js
+++ b/devtools/client/netmonitor/netmonitor-controller.js
@@ -1,65 +1,40 @@
 /* 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, document, NetMonitorView, gStore, Actions */
-/* exported loader */
+/* globals window, NetMonitorView, gStore, dumpn */
 
 "use strict";
 
-var { utils: Cu } = Components;
-
-// Descriptions for what this frontend is currently doing.
-const ACTIVITY_TYPE = {
-  // Standing by and handling requests normally.
-  NONE: 0,
-
-  // Forcing the target to reload with cache enabled or disabled.
-  RELOAD: {
-    WITH_CACHE_ENABLED: 1,
-    WITH_CACHE_DISABLED: 2,
-    WITH_CACHE_DEFAULT: 3
-  },
-
-  // Enabling or disabling the cache without triggering a reload.
-  ENABLE_CACHE: 3,
-  DISABLE_CACHE: 4
-};
-
-var BrowserLoaderModule = {};
-Cu.import("resource://devtools/client/shared/browser-loader.js", BrowserLoaderModule);
-var { loader, require } = BrowserLoaderModule.BrowserLoader({
-  baseURI: "resource://devtools/client/netmonitor/",
-  window
-});
-
 const promise = require("promise");
 const Services = require("Services");
 const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
 const EventEmitter = require("devtools/shared/event-emitter");
 const Editor = require("devtools/client/sourceeditor/editor");
 const {TimelineFront} = require("devtools/shared/fronts/timeline");
 const {Task} = require("devtools/shared/task");
-const {Prefs} = require("./prefs");
-const {EVENTS} = require("./events");
+const { 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(this, "EVENTS", EVENTS);
-XPCOMUtils.defineConstant(this, "ACTIVITY_TYPE", ACTIVITY_TYPE);
-XPCOMUtils.defineConstant(this, "Editor", Editor);
-XPCOMUtils.defineConstant(this, "Prefs", Prefs);
-
-XPCOMUtils.defineLazyModuleGetter(this, "Chart",
+XPCOMUtils.defineConstant(window, "EVENTS", EVENTS);
+XPCOMUtils.defineConstant(window, "ACTIVITY_TYPE", ACTIVITY_TYPE);
+XPCOMUtils.defineConstant(window, "Editor", Editor);
+XPCOMUtils.defineConstant(window, "Prefs", Prefs);
+XPCOMUtils.defineLazyModuleGetter(window, "Chart",
   "resource://devtools/client/shared/widgets/Chart.jsm");
 
-XPCOMUtils.defineLazyServiceGetter(this, "clipboardHelper",
-  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
+// Initialize the global Redux store
+window.gStore = configureStore();
 
 /**
  * Object defining the network monitor controller components.
  */
 var NetMonitorController = {
   /**
    * Initializes the view and connects the monitor client.
    *
@@ -86,16 +61,17 @@ var NetMonitorController = {
    *         A promise that is resolved when the monitor finishes shutdown.
    */
   shutdownNetMonitor: Task.async(function* () {
     if (this._shutdown) {
       return this._shutdown.promise;
     }
     this._shutdown = promise.defer();
     {
+      gStore.dispatch(Actions.batchReset());
       NetMonitorView.destroy();
       this.TargetEventsHandler.disconnect();
       this.NetworkEventsHandler.disconnect();
       yield this.disconnect();
     }
     this._shutdown.resolve();
     return undefined;
   }),
@@ -282,29 +258,28 @@ var NetMonitorController = {
    *         A promise resolved once the task finishes.
    */
   inspectRequest: function (requestId) {
     // Look for the request in the existing ones or wait for it to appear, if
     // the network monitor is still loading.
     let deferred = promise.defer();
     let request = null;
     let inspector = function () {
-      let predicate = i => i.value === requestId;
-      request = NetMonitorView.RequestsMenu.getItemForPredicate(predicate);
+      request = getDisplayedRequestById(gStore.getState(), requestId);
       if (!request) {
         // Reset filters so that the request is visible.
         gStore.dispatch(Actions.toggleFilterType("all"));
-        request = NetMonitorView.RequestsMenu.getItemForPredicate(predicate);
+        request = getDisplayedRequestById(gStore.getState(), requestId);
       }
 
       // If the request was found, select it. Otherwise this function will be
       // called again once new requests arrive.
       if (request) {
         window.off(EVENTS.REQUEST_ADDED, inspector);
-        NetMonitorView.RequestsMenu.selectedItem = request;
+        gStore.dispatch(Actions.selectRequest(request.id));
         deferred.resolve();
       }
     };
 
     inspector();
     if (!request) {
       window.on(EVENTS.REQUEST_ADDED, inspector);
     }
@@ -393,24 +368,24 @@ TargetEventsHandler.prototype = {
    *        Packet received from the server.
    */
   _onTabNavigated: function (type, packet) {
     switch (type) {
       case "will-navigate": {
         // Reset UI.
         if (!Services.prefs.getBoolPref("devtools.webconsole.persistlog")) {
           NetMonitorView.RequestsMenu.reset();
-          NetMonitorView.Sidebar.toggle(false);
+        } else {
+          // If the log is persistent, just clear all accumulated timing markers.
+          gStore.dispatch(Actions.clearTimingMarkers());
         }
         // Switch to the default network traffic inspector view.
         if (NetMonitorController.getCurrentActivity() == ACTIVITY_TYPE.NONE) {
           NetMonitorView.showNetworkInspectorView();
         }
-        // Clear any accumulated markers.
-        NetMonitorController.NetworkEventsHandler.clearMarkers();
 
         window.emit(EVENTS.TARGET_WILL_NAVIGATE);
         break;
       }
       case "navigate": {
         window.emit(EVENTS.TARGET_DID_NAVIGATE);
         break;
       }
@@ -424,18 +399,16 @@ TargetEventsHandler.prototype = {
     NetMonitorController.shutdownNetMonitor();
   }
 };
 
 /**
  * Functions handling target network events.
  */
 function NetworkEventsHandler() {
-  this._markers = [];
-
   this._onNetworkEvent = this._onNetworkEvent.bind(this);
   this._onNetworkEventUpdate = this._onNetworkEventUpdate.bind(this);
   this._onDocLoadingMarker = this._onDocLoadingMarker.bind(this);
   this._onRequestHeaders = this._onRequestHeaders.bind(this);
   this._onRequestCookies = this._onRequestCookies.bind(this);
   this._onRequestPostData = this._onRequestPostData.bind(this);
   this._onResponseHeaders = this._onResponseHeaders.bind(this);
   this._onResponseCookies = this._onResponseCookies.bind(this);
@@ -451,29 +424,16 @@ NetworkEventsHandler.prototype = {
   get webConsoleClient() {
     return NetMonitorController.webConsoleClient;
   },
 
   get timelineFront() {
     return NetMonitorController.timelineFront;
   },
 
-  get firstDocumentDOMContentLoadedTimestamp() {
-    let marker = this._markers.filter(e => {
-      return e.name == "document::DOMContentLoaded";
-    })[0];
-
-    return marker ? marker.unixTime / 1000 : -1;
-  },
-
-  get firstDocumentLoadTimestamp() {
-    let marker = this._markers.filter(e => e.name == "document::Load")[0];
-    return marker ? marker.unixTime / 1000 : -1;
-  },
-
   /**
    * Connect to the current target client.
    */
   connect: function () {
     dumpn("NetworkEventsHandler is connecting...");
     this.webConsoleClient.on("networkEvent", this._onNetworkEvent);
     this.webConsoleClient.on("networkEventUpdate", this._onNetworkEventUpdate);
 
@@ -520,17 +480,17 @@ NetworkEventsHandler.prototype = {
   },
 
   /**
    * The "DOMContentLoaded" and "Load" events sent by the timeline actor.
    * @param object marker
    */
   _onDocLoadingMarker: function (marker) {
     window.emit(EVENTS.TIMELINE_EVENT, marker);
-    this._markers.push(marker);
+    gStore.dispatch(Actions.addTimingMarker(marker));
   },
 
   /**
    * The "networkEvent" message type handler.
    *
    * @param string type
    *        Message type.
    * @param object networkInfo
@@ -542,18 +502,17 @@ NetworkEventsHandler.prototype = {
       request: { method, url },
       isXHR,
       cause,
       fromCache,
       fromServiceWorker
     } = networkInfo;
 
     NetMonitorView.RequestsMenu.addRequest(
-      actor, startedDateTime, method, url, isXHR, cause, fromCache,
-        fromServiceWorker
+      actor, {startedDateTime, method, url, isXHR, cause, fromCache, fromServiceWorker}
     );
     window.emit(EVENTS.NETWORK_EVENT, actor);
   },
 
   /**
    * The "networkEventUpdate" message type handler.
    *
    * @param string type
@@ -632,155 +591,139 @@ NetworkEventsHandler.prototype = {
    * Handles additional information received for a "requestHeaders" packet.
    *
    * @param object response
    *        The message received from the server.
    */
   _onRequestHeaders: function (response) {
     NetMonitorView.RequestsMenu.updateRequest(response.from, {
       requestHeaders: response
-    }, () => {
+    }).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, {
       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, {
       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, {
       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, {
       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, {
       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, {
       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, {
       eventTimings: response
-    }, () => {
+    }).then(() => {
       window.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response.from);
     });
   },
 
   /**
-   * Clears all accumulated markers.
-   */
-  clearMarkers: function () {
-    this._markers.length = 0;
-  },
-
-  /**
    * Fetches the full text of a LongString.
    *
    * @param object | string stringGrip
    *        The long string grip containing the corresponding actor.
    *        If you pass in a plain string (by accident or because you're lazy),
    *        then a promise of the same string is simply returned.
    * @return object Promise
    *         A promise that is resolved when the full string contents
    *         are available, or rejected if something goes wrong.
    */
   getString: function (stringGrip) {
     return this.webConsoleClient.getString(stringGrip);
   }
 };
 
 /**
- * Returns true if this is document is in RTL mode.
- * @return boolean
- */
-XPCOMUtils.defineLazyGetter(window, "isRTL", function () {
-  return window.getComputedStyle(document.documentElement, null)
-    .direction == "rtl";
-});
-
-/**
  * Convenient way of emitting events from the panel window.
  */
-EventEmitter.decorate(this);
+EventEmitter.decorate(window);
 
 /**
  * Preliminary setup for the NetMonitorController object.
  */
 NetMonitorController.TargetEventsHandler = new TargetEventsHandler();
 NetMonitorController.NetworkEventsHandler = new NetworkEventsHandler();
 
 /**
@@ -790,19 +733,9 @@ Object.defineProperties(window, {
   "gNetwork": {
     get: function () {
       return NetMonitorController.NetworkEventsHandler;
     },
     configurable: true
   }
 });
 
-/**
- * Helper method for debugging.
- * @param string
- */
-function dumpn(str) {
-  if (wantLogging) {
-    dump("NET-FRONTEND: " + str + "\n");
-  }
-}
-
-var wantLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+exports.NetMonitorController = NetMonitorController;

--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -1,31 +1,31 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* import-globals-from ./netmonitor-controller.js */
 /* eslint-disable mozilla/reject-some-requires */
-/* globals Prefs, setInterval, setTimeout, clearInterval, clearTimeout, btoa */
-/* exported $, $all */
+/* globals $, gStore, NetMonitorController, dumpn */
 
 "use strict";
 
 const { testing: isTesting } = require("devtools/shared/flags");
+const promise = require("promise");
+const Editor = require("devtools/client/sourceeditor/editor");
+const { Task } = require("devtools/shared/task");
 const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
-const { configureStore } = require("./store");
 const { RequestsMenuView } = require("./requests-menu-view");
 const { CustomRequestView } = require("./custom-request-view");
 const { ToolbarView } = require("./toolbar-view");
 const { SidebarView } = require("./sidebar-view");
 const { DetailsView } = require("./details-view");
 const { PerformanceStatisticsView } = require("./performance-statistics-view");
-
-// Initialize the global redux variables
-var gStore = configureStore();
+const { ACTIVITY_TYPE } = require("./constants");
+const Actions = require("./actions/index");
+const { Prefs } = require("./prefs");
 
 // ms
 const WDA_DEFAULT_VERIFY_INTERVAL = 50;
 
 // Use longer timeout during testing as the tests need this process to succeed
 // and two seconds is quite short on slow debug builds. The timeout here should
 // be at least equal to the general mochitest timeout of 45 seconds so that this
 // never gets hit during testing.
@@ -75,22 +75,16 @@ var NetMonitorView = {
     dumpn("Initializing the NetMonitorView panes");
 
     this._body = $("#body");
     this._detailsPane = $("#details-pane");
 
     this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
     this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
     this.toggleDetailsPane({ visible: false });
-
-    // Disable the performance statistics mode.
-    if (!Prefs.statistics) {
-      $("#request-menu-context-perf").hidden = true;
-      $("#notice-perf-message").hidden = true;
-    }
   },
 
   /**
    * Destroys the UI for all the displayed panes.
    */
   _destroyPanes: Task.async(function* () {
     dumpn("Destroying the NetMonitorView panes");
 
@@ -164,17 +158,16 @@ var NetMonitorView = {
     }
   },
 
   /**
    * Switches to the "Inspector" frontend view mode.
    */
   showNetworkInspectorView: function () {
     this._body.selectedPanel = $("#network-inspector-view");
-    this.RequestsMenu._flushWaterfallViews(true);
   },
 
   /**
    * Switches to the "Statistics" frontend view mode.
    */
   showNetworkStatisticsView: function () {
     this._body.selectedPanel = $("#network-statistics-view");
 
@@ -187,26 +180,27 @@ var NetMonitorView = {
       yield controller.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
 
       try {
         // • The response headers and status code are required for determining
         // whether a response is "fresh" (cacheable).
         // • The response content size and request total time are necessary for
         // populating the statistics view.
         // • The response mime type is used for categorization.
-        yield whenDataAvailable(requestsView, [
+        yield whenDataAvailable(requestsView.store, [
           "responseHeaders", "status", "contentSize", "mimeType", "totalTime"
         ]);
       } catch (ex) {
         // Timed out while waiting for data. Continue with what we have.
         console.error(ex);
       }
 
-      statisticsView.createPrimedCacheChart(requestsView.items);
-      statisticsView.createEmptyCacheChart(requestsView.items);
+      const requests = requestsView.store.getState().requests.requests;
+      statisticsView.createPrimedCacheChart(requests);
+      statisticsView.createEmptyCacheChart(requests);
     });
   },
 
   reloadPage: function () {
     NetMonitorController.triggerActivity(
       ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT);
   },
 
@@ -237,56 +231,53 @@ var NetMonitorView = {
   },
 
   _body: null,
   _detailsPane: null,
   _editorPromises: new Map()
 };
 
 /**
- * DOM query helper.
- * TODO: Move it into "dom-utils.js" module and "require" it when needed.
- */
-var $ = (selector, target = document) => target.querySelector(selector);
-var $all = (selector, target = document) => target.querySelectorAll(selector);
-
-/**
  * Makes sure certain properties are available on all objects in a data store.
  *
- * @param array dataStore
- *        The request view object from which to fetch the item list.
+ * @param Store dataStore
+ *        A Redux store for which to check the availability of properties.
  * @param array mandatoryFields
  *        A list of strings representing properties of objects in dataStore.
  * @return object
  *         A promise resolved when all objects in dataStore contain the
  *         properties defined in mandatoryFields.
  */
-function whenDataAvailable(requestsView, mandatoryFields) {
-  let deferred = promise.defer();
+function whenDataAvailable(dataStore, mandatoryFields) {
+  return new Promise((resolve, reject) => {
+    let interval = setInterval(() => {
+      const { requests } = dataStore.getState().requests;
+      const allFieldsPresent = !requests.isEmpty() && requests.every(
+        item => mandatoryFields.every(
+          field => item.get(field) !== undefined
+        )
+      );
 
-  let interval = setInterval(() => {
-    const { attachments } = requestsView;
-    if (attachments.length > 0 && attachments.every(item => {
-      return mandatoryFields.every(field => field in item);
-    })) {
+      if (allFieldsPresent) {
+        clearInterval(interval);
+        clearTimeout(timer);
+        resolve();
+      }
+    }, WDA_DEFAULT_VERIFY_INTERVAL);
+
+    let timer = setTimeout(() => {
       clearInterval(interval);
-      clearTimeout(timer);
-      deferred.resolve();
-    }
-  }, WDA_DEFAULT_VERIFY_INTERVAL);
-
-  let timer = setTimeout(() => {
-    clearInterval(interval);
-    deferred.reject(new Error("Timed out while waiting for data"));
-  }, WDA_DEFAULT_GIVE_UP_TIMEOUT);
-
-  return deferred.promise;
+      reject(new Error("Timed out while waiting for data"));
+    }, WDA_DEFAULT_GIVE_UP_TIMEOUT);
+  });
 }
 
 /**
  * Preliminary setup for the NetMonitorView object.
  */
 NetMonitorView.Toolbar = new ToolbarView();
 NetMonitorView.Sidebar = new SidebarView();
 NetMonitorView.NetworkDetails = new DetailsView();
 NetMonitorView.RequestsMenu = new RequestsMenuView();
 NetMonitorView.CustomRequest = new CustomRequestView();
 NetMonitorView.PerformanceStatistics = new PerformanceStatisticsView();
+
+exports.NetMonitorView = NetMonitorView;

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/netmonitor.js
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* globals window, document, NetMonitorController, NetMonitorView */
+/* exported Netmonitor, NetMonitorController, NetMonitorView, $, $all, dumpn */
+
+"use strict";
+
+const Cu = Components.utils;
+const { Services } = Cu.import("resource://gre/modules/Services.jsm", {});
+const { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
+
+function Netmonitor(toolbox) {
+  const { require } = BrowserLoader({
+    baseURI: "resource://devtools/client/netmonitor/",
+    window,
+    commonLibRequire: toolbox.browserRequire,
+  });
+
+  window.windowRequire = require;
+
+  const { NetMonitorController } = require("./netmonitor-controller.js");
+  const { NetMonitorView } = require("./netmonitor-view.js");
+
+  window.NetMonitorController = NetMonitorController;
+  window.NetMonitorView = NetMonitorView;
+
+  NetMonitorController._toolbox = toolbox;
+  NetMonitorController._target = toolbox.target;
+}
+
+Netmonitor.prototype = {
+  init() {
+    return window.NetMonitorController.startupNetMonitor();
+  },
+
+  destroy() {
+    return window.NetMonitorController.shutdownNetMonitor();
+  }
+};
+
+/**
+ * DOM query helper.
+ * TODO: Move it into "dom-utils.js" module and "require" it when needed.
+ */
+var $ = (selector, target = document) => target.querySelector(selector);
+var $all = (selector, target = document) => target.querySelectorAll(selector);
+
+/**
+ * Helper method for debugging.
+ * @param string
+ */
+function dumpn(str) {
+  if (wantLogging) {
+    dump("NET-FRONTEND: " + str + "\n");
+  }
+}
+
+var wantLogging = Services.prefs.getBoolPref("devtools.debugger.log");

--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -7,212 +7,33 @@
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/netmonitor.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
-  <script type="text/javascript" src="netmonitor-controller.js"/>
-  <script type="text/javascript" src="netmonitor-view.js"/>
+  <script type="text/javascript" src="netmonitor.js"/>
 
   <deck id="body"
         class="theme-sidebar"
         flex="1"
         data-localization-bundle="devtools/client/locales/netmonitor.properties">
 
     <vbox id="network-inspector-view" 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">
-        <vbox id="network-table" flex="1" class="devtools-main-content">
-          <toolbar id="requests-menu-toolbar"
-                   class="devtools-toolbar"
-                   align="center">
-            <hbox id="toolbar-labels" flex="1">
-              <hbox id="requests-menu-status-header-box"
-                    class="requests-menu-header requests-menu-status"
-                    align="center">
-                <button id="requests-menu-status-button"
-                        class="requests-menu-header-button requests-menu-status"
-                        data-key="status"
-                        data-localization="label=netmonitor.toolbar.status3"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-method-header-box"
-                    class="requests-menu-header requests-menu-method"
-                    align="center">
-                <button id="requests-menu-method-button"
-                        class="requests-menu-header-button requests-menu-method"
-                        data-key="method"
-                        data-localization="label=netmonitor.toolbar.method"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-icon-and-file-header-box"
-                    class="requests-menu-header requests-menu-icon-and-file"
-                    align="center">
-                <button id="requests-menu-file-button"
-                        class="requests-menu-header-button requests-menu-file"
-                        data-key="file"
-                        data-localization="label=netmonitor.toolbar.file"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-domain-header-box"
-                    class="requests-menu-header requests-menu-security-and-domain"
-                    align="center">
-                <button id="requests-menu-domain-button"
-                        class="requests-menu-header-button requests-menu-security-and-domain"
-                        data-key="domain"
-                        data-localization="label=netmonitor.toolbar.domain"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-cause-header-box"
-                    class="requests-menu-header requests-menu-cause"
-                    align="center">
-                <button id="requests-menu-cause-button"
-                        class="requests-menu-header-button requests-menu-cause"
-                        data-key="cause"
-                        data-localization="label=netmonitor.toolbar.cause"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-type-header-box"
-                    class="requests-menu-header requests-menu-type"
-                    align="center">
-                <button id="requests-menu-type-button"
-                        class="requests-menu-header-button requests-menu-type"
-                        data-key="type"
-                        data-localization="label=netmonitor.toolbar.type"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-transferred-header-box"
-                    class="requests-menu-header requests-menu-transferred"
-                    align="center">
-                <button id="requests-menu-transferred-button"
-                        class="requests-menu-header-button requests-menu-transferred"
-                        data-key="transferred"
-                        data-localization="label=netmonitor.toolbar.transferred"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-size-header-box"
-                    class="requests-menu-header requests-menu-size"
-                    align="center">
-                <button id="requests-menu-size-button"
-                        class="requests-menu-header-button requests-menu-size"
-                        data-key="size"
-                        data-localization="label=netmonitor.toolbar.size"
-                        crop="end"
-                        flex="1">
-                </button>
-              </hbox>
-              <hbox id="requests-menu-waterfall-header-box"
-                    class="requests-menu-header requests-menu-waterfall"
-                    align="center"
-                    flex="1">
-                <button id="requests-menu-waterfall-button"
-                        class="requests-menu-header-button requests-menu-waterfall"
-                        data-key="waterfall"
-                        pack="start"
-                        data-localization="label=netmonitor.toolbar.waterfall"
-                        flex="1">
-                  <image id="requests-menu-waterfall-image"/>
-                  <box id="requests-menu-waterfall-label-wrapper">
-                    <label id="requests-menu-waterfall-label"
-                           class="plain requests-menu-waterfall"
-                           data-localization="value=netmonitor.toolbar.waterfall"/>
-                  </box>
-                </button>
-              </hbox>
-            </hbox>
-          </toolbar>
-
-          <vbox id="requests-menu-empty-notice"
-                class="side-menu-widget-empty-text">
-            <hbox id="notice-reload-message" align="center">
-              <label data-localization="content=netmonitor.reloadNotice1"/>
-              <button id="requests-menu-reload-notice-button"
-                      class="devtools-toolbarbutton"
-                      standalone="true"
-                      data-localization="label=netmonitor.reloadNotice2"/>
-              <label data-localization="content=netmonitor.reloadNotice3"/>
-            </hbox>
-            <hbox id="notice-perf-message" align="center">
-              <label data-localization="content=netmonitor.perfNotice1"/>
-              <button id="requests-menu-perf-notice-button"
-                      class="devtools-toolbarbutton"
-                      standalone="true"
-                      data-localization="tooltiptext=netmonitor.perfNotice3"/>
-              <label data-localization="content=netmonitor.perfNotice2"/>
-            </hbox>
-          </vbox>
-
-          <vbox id="requests-menu-contents" flex="1">
-            <hbox id="requests-menu-item-template" hidden="true">
-              <hbox class="requests-menu-subitem requests-menu-status"
-                    align="center">
-                <box class="requests-menu-status-icon"/>
-                <label class="plain requests-menu-status-code"
-                       crop="end"/>
-              </hbox>
-              <hbox class="requests-menu-subitem requests-menu-method-box"
-                    align="center">
-                <label class="plain requests-menu-method"
-                       crop="end"
-                       flex="1"/>
-              </hbox>
-              <hbox class="requests-menu-subitem requests-menu-icon-and-file"
-                    align="center">
-                <image class="requests-menu-icon" hidden="true"/>
-                <label class="plain requests-menu-file"
-                       crop="end"
-                       flex="1"/>
-              </hbox>
-              <hbox class="requests-menu-subitem requests-menu-security-and-domain"
-                    align="center">
-                <image class="requests-security-state-icon" />
-                <label class="plain requests-menu-domain"
-                       crop="end"
-                       flex="1"/>
-              </hbox>
-              <hbox class="requests-menu-subitem requests-menu-cause" align="center">
-                <label class="requests-menu-cause-stack" value="JS" hidden="true"/>
-                <label class="plain requests-menu-cause-label" flex="1" crop="end"/>
-              </hbox>
-              <label class="plain requests-menu-subitem requests-menu-type"
-                     crop="end"/>
-              <label class="plain requests-menu-subitem requests-menu-transferred"
-                     crop="end"/>
-              <label class="plain requests-menu-subitem requests-menu-size"
-                     crop="end"/>
-              <hbox class="requests-menu-subitem requests-menu-waterfall"
-                    align="center"
-                    flex="1">
-                <hbox class="requests-menu-timings"
-                      align="center">
-                  <label class="plain requests-menu-timings-total"/>
-                </hbox>
-              </hbox>
-            </hbox>
-          </vbox>
-        </vbox>
+        <html:div xmlns="http://www.w3.org/1999/xhtml"
+                  id="network-table"
+                  class="devtools-main-content">
+        </html:div>
 
         <splitter id="network-inspector-view-splitter"
                   class="devtools-side-splitter"/>
 
         <deck id="details-pane"
               hidden="true">
           <vbox id="custom-pane"
                 class="tabpanel-content">

--- a/devtools/client/netmonitor/panel.js
+++ b/devtools/client/netmonitor/panel.js
@@ -9,20 +9,17 @@ const EventEmitter = require("devtools/s
 const { Task } = require("devtools/shared/task");
 const { localizeMarkup } = require("devtools/shared/l10n");
 
 function NetMonitorPanel(iframeWindow, toolbox) {
   this.panelWin = iframeWindow;
   this.panelDoc = iframeWindow.document;
   this._toolbox = toolbox;
 
-  this._view = this.panelWin.NetMonitorView;
-  this._controller = this.panelWin.NetMonitorController;
-  this._controller._target = this.target;
-  this._controller._toolbox = this._toolbox;
+  this._netmonitor = new iframeWindow.Netmonitor(toolbox);
 
   EventEmitter.decorate(this);
 }
 
 exports.NetMonitorPanel = NetMonitorPanel;
 
 NetMonitorPanel.prototype = {
   /**
@@ -41,17 +38,18 @@ NetMonitorPanel.prototype = {
     let deferred = promise.defer();
     this._opening = deferred.promise;
 
     // Local monitoring needs to make the target remote.
     if (!this.target.isRemote) {
       yield this.target.makeRemote();
     }
 
-    yield this._controller.startupNetMonitor();
+    yield this._netmonitor.init();
+
     this.isReady = true;
     this.emit("ready");
 
     deferred.resolve(this);
     return this._opening;
   }),
 
   // DevToolPanel API
@@ -62,15 +60,15 @@ NetMonitorPanel.prototype = {
 
   destroy: Task.async(function* () {
     if (this._destroying) {
       return this._destroying;
     }
     let deferred = promise.defer();
     this._destroying = deferred.promise;
 
-    yield this._controller.shutdownNetMonitor();
+    yield this._netmonitor.destroy();
     this.emit("destroyed");
 
     deferred.resolve();
     return this._destroying;
   })
 };

--- a/devtools/client/netmonitor/performance-statistics-view.js
+++ b/devtools/client/netmonitor/performance-statistics-view.js
@@ -1,22 +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/. */
 
-/* import-globals-from ./netmonitor-controller.js */
-/* globals $ */
+/* eslint-disable mozilla/reject-some-requires */
+/* globals $, window, document, NetMonitorView */
 
 "use strict";
 
+const {XPCOMUtils} = require("resource://gre/modules/XPCOMUtils.jsm");
 const {PluralForm} = require("devtools/shared/plural-form");
 const {Filters} = require("./filter-predicates");
 const {L10N} = require("./l10n");
+const {EVENTS} = require("./events");
 const Actions = require("./actions/index");
 
+XPCOMUtils.defineLazyModuleGetter(this, "Chart",
+  "resource://devtools/client/shared/widgets/Chart.jsm");
+
 const REQUEST_TIME_DECIMALS = 2;
 const CONTENT_SIZE_DECIMALS = 2;
 
 // px
 const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;
 
 /**
  * Functions handling the performance statistics view.
@@ -167,17 +172,17 @@ PerformanceStatisticsView.prototype = {
       cached: 0,
       count: 0,
       label: e,
       size: 0,
       time: 0
     }));
 
     for (let requestItem of items) {
-      let details = requestItem.attachment;
+      let details = requestItem;
       let type;
 
       if (Filters.html(details)) {
         // "html"
         type = 0;
       } else if (Filters.css(details)) {
         // "css"
         type = 1;
@@ -232,21 +237,18 @@ PerformanceStatisticsView.prototype = {
  */
 function responseIsFresh({ responseHeaders, status }) {
   // Check for a "304 Not Modified" status and response headers availability.
   if (status != 304 || !responseHeaders) {
     return false;
   }
 
   let list = responseHeaders.headers;
-  let cacheControl = list.filter(e => {
-    return e.name.toLowerCase() == "cache-control";
-  })[0];
-
-  let expires = list.filter(e => e.name.toLowerCase() == "expires")[0];
+  let cacheControl = list.find(e => e.name.toLowerCase() == "cache-control");
+  let expires = list.find(e => e.name.toLowerCase() == "expires");
 
   // Check the "Cache-Control" header for a maximum age value.
   if (cacheControl) {
     let maxAgeMatch =
       cacheControl.value.match(/s-maxage\s*=\s*(\d+)/) ||
       cacheControl.value.match(/max-age\s*=\s*(\d+)/);
 
     if (maxAgeMatch && maxAgeMatch.pop() > 0) {

--- a/devtools/client/netmonitor/prefs.js
+++ b/devtools/client/netmonitor/prefs.js
@@ -8,11 +8,10 @@ const {PrefsHelper} = require("devtools/
 
 /**
  * Shortcuts for accessing various network monitor preferences.
  */
 
 exports.Prefs = new PrefsHelper("devtools.netmonitor", {
   networkDetailsWidth: ["Int", "panes-network-details-width"],
   networkDetailsHeight: ["Int", "panes-network-details-height"],
-  statistics: ["Bool", "statistics"],
   filters: ["Json", "filters"]
 });

new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/reducers/batching.js
@@ -0,0 +1,25 @@
+/* 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 { BATCH_ACTIONS } = require("../constants");
+
+/**
+ * A reducer to handle batched actions. For each action in the BATCH_ACTIONS array,
+ * the reducer is called successively on the array of batched actions, resulting in
+ * only one state update.
+ */
+function batchingReducer(nextReducer) {
+  return function reducer(state, action) {
+    switch (action.type) {
+      case BATCH_ACTIONS:
+        return action.actions.reduce(reducer, state);
+      default:
+        return nextReducer(state, action);
+    }
+  };
+}
+
+module.exports = batchingReducer;

--- a/devtools/client/netmonitor/reducers/filters.js
+++ b/devtools/client/netmonitor/reducers/filters.js
@@ -22,17 +22,17 @@ const FilterTypes = I.Record({
   media: false,
   flash: false,
   ws: false,
   other: false,
 });
 
 const Filters = I.Record({
   types: new FilterTypes({ all: true }),
-  url: "",
+  text: "",
 });
 
 function toggleFilterType(state, action) {
   let { filter } = action;
   let newState;
 
   // Ignore unknown filter type
   if (!state.has(filter)) {
@@ -67,15 +67,15 @@ function enableFilterTypeOnly(state, act
 
 function filters(state = new Filters(), action) {
   switch (action.type) {
     case TOGGLE_FILTER_TYPE:
       return state.set("types", toggleFilterType(state.types, action));
     case ENABLE_FILTER_TYPE_ONLY:
       return state.set("types", enableFilterTypeOnly(state.types, action));
     case SET_FILTER_TEXT:
-      return state.set("url", action.url);
+      return state.set("text", action.text);
     default:
       return state;
   }
 }
 
 module.exports = filters;

--- a/devtools/client/netmonitor/reducers/index.js
+++ b/devtools/client/netmonitor/reducers/index.js
@@ -1,16 +1,23 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { combineReducers } = require("devtools/client/shared/vendor/redux");
+const batchingReducer = require("./batching");
+const requests = require("./requests");
+const sort = require("./sort");
 const filters = require("./filters");
-const requests = require("./requests");
+const timingMarkers = require("./timing-markers");
 const ui = require("./ui");
 
-module.exports = combineReducers({
-  filters,
-  requests,
-  ui,
-});
+module.exports = batchingReducer(
+  combineReducers({
+    requests,
+    sort,
+    filters,
+    timingMarkers,
+    ui,
+  })
+);