Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

234 files changed, 33841 insertions, 0 deletions

diff --git a/devtools/client/netmonitor/src/actions/batching.js b/devtools/client/netmonitor/src/actions/batching.js
new file mode 100644
index 0000000000..f3b84f950d
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/batching.js
@@ -0,0 +1,50 @@
+/* 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,
+  BATCH_FLUSH,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * 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,
+  };
+}
+
+function batchFlush() {
+  return {
+    type: BATCH_FLUSH,
+  };
+}
+
+module.exports = {
+  batchActions,
+  batchEnable,
+  batchReset,
+  batchFlush,
+};
diff --git a/devtools/client/netmonitor/src/actions/filters.js b/devtools/client/netmonitor/src/actions/filters.js
new file mode 100644
index 0000000000..5aa5a99c10
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/filters.js
@@ -0,0 +1,58 @@
+/* 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 {
+  ENABLE_REQUEST_FILTER_TYPE_ONLY,
+  TOGGLE_REQUEST_FILTER_TYPE,
+  SET_REQUEST_FILTER_TEXT,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * Toggle an existing filter type state.
+ * If type 'all' is specified, all the other filter types are set to false.
+ * Available filter types are defined in filters reducer.
+ *
+ * @param {string} filter - A filter type is going to be updated
+ */
+function toggleRequestFilterType(filter) {
+  return {
+    type: TOGGLE_REQUEST_FILTER_TYPE,
+    filter,
+  };
+}
+
+/**
+ * Enable filter type exclusively.
+ * Except filter type is set to true, all the other filter types are set
+ * to false.
+ * Available filter types are defined in filters reducer.
+ *
+ * @param {string} filter - A filter type is going to be updated
+ */
+function enableRequestFilterTypeOnly(filter) {
+  return {
+    type: ENABLE_REQUEST_FILTER_TYPE_ONLY,
+    filter,
+  };
+}
+
+/**
+ * Set filter text in toolbar.
+ *
+ * @param {string} text - A filter text is going to be set
+ */
+function setRequestFilterText(text) {
+  return {
+    type: SET_REQUEST_FILTER_TEXT,
+    text,
+  };
+}
+
+module.exports = {
+  enableRequestFilterTypeOnly,
+  toggleRequestFilterType,
+  setRequestFilterText,
+};
diff --git a/devtools/client/netmonitor/src/actions/http-custom-request.js b/devtools/client/netmonitor/src/actions/http-custom-request.js
new file mode 100644
index 0000000000..e045107410
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/http-custom-request.js
@@ -0,0 +1,128 @@
+/* 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_ACTION_BAR,
+  SELECT_ACTION_BAR_TAB,
+  PANELS,
+  RIGHT_CLICK_REQUEST,
+  PRESELECT_REQUEST,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  selectRequest,
+} = require("resource://devtools/client/netmonitor/src/actions/selection.js");
+
+const {
+  openNetworkDetails,
+} = require("resource://devtools/client/netmonitor/src/actions/ui.js");
+
+const {
+  getRequestById,
+  getRequestByChannelId,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/**
+ * Open the entire HTTP Custom Request panel
+ * @returns {Function}
+ */
+function openHTTPCustomRequest(isOpen) {
+  return ({ dispatch, getState }) => {
+    dispatch({ type: OPEN_ACTION_BAR, open: isOpen });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.HTTP_CUSTOM_REQUEST,
+    });
+  };
+}
+
+/**
+ * Toggle visibility of New Custom Request panel in network panel
+ */
+function toggleHTTPCustomRequestPanel() {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+
+    const shouldClose =
+      state.ui.networkActionOpen &&
+      state.ui.selectedActionBarTabId === PANELS.HTTP_CUSTOM_REQUEST;
+    dispatch({ type: OPEN_ACTION_BAR, open: !shouldClose });
+
+    // reset the right clicked request
+    dispatch({ type: RIGHT_CLICK_REQUEST, id: null });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.HTTP_CUSTOM_REQUEST,
+    });
+  };
+}
+
+/**
+ * Send a new HTTP request using the data in the custom request form.
+ */
+function sendHTTPCustomRequest(request) {
+  return async ({ dispatch, getState, connector, commands }) => {
+    if (!request) {
+      return;
+    }
+
+    // Fetch request headers and post data from the backend, if needed.
+    // This is only needed if we are resending a request without editing.
+
+    if (request.requestHeadersAvailable || request.requestPostDataAvailable) {
+      await fetchNetworkUpdatePacket(connector.requestData, request, [
+        "requestHeaders",
+        "requestPostData",
+      ]);
+
+      // Get the request again, to get all the updated data
+      request = getRequestById(getState(), request.id);
+    }
+
+    // Send a new HTTP request using the data in the custom request form
+    const data = {
+      cause: request.cause || {},
+      url: request.url,
+      method: request.method,
+      httpVersion: request.httpVersion,
+    };
+
+    if (request.requestHeaders) {
+      data.headers = request.requestHeaders.headers;
+    }
+
+    if (request.requestPostData) {
+      data.body = request.requestPostData.postData?.text;
+    }
+
+    const { channelId } = await commands.networkCommand.sendHTTPRequest(data);
+
+    const newRequest = getRequestByChannelId(getState(), channelId);
+    // If the new custom request is available already select the request, else
+    // preselect the request.
+    if (newRequest) {
+      await dispatch(selectRequest(newRequest.id));
+    } else {
+      await dispatch({
+        type: PRESELECT_REQUEST,
+        id: channelId,
+      });
+    }
+    dispatch(openNetworkDetails(true));
+  };
+}
+
+module.exports = {
+  openHTTPCustomRequest,
+  toggleHTTPCustomRequestPanel,
+  sendHTTPCustomRequest,
+};
diff --git a/devtools/client/netmonitor/src/actions/index.js b/devtools/client/netmonitor/src/actions/index.js
new file mode 100644
index 0000000000..6e28281ab7
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/index.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const batching = require("resource://devtools/client/netmonitor/src/actions/batching.js");
+const filters = require("resource://devtools/client/netmonitor/src/actions/filters.js");
+const httpCustomRequest = require("resource://devtools/client/netmonitor/src/actions/http-custom-request.js");
+const requests = require("resource://devtools/client/netmonitor/src/actions/requests.js");
+const selection = require("resource://devtools/client/netmonitor/src/actions/selection.js");
+const sort = require("resource://devtools/client/netmonitor/src/actions/sort.js");
+const timingMarkers = require("resource://devtools/client/netmonitor/src/actions/timing-markers.js");
+const ui = require("resource://devtools/client/netmonitor/src/actions/ui.js");
+const messages = require("resource://devtools/client/netmonitor/src/actions/messages.js");
+const search = require("resource://devtools/client/netmonitor/src/actions/search.js");
+const requestBlocking = require("resource://devtools/client/netmonitor/src/actions/request-blocking.js");
+
+Object.assign(
+  exports,
+  batching,
+  filters,
+  httpCustomRequest,
+  requests,
+  search,
+  selection,
+  sort,
+  timingMarkers,
+  ui,
+  messages,
+  requestBlocking
+);
diff --git a/devtools/client/netmonitor/src/actions/messages.js b/devtools/client/netmonitor/src/actions/messages.js
new file mode 100644
index 0000000000..a8f49e9735
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/messages.js
@@ -0,0 +1,188 @@
+/* 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 {
+  MSG_ADD,
+  MSG_SELECT,
+  MSG_OPEN_DETAILS,
+  MSG_CLEAR,
+  MSG_TOGGLE_FILTER_TYPE,
+  MSG_TOGGLE_CONTROL,
+  MSG_SET_FILTER_TEXT,
+  MSG_TOGGLE_COLUMN,
+  MSG_RESET_COLUMNS,
+  MSG_CLOSE_CONNECTION,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  getDisplayedMessages,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
+
+/**
+ * Add message into state.
+ */
+function addMessage(httpChannelId, data, batch) {
+  return {
+    type: MSG_ADD,
+    httpChannelId,
+    data,
+    meta: { batch },
+  };
+}
+
+/**
+ * Select message.
+ */
+function selectMessage(message) {
+  return {
+    type: MSG_SELECT,
+    open: true,
+    message,
+  };
+}
+
+/**
+ * Open message details panel.
+ *
+ * @param {boolean} open - expected message details panel open state
+ */
+function openMessageDetails(open) {
+  return {
+    type: MSG_OPEN_DETAILS,
+    open,
+  };
+}
+
+/**
+ * Clear all messages from the MessageListContent
+ * component belonging to the current channelId
+ */
+function clearMessages() {
+  return {
+    type: MSG_CLEAR,
+  };
+}
+
+/**
+ * Show filtered messages from the MessageListContent
+ * component belonging to the current channelId
+ */
+function toggleMessageFilterType(filter) {
+  return {
+    type: MSG_TOGGLE_FILTER_TYPE,
+    filter,
+  };
+}
+
+/**
+ * Show control frames from the MessageListContent
+ * component belonging to the current channelId
+ */
+function toggleControlFrames() {
+  return {
+    type: MSG_TOGGLE_CONTROL,
+  };
+}
+
+/**
+ * Set filter text in toolbar.
+ *
+ */
+function setMessageFilterText(text) {
+  return {
+    type: MSG_SET_FILTER_TEXT,
+    text,
+  };
+}
+
+/**
+ * Resets all Messages columns to their default state.
+ *
+ */
+function resetMessageColumns() {
+  return {
+    type: MSG_RESET_COLUMNS,
+  };
+}
+
+/**
+ * Toggles a Message column
+ *
+ * @param {string} column - The column that is going to be toggled
+ */
+function toggleMessageColumn(column) {
+  return {
+    type: MSG_TOGGLE_COLUMN,
+    column,
+  };
+}
+
+/**
+ * Sets current connection status to closed
+ *
+ * @param {number} httpChannelId - Unique id identifying the channel
+ * @param {boolean} wasClean - False if connection terminated due to error
+ * @param {number} code - Error code
+ * @param {string} reason
+ */
+function closeConnection(httpChannelId, wasClean, code, reason) {
+  return {
+    type: MSG_CLOSE_CONNECTION,
+    httpChannelId,
+    wasClean,
+    code,
+    reason,
+  };
+}
+
+/**
+ * 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 selectMessageDelta(delta) {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+    const messages = getDisplayedMessages(state);
+
+    if (messages.length === 0) {
+      return;
+    }
+
+    const selIndex = messages.findIndex(
+      r => r === state.messages.selectedMessage
+    );
+
+    if (delta === "PAGE_DOWN") {
+      delta = Math.ceil(messages.length / PAGE_SIZE_ITEM_COUNT_RATIO);
+    } else if (delta === "PAGE_UP") {
+      delta = -Math.ceil(messages.length / PAGE_SIZE_ITEM_COUNT_RATIO);
+    }
+
+    const newIndex = Math.min(
+      Math.max(0, selIndex + delta),
+      messages.length - 1
+    );
+    const newItem = messages[newIndex];
+    dispatch(selectMessage(newItem));
+  };
+}
+
+module.exports = {
+  addMessage,
+  clearMessages,
+  closeConnection,
+  openMessageDetails,
+  resetMessageColumns,
+  selectMessage,
+  selectMessageDelta,
+  setMessageFilterText,
+  toggleControlFrames,
+  toggleMessageColumn,
+  toggleMessageFilterType,
+};
diff --git a/devtools/client/netmonitor/src/actions/moz.build b/devtools/client/netmonitor/src/actions/moz.build
new file mode 100644
index 0000000000..fc74e8cc56
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/moz.build
@@ -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/.
+
+DevToolsModules(
+    "batching.js",
+    "filters.js",
+    "http-custom-request.js",
+    "index.js",
+    "messages.js",
+    "request-blocking.js",
+    "requests.js",
+    "search.js",
+    "selection.js",
+    "sort.js",
+    "timing-markers.js",
+    "ui.js",
+)
diff --git a/devtools/client/netmonitor/src/actions/request-blocking.js b/devtools/client/netmonitor/src/actions/request-blocking.js
new file mode 100644
index 0000000000..502999c79f
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/request-blocking.js
@@ -0,0 +1,155 @@
+/* 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_BLOCKED_URL,
+  TOGGLE_BLOCKING_ENABLED,
+  TOGGLE_BLOCKED_URL,
+  UPDATE_BLOCKED_URL,
+  REMOVE_BLOCKED_URL,
+  REMOVE_ALL_BLOCKED_URLS,
+  ENABLE_ALL_BLOCKED_URLS,
+  DISABLE_ALL_BLOCKED_URLS,
+  DISABLE_MATCHING_URLS,
+  SYNCED_BLOCKED_URLS,
+  OPEN_ACTION_BAR,
+  SELECT_ACTION_BAR_TAB,
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function toggleRequestBlockingPanel() {
+  return async ({ dispatch, getState }) => {
+    const state = getState();
+    if (
+      state.ui.networkActionOpen &&
+      state.ui.selectedActionBarTabId === PANELS.BLOCKING
+    ) {
+      dispatch(closeRequestBlocking());
+    } else {
+      dispatch(await openRequestBlocking());
+    }
+  };
+}
+
+function toggleBlockingEnabled(enabled) {
+  return {
+    type: TOGGLE_BLOCKING_ENABLED,
+    enabled,
+  };
+}
+
+function removeBlockedUrl(url) {
+  return {
+    type: REMOVE_BLOCKED_URL,
+    url,
+  };
+}
+
+function removeAllBlockedUrls() {
+  return { type: REMOVE_ALL_BLOCKED_URLS };
+}
+
+function enableAllBlockedUrls() {
+  return { type: ENABLE_ALL_BLOCKED_URLS };
+}
+
+function disableAllBlockedUrls() {
+  return { type: DISABLE_ALL_BLOCKED_URLS };
+}
+
+function addBlockedUrl(url) {
+  return {
+    type: ADD_BLOCKED_URL,
+    url,
+  };
+}
+
+function toggleBlockedUrl(url) {
+  return {
+    type: TOGGLE_BLOCKED_URL,
+    url,
+  };
+}
+
+function updateBlockedUrl(oldUrl, newUrl) {
+  return {
+    type: UPDATE_BLOCKED_URL,
+    oldUrl,
+    newUrl,
+  };
+}
+
+async function openRequestBlocking() {
+  return async ({ dispatch, getState, commands }) => {
+    const state = getState();
+    if (!state.requestBlocking.blockingSynced) {
+      const blockedUrls = state.requestBlocking.blockedUrls;
+      const responses = await commands.networkCommand.getBlockedUrls();
+      const urls = responses.flat();
+      if (urls.length !== blockedUrls.length) {
+        urls.forEach(url => dispatch(addBlockedUrl(url)));
+      }
+      dispatch({ type: SYNCED_BLOCKED_URLS, synced: true });
+    }
+
+    dispatch({ type: OPEN_ACTION_BAR, open: true });
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.BLOCKING,
+    });
+  };
+}
+
+function closeRequestBlocking() {
+  return ({ dispatch }) => {
+    dispatch({ type: OPEN_ACTION_BAR, open: false });
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.BLOCKING,
+    });
+  };
+}
+
+function openRequestBlockingAndAddUrl(url) {
+  return async ({ dispatch, getState }) => {
+    const showBlockingPanel = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.requestBlocking"
+    );
+
+    if (showBlockingPanel) {
+      dispatch(await openRequestBlocking());
+    }
+    dispatch({ type: ADD_BLOCKED_URL, url });
+  };
+}
+
+function openRequestBlockingAndDisableUrls(url) {
+  return async ({ dispatch, getState }) => {
+    const showBlockingPanel = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.requestBlocking"
+    );
+
+    if (showBlockingPanel) {
+      dispatch(await openRequestBlocking());
+    }
+
+    dispatch({ type: DISABLE_MATCHING_URLS, url });
+  };
+}
+
+module.exports = {
+  toggleRequestBlockingPanel,
+  addBlockedUrl,
+  toggleBlockingEnabled,
+  toggleBlockedUrl,
+  removeBlockedUrl,
+  removeAllBlockedUrls,
+  enableAllBlockedUrls,
+  disableAllBlockedUrls,
+  updateBlockedUrl,
+  openRequestBlockingAndAddUrl,
+  openRequestBlockingAndDisableUrls,
+};
diff --git a/devtools/client/netmonitor/src/actions/requests.js b/devtools/client/netmonitor/src/actions/requests.js
new file mode 100644
index 0000000000..838f2509a9
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/requests.js
@@ -0,0 +1,183 @@
+/* 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_REQUEST,
+  CLEAR_REQUESTS,
+  CLONE_REQUEST,
+  CLONE_SELECTED_REQUEST,
+  REMOVE_SELECTED_CUSTOM_REQUEST,
+  RIGHT_CLICK_REQUEST,
+  SEND_CUSTOM_REQUEST,
+  SET_EVENT_STREAM_FLAG,
+  SET_RECORDING_STATE,
+  UPDATE_REQUEST,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getSelectedRequest,
+  getRequestById,
+  getRecordingState,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+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 },
+  };
+}
+
+function setEventStreamFlag(id, batch) {
+  return {
+    type: SET_EVENT_STREAM_FLAG,
+    id,
+    meta: { batch },
+  };
+}
+
+/**
+ * Clone request by id. Used when cloning a request
+ * through the "Edit and Resend" option present in the context menu.
+ */
+function cloneRequest(id) {
+  return {
+    id,
+    type: CLONE_REQUEST,
+  };
+}
+
+/**
+ * Right click a request without selecting it.
+ */
+function rightClickRequest(id) {
+  return {
+    id,
+    type: RIGHT_CLICK_REQUEST,
+  };
+}
+
+/**
+ * Clone the currently selected request, set the "isCustom" attribute.
+ * Used by the "Edit and Resend" feature.
+ */
+function cloneSelectedRequest() {
+  return {
+    type: CLONE_SELECTED_REQUEST,
+  };
+}
+
+/**
+ * Send a new HTTP request using the data in the custom request form.
+ */
+function sendCustomRequest(requestId = null) {
+  return async ({ dispatch, getState, connector, commands }) => {
+    let request;
+    if (requestId) {
+      request = getRequestById(getState(), requestId);
+    } else {
+      request = getSelectedRequest(getState());
+    }
+
+    if (!request) {
+      return;
+    }
+
+    // Fetch request headers and post data from the backend.
+    await fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "requestPostData",
+    ]);
+
+    // Reload the request from the store to get the headers.
+    request = getRequestById(getState(), request.id);
+
+    // Send a new HTTP request using the data in the custom request form
+    const data = {
+      cause: request.cause,
+      url: request.url,
+      method: request.method,
+      httpVersion: request.httpVersion,
+    };
+
+    if (request.requestHeaders) {
+      data.headers = request.requestHeaders.headers;
+    }
+
+    if (request.requestPostData) {
+      data.body = request.requestPostData.postData.text;
+    }
+
+    const { channelId } = await commands.networkCommand.sendHTTPRequest(data);
+
+    dispatch({
+      type: SEND_CUSTOM_REQUEST,
+      id: channelId,
+    });
+  };
+}
+
+/**
+ * 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,
+  };
+}
+/**
+ * Clear all requests
+ */
+function clearRequests() {
+  return ({ dispatch, connector }) => {
+    dispatch({ type: CLEAR_REQUESTS });
+    connector.clear();
+  };
+}
+
+/**
+ * Toggle monitoring
+ */
+function toggleRecording() {
+  return async ({ dispatch, getState, connector }) => {
+    const recording = !getRecordingState(getState());
+    if (recording) {
+      await connector.resume();
+    } else {
+      connector.pause();
+    }
+    dispatch({
+      type: SET_RECORDING_STATE,
+      recording,
+    });
+  };
+}
+
+module.exports = {
+  addRequest,
+  clearRequests,
+  cloneRequest,
+  cloneSelectedRequest,
+  rightClickRequest,
+  removeSelectedCustomRequest,
+  sendCustomRequest,
+  setEventStreamFlag,
+  toggleRecording,
+  updateRequest,
+};
diff --git a/devtools/client/netmonitor/src/actions/search.js b/devtools/client/netmonitor/src/actions/search.js
new file mode 100644
index 0000000000..97b123d361
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/search.js
@@ -0,0 +1,316 @@
+/* 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_SEARCH_QUERY,
+  ADD_SEARCH_RESULT,
+  CLEAR_SEARCH_RESULTS,
+  ADD_ONGOING_SEARCH,
+  OPEN_ACTION_BAR,
+  UPDATE_SEARCH_STATUS,
+  SEARCH_STATUS,
+  SET_TARGET_SEARCH_RESULT,
+  SELECT_ACTION_BAR_TAB,
+  TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH,
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  getDisplayedRequests,
+  getOngoingSearch,
+  getSearchStatus,
+  getRequestById,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const {
+  selectRequest,
+} = require("resource://devtools/client/netmonitor/src/actions/selection.js");
+const {
+  selectDetailsPanelTab,
+} = require("resource://devtools/client/netmonitor/src/actions/ui.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  searchInResource,
+} = require("resource://devtools/client/netmonitor/src/workers/search/index.js");
+
+/**
+ * Search through all resources. This is the main action exported
+ * from this module and consumed by Network panel UI.
+ */
+function search(connector, query) {
+  let canceled = false;
+
+  // Instantiate an `ongoingSearch` function/object. It's responsible
+  // for triggering set of asynchronous steps like fetching
+  // data from the backend and performing search over it.
+  // This `ongoingSearch` is stored in the Search reducer, so it can
+  // be canceled if needed (e.g. when new search is executed).
+  const newOngoingSearch = async ({ dispatch, getState }) => {
+    const state = getState();
+
+    dispatch(stopOngoingSearch());
+
+    await dispatch(addOngoingSearch(newOngoingSearch));
+    await dispatch(clearSearchResults());
+    await dispatch(addSearchQuery(query));
+
+    dispatch(updateSearchStatus(SEARCH_STATUS.FETCHING));
+
+    // Loop over all displayed resources (in the sorted order),
+    // fetch all the details data and run search worker that
+    // search through the resource structure.
+    const requests = getDisplayedRequests(state);
+    for (const request of requests) {
+      if (canceled) {
+        return;
+      }
+
+      // Fetch all data for the resource.
+      await loadResource(connector, request);
+      if (canceled) {
+        return;
+      }
+
+      // The state changed, so make sure to get fresh new reference
+      // to the updated resource object.
+      const updatedResource = getRequestById(getState(), request.id);
+      await dispatch(searchResource(updatedResource, query));
+    }
+
+    dispatch(updateSearchStatus(SEARCH_STATUS.DONE));
+  };
+
+  // Implement support for canceling (used e.g. when a new search
+  // is executed or the user stops the searching manually).
+  newOngoingSearch.cancel = () => {
+    canceled = true;
+  };
+
+  newOngoingSearch.isCanceled = () => {
+    return canceled;
+  };
+
+  return newOngoingSearch;
+}
+
+/**
+ * Fetch all data related to the specified resource from the backend.
+ */
+async function loadResource(connector, resource) {
+  const updateTypes = [
+    "responseHeaders",
+    "requestHeaders",
+    "responseCookies",
+    "requestCookies",
+    "requestPostData",
+    "responseContent",
+    "responseCache",
+    "stackTrace",
+    "securityInfo",
+  ];
+
+  return fetchNetworkUpdatePacket(connector.requestData, resource, updateTypes);
+}
+
+/**
+ * Search through all data within the specified resource.
+ */
+function searchResource(resource, query) {
+  return async ({ dispatch, getState }) => {
+    const state = getState();
+    const ongoingSearch = getOngoingSearch(state);
+
+    const modifiers = {
+      caseSensitive: state.search.caseSensitive,
+    };
+
+    // Run search in a worker and wait for the results. The return
+    // value is an array with search occurrences.
+    const result = await searchInResource(resource, query, modifiers);
+
+    if (!result.length || ongoingSearch.isCanceled()) {
+      return;
+    }
+
+    dispatch(addSearchResult(resource, result));
+  };
+}
+
+/**
+ * Add search query to the reducer.
+ */
+function addSearchResult(resource, result) {
+  return {
+    type: ADD_SEARCH_RESULT,
+    resource,
+    result,
+  };
+}
+
+/**
+ * Add search query to the reducer.
+ */
+function addSearchQuery(query) {
+  return {
+    type: ADD_SEARCH_QUERY,
+    query,
+  };
+}
+
+/**
+ * Clear all search results.
+ */
+function clearSearchResults() {
+  return {
+    type: CLEAR_SEARCH_RESULTS,
+  };
+}
+
+/**
+ * Used to clear and cancel an ongoing search.
+ * @returns {Function}
+ */
+function clearSearchResultAndCancel() {
+  return ({ dispatch, getState }) => {
+    dispatch(stopOngoingSearch());
+    dispatch(clearSearchResults());
+  };
+}
+
+/**
+ * Update status of the current search.
+ */
+function updateSearchStatus(status) {
+  return {
+    type: UPDATE_SEARCH_STATUS,
+    status,
+  };
+}
+
+/**
+ * Close the entire search panel.
+ */
+function closeSearch() {
+  return ({ dispatch, getState }) => {
+    dispatch(stopOngoingSearch());
+    dispatch({ type: OPEN_ACTION_BAR, open: false });
+  };
+}
+
+/**
+ * Open the entire search panel
+ * @returns {Function}
+ */
+function openSearch() {
+  return ({ dispatch, getState }) => {
+    dispatch({ type: OPEN_ACTION_BAR, open: true });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.SEARCH,
+    });
+  };
+}
+
+/**
+ * Toggles case sensitive search
+ * @returns {Function}
+ */
+function toggleCaseSensitiveSearch() {
+  return ({ dispatch, getState }) => {
+    dispatch({ type: TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH });
+  };
+}
+
+/**
+ * Toggle visibility of search panel in network panel
+ */
+function toggleSearchPanel() {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+
+    state.ui.networkActionOpen &&
+    state.ui.selectedActionBarTabId === PANELS.SEARCH
+      ? dispatch({ type: OPEN_ACTION_BAR, open: false })
+      : dispatch({ type: OPEN_ACTION_BAR, open: true });
+
+    dispatch({
+      type: SELECT_ACTION_BAR_TAB,
+      id: PANELS.SEARCH,
+    });
+  };
+}
+
+/**
+ * Append new search object into the reducer. The search object
+ * is cancellable and so, it implements `cancel` method.
+ */
+function addOngoingSearch(ongoingSearch) {
+  return {
+    type: ADD_ONGOING_SEARCH,
+    ongoingSearch,
+  };
+}
+
+/**
+ * Cancel the current ongoing search.
+ */
+function stopOngoingSearch() {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+    const ongoingSearch = getOngoingSearch(state);
+    const status = getSearchStatus(state);
+
+    if (ongoingSearch && status !== SEARCH_STATUS.DONE) {
+      ongoingSearch.cancel();
+      dispatch(updateSearchStatus(SEARCH_STATUS.CANCELED));
+    }
+  };
+}
+
+/**
+ * This action is fired when the user selects a search result
+ * within the Search panel. It opens the details side bar and
+ * selects the right side panel to show the context of the
+ * clicked search result.
+ */
+function navigate(searchResult) {
+  return ({ dispatch, getState }) => {
+    // Store target search result in Search reducer. It's used
+    // for search result navigation within the side panels.
+    dispatch(setTargetSearchResult(searchResult));
+
+    // Preselect the right side panel.
+    dispatch(selectDetailsPanelTab(searchResult.panel));
+
+    // Select related request in the UI (it also opens the
+    // right side bar automatically).
+    dispatch(selectRequest(searchResult.parentResource.id));
+  };
+}
+
+function setTargetSearchResult(searchResult) {
+  return {
+    type: SET_TARGET_SEARCH_RESULT,
+    searchResult,
+  };
+}
+
+module.exports = {
+  search,
+  closeSearch,
+  openSearch,
+  clearSearchResults,
+  addSearchQuery,
+  toggleSearchPanel,
+  navigate,
+  setTargetSearchResult,
+  toggleCaseSensitiveSearch,
+  clearSearchResultAndCancel,
+  stopOngoingSearch,
+};
diff --git a/devtools/client/netmonitor/src/actions/selection.js b/devtools/client/netmonitor/src/actions/selection.js
new file mode 100644
index 0000000000..4603fcb61c
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/selection.js
@@ -0,0 +1,80 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  SELECT_REQUEST,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getDisplayedRequests,
+  getSortedRequests,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
+
+/**
+ * Select request with a given id.
+ */
+function selectRequest(id, request) {
+  return {
+    type: SELECT_REQUEST,
+    id,
+    request,
+  };
+}
+
+/**
+ * Select request with a given index (sorted order)
+ */
+function selectRequestByIndex(index) {
+  return ({ dispatch, getState }) => {
+    const requests = getSortedRequests(getState());
+    let itemId;
+    if (index >= 0 && index < requests.length) {
+      itemId = requests[index].id;
+    }
+    dispatch(selectRequest(itemId));
+  };
+}
+
+/**
+ * Move the selection up to down according to the "delta" parameter. Possible values:
+ * - Number: positive or negative, move up or down by specified distance
+ * - "PAGE_UP" | "PAGE_DOWN" (String): page up or page down
+ * - +Infinity | -Infinity: move to the start or end of the list
+ */
+function selectDelta(delta) {
+  return ({ dispatch, getState }) => {
+    const state = getState();
+    const requests = getDisplayedRequests(state);
+
+    if (!requests.length) {
+      return;
+    }
+
+    const selIndex = requests.findIndex(
+      r => r.id === state.requests.selectedId
+    );
+
+    if (delta === "PAGE_DOWN") {
+      delta = Math.ceil(requests.length / PAGE_SIZE_ITEM_COUNT_RATIO);
+    } else if (delta === "PAGE_UP") {
+      delta = -Math.ceil(requests.length / PAGE_SIZE_ITEM_COUNT_RATIO);
+    }
+
+    const newIndex = Math.min(
+      Math.max(0, selIndex + delta),
+      requests.length - 1
+    );
+    const newItem = requests[newIndex];
+    dispatch(selectRequest(newItem.id, newItem));
+  };
+}
+
+module.exports = {
+  selectRequest,
+  selectRequestByIndex,
+  selectDelta,
+};
diff --git a/devtools/client/netmonitor/src/actions/sort.js b/devtools/client/netmonitor/src/actions/sort.js
new file mode 100644
index 0000000000..06c3f92c54
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/sort.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  SORT_BY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function sortBy(sortType) {
+  return {
+    type: SORT_BY,
+    sortType,
+  };
+}
+
+module.exports = {
+  sortBy,
+};
diff --git a/devtools/client/netmonitor/src/actions/timing-markers.js b/devtools/client/netmonitor/src/actions/timing-markers.js
new file mode 100644
index 0000000000..cce53e8100
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/timing-markers.js
@@ -0,0 +1,22 @@
+/* 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("resource://devtools/client/netmonitor/src/constants.js");
+
+exports.addTimingMarker = marker => {
+  return {
+    type: ADD_TIMING_MARKER,
+    marker,
+  };
+};
+
+exports.clearTimingMarkers = () => {
+  return {
+    type: CLEAR_TIMING_MARKERS,
+  };
+};
diff --git a/devtools/client/netmonitor/src/actions/ui.js b/devtools/client/netmonitor/src/actions/ui.js
new file mode 100644
index 0000000000..4be087c5df
--- /dev/null
+++ b/devtools/client/netmonitor/src/actions/ui.js
@@ -0,0 +1,257 @@
+/* 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 {
+  ACTIVITY_TYPE,
+  OPEN_NETWORK_DETAILS,
+  RESIZE_NETWORK_DETAILS,
+  ENABLE_PERSISTENT_LOGS,
+  DISABLE_BROWSER_CACHE,
+  OPEN_STATISTICS,
+  RESET_COLUMNS,
+  SELECT_DETAILS_PANEL_TAB,
+  SELECT_ACTION_BAR_TAB,
+  TOGGLE_COLUMN,
+  WATERFALL_RESIZE,
+  SET_COLUMNS_WIDTH,
+  SET_HEADERS_URL_PREVIEW_EXPANDED,
+  OPEN_ACTION_BAR,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  getDisplayedRequests,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const DEVTOOLS_DISABLE_CACHE_PREF = "devtools.cache.disabled";
+
+/**
+ * Change network details panel.
+ *
+ * @param {boolean} open - expected network details panel open state
+ */
+function openNetworkDetails(open) {
+  return ({ dispatch, getState }) => {
+    const visibleRequestItems = getDisplayedRequests(getState());
+    const defaultSelectedId = visibleRequestItems.length
+      ? visibleRequestItems[0].id
+      : null;
+
+    return dispatch({
+      type: OPEN_NETWORK_DETAILS,
+      open,
+      defaultSelectedId,
+    });
+  };
+}
+
+/**
+ * Change network action bar open state.
+ *
+ * @param {boolean} open - expected network action bar open state
+ */
+function openNetworkActionBar(open) {
+  return {
+    type: OPEN_ACTION_BAR,
+    open,
+  };
+}
+
+/**
+ * Change network details panel size.
+ *
+ * @param {integer} width
+ * @param {integer} height
+ */
+function resizeNetworkDetails(width, height) {
+  return {
+    type: RESIZE_NETWORK_DETAILS,
+    width,
+    height,
+  };
+}
+
+/**
+ * Change persistent logs state.
+ *
+ * @param {boolean} enabled - expected persistent logs enabled state
+ */
+function enablePersistentLogs(enabled, skipTelemetry = false) {
+  return {
+    type: ENABLE_PERSISTENT_LOGS,
+    enabled,
+    skipTelemetry,
+  };
+}
+
+/**
+ * Change browser cache state.
+ *
+ * @param {boolean} disabled - expected browser cache in disable state
+ */
+function disableBrowserCache(disabled) {
+  return {
+    type: DISABLE_BROWSER_CACHE,
+    disabled,
+  };
+}
+
+/**
+ * Change performance statistics panel open state.
+ *
+ * @param {Object} connector - connector object to the backend
+ * @param {boolean} visible - expected performance statistics panel open state
+ */
+function openStatistics(connector, open) {
+  if (open) {
+    connector.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+  } else if (Services.prefs.getBoolPref(DEVTOOLS_DISABLE_CACHE_PREF)) {
+    // Opening the Statistics panel reconfigures the page and enables
+    // the browser cache (using ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED).
+    // So, make sure to disable the cache again when the user returns back
+    // from the Statistics panel (if DEVTOOLS_DISABLE_CACHE_PREF == true).
+    // See also bug 1430359.
+    connector.triggerActivity(ACTIVITY_TYPE.DISABLE_CACHE);
+  }
+  return {
+    type: OPEN_STATISTICS,
+    open,
+  };
+}
+
+/**
+ * Resets all columns to their default state.
+ *
+ */
+function resetColumns() {
+  return {
+    type: RESET_COLUMNS,
+  };
+}
+
+/**
+ * Waterfall width has changed (likely on window resize). Update the UI.
+ */
+function resizeWaterfall(width) {
+  return {
+    type: WATERFALL_RESIZE,
+    width,
+  };
+}
+
+/**
+ * Change the selected tab for network details panel.
+ *
+ * @param {string} id - tab id to be selected
+ */
+function selectDetailsPanelTab(id) {
+  return {
+    type: SELECT_DETAILS_PANEL_TAB,
+    id,
+  };
+}
+
+/**
+ * Change the selected tab for network action bar.
+ *
+ * @param {string} id - tab id to be selected
+ */
+function selectActionBarTab(id) {
+  return {
+    type: SELECT_ACTION_BAR_TAB,
+    id,
+  };
+}
+
+/**
+ * Toggles a column
+ *
+ * @param {string} column - The column that is going to be toggled
+ */
+function toggleColumn(column) {
+  return {
+    type: TOGGLE_COLUMN,
+    column,
+  };
+}
+
+/**
+ * Set width of multiple columns
+ *
+ * @param {array} widths - array of pairs {name, width}
+ */
+function setColumnsWidth(widths) {
+  return {
+    type: SET_COLUMNS_WIDTH,
+    widths,
+  };
+}
+
+/**
+ * Toggle network details panel.
+ */
+function toggleNetworkDetails() {
+  return ({ dispatch, getState }) =>
+    dispatch(openNetworkDetails(!getState().ui.networkDetailsOpen));
+}
+
+/**
+ * Toggle network action panel.
+ */
+function toggleNetworkActionBar() {
+  return ({ dispatch, getState }) =>
+    dispatch(openNetworkActionBar(!getState().ui.networkActionOpen));
+}
+
+/**
+ * Toggle persistent logs status.
+ */
+function togglePersistentLogs() {
+  return ({ dispatch, getState }) =>
+    dispatch(enablePersistentLogs(!getState().ui.persistentLogsEnabled));
+}
+
+/**
+ * Toggle browser cache status.
+ */
+function toggleBrowserCache() {
+  return ({ dispatch, getState }) =>
+    dispatch(disableBrowserCache(!getState().ui.browserCacheDisabled));
+}
+
+/**
+ * Toggle performance statistics panel.
+ */
+function toggleStatistics(connector) {
+  return ({ dispatch, getState }) =>
+    dispatch(openStatistics(connector, !getState().ui.statisticsOpen));
+}
+
+function setHeadersUrlPreviewExpanded(expanded) {
+  return {
+    type: SET_HEADERS_URL_PREVIEW_EXPANDED,
+    expanded,
+  };
+}
+
+module.exports = {
+  openNetworkDetails,
+  openNetworkActionBar,
+  resizeNetworkDetails,
+  enablePersistentLogs,
+  disableBrowserCache,
+  openStatistics,
+  resetColumns,
+  resizeWaterfall,
+  selectDetailsPanelTab,
+  selectActionBarTab,
+  toggleColumn,
+  setColumnsWidth,
+  toggleNetworkDetails,
+  toggleNetworkActionBar,
+  togglePersistentLogs,
+  toggleBrowserCache,
+  toggleStatistics,
+  setHeadersUrlPreviewExpanded,
+};
diff --git a/devtools/client/netmonitor/src/api.js b/devtools/client/netmonitor/src/api.js
new file mode 100644
index 0000000000..8d760de788
--- /dev/null
+++ b/devtools/client/netmonitor/src/api.js
@@ -0,0 +1,216 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+const {
+  bindActionCreators,
+} = require("resource://devtools/client/shared/vendor/redux.js");
+const {
+  Connector,
+} = require("resource://devtools/client/netmonitor/src/connector/index.js");
+const {
+  configureStore,
+} = require("resource://devtools/client/netmonitor/src/create-store.js");
+const {
+  EVENTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+
+const {
+  getDisplayedRequestById,
+  getSortedRequests,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+/**
+ * API object for NetMonitor panel (like a facade). This object can be
+ * consumed by other panels, WebExtension API, etc.
+ *
+ * This object doesn't depend on the panel UI and can be created
+ * and used even if the Network panel UI doesn't exist.
+ */
+function NetMonitorAPI() {
+  EventEmitter.decorate(this);
+
+  // Connector to the backend.
+  this.connector = new Connector();
+
+  // List of listeners for `devtools.network.onRequestFinished` WebExt API
+  this._requestFinishedListeners = new Set();
+
+  // Bind event handlers
+  this.onPayloadReady = this.onPayloadReady.bind(this);
+}
+
+NetMonitorAPI.prototype = {
+  async connect(toolbox) {
+    // Bail out if already connected.
+    if (this.toolbox) {
+      return;
+    }
+
+    this.toolbox = toolbox;
+
+    // Configure store/state object.
+    this.store = configureStore(
+      this.connector,
+      this.toolbox.commands,
+      this.toolbox.telemetry
+    );
+    this.actions = bindActionCreators(Actions, this.store.dispatch);
+
+    // Register listener for new requests (utilized by WebExtension API).
+    this.on(EVENTS.PAYLOAD_READY, this.onPayloadReady);
+
+    // Initialize connection to the backend. Pass `this` as the owner,
+    // so this object can receive all emitted events.
+    const connection = {
+      toolbox,
+      owner: this,
+    };
+
+    await this.connector.connect(connection, this.actions, this.store.getState);
+  },
+
+  /**
+   * Clean up (unmount from DOM, remove listeners, disconnect).
+   */
+  destroy() {
+    this.off(EVENTS.PAYLOAD_READY, this.onPayloadReady);
+
+    this.connector.disconnect();
+
+    if (this.harExportConnector) {
+      this.harExportConnector.disconnect();
+    }
+  },
+
+  // HAR
+
+  /**
+   * Support for `devtools.network.getHAR` (get collected data as HAR)
+   */
+  async getHar() {
+    const {
+      HarExporter,
+    } = require("resource://devtools/client/netmonitor/src/har/har-exporter.js");
+    const state = this.store.getState();
+
+    const options = {
+      connector: this.connector,
+      items: getSortedRequests(state),
+    };
+
+    return HarExporter.getHar(options);
+  },
+
+  /**
+   * Support for `devtools.network.onRequestFinished`. A hook for
+   * every finished HTTP request used by WebExtensions API.
+   */
+  async onPayloadReady(resource) {
+    if (!this._requestFinishedListeners.size) {
+      return;
+    }
+
+    const {
+      HarExporter,
+    } = require("resource://devtools/client/netmonitor/src/har/har-exporter.js");
+
+    const connector = await this.getHarExportConnector();
+    const request = getDisplayedRequestById(
+      this.store.getState(),
+      resource.actor
+    );
+    if (!request) {
+      console.error("HAR: request not found " + resource.actor);
+      return;
+    }
+
+    const options = {
+      connector,
+      includeResponseBodies: false,
+      items: [request],
+    };
+
+    const har = await HarExporter.getHar(options);
+
+    // There is page so remove the page reference.
+    const harEntry = har.log.entries[0];
+    delete harEntry.pageref;
+
+    this._requestFinishedListeners.forEach(listener =>
+      listener({
+        harEntry,
+        requestId: resource.actor,
+      })
+    );
+  },
+
+  /**
+   * Support for `Request.getContent` WebExt API (lazy loading response body)
+   */
+  async fetchResponseContent(requestId) {
+    return this.connector.requestData(requestId, "responseContent");
+  },
+
+  /**
+   * Add listener for `onRequestFinished` events.
+   *
+   * @param {Object} listener
+   *        The listener to be called it's expected to be
+   *        a function that takes ({harEntry, requestId})
+   *        as first argument.
+   */
+  addRequestFinishedListener(listener) {
+    this._requestFinishedListeners.add(listener);
+  },
+
+  removeRequestFinishedListener(listener) {
+    this._requestFinishedListeners.delete(listener);
+  },
+
+  hasRequestFinishedListeners() {
+    return this._requestFinishedListeners.size > 0;
+  },
+
+  /**
+   * Separate connector for HAR export.
+   */
+  async getHarExportConnector() {
+    if (this.harExportConnector) {
+      // Wait for the connector to be ready to avoid exceptions if this method is called
+      // twice during its initialization.
+      await this.harExportConnectorReady;
+      return this.harExportConnector;
+    }
+
+    const connection = {
+      toolbox: this.toolbox,
+    };
+
+    this.harExportConnector = new Connector();
+    this.harExportConnectorReady = this.harExportConnector.connect(connection);
+
+    await this.harExportConnectorReady;
+    return this.harExportConnector;
+  },
+
+  /**
+   * Resends a given network request
+   * @param {String} requestId
+   *        Id of the network request
+   */
+  resendRequest(requestId) {
+    // Flush queued requests.
+    this.store.dispatch(Actions.batchFlush());
+    // Send custom request with same url, headers and body as the request
+    // with the given requestId.
+    this.store.dispatch(Actions.sendCustomRequest(requestId));
+  },
+};
+
+exports.NetMonitorAPI = NetMonitorAPI;
diff --git a/devtools/client/netmonitor/src/app.js b/devtools/client/netmonitor/src/app.js
new file mode 100644
index 0000000000..d7cf642d48
--- /dev/null
+++ b/devtools/client/netmonitor/src/app.js
@@ -0,0 +1,135 @@
+/* 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,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  render,
+  unmountComponentAtNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const Provider = createFactory(
+  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
+);
+const App = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/App.js")
+);
+const {
+  EVENTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  getDisplayedRequestById,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const SearchDispatcher = require("resource://devtools/client/netmonitor/src/workers/search/index.js");
+
+/**
+ * Global App object for Network panel. This object depends
+ * on the UI and can't be created independently.
+ *
+ * This object can be consumed by other panels (e.g. Console
+ * is using inspectRequest), by the Launchpad (bootstrap), etc.
+ *
+ * @param {Object} api An existing API object to be reused.
+ */
+function NetMonitorApp(api) {
+  this.api = api;
+}
+
+NetMonitorApp.prototype = {
+  async bootstrap({ toolbox, document, win }) {
+    // Get the root element for mounting.
+    this.mount = document.querySelector("#mount");
+
+    const openLink = link => {
+      const parentDoc = toolbox.doc;
+      const iframe = parentDoc.getElementById(
+        "toolbox-panel-iframe-netmonitor"
+      );
+      const { top } = iframe.ownerDocument.defaultView;
+      top.openWebLinkIn(link, "tab");
+    };
+
+    const openSplitConsole = err => {
+      toolbox.openSplitConsole().then(() => {
+        toolbox.target.logErrorInPage(err, "har");
+      });
+    };
+
+    const { actions, connector, store } = this.api;
+
+    const sourceMapURLService = toolbox.sourceMapURLService;
+    const app = App({
+      actions,
+      connector,
+      openLink,
+      openSplitConsole,
+      sourceMapURLService,
+      toolboxDoc: toolbox.doc,
+    });
+
+    // Render the root Application component.
+    render(Provider({ store }, app), this.mount);
+  },
+
+  /**
+   * Clean up (unmount from DOM, remove listeners, disconnect).
+   */
+  destroy() {
+    unmountComponentAtNode(this.mount);
+
+    SearchDispatcher.stop();
+
+    // Make sure to destroy the API object. It's usually destroyed
+    // in the Toolbox destroy method, but we need it here for case
+    // where the Network panel is initialized without the toolbox
+    // and running in a tab (see initialize.js for details).
+    this.api.destroy();
+  },
+
+  /**
+   * Selects the specified request in the waterfall and opens the details view.
+   * This is a firefox toolbox specific API, which providing an ability to inspect
+   * a network request directly from other internal toolbox panel.
+   *
+   * @param {string} requestId The actor ID of the request to inspect.
+   * @return {object} A promise resolved once the task finishes.
+   */
+  async inspectRequest(requestId) {
+    const { actions, store } = this.api;
+
+    // Look for the request in the existing ones or wait for it to appear,
+    // if the network monitor is still loading.
+    return new Promise(resolve => {
+      let request = null;
+      const inspector = () => {
+        request = getDisplayedRequestById(store.getState(), requestId);
+        if (!request) {
+          // Reset filters so that the request is visible.
+          actions.toggleRequestFilterType("all");
+          request = getDisplayedRequestById(store.getState(), requestId);
+        }
+
+        // If the request was found, select it. Otherwise this function will be
+        // called again once new requests arrive.
+        if (request) {
+          this.api.off(EVENTS.REQUEST_ADDED, inspector);
+          actions.selectRequest(request.id);
+          resolve();
+        }
+      };
+
+      inspector();
+
+      if (!request) {
+        this.api.on(EVENTS.REQUEST_ADDED, inspector);
+      }
+    });
+  },
+};
+
+exports.NetMonitorApp = NetMonitorApp;
diff --git a/devtools/client/netmonitor/src/assets/icons/arrow-up.svg b/devtools/client/netmonitor/src/assets/icons/arrow-up.svg
new file mode 100644
index 0000000000..ed45876011
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/arrow-up.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M8 2C8.2336 2 8.45387 2.10885 8.59577 2.29441L11.8458 6.54441C12.0784 6.84863 12.0445 7.27924 11.7671 7.54327C11.4897 7.8073 11.0579 7.81991 10.7655 7.57254L9 6V13C9 13.5523 8.55228 14 8 14C7.44772 14 7 13.5523 7 13V6L5.23446 7.57254C4.9421 7.81991 4.51034 7.8073 4.23293 7.54327C3.95553 7.27924 3.9216 6.84863 4.15423 6.54441L7.40423 2.29441C7.54613 2.10885 7.7664 2 8 2Z" />
+</svg>
diff --git a/devtools/client/netmonitor/src/assets/icons/play.svg b/devtools/client/netmonitor/src/assets/icons/play.svg
new file mode 100644
index 0000000000..a47acd4613
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/play.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Triangle-2" fill="#0A84FF" points="14 8 4 14 4 2"></polygon>
+    </g>
+</svg>
diff --git a/devtools/client/netmonitor/src/assets/icons/shield.svg b/devtools/client/netmonitor/src/assets/icons/shield.svg
new file mode 100644
index 0000000000..dd7676d59f
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/shield.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" fill-rule="evenodd" d="M13 5.049l-1 1V6.5c0 2.877-.954 4.49-1.905 5.386a4.66 4.66 0 0 1-1.375.903c-.384.162-.703.21-.72.21a3.104 3.104 0 0 1-.72-.21 4.63 4.63 0 0 1-1.24-.78l-.708.708c.545.487 1.099.8 1.56.994.476.2.89.289 1.108.289.218 0 .632-.089 1.108-.29a5.66 5.66 0 0 0 1.672-1.096C11.954 11.51 13 9.623 13 6.5V5.049zM8 10.049l-1.1 1.099c.31.29.672.515 1.1.652v-1.752z M8 1.993l4.08.68c.126.021.243.062.349.12l.582-.582a.55.55 0 1 1 .778.778l-10.8 10.8a.55.55 0 1 1-.778-.778l1.863-1.863C3.442 10.038 3 8.53 3 6.5V3.758a1.1 1.1 0 0 1 .92-1.085L8 1.993zM4 6.5V3.758a.1.1 0 0 1 .084-.098L8 3.007l3.613.602L8 7.222V4.2l-2.8.5c0 1.409.095 3.231.626 4.696L4.812 10.41C4.338 9.478 4 8.213 4 6.5z"/>
+</svg>
diff --git a/devtools/client/netmonitor/src/assets/icons/turtle.svg b/devtools/client/netmonitor/src/assets/icons/turtle.svg
new file mode 100644
index 0000000000..1f308649f3
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/icons/turtle.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 7.5" width="12" height="12" fill="context-fill">
+  <path d="M1.5,4.5c.75,0,1.31.75,1.68,1.49A4.47,4.47,0,0,1,7.5,2.25C10.5,2.25,12,5,12,7.5h-.75V9.38a.37.37,0,0,1-.37.38H9.38A.38.38,0,0,1,9,9.38V8.25H5.25V9.38a.37.37,0,0,1-.37.38H3.38A.37.37,0,0,1,3,9.38V7.5H1.5a1.5,1.5,0,0,1,0-3Z" transform="translate(0 -2.25)"/>
+</svg>
diff --git a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
new file mode 100644
index 0000000000..9549985326
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css
@@ -0,0 +1,181 @@
+/* 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/. */
+
+.network-monitor .custom-method-and-url .custom-method-value-label {
+  grid-column: 1 / 1;
+  grid-row: 1 / 1;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value {
+  grid-column: 2 / 2;
+  grid-row: 2 / 2;
+  margin-inline-start: 12px;
+}
+
+.network-monitor .custom-method-and-url .custom-method-value {
+  grid-column: 1 / 1;
+  grid-row: 2 / 2;
+}
+
+.network-monitor .custom-method-and-url .custom-url-value-label {
+  grid-column: 2 / 2;
+  grid-row: 1 / 1 ;
+  margin-inline-start: 12px;
+}
+
+.network-monitor .tabpanel-summary-container.custom-method-and-url {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.network-monitor .custom-method-and-url input {
+  font-weight: 400;
+  margin-top: 4px;
+  min-width: 9ch;
+  padding: 2px 3px;
+}
+
+.network-monitor .custom-request-panel textarea {
+  font-weight: 400;
+  margin-top: 4px;
+  padding: 8px;
+  direction: ltr;
+}
+
+.network-monitor .custom-request-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.network-monitor .custom-request-panel .custom-request-panel-content {
+  flex: 1 1 auto;
+  height: auto;
+  overflow: auto;
+}
+
+.network-monitor .custom-request-panel-content > div:not(.custom-request) {
+  margin-bottom: 12px;
+  padding-inline: 16px;
+}
+
+.network-monitor .custom-request {
+  display: block;
+  padding: 0;
+}
+
+.network-monitor .custom-request .custom-request-button-container {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  gap: 8px;
+  margin-block: 16px 12px;
+  margin-inline: 16px;
+}
+
+.network-monitor .custom-request-panel .custom-request-label {
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.network-monitor .custom-request button {
+  height: 24px;
+  margin-bottom: 4px;
+  padding-inline: 8px;
+  width: auto;
+}
+
+.network-monitor .custom-request button:focus {
+  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
+  0 0 0 4px rgba(10,132,255,0.3)
+}
+
+.network-monitor .custom-request #custom-request-send-button {
+  background-color: var(--blue-60);
+  color: white;
+}
+
+.network-monitor .custom-request #custom-request-send-button:active {
+  background-color: var(--blue-80);
+}
+
+.network-monitor .custom-request #custom-request-send-button:hover {
+  background-color: var(--blue-70);
+}
+
+.network-monitor .custom-request #custom-request-close-button {
+  margin-inline-end: 4px;
+}
+
+.network-monitor .custom-header {
+  border-style: solid;
+  border-width: 0;
+  flex: none;
+  height: calc(var(--theme-toolbar-height) + 1px);
+  padding: 4px 16px;
+}
+
+:root.theme-dark .network-details-bar .custom-request-panel {
+  background-color: var(--grey-85);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button {
+  background-color: var(--toolbarbutton-background);
+  border: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-dark .network-monitor #custom-request-close-button:focus {
+  background-color: var(--theme-selection-focus-background);
+}
+
+:root.theme-dark .network-monitor .custom-request-label.custom-header {
+  background-color: var(--grey-80);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-details-bar .custom-request-panel input,
+:root.theme-dark .network-details-bar .custom-request-panel textarea {
+  background-color: var(--grey-70);
+  border: 1px solid var(--grey-85);
+  color: white;
+}
+
+:root.theme-dark .network-monitor .custom-request-label {
+  color: var(--grey-40);
+}
+
+:root.theme-light .network-details-bar .custom-request-label.custom-header {
+  background-color: var(--grey-10);
+  border-bottom: 1px solid var(--grey-25);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button {
+  background-color: var(--grey-20);
+  border: var(--theme-splitter-color);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-light .network-monitor #custom-request-close-button:focus {
+  outline: 2px solid var(--blue-50);
+  outline-offset: -2px;
+  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
+  border-radius: 2px;
+}
+
+:root.theme-light .network-details-bar .custom-request-panel input,
+:root.theme-light .network-details-bar .custom-request-panel textarea {
+  background-color: white;
+  border: 1px solid var(--grey-25);
+  color: var(--grey-90);
+}
+
+:root.theme-light .network-monitor .custom-request-label {
+  color: var(--grey-60);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
new file mode 100644
index 0000000000..cd0f269bc6
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css
@@ -0,0 +1,379 @@
+/* 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/. */
+
+.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input ) {
+  padding-inline-start: 0;
+  margin: 0;
+}
+
+.network-monitor .tabpanel-summary-container.http-custom-method-and-url {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  width: 100%;
+}
+
+.network-monitor .http-custom-method-and-url .http-custom-method-value {
+  grid-column: 1 / 1;
+  grid-row: 1 / 1;
+  align-self: start;
+  margin-inline-start: 10px;
+  padding-top: 4px;
+  font-size: 11px;
+  line-height: 13px;
+}
+
+.auto-growing-textarea {
+  display: grid;
+  width: 100%;
+}
+
+.auto-growing-textarea:focus-within::after {
+  content: attr(data-replicated-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+  word-wrap: break-word;
+}
+
+.auto-growing-textarea > textarea {
+  resize: none;
+  overflow: hidden;
+  /* Force the content in a single line */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* When editing a textarea, restore the multiline display */
+.auto-growing-textarea > textarea:focus {
+  text-overflow: unset;
+  white-space: unset;
+}
+
+.auto-growing-textarea > textarea,
+.auto-growing-textarea:focus-within::after {
+  grid-area: 1 / 1 / 2 / 2;
+  border: 0;
+  font-weight: normal;
+  min-width: 9ch;
+  padding: 4px;
+  padding-inline-start: 7px;
+  /* Adding this to have maximo 5 lines */
+  max-height: 70px;
+  overflow-y: auto;
+}
+
+.network-monitor .http-custom-method-and-url .http-custom-method-value,
+.tabpanel-summary-container.http-custom-section .tabpanel-summary-input {
+  border: 0;
+}
+
+.tabpanel-summary-container .http-custom-section .tabpanel-summary-input-value {
+  font-weight: normal;
+  min-width: 9ch;
+  padding: 4px;
+  padding-inline-start: 7px;
+}
+
+.network-monitor .http-custom-method-and-url input ::placeholder {
+  color: var(--grey-50);
+  font-size: 11px;
+  line-height: 13px;
+  margin-inline-end: 8px;
+}
+
+.network-monitor .tabpanel-summary-container .http-custom-request-label {
+  padding: 6px 13px;
+  font-size: 12px;
+  line-height: 14px;
+}
+
+.network-monitor .http-custom-request-panel textarea {
+  color: var(--grey-50);
+  font-weight: normal;
+  font-size: 11px;
+  line-height: 13px;
+  direction: ltr;
+}
+
+.network-monitor .http-custom-request-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.network-monitor .http-custom-request-panel .http-custom-request-panel-content {
+  flex: 1 1 auto;
+  height: auto;
+  overflow: auto;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  width: 100%;
+  overflow: hidden;
+  padding: 0px 13px;
+  padding-inline-end: 0;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-name {
+  width: 25%;
+  align-self: stretch;
+  min-width: min-content;
+}
+
+.network-monitor .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .tabpanel-summary-input-value {
+  width: 75%;
+  align-self: stretch;
+}
+
+.map-add-new-inputs {
+  padding-bottom: 2px;
+}
+
+#http-custom-postdata-value.tabpanel-summary-input {
+  padding-inline-start: 14px;
+}
+
+.http-custom-delete-button {
+  opacity: 0;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 2px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  position: absolute;
+  right: 0;
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button::-moz-focus-inner {
+  border: none;
+}
+
+.tabpanel-summary-container.http-custom-input:hover .http-custom-delete-button {
+  opacity: 1;
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+}
+
+.tabpanel-summary-container.http-custom-input .http-custom-delete-button:hover::before {
+  fill: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+.network-monitor .http-custom-request-button-container {
+  display: flex;
+  justify-content: end;
+  flex-wrap: wrap-reverse;
+  gap: 8px;
+  padding: 10px 16px;
+  border-block-start: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .http-custom-request-panel .http-custom-request-label {
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.network-monitor .http-custom-request-button-container button {
+  height: 24px;
+  padding-inline: 8px;
+  width: auto;
+}
+
+.network-monitor .http-custom-request-button-container button:focus {
+  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff,
+  0 0 0 4px rgba(10,132,255,0.3)
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button {
+  background-color: var(--blue-60);
+  color: white;
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:active {
+  background-color: var(--blue-80);
+}
+
+.network-monitor .http-custom-request-button-container #http-custom-request-send-button:hover {
+  background-color: var(--blue-70);
+}
+
+.network-monitor .http-custom-header {
+  border-style: solid;
+  border-width: 0;
+  flex: none;
+  height: calc(var(--theme-toolbar-height) + 1px);
+  padding: 4px 16px;
+}
+
+/* Dark theme */
+:root.theme-dark .network-details-bar .http-custom-request-panel {
+  background-color: var(--grey-85);
+}
+
+:root.theme-dark .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section),
+:root.theme-dark .network-monitor .tabpanel-summary-container .http-custom-request-label {
+  border-bottom: 1px solid var(--grey-60);
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url :is(.http-custom-method-value, .http-custom-url-value),
+:root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value {
+  background-color: var(--grey-85);
+  color: white;
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value,
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) #http-custom-input-value {
+  border-inline-start: 1px solid var(--grey-60);
+}
+
+:root.theme-dark .network-monitor .http-custom-method-and-url .http-custom-url-value:focus {
+  outline: 2px solid var(--blue-50);
+  width: calc(100% - 8px);
+}
+
+:root.theme-dark .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus {
+  outline: 2px solid var(--blue-50);
+  margin-inline-start: 2px;
+  width: calc(100% - 5px);
+}
+
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+  outline: 2px solid var(--blue-50);
+  margin-inline-end: 1px;
+}
+
+:root.theme-dark .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+  outline: 2px solid var(--blue-50);
+  width: calc(100% - 20px);
+}
+
+:root.theme-dark .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value,
+:root.theme-dark #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+  margin-inline-end: 1px;
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button {
+  background-color: var(--toolbarbutton-background);
+  border: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-dark .network-monitor #http-custom-request-clear-button:focus {
+  background-color: var(--theme-selection-focus-background);
+}
+
+:root.theme-dark .network-monitor .http-custom-request-label.http-custom-header {
+  background-color: var(--grey-80);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark .network-details-bar .http-custom-request-panel input,
+:root.theme-dark .network-details-bar .http-custom-request-panel textarea {
+  background-color: var(--grey-70);
+  border: 1px solid var(--grey-85);
+  color: white;
+}
+
+:root.theme-dark .network-monitor .http-custom-request-label {
+  color: var(--grey-40);
+}
+
+/* Light theme */
+:root.theme-light .network-monitor .tabpanel-summary-container:is(.http-custom-method-and-url, .http-custom-section),
+:root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label {
+  border-bottom: 1px solid var(--grey-30);
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-method-value {
+  background-color: white;
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value,
+:root.theme-light .tabpanel-summary-container .tabpanel-summary-input-value {
+  border-inline-start: 1px solid var(--grey-30);
+}
+
+:root.theme-light .network-monitor .http-custom-method-and-url .http-custom-url-value:focus {
+  outline: 2px solid var(--blue-50);
+  width: calc(100% - 8px);
+}
+
+:root.theme-light .network-monitor .tabpanel-summary-container .tabpanel-summary-input:focus {
+  outline: 2px solid var(--blue-50);
+  margin-inline-start: 2px;
+  width: calc(100% - 5px);
+}
+
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-name:focus {
+  outline: 2px solid var(--blue-50);
+  margin-inline-end: 1px;
+}
+
+:root.theme-light .http-custom-input-and-map-form :is(.http-custom-input, .map-add-new-inputs) .http-custom-input-value:focus {
+  outline: 2px solid var(--blue-50);
+  width: calc(100% - 20px);
+}
+
+:root.theme-light .http-custom-input-and-map-form .map-add-new-inputs .tabpanel-summary-input-value:focus,
+:root.theme-light #http-custom-query .http-custom-input-and-map-form .tabpanel-summary-input-value:focus {
+  margin-inline-end: 3px;
+}
+
+:root.theme-light .network-monitor .tabpanel-summary-container .http-custom-request-label {
+  background-color: var(--grey-10);
+  color: var(--grey-90);
+}
+
+:root.theme-light .network-details-bar .http-custom-request-label.http-custom-header {
+  background-color: var(--grey-10);
+  border-bottom: 1px solid var(--grey-25);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button {
+  background-color: var(--grey-25);
+  border: var(--theme-splitter-color);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button:hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+:root.theme-light .network-monitor #http-custom-request-clear-button:focus {
+  outline: 2px solid var(--blue-50);
+  outline-offset: -2px;
+  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
+  border-radius: 2px;
+}
+
+:root.theme-light .network-details-bar .http-custom-request-panel input,
+:root.theme-light .network-details-bar .http-custom-request-panel textarea {
+  background-color: white;
+  border: 1px solid var(--grey-25);
+  color: var(--grey-90);
+}
+
+:root.theme-light .network-monitor .http-custom-request-label {
+  color: var(--grey-60);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
new file mode 100644
index 0000000000..f62ec166e1
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css
@@ -0,0 +1,210 @@
+/* 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/. */
+
+/* Headers tabpanel */
+
+.network-monitor .headers-panel-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.network-monitor .headers-panel-container .treeTable {
+  overflow: hidden;
+}
+
+.network-monitor .headers-panel-container .panel-container {
+  position: absolute;
+  top: calc(var(--theme-toolbar-height) + 1px);
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: auto;
+}
+
+.network-monitor .headers-panel-container .devtools-button {
+  padding: 0;
+}
+.network-monitor .headers-panel-container .devtools-dropdown-button {
+  padding: 0;
+}
+
+.network-monitor .headers-panel-container .devtools-button:is(#block-button, #edit-resend-button) {
+  height: 19px;
+  padding: 0 2px;
+}
+
+.network-monitor .headers-panel-container .devtools-button:not(:hover) {
+  background-color: transparent;
+}
+
+.network-monitor .headers-overview {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .headers-overview .summary {
+  padding: 6px 16px 2px;
+}
+
+.network-monitor .headers-summary,
+.network-monitor .response-summary {
+  display: flex;
+  align-items: center;
+}
+
+.network-monitor .raw-headers-toggle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+}
+
+.network-monitor .raw-headers-toggle .headers-summary-label {
+  color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-headers-toggle-input > input {
+  display: inline-block;
+  width: 2em;
+  vertical-align: bottom;
+  font-size: 12px;
+}
+
+.network-monitor .properties-view .tree-container .treeTable .treeValueCell .devtools-checkbox-toggle {
+  margin-block: 2px;
+}
+
+.network-monitor .properties-view .raw-headers-container .raw-headers {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  padding: 2px 12px;
+  white-space: pre;
+  overflow-wrap: normal;
+  overflow-x: auto;
+  border: none;
+}
+
+.network-monitor .accordion-item .treeTable .objectBox-string {
+  color: var(--theme-body-color);
+}
+
+.network-monitor .accordion-item .treeTable tr.treeRow.selected .objectBox-string {
+  color: var(--theme-selection-color);
+}
+
+.network-monitor .properties-view .raw-headers-container td {
+  display: block;
+}
+
+.network-monitor .properties-view .raw-headers-container textarea {
+  width: 100%;
+  font-family: var(--monospace-font-family);
+  font-size: var(--theme-body-font-size);
+  resize: none;
+}
+
+.theme-light .network-monitor .properties-view textarea {
+  background-color: white;
+  border: 1px solid var(--grey-25);
+  color: var(--grey-90);
+}
+
+.theme-dark .network-monitor .properties-view textarea {
+  background-color: var(--grey-70);
+  border: 1px solid var(--grey-85);
+  color: white;
+}
+
+.network-monitor .properties-view .raw-headers .tabpanel-summary-label {
+  padding: 0 0 4px;
+}
+
+.headers-summary .textbox-input {
+  margin-inline-end: 2px;
+}
+
+.network-monitor .headers-summary .status-text {
+  width: auto !important;
+  margin-inline-start: 4px;
+}
+
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow {
+  padding: 1px 0 2px;
+}
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeLabelCell {
+  float: left;
+  margin-right: -33px;
+  margin-left: 5px;
+  padding: 0;
+
+}
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell {
+  display: inline;
+  word-break: break-all;
+  box-decoration-break: clone;
+  padding-left: 39px;
+  padding-right: 20px;
+}
+
+.network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell div {
+  display: inline;
+}
+
+/* Cookies */
+
+.network-monitor .cookies-panel-container .accordion .properties-view tr.treeRow .treeLabelCell {
+  padding-inline-start: 0;
+}
+
+/* Summary tabpanel */
+
+.network-monitor .tabpanel-summary-container {
+  flex-wrap: wrap;
+  padding-inline-start: 4px;
+  margin-bottom: 5px;
+}
+
+.network-monitor .tabpanel-summary-container .tracking-resource {
+  margin-inline: -2px 2px;
+  vertical-align: text-bottom;
+  fill: var(--theme-icon-color);
+}
+
+.network-monitor .tabpanel-summary-label {
+  display: inline-block;
+  padding-inline-end: 3px;
+  min-width: 90px;
+  color: var(--theme-icon-dimmed-color);
+}
+
+.network-monitor .tabpanel-summary-value {
+  color: inherit;
+  padding-inline-start: 3px;
+  unicode-bidi: plaintext;
+}
+
+.network-monitor .tabpanel-summary-value  strong {
+  margin-right: 3px;
+}
+
+.theme-dark .network-monitor .tabpanel-summary-value {
+  color: var(--theme-selection-color);
+}
+
+.network-monitor .tracking-protection {
+  color: var(--theme-icon-dimmed-color);
+  max-width: 200px;
+}
+
+.network-monitor .tracking-protection .learn-more-link:not(:hover)::before {
+  color: var(--theme-icon-dimmed-color);
+}
+
+.network-monitor .headers-summary-label,
+.network-monitor .tree-container .objectBox {
+  white-space: nowrap;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
new file mode 100644
index 0000000000..a2d46ed522
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css
@@ -0,0 +1,11 @@
+/* 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/. */
+
+ .network-monitor .network-action-bar {
+   width: 100%;
+ }
+
+ .network-monitor .network-action-bar .tabs-menu-item {
+   width: 50%;
+ }
diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
new file mode 100644
index 0000000000..4ab1c2f2bc
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css
@@ -0,0 +1,591 @@
+/* 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/. */
+
+/* Network details panel */
+
+.network-monitor .network-details-bar {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.network-monitor .panel-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.network-monitor .panel-container .tree-container .objectBox {
+  white-space: normal;
+  word-wrap: break-word;
+  unicode-bidi: plaintext;
+}
+
+.network-monitor .properties-view {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  overflow: auto;
+}
+
+.network-monitor .properties-view .searchbox-section {
+  flex: 0 1 auto;
+}
+
+.network-monitor .properties-view .devtools-searchbox {
+  padding: 0;
+}
+
+.network-monitor .properties-view .devtools-searchbox input {
+  margin: 1px 3px;
+}
+
+/* Empty notices in tab panels */
+
+.network-monitor .empty-notice {
+  color: var(--theme-text-color-inactive);
+  padding: 3px 8px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 24px;
+}
+
+/* Accordions in the tab panels */
+
+.network-monitor .accordion-content .treeIcon {
+  margin-left: 16px;
+}
+
+.network-monitor .accordion {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.network-monitor .accordion-item:last-child {
+  position: relative;
+  height: 100%;
+}
+
+.network-monitor .accordion-item:last-child .accordion-header {
+  position: relative;
+}
+
+.network-monitor .accordion-item:last-child .accordion-content {
+  position: relative;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: inherit;
+}
+
+
+/* Text inputs in tab panels */
+
+.network-monitor .textbox-input {
+  text-overflow: ellipsis;
+  border: none;
+  background: none;
+  color: inherit;
+  width: 100%;
+}
+
+/* Tree table in tab panels */
+
+.network-monitor .tree-container, .tree-container .treeTable {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  flex: 1;
+}
+
+.network-monitor .tree-container .treeTable,
+.network-monitor .tree-container .treeTable tbody {
+  display: flex;
+  flex-direction: column;
+}
+
+.network-monitor .tree-container .treeTable tbody {
+  height: 100%;
+}
+
+.network-monitor .tree-container .treeTable tr {
+  display: block;
+  position: relative;
+}
+
+/* Make right td fill available horizontal space */
+.network-monitor .tree-container .treeTable td:last-child {
+  width: 100%;
+}
+
+.network-monitor .tree-container .treeTable .tree-section,
+.network-monitor .properties-view .raw-headers-container {
+  width: 100%;
+  background-color: var(--theme-toolbar-background);
+}
+
+.network-monitor .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.network-monitor .tree-container .treeTable .tree-section > * {
+  vertical-align: middle;
+}
+
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel,
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover,
+.network-monitor .tree-container .treeTable .treeRow.tree-section > .treeValueCell:not(:hover) * {
+  color: var(--theme-toolbar-color);
+}
+
+/* Force the twisty icon to gray even if the treeRow has the selected class */
+.network-monitor .tree-container .treeTable .treeRow.tree-section .theme-twisty {
+  fill: var(--theme-icon-dimmed-color);
+}
+
+/* Make the twisties rotate to the right in code-only sections on RTL. */
+.network-monitor .tab-panel.panel-with-code tr:not(.tree-section).hasChildren .theme-twisty:not(.open):dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+.network-monitor .tree-container .treeTable .treeValueCell {
+  /* FIXME: Make value cell can be reduced to shorter width */
+  max-width: 0;
+  padding-inline-end: 5px;
+}
+
+.network-monitor .tree-container .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
+  text-decoration: none;
+}
+
+.network-monitor .tab-panel.panel-with-code .tree-container .treeTable tr:not(.tree-section):dir(rtl) {
+  direction: ltr;
+  text-align: left;
+}
+
+/* Source editor in tab panels */
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * it should occupy the available vertical space.
+ */
+.network-monitor .editor-row-container,
+.network-monitor .tree-container .treeTable tr:last-child td[colspan="2"] {
+  display: block;
+  height: 100%;
+  flex: 1;
+  overflow-x: auto;
+}
+
+.network-monitor .responseTextContainer {
+  overflow-x: auto;
+  width: 100%;
+  height: 100%;
+  padding-left: 5px;
+}
+
+/* If there is a source editor shows up in the last row of TreeView,
+ * its height should not collapse into zero
+ */
+.network-monitor .tree-container .treeTable tr:last-child.editor-row-container {
+  overflow: visible;
+}
+
+.network-monitor .source-editor-mount {
+  width: 100%;
+  height: 100%;
+}
+
+.network-monitor .headers-summary-label,
+.network-monitor .tree-container .objectBox {
+  white-space: nowrap;
+}
+
+/* Params and Response error messages */
+
+.network-monitor .request-error-header,
+.network-monitor .response-error-header {
+  margin: 0;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  background-color: var(--red-60);
+  color: white;
+  line-height: 16px;
+}
+
+.theme-dark .network-monitor .request-error-header,
+.theme-dark .network-monitor .response-error-header {
+  background-color: var(--red-70);
+}
+
+/* Response tabpanel */
+
+.network-monitor .response-image-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.network-monitor .response-image {
+  background: #fff;
+  border: 1px dashed GrayText;
+  margin-bottom: 10px;
+  max-width: 300px;
+  max-height: 100px;
+}
+
+.network-monitor #response-panel .response-font-box {
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.network-monitor .response-font {
+  margin-bottom: 10px;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.network-monitor .tree-container .treeTable tr.response-preview-container {
+  flex: 1;
+  min-height: 0;
+}
+
+.network-monitor .tree-container .treeTable tr.response-preview-container td {
+  display: block;
+  height: 100%;
+}
+
+.network-monitor .html-preview {
+  height: 100%;
+}
+
+.network-monitor .html-preview iframe {
+  background-color: #fff;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+
+/* The editor container should only become a flex item when inside a container
+ * with other flex items. In this case, the HTML preview is a flex item and we
+ * can grow the editor. Otherwise, there may be overflow and
+ * .editor-row-container will become 0px tall. */
+.network-monitor .contains-html-preview .editor-row-container {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Request and response data */
+
+.network-monitor #response-panel .panel-container {
+  overflow-y: hidden;
+}
+
+.network-monitor .data-header {
+  background: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
+  font-size: inherit;
+  font-weight: normal;
+  line-height: 16px;
+  margin: 0;
+  padding: 2px 4px;
+  width: 100%;
+  align-items: center;
+  display: flex;
+  user-select: none;
+}
+
+.network-monitor .data-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: inherit;
+  line-height: 20px;
+  color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-data-toggle {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 50%;
+  margin-inline-start: auto;
+  padding-inline-start: 4px;
+}
+
+.network-monitor .raw-data-toggle-label {
+  white-space: nowrap;
+  color: var(--theme-toolbar-color);
+}
+
+.network-monitor .raw-data-toggle-input > input {
+  display: inline-block;
+  width: 2em;
+  vertical-align: bottom;
+  font-size: 12px;
+}
+
+.network-monitor #response-panel .notificationbox .notification[data-key="CORS-error"].notification[data-type="info"] {
+  background-color: var(--theme-body-alternate-emphasized-background);
+}
+
+.network-monitor #response-panel .notification[data-key="CORS-error"] .notificationInner .messageText {
+  white-space: normal;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+/* Timings tabpanel */
+
+.network-monitor .timings-container {
+  display: flex;
+}
+
+.network-monitor .timings-overview {
+  display: flex;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px;
+}
+
+.network-monitor .timings-overview-item {
+  display: inline-flex;
+}
+
+.network-monitor .timings-overview-item:not(:first-of-type)::before {
+  content: "";
+  display: inline-flex;
+  margin-inline: 10px;
+  width: 1px;
+  background: var(--theme-splitter-color);
+}
+
+.network-monitor .timings-label {
+  width: 10em;
+}
+
+.network-monitor .requests-list-timings-container {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-inline-end: 20px;
+  --total-timings-width-percentage: 90%;
+
+}
+
+.network-monitor .requests-list-timings-total {
+  width: calc(100% - var(--total-timings-width-percentage));
+}
+
+.network-monitor .requests-list-timings-offset {
+  transition: width 0.2s ease-out;
+}
+
+.network-monitor .requests-list-timings-box {
+  border: none;
+  min-width: 1px;
+  transition: width 0.2s ease-out;
+  margin-inline-start: calc(var(--current-timing-offset, 0) * var(--total-timings-width-percentage));
+  width: calc(var(--current-timing-width, 0) * var(--total-timings-width-percentage));
+}
+
+.network-monitor .label-separator {
+  margin-block: 5px;
+  margin-inline-start: 4px;
+  font-weight: 600;
+  color: var(--theme-comment);
+}
+
+.theme-light .network-monitor .requests-list-timings-box {
+  --timing-server-color-1: rgba(104, 195, 179, 0.8); /* teal */
+  --timing-server-color-2: rgba(123, 102, 167, 0.8); /* purple */
+  --timing-server-color-3: rgba(233, 236, 130, 0.8); /* yellow */
+  --timing-server-color-total: rgba(186, 90, 140, 0.8); /* pink */
+}
+
+.theme-dark .network-monitor .requests-list-timings-box {
+  --timing-server-color-1: rgba(74, 228, 201, 0.8); /* teal */
+  --timing-server-color-2: rgba(156, 119, 233, 0.8); /* purple */
+  --timing-server-color-3: rgba(234, 239, 73, 0.8); /* yellow */
+  --timing-server-color-total: rgba(186, 74, 133, 0.8); /* pink */
+}
+
+.network-monitor .server-timings-color-1 {
+  background: var(--timing-server-color-1);
+}
+
+.network-monitor .server-timings-color-2 {
+  background: var(--timing-server-color-2);
+}
+
+.network-monitor .server-timings-color-3 {
+  background: var(--timing-server-color-3);
+}
+
+.network-monitor .server-timings-color-total {
+  background: var(--timing-server-color-total);
+}
+
+
+.network-monitor .serviceworker-timings-color-launch {
+  background: var(--timing-server-color-1);
+}
+
+.network-monitor .serviceworker-timings-color-requestTo {
+  background: var(--timing-server-color-2);
+}
+
+.network-monitor .serviceworker-timings-color-handledBy {
+  background: var(--timing-server-color-3);
+}
+
+
+/* Stack trace panel */
+
+.network-monitor .stack-trace {
+  font-family: var(--monospace-font-family);
+  /* The markup contains extra whitespace to improve formatting of clipboard text.
+     Make sure this whitespace doesn't affect the HTML rendering */
+  white-space: normal;
+  padding: 5px;
+  direction: ltr;
+}
+
+.network-monitor .stack-trace .frame-link-source {
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
+  direction: rtl;
+  unicode-bidi: embed;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: end;
+}
+
+.network-monitor .stack-trace .frame-link-function-display-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-inline-end: 1ch;
+}
+
+/* Security tabpanel */
+
+/* Overwrite tree-view cell colon `:` for security panel and tree section */
+.network-monitor .security-panel .treeTable .treeLabelCell::after,
+.network-monitor .treeTable .tree-section .treeLabelCell::after {
+  content: "";
+}
+
+/* Layout additional warning icon in tree value cell  */
+.network-monitor .security-info-value {
+  display: flex;
+}
+
+.network-monitor .security-warning-icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: -1px;
+  margin-inline-start: 5px;
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-size: cover;
+  -moz-context-properties: fill;
+  fill: var(--yellow-60);
+}
+
+/* Custom request panel */
+
+.network-monitor .custom-request-panel, .http-custom-request-panel {
+  height: 100%;
+  background-color: var(--theme-sidebar-background);
+}
+
+.theme-dark .network-monitor .custom-request-panel, .http-custom-request-panel {
+  color: var(--theme-selection-color);
+}
+
+.network-monitor .custom-request-label {
+  font-weight: 600;
+}
+
+.network-monitor .custom-request-panel, .http-custom-request-panel textarea {
+  resize: none;
+  font: message-box;
+  font-size: var(--theme-body-font-size);
+}
+
+.network-monitor .custom-header,
+.network-monitor .custom-method-and-url,
+.network-monitor .custom-request,
+.network-monitor .custom-section,
+.network-monitor .http-custom-header,
+.network-monitor .http-custom-method-and-url,
+.network-monitor .http-custom-request,
+.network-monitor .http-custom-section {
+  display: flex;
+}
+
+.network-monitor .custom-header,
+.network-monitor .http-custom-header {
+  flex-grow: 1;
+  font-size: 1.1em;
+  padding-top: 4px;
+}
+
+.network-monitor .custom-section {
+  flex-direction: column;
+  margin-top: 0.5em;
+}
+
+.network-monitor .http-custom-section {
+  flex-direction: column;
+}
+
+.network-monitor .custom-method-value {
+  width: 4.5em;
+}
+
+.network-monitor .http-custom-method-value{
+  width: 6.0em;
+}
+
+.network-monitor .custom-url-value,
+.network-monitor .http-custom-url-value {
+  flex-grow: 1;
+  margin-inline-start: 6px;
+}
+
+.network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] {
+  background-color: var(--theme-body-alternate-emphasized-background);
+}
+
+.network-monitor #response-panel .notification[data-key="xssi-string-removed-info-box"] .notificationInner .messageText {
+  white-space: normal;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+#timings-panel .learn-more-link {
+  width: -moz-max-content;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
new file mode 100644
index 0000000000..3675dd5f22
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css
@@ -0,0 +1,184 @@
+/* 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/. */
+
+.request-blocking-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Override the devtools-checkbox style to improve hit area and alignment */
+.request-blocking-panel .devtools-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 2px 4px;
+  /* checkbox can be 13px, 14px or 16px depending on the platform */
+  line-height: 16px;
+  user-select: none;
+  cursor: default;
+}
+
+.request-blocking-panel .devtools-checkbox-label > input {
+  flex: none;
+  margin: 0;
+}
+
+.request-blocking-label {
+  flex: 1 1 auto;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.request-blocking-editable-label {
+  cursor: text
+}
+
+/* The "Enable Blocking Requests" bar */
+.request-blocking-enable-bar {
+  flex: none;
+  background: var(--theme-tab-toolbar-background);
+  height: calc(var(--theme-toolbar-height) + 1px);
+  padding-block: 2px;
+  padding-inline: 16px 4px;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.request-blocking-enable-form {
+  flex-grow: 1;
+}
+
+.request-blocking-contents {
+  flex: 0 1 auto;
+  overflow-y: auto;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+/* Blocked request list */
+.request-blocking-list {
+  margin: 0;
+  padding: 4px 0;
+}
+
+.request-blocking-list.disabled {
+  background-color: var(--theme-toolbar-hover);
+  opacity: 0.6;
+}
+
+.request-blocking-list li {
+  display: flex;
+  align-items: center;
+  min-height: 20px;
+  padding-inline: 16px 8px;
+}
+
+.request-blocking-list li.request-blocking-edit-item {
+  padding: 0;
+  /* Text input is 24px but we want it to occupy the same space as our 20px rows */
+  margin-block: -2px;
+}
+
+.request-blocking-list li.request-blocking-edit-item form {
+  width: 100%;
+}
+
+.request-blocking-list .devtools-checkbox-label {
+  flex: 1 1 auto;
+  /* Can't seem to make the flex-shrink reduce the element's width when the
+     content is a long URL, even if the URL container has text-overflow: ellipsis.
+     DevTools shows that "the item was clamped to its minimum size" and the shrink
+     part is thus ignored. So we're reserving 20px for the delete button. */
+  max-width: calc(100% - 20px);
+}
+
+.request-blocking-remove-button {
+  /* Visually hide but stay focusable in keyboard navigation */
+  opacity: 0;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 2px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+.request-blocking-remove-button::-moz-focus-inner {
+  border: none;
+}
+
+.request-blocking-list li:hover .request-blocking-remove-button {
+  opacity: 1;
+}
+
+.request-blocking-remove-button::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+}
+
+.request-blocking-remove-button:hover::before {
+  fill: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+/* Footer content, progressively pushed by pattern rows in the main list and
+ * remaining "fixed" at the bottom when there is enough content to scroll,
+ * thanks to the magic of flexbox */
+.request-blocking-footer {
+  position: relative;
+  flex: none;
+}
+
+/* Draw a border 1px below the form, so that it disappears out of view when
+ * there are many pattern rows in the main container and the footer is pushed
+ * to the bottom */
+.request-blocking-footer::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+/* Text input for the addition and edition forms */
+.request-blocking-add-form input,
+.request-blocking-edit-item input {
+  width: calc(100% - 1px);
+  height: 24px;
+  padding-block: 4px;
+  padding-inline: 20px 8px;
+  background: none;
+}
+
+.request-blocking-list-empty-notice {
+  margin: 0;
+  flex: 1;
+  overflow-x: hidden;
+}
+
+.request-blocking-notice-element {
+  padding-top: 12px;
+  padding-inline: 12px;
+}
+
+.request-blocking-notice-element::before {
+  content:"• ";
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/RequestList.css b/devtools/client/netmonitor/src/assets/styles/RequestList.css
new file mode 100644
index 0000000000..edb4a0e5e6
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -0,0 +1,653 @@
+/* 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/. */
+
+/* Request list empty panel */
+
+.request-list-empty-notice {
+  margin: 0;
+  flex: 1;
+  overflow-x: hidden;
+}
+
+.empty-notice-element {
+  padding-top: 12px;
+  padding-inline: 12px;
+  font-size: 1.2rem;
+}
+
+.notice-perf-message {
+  margin-top: 2px;
+  align-items: center;
+}
+
+.requests-list-perf-notice-button {
+  min-width: 30px;
+  min-height: 26px;
+  margin: 0 5px;
+  vertical-align: middle;
+}
+
+.requests-list-perf-notice-button::before {
+  background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg);
+}
+
+.requests-list-slow-button {
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+  top: 50%;
+  cursor: pointer;
+  background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%);
+  padding-inline-end: 30px;
+  padding-inline-start: 5px;
+}
+
+.request-list-item:not(.selected).odd .requests-list-slow-button {
+  background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%);
+}
+
+.request-list-item:not(.selected):hover .requests-list-slow-button,
+.request-list-item:not(.selected).odd:hover .requests-list-slow-button {
+  background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%);
+}
+
+.request-list-item.selected .requests-list-slow-button {
+  background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%);
+}
+
+.requests-list-slow-button::before {
+  content: "";
+  width: 12px;
+  height: 16px;
+  display: inline-block;
+  background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/turtle.svg);
+  background-repeat: no-repeat;
+  background-position-x: right;
+  padding-inline-end: 14px;
+  fill: var(--grey-40);
+  -moz-context-properties: fill;
+}
+
+.request-list-item.selected .requests-list-slow-button::before {
+  fill: currentColor;
+}
+
+.requests-list-reload-notice-button {
+  font-size: inherit;
+  min-height: 26px;
+  margin: 0 5px;
+}
+
+/* Requests list table */
+
+.request-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: var(--theme-body-color);
+}
+
+.requests-list-scroll {
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100% !important;
+}
+
+.requests-list-scroll table {
+  /* Disable overflow-anchor for only child in the scrollable element */
+  overflow-anchor: none;
+}
+
+.requests-list-anchor {
+  overflow-anchor: auto;
+  opacity: 0;
+  height: 1px;
+}
+
+.requests-list-table,
+.message-list-table {
+  /* Reset default browser style of <table> */
+  border-spacing: 0;
+  width: 100%;
+  /* The layout must be fixed for resizing of columns to work.
+  The layout is based on the first row.
+  Set the width of those cells, and the rest of the table follows. */
+  table-layout: fixed;
+}
+
+.requests-list-table {
+  /* Clip column resizers when they are higher than the table. */
+  overflow: hidden;
+}
+
+.requests-list-column,
+.message-list-column {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  /* Reset default browser style of <td> */
+  padding: 0;
+  /* Prevent text selection because it's often invisible (blue on blue),
+   * it conflicts easily with existing click and double-click actions,
+   * and we already have several Copy and Export options. */
+  user-select: none;
+}
+
+.requests-list-column {
+  position: relative;
+}
+
+.requests-list-column > * {
+  display: inline-block;
+}
+
+/* Requests list headers */
+
+.requests-list-headers-group,
+.message-list-headers-group {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.requests-list-headers,
+.message-list-headers {
+  padding: 0;
+  color: var(--theme-body-color);
+  background-color: var(--theme-toolbar-background);
+}
+
+.requests-list-headers th,
+.message-list-headers th {
+  height: calc(var(--theme-toolbar-height) + 1px);
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.requests-list-headers th {
+  /* Allow column-resizers to be visible beyond the headers. */
+  overflow: visible;
+}
+
+.requests-list-headers th:not(:first-child),
+.message-list-headers th:not(:first-child) {
+  border-inline-start: 1px solid var(--theme-splitter-color);
+}
+
+.requests-list-header-button,
+.message-list-header-button {
+  width: 100%;
+  min-height: var(--theme-toolbar-height);
+  border-width: 0;
+  padding-block: 1px;
+  padding-inline-start: 5px;
+  padding-inline-end: 4px;
+  text-align: start;
+  color: inherit;
+  background-color: transparent;
+}
+
+.requests-list-header-button::-moz-focus-inner,
+.message-list-header-button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.requests-list-header-button:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.requests-list-header-button > .button-text,
+.message-list-header-button > .button-text {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.requests-list-header-button > .button-icon,
+.message-list-header-button > .button-icon {
+  /* display icon only when column sorted otherwise display:none */
+  display: none;
+  width: 7px;
+  height: 4px;
+  margin-inline: 3px 6px;
+  vertical-align: middle;
+}
+
+.requests-list-header-button[data-sorted] > .button-icon {
+  /* display icon only when column sorted */
+  display: inline-block;
+}
+
+.requests-list-header-button[data-sorted] > .button-text {
+  /* when sorted - adjust width to fit the icon inside the button */
+  width: calc(100% - 11px);
+}
+
+.requests-list-header-button[data-sorted=ascending] > .button-icon {
+  background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
+}
+
+.requests-list-header-button[data-sorted=descending] > .button-icon {
+  background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
+}
+
+.requests-list-header-button[data-sorted],
+.requests-list-header-button[data-sorted]:hover {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.requests-list-header-button[data-sorted],
+.requests-list-column[data-active] + .requests-list-column .requests-list-header-button {
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+}
+
+/* Requests list headers column-resizer */
+
+.requests-list-headers .column-resizer {
+  z-index: 1000;
+  cursor: ew-resize;
+  margin-inline-start: -3px;
+  width: 7px;
+  min-height: 23px;
+  position: absolute;
+  background-color: transparent;
+  /* Extend column-resizers beyond table header to allow resizing on
+   * column borders as well.*/
+  height: 100vh;
+}
+
+/**
+ * Make sure headers are not processing any mouse
+ * events. This is good for performance during dragging.
+ */
+.requests-list-headers.dragging {
+  pointer-events: none;
+}
+
+/* Requests list column */
+
+/* Status column */
+
+.requests-list-status {
+  /* Don't ellipsize status codes */
+  text-overflow: initial;
+}
+
+.requests-list-status-code.status-code-blocked {
+  /* Improve the icon's vertical alignment by matching the row height. */
+  display: inline-flex;
+  vertical-align: top;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+
+.requests-security-icon-group {
+  display: inline-flex;
+  vertical-align: top;
+  align-items: center;
+  height: 24px;
+  /* Icons are drawn as backgrounds on a 16x16 element but are often smaller
+   * (e.g. 12x12). Shift them a few pixels to align with the header text. */
+  margin-inline-start: -3px;
+  margin-inline-end: 2px;
+}
+
+.requests-security-state-icon {
+  display: inline-block;
+  height: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill, stroke;
+  fill: var(--theme-icon-dimmed-color);
+  stroke: var(--theme-icon-color);
+}
+
+.security-state-secure {
+  background-image: url(chrome://devtools/skin/images/security-state-secure.svg);
+  width: 16px;
+}
+
+.security-state-weak {
+  /* Shift icon to the right (in both LTR and RTL directions) to align the
+   * padlock shape with other padlock icons. */
+  position: relative;
+  width: 16px;
+  left: 2px;
+  background-image: url(chrome://devtools/skin/images/security-state-weak.svg);
+  stroke: var(--theme-icon-warning-color);
+}
+
+.security-state-insecure {
+  background-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
+  width: 16px;
+  stroke: var(--theme-icon-error-color);
+}
+
+.security-state-broken {
+  background-image: url(resource://devtools-shared-images/error-small.svg);
+  width: 16px;
+  fill: var(--theme-icon-error-color);
+}
+
+.tracking-resource {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.request-list-item.selected .status-code-blocked,
+.request-list-item.selected .requests-security-state-icon,
+.request-list-item.selected .tracking-resource {
+  fill: currentColor;
+  stroke: currentColor;
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .request-list-item.selected .status-code-blocked,
+.theme-dark .request-list-item.selected .requests-security-state-icon,
+.theme-dark .request-list-item.selected .tracking-resource {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.request-list-item .requests-list-column,
+.message-list-item .message-list-column {
+  padding-inline-start: 5px;
+  /* Column text should not touch the next column's border.
+     We could use a 5px space to be symmetrical, but we're using
+     text-overflow:ellipsis which makes that padding look wider in most cases,
+     and a smaller padding saves space for content. */
+  padding-inline-end: 4px;
+}
+
+.request-list-item .requests-list-column:not(:first-child),
+.message-list-item .message-list-column:not(:first-child) {
+  border-inline-start: 1px solid var(--table-splitter-color);
+}
+
+.request-list-item:hover .requests-list-column,
+.request-list-item.selected .requests-list-column,
+.message-list-item:hover .message-list-column,
+.message-list-item.selected .message-list-column {
+  border-inline-start-color: transparent;
+}
+
+.request-list-item .requests-list-waterfall {
+  padding-inline-start: 0;
+}
+
+.requests-list-cause-stack {
+  display: inline-block;
+  background-color: var(--theme-text-color-alt);
+  color: var(--theme-body-background);
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: 0;
+  margin-inline-end: 3px;
+}
+
+/* Waterfall column */
+
+.requests-list-waterfall {
+  background-repeat: repeat-y;
+  background-position: left center;
+  overflow: visible;
+  /* Background created on a <canvas> in js. */
+  /* @see devtools/client/netmonitor/src/widgets/WaterfallBackground.js */
+  background-image: -moz-element(#waterfall-background);
+}
+
+.requests-list-waterfall:dir(rtl) {
+  background-position: right center;
+}
+
+.requests-list-waterfall > .requests-list-header-button {
+  padding: 0;
+}
+
+.requests-list-waterfall > .requests-list-header-button > .button-text {
+  width: auto;
+}
+
+.requests-list-waterfall-label-wrapper:not(.requests-list-waterfall-visible) {
+  padding-inline-start: 16px;
+}
+
+.requests-list-timings-division {
+  display: inline-block;
+  padding-inline-start: 4px;
+  font-size: 75%;
+  pointer-events: none;
+  text-align: start;
+}
+
+:root[platform="win"] .requests-list-timings-division {
+  padding-top: 1px;
+  font-size: 90%;
+}
+
+.requests-list-timings-division:not(:first-child) {
+  border-inline-start: 1px dashed;
+}
+
+.requests-list-timings-division:dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-list-timings-division:dir(rtl) {
+  transform-origin: right center;
+}
+
+.theme-dark .requests-list-timings-division {
+  border-inline-start-color: #5a6169 !important;
+}
+
+.theme-light .requests-list-timings-division {
+  border-inline-start-color: #585959 !important;
+}
+
+.requests-list-timings-division[data-division-scale=second],
+.requests-list-timings-division[data-division-scale=minute] {
+  font-weight: 600;
+}
+
+.requests-list-timings {
+  display: flex;
+  align-items: center;
+}
+
+.requests-list-timings:dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-list-timings:dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-list-timings-box {
+  display: inline-block;
+  height: 12px;
+}
+
+.requests-list-timings-box.filler {
+  background-color: var(--theme-splitter-color);
+}
+
+.requests-list-timings-box.blocked {
+  background-color: var(--timing-blocked-color);
+}
+
+.requests-list-timings-box.dns {
+  background-color: var(--timing-dns-color);
+}
+
+.requests-list-timings-box.connect {
+  background-color: var(--timing-connect-color);
+}
+
+.requests-list-timings-box.ssl {
+  background-color: var(--timing-ssl-color);
+}
+
+.requests-list-timings-box.send {
+  background-color: var(--timing-send-color);
+}
+
+.requests-list-timings-box.wait {
+  background-color: var(--timing-wait-color);
+}
+
+.requests-list-timings-box.receive {
+  background-color: var(--timing-receive-color);
+}
+
+.requests-list-timings-total {
+  display: inline-block;
+  padding-inline-start: 4px;
+  font-size: 80%;
+  font-weight: 600;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.requests-list-timings-total:dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-list-timings-total:dir(rtl) {
+  transform-origin: right center;
+}
+
+/* Request list item */
+
+.request-list-item,
+.message-list-item {
+  height: 24px;
+  line-height: 24px;
+}
+
+.request-list-item:not(.selected).odd,
+.message-list-item:not(.selected).odd {
+  background-color: var(--table-zebra-background);
+}
+
+.request-list-item:not(.selected):hover,
+.message-list-item:not(.selected):hover {
+  background-color: var(--table-selection-background-hover);
+}
+
+/*
+ * Dim requests served from cache
+ */
+.request-list-item:not(.selected, :hover).fromCache {
+  --table-icon-opacity: 0.7;
+  color: var(--theme-text-color-alt);
+}
+
+/*
+ * Apply partial opacity to specific icons and icon-like elements
+ * (e.g. for cached requests)
+ */
+.requests-security-icon-group,
+.requests-list-status-code:not([data-code^="3"]) {
+  opacity: var(--table-icon-opacity, 1);
+}
+
+/*
+ * Showing blocked requests in red should always have priority
+ * except when the request is selected.
+ */
+.request-list-item:not(.selected).blocked {
+  color: var(--timing-blocked-color) !important;
+}
+
+/*
+ * Put after .request-list-item.blocked to avoid specificity conflict.
+ * Bug 1530914 - Highlighted Security Value is difficult to read.
+ */
+.request-list-item.selected,
+.message-list-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  /* Rows have tabindex=0 and get a default outline when clicked, but we already
+   * have a visible selection style so hiding the outline should be okay. */
+  outline: none;
+}
+
+.theme-light {
+  --network-initiator-line-color: var(--theme-highlight-blue);
+  --network-initiator-color: var(--theme-highlight-purple);
+}
+
+.theme-dark {
+  --network-initiator-line-color: hsl(210, 40%, 60%);
+  --network-initiator-color: var(--blue-40);
+}
+
+.requests-list-initiator .requests-list-initiator-lastframe {
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+}
+
+.requests-list-initiator-lastframe {
+  display: unset;
+}
+
+.request-list-item .requests-list-initiator-filename,
+.request-list-item .requests-list-initiator-line {
+  cursor: pointer;
+  text-decoration: inherit;
+}
+
+.request-list-item:not(.selected) .requests-list-initiator-filename {
+  color: var(--network-initiator-color);
+}
+
+.request-list-item:not(selected) .requests-list-initiator-line {
+  color: var(--network-initiator-line-color);
+}
+
+.request-list-item.selected .requests-list-initiator-filename,
+.request-list-item.selected .requests-list-initiator-line {
+  color: inherit;
+}
+
+.request-list-item .requests-list-initiator-cause {
+  display: unset;
+  white-space: pre;
+}
+
+/* Responsive web design support */
+
+@media (max-width: 700px) {
+  .requests-list-status-code {
+    width: auto;
+  }
+
+  .requests-list-size {
+    /* Given a fix max-width to display all columns in RWD mode */
+    max-width: 7%;
+  }
+
+  .requests-list-waterfall {
+    display: none;
+  }
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
new file mode 100644
index 0000000000..a0767097c3
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css
@@ -0,0 +1,171 @@
+/* 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/. */
+
+/* Statistics panel */
+
+@import "chrome://devtools/skin/chart.css";
+
+.statistics-panel {
+  display: flex;
+  height: 100vh;
+  overflow: auto;
+}
+
+.statistics-panel .back-button {
+  height: -moz-fit-content;
+  position: absolute;
+  padding: 7px 5px;
+  margin: 0px;
+  top: 8px;
+  inset-inline-start: 8px;
+}
+
+.theme-light .statistics-panel .back-button {
+  background-color: var(--grey-20);
+}
+
+.statistics-panel .splitter {
+  border-color: var(--theme-splitter-color);
+  cursor: default;
+  pointer-events: none;
+  height: 100%;
+}
+
+.statistics-panel .charts-container {
+  display: flex;
+  width: 100%;
+}
+
+.statistics-panel .charts,
+.statistics-panel .pie-table-chart-container {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+}
+
+.statistics-panel .learn-more-link {
+  font-weight: 400;
+}
+
+.statistics-panel .table-chart-title {
+  display: flex;
+  align-items: center;
+}
+
+.pie-table-chart-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistics-panel .pie-chart-container {
+  margin-inline-start: 3vw;
+  margin-inline-end: 1vw;
+}
+
+.statistics-panel .table-chart-container {
+  min-width: 240px;
+  margin-inline-start: 1vw;
+  margin-inline-end: 3vw;
+}
+
+tr[data-statistic-name] td:first-of-type {
+  border-inline-start: 15px solid var(--stat-color);
+}
+
+path[data-statistic-name] {
+  fill: var(--stat-color);
+}
+
+[data-statistic-name=html] {
+  --stat-color: var(--theme-highlight-bluegrey);
+}
+
+[data-statistic-name=css] {
+  --stat-color: var(--theme-highlight-blue);
+}
+
+[data-statistic-name=js] {
+  --stat-color: var(--theme-highlight-lightorange);
+}
+
+[data-statistic-name=xhr] {
+  --stat-color: var(--theme-highlight-orange);
+}
+
+[data-statistic-name=fonts] {
+  --stat-color: var(--theme-highlight-purple);
+}
+
+[data-statistic-name=images] {
+  --stat-color: var(--theme-highlight-pink);
+}
+
+[data-statistic-name=media] {
+  --stat-color: var(--theme-highlight-green);
+}
+
+/*
+ * Align cell text to the center by default.
+ */
+.table-chart-row-label {
+  text-align: center;
+}
+
+.table-chart-row-label[name=count] {
+  width: 3em;
+  text-align: end;
+}
+
+.table-chart-row-label[name=label] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-row-label[name=size] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-row-label[name=time] {
+  width: 7em;
+  text-align: start;
+}
+
+.table-chart-totals {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Responsive web design support */
+
+@media (max-width: 700px) {
+  .statistics-panel .charts-container {
+    flex-direction: column;
+    /* Minus 4em for statistics back button width */
+    width: calc(100% - 4em);
+  }
+
+  .statistics-panel .splitter {
+    width: 100%;
+    height: 1px;
+  }
+
+  .statistics-panel .table-chart-title {
+    margin-top: 3rem;
+  }
+
+  .statistics-panel .charts,
+  .statistics-panel .pie-table-chart-container{
+    margin-bottom: 2rem;
+  }
+}
+
+.offscreen{
+    position: absolute!important;
+    font-size: 0px;
+    overflow: hidden;
+    clip: rect(1px,1px,1px,1px);
+    clip-path: polygon(0 0,0 0,0 0,0 0);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusBar.css b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
new file mode 100644
index 0000000000..ff53a0d866
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatusBar.css
@@ -0,0 +1,62 @@
+/* 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/. */
+
+/* Status bar */
+
+.devtools-status-bar-label {
+  flex: 0;
+}
+
+.status-bar-label {
+  display: inline-flex;
+  margin-inline-end: 10px;
+  /* Status bar has just one line so, don't wrap labels */
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.status-bar-label:not(:first-of-type)::before {
+  content: "";
+  display: inline-block;
+  margin-inline-end: 10px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  width: 1px;
+  background: var(--theme-splitter-color);
+}
+
+.status-bar-label.dom-content-loaded {
+  color: var(--theme-highlight-blue);
+}
+
+.status-bar-label.load {
+  color: var(--theme-highlight-red);
+}
+
+.requests-list-network-summary-button {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  height: 20px;
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  padding-inline-end: 0;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  margin-inline-end: 1em;
+}
+
+.requests-list-network-summary-button > .summary-info-icon {
+  background: url(chrome://devtools/skin/images/profiler-stopwatch.svg) no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
+  width: 16px;
+  height: 16px;
+  opacity: 0.8;
+}
+
+.requests-list-network-summary-button:hover > .summary-info-icon {
+  opacity: 1;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/StatusCode.css b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
new file mode 100644
index 0000000000..5b69d6f72b
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+.status-code {
+  /* non-standard codes may be shorter than 3 characters but should match
+     width of standard codes */
+  min-width: calc(3ch + 4px);
+  padding: 0 2px;
+  border-radius: 3px;
+  text-align: center;
+  font-family: var(--monospace-font-family);
+  /* prevent status code from having full line height width from .request-list-item */
+  line-height: normal;
+}
+
+.status-code[data-code^="1"] {
+  background-color: var(--status-code-color-1xx);
+}
+
+.status-code[data-code^="2"] {
+  background-color: var(--status-code-color-2xx);
+}
+
+.status-code[data-code^="3"] {
+  background-color: var(--status-code-color-3xx);
+}
+
+.status-code[data-code^="4"] {
+  background-color: var(--status-code-color-4xx);
+}
+
+.status-code[data-code^="5"] {
+  background-color: var(--status-code-color-5xx);
+}
+
+/* Non-standard status codes are styled like 5XX */
+.status-code[data-code^="0"],
+.status-code[data-code^="6"],
+.status-code[data-code^="7"],
+.status-code[data-code^="8"],
+.status-code[data-code^="9"] {
+  background-color: var(--status-code-color-5xx);
+}
+
+.status-code:not([data-code^="3"], .status-code-blocked) {
+  color: var(--theme-body-background);
+}
+
+.status-code-blocked {
+  color: var(--theme-icon-error-color);
+}
+
+.status-code-blocked-icon {
+  height: 12px;
+  width: 12px;
+  background-image: url("chrome://devtools/skin/images/blocked.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+
+/* Status codes for the headers side panel */
+
+.headers-overview .summary .status .status-code {
+  display: inline;
+  background-color: transparent;
+  color: inherit;
+  padding: 0 2px 0 0;
+  font-weight: bold;
+}
+
+.headers-overview .summary .status[data-code^="1"] {
+  color: var(--status-code-color-1xx);
+}
+
+.headers-overview .summary .status[data-code^="2"] {
+  color: var(--status-code-color-2xx);
+}
+
+.headers-overview .summary .status[data-code^="3"] {
+  color: inherit;
+}
+
+.headers-overview .summary .status[data-code^="4"] {
+  color: var(--status-code-color-4xx);
+}
+
+.headers-overview .summary .status[data-code^="5"] {
+  color: var(--status-code-color-5xx);
+}
+
+/* Non-standard status codes are styled like 5XX */
+.headers-overview .summary .status[data-code^="0"],
+.headers-overview .summary .status[data-code^="6"],
+.headers-overview .summary .status[data-code^="7"],
+.headers-overview .summary .status[data-code^="8"],
+.headers-overview .summary .status[data-code^="9"] {
+  color: var(--status-code-color-5xx);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/Toolbar.css b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
new file mode 100644
index 0000000000..ed37aa4046
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -0,0 +1,102 @@
+/* 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/. */
+
+/* Toolbar */
+
+.devtools-toolbar {
+  display: flex;
+  align-items: center;
+}
+
+#netmonitor-toolbar-container > .devtools-toolbar {
+  /* @TODO: Remove this in bug 1535956 */
+  min-height: var(--primary-toolbar-height);
+}
+
+.requests-list-filter-buttons {
+  white-space: nowrap;
+  margin: 0 7px;
+}
+
+.devtools-button.devtools-pause-icon::before,
+.devtools-button.devtools-play-icon::before {
+  margin-bottom: 1px;
+}
+
+.devtools-button.devtools-pause-icon::before {
+  background-image: url("chrome://devtools/skin/images/pause.svg");
+}
+
+.devtools-button.devtools-play-icon::before {
+  background-image: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
+}
+
+/* New HTTP Custom Request button */
+.devtools-button.devtools-http-custom-request-icon::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-size: 13px;
+}
+
+/* Search button */
+.devtools-button.devtools-search-icon::before {
+  background-image: url("chrome://devtools/skin/images/search.svg");
+  background-size: 13px;
+}
+
+/* Request blocking button */
+.devtools-button.requests-list-blocking-button::before {
+  background-image: url("chrome://devtools/skin/images/blocked.svg");
+}
+
+.devtools-button.netmonitor-settings-menu-button::before {
+  background-image: url("chrome://devtools/skin/images/settings.svg");
+}
+
+.devtools-button.requests-list-blocking-button:empty::before {
+  fill: var(--theme-body-color);
+}
+
+.devtools-button.requests-list-blocking-button.checked:empty::before {
+  fill: var(--theme-icon-checked-color);
+}
+
+.devtools-button.requests-list-blocking-button.requests-list-blocking-button-enabled:empty::before {
+  fill: var(--timing-blocked-color);
+}
+
+/* Throttling Button */
+
+#network-throttling-menu {
+  margin-inline-start: 10px;
+  margin-inline-end: 10px;
+}
+
+.devtools-toolbar .devtools-checkbox {
+  position: relative;
+  vertical-align: middle;
+  bottom: 1px;
+}
+
+#devtools-cache-checkbox {
+  vertical-align: unset;
+  bottom: -1px;
+}
+
+.devtools-toolbar .devtools-checkbox-label {
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
+  white-space: nowrap;
+}
+
+.devtools-toolbar .devtools-checkbox-label.devtools-cache-checkbox {
+  margin-inline-end: 7px;
+}
+
+/* Hide filter input learn more link if there is not enough
+   horizontal space. */
+@media (max-width: 590px) {
+  .network-monitor .devtools-searchbox .learn-more-link {
+    display: none;
+  }
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
new file mode 100644
index 0000000000..9cf41fb7c9
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css
@@ -0,0 +1,100 @@
+/* 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/. */
+
+/* Url Preview */
+
+.url-preview {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 6px 3px;
+}
+
+.url-preview .properties-view,
+.url-preview .tree-container,
+.url-preview .treeTable {
+  overflow: hidden;
+  outline: none;
+}
+
+.url-preview .properties-view {
+  margin-right: 10px;
+}
+
+.url-preview tbody:focus {
+  outline: none;
+}
+.url-preview td.splitter {
+  /* This makes sure that the column spans the width of the
+    side bar so the contained horizontal splitter is visible */
+  width: 100vw !important;
+}
+
+.url-preview .horizontal-splitter {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  margin: 6px 0 6px 16px;
+}
+
+.url-preview .treeValueCell .url {
+  display: inline;
+  white-space: normal;
+}
+
+.url-preview .treeTable .treeRow .treeIcon {
+  margin-inline: 0 1px;
+}
+
+.url-preview .tree-container .treeTable tr {
+  margin-bottom: 3px;
+}
+
+.url-preview .treeTable .treeRow:not(.selected):hover {
+  background-color: transparent !important;
+}
+
+.url-preview .treeTable tr.treeRow:first-child .treeLabelCell::after {
+  content: "";
+}
+.url-preview .treeTable .treeLabelCell {
+  --tree-label-cell-indent: 0 !important;
+}
+/* Indent the array params */
+.url-preview .treeTable .treeRow[aria-level="4"] .treeLabelCell {
+  text-indent: 15px;
+}
+
+.url-preview .treeTable .treeLabel[data-level="1"] {
+  text-transform: capitalize;
+}
+
+/* Collapsed url */
+.url-preview tr.treeRow:first-child .treeLabelCell {
+  font-weight: bold;
+  color: var(--theme-icon-dimmed-color);
+}
+
+.url-preview tr.treeRow .treeLabelCell {
+  float: left;
+  margin-right: -15px;
+  padding: 0 2px 0 0;
+
+}
+.url-preview tr.treeRow .treeValueCell {
+  display: inline;
+  word-break: break-all;
+  max-width: none;
+  box-decoration-break: clone;
+  margin-left: 14px;
+}
+
+.url-preview .treeTable .treeValueCell {
+  color: var(--theme-body-color);
+}
+
+.url-preview .url-scheme,
+.url-preview .url-chars {
+  color: var(--theme-icon-dimmed-color);
+}
+
+.url-preview .url-params-name {
+  color: var(--theme-highlight-blue);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/messages.css b/devtools/client/netmonitor/src/assets/styles/messages.css
new file mode 100644
index 0000000000..b115d7cf34
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/messages.css
@@ -0,0 +1,165 @@
+/* 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/. */
+
+/* Scroll to bottom */
+
+#messages-view .uncontrolled {
+  flex-direction: column;
+}
+
+#messages-view .message-list-scroll-anchor {
+  /* anchor nodes are required to have non-zero area */
+  min-height: 1px;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+/* Empty notice */
+
+#messages-view .message-list-empty-notice {
+  width: 100%;
+}
+
+/* Frame type icon in the Time column */
+
+#messages-view .message-list-type-icon {
+  display: inline-block;
+  /* align bottom of image 4px below the text baseline
+     this tends to give a better result than "middle" */
+  vertical-align: -4px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#messages-view .message-list-type-icon-sent {
+  color: var(--green-70);
+}
+
+#messages-view .theme-dark .message-list-type-icon-sent {
+  color: var(--green-50);
+}
+
+#messages-view .message-list-type-icon-received {
+  color: var(--red-60);
+  transform: scaleY(-1);
+}
+
+#messages-view .theme-dark .message-list-type-icon-received {
+  color: var(--red-40);
+}
+
+#messages-view .message-list-item.selected .message-list-type-icon {
+  color: inherit;
+}
+
+#messages-view .msg-connection-closed-message {
+  text-align: center;
+}
+
+/* Use lining numbers so that seconds and milliseconds align */
+
+#messages-view .message-list-time {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Styles related to the data items in the MessagePayload component */
+
+#messages-view .message-payload {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#messages-view .message-rawData-payload {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  white-space: pre;
+  padding: 4px 8px;
+  padding-inline-start: 20px;
+  border: none;
+  font-family: var(--monospace-font-family);
+  font-size: var(--theme-code-font-size);
+  line-height: calc(15/11);
+  direction: ltr;
+  text-align: left;
+  resize: none;
+  color: var(--theme-body-color);
+  background-color: var(--theme-sidebar-background);
+}
+
+/* Styles related to JSONPreview */
+
+#messages-view .treeTable .objectBox {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+/* Styles related to truncated data */
+
+.theme-light #messages-view .truncated-data-message {
+  background: var(--grey-20);
+}
+
+.theme-dark #messages-view .truncated-data-message {
+  background: var(--grey-70);
+}
+
+.truncated-data-message {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+/* Styles related to truncated messages */
+
+.theme-light #messages-view .truncated-messages-header {
+  background: var(--grey-20);
+}
+
+.theme-dark #messages-view .truncated-messages-header {
+  background: var(--grey-70);
+}
+
+.theme-dark #messages-view .truncated-messages-warning-icon {
+  fill: var(--grey-40);
+}
+
+#messages-view .truncated-messages-cell {
+  padding: 0; /* reset td default padding */
+}
+
+#messages-view .truncated-messages-header {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 2px 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#messages-view .truncated-messages-container,
+#messages-view .truncated-messages-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+#messages-view .truncated-messages-warning-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 5px;
+  background-image: url(chrome://devtools/skin/images/info.svg);
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: inherit;
+}
+
+#messages-view .truncation-checkbox {
+  margin-inline-end: 5px;
+}
+
+#messages-view .truncated-message {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/netmonitor.css b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
new file mode 100644
index 0000000000..6b821065ed
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -0,0 +1,84 @@
+/* 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 "chrome://devtools/content/shared/components/SidebarToggle.css";
+@import "chrome://devtools/content/shared/components/splitter/SplitBox.css";
+@import "chrome://devtools/content/shared/components/tree/TreeView.css";
+@import "chrome://devtools/content/shared/components/Accordion.css";
+@import "chrome://devtools/content/shared/components/tabs/Tabs.css";
+@import "chrome://devtools/skin/components-frame.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css";
+@import "chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css";
+@import "chrome://devtools/content/shared/components/MdnLink.css";
+@import "chrome://devtools/content/shared/components/NotificationBox.css";
+@import "chrome://devtools/content/shared/components/AppErrorBoundary.css";
+
+/* Network panel components & styles */
+@import "chrome://devtools/content/netmonitor/src/assets/styles/variables.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/Toolbar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/RequestList.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkActionBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/RequestBlockingPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/NetworkDetailsBar.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatisticsPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/CustomRequestPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/StatusCode.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/messages.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/search.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/UrlPreview.css";
+@import "chrome://devtools/content/netmonitor/src/assets/styles/HeadersPanel.css";
+
+/* General */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#mount,
+.launchpad-root,
+.network-monitor,
+.monitor-panel {
+  flex: initial;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.split-box {
+  overflow: hidden;
+}
+
+/* Drag and drop HAR files */
+
+.network-monitor > div {
+  height: 100%;
+}
+
+.network-monitor .dropHarFiles {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  text-align: center;
+  inset: 25px;
+  z-index: 100;
+  font-size: 3.5rem;
+  color: gray;
+  border: 4px dashed gray;
+  pointer-events: none;
+}
+
+.network-monitor > div[dragging="true"] .dropHarFiles {
+  display: flex;
+}
+
+.network-monitor > div[dragging="true"] {
+  filter: opacity(50%);
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/search.css b/devtools/client/netmonitor/src/assets/styles/search.css
new file mode 100644
index 0000000000..cc80183eb4
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/search.css
@@ -0,0 +1,155 @@
+/* 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/. */
+
+.search-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.search-panel .search-panel-content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  outline: 0 !important;
+}
+
+.search-panel .treeTable {
+  width: 100%;
+  color: var(--theme-body-color);
+  outline: 0 !important;
+}
+
+/* Custom tree styles for the Search results panel*/
+.search-panel .treeTable .treeLabelCell::after {
+  content: "";
+}
+
+/* Color for resource label */
+.search-panel .resourceCell {
+  color: var(--theme-text-color-inactive);
+}
+
+.search-panel .treeTable tbody {
+  outline: 0 !important;
+}
+
+.search-panel .treeTable .resultLabel {
+  font-weight: bold;
+}
+
+.search-panel .treeTable .treeLabelCell {
+  text-overflow: ellipsis;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* Icon for close button */
+#devtools-network-search-close::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+}
+
+/* Case Sensitive button */
+#devtools-network-search-caseSensitive::before {
+  background-image: url("chrome://devtools/skin/images/case-match.svg");
+}
+
+
+#devtools-network-search-close > button {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  position: relative;
+  min-width: 26px;
+}
+
+button.case-sensitive-btn {
+  padding: 2px;
+  margin: 0 3px;
+  border: none;
+  background: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+}
+
+/* Color for query matches */
+.search-panel .resultCell .query-match {
+  background-color: var(--theme-contrast-background);
+  color: var(--theme-contrast-color);
+  border-bottom: 1px solid var(--theme-contrast-border);
+}
+
+.search-modifiers {
+  display: flex;
+  align-items: center;
+}
+
+.search-modifiers * {
+  user-select: none;
+}
+
+.pipe-divider {
+  flex: none;
+  align-self: stretch;
+  width: 1px;
+  vertical-align: middle;
+  margin: 4px;
+  background-color: var(--theme-splitter-color);
+}
+
+.search-type-name {
+  margin: 0 4px;
+  border: none;
+  background: transparent;
+  color: var(--theme-comment);
+}
+
+.search-modifiers button {
+  margin: 0 3px;
+  border: none;
+  background: none;
+  width: 25px;
+  height: 20px;
+  border-radius: 2px;
+}
+
+.search-panel .devtools-toolbar {
+  max-height: 26px;
+}
+
+.search-panel .status-bar-label {
+  min-height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  min-width: 150px;
+}
+
+.search-panel .img.loader {
+  background-image: url(chrome://devtools/content/debugger/images/loader.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  margin-inline-start: 10px;
+  animation: search-loader-rotate 0.5s linear infinite;
+  -moz-context-properties: fill;
+  fill: var(--theme-selection-background);
+  display: inline-block;
+  top: 4px;
+  position: relative;
+}
+
+@keyframes search-loader-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/devtools/client/netmonitor/src/assets/styles/variables.css b/devtools/client/netmonitor/src/assets/styles/variables.css
new file mode 100644
index 0000000000..cad71e267c
--- /dev/null
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  --primary-toolbar-height: 29px;
+  /* HTTP status codes */
+  --status-code-color-1xx: var(--theme-highlight-blue);
+  --status-code-color-2xx: var(--theme-highlight-green);
+  --status-code-color-3xx: transparent;
+  --status-code-color-4xx: var(--theme-highlight-pink);
+  --status-code-color-5xx: var(--theme-highlight-red);
+}
+
+:root.theme-dark {
+  --table-splitter-color: var(--grey-70);
+  --table-zebra-background: rgba(255,255,255,0.05);
+  --table-zebra-inline-icons-background: rgb(49, 47, 47);
+  --table-selection-background-hover: rgba(53, 59, 72, 1);
+  --table-selection-inline-icons-background-hover: rgba(53, 59, 72, 1);
+
+  --timing-blocked-color: var(--red-20);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+  --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+}
+
+:root.theme-light {
+  --table-splitter-color: var(--grey-20);
+  --table-zebra-background: rgba(247, 247, 247, 0.8);
+  --table-zebra-inline-icons-background: rgba(247, 247, 247);
+  --table-selection-background-hover: rgba(209, 232, 255, 0.8);
+  --table-selection-inline-icons-background-hover: rgba(209, 232, 255);
+
+  --timing-blocked-color: var(--red-70);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
+  --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
+}
diff --git a/devtools/client/netmonitor/src/components/App.js b/devtools/client/netmonitor/src/components/App.js
new file mode 100644
index 0000000000..4f25f2d89d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/App.js
@@ -0,0 +1,119 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+
+// Components
+loader.lazyGetter(this, "AppErrorBoundary", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/AppErrorBoundary.js")
+  );
+});
+loader.lazyGetter(this, "MonitorPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/MonitorPanel.js")
+  );
+});
+loader.lazyGetter(this, "StatisticsPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/StatisticsPanel.js")
+  );
+});
+loader.lazyGetter(this, "DropHarHandler", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/DropHarHandler.js")
+  );
+});
+
+// Localized strings for (devtools/client/locales/en-US/startup.properties)
+loader.lazyGetter(this, "L10N", function () {
+  const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+  return new LocalizationHelper("devtools/client/locales/startup.properties");
+});
+
+const { div } = dom;
+
+/**
+ * App component
+ * The top level component for representing main panel
+ */
+class App extends Component {
+  static get propTypes() {
+    return {
+      // List of actions passed to HAR importer.
+      actions: PropTypes.object.isRequired,
+      // The backend connector object.
+      connector: PropTypes.object.isRequired,
+      // Callback for opening links in the UI
+      openLink: PropTypes.func,
+      // Callback for opening split console.
+      openSplitConsole: PropTypes.func,
+      // Service to enable the source map feature.
+      sourceMapURLService: PropTypes.object,
+      // True if the stats panel is opened.
+      statisticsOpen: PropTypes.bool.isRequired,
+      // Document which settings menu will be injected to
+      toolboxDoc: PropTypes.object.isRequired,
+      // Syncing blocked requests
+      addBlockedUrl: PropTypes.func,
+    };
+  }
+  // Rendering
+
+  render() {
+    const {
+      actions,
+      connector,
+      openLink,
+      openSplitConsole,
+      sourceMapURLService,
+      statisticsOpen,
+      toolboxDoc,
+    } = this.props;
+
+    return div(
+      { className: "network-monitor" },
+      AppErrorBoundary(
+        {
+          componentName: "Netmonitor",
+          panel: L10N.getStr("netmonitor.label"),
+        },
+        !statisticsOpen
+          ? DropHarHandler(
+              {
+                actions,
+                openSplitConsole,
+              },
+              MonitorPanel({
+                actions,
+                connector,
+                openSplitConsole,
+                sourceMapURLService,
+                openLink,
+                toolboxDoc,
+              })
+            )
+          : StatisticsPanel({
+              connector,
+            })
+      )
+    );
+  }
+}
+
+// Exports
+
+module.exports = connect(state => ({
+  statisticsOpen: state.ui.statisticsOpen,
+}))(App);
diff --git a/devtools/client/netmonitor/src/components/CustomRequestPanel.js b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
new file mode 100644
index 0000000000..66f63b7d8d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/CustomRequestPanel.js
@@ -0,0 +1,371 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  getSelectedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getUrlQuery,
+  parseQueryString,
+  writeHeaderText,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { button, div, input, label, textarea } = dom;
+
+const CUSTOM_CANCEL = L10N.getStr("netmonitor.custom.cancel");
+const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.headers");
+const CUSTOM_NEW_REQUEST = L10N.getStr("netmonitor.custom.newRequest");
+const CUSTOM_NEW_REQUEST_METHOD_LABEL = L10N.getStr(
+  "netmonitor.custom.newRequestMethodLabel"
+);
+const CUSTOM_NEW_REQUEST_URL_LABEL = L10N.getStr(
+  "netmonitor.custom.newRequestUrlLabel"
+);
+const CUSTOM_POSTDATA = L10N.getStr("netmonitor.custom.postData");
+const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.query");
+const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
+
+/*
+ * Custom request panel component
+ * A network request editor which simply provide edit and resend interface
+ * for network development.
+ */
+class CustomRequestPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      removeSelectedCustomRequest: PropTypes.func.isRequired,
+      request: PropTypes.object.isRequired,
+      sendCustomRequest: PropTypes.func.isRequired,
+      updateRequest: PropTypes.func.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { request, connector } = this.props;
+    this.initialRequestMethod = request.method;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
+  }
+
+  /**
+   * Parse a text representation of a name[divider]value list with
+   * the given name regex and divider character.
+   *
+   * @param {string} text - Text of list
+   * @return {array} array of headers info {name, value}
+   */
+  parseRequestText(text, namereg, divider) {
+    const regex = new RegExp(`(${namereg})\\${divider}\\s*(\\S.*)`);
+    const pairs = [];
+
+    for (const line of text.split("\n")) {
+      const matches = regex.exec(line);
+      if (matches) {
+        const [, name, value] = matches;
+        pairs.push({ name, value });
+      }
+    }
+    return pairs;
+  }
+
+  /**
+   * Update Custom Request Fields
+   *
+   * @param {Object} evt click event
+   * @param {Object} request current request
+   * @param {updateRequest} updateRequest action
+   */
+  updateCustomRequestFields(evt, request, updateRequest) {
+    const val = evt.target.value;
+    let data;
+
+    switch (evt.target.id) {
+      case "custom-headers-value":
+        data = {
+          requestHeaders: {
+            customHeadersValue: val || "",
+            // Parse text representation of multiple HTTP headers
+            headers: this.parseRequestText(val, "\\S+?", ":"),
+          },
+        };
+        break;
+      case "custom-method-value":
+        // If val is empty when leaving the "method" field, set the method to
+        // its original value
+        data =
+          evt.type === "blur" && val === ""
+            ? { method: this.initialRequestMethod }
+            : { method: val.trim() };
+        break;
+      case "custom-postdata-value":
+        // Update "content-length" header value to reflect change
+        // in post data field.
+        const { requestHeaders } = request;
+        const newHeaders = requestHeaders.headers.map(header => {
+          if (header.name.toLowerCase() == "content-length") {
+            return {
+              name: header.name,
+              value: val.length,
+            };
+          }
+          return header;
+        });
+
+        data = {
+          requestPostData: {
+            postData: { text: val },
+          },
+          requestHeaders: {
+            headers: newHeaders,
+          },
+        };
+        break;
+      case "custom-query-value":
+        let customQueryValue = val || "";
+        // Parse readable text list of a query string
+        const queryArray = customQueryValue
+          ? this.parseRequestText(customQueryValue, ".+?", "=")
+          : [];
+        // Write out a list of query params into a query string
+        const queryString = queryArray
+          .map(({ name, value }) => name + "=" + value)
+          .join("&");
+        const url = queryString
+          ? [request.url.split("?")[0], queryString].join("?")
+          : request.url.split("?")[0];
+        // Remove temp customQueryValue while query string is parsable
+        if (
+          customQueryValue === "" ||
+          queryArray.length === customQueryValue.split("\n").length
+        ) {
+          customQueryValue = null;
+        }
+        data = {
+          customQueryValue,
+          url,
+        };
+        break;
+      case "custom-url-value":
+        data = {
+          customQueryValue: null,
+          url: val,
+        };
+        break;
+      default:
+        break;
+    }
+    if (data) {
+      // All updateRequest batch mode should be disabled to make UI editing in sync
+      updateRequest(request.id, data, false);
+    }
+  }
+
+  render() {
+    const {
+      removeSelectedCustomRequest,
+      request = {},
+      sendCustomRequest,
+      updateRequest,
+    } = this.props;
+    const { method, customQueryValue, requestHeaders, requestPostData, url } =
+      request;
+
+    let headers = "";
+    if (requestHeaders) {
+      headers = requestHeaders.customHeadersValue
+        ? requestHeaders.customHeadersValue
+        : writeHeaderText(requestHeaders.headers).trim();
+    }
+    const queryArray = url ? parseQueryString(getUrlQuery(url)) : [];
+    let params = customQueryValue;
+    if (!params) {
+      params = queryArray
+        ? queryArray.map(({ name, value }) => name + "=" + value).join("\n")
+        : "";
+    }
+    const postData = requestPostData?.postData.text
+      ? requestPostData.postData.text
+      : "";
+
+    return div(
+      { className: "custom-request-panel" },
+      div(
+        { className: "custom-request-label custom-header" },
+        CUSTOM_NEW_REQUEST
+      ),
+      div(
+        { className: "custom-request-panel-content" },
+        div(
+          { className: "tabpanel-summary-container custom-request" },
+          div(
+            { className: "custom-request-button-container" },
+            button(
+              {
+                className: "devtools-button",
+                id: "custom-request-close-button",
+                onClick: removeSelectedCustomRequest,
+              },
+              CUSTOM_CANCEL
+            ),
+            button(
+              {
+                className: "devtools-button",
+                id: "custom-request-send-button",
+                onClick: sendCustomRequest,
+              },
+              CUSTOM_SEND
+            )
+          )
+        ),
+        div(
+          {
+            className: "tabpanel-summary-container custom-method-and-url",
+            id: "custom-method-and-url",
+          },
+          label(
+            {
+              className: "custom-method-value-label custom-request-label",
+              htmlFor: "custom-method-value",
+            },
+            CUSTOM_NEW_REQUEST_METHOD_LABEL
+          ),
+          input({
+            className: "custom-method-value",
+            id: "custom-method-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            onBlur: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            value: method,
+          }),
+          label(
+            {
+              className: "custom-url-value-label custom-request-label",
+              htmlFor: "custom-url-value",
+            },
+            CUSTOM_NEW_REQUEST_URL_LABEL
+          ),
+          input({
+            className: "custom-url-value",
+            id: "custom-url-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            value: url || "http://",
+          })
+        ),
+        // Hide query field when there is no params
+        params
+          ? div(
+              {
+                className: "tabpanel-summary-container custom-section",
+                id: "custom-query",
+              },
+              label(
+                {
+                  className: "custom-request-label",
+                  htmlFor: "custom-query-value",
+                },
+                CUSTOM_QUERY
+              ),
+              textarea({
+                className: "tabpanel-summary-input",
+                id: "custom-query-value",
+                onChange: evt =>
+                  this.updateCustomRequestFields(evt, request, updateRequest),
+                rows: 4,
+                value: params,
+                wrap: "off",
+              })
+            )
+          : null,
+        div(
+          {
+            id: "custom-headers",
+            className: "tabpanel-summary-container custom-section",
+          },
+          label(
+            {
+              className: "custom-request-label",
+              htmlFor: "custom-headers-value",
+            },
+            CUSTOM_HEADERS
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "custom-headers-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            rows: 8,
+            value: headers,
+            wrap: "off",
+          })
+        ),
+        div(
+          {
+            id: "custom-postdata",
+            className: "tabpanel-summary-container custom-section",
+          },
+          label(
+            {
+              className: "custom-request-label",
+              htmlFor: "custom-postdata-value",
+            },
+            CUSTOM_POSTDATA
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "custom-postdata-value",
+            onChange: evt =>
+              this.updateCustomRequestFields(evt, request, updateRequest),
+            rows: 6,
+            value: postData,
+            wrap: "off",
+          })
+        )
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({ request: getSelectedRequest(state) }),
+  (dispatch, props) => ({
+    removeSelectedCustomRequest: () =>
+      dispatch(Actions.removeSelectedCustomRequest()),
+    sendCustomRequest: () => dispatch(Actions.sendCustomRequest()),
+    updateRequest: (id, data, batch) =>
+      dispatch(Actions.updateRequest(id, data, batch)),
+  })
+)(CustomRequestPanel);
diff --git a/devtools/client/netmonitor/src/components/DropHarHandler.js b/devtools/client/netmonitor/src/components/DropHarHandler.js
new file mode 100644
index 0000000000..6c51a6b80e
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/DropHarHandler.js
@@ -0,0 +1,141 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  findDOMNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "HarMenuUtils",
+  "resource://devtools/client/netmonitor/src/har/har-menu-utils.js",
+  true
+);
+
+const { div } = dom;
+
+const DROP_HAR_FILES = L10N.getStr("netmonitor.label.dropHarFiles");
+
+/**
+ * Helper component responsible for handling and  importing
+ * dropped *.har files.
+ */
+class DropHarHandler extends Component {
+  static get propTypes() {
+    return {
+      // List of actions passed to HAR importer.
+      actions: PropTypes.object.isRequired,
+      // Child component.
+      children: PropTypes.element.isRequired,
+      // Callback for opening split console.
+      openSplitConsole: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    // Drag and drop event handlers.
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDragOver = this.onDragOver.bind(this);
+    this.onDragLeave = this.onDragLeave.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  // Drag Events
+
+  onDragEnter(event) {
+    event.preventDefault();
+    if (event.dataTransfer.files.length === 0) {
+      return;
+    }
+
+    startDragging(findDOMNode(this));
+  }
+
+  onDragLeave(event) {
+    const node = findDOMNode(this);
+    if (!node.contains(event.relatedTarget)) {
+      stopDragging(node);
+    }
+  }
+
+  onDragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+  }
+
+  onDrop(event) {
+    event.preventDefault();
+    stopDragging(findDOMNode(this));
+
+    const { files } = event.dataTransfer;
+    if (!files) {
+      return;
+    }
+
+    const { actions, openSplitConsole } = this.props;
+
+    // Import only the first dragged file for now
+    // See also:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1438792
+    if (files.length) {
+      const file = files[0];
+      readFile(file).then(har => {
+        if (har) {
+          HarMenuUtils.appendPreview(har, actions, openSplitConsole);
+        }
+      });
+    }
+  }
+
+  // Rendering
+
+  render() {
+    return div(
+      {
+        onDragEnter: this.onDragEnter,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDrop: this.onDrop,
+      },
+      this.props.children,
+      div({ className: "dropHarFiles" }, div({}, DROP_HAR_FILES))
+    );
+  }
+}
+
+// Helpers
+
+function readFile(file) {
+  return new Promise(resolve => {
+    const fileReader = new FileReader();
+    fileReader.onloadend = () => {
+      resolve(fileReader.result);
+    };
+    fileReader.readAsText(file);
+  });
+}
+
+function startDragging(node) {
+  node.setAttribute("dragging", "true");
+}
+
+function stopDragging(node) {
+  node.removeAttribute("dragging");
+}
+
+// Exports
+
+module.exports = DropHarHandler;
diff --git a/devtools/client/netmonitor/src/components/MonitorPanel.js b/devtools/client/netmonitor/src/components/MonitorPanel.js
new file mode 100644
index 0000000000..47b3758efe
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -0,0 +1,271 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  findDOMNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  updateFormDataSections,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getSelectedRequest,
+  isSelectedRequestVisible,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const SplitBox = createFactory(
+  require("resource://devtools/client/shared/components/splitter/SplitBox.js")
+);
+const RequestList = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-list/RequestList.js")
+);
+const Toolbar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/Toolbar.js")
+);
+
+loader.lazyGetter(this, "NetworkDetailsBar", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-details/NetworkDetailsBar.js")
+  );
+});
+
+loader.lazyGetter(this, "NetworkActionBar", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/NetworkActionBar.js")
+  );
+});
+
+// MediaQueryList object responsible for switching sidebar splitter
+// between landscape and portrait mode (depending on browser window size).
+const MediaQueryVert = window.matchMedia("(min-width: 700px)");
+
+// MediaQueryList object responsible for switching the toolbar
+// between single and 2-rows layout (depending on browser window size).
+const MediaQuerySingleRow = window.matchMedia("(min-width: 1020px)");
+
+/**
+ * Monitor panel component
+ * The main panel for displaying various network request information
+ */
+class MonitorPanel extends Component {
+  static get propTypes() {
+    return {
+      actions: PropTypes.object.isRequired,
+      connector: PropTypes.object.isRequired,
+      isEmpty: PropTypes.bool.isRequired,
+      networkDetailsOpen: PropTypes.bool.isRequired,
+      openNetworkDetails: PropTypes.func.isRequired,
+      toolboxDoc: PropTypes.object.isRequired,
+      // Callback for opening split console.
+      openSplitConsole: PropTypes.func,
+      onNetworkDetailsResized: PropTypes.func.isRequired,
+      request: PropTypes.object,
+      selectedRequestVisible: PropTypes.bool.isRequired,
+      sourceMapURLService: PropTypes.object,
+      openLink: PropTypes.func,
+      updateRequest: PropTypes.func.isRequired,
+      networkActionOpen: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isSingleRow: MediaQuerySingleRow.matches,
+      isVerticalSpliter: MediaQueryVert.matches,
+    };
+
+    this.onLayoutChange = this.onLayoutChange.bind(this);
+    this.onNetworkDetailsResized = this.onNetworkDetailsResized.bind(this);
+  }
+
+  componentDidMount() {
+    MediaQuerySingleRow.addListener(this.onLayoutChange);
+    MediaQueryVert.addListener(this.onLayoutChange);
+    this.persistDetailsPanelSize();
+    this.persistActionBarSize();
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    updateFormDataSections(nextProps);
+  }
+
+  componentDidUpdate() {
+    const { selectedRequestVisible, openNetworkDetails } = this.props;
+    if (!selectedRequestVisible) {
+      openNetworkDetails(false);
+    }
+  }
+
+  componentWillUnmount() {
+    MediaQuerySingleRow.removeListener(this.onLayoutChange);
+    MediaQueryVert.removeListener(this.onLayoutChange);
+    this.persistDetailsPanelSize();
+    this.persistActionBarSize();
+  }
+
+  persistDetailsPanelSize() {
+    const { clientWidth, clientHeight } = findDOMNode(this.refs.endPanel) || {};
+
+    if (this.state.isVerticalSpliter && clientWidth) {
+      Services.prefs.setIntPref(
+        "devtools.netmonitor.panes-network-details-width",
+        clientWidth
+      );
+    }
+    if (!this.state.isVerticalSpliter && clientHeight) {
+      Services.prefs.setIntPref(
+        "devtools.netmonitor.panes-network-details-height",
+        clientHeight
+      );
+    }
+  }
+
+  persistActionBarSize() {
+    const { clientWidth, clientHeight } =
+      findDOMNode(this.refs.actionBar) || {};
+    if (clientWidth) {
+      Services.prefs.setIntPref(
+        "devtools.netmonitor.panes-search-width",
+        clientWidth
+      );
+    }
+    if (clientHeight) {
+      Services.prefs.setIntPref(
+        "devtools.netmonitor.panes-search-height",
+        clientHeight
+      );
+    }
+  }
+
+  onLayoutChange() {
+    this.setState({
+      isSingleRow: MediaQuerySingleRow.matches,
+      isVerticalSpliter: MediaQueryVert.matches,
+    });
+  }
+
+  onNetworkDetailsResized(width, height) {
+    // Cleaning width and height parameters, because SplitBox passes ALWAYS two values,
+    // while depending on orientation ONLY ONE dimension is managed by it at a time.
+    const { isVerticalSpliter } = this.state;
+    return this.props.onNetworkDetailsResized(
+      isVerticalSpliter ? width : null,
+      isVerticalSpliter ? null : height
+    );
+  }
+
+  renderActionBar() {
+    const { connector, isEmpty, networkActionOpen } = this.props;
+
+    const initialWidth = Services.prefs.getIntPref(
+      "devtools.netmonitor.panes-search-width"
+    );
+    const initialHeight = Services.prefs.getIntPref(
+      "devtools.netmonitor.panes-search-height"
+    );
+
+    return SplitBox({
+      className: "devtools-responsive-container",
+      initialWidth,
+      initialHeight,
+      minSize: "250px",
+      maxSize: "80%",
+      splitterSize: networkActionOpen ? 1 : 0,
+      startPanel:
+        networkActionOpen &&
+        NetworkActionBar({
+          ref: "actionBar",
+          connector,
+        }),
+      endPanel: RequestList({ isEmpty, connector }),
+      endPanelControl: false,
+      vert: true,
+    });
+  }
+
+  render() {
+    const {
+      actions,
+      connector,
+      networkDetailsOpen,
+      openLink,
+      openSplitConsole,
+      sourceMapURLService,
+      toolboxDoc,
+    } = this.props;
+
+    const initialWidth = Services.prefs.getIntPref(
+      "devtools.netmonitor.panes-network-details-width"
+    );
+
+    const initialHeight = Services.prefs.getIntPref(
+      "devtools.netmonitor.panes-network-details-height"
+    );
+
+    return div(
+      { className: "monitor-panel" },
+      Toolbar({
+        actions,
+        connector,
+        openSplitConsole,
+        singleRow: this.state.isSingleRow,
+        toolboxDoc,
+      }),
+      SplitBox({
+        className: "devtools-responsive-container",
+        initialWidth,
+        initialHeight,
+        minSize: "50px",
+        maxSize: "80%",
+        splitterSize: networkDetailsOpen ? 1 : 0,
+        startPanel: this.renderActionBar(),
+        endPanel:
+          networkDetailsOpen &&
+          NetworkDetailsBar({
+            ref: "endPanel",
+            connector,
+            openLink,
+            sourceMapURLService,
+          }),
+        endPanelCollapsed: !networkDetailsOpen,
+        endPanelControl: true,
+        vert: this.state.isVerticalSpliter,
+        onControlledPanelResized: this.onNetworkDetailsResized,
+      })
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    isEmpty: !state.requests.requests.length,
+    networkDetailsOpen: state.ui.networkDetailsOpen,
+    networkActionOpen: state.ui.networkActionOpen,
+    request: getSelectedRequest(state),
+    selectedRequestVisible: isSelectedRequestVisible(state),
+  }),
+  dispatch => ({
+    openNetworkDetails: open => dispatch(Actions.openNetworkDetails(open)),
+    onNetworkDetailsResized: (width, height) =>
+      dispatch(Actions.resizeNetworkDetails(width, height)),
+    updateRequest: (id, data, batch) =>
+      dispatch(Actions.updateRequest(id, data, batch)),
+  })
+)(MonitorPanel);
diff --git a/devtools/client/netmonitor/src/components/NetworkActionBar.js b/devtools/client/netmonitor/src/components/NetworkActionBar.js
new file mode 100644
index 0000000000..92110e9ec5
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/NetworkActionBar.js
@@ -0,0 +1,136 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  div,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const Tabbar = createFactory(
+  require("resource://devtools/client/shared/components/tabs/TabBar.js")
+);
+const TabPanel = createFactory(
+  require("resource://devtools/client/shared/components/tabs/Tabs.js").TabPanel
+);
+
+loader.lazyGetter(this, "SearchPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/search/SearchPanel.js")
+  );
+});
+
+loader.lazyGetter(this, "RequestBlockingPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js")
+  );
+});
+
+loader.lazyGetter(this, "HTTPCustomRequestPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js")
+  );
+});
+
+class NetworkActionBar extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      selectedActionBarTabId: PropTypes.string,
+      selectActionBarTab: PropTypes.func.isRequired,
+      toggleNetworkActionBar: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      connector,
+      selectedActionBarTabId,
+      selectActionBarTab,
+      toggleNetworkActionBar,
+    } = this.props;
+
+    // The request blocking and search panels are available behind a pref
+    const showBlockingPanel = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.requestBlocking"
+    );
+    const showSearchPanel = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.search"
+    );
+    const showNewCustomRequestPanel = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.newEditAndResend"
+    );
+
+    return div(
+      { className: "network-action-bar" },
+      Tabbar(
+        {
+          activeTabId: selectedActionBarTabId,
+          onSelect: id => selectActionBarTab(id),
+          sidebarToggleButton: {
+            collapsed: false,
+            collapsePaneTitle: L10N.getStr("collapseActionPane"),
+            expandPaneTitle: "",
+            onClick: toggleNetworkActionBar,
+            alignRight: true,
+            canVerticalSplit: false,
+          },
+        },
+        showNewCustomRequestPanel &&
+          TabPanel(
+            {
+              id: PANELS.HTTP_CUSTOM_REQUEST,
+              title: L10N.getStr("netmonitor.actionbar.HTTPCustomRequest"),
+              className: "network-action-bar-HTTP-custom-request",
+            },
+            HTTPCustomRequestPanel({ connector })
+          ),
+        showSearchPanel &&
+          TabPanel(
+            {
+              id: PANELS.SEARCH,
+              title: L10N.getStr("netmonitor.actionbar.search"),
+              className: "network-action-bar-search",
+            },
+            SearchPanel({ connector })
+          ),
+        showBlockingPanel &&
+          TabPanel(
+            {
+              id: PANELS.BLOCKING,
+              title: L10N.getStr("netmonitor.actionbar.requestBlocking2"),
+              className: "network-action-bar-blocked",
+            },
+            RequestBlockingPanel()
+          )
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    selectedActionBarTabId: state.ui.selectedActionBarTabId,
+  }),
+  dispatch => ({
+    selectActionBarTab: id => dispatch(Actions.selectActionBarTab(id)),
+    toggleNetworkActionBar: () => dispatch(Actions.toggleNetworkActionBar()),
+  })
+)(NetworkActionBar);
diff --git a/devtools/client/netmonitor/src/components/SecurityState.js b/devtools/client/netmonitor/src/components/SecurityState.js
new file mode 100644
index 0000000000..74e098d290
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/SecurityState.js
@@ -0,0 +1,78 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  div,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const UPDATED_DOMAIN_PROPS = ["remoteAddress", "securityState", "urlDetails"];
+
+class SecurityState extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_DOMAIN_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const { item, onSecurityIconMouseDown } = this.props;
+
+    const {
+      securityState,
+      urlDetails: { isLocal },
+    } = item;
+    const iconClassList = ["requests-security-state-icon"];
+
+    let iconTitle;
+    let realSecurityState = securityState;
+
+    // Locally delivered files such as http://localhost and file:// paths
+    // are considered to have been delivered securely.
+    if (isLocal) {
+      realSecurityState = "secure";
+    }
+
+    if (realSecurityState) {
+      iconClassList.push(`security-state-${realSecurityState}`);
+      iconTitle = L10N.getStr(`netmonitor.security.state.${realSecurityState}`);
+    }
+
+    return div(
+      { className: "requests-security-icon-group" },
+      div({
+        className: iconClassList.join(" "),
+        onMouseDown: onSecurityIconMouseDown,
+        title: iconTitle,
+      }),
+      item.isThirdPartyTrackingResource &&
+        div({
+          className: "tracking-resource",
+          title: L10N.getStr("netmonitor.trackingResource.tooltip"),
+        })
+    );
+  }
+}
+
+module.exports = SecurityState;
diff --git a/devtools/client/netmonitor/src/components/SourceEditor.js b/devtools/client/netmonitor/src/components/SourceEditor.js
new file mode 100644
index 0000000000..89165e8a77
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/SourceEditor.js
@@ -0,0 +1,137 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Editor = require("resource://devtools/client/shared/sourceeditor/editor.js");
+const {
+  setTargetSearchResult,
+} = require("resource://devtools/client/netmonitor/src/actions/search.js");
+const { div } = dom;
+
+/**
+ * CodeMirror editor as a React component
+ */
+class SourceEditor extends Component {
+  static get propTypes() {
+    return {
+      // Source editor syntax highlight mode, which is a mime type defined in CodeMirror
+      mode: PropTypes.string,
+      // Source editor content
+      text: PropTypes.string,
+      // Auto scroll to specific line
+      scrollToLine: PropTypes.number,
+      // Reset target search result that has been used for navigation in this panel.
+      // This is done to avoid second navigation the next time.
+      resetTargetSearchResult: PropTypes.func,
+    };
+  }
+
+  componentDidMount() {
+    const { mode, text } = this.props;
+
+    this.editor = new Editor({
+      lineNumbers: true,
+      lineWrapping: false,
+      mode: null, // Disable auto syntax detection, but then we set mode asynchronously
+      readOnly: true,
+      theme: "mozilla",
+      value: text,
+    });
+
+    // Delay to CodeMirror initialization content to prevent UI freezing
+    this.editorTimeout = setTimeout(() => {
+      this.editorTimeout = null;
+      this.editor.appendToLocalElement(this.refs.editorElement);
+
+      // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+      // processing large content, so we enable it asynchronously within the setTimeout
+      // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+      this.editorSetModeTimeout = setTimeout(() => {
+        this.editorSetModeTimeout = null;
+        this.editor.setMode(mode);
+        this.scrollToLine();
+      });
+    });
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.mode !== this.props.mode ||
+      nextProps.text !== this.props.text ||
+      nextProps.scrollToLine !== this.props.scrollToLine
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    const { mode, scrollToLine, text } = this.props;
+
+    // Bail out if the editor has been destroyed in the meantime.
+    if (this.editor.isDestroyed()) {
+      return;
+    }
+
+    if (prevProps.text !== text) {
+      // Reset the existed 'mode' attribute in order to make setText() process faster
+      // to prevent drawing unnecessary syntax highlight.
+      this.editor.setMode(null);
+      this.editor.setText(text);
+
+      if (this.editorSetModeTimeout) {
+        clearTimeout(this.editorSetModeTimeout);
+      }
+
+      // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+      // processing large content, so we enable it asynchronously within the setTimeout
+      // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+      this.editorSetModeTimeout = setTimeout(() => {
+        this.editorSetModeTimeout = null;
+        this.editor.setMode(mode);
+        this.scrollToLine();
+      });
+    } else if (prevProps.scrollToLine !== scrollToLine) {
+      this.scrollToLine();
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.editorTimeout);
+    clearTimeout(this.editorSetModeTimeout);
+    this.editor.destroy();
+  }
+
+  scrollToLine() {
+    const { scrollToLine, resetTargetSearchResult } = this.props;
+
+    if (scrollToLine) {
+      this.editor.setCursor(
+        {
+          line: scrollToLine - 1,
+        },
+        "center"
+      );
+    }
+
+    resetTargetSearchResult();
+  }
+
+  render() {
+    return div({
+      ref: "editorElement",
+      className: "source-editor-mount devtools-monospace",
+    });
+  }
+}
+
+module.exports = connect(null, dispatch => ({
+  resetTargetSearchResult: () => dispatch(setTargetSearchResult(null)),
+}))(SourceEditor);
diff --git a/devtools/client/netmonitor/src/components/StatisticsPanel.js b/devtools/client/netmonitor/src/components/StatisticsPanel.js
new file mode 100644
index 0000000000..e3d6787819
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatisticsPanel.js
@@ -0,0 +1,413 @@
+/* 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 ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js");
+const {
+  FILTER_TAGS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const { Chart } = require("resource://devtools/client/shared/widgets/Chart.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  Filters,
+} = require("resource://devtools/client/netmonitor/src/utils/filter-predicates.js");
+const {
+  getSizeWithDecimals,
+  getTimeWithDecimals,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getPerformanceAnalysisURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+// Components
+const MDNLink = createFactory(
+  require("resource://devtools/client/shared/components/MdnLink.js")
+);
+
+const { button, div } = dom;
+const MediaQueryList = window.matchMedia("(min-width: 700px)");
+
+const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200;
+const BACK_BUTTON = L10N.getStr("netmonitor.backButton");
+const CHARTS_CACHE_ENABLED = L10N.getStr("charts.cacheEnabled");
+const CHARTS_CACHE_DISABLED = L10N.getStr("charts.cacheDisabled");
+const CHARTS_LEARN_MORE = L10N.getStr("charts.learnMore");
+
+/*
+ * Statistics panel component
+ * Performance analysis tool which shows you how long the browser takes to
+ * download the different parts of your site.
+ */
+class StatisticsPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      closeStatistics: PropTypes.func.isRequired,
+      enableRequestFilterTypeOnly: PropTypes.func.isRequired,
+      hasLoad: PropTypes.bool,
+      requests: PropTypes.array,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isVerticalSpliter: MediaQueryList.matches,
+    };
+
+    this.createMDNLink = this.createMDNLink.bind(this);
+    this.unmountMDNLinkContainers = this.unmountMDNLinkContainers.bind(this);
+    this.createChart = this.createChart.bind(this);
+    this.sanitizeChartDataSource = this.sanitizeChartDataSource.bind(this);
+    this.responseIsFresh = this.responseIsFresh.bind(this);
+    this.onLayoutChange = this.onLayoutChange.bind(this);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    this.mdnLinkContainerNodes = new Map();
+  }
+
+  componentDidMount() {
+    const { requests, connector } = this.props;
+    requests.forEach(request => {
+      fetchNetworkUpdatePacket(connector.requestData, request, [
+        "eventTimings",
+        "responseHeaders",
+      ]);
+    });
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { requests, connector } = nextProps;
+    requests.forEach(request => {
+      fetchNetworkUpdatePacket(connector.requestData, request, [
+        "eventTimings",
+        "responseHeaders",
+      ]);
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    MediaQueryList.addListener(this.onLayoutChange);
+
+    const { hasLoad, requests } = this.props;
+
+    // Display statistics about all requests for which we received enough data,
+    // as soon as the page is considered to be loaded
+    const ready = requests.length && hasLoad;
+
+    // Ignore requests which are missing data expected by this component:
+    // - pending/incomplete requests
+    // - blocked/errored requests
+    const validRequests = requests.filter(
+      req =>
+        req.contentSize !== undefined &&
+        req.mimeType &&
+        req.responseHeaders &&
+        req.status !== undefined &&
+        req.totalTime !== undefined
+    );
+
+    this.createChart({
+      id: "primedCacheChart",
+      title: CHARTS_CACHE_ENABLED,
+      data: ready ? this.sanitizeChartDataSource(validRequests, false) : null,
+    });
+
+    this.createChart({
+      id: "emptyCacheChart",
+      title: CHARTS_CACHE_DISABLED,
+      data: ready ? this.sanitizeChartDataSource(validRequests, true) : null,
+    });
+
+    this.createMDNLink("primedCacheChart", getPerformanceAnalysisURL());
+    this.createMDNLink("emptyCacheChart", getPerformanceAnalysisURL());
+  }
+
+  componentWillUnmount() {
+    MediaQueryList.removeListener(this.onLayoutChange);
+    this.unmountMDNLinkContainers();
+  }
+
+  createMDNLink(chartId, url) {
+    if (this.mdnLinkContainerNodes.has(chartId)) {
+      ReactDOM.unmountComponentAtNode(this.mdnLinkContainerNodes.get(chartId));
+    }
+
+    // MDNLink is a React component but Chart isn't.  To get the link
+    // into the chart we mount a new ReactDOM at the appropriate
+    // location after the chart has been created.
+    const title = this.refs[chartId].querySelector(".table-chart-title");
+    const containerNode = document.createElement("span");
+    title.appendChild(containerNode);
+
+    ReactDOM.render(
+      MDNLink({
+        url,
+        title: CHARTS_LEARN_MORE,
+      }),
+      containerNode
+    );
+    this.mdnLinkContainerNodes.set(chartId, containerNode);
+  }
+
+  unmountMDNLinkContainers() {
+    for (const [, node] of this.mdnLinkContainerNodes) {
+      ReactDOM.unmountComponentAtNode(node);
+    }
+  }
+
+  createChart({ id, title, data }) {
+    // Create a new chart.
+    const chart = Chart.PieTable(document, {
+      diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
+      title,
+      header: {
+        count: L10N.getStr("charts.requestsNumber"),
+        label: L10N.getStr("charts.type"),
+        size: L10N.getStr("charts.size"),
+        transferredSize: L10N.getStr("charts.transferred"),
+        time: L10N.getStr("charts.time"),
+        nonBlockingTime: L10N.getStr("charts.nonBlockingTime"),
+      },
+      data,
+      strings: {
+        size: value =>
+          L10N.getFormatStr(
+            "charts.size.kB",
+            getSizeWithDecimals(value / 1000)
+          ),
+        transferredSize: value =>
+          L10N.getFormatStr(
+            "charts.transferredSize.kB",
+            getSizeWithDecimals(value / 1000)
+          ),
+        time: value =>
+          L10N.getFormatStr("charts.totalS", getTimeWithDecimals(value / 1000)),
+        nonBlockingTime: value =>
+          L10N.getFormatStr("charts.totalS", getTimeWithDecimals(value / 1000)),
+      },
+      totals: {
+        cached: total => L10N.getFormatStr("charts.totalCached", total),
+        count: total => L10N.getFormatStr("charts.totalCount", total),
+        size: total =>
+          L10N.getFormatStr(
+            "charts.totalSize.kB",
+            getSizeWithDecimals(total / 1000)
+          ),
+        transferredSize: total =>
+          L10N.getFormatStr(
+            "charts.totalTransferredSize.kB",
+            getSizeWithDecimals(total / 1000)
+          ),
+        time: total => {
+          const seconds = total / 1000;
+          const string = getTimeWithDecimals(seconds);
+          return PluralForm.get(
+            seconds,
+            L10N.getStr("charts.totalSeconds")
+          ).replace("#1", string);
+        },
+        nonBlockingTime: total => {
+          const seconds = total / 1000;
+          const string = getTimeWithDecimals(seconds);
+          return PluralForm.get(
+            seconds,
+            L10N.getStr("charts.totalSecondsNonBlocking")
+          ).replace("#1", string);
+        },
+      },
+      sorted: true,
+    });
+
+    chart.on("click", ({ label }) => {
+      // Reset FilterButtons and enable one filter exclusively
+      this.props.closeStatistics();
+      this.props.enableRequestFilterTypeOnly(label);
+    });
+
+    const container = this.refs[id];
+
+    // Nuke all existing charts of the specified type.
+    while (container.hasChildNodes()) {
+      container.firstChild.remove();
+    }
+
+    container.appendChild(chart.node);
+  }
+
+  sanitizeChartDataSource(requests, emptyCache) {
+    const data = FILTER_TAGS.map(type => ({
+      cached: 0,
+      count: 0,
+      label: type,
+      size: 0,
+      transferredSize: 0,
+      time: 0,
+      nonBlockingTime: 0,
+    }));
+
+    for (const request of requests) {
+      let type;
+
+      if (Filters.html(request)) {
+        // "html"
+        type = 0;
+      } else if (Filters.css(request)) {
+        // "css"
+        type = 1;
+      } else if (Filters.js(request)) {
+        // "js"
+        type = 2;
+      } else if (Filters.fonts(request)) {
+        // "fonts"
+        type = 4;
+      } else if (Filters.images(request)) {
+        // "images"
+        type = 5;
+      } else if (Filters.media(request)) {
+        // "media"
+        type = 6;
+      } else if (Filters.ws(request)) {
+        // "ws"
+        type = 7;
+      } else if (Filters.xhr(request)) {
+        // Verify XHR last, to categorize other mime types in their own blobs.
+        // "xhr"
+        type = 3;
+      } else {
+        // "other"
+        type = 8;
+      }
+
+      if (emptyCache || !this.responseIsFresh(request)) {
+        data[type].time += request.totalTime || 0;
+        data[type].size += request.contentSize || 0;
+        data[type].transferredSize += request.transferredSize || 0;
+        const nonBlockingTime =
+          request.eventTimings.totalTime - request.eventTimings.timings.blocked;
+        data[type].nonBlockingTime += nonBlockingTime || 0;
+      } else {
+        data[type].cached++;
+      }
+      data[type].count++;
+    }
+
+    return data.filter(e => e.count > 0);
+  }
+
+  /**
+   * Checks if the "Expiration Calculations" defined in section 13.2.4 of the
+   * "HTTP/1.1: Caching in HTTP" spec holds true for a collection of headers.
+   *
+   * @param object
+   *        An object containing the { responseHeaders, status } properties.
+   * @return boolean
+   *         True if the response is fresh and loaded from cache.
+   */
+  responseIsFresh({ responseHeaders, status }) {
+    // Check for a "304 Not Modified" status and response headers availability.
+    if (status != 304 || !responseHeaders) {
+      return false;
+    }
+
+    const list = responseHeaders.headers;
+    const cacheControl = list.find(
+      e => e.name.toLowerCase() === "cache-control"
+    );
+    const expires = list.find(e => e.name.toLowerCase() === "expires");
+
+    // Check the "Cache-Control" header for a maximum age value.
+    if (cacheControl) {
+      const maxAgeMatch =
+        cacheControl.value.match(/s-maxage\s*=\s*(\d+)/) ||
+        cacheControl.value.match(/max-age\s*=\s*(\d+)/);
+
+      if (maxAgeMatch && maxAgeMatch.pop() > 0) {
+        return true;
+      }
+    }
+
+    // Check the "Expires" header for a valid date.
+    if (expires && Date.parse(expires.value)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  onLayoutChange() {
+    this.setState({
+      isVerticalSpliter: MediaQueryList.matches,
+    });
+  }
+
+  render() {
+    const { closeStatistics } = this.props;
+    const splitterClassName = ["splitter"];
+
+    if (this.state.isVerticalSpliter) {
+      splitterClassName.push("devtools-side-splitter");
+    } else {
+      splitterClassName.push("devtools-horizontal-splitter");
+    }
+
+    return div(
+      { className: "statistics-panel" },
+      button(
+        {
+          className: "back-button devtools-button",
+          "data-text-only": "true",
+          title: BACK_BUTTON,
+          onClick: closeStatistics,
+        },
+        BACK_BUTTON
+      ),
+      div(
+        { className: "charts-container" },
+        div({
+          ref: "primedCacheChart",
+          className: "charts primed-cache-chart",
+        }),
+        div({ className: splitterClassName.join(" ") }),
+        div({ ref: "emptyCacheChart", className: "charts empty-cache-chart" })
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    // `firstDocumentLoadTimestamp` is set on timing markers when we receive
+    // DOCUMENT_EVENT's dom-complete, which is equivalent to page `load` event.
+    hasLoad: state.timingMarkers.firstDocumentLoadTimestamp != -1,
+    requests: [...state.requests.requests],
+  }),
+  (dispatch, props) => ({
+    closeStatistics: () =>
+      dispatch(Actions.openStatistics(props.connector, false)),
+    enableRequestFilterTypeOnly: label =>
+      dispatch(Actions.enableRequestFilterTypeOnly(label)),
+  })
+)(StatisticsPanel);
diff --git a/devtools/client/netmonitor/src/components/StatusBar.js b/devtools/client/netmonitor/src/components/StatusBar.js
new file mode 100644
index 0000000000..3a6c73e0db
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatusBar.js
@@ -0,0 +1,175 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  getDisplayedRequestsSummary,
+  getDisplayedTimingMarker,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getFormattedSize,
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { button, div } = dom;
+
+const REQUESTS_COUNT_EMPTY = L10N.getStr(
+  "networkMenu.summary.requestsCountEmpty"
+);
+const TOOLTIP_PERF = L10N.getStr("networkMenu.summary.tooltip.perf");
+const TOOLTIP_REQUESTS_COUNT = L10N.getStr(
+  "networkMenu.summary.tooltip.requestsCount"
+);
+const TOOLTIP_TRANSFERRED = L10N.getStr(
+  "networkMenu.summary.tooltip.transferred"
+);
+const TOOLTIP_FINISH = L10N.getStr("networkMenu.summary.tooltip.finish");
+const TOOLTIP_DOM_CONTENT_LOADED = L10N.getStr(
+  "networkMenu.summary.tooltip.domContentLoaded"
+);
+const TOOLTIP_LOAD = L10N.getStr("networkMenu.summary.tooltip.load");
+
+const UPDATED_SUMMARY_PROPS = ["count", "contentSize", "transferredSize", "ms"];
+
+const UPDATED_TIMING_PROPS = ["DOMContentLoaded", "load"];
+
+/**
+ * Status Bar component
+ * Displays the summary of total size and transferred size by all requests
+ * Also displays different timing markers
+ */
+class StatusBar extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openStatistics: PropTypes.func.isRequired,
+      summary: PropTypes.object.isRequired,
+      timingMarkers: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { summary, timingMarkers } = this.props;
+    return (
+      !propertiesEqual(UPDATED_SUMMARY_PROPS, summary, nextProps.summary) ||
+      !propertiesEqual(
+        UPDATED_TIMING_PROPS,
+        timingMarkers,
+        nextProps.timingMarkers
+      )
+    );
+  }
+
+  render() {
+    const { openStatistics, summary, timingMarkers, connector } = this.props;
+    const { count, contentSize, transferredSize, ms } = summary;
+    const { DOMContentLoaded, load } = timingMarkers;
+
+    const toolbox = connector.getToolbox();
+    const countText =
+      count === 0
+        ? REQUESTS_COUNT_EMPTY
+        : PluralForm.get(
+            count,
+            L10N.getStr("networkMenu.summary.requestsCount2")
+          ).replace("#1", count);
+    const transferText = L10N.getFormatStrWithNumbers(
+      "networkMenu.summary.transferred",
+      getFormattedSize(contentSize),
+      getFormattedSize(transferredSize)
+    );
+    const finishText = L10N.getFormatStrWithNumbers(
+      "networkMenu.summary.finish",
+      getFormattedTime(ms)
+    );
+
+    return div(
+      { className: "devtools-toolbar devtools-toolbar-bottom" },
+      !toolbox.isBrowserToolbox
+        ? button(
+            {
+              className: "devtools-button requests-list-network-summary-button",
+              title: TOOLTIP_PERF,
+              onClick: openStatistics,
+            },
+            div({ className: "summary-info-icon" })
+          )
+        : null,
+      div(
+        {
+          className: "status-bar-label requests-list-network-summary-count",
+          title: TOOLTIP_REQUESTS_COUNT,
+        },
+        countText
+      ),
+      count !== 0 &&
+        div(
+          {
+            className:
+              "status-bar-label requests-list-network-summary-transfer",
+            title: TOOLTIP_TRANSFERRED,
+          },
+          transferText
+        ),
+      count !== 0 &&
+        div(
+          {
+            className: "status-bar-label requests-list-network-summary-finish",
+            title: TOOLTIP_FINISH,
+          },
+          finishText
+        ),
+      DOMContentLoaded > -1 &&
+        div(
+          {
+            className: "status-bar-label dom-content-loaded",
+            title: TOOLTIP_DOM_CONTENT_LOADED,
+          },
+          `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`
+        ),
+      load > -1 &&
+        div(
+          {
+            className: "status-bar-label load",
+            title: TOOLTIP_LOAD,
+          },
+          `load: ${getFormattedTime(load)}`
+        )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    summary: getDisplayedRequestsSummary(state),
+    timingMarkers: {
+      DOMContentLoaded: getDisplayedTimingMarker(
+        state,
+        "firstDocumentDOMContentLoadedTimestamp"
+      ),
+      load: getDisplayedTimingMarker(state, "firstDocumentLoadTimestamp"),
+    },
+  }),
+  (dispatch, props) => ({
+    openStatistics: () =>
+      dispatch(Actions.openStatistics(props.connector, true)),
+  })
+)(StatusBar);
diff --git a/devtools/client/netmonitor/src/components/StatusCode.js b/devtools/client/netmonitor/src/components/StatusCode.js
new file mode 100644
index 0000000000..7f4f082636
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatusCode.js
@@ -0,0 +1,129 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { div } = dom;
+
+const UPDATED_STATUS_PROPS = [
+  "fromCache",
+  "fromServiceWorker",
+  "status",
+  "statusText",
+];
+
+/**
+ * Status code component
+ * Displays HTTP status code icon
+ * Used in RequestListColumnStatus and HeadersPanel
+ */
+class StatusCode extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_STATUS_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const { item } = this.props;
+    const { fromCache, fromServiceWorker, status, statusText, blockedReason } =
+      item;
+    let code;
+
+    if (status) {
+      if (fromCache) {
+        code = "cached";
+      } else if (fromServiceWorker) {
+        code = "service worker";
+      } else {
+        code = status;
+      }
+    }
+
+    if (blockedReason) {
+      return div(
+        {
+          className:
+            "requests-list-status-code status-code status-code-blocked",
+          title: L10N.getStr("networkMenu.blockedTooltip"),
+        },
+        div({
+          className: "status-code-blocked-icon",
+        })
+      );
+    }
+
+    // `data-code` refers to the status-code
+    // `data-status-code` can be one of "cached", "service worker"
+    // or the status-code itself
+    // For example - if a resource is cached, `data-code` would be 200
+    // and the `data-status-code` would be "cached"
+    return div(
+      {
+        className: "requests-list-status-code status-code",
+        onMouseOver({ target }) {
+          if (status && statusText && !target.title) {
+            target.title = getStatusTooltip(item);
+          }
+        },
+        "data-status-code": code,
+        "data-code": status,
+      },
+      status
+    );
+  }
+}
+
+function getStatusTooltip(item) {
+  const { fromCache, fromServiceWorker, status, statusText } = item;
+  let title;
+  if (fromCache && fromServiceWorker) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.cachedworker",
+      status,
+      statusText
+    );
+  } else if (fromCache) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.cached",
+      status,
+      statusText
+    );
+  } else if (fromServiceWorker) {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.worker",
+      status,
+      statusText
+    );
+  } else {
+    title = L10N.getFormatStr(
+      "netmonitor.status.tooltip.simple",
+      status,
+      statusText
+    );
+  }
+  return title;
+}
+
+module.exports = StatusCode;
diff --git a/devtools/client/netmonitor/src/components/TabboxPanel.js b/devtools/client/netmonitor/src/components/TabboxPanel.js
new file mode 100644
index 0000000000..9395b53307
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/TabboxPanel.js
@@ -0,0 +1,242 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Components
+const Tabbar = createFactory(
+  require("resource://devtools/client/shared/components/tabs/TabBar.js")
+);
+const TabPanel = createFactory(
+  require("resource://devtools/client/shared/components/tabs/Tabs.js").TabPanel
+);
+const CookiesPanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/CookiesPanel.js")
+);
+const HeadersPanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/HeadersPanel.js")
+);
+const RequestPanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/RequestPanel.js")
+);
+const CachePanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/CachePanel.js")
+);
+const ResponsePanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/ResponsePanel.js")
+);
+const SecurityPanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/SecurityPanel.js")
+);
+const StackTracePanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/StackTracePanel.js")
+);
+const TimingsPanel = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/TimingsPanel.js")
+);
+
+const COLLAPSE_DETAILS_PANE = L10N.getStr("collapseDetailsPane");
+const ALL_TABS_MENU_BUTTON_TOOLTIP = L10N.getStr("allTabsMenuButton.tooltip");
+const CACHE_TITLE = L10N.getStr("netmonitor.tab.cache");
+const COOKIES_TITLE = L10N.getStr("netmonitor.tab.cookies");
+const HEADERS_TITLE = L10N.getStr("netmonitor.tab.headers");
+const REQUEST_TITLE = L10N.getStr("netmonitor.tab.request");
+const RESPONSE_TITLE = L10N.getStr("netmonitor.tab.response");
+const SECURITY_TITLE = L10N.getStr("netmonitor.tab.security");
+const STACK_TRACE_TITLE = L10N.getStr("netmonitor.tab.stackTrace");
+const TIMINGS_TITLE = L10N.getStr("netmonitor.tab.timings");
+
+/**
+ * Tabbox panel component
+ * Display the network request details
+ */
+class TabboxPanel extends Component {
+  static get propTypes() {
+    return {
+      activeTabId: PropTypes.string,
+      cloneSelectedRequest: PropTypes.func,
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object,
+      selectTab: PropTypes.func.isRequired,
+      sourceMapURLService: PropTypes.object,
+      hideToggleButton: PropTypes.bool,
+      toggleNetworkDetails: PropTypes.func,
+      openNetworkDetails: PropTypes.func.isRequired,
+      showMessagesView: PropTypes.bool,
+      targetSearchResult: PropTypes.object,
+    };
+  }
+  static get defaultProps() {
+    return {
+      showMessagesView: true,
+    };
+  }
+  componentDidMount() {
+    this.closeOnEscRef = this.closeOnEsc.bind(this);
+    window.addEventListener("keydown", this.closeOnEscRef);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.closeOnEscRef);
+  }
+
+  closeOnEsc(event) {
+    if (event.key == "Escape") {
+      event.preventDefault();
+      this.props.openNetworkDetails(false);
+    }
+  }
+
+  render() {
+    const {
+      activeTabId,
+      cloneSelectedRequest = () => {},
+      connector,
+      hideToggleButton,
+      openLink,
+      request,
+      selectTab,
+      sourceMapURLService,
+      toggleNetworkDetails,
+      targetSearchResult,
+    } = this.props;
+
+    if (!request) {
+      return null;
+    }
+
+    const isWs = request.cause.type === "websocket";
+    const isSse = request.isEventStream;
+
+    const showMessagesView = (isWs || isSse) && this.props.showMessagesView;
+
+    return Tabbar(
+      {
+        activeTabId,
+        menuDocument: window.parent.document,
+        onSelect: selectTab,
+        renderOnlySelected: true,
+        showAllTabsMenu: true,
+        allTabsMenuButtonTooltip: ALL_TABS_MENU_BUTTON_TOOLTIP,
+        sidebarToggleButton: hideToggleButton
+          ? null
+          : {
+              collapsed: false,
+              collapsePaneTitle: COLLAPSE_DETAILS_PANE,
+              expandPaneTitle: "",
+              onClick: toggleNetworkDetails,
+            },
+      },
+      TabPanel(
+        {
+          id: PANELS.HEADERS,
+          title: HEADERS_TITLE,
+          className: "panel-with-code",
+        },
+        HeadersPanel({
+          cloneSelectedRequest,
+          connector,
+          openLink,
+          request,
+          targetSearchResult,
+        })
+      ),
+      TabPanel(
+        {
+          id: PANELS.COOKIES,
+          title: COOKIES_TITLE,
+          className: "panel-with-code",
+        },
+        CookiesPanel({
+          connector,
+          openLink,
+          request,
+          targetSearchResult,
+        })
+      ),
+      TabPanel(
+        {
+          id: PANELS.REQUEST,
+          title: REQUEST_TITLE,
+          className: "panel-with-code",
+        },
+        RequestPanel({
+          connector,
+          openLink,
+          request,
+          targetSearchResult,
+        })
+      ),
+      TabPanel(
+        {
+          id: PANELS.RESPONSE,
+          title: RESPONSE_TITLE,
+          className: "panel-with-code",
+        },
+        ResponsePanel({
+          request,
+          openLink,
+          connector,
+          showMessagesView,
+          targetSearchResult,
+        })
+      ),
+      (request.fromCache || request.status == "304") &&
+        TabPanel(
+          {
+            id: PANELS.CACHE,
+            title: CACHE_TITLE,
+          },
+          CachePanel({ request, openLink, connector })
+        ),
+      TabPanel(
+        {
+          id: PANELS.TIMINGS,
+          title: TIMINGS_TITLE,
+        },
+        TimingsPanel({
+          connector,
+          request,
+        })
+      ),
+      request.cause?.stacktraceAvailable &&
+        TabPanel(
+          {
+            id: PANELS.STACK_TRACE,
+            title: STACK_TRACE_TITLE,
+            className: "panel-with-code",
+          },
+          StackTracePanel({ connector, openLink, request, sourceMapURLService })
+        ),
+      request.securityState &&
+        request.securityState !== "insecure" &&
+        TabPanel(
+          {
+            id: PANELS.SECURITY,
+            title: SECURITY_TITLE,
+          },
+          SecurityPanel({
+            connector,
+            openLink,
+            request,
+          })
+        )
+    );
+  }
+}
+
+module.exports = TabboxPanel;
diff --git a/devtools/client/netmonitor/src/components/Toolbar.js b/devtools/client/netmonitor/src/components/Toolbar.js
new file mode 100644
index 0000000000..0da3d826c2
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -0,0 +1,688 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  FILTER_SEARCH_DELAY,
+  FILTER_TAGS,
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getDisplayedRequests,
+  getRecordingState,
+  getTypeFilteredRequests,
+  getSelectedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  autocompleteProvider,
+} = require("resource://devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+
+// MDN
+const {
+  getFilterBoxURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+const LEARN_MORE_URL = getFilterBoxURL();
+
+// Components
+const NetworkThrottlingMenu = createFactory(
+  require("resource://devtools/client/shared/components/throttling/NetworkThrottlingMenu.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+const { button, div, input, label, span, hr } = dom;
+
+// Localization
+const FILTER_KEY_SHORTCUT = L10N.getStr(
+  "netmonitor.toolbar.filterFreetext.key"
+);
+const SEARCH_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.search.key");
+const SEARCH_PLACE_HOLDER = L10N.getStr(
+  "netmonitor.toolbar.filterFreetext.label"
+);
+const COPY_KEY_SHORTCUT = L10N.getStr("netmonitor.toolbar.copy.key");
+const TOOLBAR_CLEAR = L10N.getStr("netmonitor.toolbar.clear");
+const TOOLBAR_TOGGLE_RECORDING = L10N.getStr(
+  "netmonitor.toolbar.toggleRecording"
+);
+const TOOLBAR_HTTP_CUSTOM_REQUEST = L10N.getStr(
+  "netmonitor.toolbar.HTTPCustomRequest"
+);
+const TOOLBAR_SEARCH = L10N.getStr("netmonitor.toolbar.search");
+const TOOLBAR_BLOCKING = L10N.getStr("netmonitor.toolbar.requestBlocking");
+const LEARN_MORE_TITLE = L10N.getStr(
+  "netmonitor.toolbar.filterFreetext.learnMore"
+);
+
+// Preferences
+const DEVTOOLS_DISABLE_CACHE_PREF = "devtools.cache.disabled";
+const DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF = "devtools.netmonitor.persistlog";
+const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce(
+  (o, tag) =>
+    Object.assign(o, {
+      [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`),
+    }),
+  {}
+);
+const DISABLE_CACHE_TOOLTIP = L10N.getStr(
+  "netmonitor.toolbar.disableCache.tooltip"
+);
+const DISABLE_CACHE_LABEL = L10N.getStr(
+  "netmonitor.toolbar.disableCache.label"
+);
+
+const MenuButton = createFactory(
+  require("resource://devtools/client/shared/components/menu/MenuButton.js")
+);
+
+loader.lazyGetter(this, "MenuItem", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/menu/MenuItem.js")
+  );
+});
+
+loader.lazyGetter(this, "MenuList", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/menu/MenuList.js")
+  );
+});
+
+// Menu
+loader.lazyRequireGetter(
+  this,
+  "HarMenuUtils",
+  "resource://devtools/client/netmonitor/src/har/har-menu-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "copyString",
+  "resource://devtools/shared/platform/clipboard.js",
+  true
+);
+
+// Throttling
+const Types = require("resource://devtools/client/shared/components/throttling/types.js");
+const {
+  changeNetworkThrottling,
+} = require("resource://devtools/client/shared/components/throttling/actions.js");
+
+/**
+ * Network monitor toolbar component.
+ *
+ * Toolbar contains a set of useful tools to control network requests
+ * as well as set of filters for filtering the content.
+ */
+class Toolbar extends Component {
+  static get propTypes() {
+    return {
+      actions: PropTypes.object.isRequired,
+      connector: PropTypes.object.isRequired,
+      toggleRecording: PropTypes.func.isRequired,
+      recording: PropTypes.bool.isRequired,
+      clearRequests: PropTypes.func.isRequired,
+      // List of currently displayed requests (i.e. filtered & sorted).
+      displayedRequests: PropTypes.array.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
+      setRequestFilterText: PropTypes.func.isRequired,
+      enablePersistentLogs: PropTypes.func.isRequired,
+      togglePersistentLogs: PropTypes.func.isRequired,
+      persistentLogsEnabled: PropTypes.bool.isRequired,
+      disableBrowserCache: PropTypes.func.isRequired,
+      toggleBrowserCache: PropTypes.func.isRequired,
+      browserCacheDisabled: PropTypes.bool.isRequired,
+      toggleRequestFilterType: PropTypes.func.isRequired,
+      filteredRequests: PropTypes.array.isRequired,
+      // Set to true if there is enough horizontal space
+      // and the toolbar needs just one row.
+      singleRow: PropTypes.bool.isRequired,
+      // Callback for opening split console.
+      openSplitConsole: PropTypes.func,
+      networkThrottling: PropTypes.shape(Types.networkThrottling).isRequired,
+      // Executed when throttling changes (through toolbar button).
+      onChangeNetworkThrottling: PropTypes.func.isRequired,
+      toggleSearchPanel: PropTypes.func.isRequired,
+      toggleHTTPCustomRequestPanel: PropTypes.func.isRequired,
+      networkActionBarOpen: PropTypes.bool,
+      toggleRequestBlockingPanel: PropTypes.func.isRequired,
+      networkActionBarSelectedPanel: PropTypes.string.isRequired,
+      hasBlockedRequests: PropTypes.bool.isRequired,
+      selectedRequest: PropTypes.object,
+      toolboxDoc: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.autocompleteProvider = this.autocompleteProvider.bind(this);
+    this.onSearchBoxFocusKeyboardShortcut =
+      this.onSearchBoxFocusKeyboardShortcut.bind(this);
+    this.onSearchBoxFocus = this.onSearchBoxFocus.bind(this);
+    this.toggleRequestFilterType = this.toggleRequestFilterType.bind(this);
+    this.updatePersistentLogsEnabled =
+      this.updatePersistentLogsEnabled.bind(this);
+    this.updateBrowserCacheDisabled =
+      this.updateBrowserCacheDisabled.bind(this);
+  }
+
+  componentDidMount() {
+    Services.prefs.addObserver(
+      DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+      this.updatePersistentLogsEnabled
+    );
+    Services.prefs.addObserver(
+      DEVTOOLS_DISABLE_CACHE_PREF,
+      this.updateBrowserCacheDisabled
+    );
+
+    this.shortcuts = new KeyShortcuts({
+      window,
+    });
+
+    this.shortcuts.on(SEARCH_KEY_SHORTCUT, event => {
+      event.preventDefault();
+      this.props.toggleSearchPanel();
+    });
+
+    this.shortcuts.on(COPY_KEY_SHORTCUT, () => {
+      if (this.props.selectedRequest && this.props.selectedRequest.url) {
+        copyString(this.props.selectedRequest.url);
+      }
+    });
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.persistentLogsEnabled !== nextProps.persistentLogsEnabled ||
+      this.props.browserCacheDisabled !== nextProps.browserCacheDisabled ||
+      this.props.recording !== nextProps.recording ||
+      this.props.networkActionBarOpen !== nextProps.networkActionBarOpen ||
+      this.props.singleRow !== nextProps.singleRow ||
+      !Object.is(this.props.requestFilterTypes, nextProps.requestFilterTypes) ||
+      this.props.networkThrottling !== nextProps.networkThrottling ||
+      // Filtered requests are useful only when searchbox is focused
+      !!(this.refs.searchbox && this.refs.searchbox.focused) ||
+      this.props.networkActionBarSelectedPanel !==
+        nextProps.networkActionBarSelectedPanel ||
+      this.props.hasBlockedRequests !== nextProps.hasBlockedRequests
+    );
+  }
+
+  componentWillUnmount() {
+    Services.prefs.removeObserver(
+      DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+      this.updatePersistentLogsEnabled
+    );
+    Services.prefs.removeObserver(
+      DEVTOOLS_DISABLE_CACHE_PREF,
+      this.updateBrowserCacheDisabled
+    );
+
+    if (this.shortcuts) {
+      this.shortcuts.destroy();
+    }
+  }
+
+  toggleRequestFilterType(evt) {
+    if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
+      return;
+    }
+    this.props.toggleRequestFilterType(evt.target.dataset.key);
+  }
+
+  updatePersistentLogsEnabled() {
+    // Make sure the UI is updated when the pref changes.
+    // It might happen when the user changed it through about:config or
+    // through another Toolbox instance (opened in another browser tab).
+    // In such case, skip telemetry recordings.
+    this.props.enablePersistentLogs(
+      Services.prefs.getBoolPref(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF),
+      true
+    );
+  }
+
+  updateBrowserCacheDisabled() {
+    this.props.disableBrowserCache(
+      Services.prefs.getBoolPref(DEVTOOLS_DISABLE_CACHE_PREF)
+    );
+  }
+
+  autocompleteProvider(filter) {
+    return autocompleteProvider(filter, this.props.filteredRequests);
+  }
+
+  onSearchBoxFocusKeyboardShortcut(event) {
+    // Don't take focus when the keyboard shortcut is triggered in a CodeMirror instance,
+    // so the CodeMirror search UI is displayed.
+    return !!event.target.closest(".CodeMirror");
+  }
+
+  onSearchBoxFocus() {
+    const { connector, filteredRequests } = this.props;
+
+    // Fetch responseCookies & responseHeaders for building autocomplete list
+    filteredRequests.forEach(request => {
+      fetchNetworkUpdatePacket(connector.requestData, request, [
+        "responseCookies",
+        "responseHeaders",
+      ]);
+    });
+  }
+
+  /**
+   * Render a separator.
+   */
+  renderSeparator() {
+    return span({ className: "devtools-separator" });
+  }
+
+  /**
+   * Render a clear button.
+   */
+  renderClearButton(clearRequests) {
+    return button({
+      className:
+        "devtools-button devtools-clear-icon requests-list-clear-button",
+      title: TOOLBAR_CLEAR,
+      onClick: clearRequests,
+    });
+  }
+
+  /**
+   * Render a ToggleRecording button.
+   */
+  renderToggleRecordingButton(recording, toggleRecording) {
+    // Calculate class-list for toggle recording button.
+    // The button has two states: pause/play.
+    const toggleRecordingButtonClass = [
+      "devtools-button",
+      "requests-list-pause-button",
+      recording ? "devtools-pause-icon" : "devtools-play-icon",
+    ].join(" ");
+
+    return button({
+      className: toggleRecordingButtonClass,
+      title: TOOLBAR_TOGGLE_RECORDING,
+      onClick: toggleRecording,
+    });
+  }
+
+  /**
+   * Render a blocking button.
+   */
+  renderBlockingButton(toggleSearchPanel) {
+    const {
+      networkActionBarOpen,
+      toggleRequestBlockingPanel,
+      networkActionBarSelectedPanel,
+      hasBlockedRequests,
+    } = this.props;
+
+    // The blocking feature is available behind a pref.
+    if (
+      !Services.prefs.getBoolPref(
+        "devtools.netmonitor.features.requestBlocking"
+      )
+    ) {
+      return null;
+    }
+
+    const className = ["devtools-button", "requests-list-blocking-button"];
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.BLOCKING
+    ) {
+      className.push("checked");
+    }
+
+    if (hasBlockedRequests) {
+      className.push("requests-list-blocking-button-enabled");
+    }
+
+    return button({
+      className: className.join(" "),
+      title: TOOLBAR_BLOCKING,
+      "aria-pressed": networkActionBarOpen,
+      onClick: toggleRequestBlockingPanel,
+    });
+  }
+
+  /**
+   * Render a search button.
+   */
+  renderSearchButton(toggleSearchPanel) {
+    const { networkActionBarOpen, networkActionBarSelectedPanel } = this.props;
+
+    // The search feature is available behind a pref.
+    if (!Services.prefs.getBoolPref("devtools.netmonitor.features.search")) {
+      return null;
+    }
+
+    const className = [
+      "devtools-button",
+      "devtools-search-icon",
+      "requests-list-search-button",
+    ];
+
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.SEARCH
+    ) {
+      className.push("checked");
+    }
+
+    return button({
+      className: className.join(" "),
+      title: TOOLBAR_SEARCH,
+      "aria-pressed": networkActionBarOpen,
+      onClick: toggleSearchPanel,
+    });
+  }
+
+  /**
+   * Render a new HTTP Custom Request button.
+   */
+  renderHTTPCustomRequestButton() {
+    const {
+      networkActionBarOpen,
+      networkActionBarSelectedPanel,
+      toggleHTTPCustomRequestPanel,
+    } = this.props;
+
+    // The new HTTP Custom Request feature is available behind a pref.
+    if (
+      !Services.prefs.getBoolPref(
+        "devtools.netmonitor.features.newEditAndResend"
+      )
+    ) {
+      return null;
+    }
+
+    const className = [
+      "devtools-button",
+      "devtools-http-custom-request-icon",
+      "requests-list-http-custom-request-button",
+    ];
+
+    if (
+      networkActionBarOpen &&
+      networkActionBarSelectedPanel === PANELS.HTTP_CUSTOM_REQUEST
+    ) {
+      className.push("checked");
+    }
+
+    return button({
+      className: className.join(" "),
+      title: TOOLBAR_HTTP_CUSTOM_REQUEST,
+      "aria-pressed": networkActionBarOpen,
+      onClick: toggleHTTPCustomRequestPanel,
+    });
+  }
+
+  /**
+   * Render filter buttons.
+   */
+  renderFilterButtons(requestFilterTypes) {
+    // Render list of filter-buttons.
+    const buttons = Object.entries(requestFilterTypes).map(([type, checked]) =>
+      button(
+        {
+          className: `devtools-togglebutton requests-list-filter-${type}-button`,
+          key: type,
+          onClick: this.toggleRequestFilterType,
+          onKeyDown: this.toggleRequestFilterType,
+          "aria-pressed": checked,
+          "data-key": type,
+        },
+        TOOLBAR_FILTER_LABELS[type]
+      )
+    );
+    return div({ className: "requests-list-filter-buttons" }, buttons);
+  }
+
+  /**
+   * Render a Cache checkbox.
+   */
+  renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache) {
+    return label(
+      {
+        className: "devtools-checkbox-label devtools-cache-checkbox",
+        title: DISABLE_CACHE_TOOLTIP,
+      },
+      input({
+        id: "devtools-cache-checkbox",
+        className: "devtools-checkbox",
+        type: "checkbox",
+        checked: browserCacheDisabled,
+        onChange: toggleBrowserCache,
+      }),
+      DISABLE_CACHE_LABEL
+    );
+  }
+
+  /**
+   * Render network throttling menu button.
+   */
+  renderThrottlingMenu() {
+    const { networkThrottling, onChangeNetworkThrottling } = this.props;
+
+    return NetworkThrottlingMenu({
+      networkThrottling,
+      onChangeNetworkThrottling,
+    });
+  }
+
+  /**
+   * Render filter Searchbox.
+   */
+  renderFilterBox(setRequestFilterText) {
+    return SearchBox({
+      delay: FILTER_SEARCH_DELAY,
+      keyShortcut: FILTER_KEY_SHORTCUT,
+      placeholder: SEARCH_PLACE_HOLDER,
+      type: "filter",
+      ref: "searchbox",
+      onChange: setRequestFilterText,
+      onFocusKeyboardShortcut: this.onSearchBoxFocusKeyboardShortcut,
+      onFocus: this.onSearchBoxFocus,
+      autocompleteProvider: this.autocompleteProvider,
+      learnMoreUrl: LEARN_MORE_URL,
+      learnMoreTitle: LEARN_MORE_TITLE,
+    });
+  }
+
+  renderSettingsMenuButton() {
+    const { toolboxDoc } = this.props;
+    return MenuButton(
+      {
+        menuId: "netmonitor-settings-menu-button",
+        toolboxDoc,
+        className: "devtools-button netmonitor-settings-menu-button",
+        title: L10N.getStr("netmonitor.settings.menuTooltip"),
+      },
+      // We pass the children in a function so we don't require the MenuItem and MenuList
+      // components until we need to display them (i.e. when the button is clicked).
+      () => this.renderSettingsMenuItems()
+    );
+  }
+
+  renderSettingsMenuItems() {
+    const {
+      actions,
+      connector,
+      displayedRequests,
+      openSplitConsole,
+      persistentLogsEnabled,
+      togglePersistentLogs,
+    } = this.props;
+
+    const menuItems = [
+      MenuItem({
+        key: "netmonitor-settings-persist-item",
+        className: "menu-item netmonitor-settings-persist-item",
+        type: "checkbox",
+        checked: persistentLogsEnabled,
+        label: L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label"),
+        tooltip: L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip"),
+        onClick: () => togglePersistentLogs(),
+      }),
+      hr({ key: "netmonitor-settings-har-divider" }),
+      MenuItem({
+        key: "request-list-context-import-har",
+        className: "menu-item netmonitor-settings-import-har-item",
+        label: L10N.getStr("netmonitor.har.importHarDialogTitle"),
+        tooltip: L10N.getStr("netmonitor.settings.importHarTooltip"),
+        accesskey: L10N.getStr("netmonitor.context.importHar.accesskey"),
+        onClick: () => HarMenuUtils.openHarFile(actions, openSplitConsole),
+      }),
+      MenuItem({
+        key: "request-list-context-save-all-as-har",
+        className: "menu-item netmonitor-settings-save-har-item",
+        label: L10N.getStr("netmonitor.context.saveAllAsHar"),
+        accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
+        tooltip: L10N.getStr("netmonitor.settings.saveHarTooltip"),
+        disabled: !displayedRequests.length,
+        onClick: () => HarMenuUtils.saveAllAsHar(displayedRequests, connector),
+      }),
+      MenuItem({
+        key: "request-list-context-copy-all-as-har",
+        className: "menu-item netmonitor-settings-copy-har-item",
+        label: L10N.getStr("netmonitor.context.copyAllAsHar"),
+        accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
+        tooltip: L10N.getStr("netmonitor.settings.copyHarTooltip"),
+        disabled: !displayedRequests.length,
+        onClick: () => HarMenuUtils.copyAllAsHar(displayedRequests, connector),
+      }),
+    ];
+
+    return MenuList({ id: "netmonitor-settings-menu-list" }, menuItems);
+  }
+
+  render() {
+    const {
+      toggleRecording,
+      clearRequests,
+      requestFilterTypes,
+      setRequestFilterText,
+      toggleBrowserCache,
+      browserCacheDisabled,
+      recording,
+      singleRow,
+      toggleSearchPanel,
+    } = this.props;
+
+    // Render the entire toolbar.
+    // dock at bottom or dock at side has different layout
+    return singleRow
+      ? span(
+          { id: "netmonitor-toolbar-container" },
+          span(
+            { className: "devtools-toolbar devtools-input-toolbar" },
+            this.renderClearButton(clearRequests),
+            this.renderSeparator(),
+            this.renderFilterBox(setRequestFilterText),
+            this.renderSeparator(),
+            this.renderToggleRecordingButton(recording, toggleRecording),
+            this.renderHTTPCustomRequestButton(),
+            this.renderSearchButton(toggleSearchPanel),
+            this.renderBlockingButton(toggleSearchPanel),
+            this.renderSeparator(),
+            this.renderFilterButtons(requestFilterTypes),
+            this.renderSeparator(),
+            this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
+            this.renderSeparator(),
+            this.renderThrottlingMenu(),
+            this.renderSeparator(),
+            this.renderSettingsMenuButton()
+          )
+        )
+      : span(
+          { id: "netmonitor-toolbar-container" },
+          span(
+            { className: "devtools-toolbar devtools-input-toolbar" },
+            this.renderClearButton(clearRequests),
+            this.renderSeparator(),
+            this.renderFilterBox(setRequestFilterText),
+            this.renderSeparator(),
+            this.renderToggleRecordingButton(recording, toggleRecording),
+            this.renderHTTPCustomRequestButton(),
+            this.renderSearchButton(toggleSearchPanel),
+            this.renderBlockingButton(toggleSearchPanel),
+            this.renderSeparator(),
+            this.renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache),
+            this.renderSeparator(),
+            this.renderThrottlingMenu(),
+            this.renderSeparator(),
+            this.renderSettingsMenuButton()
+          ),
+          span(
+            { className: "devtools-toolbar devtools-input-toolbar" },
+            this.renderFilterButtons(requestFilterTypes)
+          )
+        );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    browserCacheDisabled: state.ui.browserCacheDisabled,
+    displayedRequests: getDisplayedRequests(state),
+    hasBlockedRequests:
+      state.requestBlocking.blockingEnabled &&
+      state.requestBlocking.blockedUrls.some(({ enabled }) => enabled),
+    filteredRequests: getTypeFilteredRequests(state),
+    persistentLogsEnabled: state.ui.persistentLogsEnabled,
+    recording: getRecordingState(state),
+    requestFilterTypes: state.filters.requestFilterTypes,
+    networkThrottling: state.networkThrottling,
+    networkActionBarOpen: state.ui.networkActionOpen,
+    networkActionBarSelectedPanel: state.ui.selectedActionBarTabId || "",
+    selectedRequest: getSelectedRequest(state),
+  }),
+  dispatch => ({
+    clearRequests: () => dispatch(Actions.clearRequests()),
+    disableBrowserCache: disabled =>
+      dispatch(Actions.disableBrowserCache(disabled)),
+    enablePersistentLogs: (enabled, skipTelemetry) =>
+      dispatch(Actions.enablePersistentLogs(enabled, skipTelemetry)),
+    setRequestFilterText: text => dispatch(Actions.setRequestFilterText(text)),
+    toggleBrowserCache: () => dispatch(Actions.toggleBrowserCache()),
+    toggleRecording: () => dispatch(Actions.toggleRecording()),
+    togglePersistentLogs: () => dispatch(Actions.togglePersistentLogs()),
+    toggleRequestFilterType: type =>
+      dispatch(Actions.toggleRequestFilterType(type)),
+    onChangeNetworkThrottling: (enabled, profile) =>
+      dispatch(changeNetworkThrottling(enabled, profile)),
+    toggleHTTPCustomRequestPanel: () =>
+      dispatch(Actions.toggleHTTPCustomRequestPanel()),
+    toggleSearchPanel: () => dispatch(Actions.toggleSearchPanel()),
+    toggleRequestBlockingPanel: () =>
+      dispatch(Actions.toggleRequestBlockingPanel()),
+  })
+)(Toolbar);
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnData.js b/devtools/client/netmonitor/src/components/messages/ColumnData.js
new file mode 100644
index 0000000000..2c4b7c1b60
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnData.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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  limitTooltipLength,
+} = require("resource://devtools/client/netmonitor/src/utils/tooltips.js");
+
+/**
+ * Renders the "Data" column of a message.
+ */
+class ColumnData extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      connector: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { type, payload } = this.props.item;
+    // type could be undefined for sse channel.
+    const typeLabel = type ? L10N.getStr(`netmonitor.ws.type.${type}`) : null;
+
+    // If payload is a LongStringActor object, we show the first 1000 characters
+    const displayedPayload = payload.initial ? payload.initial : payload;
+
+    const frameTypeImg = type
+      ? dom.img({
+          alt: typeLabel,
+          className: `message-list-type-icon message-list-type-icon-${type}`,
+          src: `chrome://devtools/content/netmonitor/src/assets/icons/arrow-up.svg`,
+        })
+      : null;
+
+    let title = limitTooltipLength(displayedPayload);
+    title = type ? typeLabel + " " + title : title;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-payload",
+        title,
+      },
+      frameTypeImg,
+      " " + displayedPayload
+    );
+  }
+}
+
+module.exports = ColumnData;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnEventName.js b/devtools/client/netmonitor/src/components/messages/ColumnEventName.js
new file mode 100644
index 0000000000..812de4d40c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnEventName.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "EventName" column of a message.
+ */
+class ColumnEventName extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.eventName !== nextProps.item.eventName;
+  }
+
+  render() {
+    const { eventName } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-eventName",
+        title: eventName,
+      },
+      eventName
+    );
+  }
+}
+
+module.exports = ColumnEventName;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnFinBit.js b/devtools/client/netmonitor/src/components/messages/ColumnFinBit.js
new file mode 100644
index 0000000000..8f9a1d9e0b
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnFinBit.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "FinBit" column of a message.
+ */
+class ColumnFinBit extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.finBit !== nextProps.item.finBit;
+  }
+
+  render() {
+    const { finBit } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-finBit",
+        title: finBit.toString(),
+      },
+      finBit.toString()
+    );
+  }
+}
+
+module.exports = ColumnFinBit;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnLastEventId.js b/devtools/client/netmonitor/src/components/messages/ColumnLastEventId.js
new file mode 100644
index 0000000000..2c5a65313a
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnLastEventId.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "LastEventId" column of a message.
+ */
+class ColumnLastEventId extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.lastEventId !== nextProps.item.lastEventId;
+  }
+
+  render() {
+    const { lastEventId } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-lastEventId",
+        title: lastEventId,
+      },
+      lastEventId
+    );
+  }
+}
+
+module.exports = ColumnLastEventId;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnMaskBit.js b/devtools/client/netmonitor/src/components/messages/ColumnMaskBit.js
new file mode 100644
index 0000000000..20330ebc92
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnMaskBit.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "MaskBit" column of a message.
+ */
+class ColumnMaskBit extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.maskBit !== nextProps.item.maskBit;
+  }
+
+  render() {
+    const { maskBit } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-maskBit",
+        title: maskBit.toString(),
+      },
+      maskBit.toString()
+    );
+  }
+}
+
+module.exports = ColumnMaskBit;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnOpCode.js b/devtools/client/netmonitor/src/components/messages/ColumnOpCode.js
new file mode 100644
index 0000000000..2fcdc85ed0
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnOpCode.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "OpCode" column of a message.
+ */
+class ColumnOpCode extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.opCode !== nextProps.item.opCode;
+  }
+
+  render() {
+    const { opCode } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-opCode",
+        title: opCode,
+      },
+      opCode
+    );
+  }
+}
+
+module.exports = ColumnOpCode;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnRetry.js b/devtools/client/netmonitor/src/components/messages/ColumnRetry.js
new file mode 100644
index 0000000000..e1fb63d706
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnRetry.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "Retry" column of a message.
+ */
+class ColumnRetry extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.retry !== nextProps.item.retry;
+  }
+
+  render() {
+    const { retry } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-retry",
+        title: retry,
+      },
+      retry
+    );
+  }
+}
+
+module.exports = ColumnRetry;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnSize.js b/devtools/client/netmonitor/src/components/messages/ColumnSize.js
new file mode 100644
index 0000000000..4f00e1a521
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnSize.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedSize,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+/**
+ * Renders the "Size" column of a message.
+ */
+class ColumnSize extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.payload !== nextProps.item.payload;
+  }
+
+  render() {
+    const { payload } = this.props.item;
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-size",
+        title: getFormattedSize(payload.length),
+      },
+      getFormattedSize(payload.length)
+    );
+  }
+}
+
+module.exports = ColumnSize;
diff --git a/devtools/client/netmonitor/src/components/messages/ColumnTime.js b/devtools/client/netmonitor/src/components/messages/ColumnTime.js
new file mode 100644
index 0000000000..594a6b705b
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/ColumnTime.js
@@ -0,0 +1,56 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * Renders the "Time" column of a message.
+ */
+class ColumnTime extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.item.type !== nextProps.item.type ||
+      this.props.item.timeStamp !== nextProps.item.timeStamp
+    );
+  }
+
+  /**
+   * Format a DOMHighResTimeStamp (in microseconds) as HH:mm:ss.SSS
+   * @param {number} highResTimeStamp
+   */
+  formatTime(highResTimeStamp) {
+    const date = new Date(highResTimeStamp / 1000);
+    const hh = date.getHours().toString().padStart(2, "0");
+    const mm = date.getMinutes().toString().padStart(2, "0");
+    const ss = date.getSeconds().toString().padStart(2, "0");
+    const mmm = date.getMilliseconds().toString().padStart(3, "0");
+    return `${hh}:${mm}:${ss}.${mmm}`;
+  }
+
+  render() {
+    const label = this.formatTime(this.props.item.timeStamp);
+
+    return dom.td(
+      {
+        className: "message-list-column message-list-time",
+        title: label,
+      },
+      label
+    );
+  }
+}
+
+module.exports = ColumnTime;
diff --git a/devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js b/devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js
new file mode 100644
index 0000000000..b2cd2d346d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js
@@ -0,0 +1,122 @@
+/* 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 {
+  PureComponent,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+// Menu
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+
+class MessageFilterMenu extends PureComponent {
+  static get propTypes() {
+    return {
+      messageFilterType: PropTypes.string.isRequired,
+      toggleMessageFilterType: PropTypes.func.isRequired,
+      // showControlFrames decides if control frames
+      // will be shown in messages panel
+      showControlFrames: PropTypes.bool.isRequired,
+      // toggleControlFrames toggles the value for showControlFrames
+      toggleControlFrames: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onShowFilterMenu = this.onShowFilterMenu.bind(this);
+  }
+
+  onShowFilterMenu(event) {
+    const {
+      messageFilterType,
+      toggleMessageFilterType,
+      showControlFrames,
+      toggleControlFrames,
+    } = this.props;
+
+    const menuItems = [
+      {
+        id: "message-list-context-filter-all",
+        label: L10N.getStr("netmonitor.ws.context.all"),
+        accesskey: L10N.getStr("netmonitor.ws.context.all.accesskey"),
+        type: "checkbox",
+        checked: messageFilterType === "all",
+        click: () => {
+          toggleMessageFilterType("all");
+        },
+      },
+      {
+        id: "message-list-context-filter-sent",
+        label: L10N.getStr("netmonitor.ws.context.sent"),
+        accesskey: L10N.getStr("netmonitor.ws.context.sent.accesskey"),
+        type: "checkbox",
+        checked: messageFilterType === "sent",
+        click: () => {
+          toggleMessageFilterType("sent");
+        },
+      },
+      {
+        id: "message-list-context-filter-received",
+        label: L10N.getStr("netmonitor.ws.context.received"),
+        accesskey: L10N.getStr("netmonitor.ws.context.received.accesskey"),
+        type: "checkbox",
+        checked: messageFilterType === "received",
+        click: () => {
+          toggleMessageFilterType("received");
+        },
+      },
+      {
+        type: "separator",
+      },
+      {
+        id: "message-list-context-filter-controlFrames",
+        label: L10N.getStr("netmonitor.ws.context.controlFrames"),
+        accesskey: L10N.getStr("netmonitor.ws.context.controlFrames.accesskey"),
+        type: "checkbox",
+        checked: showControlFrames,
+        click: () => {
+          toggleControlFrames();
+        },
+      },
+    ];
+
+    showMenu(menuItems, { button: event.target });
+  }
+
+  render() {
+    const { messageFilterType, showControlFrames } = this.props;
+    const messageFilterTypeTitle = L10N.getStr(
+      `netmonitor.ws.context.${messageFilterType}`
+    );
+    const title =
+      messageFilterTypeTitle +
+      (showControlFrames
+        ? " (" + L10N.getStr(`netmonitor.ws.context.controlFrames`) + ")"
+        : "");
+
+    return dom.button(
+      {
+        id: "frame-filter-menu",
+        className: "devtools-button devtools-dropdown-button",
+        title,
+        onClick: this.onShowFilterMenu,
+      },
+      dom.span({ className: "title" }, title)
+    );
+  }
+}
+
+module.exports = MessageFilterMenu;
diff --git a/devtools/client/netmonitor/src/components/messages/MessageListContent.js b/devtools/client/netmonitor/src/components/messages/MessageListContent.js
new file mode 100644
index 0000000000..e75830bf99
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageListContent.js
@@ -0,0 +1,405 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const {
+  getDisplayedMessages,
+  isCurrentChannelClosed,
+  getClosedConnectionDetails,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { table, tbody, tr, td, div, input, label, hr, p } = dom;
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const MESSAGES_EMPTY_TEXT = L10N.getStr("messagesEmptyText");
+const TOGGLE_MESSAGES_TRUNCATION = L10N.getStr("toggleMessagesTruncation");
+const TOGGLE_MESSAGES_TRUNCATION_TITLE = L10N.getStr(
+  "toggleMessagesTruncation.title"
+);
+const CONNECTION_CLOSED_TEXT = L10N.getStr("netmonitor.ws.connection.closed");
+const {
+  CHANNEL_TYPE,
+  WEB_SOCKET_OPCODE,
+  MESSAGE_HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+
+const {
+  getSelectedMessage,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const MessageListContextMenu = require("resource://devtools/client/netmonitor/src/components/messages/MessageListContextMenu.js");
+loader.lazyGetter(this, "MessageListHeader", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/MessageListHeader.js")
+  );
+});
+loader.lazyGetter(this, "MessageListItem", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/MessageListItem.js")
+  );
+});
+
+const LEFT_MOUSE_BUTTON = 0;
+
+/**
+ * Renders the actual contents of the message list.
+ */
+class MessageListContent extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      startPanelContainer: PropTypes.object,
+      messages: PropTypes.array,
+      selectedMessage: PropTypes.object,
+      selectMessage: PropTypes.func.isRequired,
+      columns: PropTypes.object.isRequired,
+      isClosed: PropTypes.bool.isRequired,
+      closedConnectionDetails: PropTypes.object,
+      channelId: PropTypes.number,
+      channelType: PropTypes.string,
+      onSelectMessageDelta: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.messagesLimit = Services.prefs.getIntPref(
+      "devtools.netmonitor.msg.displayed-messages.limit"
+    );
+    this.currentTruncatedNum = 0;
+    this.state = {
+      checked: false,
+    };
+    this.pinnedToBottom = false;
+    this.initIntersectionObserver = false;
+    this.intersectionObserver = null;
+    this.toggleTruncationCheckBox = this.toggleTruncationCheckBox.bind(this);
+  }
+
+  componentDidMount() {
+    const { startPanelContainer } = this.props;
+    const { scrollAnchor } = this.refs;
+
+    if (scrollAnchor) {
+      // Always scroll to anchor when MessageListContent component first mounts.
+      scrollAnchor.scrollIntoView();
+    }
+    this.setupScrollToBottom(startPanelContainer, scrollAnchor);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { startPanelContainer, channelId } = this.props;
+    const { scrollAnchor } = this.refs;
+
+    // When messages are cleared, the previous scrollAnchor would be destroyed, so we need to reset this boolean.
+    if (!scrollAnchor) {
+      this.initIntersectionObserver = false;
+    }
+
+    // In addition to that, we need to reset currentTruncatedNum
+    if (prevProps.messages.length && this.props.messages.length === 0) {
+      this.currentTruncatedNum = 0;
+    }
+
+    // If a new connection is selected, scroll to anchor.
+    if (channelId !== prevProps.channelId && scrollAnchor) {
+      scrollAnchor.scrollIntoView();
+    }
+
+    // Do not autoscroll if the selection changed. This would cause
+    // the newly selected message to jump just after clicking in.
+    // (not user friendly)
+    //
+    // If the selection changed, we need to ensure that the newly
+    // selected message is properly scrolled into the visible area.
+    if (prevProps.selectedMessage === this.props.selectedMessage) {
+      this.setupScrollToBottom(startPanelContainer, scrollAnchor);
+    } else {
+      const head = document.querySelector("thead.message-list-headers-group");
+      const selectedRow = document.querySelector(
+        "tr.message-list-item.selected"
+      );
+
+      if (selectedRow) {
+        const rowRect = selectedRow.getBoundingClientRect();
+        const scrollableRect = startPanelContainer.getBoundingClientRect();
+        const headRect = head.getBoundingClientRect();
+
+        if (rowRect.top <= scrollableRect.top) {
+          selectedRow.scrollIntoView(true);
+
+          // We need to scroll a bit more to get the row out
+          // of the header. The header is sticky and overlaps
+          // part of the scrollable area.
+          startPanelContainer.scrollTop -= headRect.height;
+        } else if (rowRect.bottom > scrollableRect.bottom) {
+          selectedRow.scrollIntoView(false);
+        }
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    // Reset observables and boolean values.
+    const { scrollAnchor } = this.refs;
+
+    if (this.intersectionObserver) {
+      if (scrollAnchor) {
+        this.intersectionObserver.unobserve(scrollAnchor);
+      }
+      this.initIntersectionObserver = false;
+      this.pinnedToBottom = false;
+    }
+  }
+
+  setupScrollToBottom(startPanelContainer, scrollAnchor) {
+    if (startPanelContainer && scrollAnchor) {
+      // Initialize intersection observer.
+      if (!this.initIntersectionObserver) {
+        this.intersectionObserver = new IntersectionObserver(
+          () => {
+            // When scrollAnchor first comes into view, this.pinnedToBottom is set to true.
+            // When the anchor goes out of view, this callback function triggers again and toggles this.pinnedToBottom.
+            // Subsequent scroll into/out of view will toggle this.pinnedToBottom.
+            this.pinnedToBottom = !this.pinnedToBottom;
+          },
+          {
+            root: startPanelContainer,
+            threshold: 0.1,
+          }
+        );
+        if (this.intersectionObserver) {
+          this.intersectionObserver.observe(scrollAnchor);
+          this.initIntersectionObserver = true;
+        }
+      }
+
+      if (this.pinnedToBottom) {
+        scrollAnchor.scrollIntoView();
+      }
+    }
+  }
+
+  toggleTruncationCheckBox() {
+    this.setState({
+      checked: !this.state.checked,
+    });
+  }
+
+  onMouseDown(evt, item) {
+    if (evt.button === LEFT_MOUSE_BUTTON) {
+      this.props.selectMessage(item);
+    }
+  }
+
+  onContextMenu(evt, item) {
+    evt.preventDefault();
+    const { connector, channelType } = this.props;
+    this.contextMenu = new MessageListContextMenu({
+      connector,
+      showBinaryOptions:
+        channelType === CHANNEL_TYPE.WEB_SOCKET &&
+        item.opCode === WEB_SOCKET_OPCODE.BINARY,
+    });
+    this.contextMenu.open(evt, item);
+  }
+
+  /**
+   * Handler for keyboard events. For arrow up/down, page up/down, home/end,
+   * move the selection up or down.
+   */
+  onKeyDown(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    let delta;
+
+    switch (evt.key) {
+      case "ArrowUp":
+        delta = -1;
+        break;
+      case "ArrowDown":
+        delta = +1;
+        break;
+      case "PageUp":
+        delta = "PAGE_UP";
+        break;
+      case "PageDown":
+        delta = "PAGE_DOWN";
+        break;
+      case "Home":
+        delta = -Infinity;
+        break;
+      case "End":
+        delta = +Infinity;
+        break;
+    }
+
+    if (delta) {
+      this.props.onSelectMessageDelta(delta);
+    }
+  }
+
+  render() {
+    const {
+      messages,
+      selectedMessage,
+      connector,
+      columns,
+      isClosed,
+      closedConnectionDetails,
+    } = this.props;
+
+    if (messages.length === 0) {
+      return div(
+        { className: "empty-notice message-list-empty-notice" },
+        MESSAGES_EMPTY_TEXT
+      );
+    }
+
+    const visibleColumns = MESSAGE_HEADERS.filter(
+      header => columns[header.name]
+    ).map(col => col.name);
+
+    let displayedMessages;
+    let MESSAGES_TRUNCATED;
+    const shouldTruncate = messages.length > this.messagesLimit;
+    if (shouldTruncate) {
+      // If the checkbox is checked, we display all messages after the currentTruncatedNum limit.
+      // If the checkbox is unchecked, we display all messages after the messagesLimit.
+      this.currentTruncatedNum = this.state.checked
+        ? this.currentTruncatedNum
+        : messages.length - this.messagesLimit;
+      displayedMessages = messages.slice(this.currentTruncatedNum);
+
+      MESSAGES_TRUNCATED = PluralForm.get(
+        this.currentTruncatedNum,
+        L10N.getStr("netmonitor.ws.truncated-messages.warning")
+      ).replace("#1", this.currentTruncatedNum);
+    } else {
+      displayedMessages = messages;
+    }
+
+    let connectionClosedMsg = CONNECTION_CLOSED_TEXT;
+    if (
+      closedConnectionDetails &&
+      closedConnectionDetails.code !== undefined &&
+      closedConnectionDetails.reason !== undefined
+    ) {
+      connectionClosedMsg += `: ${closedConnectionDetails.code} ${closedConnectionDetails.reason}`;
+    }
+    return div(
+      {},
+      table(
+        { className: "message-list-table" },
+        MessageListHeader(),
+        tbody(
+          {
+            className: "message-list-body",
+            onKeyDown: this.onKeyDown,
+          },
+          tr(
+            {
+              tabIndex: 0,
+            },
+            td(
+              {
+                className: "truncated-messages-cell",
+                colSpan: visibleColumns.length,
+              },
+              shouldTruncate &&
+                div(
+                  {
+                    className: "truncated-messages-header",
+                  },
+                  div(
+                    {
+                      className: "truncated-messages-container",
+                    },
+                    div({
+                      className: "truncated-messages-warning-icon",
+                    }),
+                    div(
+                      {
+                        className: "truncated-message",
+                        title: MESSAGES_TRUNCATED,
+                      },
+                      MESSAGES_TRUNCATED
+                    )
+                  ),
+                  label(
+                    {
+                      className: "truncated-messages-checkbox-label",
+                      title: TOGGLE_MESSAGES_TRUNCATION_TITLE,
+                    },
+                    input({
+                      type: "checkbox",
+                      className: "truncation-checkbox",
+                      title: TOGGLE_MESSAGES_TRUNCATION_TITLE,
+                      checked: this.state.checked,
+                      onChange: this.toggleTruncationCheckBox,
+                    }),
+                    TOGGLE_MESSAGES_TRUNCATION
+                  )
+                )
+            )
+          ),
+          displayedMessages.map((item, index) =>
+            MessageListItem({
+              key: "message-list-item-" + index,
+              item,
+              index,
+              isSelected: item === selectedMessage,
+              onMouseDown: evt => this.onMouseDown(evt, item),
+              onContextMenu: evt => this.onContextMenu(evt, item),
+              connector,
+              visibleColumns,
+            })
+          )
+        )
+      ),
+      isClosed &&
+        p(
+          {
+            className: "msg-connection-closed-message",
+          },
+          connectionClosedMsg
+        ),
+      hr({
+        ref: "scrollAnchor",
+        className: "message-list-scroll-anchor",
+      })
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    selectedMessage: getSelectedMessage(state),
+    messages: getDisplayedMessages(state),
+    columns: state.messages.columns,
+    isClosed: isCurrentChannelClosed(state),
+    closedConnectionDetails: getClosedConnectionDetails(state),
+    channelType: state.messages.currentChannelType,
+  }),
+  dispatch => ({
+    selectMessage: item => dispatch(Actions.selectMessage(item)),
+    onSelectMessageDelta: delta => dispatch(Actions.selectMessageDelta(delta)),
+  })
+)(MessageListContent);
diff --git a/devtools/client/netmonitor/src/components/messages/MessageListContextMenu.js b/devtools/client/netmonitor/src/components/messages/MessageListContextMenu.js
new file mode 100644
index 0000000000..79b4b62dee
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageListContextMenu.js
@@ -0,0 +1,103 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "copyString",
+  "resource://devtools/shared/platform/clipboard.js",
+  true
+);
+const {
+  getMessagePayload,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const toHexString = str =>
+  Array.from(str, c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("");
+
+class MessageListContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  /**
+   * Handle the context menu opening.
+   */
+  open(event = {}, item) {
+    const menuItems = [];
+    if (this.props.showBinaryOptions) {
+      menuItems.push(
+        {
+          id: "message-list-context-copy-message-base64",
+          label: L10N.getStr("netmonitor.ws.context.copyFrameAsBase64"),
+          accesskey: L10N.getStr(
+            "netmonitor.ws.context.copyFrameAsBase64.accesskey"
+          ),
+          click: () => this.copyMessagePayload(item, btoa),
+        },
+        {
+          id: "message-list-context-copy-message-hex",
+          label: L10N.getStr("netmonitor.ws.context.copyFrameAsHex"),
+          accesskey: L10N.getStr(
+            "netmonitor.ws.context.copyFrameAsHex.accesskey"
+          ),
+          click: () => this.copyMessagePayload(item, toHexString),
+        },
+        {
+          id: "message-list-context-copy-message-text",
+          label: L10N.getStr("netmonitor.ws.context.copyFrameAsText"),
+          accesskey: L10N.getStr(
+            "netmonitor.ws.context.copyFrameAsText.accesskey"
+          ),
+          click: () => this.copyMessagePayload(item),
+        }
+      );
+    } else {
+      menuItems.push({
+        id: "message-list-context-copy-message",
+        label: L10N.getStr("netmonitor.ws.context.copyFrame"),
+        accesskey: L10N.getStr("netmonitor.ws.context.copyFrame.accesskey"),
+        click: () => this.copyMessagePayload(item),
+      });
+    }
+
+    showMenu(menuItems, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+
+  /**
+   * Copy the full payload from the selected message.
+   * Can optionally format the payload before copying.
+   *
+   * @param {object} item
+   * @param {object|string} item.payload
+   *   Payload to copy.
+   * @param {function(string): string} [format]
+   *   Optional function to format the payload before copying.
+   */
+  copyMessagePayload(item, format) {
+    getMessagePayload(item.payload, this.props.connector.getLongString).then(
+      payload => {
+        if (format) {
+          payload = format(payload);
+        }
+        copyString(payload);
+      }
+    );
+  }
+}
+
+module.exports = MessageListContextMenu;
diff --git a/devtools/client/netmonitor/src/components/messages/MessageListHeader.js b/devtools/client/netmonitor/src/components/messages/MessageListHeader.js
new file mode 100644
index 0000000000..b3c49ac0eb
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageListHeader.js
@@ -0,0 +1,121 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  MESSAGE_HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+
+// Components
+const MessageListHeaderContextMenu = require("resource://devtools/client/netmonitor/src/components/messages/MessageListHeaderContextMenu.js");
+
+/**
+ * Renders the message list header.
+ */
+class MessageListHeader extends Component {
+  static get propTypes() {
+    return {
+      columns: PropTypes.object.isRequired,
+      toggleColumn: PropTypes.func.isRequired,
+      resetColumns: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.onContextMenu = this.onContextMenu.bind(this);
+  }
+
+  onContextMenu(evt) {
+    evt.preventDefault();
+    const { resetColumns, toggleColumn, columns } = this.props;
+
+    if (!this.contextMenu) {
+      this.contextMenu = new MessageListHeaderContextMenu({
+        toggleColumn,
+        resetColumns,
+      });
+    }
+    this.contextMenu.open(evt, columns);
+  }
+
+  /**
+   * Helper method to get visibleColumns.
+   */
+  getVisibleColumns() {
+    const { columns } = this.props;
+    return MESSAGE_HEADERS.filter(header => columns[header.name]);
+  }
+
+  /**
+   * Render one column header from the table headers.
+   */
+  renderColumn({ name, width = "10%" }) {
+    const label = L10N.getStr(`netmonitor.ws.toolbar.${name}`);
+
+    return dom.th(
+      {
+        key: name,
+        id: `message-list-${name}-header-box`,
+        className: `message-list-column message-list-${name}`,
+        scope: "col",
+        style: { width },
+      },
+      dom.button(
+        {
+          id: `message-list-${name}-button`,
+          className: `message-list-header-button`,
+          title: label,
+        },
+        dom.div({ className: "button-text" }, label),
+        dom.div({ className: "button-icon" })
+      )
+    );
+  }
+
+  /**
+   * Render all columns in the table header.
+   */
+  renderColumns() {
+    const visibleColumns = this.getVisibleColumns();
+    return visibleColumns.map(header => this.renderColumn(header));
+  }
+
+  render() {
+    return dom.thead(
+      { className: "message-list-headers-group" },
+      dom.tr(
+        {
+          className: "message-list-headers",
+          onContextMenu: this.onContextMenu,
+        },
+        this.renderColumns()
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    columns: state.messages.columns,
+  }),
+  dispatch => ({
+    toggleColumn: column => dispatch(Actions.toggleMessageColumn(column)),
+    resetColumns: () => dispatch(Actions.resetMessageColumns()),
+  })
+)(MessageListHeader);
diff --git a/devtools/client/netmonitor/src/components/messages/MessageListHeaderContextMenu.js b/devtools/client/netmonitor/src/components/messages/MessageListHeaderContextMenu.js
new file mode 100644
index 0000000000..edf99bd5ac
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageListHeaderContextMenu.js
@@ -0,0 +1,61 @@
+/* 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 {
+  showMenu,
+} = require("resource://devtools/client/shared/components/menu/utils.js");
+const {
+  MESSAGE_HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+class MessageListHeaderContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  /**
+   * Handle the context menu opening.
+   */
+  open(event = {}, columns) {
+    const visibleColumns = Object.values(columns).filter(state => state);
+    const onlyOneColumn = visibleColumns.length === 1;
+
+    const columnsToShow = Object.keys(columns);
+    const menuItems = MESSAGE_HEADERS.filter(({ name }) =>
+      columnsToShow.includes(name)
+    ).map(({ name: column }) => {
+      const shown = columns[column];
+      const label = L10N.getStr(`netmonitor.ws.toolbar.${column}`);
+      return {
+        id: `message-list-header-${column}-toggle`,
+        label,
+        type: "checkbox",
+        checked: shown,
+        click: () => this.props.toggleColumn(column),
+        // We don't want to allow hiding the last visible column
+        disabled: onlyOneColumn && shown,
+      };
+    });
+    menuItems.push(
+      { type: "separator" },
+      {
+        id: "message-list-header-reset-columns",
+        label: L10N.getStr("netmonitor.ws.toolbar.resetColumns"),
+        click: () => this.props.resetColumns(),
+      }
+    );
+
+    showMenu(menuItems, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+}
+
+module.exports = MessageListHeaderContextMenu;
diff --git a/devtools/client/netmonitor/src/components/messages/MessageListItem.js b/devtools/client/netmonitor/src/components/messages/MessageListItem.js
new file mode 100644
index 0000000000..a5d837a31b
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessageListItem.js
@@ -0,0 +1,127 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+loader.lazyGetter(this, "ColumnData", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnData.js")
+  );
+});
+loader.lazyGetter(this, "ColumnEventName", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnEventName.js")
+  );
+});
+loader.lazyGetter(this, "ColumnFinBit", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnFinBit.js")
+  );
+});
+loader.lazyGetter(this, "ColumnLastEventId", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnLastEventId.js")
+  );
+});
+loader.lazyGetter(this, "ColumnMaskBit", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnMaskBit.js")
+  );
+});
+loader.lazyGetter(this, "ColumnOpCode", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnOpCode.js")
+  );
+});
+loader.lazyGetter(this, "ColumnRetry", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnRetry.js")
+  );
+});
+loader.lazyGetter(this, "ColumnSize", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnSize.js")
+  );
+});
+loader.lazyGetter(this, "ColumnTime", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/ColumnTime.js")
+  );
+});
+
+const COLUMN_COMPONENT_MAP = {
+  data: ColumnData,
+  eventName: ColumnEventName,
+  finBit: ColumnFinBit,
+  lastEventId: ColumnLastEventId,
+  maskBit: ColumnMaskBit,
+  opCode: ColumnOpCode,
+  retry: ColumnRetry,
+  size: ColumnSize,
+  time: ColumnTime,
+};
+
+/**
+ * Renders one row in the list.
+ */
+class MessageListItem extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      index: PropTypes.number.isRequired,
+      isSelected: PropTypes.bool.isRequired,
+      onMouseDown: PropTypes.func.isRequired,
+      onContextMenu: PropTypes.func.isRequired,
+      connector: PropTypes.object.isRequired,
+      visibleColumns: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      item,
+      index,
+      isSelected,
+      onMouseDown,
+      onContextMenu,
+      connector,
+      visibleColumns,
+    } = this.props;
+
+    const classList = [
+      "message-list-item",
+      index % 2 ? "odd" : "even",
+      item.type,
+    ];
+    if (isSelected) {
+      classList.push("selected");
+    }
+
+    return dom.tr(
+      {
+        className: classList.join(" "),
+        tabIndex: 0,
+        onMouseDown,
+        onContextMenu,
+      },
+      visibleColumns.map(name => {
+        const ColumnComponent = COLUMN_COMPONENT_MAP[name];
+        return ColumnComponent({
+          key: `message-list-column-${name}-${index}`,
+          connector,
+          item,
+        });
+      })
+    );
+  }
+}
+
+module.exports = MessageListItem;
diff --git a/devtools/client/netmonitor/src/components/messages/MessagePayload.js b/devtools/client/netmonitor/src/components/messages/MessagePayload.js
new file mode 100644
index 0000000000..b8d3f7ae33
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessagePayload.js
@@ -0,0 +1,403 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div, input, label, span, h2 } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getMessagePayload,
+  getResponseHeader,
+  parseJSON,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getFormattedSize,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const MESSAGE_DATA_LIMIT = Services.prefs.getIntPref(
+  "devtools.netmonitor.msg.messageDataLimit"
+);
+const MESSAGE_DATA_TRUNCATED = L10N.getStr("messageDataTruncated");
+const SocketIODecoder = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js");
+const {
+  JsonHubProtocol,
+  HandshakeProtocol,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js");
+const {
+  parseSockJS,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js");
+const {
+  parseStompJs,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js");
+const {
+  wampSerializers,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js");
+const {
+  getRequestByChannelId,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const RawData = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/RawData.js")
+);
+loader.lazyGetter(this, "PropertiesView", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+  );
+});
+
+const RAW_DATA = L10N.getStr("netmonitor.response.raw");
+
+/**
+ * Shows the full payload of a message.
+ * The payload is unwrapped from the LongStringActor object.
+ */
+class MessagePayload extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      selectedMessage: PropTypes.object,
+      request: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      payload: "",
+      isFormattedData: false,
+      formattedData: {},
+      formattedDataTitle: "",
+      rawDataDisplayed: false,
+    };
+
+    this.toggleRawData = this.toggleRawData.bind(this);
+    this.renderRawDataBtn = this.renderRawDataBtn.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateMessagePayload();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.selectedMessage !== prevProps.selectedMessage) {
+      this.updateMessagePayload();
+    }
+  }
+
+  updateMessagePayload() {
+    const { selectedMessage, connector } = this.props;
+
+    getMessagePayload(selectedMessage.payload, connector.getLongString).then(
+      async payload => {
+        const { formattedData, formattedDataTitle } = await this.parsePayload(
+          payload
+        );
+        this.setState({
+          payload,
+          isFormattedData: !!formattedData,
+          formattedData,
+          formattedDataTitle,
+        });
+      }
+    );
+  }
+
+  async parsePayload(payload) {
+    const { connector, selectedMessage, request } = this.props;
+
+    // Don't apply formatting to control frames
+    // Control frame check can be done using opCode as specified here:
+    // https://tools.ietf.org/html/rfc6455
+    const controlFrames = [0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe, 0xf];
+    const isControlFrame = controlFrames.includes(selectedMessage.opCode);
+    if (isControlFrame) {
+      return {
+        formattedData: null,
+        formattedDataTitle: "",
+      };
+    }
+
+    // Make sure that request headers are fetched from the backend before
+    // looking for `Sec-WebSocket-Protocol` header.
+    const responseHeaders = await connector.requestData(
+      request.id,
+      "responseHeaders"
+    );
+
+    const wsProtocol = getResponseHeader(
+      { responseHeaders },
+      "Sec-WebSocket-Protocol"
+    );
+
+    const wampSerializer = wampSerializers[wsProtocol];
+    if (wampSerializer) {
+      const wampPayload = wampSerializer.deserializeMessage(payload);
+
+      return {
+        formattedData: wampPayload,
+        formattedDataTitle: wampSerializer.description,
+      };
+    }
+
+    // socket.io payload
+    const socketIOPayload = this.parseSocketIOPayload(payload);
+
+    if (socketIOPayload) {
+      return {
+        formattedData: socketIOPayload,
+        formattedDataTitle: "Socket.IO",
+      };
+    }
+    // sockjs payload
+    const sockJSPayload = parseSockJS(payload);
+    if (sockJSPayload) {
+      let formattedData = sockJSPayload.data;
+
+      if (sockJSPayload.type === "message") {
+        if (Array.isArray(formattedData)) {
+          formattedData = formattedData.map(
+            message => parseStompJs(message) || message
+          );
+        } else {
+          formattedData = parseStompJs(formattedData) || formattedData;
+        }
+      }
+
+      return {
+        formattedData,
+        formattedDataTitle: "SockJS",
+      };
+    }
+    // signalr payload
+    const signalRPayload = this.parseSignalR(payload);
+    if (signalRPayload) {
+      return {
+        formattedData: signalRPayload,
+        formattedDataTitle: "SignalR",
+      };
+    }
+    // STOMP
+    const stompPayload = parseStompJs(payload);
+    if (stompPayload) {
+      return {
+        formattedData: stompPayload,
+        formattedDataTitle: "STOMP",
+      };
+    }
+
+    // json payload
+    let { json } = parseJSON(payload);
+    if (json) {
+      const { data, identifier } = json;
+      // A json payload MAY be an "Action cable" if it
+      // contains either a `data` or an `identifier` property
+      // which are also json strings and would need to be parsed.
+      // See https://medium.com/codequest/actioncable-in-rails-api-f087b65c860d
+      if (
+        (data && typeof data == "string") ||
+        (identifier && typeof identifier == "string")
+      ) {
+        const actionCablePayload = this.parseActionCable(json);
+        return {
+          formattedData: actionCablePayload,
+          formattedDataTitle: "Action Cable",
+        };
+      }
+
+      if (Array.isArray(json)) {
+        json = json.map(message => parseStompJs(message) || message);
+      }
+
+      return {
+        formattedData: json,
+        formattedDataTitle: "JSON",
+      };
+    }
+    return {
+      formattedData: null,
+      formattedDataTitle: "",
+    };
+  }
+
+  parseSocketIOPayload(payload) {
+    let result;
+    // Try decoding socket.io frames
+    try {
+      const decoder = new SocketIODecoder();
+      decoder.on("decoded", decodedPacket => {
+        if (
+          decodedPacket &&
+          !decodedPacket.data.includes("parser error") &&
+          decodedPacket.type
+        ) {
+          result = decodedPacket;
+        }
+      });
+      decoder.add(payload);
+      return result;
+    } catch (err) {
+      // Ignore errors
+    }
+    return null;
+  }
+
+  parseSignalR(payload) {
+    // attempt to parse as HandshakeResponseMessage
+    let decoder;
+    try {
+      decoder = new HandshakeProtocol();
+      const [remainingData, responseMessage] =
+        decoder.parseHandshakeResponse(payload);
+
+      if (responseMessage) {
+        return {
+          handshakeResponse: responseMessage,
+          remainingData: this.parseSignalR(remainingData),
+        };
+      }
+    } catch (err) {
+      // ignore errors;
+    }
+
+    // attempt to parse as JsonHubProtocolMessage
+    try {
+      decoder = new JsonHubProtocol();
+      const msgs = decoder.parseMessages(payload, null);
+      if (msgs?.length) {
+        return msgs;
+      }
+    } catch (err) {
+      // ignore errors;
+    }
+
+    // MVP Signalr
+    if (payload.endsWith("\u001e")) {
+      const { json } = parseJSON(payload.slice(0, -1));
+      if (json) {
+        return json;
+      }
+    }
+
+    return null;
+  }
+
+  parseActionCable(payload) {
+    const identifier = payload.identifier && parseJSON(payload.identifier).json;
+    const data = payload.data && parseJSON(payload.data).json;
+
+    if (identifier) {
+      payload.identifier = identifier;
+    }
+    if (data) {
+      payload.data = data;
+    }
+    return payload;
+  }
+
+  toggleRawData() {
+    this.setState({
+      rawDataDisplayed: !this.state.rawDataDisplayed,
+    });
+  }
+
+  renderRawDataBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawDataBtn`,
+          className: "raw-data-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "raw-data-toggle-label" }, RAW_DATA),
+        span(
+          { className: "raw-data-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderData(component, componentProps) {
+    return component(componentProps);
+  }
+
+  render() {
+    let component;
+    let componentProps;
+    let dataLabel;
+    let { payload, rawDataDisplayed } = this.state;
+    let isTruncated = false;
+    if (this.state.payload.length >= MESSAGE_DATA_LIMIT) {
+      payload = payload.substring(0, MESSAGE_DATA_LIMIT);
+      isTruncated = true;
+    }
+
+    if (
+      !isTruncated &&
+      this.state.isFormattedData &&
+      !this.state.rawDataDisplayed
+    ) {
+      component = PropertiesView;
+      componentProps = {
+        object: this.state.formattedData,
+      };
+      dataLabel = this.state.formattedDataTitle;
+    } else {
+      component = RawData;
+      componentProps = { payload };
+      dataLabel = L10N.getFormatStrWithNumbers(
+        "netmonitor.ws.rawData.header",
+        getFormattedSize(this.state.payload.length)
+      );
+    }
+
+    return div(
+      {
+        className: "message-payload",
+      },
+      isTruncated &&
+        div(
+          {
+            className: "truncated-data-message",
+          },
+          MESSAGE_DATA_TRUNCATED
+        ),
+      h2({ className: "data-header", role: "heading" }, [
+        span({ key: "data-label", className: "data-label" }, dataLabel),
+        !isTruncated &&
+          this.state.isFormattedData &&
+          this.renderRawDataBtn("data", rawDataDisplayed, this.toggleRawData),
+      ]),
+      this.renderData(component, componentProps)
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  request: getRequestByChannelId(state, state.messages.currentChannelId),
+}))(MessagePayload);
diff --git a/devtools/client/netmonitor/src/components/messages/MessagesView.js b/devtools/client/netmonitor/src/components/messages/MessagesView.js
new file mode 100644
index 0000000000..898e28289d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessagesView.js
@@ -0,0 +1,173 @@
+/* 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 {
+  Component,
+  createRef,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  findDOMNode,
+} = require("resource://devtools/client/shared/vendor/react-dom.js");
+const {
+  getSelectedMessage,
+  isSelectedMessageVisible,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const SplitBox = createFactory(
+  require("resource://devtools/client/shared/components/splitter/SplitBox.js")
+);
+const MessageListContent = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/MessageListContent.js")
+);
+const Toolbar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/Toolbar.js")
+);
+const StatusBar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/StatusBar.js")
+);
+
+loader.lazyGetter(this, "MessagePayload", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/messages/MessagePayload.js")
+  );
+});
+
+/**
+ * Renders a list of messages in table view.
+ * Full payload is separated using a SplitBox.
+ */
+class MessagesView extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      selectedMessage: PropTypes.object,
+      messageDetailsOpen: PropTypes.bool.isRequired,
+      openMessageDetailsTab: PropTypes.func.isRequired,
+      selectedMessageVisible: PropTypes.bool.isRequired,
+      channelId: PropTypes.number,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.searchboxRef = createRef();
+    this.clearFilterText = this.clearFilterText.bind(this);
+    this.handleContainerElement = this.handleContainerElement.bind(this);
+    this.state = {
+      startPanelContainer: null,
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const { channelId, openMessageDetailsTab, selectedMessageVisible } =
+      this.props;
+
+    // If a new connection is selected, clear the filter text
+    if (channelId !== prevProps.channelId) {
+      this.clearFilterText();
+    }
+
+    if (!selectedMessageVisible) {
+      openMessageDetailsTab(false);
+    }
+  }
+
+  componentWillUnmount() {
+    const { openMessageDetailsTab } = this.props;
+    openMessageDetailsTab(false);
+
+    const { clientHeight } = findDOMNode(this.refs.endPanel) || {};
+
+    if (clientHeight) {
+      Services.prefs.setIntPref(
+        "devtools.netmonitor.msg.payload-preview-height",
+        clientHeight
+      );
+    }
+  }
+
+  /* Store the parent DOM element of the SplitBox startPanel's element.
+     We need this element for as an option for the IntersectionObserver */
+  handleContainerElement(element) {
+    if (!this.state.startPanelContainer) {
+      this.setState({
+        startPanelContainer: element,
+      });
+    }
+  }
+
+  // Reset the filter text
+  clearFilterText() {
+    if (this.searchboxRef) {
+      this.searchboxRef.current.onClearButtonClick();
+    }
+  }
+
+  render() {
+    const { messageDetailsOpen, connector, selectedMessage, channelId } =
+      this.props;
+
+    const { searchboxRef } = this;
+    const { startPanelContainer } = this.state;
+
+    const initialHeight = Services.prefs.getIntPref(
+      "devtools.netmonitor.msg.payload-preview-height"
+    );
+
+    return div(
+      { id: "messages-view", className: "monitor-panel" },
+      Toolbar({
+        searchboxRef,
+      }),
+      SplitBox({
+        className: "devtools-responsive-container",
+        initialHeight,
+        minSize: "50px",
+        maxSize: "80%",
+        splitterSize: messageDetailsOpen ? 1 : 0,
+        onSelectContainerElement: this.handleContainerElement,
+        startPanel: MessageListContent({
+          connector,
+          startPanelContainer,
+          channelId,
+        }),
+        endPanel:
+          messageDetailsOpen &&
+          MessagePayload({
+            ref: "endPanel",
+            connector,
+            selectedMessage,
+          }),
+        endPanelCollapsed: !messageDetailsOpen,
+        endPanelControl: true,
+        vert: false,
+      }),
+      StatusBar()
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    channelId: state.messages.currentChannelId,
+    messageDetailsOpen: state.messages.messageDetailsOpen,
+    selectedMessage: getSelectedMessage(state),
+    selectedMessageVisible: isSelectedMessageVisible(state),
+  }),
+  dispatch => ({
+    openMessageDetailsTab: open => dispatch(Actions.openMessageDetails(open)),
+  })
+)(MessagesView);
diff --git a/devtools/client/netmonitor/src/components/messages/RawData.js b/devtools/client/netmonitor/src/components/messages/RawData.js
new file mode 100644
index 0000000000..e0b49759c9
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/RawData.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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+/**
+ * Shows raw data of a message.
+ */
+class RawData extends Component {
+  static get propTypes() {
+    return {
+      payload: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { payload } = this.props;
+    return dom.textarea({
+      className: "message-rawData-payload",
+      rows: payload.split(/\n/g).length + 1,
+      value: payload,
+      readOnly: true,
+    });
+  }
+}
+
+module.exports = RawData;
diff --git a/devtools/client/netmonitor/src/components/messages/StatusBar.js b/devtools/client/netmonitor/src/components/messages/StatusBar.js
new file mode 100644
index 0000000000..61bfc75e31
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/StatusBar.js
@@ -0,0 +1,130 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const {
+  getDisplayedMessagesSummary,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getFormattedSize,
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const {
+  CHANNEL_TYPE,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const { div, footer } = dom;
+
+const MESSAGE_COUNT_EMPTY = L10N.getStr(
+  "networkMenu.ws.summary.framesCountEmpty"
+);
+const TOOLTIP_MESSAGE_COUNT = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesCount"
+);
+const TOOLTIP_MESSAGE_TOTAL_SIZE = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesTotalSize"
+);
+const TOOLTIP_MESSAGE_TOTAL_TIME = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesTotalTime"
+);
+
+const UPDATED_MSG_SUMMARY_PROPS = ["count", "totalMs", "totalSize"];
+
+/**
+ * Displays the summary of message count, total size and total time since the first message.
+ */
+class StatusBar extends Component {
+  static get propTypes() {
+    return {
+      channelType: PropTypes.string,
+      summary: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { summary, channelType } = this.props;
+    return (
+      channelType !== nextProps.channelType ||
+      !propertiesEqual(UPDATED_MSG_SUMMARY_PROPS, summary, nextProps.summary)
+    );
+  }
+
+  render() {
+    const { summary, channelType } = this.props;
+    const { count, totalMs, sentSize, receivedSize, totalSize } = summary;
+
+    const countText =
+      count === 0
+        ? MESSAGE_COUNT_EMPTY
+        : PluralForm.get(
+            count,
+            L10N.getStr("networkMenu.ws.summary.framesCount2")
+          ).replace("#1", count);
+    const totalSizeText = getFormattedSize(totalSize);
+    const sentSizeText = getFormattedSize(sentSize);
+    const receivedText = getFormattedSize(receivedSize);
+    const totalMillisText = getFormattedTime(totalMs);
+
+    // channelType might be null in which case it's better to just show
+    // total size than showing all three sizes.
+    const summaryText =
+      channelType === CHANNEL_TYPE.WEB_SOCKET
+        ? L10N.getFormatStr(
+            "networkMenu.ws.summary.label.framesTranferredSize",
+            totalSizeText,
+            sentSizeText,
+            receivedText
+          )
+        : `${totalSizeText} total`;
+
+    return footer(
+      { className: "devtools-toolbar devtools-toolbar-bottom" },
+      div(
+        {
+          className: "status-bar-label message-network-summary-count",
+          title: TOOLTIP_MESSAGE_COUNT,
+        },
+        countText
+      ),
+      count !== 0 &&
+        div(
+          {
+            className: "status-bar-label message-network-summary-total-size",
+            title: TOOLTIP_MESSAGE_TOTAL_SIZE,
+          },
+          summaryText
+        ),
+      count !== 0 &&
+        div(
+          {
+            className: "status-bar-label message-network-summary-total-millis",
+            title: TOOLTIP_MESSAGE_TOTAL_TIME,
+          },
+          totalMillisText
+        )
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  channelType: state.messages.currentChannelType,
+  summary: getDisplayedMessagesSummary(state),
+}))(StatusBar);
diff --git a/devtools/client/netmonitor/src/components/messages/Toolbar.js b/devtools/client/netmonitor/src/components/messages/Toolbar.js
new file mode 100644
index 0000000000..7b71c9aa06
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/Toolbar.js
@@ -0,0 +1,152 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  CHANNEL_TYPE,
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const { button, span, div } = dom;
+
+// Components
+const MessageFilterMenu = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+// Localization
+const MSG_TOOLBAR_CLEAR = L10N.getStr("netmonitor.ws.toolbar.clear");
+const MSG_SEARCH_KEY_SHORTCUT = L10N.getStr(
+  "netmonitor.ws.toolbar.filterFreetext.key"
+);
+const MSG_SEARCH_PLACE_HOLDER = L10N.getStr(
+  "netmonitor.ws.toolbar.filterFreetext.label"
+);
+
+/**
+ * MessagesPanel toolbar component.
+ *
+ * Toolbar contains a set of useful tools that clear the list of
+ * existing messages as well as filter content.
+ */
+class Toolbar extends Component {
+  static get propTypes() {
+    return {
+      searchboxRef: PropTypes.object.isRequired,
+      toggleMessageFilterType: PropTypes.func.isRequired,
+      toggleControlFrames: PropTypes.func.isRequired,
+      clearMessages: PropTypes.func.isRequired,
+      setMessageFilterText: PropTypes.func.isRequired,
+      messageFilterType: PropTypes.string.isRequired,
+      showControlFrames: PropTypes.bool.isRequired,
+      channelType: PropTypes.string,
+    };
+  }
+
+  componentWillUnmount() {
+    const { setMessageFilterText } = this.props;
+    setMessageFilterText("");
+  }
+
+  /**
+   * Render a separator.
+   */
+  renderSeparator() {
+    return span({ className: "devtools-separator" });
+  }
+
+  /**
+   * Render a clear button.
+   */
+  renderClearButton(clearMessages) {
+    return button({
+      className:
+        "devtools-button devtools-clear-icon message-list-clear-button",
+      title: MSG_TOOLBAR_CLEAR,
+      onClick: () => {
+        clearMessages();
+      },
+    });
+  }
+
+  /**
+   * Render the message filter menu button.
+   */
+  renderMessageFilterMenu() {
+    const {
+      messageFilterType,
+      toggleMessageFilterType,
+      showControlFrames,
+      toggleControlFrames,
+    } = this.props;
+
+    return MessageFilterMenu({
+      messageFilterType,
+      toggleMessageFilterType,
+      showControlFrames,
+      toggleControlFrames,
+    });
+  }
+
+  /**
+   * Render filter Searchbox.
+   */
+  renderFilterBox(setMessageFilterText) {
+    return SearchBox({
+      delay: FILTER_SEARCH_DELAY,
+      keyShortcut: MSG_SEARCH_KEY_SHORTCUT,
+      placeholder: MSG_SEARCH_PLACE_HOLDER,
+      type: "filter",
+      ref: this.props.searchboxRef,
+      onChange: setMessageFilterText,
+    });
+  }
+
+  render() {
+    const { clearMessages, setMessageFilterText, channelType } = this.props;
+    const isWs = channelType === CHANNEL_TYPE.WEB_SOCKET;
+    return div(
+      {
+        id: "netmonitor-toolbar-container",
+        className: "devtools-toolbar devtools-input-toolbar",
+      },
+      this.renderClearButton(clearMessages),
+      isWs ? this.renderSeparator() : null,
+      isWs ? this.renderMessageFilterMenu() : null,
+      this.renderSeparator(),
+      this.renderFilterBox(setMessageFilterText)
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    messageFilterType: state.messages.messageFilterType,
+    showControlFrames: state.messages.showControlFrames,
+    channelType: state.messages.currentChannelType,
+  }),
+  dispatch => ({
+    clearMessages: () => dispatch(Actions.clearMessages()),
+    toggleMessageFilterType: filter =>
+      dispatch(Actions.toggleMessageFilterType(filter)),
+    toggleControlFrames: () => dispatch(Actions.toggleControlFrames()),
+    setMessageFilterText: text => dispatch(Actions.setMessageFilterText(text)),
+  })
+)(Toolbar);
diff --git a/devtools/client/netmonitor/src/components/messages/cbor.js b/devtools/client/netmonitor/src/components/messages/cbor.js
new file mode 100644
index 0000000000..8b8b249391
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/cbor.js
@@ -0,0 +1,270 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2014-2016 Patrick Gansterer <paroga@paroga.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+"use strict";
+const POW_2_24 = 5.960464477539063e-8;
+const POW_2_32 = 4294967296;
+
+function decode(data, tagger, simpleValue) {
+  const dataView = new DataView(data);
+  let offset = 0;
+
+  if (typeof tagger !== "function") {
+    tagger = function (value) {
+      return value;
+    };
+  }
+  if (typeof simpleValue !== "function") {
+    simpleValue = function () {
+      return undefined;
+    };
+  }
+
+  function commitRead(length, value) {
+    offset += length;
+    return value;
+  }
+  function readArrayBuffer(length) {
+    return commitRead(length, new Uint8Array(data, offset, length));
+  }
+  function readFloat16() {
+    const tempArrayBuffer = new ArrayBuffer(4);
+    const tempDataView = new DataView(tempArrayBuffer);
+    const value = readUint16();
+
+    const sign = value & 0x8000;
+    let exponent = value & 0x7c00;
+    const fraction = value & 0x03ff;
+
+    if (exponent === 0x7c00) {
+      exponent = 0xff << 10;
+    } else if (exponent !== 0) {
+      exponent += (127 - 15) << 10;
+    } else if (fraction !== 0) {
+      return (sign ? -1 : 1) * fraction * POW_2_24;
+    }
+
+    tempDataView.setUint32(
+      0,
+      (sign << 16) | (exponent << 13) | (fraction << 13)
+    );
+    return tempDataView.getFloat32(0);
+  }
+  function readFloat32() {
+    return commitRead(4, dataView.getFloat32(offset));
+  }
+  function readFloat64() {
+    return commitRead(8, dataView.getFloat64(offset));
+  }
+  function readUint8() {
+    return commitRead(1, dataView.getUint8(offset));
+  }
+  function readUint16() {
+    return commitRead(2, dataView.getUint16(offset));
+  }
+  function readUint32() {
+    return commitRead(4, dataView.getUint32(offset));
+  }
+  function readUint64() {
+    return readUint32() * POW_2_32 + readUint32();
+  }
+  function readBreak() {
+    if (dataView.getUint8(offset) !== 0xff) {
+      return false;
+    }
+    offset += 1;
+    return true;
+  }
+  function readLength(additionalInformation) {
+    if (additionalInformation < 24) {
+      return additionalInformation;
+    }
+    if (additionalInformation === 24) {
+      return readUint8();
+    }
+    if (additionalInformation === 25) {
+      return readUint16();
+    }
+    if (additionalInformation === 26) {
+      return readUint32();
+    }
+    if (additionalInformation === 27) {
+      return readUint64();
+    }
+    if (additionalInformation === 31) {
+      return -1;
+    }
+    throw new Error("Invalid length encoding");
+  }
+  function readIndefiniteStringLength(majorType) {
+    const initialByte = readUint8();
+    if (initialByte === 0xff) {
+      return -1;
+    }
+    const length = readLength(initialByte & 0x1f);
+    if (length < 0 || initialByte >> 5 !== majorType) {
+      throw new Error("Invalid indefinite length element");
+    }
+    return length;
+  }
+
+  function appendUtf16Data(utf16data, length) {
+    for (let i = 0; i < length; ++i) {
+      let value = readUint8();
+      if (value & 0x80) {
+        if (value < 0xe0) {
+          value = ((value & 0x1f) << 6) | (readUint8() & 0x3f);
+          length -= 1;
+        } else if (value < 0xf0) {
+          value =
+            ((value & 0x0f) << 12) |
+            ((readUint8() & 0x3f) << 6) |
+            (readUint8() & 0x3f);
+          length -= 2;
+        } else {
+          value =
+            ((value & 0x0f) << 18) |
+            ((readUint8() & 0x3f) << 12) |
+            ((readUint8() & 0x3f) << 6) |
+            (readUint8() & 0x3f);
+          length -= 3;
+        }
+      }
+
+      if (value < 0x10000) {
+        utf16data.push(value);
+      } else {
+        value -= 0x10000;
+        utf16data.push(0xd800 | (value >> 10));
+        utf16data.push(0xdc00 | (value & 0x3ff));
+      }
+    }
+  }
+
+  // eslint-disable-next-line complexity
+  function decodeItem() {
+    const initialByte = readUint8();
+    const majorType = initialByte >> 5;
+    const additionalInformation = initialByte & 0x1f;
+    let i;
+    let length;
+
+    if (majorType === 7) {
+      switch (additionalInformation) {
+        case 25:
+          return readFloat16();
+        case 26:
+          return readFloat32();
+        case 27:
+          return readFloat64();
+      }
+    }
+
+    length = readLength(additionalInformation);
+    if (length < 0 && (majorType < 2 || majorType > 6)) {
+      throw new Error("Invalid length");
+    }
+
+    switch (majorType) {
+      case 0:
+        return length;
+      case 1:
+        return -1 - length;
+      case 2:
+        if (length < 0) {
+          const elements = [];
+          let fullArrayLength = 0;
+          while ((length = readIndefiniteStringLength(majorType)) >= 0) {
+            fullArrayLength += length;
+            elements.push(readArrayBuffer(length));
+          }
+          const fullArray = new Uint8Array(fullArrayLength);
+          let fullArrayOffset = 0;
+          for (i = 0; i < elements.length; ++i) {
+            fullArray.set(elements[i], fullArrayOffset);
+            fullArrayOffset += elements[i].length;
+          }
+          return fullArray;
+        }
+        return readArrayBuffer(length);
+      case 3:
+        const utf16data = [];
+        if (length < 0) {
+          while ((length = readIndefiniteStringLength(majorType)) >= 0) {
+            appendUtf16Data(utf16data, length);
+          }
+        } else {
+          appendUtf16Data(utf16data, length);
+        }
+        return String.fromCharCode.apply(null, utf16data);
+      case 4:
+        let retArray;
+        if (length < 0) {
+          retArray = [];
+          while (!readBreak()) {
+            retArray.push(decodeItem());
+          }
+        } else {
+          retArray = new Array(length);
+          for (i = 0; i < length; ++i) {
+            retArray[i] = decodeItem();
+          }
+        }
+        return retArray;
+      case 5:
+        const retObject = {};
+        for (i = 0; i < length || (length < 0 && !readBreak()); ++i) {
+          const key = decodeItem();
+          retObject[key] = decodeItem();
+        }
+        return retObject;
+      case 6:
+        return tagger(decodeItem(), length);
+      case 7:
+        switch (length) {
+          case 20:
+            return false;
+          case 21:
+            return true;
+          case 22:
+            return null;
+          case 23:
+            return undefined;
+          default:
+            return simpleValue(length);
+        }
+    }
+
+    throw new Error("Invalid major byte");
+  }
+
+  const ret = decodeItem();
+  if (offset !== data.byteLength) {
+    throw new Error("Remaining bytes");
+  }
+
+  return ret;
+}
+
+module.exports = { decode };
diff --git a/devtools/client/netmonitor/src/components/messages/moz.build b/devtools/client/netmonitor/src/components/messages/moz.build
new file mode 100644
index 0000000000..b5b8751d30
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/moz.build
@@ -0,0 +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/.
+
+DIRS += [
+    "parsers",
+]
+
+DevToolsModules(
+    "cbor.js",
+    "ColumnData.js",
+    "ColumnEventName.js",
+    "ColumnFinBit.js",
+    "ColumnLastEventId.js",
+    "ColumnMaskBit.js",
+    "ColumnOpCode.js",
+    "ColumnRetry.js",
+    "ColumnSize.js",
+    "ColumnTime.js",
+    "MessageFilterMenu.js",
+    "MessageListContent.js",
+    "MessageListContextMenu.js",
+    "MessageListHeader.js",
+    "MessageListHeaderContextMenu.js",
+    "MessageListItem.js",
+    "MessagePayload.js",
+    "MessagesView.js",
+    "msgpack.js",
+    "RawData.js",
+    "StatusBar.js",
+    "Toolbar.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/msgpack.js b/devtools/client/netmonitor/src/components/messages/msgpack.js
new file mode 100644
index 0000000000..e54e2707e9
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/msgpack.js
@@ -0,0 +1,365 @@
+// Copyright © 2019, Yves Goergen, https://unclassified.software/source/msgpack-js
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+// associated documentation files (the “Software”), to deal in the Software without restriction,
+// including without limitation the rights to use, copy, modify, merge, publish, distribute,
+// sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all copies or
+// substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+// NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+"use strict";
+
+// Deserializes a MessagePack byte array to a value.
+//
+// array: The MessagePack byte array to deserialize. This must be an Array or Uint8Array containing bytes, not a string.
+function deserialize(array) {
+  const pow32 = 0x100000000; // 2^32
+  let pos = 0;
+  if (array instanceof ArrayBuffer) {
+    array = new Uint8Array(array);
+  }
+  if (typeof array !== "object" || typeof array.length === "undefined") {
+    throw new Error(
+      "Invalid argument type: Expected a byte array (Array or Uint8Array) to deserialize."
+    );
+  }
+  if (!array.length) {
+    throw new Error(
+      "Invalid argument: The byte array to deserialize is empty."
+    );
+  }
+  if (!(array instanceof Uint8Array)) {
+    array = new Uint8Array(array);
+  }
+  const data = read();
+  if (pos < array.length) {
+    // Junk data at the end
+  }
+  return data;
+
+  // eslint-disable-next-line complexity
+  function read() {
+    const byte = array[pos++];
+    if (byte >= 0x00 && byte <= 0x7f) {
+      return byte;
+    } // positive fixint
+    if (byte >= 0x80 && byte <= 0x8f) {
+      return readMap(byte - 0x80);
+    } // fixmap
+    if (byte >= 0x90 && byte <= 0x9f) {
+      return readArray(byte - 0x90);
+    } // fixarray
+    if (byte >= 0xa0 && byte <= 0xbf) {
+      return readStr(byte - 0xa0);
+    } // fixstr
+    if (byte === 0xc0) {
+      return null;
+    } // nil
+    if (byte === 0xc1) {
+      throw new Error("Invalid byte code 0xc1 found.");
+    } // never used
+    if (byte === 0xc2) {
+      return false;
+    } // false
+    if (byte === 0xc3) {
+      return true;
+    } // true
+    if (byte === 0xc4) {
+      return readBin(-1, 1);
+    } // bin 8
+    if (byte === 0xc5) {
+      return readBin(-1, 2);
+    } // bin 16
+    if (byte === 0xc6) {
+      return readBin(-1, 4);
+    } // bin 32
+    if (byte === 0xc7) {
+      return readExt(-1, 1);
+    } // ext 8
+    if (byte === 0xc8) {
+      return readExt(-1, 2);
+    } // ext 16
+    if (byte === 0xc9) {
+      return readExt(-1, 4);
+    } // ext 32
+    if (byte === 0xca) {
+      return readFloat(4);
+    } // float 32
+    if (byte === 0xcb) {
+      return readFloat(8);
+    } // float 64
+    if (byte === 0xcc) {
+      return readUInt(1);
+    } // uint 8
+    if (byte === 0xcd) {
+      return readUInt(2);
+    } // uint 16
+    if (byte === 0xce) {
+      return readUInt(4);
+    } // uint 32
+    if (byte === 0xcf) {
+      return readUInt(8);
+    } // uint 64
+    if (byte === 0xd0) {
+      return readInt(1);
+    } // int 8
+    if (byte === 0xd1) {
+      return readInt(2);
+    } // int 16
+    if (byte === 0xd2) {
+      return readInt(4);
+    } // int 32
+    if (byte === 0xd3) {
+      return readInt(8);
+    } // int 64
+    if (byte === 0xd4) {
+      return readExt(1);
+    } // fixext 1
+    if (byte === 0xd5) {
+      return readExt(2);
+    } // fixext 2
+    if (byte === 0xd6) {
+      return readExt(4);
+    } // fixext 4
+    if (byte === 0xd7) {
+      return readExt(8);
+    } // fixext 8
+    if (byte === 0xd8) {
+      return readExt(16);
+    } // fixext 16
+    if (byte === 0xd9) {
+      return readStr(-1, 1);
+    } // str 8
+    if (byte === 0xda) {
+      return readStr(-1, 2);
+    } // str 16
+    if (byte === 0xdb) {
+      return readStr(-1, 4);
+    } // str 32
+    if (byte === 0xdc) {
+      return readArray(-1, 2);
+    } // array 16
+    if (byte === 0xdd) {
+      return readArray(-1, 4);
+    } // array 32
+    if (byte === 0xde) {
+      return readMap(-1, 2);
+    } // map 16
+    if (byte === 0xdf) {
+      return readMap(-1, 4);
+    } // map 32
+    if (byte >= 0xe0 && byte <= 0xff) {
+      return byte - 256;
+    } // negative fixint
+    console.debug("msgpack array:", array);
+    throw new Error(
+      "Invalid byte value '" +
+        byte +
+        "' at index " +
+        (pos - 1) +
+        " in the MessagePack binary data (length " +
+        array.length +
+        "): Expecting a range of 0 to 255. This is not a byte array."
+    );
+  }
+
+  function readInt(size) {
+    let value = 0;
+    let first = true;
+    while (size-- > 0) {
+      if (first) {
+        const byte = array[pos++];
+        value += byte & 0x7f;
+        if (byte & 0x80) {
+          value -= 0x80; // Treat most-significant bit as -2^i instead of 2^i
+        }
+        first = false;
+      } else {
+        value *= 256;
+        value += array[pos++];
+      }
+    }
+    return value;
+  }
+
+  function readUInt(size) {
+    let value = 0;
+    while (size-- > 0) {
+      value *= 256;
+      value += array[pos++];
+    }
+    return value;
+  }
+
+  function readFloat(size) {
+    const view = new DataView(array.buffer, pos, size);
+    pos += size;
+    if (size === 4) {
+      return view.getFloat32(0, false);
+    }
+    if (size === 8) {
+      return view.getFloat64(0, false);
+    }
+    throw new Error("Invalid size for readFloat.");
+  }
+
+  function readBin(size, lengthSize) {
+    if (size < 0) {
+      size = readUInt(lengthSize);
+    }
+    const readData = array.subarray(pos, pos + size);
+    pos += size;
+    return readData;
+  }
+
+  function readMap(size, lengthSize) {
+    if (size < 0) {
+      size = readUInt(lengthSize);
+    }
+    const readData = {};
+    while (size-- > 0) {
+      const key = read();
+      readData[key] = read();
+    }
+    return readData;
+  }
+
+  function readArray(size, lengthSize) {
+    if (size < 0) {
+      size = readUInt(lengthSize);
+    }
+    const readData = [];
+    while (size-- > 0) {
+      readData.push(read());
+    }
+    return readData;
+  }
+
+  function readStr(size, lengthSize) {
+    if (size < 0) {
+      size = readUInt(lengthSize);
+    }
+    const start = pos;
+    pos += size;
+    return decodeUtf8(array, start, size);
+  }
+
+  function readExt(size, lengthSize) {
+    if (size < 0) {
+      size = readUInt(lengthSize);
+    }
+    const type = readUInt(1);
+    const readData = readBin(size);
+    switch (type) {
+      case 255:
+        return readExtDate(readData);
+    }
+    return { type, data: readData };
+  }
+
+  function readExtDate(givenData) {
+    if (givenData.length === 4) {
+      const sec =
+        ((givenData[0] << 24) >>> 0) +
+        ((givenData[1] << 16) >>> 0) +
+        ((givenData[2] << 8) >>> 0) +
+        givenData[3];
+      return new Date(sec * 1000);
+    }
+    if (givenData.length === 8) {
+      const ns =
+        ((givenData[0] << 22) >>> 0) +
+        ((givenData[1] << 14) >>> 0) +
+        ((givenData[2] << 6) >>> 0) +
+        (givenData[3] >>> 2);
+      const sec =
+        (givenData[3] & 0x3) * pow32 +
+        ((givenData[4] << 24) >>> 0) +
+        ((givenData[5] << 16) >>> 0) +
+        ((givenData[6] << 8) >>> 0) +
+        givenData[7];
+      return new Date(sec * 1000 + ns / 1000000);
+    }
+    if (givenData.length === 12) {
+      const ns =
+        ((givenData[0] << 24) >>> 0) +
+        ((givenData[1] << 16) >>> 0) +
+        ((givenData[2] << 8) >>> 0) +
+        givenData[3];
+      pos -= 8;
+      const sec = readInt(8);
+      return new Date(sec * 1000 + ns / 1000000);
+    }
+    throw new Error("Invalid givenData length for a date value.");
+  }
+}
+
+// Decodes a string from UTF-8 bytes.
+function decodeUtf8(bytes, start, length) {
+  // Based on: https://gist.github.com/pascaldekloe/62546103a1576803dade9269ccf76330
+  let i = start,
+    str = "";
+  length += start;
+  while (i < length) {
+    let c = bytes[i++];
+    if (c > 127) {
+      if (c > 191 && c < 224) {
+        if (i >= length) {
+          throw new Error("UTF-8 decode: incomplete 2-byte sequence");
+        }
+        c = ((c & 31) << 6) | (bytes[i++] & 63);
+      } else if (c > 223 && c < 240) {
+        if (i + 1 >= length) {
+          throw new Error("UTF-8 decode: incomplete 3-byte sequence");
+        }
+        c = ((c & 15) << 12) | ((bytes[i++] & 63) << 6) | (bytes[i++] & 63);
+      } else if (c > 239 && c < 248) {
+        if (i + 2 >= length) {
+          throw new Error("UTF-8 decode: incomplete 4-byte sequence");
+        }
+        c =
+          ((c & 7) << 18) |
+          ((bytes[i++] & 63) << 12) |
+          ((bytes[i++] & 63) << 6) |
+          (bytes[i++] & 63);
+      } else {
+        throw new Error(
+          "UTF-8 decode: unknown multibyte start 0x" +
+            c.toString(16) +
+            " at index " +
+            (i - 1)
+        );
+      }
+    }
+    if (c <= 0xffff) {
+      str += String.fromCharCode(c);
+    } else if (c <= 0x10ffff) {
+      c -= 0x10000;
+      str += String.fromCharCode((c >> 10) | 0xd800);
+      str += String.fromCharCode((c & 0x3ff) | 0xdc00);
+    } else {
+      throw new Error(
+        "UTF-8 decode: code point 0x" + c.toString(16) + " exceeds UTF-16 reach"
+      );
+    }
+  }
+  return str;
+}
+
+// The exported functions
+const msgpack = {
+  deserialize,
+
+  // Compatibility with other libraries
+  decode: deserialize,
+};
+
+module.exports = msgpack;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/moz.build
new file mode 100644
index 0000000000..6b1947e4a1
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/moz.build
@@ -0,0 +1,11 @@
+# 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 += [
+    "socket-io",
+    "sockjs",
+    "stomp",
+    "signalr",
+    "wamp",
+]
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/HandshakeProtocol.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/HandshakeProtocol.js
new file mode 100644
index 0000000000..c1c64d6717
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/HandshakeProtocol.js
@@ -0,0 +1,82 @@
+/*
+ * A helper class for working with SignalR handshakes.
+ *
+ * Copyright (c) .NET Foundation. All rights reserved.
+ *
+ * This source code is licensed under the Apache License, Version 2.0,
+ * found in the LICENSE.txt file in the root directory of the library
+ * source tree.
+ *
+ * https://github.com/aspnet/AspNetCore
+ */
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextMessageFormat = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/TextMessageFormat.js");
+const Utils = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/Utils.js");
+/** @private */
+class HandshakeProtocol {
+  // Handshake request is always JSON
+  writeHandshakeRequest(handshakeRequest) {
+    return TextMessageFormat.TextMessageFormat.write(
+      JSON.stringify(handshakeRequest)
+    );
+  }
+  parseHandshakeResponse(data) {
+    let messageData;
+    let remainingData;
+    if (
+      Utils.isArrayBuffer(data) ||
+      // eslint-disable-next-line no-undef
+      (typeof Buffer !== "undefined" && data instanceof Buffer)
+    ) {
+      // Format is binary but still need to read JSON text from handshake response
+      const binaryData = new Uint8Array(data);
+      const separatorIndex = binaryData.indexOf(
+        TextMessageFormat.TextMessageFormat.RecordSeparatorCode
+      );
+      if (separatorIndex === -1) {
+        throw new Error("Message is incomplete.");
+      }
+      // content before separator is handshake response
+      // optional content after is additional messages
+      const responseLength = separatorIndex + 1;
+      messageData = String.fromCharCode.apply(
+        null,
+        binaryData.slice(0, responseLength)
+      );
+      remainingData =
+        binaryData.byteLength > responseLength
+          ? binaryData.slice(responseLength).buffer
+          : null;
+    } else {
+      const textData = data;
+      const separatorIndex = textData.indexOf(
+        TextMessageFormat.TextMessageFormat.RecordSeparator
+      );
+      if (separatorIndex === -1) {
+        throw new Error("Message is incomplete.");
+      }
+      // content before separator is handshake response
+      // optional content after is additional messages
+      const responseLength = separatorIndex + 1;
+      messageData = textData.substring(0, responseLength);
+      remainingData =
+        textData.length > responseLength
+          ? textData.substring(responseLength)
+          : null;
+    }
+    // At this point we should have just the single handshake message
+    const messages = TextMessageFormat.TextMessageFormat.parse(messageData);
+    const response = JSON.parse(messages[0]);
+    if (response.type) {
+      throw new Error("Expected a handshake response from the server.");
+    }
+    const responseMessage = response;
+    // multiple messages could have arrived with handshake
+    // return additional data to be parsed as usual, or null if all parsed
+    return [remainingData, responseMessage];
+  }
+}
+exports.HandshakeProtocol = HandshakeProtocol;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/IHubProtocol.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/IHubProtocol.js
new file mode 100644
index 0000000000..fec2cdbff4
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/IHubProtocol.js
@@ -0,0 +1,33 @@
+/*
+ * A protocol abstraction for communicating with SignalR hubs.
+ *
+ * Copyright (c) .NET Foundation. All rights reserved.
+ *
+ * This source code is licensed under the Apache License, Version 2.0,
+ * found in the LICENSE.txt file in the root directory of the library
+ * source tree.
+ *
+ * https://github.com/aspnet/AspNetCore
+ */
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Defines the type of a Hub Message. */
+var MessageType;
+(function (_MessageType) {
+  /** Indicates the message is an Invocation message and implements the {@link @microsoft/signalr.InvocationMessage} interface. */
+  MessageType[(MessageType.Invocation = 1)] = "Invocation";
+  /** Indicates the message is a StreamItem message and implements the {@link @microsoft/signalr.StreamItemMessage} interface. */
+  MessageType[(MessageType.StreamItem = 2)] = "StreamItem";
+  /** Indicates the message is a Completion message and implements the {@link @microsoft/signalr.CompletionMessage} interface. */
+  MessageType[(MessageType.Completion = 3)] = "Completion";
+  /** Indicates the message is a Stream Invocation message and implements the {@link @microsoft/signalr.StreamInvocationMessage} interface. */
+  MessageType[(MessageType.StreamInvocation = 4)] = "StreamInvocation";
+  /** Indicates the message is a Cancel Invocation message and implements the {@link @microsoft/signalr.CancelInvocationMessage} interface. */
+  MessageType[(MessageType.CancelInvocation = 5)] = "CancelInvocation";
+  /** Indicates the message is a Ping message and implements the {@link @microsoft/signalr.PingMessage} interface. */
+  MessageType[(MessageType.Ping = 6)] = "Ping";
+  /** Indicates the message is a Close message and implements the {@link @microsoft/signalr.CloseMessage} interface. */
+  MessageType[(MessageType.Close = 7)] = "Close";
+})((MessageType = exports.MessageType || (exports.MessageType = {})));
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/JSONHubProtocol.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/JSONHubProtocol.js
new file mode 100644
index 0000000000..c3648e940f
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/JSONHubProtocol.js
@@ -0,0 +1,120 @@
+/*
+ * Implements the SignalR Hub Protocol.
+ *
+ * Copyright (c) .NET Foundation. All rights reserved.
+ *
+ * This source code is licensed under the Apache License, Version 2.0,
+ * found in the LICENSE.txt file in the root directory of the library
+ * source tree.
+ *
+ * https://github.com/aspnet/AspNetCore
+ */
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+const IHubProtocol = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/IHubProtocol.js");
+const TextMessageFormat = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/TextMessageFormat.js");
+/** Implements the JSON Hub Protocol. */
+class JsonHubProtocol {
+  /** Creates an array of {@link @microsoft/signalr.HubMessage} objects from the specified serialized representation.
+   *
+   * @param {string} input A string containing the serialized representation.
+   */
+  parseMessages(input) {
+    // The interface does allow "ArrayBuffer" to be passed in, but this implementation does not. So let's throw a useful error.
+    if (typeof input !== "string") {
+      throw new Error(
+        "Invalid input for JSON hub protocol. Expected a string."
+      );
+    }
+    if (!input) {
+      return [];
+    }
+    // Parse the messages
+    const messages = TextMessageFormat.TextMessageFormat.parse(input);
+    const hubMessages = [];
+    for (const message of messages) {
+      const parsedMessage = JSON.parse(message);
+      if (typeof parsedMessage.type !== "number") {
+        throw new Error("Invalid payload.");
+      }
+      switch (parsedMessage.type) {
+        case IHubProtocol.MessageType.Invocation:
+          this.isInvocationMessage(parsedMessage);
+          break;
+        case IHubProtocol.MessageType.StreamItem:
+          this.isStreamItemMessage(parsedMessage);
+          break;
+        case IHubProtocol.MessageType.Completion:
+          this.isCompletionMessage(parsedMessage);
+          break;
+        case IHubProtocol.MessageType.Ping:
+          // Single value, no need to validate
+          break;
+        case IHubProtocol.MessageType.Close:
+          // All optional values, no need to validate
+          break;
+        default:
+          // Future protocol changes can add message types, new kinds of messages
+          // will show up without having to update Firefox.
+          break;
+      }
+      // Map numeric message type to their textual name if it exists
+      parsedMessage.type =
+        IHubProtocol.MessageType[parsedMessage.type] || parsedMessage.type;
+      hubMessages.push(parsedMessage);
+    }
+    return hubMessages;
+  }
+  /** Writes the specified {@link @microsoft/signalr.HubMessage} to a string and returns it.
+   *
+   * @param {HubMessage} message The message to write.
+   * @returns {string} A string containing the serialized representation of the message.
+   */
+  writeMessage(message) {
+    return TextMessageFormat.TextMessageFormat.write(JSON.stringify(message));
+  }
+  isInvocationMessage(message) {
+    this.assertNotEmptyString(
+      message.target,
+      "Invalid payload for Invocation message."
+    );
+    if (message.invocationId !== undefined) {
+      this.assertNotEmptyString(
+        message.invocationId,
+        "Invalid payload for Invocation message."
+      );
+    }
+  }
+  isStreamItemMessage(message) {
+    this.assertNotEmptyString(
+      message.invocationId,
+      "Invalid payload for StreamItem message."
+    );
+    if (message.item === undefined) {
+      throw new Error("Invalid payload for StreamItem message.");
+    }
+  }
+  isCompletionMessage(message) {
+    if (message.result && message.error) {
+      throw new Error("Invalid payload for Completion message.");
+    }
+    if (!message.result && message.error) {
+      this.assertNotEmptyString(
+        message.error,
+        "Invalid payload for Completion message."
+      );
+    }
+    this.assertNotEmptyString(
+      message.invocationId,
+      "Invalid payload for Completion message."
+    );
+  }
+  assertNotEmptyString(value, errorMessage) {
+    if (typeof value !== "string" || value === "") {
+      throw new Error(errorMessage);
+    }
+  }
+}
+exports.JsonHubProtocol = JsonHubProtocol;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/TextMessageFormat.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/TextMessageFormat.js
new file mode 100644
index 0000000000..a9ec58ee36
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/TextMessageFormat.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) .NET Foundation. All rights reserved.
+ *
+ * This source code is licensed under the Apache License, Version 2.0,
+ * found in the LICENSE.txt file in the root directory of the library
+ * source tree.
+ *
+ * https://github.com/aspnet/AspNetCore
+ */
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+// Not exported from index
+/** @private */
+class TextMessageFormat {
+  static write(output) {
+    return `${output}${TextMessageFormat.RecordSeparator}`;
+  }
+  static parse(input) {
+    if (input[input.length - 1] !== TextMessageFormat.RecordSeparator) {
+      throw new Error("Message is incomplete.");
+    }
+    const messages = input.split(TextMessageFormat.RecordSeparator);
+    messages.pop();
+    return messages;
+  }
+}
+exports.TextMessageFormat = TextMessageFormat;
+TextMessageFormat.RecordSeparatorCode = 0x1e;
+TextMessageFormat.RecordSeparator = String.fromCharCode(
+  TextMessageFormat.RecordSeparatorCode
+);
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/Utils.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/Utils.js
new file mode 100644
index 0000000000..77b00daf45
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/Utils.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) .NET Foundation. All rights reserved.
+ *
+ * This source code is licensed under the Apache License, Version 2.0,
+ * found in the LICENSE.txt file in the root directory of the library
+ * source tree.
+ *
+ * https://github.com/aspnet/AspNetCore
+ */
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+// Also in signalr-protocol-msgpack/Utils.ts
+/** @private */
+function isArrayBuffer(val) {
+  return (
+    val &&
+    typeof ArrayBuffer !== "undefined" &&
+    (val instanceof ArrayBuffer ||
+      // Sometimes we get an ArrayBuffer that doesn't satisfy instanceof
+      (val.constructor && val.constructor.name === "ArrayBuffer"))
+  );
+}
+exports.isArrayBuffer = isArrayBuffer;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js b/devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js
new file mode 100644
index 0000000000..927b0a0922
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const JsonHubProtocol = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/JSONHubProtocol.js");
+const HandshakeProtocol = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/HandshakeProtocol.js");
+
+module.exports = {
+  JsonHubProtocol: JsonHubProtocol.JsonHubProtocol,
+  HandshakeProtocol: HandshakeProtocol.HandshakeProtocol,
+};
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/signalr/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/signalr/moz.build
new file mode 100644
index 0000000000..48329513f2
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/signalr/moz.build
@@ -0,0 +1,12 @@
+# 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(
+    "HandshakeProtocol.js",
+    "IHubProtocol.js",
+    "index.js",
+    "JSONHubProtocol.js",
+    "TextMessageFormat.js",
+    "Utils.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/socket-io/binary.js b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/binary.js
new file mode 100644
index 0000000000..340791199f
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/binary.js
@@ -0,0 +1,48 @@
+/*
+ * A socket.io encoder and decoder written in JavaScript complying with version 4
+ * of socket.io-protocol. Used by socket.io and socket.io-client.
+ *
+ * Copyright (c) 2014 Guillermo Rauch <guillermo@learnboost.com>
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of the library source tree.
+ *
+ * https://github.com/socketio/socket.io-parser
+ */
+
+"use strict";
+
+/**
+ * Reconstructs a binary packet from its placeholder packet and buffers
+ *
+ * @param {Object} packet - event packet with placeholders
+ * @param {Array} buffers - binary buffers to put in placeholder positions
+ * @return {Object} reconstructed packet
+ * @api public
+ */
+
+exports.reconstructPacket = function (packet, buffers) {
+  packet.data = _reconstructPacket(packet.data, buffers);
+  packet.attachments = undefined; // no longer useful
+  return packet;
+};
+
+function _reconstructPacket(data, buffers) {
+  if (!data) {
+    return data;
+  }
+
+  if (data && data._placeholder) {
+    return buffers[data.num]; // appropriate buffer (should be natural order anyway)
+  } else if (Array.isArray(data)) {
+    for (let i = 0; i < data.length; i++) {
+      data[i] = _reconstructPacket(data[i], buffers);
+    }
+  } else if (typeof data === "object") {
+    for (const key in data) {
+      data[key] = _reconstructPacket(data[key], buffers);
+    }
+  }
+
+  return data;
+}
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/socket-io/component-emitter.js b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/component-emitter.js
new file mode 100644
index 0000000000..5874778f75
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/component-emitter.js
@@ -0,0 +1,84 @@
+/*
+ * Event emitter component.
+ *
+ * Copyright (c) 2014 Component contributors <dev@component.io>
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of the library source tree.
+ *
+ * https://github.com/component/emitter
+ */
+
+"use strict";
+
+/**
+ * Initialize a new `Emitter`.
+ *
+ * @api public
+ */
+
+function Emitter(obj) {
+  if (obj) {
+    return mixin(obj);
+  }
+}
+
+/**
+ * Mixin the emitter properties.
+ *
+ * @param {Object} obj
+ * @return {Object}
+ * @api private
+ */
+
+function mixin(obj) {
+  for (const key in Emitter.prototype) {
+    obj[key] = Emitter.prototype[key];
+  }
+  return obj;
+}
+
+/**
+ * Listen on the given `event` with `fn`.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.on = function (event, fn) {
+  this._callbacks = this._callbacks || {};
+  (this._callbacks["$" + event] = this._callbacks["$" + event] || []).push(fn);
+  return this;
+};
+
+/**
+ * Emit `event` with the given args.
+ *
+ * @param {String} event
+ * @param {Mixed} ...
+ * @return {Emitter}
+ */
+
+Emitter.prototype.emit = function (event) {
+  this._callbacks = this._callbacks || {};
+
+  const args = new Array(arguments.length - 1);
+  let callbacks = this._callbacks["$" + event];
+
+  for (let i = 1; i < arguments.length; i++) {
+    args[i - 1] = arguments[i];
+  }
+
+  if (callbacks) {
+    callbacks = callbacks.slice(0);
+    for (let i = 0, len = callbacks.length; i < len; ++i) {
+      callbacks[i].apply(this, args);
+    }
+  }
+
+  return this;
+};
+
+module.exports = Emitter;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js
new file mode 100644
index 0000000000..9d631d014b
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js
@@ -0,0 +1,292 @@
+/*
+ * A socket.io encoder and decoder written in JavaScript complying with version 4
+ * of socket.io-protocol. Used by socket.io and socket.io-client.
+ *
+ * Copyright (c) 2014 Guillermo Rauch <guillermo@learnboost.com>
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of the library source tree.
+ *
+ * https://github.com/socketio/socket.io-parser
+ */
+
+/* eslint-disable no-unused-vars */
+
+"use strict";
+
+const Emitter = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/component-emitter.js");
+const binary = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/binary.js");
+const isBuf = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/is-buffer.js");
+
+/**
+ * Packet types
+ */
+
+const TYPES = [
+  "CONNECT",
+  "DISCONNECT",
+  "EVENT",
+  "ACK",
+  "ERROR",
+  "BINARY_EVENT",
+  "BINARY_ACK",
+];
+
+/**
+ * Packet type `connect`
+ */
+
+const CONNECT = 0;
+
+/**
+ * Packet type `disconnect`
+ */
+
+const DISCONNECT = 1;
+
+/**
+ * Packet type `event`
+ */
+
+const EVENT = 2;
+
+/**
+ * Packet type `ack`
+ */
+
+const ACK = 3;
+
+/**
+ * Packet type `error`
+ */
+
+const ERROR = 4;
+
+/**
+ * Packet type 'binary event'
+ */
+const BINARY_EVENT = 5;
+
+/**
+ * Packet type `binary ack`. For acks with binary arguments
+ */
+
+const BINARY_ACK = 6;
+
+/**
+ * A socket.io Decoder instance
+ *
+ * @return {Object} decoder
+ * @api public
+ */
+
+function Decoder() {
+  this.reconstructor = null;
+}
+
+/**
+ * Mix in `Emitter` with Decoder.
+ */
+
+Emitter(Decoder.prototype);
+
+/**
+ * A manager of a binary event's 'buffer sequence'. Should
+ * be constructed whenever a packet of type BINARY_EVENT is
+ * decoded.
+ *
+ * @param {Object} packet
+ * @return {BinaryReconstructor} initialized reconstructor
+ * @api private
+ */
+
+function BinaryReconstructor(packet) {
+  this.reconPack = packet;
+  this.buffers = [];
+}
+
+/**
+ * Method to be called when binary data received from connection
+ * after a BINARY_EVENT packet.
+ *
+ * @param {Buffer | ArrayBuffer} binData - the raw binary data received
+ * @return {null | Object} returns null if more binary data is expected or
+ *   a reconstructed packet object if all buffers have been received.
+ * @api private
+ */
+
+BinaryReconstructor.prototype.takeBinaryData = function (binData) {
+  this.buffers.push(binData);
+  if (this.buffers.length === this.reconPack.attachments) {
+    // done with buffer list
+    const packet = binary.reconstructPacket(this.reconPack, this.buffers);
+    this.finishedReconstruction();
+    return packet;
+  }
+  return null;
+};
+
+/**
+ * Cleans up binary packet reconstruction variables.
+ *
+ * @api private
+ */
+
+BinaryReconstructor.prototype.finishedReconstruction = function () {
+  this.reconPack = null;
+  this.buffers = [];
+};
+
+/**
+ * Decodes an encoded packet string into packet JSON.
+ *
+ * @param {String} obj - encoded packet
+ * @return {Object} packet
+ * @api public
+ */
+
+Decoder.prototype.add = function (obj) {
+  let packet;
+  if (typeof obj === "string") {
+    packet = decodeString(obj);
+    if (BINARY_EVENT === packet.type || BINARY_ACK === packet.type) {
+      // binary packet's json
+      this.reconstructor = new BinaryReconstructor(packet);
+
+      // no attachments, labeled binary but no binary data to follow
+      if (this.reconstructor.reconPack.attachments === 0) {
+        this.emit("decoded", packet);
+      }
+    } else {
+      // non-binary full packet
+      this.emit("decoded", packet);
+    }
+  } else if (isBuf(obj) || obj.base64) {
+    // raw binary data
+    if (!this.reconstructor) {
+      throw new Error("got binary data when not reconstructing a packet");
+    } else {
+      packet = this.reconstructor.takeBinaryData(obj);
+      if (packet) {
+        // received final buffer
+        this.reconstructor = null;
+        this.emit("decoded", packet);
+      }
+    }
+  } else {
+    throw new Error("Unknown type: " + obj);
+  }
+};
+
+/**
+ * Decode a packet String (JSON data)
+ *
+ * @param {String} str
+ * @return {Object} packet
+ * @api private
+ */
+// eslint-disable-next-line complexity
+function decodeString(str) {
+  let i = 0;
+  // look up type
+  const p = {
+    type: Number(str.charAt(0)),
+  };
+
+  if (TYPES[p.type] == null) {
+    return error("unknown packet type " + p.type);
+  }
+
+  // look up attachments if type binary
+  if (BINARY_EVENT === p.type || BINARY_ACK === p.type) {
+    let buf = "";
+    while (str.charAt(++i) !== "-") {
+      buf += str.charAt(i);
+      if (i === str.length) {
+        break;
+      }
+    }
+    if (buf != Number(buf) || str.charAt(i) !== "-") {
+      throw new Error("Illegal attachments");
+    }
+    p.attachments = Number(buf);
+  }
+
+  // look up namespace (if any)
+  if (str.charAt(i + 1) === "/") {
+    p.nsp = "";
+    while (++i) {
+      const c = str.charAt(i);
+      if (c === ",") {
+        break;
+      }
+      p.nsp += c;
+      if (i === str.length) {
+        break;
+      }
+    }
+  } else {
+    p.nsp = "/";
+  }
+
+  // look up id
+  const next = str.charAt(i + 1);
+  if (next !== "" && Number(next) == next) {
+    p.id = "";
+    while (++i) {
+      const c = str.charAt(i);
+      if (c == null || Number(c) != c) {
+        --i;
+        break;
+      }
+      p.id += str.charAt(i);
+      if (i === str.length) {
+        break;
+      }
+    }
+    p.id = Number(p.id);
+  }
+
+  // look up json data
+  if (str.charAt(++i)) {
+    const payload = tryParse(str.substr(i));
+    const isPayloadValid =
+      payload !== false && (p.type === ERROR || Array.isArray(payload));
+    if (isPayloadValid) {
+      p.data = payload;
+    } else {
+      return error("invalid payload");
+    }
+  }
+
+  return p;
+}
+
+function tryParse(str) {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Deallocates a parser's resources
+ *
+ * @api public
+ */
+
+Decoder.prototype.destroy = function () {
+  if (this.reconstructor) {
+    this.reconstructor.finishedReconstruction();
+  }
+};
+
+function error(msg) {
+  return {
+    type: ERROR,
+    data: "parser error: " + msg,
+  };
+}
+
+module.exports = Decoder;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/socket-io/is-buffer.js b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/is-buffer.js
new file mode 100644
index 0000000000..cdbad14abc
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/is-buffer.js
@@ -0,0 +1,40 @@
+/*
+ * A socket.io encoder and decoder written in JavaScript complying with version 4
+ * of socket.io-protocol. Used by socket.io and socket.io-client.
+ *
+ * Copyright (c) 2014 Guillermo Rauch <guillermo@learnboost.com>
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of the library source tree.
+ *
+ * https://github.com/socketio/socket.io-parser
+ */
+
+/* eslint-disable no-undef */
+
+"use strict";
+
+var withNativeBuffer =
+  typeof Buffer === "function" && typeof Buffer.isBuffer === "function";
+var withNativeArrayBuffer = typeof ArrayBuffer === "function";
+
+var isView = function (obj) {
+  return typeof ArrayBuffer.isView === "function"
+    ? ArrayBuffer.isView(obj)
+    : obj.buffer instanceof ArrayBuffer;
+};
+
+/**
+ * Returns true if obj is a buffer or an arraybuffer.
+ *
+ * @api private
+ */
+
+function isBuf(obj) {
+  return (
+    (withNativeBuffer && Buffer.isBuffer(obj)) ||
+    (withNativeArrayBuffer && (obj instanceof ArrayBuffer || isView(obj)))
+  );
+}
+
+module.exports = isBuf;
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/socket-io/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/moz.build
new file mode 100644
index 0000000000..d38ca19dd6
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/socket-io/moz.build
@@ -0,0 +1,10 @@
+# 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(
+    "binary.js",
+    "component-emitter.js",
+    "index.js",
+    "is-buffer.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js b/devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js
new file mode 100644
index 0000000000..b688b84b36
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js
@@ -0,0 +1,56 @@
+/*
+ * SockJS is a browser JavaScript library that provides a WebSocket-like object.
+ * SockJS gives you a coherent, cross-browser, Javascript API which creates a low latency,
+ * full duplex, cross-domain communication channel between the browser and the web server.
+ *
+ * Copyright (c) 2011-2018 The sockjs-client Authors.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of the library source tree.
+ *
+ * https://github.com/sockjs/sockjs-client
+ */
+
+"use strict";
+
+function parseSockJS(msg) {
+  const type = msg.slice(0, 1);
+  const content = msg.slice(1);
+
+  // first check for messages that don't need a payload
+  switch (type) {
+    case "o":
+      return { type: "open" };
+    case "h":
+      return { type: "heartbeat" };
+  }
+
+  let payload;
+  if (content) {
+    try {
+      payload = JSON.parse(content);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  if (typeof payload === "undefined") {
+    return null;
+  }
+
+  switch (type) {
+    case "a":
+      return { type: "message", data: payload };
+    case "m":
+      return { type: "message", data: payload };
+    case "c":
+      const [code, message] = payload;
+      return { type: "close", code, message };
+    default:
+      return null;
+  }
+}
+
+module.exports = {
+  parseSockJS,
+};
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/sockjs/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/sockjs/moz.build
new file mode 100644
index 0000000000..e1ca52aa96
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/sockjs/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(
+    "index.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/stomp/byte.js b/devtools/client/netmonitor/src/components/messages/parsers/stomp/byte.js
new file mode 100644
index 0000000000..a55d5bff7a
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/stomp/byte.js
@@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2018 Deepak Kumar
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * https://github.com/stomp-js/stompjs
+ * https://github.com/stomp-js/stompjs/blob/develop/src/byte.ts
+ */
+
+"use strict";
+
+const BYTE = {
+  // LINEFEED byte (octet 10)
+  LF: "\x0A",
+  // NULL byte (octet 0)
+  NULL: "\x00",
+};
+
+module.exports = { BYTE };
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/stomp/frame.js b/devtools/client/netmonitor/src/components/messages/parsers/stomp/frame.js
new file mode 100644
index 0000000000..679b1140b4
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/stomp/frame.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (c) 2018 Deepak Kumar
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * https://github.com/stomp-js/stompjs
+ * https://github.com/stomp-js/stompjs/blob/develop/src/frame.ts
+ */
+
+"use strict";
+
+const {
+  BYTE,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/byte.js");
+
+/**
+ * Frame class represents a STOMP frame.
+ *
+ * @internal
+ */
+class FrameImpl {
+  /**
+   * Frame constructor. `command`, `headers` and `body` are available as properties.
+   *
+   * @internal
+   */
+  constructor(params) {
+    const {
+      command,
+      headers,
+      body,
+      binaryBody,
+      escapeHeaderValues,
+      skipContentLengthHeader,
+    } = params;
+    this.command = command;
+    this.headers = Object.assign({}, headers || {});
+    if (binaryBody) {
+      this._binaryBody = binaryBody;
+      this.isBinaryBody = true;
+    } else {
+      this._body = body || "";
+      this.isBinaryBody = false;
+    }
+    this.escapeHeaderValues = escapeHeaderValues || false;
+    this.skipContentLengthHeader = skipContentLengthHeader || false;
+  }
+  /**
+   * body of the frame
+   */
+  get body() {
+    if (!this._body && this.isBinaryBody) {
+      this._body = new TextDecoder().decode(this._binaryBody);
+    }
+    return this._body;
+  }
+  /**
+   * body as Uint8Array
+   */
+  get binaryBody() {
+    if (!this._binaryBody && !this.isBinaryBody) {
+      this._binaryBody = new TextEncoder().encode(this._body);
+    }
+    return this._binaryBody;
+  }
+  /**
+   * deserialize a STOMP Frame from raw data.
+   *
+   * @internal
+   */
+  static fromRawFrame(rawFrame, escapeHeaderValues) {
+    const headers = {};
+    const trim = str => str.replace(/^\s+|\s+$/g, "");
+    // In case of repeated headers, as per standards, first value need to be used
+    for (const header of rawFrame.headers.reverse()) {
+      const key = trim(header[0]);
+      let value = trim(header[1]);
+      if (
+        escapeHeaderValues &&
+        rawFrame.command !== "CONNECT" &&
+        rawFrame.command !== "CONNECTED"
+      ) {
+        value = FrameImpl.hdrValueUnEscape(value);
+      }
+      headers[key] = value;
+    }
+    return new FrameImpl({
+      command: rawFrame.command,
+      headers,
+      binaryBody: rawFrame.binaryBody,
+      escapeHeaderValues,
+    });
+  }
+  /**
+   * @internal
+   */
+  toString() {
+    return this.serializeCmdAndHeaders();
+  }
+  /**
+   * serialize this Frame in a format suitable to be passed to WebSocket.
+   * If the body is string the output will be string.
+   * If the body is binary (i.e. of type Unit8Array) it will be serialized to ArrayBuffer.
+   *
+   * @internal
+   */
+  serialize() {
+    const cmdAndHeaders = this.serializeCmdAndHeaders();
+    if (this.isBinaryBody) {
+      return FrameImpl.toUnit8Array(cmdAndHeaders, this._binaryBody).buffer;
+    }
+    return cmdAndHeaders + this._body + BYTE.NULL;
+  }
+  serializeCmdAndHeaders() {
+    const lines = [this.command];
+    if (this.skipContentLengthHeader) {
+      delete this.headers["content-length"];
+    }
+    for (const name of Object.keys(this.headers || {})) {
+      const value = this.headers[name];
+      if (
+        this.escapeHeaderValues &&
+        this.command !== "CONNECT" &&
+        this.command !== "CONNECTED"
+      ) {
+        lines.push(`${name}:${FrameImpl.hdrValueEscape(`${value}`)}`);
+      } else {
+        lines.push(`${name}:${value}`);
+      }
+    }
+    if (
+      this.isBinaryBody ||
+      (!this.isBodyEmpty() && !this.skipContentLengthHeader)
+    ) {
+      lines.push(`content-length:${this.bodyLength()}`);
+    }
+    return lines.join(BYTE.LF) + BYTE.LF + BYTE.LF;
+  }
+  isBodyEmpty() {
+    return this.bodyLength() === 0;
+  }
+  bodyLength() {
+    const binaryBody = this.binaryBody;
+    return binaryBody ? binaryBody.length : 0;
+  }
+  /**
+   * Compute the size of a UTF-8 string by counting its number of bytes
+   * (and not the number of characters composing the string)
+   */
+  static sizeOfUTF8(s) {
+    return s ? new TextEncoder().encode(s).length : 0;
+  }
+  static toUnit8Array(cmdAndHeaders, binaryBody) {
+    const uint8CmdAndHeaders = new TextEncoder().encode(cmdAndHeaders);
+    const nullTerminator = new Uint8Array([0]);
+    const uint8Frame = new Uint8Array(
+      uint8CmdAndHeaders.length + binaryBody.length + nullTerminator.length
+    );
+    uint8Frame.set(uint8CmdAndHeaders);
+    uint8Frame.set(binaryBody, uint8CmdAndHeaders.length);
+    uint8Frame.set(
+      nullTerminator,
+      uint8CmdAndHeaders.length + binaryBody.length
+    );
+    return uint8Frame;
+  }
+  /**
+   * Serialize a STOMP frame as per STOMP standards, suitable to be sent to the STOMP broker.
+   *
+   * @internal
+   */
+  static marshall(params) {
+    const frame = new FrameImpl(params);
+    return frame.serialize();
+  }
+  /**
+   *  Escape header values
+   */
+  static hdrValueEscape(str) {
+    return str
+      .replace(/\\/g, "\\\\")
+      .replace(/\r/g, "\\r")
+      .replace(/\n/g, "\\n")
+      .replace(/:/g, "\\c");
+  }
+  /**
+   * UnEscape header values
+   */
+  static hdrValueUnEscape(str) {
+    return str
+      .replace(/\\r/g, "\r")
+      .replace(/\\n/g, "\n")
+      .replace(/\\c/g, ":")
+      .replace(/\\\\/g, "\\");
+  }
+}
+
+module.exports = { Frame: FrameImpl };
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js b/devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js
new file mode 100644
index 0000000000..d5d441c543
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const frameModule = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/frame.js");
+const {
+  Parser,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/parser.js");
+const {
+  parseJSON,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { Frame } = frameModule;
+
+function parseStompJs(message) {
+  let output;
+
+  function onFrame(rawFrame) {
+    const frame = Frame.fromRawFrame(rawFrame);
+    const { error, json } = parseJSON(frame.body);
+
+    output = {
+      command: frame.command,
+      headers: frame.headers,
+      body: error ? frame.body : json,
+    };
+  }
+  const onIncomingPing = () => {};
+  const parser = new Parser(onFrame, onIncomingPing);
+
+  parser.parseChunk(message);
+
+  return output;
+}
+
+module.exports = {
+  parseStompJs,
+};
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/stomp/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/stomp/moz.build
new file mode 100644
index 0000000000..420c7479db
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/stomp/moz.build
@@ -0,0 +1,10 @@
+# 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(
+    "byte.js",
+    "frame.js",
+    "index.js",
+    "parser.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/stomp/parser.js b/devtools/client/netmonitor/src/components/messages/parsers/stomp/parser.js
new file mode 100644
index 0000000000..a7116627d3
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/stomp/parser.js
@@ -0,0 +1,230 @@
+/*
+ * Copyright (c) 2018 Deepak Kumar
+ *
+ * MIT License
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * https://github.com/stomp-js/stompjs
+ * https://github.com/stomp-js/stompjs/blob/develop/src/parser.ts
+ */
+
+"use strict";
+
+/**
+ * @internal
+ */
+const NULL = 0;
+/**
+ * @internal
+ */
+const LF = 10;
+/**
+ * @internal
+ */
+const CR = 13;
+/**
+ * @internal
+ */
+const COLON = 58;
+/**
+ * This is an evented, rec descent parser.
+ * A stream of Octets can be passed and whenever it recognizes
+ * a complete Frame or an incoming ping it will invoke the registered callbacks.
+ *
+ * All incoming Octets are fed into _onByte function.
+ * Depending on current state the _onByte function keeps changing.
+ * Depending on the state it keeps accumulating into _token and _results.
+ * State is indicated by current value of _onByte, all states are named as _collect.
+ *
+ * STOMP standards https://stomp.github.io/stomp-specification-1.2.html
+ * imply that all lengths are considered in bytes (instead of string lengths).
+ * So, before actual parsing, if the incoming data is String it is converted to Octets.
+ * This allows faithful implementation of the protocol and allows NULL Octets to be present in the body.
+ *
+ * There is no peek function on the incoming data.
+ * When a state change occurs based on an Octet without consuming the Octet,
+ * the Octet, after state change, is fed again (_reinjectByte).
+ * This became possible as the state change can be determined by inspecting just one Octet.
+ *
+ * There are two modes to collect the body, if content-length header is there then it by counting Octets
+ * otherwise it is determined by NULL terminator.
+ *
+ * Following the standards, the command and headers are converted to Strings
+ * and the body is returned as Octets.
+ * Headers are returned as an array and not as Hash - to allow multiple occurrence of an header.
+ *
+ * This parser does not use Regular Expressions as that can only operate on Strings.
+ *
+ * It handles if multiple STOMP frames are given as one chunk, a frame is split into multiple chunks, or
+ * any combination there of. The parser remembers its state (any partial frame) and continues when a new chunk
+ * is pushed.
+ *
+ * Typically the higher level function will convert headers to Hash, handle unescaping of header values
+ * (which is protocol version specific), and convert body to text.
+ *
+ * Check the parser.spec.js to understand cases that this parser is supposed to handle.
+ *
+ * Part of `@stomp/stompjs`.
+ *
+ * @internal
+ */
+class Parser {
+  constructor(onFrame, onIncomingPing) {
+    this.onFrame = onFrame;
+    this.onIncomingPing = onIncomingPing;
+    this._encoder = new TextEncoder();
+    this._decoder = new TextDecoder();
+    this._token = [];
+    this._initState();
+  }
+  parseChunk(segment, appendMissingNULLonIncoming = false) {
+    let chunk;
+    if (segment instanceof ArrayBuffer) {
+      chunk = new Uint8Array(segment);
+    } else {
+      chunk = this._encoder.encode(segment);
+    }
+    // See https://github.com/stomp-js/stompjs/issues/89
+    // Remove when underlying issue is fixed.
+    //
+    // Send a NULL byte, if the last byte of a Text frame was not NULL.F
+    if (appendMissingNULLonIncoming && chunk[chunk.length - 1] !== 0) {
+      const chunkWithNull = new Uint8Array(chunk.length + 1);
+      chunkWithNull.set(chunk, 0);
+      chunkWithNull[chunk.length] = 0;
+      chunk = chunkWithNull;
+    }
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < chunk.length; i++) {
+      const byte = chunk[i];
+      this._onByte(byte);
+    }
+  }
+  // The following implements a simple Rec Descent Parser.
+  // The grammar is simple and just one byte tells what should be the next state
+  _collectFrame(byte) {
+    if (byte === NULL) {
+      // Ignore
+      return;
+    }
+    if (byte === CR) {
+      // Ignore CR
+      return;
+    }
+    if (byte === LF) {
+      // Incoming Ping
+      this.onIncomingPing();
+      return;
+    }
+    this._onByte = this._collectCommand;
+    this._reinjectByte(byte);
+  }
+  _collectCommand(byte) {
+    if (byte === CR) {
+      // Ignore CR
+      return;
+    }
+    if (byte === LF) {
+      this._results.command = this._consumeTokenAsUTF8();
+      this._onByte = this._collectHeaders;
+      return;
+    }
+    this._consumeByte(byte);
+  }
+  _collectHeaders(byte) {
+    if (byte === CR) {
+      // Ignore CR
+      return;
+    }
+    if (byte === LF) {
+      this._setupCollectBody();
+      return;
+    }
+    this._onByte = this._collectHeaderKey;
+    this._reinjectByte(byte);
+  }
+  _reinjectByte(byte) {
+    this._onByte(byte);
+  }
+  _collectHeaderKey(byte) {
+    if (byte === COLON) {
+      this._headerKey = this._consumeTokenAsUTF8();
+      this._onByte = this._collectHeaderValue;
+      return;
+    }
+    this._consumeByte(byte);
+  }
+  _collectHeaderValue(byte) {
+    if (byte === CR) {
+      // Ignore CR
+      return;
+    }
+    if (byte === LF) {
+      this._results.headers.push([this._headerKey, this._consumeTokenAsUTF8()]);
+      this._headerKey = undefined;
+      this._onByte = this._collectHeaders;
+      return;
+    }
+    this._consumeByte(byte);
+  }
+  _setupCollectBody() {
+    const contentLengthHeader = this._results.headers.filter(header => {
+      return header[0] === "content-length";
+    })[0];
+    if (contentLengthHeader) {
+      this._bodyBytesRemaining = parseInt(contentLengthHeader[1], 10);
+      this._onByte = this._collectBodyFixedSize;
+    } else {
+      this._onByte = this._collectBodyNullTerminated;
+    }
+  }
+  _collectBodyNullTerminated(byte) {
+    if (byte === NULL) {
+      this._retrievedBody();
+      return;
+    }
+    this._consumeByte(byte);
+  }
+  _collectBodyFixedSize(byte) {
+    // It is post decrement, so that we discard the trailing NULL octet
+    if (this._bodyBytesRemaining-- === 0) {
+      this._retrievedBody();
+      return;
+    }
+    this._consumeByte(byte);
+  }
+  _retrievedBody() {
+    this._results.binaryBody = this._consumeTokenAsRaw();
+    this.onFrame(this._results);
+    this._initState();
+  }
+  // Rec Descent Parser helpers
+  _consumeByte(byte) {
+    this._token.push(byte);
+  }
+  _consumeTokenAsUTF8() {
+    return this._decoder.decode(this._consumeTokenAsRaw());
+  }
+  _consumeTokenAsRaw() {
+    const rawResult = new Uint8Array(this._token);
+    this._token = [];
+    return rawResult;
+  }
+  _initState() {
+    this._results = {
+      command: undefined,
+      headers: [],
+      binaryBody: undefined,
+    };
+    this._token = [];
+    this._headerKey = undefined;
+    this._onByte = this._collectFrame;
+  }
+}
+
+module.exports = { Parser };
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/wamp/arrayParser.js b/devtools/client/netmonitor/src/components/messages/parsers/wamp/arrayParser.js
new file mode 100644
index 0000000000..de73a7986c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/wamp/arrayParser.js
@@ -0,0 +1,274 @@
+/* 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";
+
+// An implementation for WAMP messages parsing https://wamp-proto.org/
+var WampMessageType;
+(function (wampMessageTypeEnum) {
+  wampMessageTypeEnum[(wampMessageTypeEnum.Hello = 1)] = "Hello";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Welcome = 2)] = "Welcome";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Abort = 3)] = "Abort";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Challenge = 4)] = "Challenge";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Authenticate = 5)] = "Authenticate";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Goodbye = 6)] = "Goodbye";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Error = 8)] = "Error";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Publish = 16)] = "Publish";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Published = 17)] = "Published";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Subscribe = 32)] = "Subscribe";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Subscribed = 33)] = "Subscribed";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Unsubscribe = 34)] = "Unsubscribe";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Unsubscribed = 35)] = "Unsubscribed";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Event = 36)] = "Event";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Call = 48)] = "Call";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Cancel = 49)] = "Cancel";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Result = 50)] = "Result";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Register = 64)] = "Register";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Registered = 65)] = "Registered";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Unregister = 66)] = "Unregister";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Unregistered = 67)] = "Unregistered";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Invocation = 68)] = "Invocation";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Interrupt = 69)] = "Interrupt";
+  wampMessageTypeEnum[(wampMessageTypeEnum.Yield = 70)] = "Yield";
+})(WampMessageType || (WampMessageType = {}));
+
+// The WAMP protocol consists of many messages, disable complexity for one time
+// eslint-disable-next-line complexity
+function parseWampArray(messageArray) {
+  const [messageType, ...args] = messageArray;
+  switch (messageType) {
+    case WampMessageType.Hello:
+      return new HelloMessage(args);
+    case WampMessageType.Welcome:
+      return new WelcomeMessage(args);
+    case WampMessageType.Abort:
+      return new AbortMessage(args);
+    case WampMessageType.Challenge:
+      return new ChallengeMessage(args);
+    case WampMessageType.Authenticate:
+      return new AuthenticateMessage(args);
+    case WampMessageType.Goodbye:
+      return new GoodbyeMessage(args);
+    case WampMessageType.Error:
+      return new ErrorMessage(args);
+    case WampMessageType.Publish:
+      return new PublishMessage(args);
+    case WampMessageType.Published:
+      return new PublishedMessage(args);
+    case WampMessageType.Subscribe:
+      return new SubscribeMessage(args);
+    case WampMessageType.Subscribed:
+      return new SubscribedMessage(args);
+    case WampMessageType.Unsubscribe:
+      return new UnsubscribeMessage(args);
+    case WampMessageType.Unsubscribed:
+      return new UnsubscribedMessage(args);
+    case WampMessageType.Event:
+      return new EventMessage(args);
+    case WampMessageType.Call:
+      return new CallMessage(args);
+    case WampMessageType.Cancel:
+      return new CancelMessage(args);
+    case WampMessageType.Result:
+      return new ResultMessage(args);
+    case WampMessageType.Register:
+      return new RegisterMessage(args);
+    case WampMessageType.Registered:
+      return new RegisteredMessage(args);
+    case WampMessageType.Unregister:
+      return new UnregisterMessage(args);
+    case WampMessageType.Unregistered:
+      return new UnregisteredMessage(args);
+    case WampMessageType.Invocation:
+      return new InvocationMessage(args);
+    case WampMessageType.Interrupt:
+      return new InterruptMessage(args);
+    case WampMessageType.Yield:
+      return new YieldMessage(args);
+    default:
+      return null;
+  }
+}
+class WampMessage {
+  constructor(code) {
+    this.messageCode = code;
+    this.messageName = WampMessageType[code].toUpperCase();
+  }
+}
+class HelloMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Hello);
+    [this.realm, this.details] = messageArgs;
+  }
+}
+class WelcomeMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Welcome);
+    [this.session, this.details] = messageArgs;
+  }
+}
+class AbortMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Abort);
+    [this.details, this.reason] = messageArgs;
+  }
+}
+class ChallengeMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Challenge);
+    [this.authMethod, this.extra] = messageArgs;
+  }
+}
+class AuthenticateMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Authenticate);
+    [this.signature, this.extra] = messageArgs;
+  }
+}
+class GoodbyeMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Goodbye);
+    [this.details, this.reason] = messageArgs;
+  }
+}
+class ErrorMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Error);
+    [
+      this.type,
+      this.request,
+      this.details,
+      this.error,
+      this.arguments,
+      this.argumentsKw,
+    ] = messageArgs;
+  }
+}
+class PublishMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Publish);
+    [this.request, this.options, this.topic, this.arguments, this.argumentsKw] =
+      messageArgs;
+  }
+}
+class PublishedMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Published);
+    [this.request, this.publication] = messageArgs;
+  }
+}
+class SubscribeMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Subscribe);
+    [this.request, this.options, this.topic] = messageArgs;
+  }
+}
+class SubscribedMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Subscribed);
+    [this.request, this.subscription] = messageArgs;
+  }
+}
+class UnsubscribeMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Unsubscribe);
+    [this.request, this.subscription] = messageArgs;
+  }
+}
+class UnsubscribedMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Unsubscribed);
+    [this.request] = messageArgs;
+  }
+}
+class EventMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Event);
+    [
+      this.subscription,
+      this.publication,
+      this.details,
+      this.arguments,
+      this.argumentsKw,
+    ] = messageArgs;
+  }
+}
+class CallMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Call);
+    [
+      this.request,
+      this.options,
+      this.procedure,
+      this.arguments,
+      this.argumentsKw,
+    ] = messageArgs;
+  }
+}
+class CancelMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Cancel);
+    [this.request, this.options] = messageArgs;
+  }
+}
+class ResultMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Result);
+    [this.request, this.details, this.arguments, this.argumentsKw] =
+      messageArgs;
+  }
+}
+class RegisterMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Register);
+    [this.request, this.options, this.procedure] = messageArgs;
+  }
+}
+class RegisteredMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Registered);
+    [this.request, this.registration] = messageArgs;
+  }
+}
+class UnregisterMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Unregister);
+    [this.request, this.registration] = messageArgs;
+  }
+}
+class UnregisteredMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Unregistered);
+    [this.request] = messageArgs;
+  }
+}
+class InvocationMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Invocation);
+    [
+      this.request,
+      this.registration,
+      this.details,
+      this.arguments,
+      this.argumentsKw,
+    ] = messageArgs;
+  }
+}
+class InterruptMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Interrupt);
+    [this.request, this.options] = messageArgs;
+  }
+}
+class YieldMessage extends WampMessage {
+  constructor(messageArgs) {
+    super(WampMessageType.Yield);
+    [this.request, this.options, this.arguments, this.argumentsKw] =
+      messageArgs;
+  }
+}
+
+module.exports = {
+  parseWampArray,
+};
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/wamp/moz.build b/devtools/client/netmonitor/src/components/messages/parsers/wamp/moz.build
new file mode 100644
index 0000000000..b6b7c91036
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/wamp/moz.build
@@ -0,0 +1,8 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "arrayParser.js",
+    "serializers.js",
+)
diff --git a/devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js b/devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js
new file mode 100644
index 0000000000..c2139d320c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js
@@ -0,0 +1,73 @@
+/* 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 {
+  parseWampArray,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/wamp/arrayParser.js");
+const msgpack = require("resource://devtools/client/netmonitor/src/components/messages/msgpack.js");
+const cbor = require("resource://devtools/client/netmonitor/src/components/messages/cbor.js");
+
+class WampSerializer {
+  deserializeMessage(payload) {
+    const array = this.deserializeToArray(payload);
+    const result = parseWampArray(array);
+    return result;
+  }
+
+  stringToBinary(str) {
+    const result = new Uint8Array(str.length);
+    for (let i = 0; i < str.length; i++) {
+      result[i] = str[i].charCodeAt(0);
+    }
+    return result;
+  }
+}
+
+class JsonSerializer extends WampSerializer {
+  constructor() {
+    super(...arguments);
+    this.subProtocol = "wamp.2.json";
+    this.description = "WAMP JSON";
+  }
+  deserializeToArray(payload) {
+    return JSON.parse(payload);
+  }
+}
+
+class MessagePackSerializer extends WampSerializer {
+  constructor() {
+    super(...arguments);
+    this.subProtocol = "wamp.2.msgpack";
+    this.description = "WAMP MessagePack";
+  }
+  deserializeToArray(payload) {
+    const binary = this.stringToBinary(payload);
+    return msgpack.deserialize(binary);
+  }
+}
+
+class CBORSerializer extends WampSerializer {
+  constructor() {
+    super(...arguments);
+    this.subProtocol = "wamp.2.cbor";
+    this.description = "WAMP CBOR";
+  }
+  deserializeToArray(payload) {
+    const binaryBuffer = this.stringToBinary(payload).buffer;
+    return cbor.decode(binaryBuffer);
+  }
+}
+
+const serializers = {};
+for (var serializer of [
+  new JsonSerializer(),
+  new MessagePackSerializer(),
+  new CBORSerializer(),
+]) {
+  serializers[serializer.subProtocol] = serializer;
+}
+
+module.exports = { wampSerializers: serializers };
diff --git a/devtools/client/netmonitor/src/components/moz.build b/devtools/client/netmonitor/src/components/moz.build
new file mode 100644
index 0000000000..98d821338f
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -0,0 +1,28 @@
+# 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 += [
+    "messages",
+    "new-request",
+    "previews",
+    "request-blocking",
+    "request-details",
+    "request-list",
+    "search",
+]
+
+DevToolsModules(
+    "App.js",
+    "CustomRequestPanel.js",
+    "DropHarHandler.js",
+    "MonitorPanel.js",
+    "NetworkActionBar.js",
+    "SecurityState.js",
+    "SourceEditor.js",
+    "StatisticsPanel.js",
+    "StatusBar.js",
+    "StatusCode.js",
+    "TabboxPanel.js",
+    "Toolbar.js",
+)
diff --git a/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js b/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js
new file mode 100644
index 0000000000..826f0317ba
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/new-request/HTTPCustomRequestPanel.js
@@ -0,0 +1,511 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const asyncStorage = require("resource://devtools/shared/async-storage.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  getClickedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getUrlQuery,
+  parseQueryString,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const InputMap = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/new-request/InputMap.js")
+);
+const { button, div, footer, label, textarea, select, option } = dom;
+
+const CUSTOM_HEADERS = L10N.getStr("netmonitor.custom.newRequestHeaders");
+const CUSTOM_NEW_REQUEST_URL_LABEL = L10N.getStr(
+  "netmonitor.custom.newRequestUrlLabel"
+);
+const CUSTOM_POSTDATA = L10N.getStr("netmonitor.custom.postBody");
+const CUSTOM_POSTDATA_PLACEHOLDER = L10N.getStr(
+  "netmonitor.custom.postBody.placeholder"
+);
+const CUSTOM_QUERY = L10N.getStr("netmonitor.custom.urlParameters");
+const CUSTOM_SEND = L10N.getStr("netmonitor.custom.send");
+const CUSTOM_CLEAR = L10N.getStr("netmonitor.custom.clear");
+
+const FIREFOX_DEFAULT_HEADERS = [
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Connection",
+  "Content-Length",
+  "Cookie",
+  "Cookie2",
+  "Date",
+  "DNT",
+  "Expect",
+  "Feature-Policy",
+  "Host",
+  "Keep-Alive",
+  "Origin",
+  "Proxy-",
+  "Sec-",
+  "Referer",
+  "TE",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade",
+  "Via",
+];
+// This does not include the CONNECT method as it is restricted and special.
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=1769572#c2 for details
+const HTTP_METHODS = [
+  "GET",
+  "HEAD",
+  "POST",
+  "DELETE",
+  "PUT",
+  "OPTIONS",
+  "TRACE",
+  "PATCH",
+];
+
+/*
+ * HTTP Custom request panel component
+ * A network request panel which enables creating and sending new requests
+ * or selecting, editing and re-sending current requests.
+ */
+class HTTPCustomRequestPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      request: PropTypes.object,
+      sendCustomRequest: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      method: HTTP_METHODS[0],
+      url: "",
+      urlQueryParams: [],
+      headers: [],
+      postBody: "",
+      // Flag to know the data from either the request or the async storage has
+      // been loaded in componentDidMount
+      _isStateDataReady: false,
+    };
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleChangeURL = this.handleChangeURL.bind(this);
+    this.updateInputMapItem = this.updateInputMapItem.bind(this);
+    this.addInputMapItem = this.addInputMapItem.bind(this);
+    this.deleteInputMapItem = this.deleteInputMapItem.bind(this);
+    this.checkInputMapItem = this.checkInputMapItem.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.createQueryParamsListFromURL =
+      this.createQueryParamsListFromURL.bind(this);
+    this.onUpdateQueryParams = this.onUpdateQueryParams.bind(this);
+  }
+
+  async componentDidMount() {
+    let { connector, request } = this.props;
+    const persistedCustomRequest = await asyncStorage.getItem(
+      "devtools.netmonitor.customRequest"
+    );
+    request = request || persistedCustomRequest;
+
+    if (!request) {
+      this.setState({ _isStateDataReady: true });
+      return;
+    }
+
+    // We need this part because in the asyncStorage we are saving the request in one format
+    // and from the edit and resend it comes in a different form with different properties,
+    // so we need this to nomalize the request.
+    if (request.requestHeaders) {
+      request.headers = request.requestHeaders.headers;
+    }
+
+    if (request.requestPostData?.postData?.text) {
+      request.postBody = request.requestPostData.postData.text;
+    }
+
+    const headers = request.headers
+      .map(({ name, value }) => {
+        return {
+          name,
+          value,
+          checked: true,
+          disabled: FIREFOX_DEFAULT_HEADERS.some(i => name.startsWith(i)),
+        };
+      })
+      .sort((a, b) => {
+        if (a.disabled && !b.disabled) {
+          return -1;
+        }
+        if (!a.disabled && b.disabled) {
+          return 1;
+        }
+        return 0;
+      });
+
+    if (request.requestPostDataAvailable && !request.postBody) {
+      const requestData = await connector.requestData(
+        request.id,
+        "requestPostData"
+      );
+      request.postBody = requestData.postData.text;
+    }
+
+    this.setState({
+      method: request.method,
+      url: request.url,
+      urlQueryParams: this.createQueryParamsListFromURL(request.url),
+      headers,
+      postBody: request.postBody,
+      _isStateDataReady: true,
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // This is when the query params change in the url params input map
+    if (
+      prevState.urlQueryParams !== this.state.urlQueryParams &&
+      prevState.url === this.state.url
+    ) {
+      this.onUpdateQueryParams();
+    }
+  }
+
+  componentWillUnmount() {
+    asyncStorage.setItem("devtools.netmonitor.customRequest", this.state);
+  }
+
+  handleChangeURL(event) {
+    const { value } = event.target;
+
+    this.setState({
+      url: value,
+      urlQueryParams: this.createQueryParamsListFromURL(value),
+    });
+  }
+
+  handleInputChange(event) {
+    const { name, value } = event.target;
+    const newState = {
+      [name]: value,
+    };
+
+    // If the message body changes lets make sure we
+    // keep the content-length up to date.
+    if (name == "postBody") {
+      newState.headers = this.state.headers.map(header => {
+        if (header.name == "Content-Length") {
+          header.value = value.length;
+        }
+        return header;
+      });
+    }
+
+    this.setState(newState);
+  }
+
+  updateInputMapItem(stateName, event) {
+    const { name, value } = event.target;
+    const [prop, index] = name.split("-");
+    const updatedList = [...this.state[stateName]];
+    updatedList[Number(index)][prop] = value;
+
+    this.setState({
+      [stateName]: updatedList,
+    });
+  }
+
+  addInputMapItem(stateName, name, value) {
+    this.setState({
+      [stateName]: [
+        ...this.state[stateName],
+        { name, value, checked: true, disabled: false },
+      ],
+    });
+  }
+
+  deleteInputMapItem(stateName, index) {
+    this.setState({
+      [stateName]: this.state[stateName].filter((_, i) => i !== index),
+    });
+  }
+
+  checkInputMapItem(stateName, index, checked) {
+    this.setState({
+      [stateName]: this.state[stateName].map((item, i) => {
+        if (index === i) {
+          return {
+            ...item,
+            checked,
+          };
+        }
+        return item;
+      }),
+    });
+  }
+
+  onUpdateQueryParams() {
+    const { urlQueryParams, url } = this.state;
+    let queryString = "";
+    for (const { name, value, checked } of urlQueryParams) {
+      if (checked) {
+        queryString += `${encodeURIComponent(name)}=${encodeURIComponent(
+          value
+        )}&`;
+      }
+    }
+
+    let finalURL = url.split("?")[0];
+
+    if (queryString.length) {
+      finalURL += `?${queryString.substring(0, queryString.length - 1)}`;
+    }
+    this.setState({
+      url: finalURL,
+    });
+  }
+
+  createQueryParamsListFromURL(url = "") {
+    const parsedQuery = parseQueryString(getUrlQuery(url) || url.split("?")[1]);
+    const queryArray = parsedQuery || [];
+    return queryArray.map(({ name, value }) => {
+      return {
+        checked: true,
+        name,
+        value,
+      };
+    });
+  }
+
+  handleClear() {
+    this.setState({
+      method: HTTP_METHODS[0],
+      url: "",
+      urlQueryParams: [],
+      headers: [],
+      postBody: "",
+    });
+  }
+
+  render() {
+    return div(
+      { className: "http-custom-request-panel" },
+      div(
+        { className: "http-custom-request-panel-content" },
+        div(
+          {
+            className: "tabpanel-summary-container http-custom-method-and-url",
+            id: "http-custom-method-and-url",
+          },
+          select(
+            {
+              className: "http-custom-method-value",
+              id: "http-custom-method-value",
+              name: "method",
+              onChange: this.handleInputChange,
+              onBlur: this.handleInputChange,
+              value: this.state.method,
+            },
+
+            HTTP_METHODS.map(item =>
+              option(
+                {
+                  value: item,
+                  key: item,
+                },
+                item
+              )
+            )
+          ),
+          div(
+            {
+              className: "auto-growing-textarea",
+              "data-replicated-value": this.state.url,
+              title: this.state.url,
+            },
+            textarea({
+              className: "http-custom-url-value",
+              id: "http-custom-url-value",
+              name: "url",
+              placeholder: CUSTOM_NEW_REQUEST_URL_LABEL,
+              onChange: event => {
+                this.handleChangeURL(event);
+              },
+              onBlur: this.handleTextareaChange,
+              value: this.state.url,
+              rows: 1,
+            })
+          )
+        ),
+        div(
+          {
+            className: "tabpanel-summary-container http-custom-section",
+            id: "http-custom-query",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "http-custom-query-value",
+            },
+            CUSTOM_QUERY
+          ),
+          // This is the input map for the Url Parameters Component
+          InputMap({
+            list: this.state.urlQueryParams,
+            onUpdate: event => {
+              this.updateInputMapItem(
+                "urlQueryParams",
+                event,
+                this.onUpdateQueryParams
+              );
+            },
+            onAdd: (name, value) =>
+              this.addInputMapItem(
+                "urlQueryParams",
+                name,
+                value,
+                this.onUpdateQueryParams
+              ),
+            onDelete: index =>
+              this.deleteInputMapItem(
+                "urlQueryParams",
+                index,
+                this.onUpdateQueryParams
+              ),
+            onChecked: (index, checked) => {
+              this.checkInputMapItem(
+                "urlQueryParams",
+                index,
+                checked,
+                this.onUpdateQueryParams
+              );
+            },
+          })
+        ),
+        div(
+          {
+            id: "http-custom-headers",
+            className: "tabpanel-summary-container http-custom-section",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "custom-headers-value",
+            },
+            CUSTOM_HEADERS
+          ),
+          // This is the input map for the Headers Component
+          InputMap({
+            ref: this.headersListRef,
+            list: this.state.headers,
+            onUpdate: event => {
+              this.updateInputMapItem("headers", event);
+            },
+            onAdd: (name, value) =>
+              this.addInputMapItem("headers", name, value),
+            onDelete: index => this.deleteInputMapItem("headers", index),
+            onChecked: (index, checked) => {
+              this.checkInputMapItem("headers", index, checked);
+            },
+          })
+        ),
+        div(
+          {
+            id: "http-custom-postdata",
+            className: "tabpanel-summary-container http-custom-section",
+          },
+          label(
+            {
+              className: "http-custom-request-label",
+              htmlFor: "http-custom-postdata-value",
+            },
+            CUSTOM_POSTDATA
+          ),
+          textarea({
+            className: "tabpanel-summary-input",
+            id: "http-custom-postdata-value",
+            name: "postBody",
+            placeholder: CUSTOM_POSTDATA_PLACEHOLDER,
+            onChange: this.handleInputChange,
+            rows: 6,
+            value: this.state.postBody,
+            wrap: "off",
+          })
+        )
+      ),
+      footer(
+        { className: "http-custom-request-button-container" },
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-clear-button",
+            onClick: this.handleClear,
+          },
+          CUSTOM_CLEAR
+        ),
+        button(
+          {
+            className: "devtools-button",
+            id: "http-custom-request-send-button",
+            disabled:
+              !this.state._isStateDataReady ||
+              !this.state.url ||
+              !this.state.method,
+            onClick: () => {
+              const newRequest = {
+                method: this.state.method,
+                url: this.state.url,
+                cause: this.props.request?.cause,
+                urlQueryParams: this.state.urlQueryParams.map(
+                  ({ checked, ...params }) => params
+                ),
+                requestHeaders: {
+                  headers: this.state.headers
+                    .filter(({ checked }) => checked)
+                    .map(({ checked, ...headersValues }) => headersValues),
+                },
+              };
+
+              if (this.state.postBody) {
+                newRequest.requestPostData = {
+                  postData: {
+                    text: this.state.postBody,
+                  },
+                };
+              }
+              this.props.sendCustomRequest(newRequest);
+            },
+          },
+          CUSTOM_SEND
+        )
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({ request: getClickedRequest(state) }),
+  (dispatch, props) => ({
+    sendCustomRequest: request =>
+      dispatch(Actions.sendHTTPCustomRequest(request)),
+  })
+)(HTTPCustomRequestPanel);
diff --git a/devtools/client/netmonitor/src/components/new-request/InputMap.js b/devtools/client/netmonitor/src/components/new-request/InputMap.js
new file mode 100644
index 0000000000..6e9eff2845
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/new-request/InputMap.js
@@ -0,0 +1,211 @@
+/* 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 {
+  Component,
+  createRef,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div, input, textarea, button } = dom;
+
+const CUSTOM_NEW_REQUEST_INPUT_NAME = L10N.getStr(
+  "netmonitor.custom.placeholder.name"
+);
+
+const CUSTOM_NEW_REQUEST_INPUT_VALUE = L10N.getStr(
+  "netmonitor.custom.placeholder.value"
+);
+
+const REMOVE_ITEM = L10N.getStr("netmonitor.custom.removeItem");
+
+/**
+ * Editable name and value list component with optional form to add new items
+ **/
+class InputMap extends Component {
+  static get propTypes() {
+    return {
+      list: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+          value: PropTypes.string.isRequired,
+          disabled: PropTypes.bool,
+        })
+      ).isRequired,
+      onUpdate: PropTypes.func,
+      onAdd: PropTypes.func,
+      onDelete: PropTypes.func,
+      onChange: PropTypes.func,
+      onChecked: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.listRef = createRef();
+
+    this.state = {
+      name: "",
+      value: "",
+    };
+  }
+
+  render() {
+    const { list, onUpdate, onAdd, onDelete, onChecked } = this.props;
+    const { name, value } = this.state;
+
+    // Adds a new item with name and value when the user starts typing on the form
+    const onKeyDown = event => {
+      const { target } = event;
+      onAdd(name, value);
+      this.setState({ name: "", value: "" }, () => {
+        // Get next to last child on the list,
+        // because that was the item that was just added and
+        // we need to focous on it, so the user can keep editing it.
+        const targetParentNode =
+          this.listRef.current.childNodes?.[
+            this.listRef.current.childElementCount - 2
+          ];
+        targetParentNode?.querySelector(`.${target.className}`).focus();
+      });
+    };
+
+    return div(
+      {
+        ref: this.listRef,
+        className: "http-custom-input-and-map-form",
+      },
+      list.map((item, index) => {
+        return div(
+          {
+            className: "tabpanel-summary-container http-custom-input",
+            id: `http-custom-${item.name.toLowerCase()}`,
+            key: index,
+          },
+          input({
+            className: "tabpanel-summary-input-checkbox",
+            name: `checked-${index}`,
+            type: "checkbox",
+            onChange: event => {
+              onChecked(index, event.target.checked);
+            },
+            checked: item.checked,
+            disabled: !!item.disabled,
+            wrap: "off",
+          }),
+          div(
+            { className: "tabpanel-summary-input-name" },
+            div(
+              {
+                className: "auto-growing-textarea",
+                "data-replicated-value": item.name,
+                title: item.name,
+              },
+              textarea({
+                className: "http-custom-input-name",
+                name: `name-${index}`,
+                value: item.name,
+                disabled: !!item.disabled,
+                onChange: event => {
+                  onUpdate(event);
+                },
+                rows: 1,
+              })
+            )
+          ),
+          div(
+            { className: "tabpanel-summary-input-value" },
+            div(
+              {
+                className: "auto-growing-textarea",
+                "data-replicated-value": item.value,
+                title: item.value,
+              },
+              textarea({
+                className: "http-custom-input-value",
+                name: `value-${index}`,
+                placeholder: "value",
+                disabled: !!item.disabled,
+                onChange: event => {
+                  onUpdate(event);
+                },
+                value: item.value,
+                rows: 1,
+              })
+            )
+          ),
+          !item.disabled &&
+            onDelete &&
+            button({
+              className: "http-custom-delete-button",
+              title: REMOVE_ITEM,
+              "aria-label": REMOVE_ITEM,
+              onClick: () => onDelete(index),
+            })
+        );
+      }),
+      onAdd &&
+        div(
+          {
+            className: "map-add-new-inputs",
+          },
+          input({
+            className: "tabpanel-summary-input-checkbox",
+            onChange: () => {},
+            checked: true,
+            type: "checkbox",
+          }),
+          div(
+            { className: "tabpanel-summary-input-name" },
+            div(
+              {
+                className: "auto-growing-textarea",
+                "data-replicated-value": name,
+                title: value,
+              },
+              textarea({
+                className: "http-custom-input-name",
+                type: "text",
+                ref: "addInputName",
+                checked: true,
+                value: name,
+                rows: 1,
+                placeholder: CUSTOM_NEW_REQUEST_INPUT_NAME,
+                onChange: e => this.setState({ name: e.target.value }),
+                onKeyDown,
+              })
+            )
+          ),
+          div(
+            { className: "tabpanel-summary-input-value" },
+            div(
+              {
+                className: "auto-growing-textarea",
+                "data-replicated-value": value,
+                title: value,
+              },
+              textarea({
+                className: "http-custom-input-value",
+                type: "text",
+                ref: "addInputValue",
+                value,
+                onChange: e => this.setState({ value: e.target.value }),
+                rows: 1,
+                placeholder: CUSTOM_NEW_REQUEST_INPUT_VALUE,
+                onKeyDown,
+              })
+            )
+          )
+        )
+    );
+  }
+}
+
+module.exports = InputMap;
diff --git a/devtools/client/netmonitor/src/components/new-request/moz.build b/devtools/client/netmonitor/src/components/new-request/moz.build
new file mode 100644
index 0000000000..7e47799a22
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/new-request/moz.build
@@ -0,0 +1,8 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "HTTPCustomRequestPanel.js",
+    "InputMap.js",
+)
diff --git a/devtools/client/netmonitor/src/components/previews/FontPreview.js b/devtools/client/netmonitor/src/components/previews/FontPreview.js
new file mode 100644
index 0000000000..2692fdefa0
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/FontPreview.js
@@ -0,0 +1,135 @@
+/* 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 {
+  gDevTools,
+} = require("resource://devtools/client/framework/devtools.js");
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+const {
+  div,
+  img,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const { getColor } = require("resource://devtools/client/shared/theme.js");
+
+const FONT_NAME = L10N.getStr("netmonitor.response.name");
+const FONT_MIME_TYPE = L10N.getStr("netmonitor.response.mime");
+const FONT_PREVIEW_FAILED = L10N.getStr(
+  "netmonitor.response.fontPreviewFailed"
+);
+
+const FONT_PREVIEW_TEXT =
+  "ABCDEFGHIJKLM\nNOPQRSTUVWXYZ\nabcdefghijklm\nnopqrstuvwxyz\n0123456789";
+
+class FontPreview extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      mimeType: PropTypes.string,
+      url: PropTypes.string,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name: "",
+      dataURL: "",
+    };
+
+    this.onThemeChanged = this.onThemeChanged.bind(this);
+  }
+
+  componentDidMount() {
+    this.getPreview();
+
+    // Listen for theme changes as the color of the preview depends on the theme
+    gDevTools.on("theme-switched", this.onThemeChanged);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { url } = this.props;
+    if (prevProps.url !== url) {
+      this.getPreview();
+    }
+  }
+
+  componentWillUnmount() {
+    gDevTools.off("theme-switched", this.onThemeChanged);
+  }
+
+  /**
+   * Handler for the "theme-switched" event.
+   */
+  onThemeChanged(frame) {
+    if (frame === window) {
+      this.getPreview();
+    }
+  }
+
+  /**
+   * Generate the font preview and receives information about the font.
+   */
+  async getPreview() {
+    const { connector } = this.props;
+
+    const toolbox = connector.getToolbox();
+    const inspectorFront = await toolbox.target.getFront("inspector");
+    const { pageStyle } = inspectorFront;
+    const pageFontFaces = await pageStyle.getAllUsedFontFaces({
+      includePreviews: true,
+      includeVariations: false,
+      previewText: FONT_PREVIEW_TEXT,
+      previewFillStyle: getColor("body-color"),
+    });
+
+    const fontFace = pageFontFaces.find(
+      pageFontFace => pageFontFace.URI === this.props.url
+    );
+
+    this.setState({
+      name: fontFace?.name ?? "",
+      dataURL: (await fontFace?.preview.data.string()) ?? "",
+    });
+  }
+
+  render() {
+    const { mimeType } = this.props;
+    const { name, dataURL } = this.state;
+
+    if (dataURL === "") {
+      return div({ className: "empty-notice" }, FONT_PREVIEW_FAILED);
+    }
+
+    return div(
+      { className: "panel-container response-font-box devtools-monospace" },
+      img({
+        className: "response-font",
+        src: dataURL,
+        alt: "",
+      }),
+      div(
+        { className: "response-summary" },
+        div({ className: "tabpanel-summary-label" }, FONT_NAME),
+        div({ className: "tabpanel-summary-value" }, name)
+      ),
+      div(
+        { className: "response-summary" },
+        div({ className: "tabpanel-summary-label" }, FONT_MIME_TYPE),
+        div({ className: "tabpanel-summary-value" }, mimeType)
+      )
+    );
+  }
+}
+
+module.exports = FontPreview;
diff --git a/devtools/client/netmonitor/src/components/previews/HtmlPreview.js b/devtools/client/netmonitor/src/components/previews/HtmlPreview.js
new file mode 100644
index 0000000000..ab8c24fac0
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/HtmlPreview.js
@@ -0,0 +1,75 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/*
+ * Response preview component
+ * Display HTML content within a sandbox enabled iframe
+ */
+class HTMLPreview extends Component {
+  static get propTypes() {
+    return {
+      responseContent: PropTypes.object.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { container } = this.refs;
+    const iframe = container.ownerDocument.createXULElement("iframe");
+    this.iframe = iframe;
+    iframe.setAttribute("type", "content");
+    iframe.setAttribute("remote", "true");
+
+    // For some reason, when we try to select some text,
+    // a drag of the whole page is initiated.
+    // Workaround this by canceling any start of drag.
+    iframe.addEventListener("dragstart", e => e.preventDefault(), {
+      capture: true,
+    });
+
+    // Bug 1800916 allow interaction with the preview page until
+    // we find a way to prevent navigation without preventing copy paste from it.
+    //
+    // iframe.addEventListener("mousedown", e => e.preventDefault(), {
+    //   capture: true,
+    // });
+    container.appendChild(iframe);
+
+    // browsingContext attribute is only available after the iframe
+    // is attached to the DOM Tree.
+    iframe.browsingContext.allowJavascript = false;
+
+    this.#updatePreview();
+  }
+
+  componentDidUpdate() {
+    this.#updatePreview();
+  }
+
+  componentWillUnmount() {
+    this.iframe.remove();
+  }
+
+  #updatePreview() {
+    const { responseContent } = this.props;
+    const htmlBody = responseContent ? responseContent.content.text : "";
+    this.iframe.setAttribute(
+      "src",
+      "data:text/html;charset=UTF-8," + encodeURIComponent(htmlBody)
+    );
+  }
+
+  render() {
+    return dom.div({ className: "html-preview", ref: "container" });
+  }
+}
+
+module.exports = HTMLPreview;
diff --git a/devtools/client/netmonitor/src/components/previews/ImagePreview.js b/devtools/client/netmonitor/src/components/previews/ImagePreview.js
new file mode 100644
index 0000000000..003a7ec38e
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/ImagePreview.js
@@ -0,0 +1,91 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+const {
+  div,
+  img,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const {
+  formDataURI,
+  getUrlBaseName,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const RESPONSE_IMG_NAME = L10N.getStr("netmonitor.response.name");
+const RESPONSE_IMG_DIMENSIONS = L10N.getStr("netmonitor.response.dimensions");
+const RESPONSE_IMG_MIMETYPE = L10N.getStr("netmonitor.response.mime");
+
+class ImagePreview extends Component {
+  static get propTypes() {
+    return {
+      mimeType: PropTypes.string,
+      encoding: PropTypes.string,
+      text: PropTypes.string,
+      url: PropTypes.string,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dimensions: {
+        width: 0,
+        height: 0,
+      },
+    };
+
+    this.updateDimensions = this.updateDimensions.bind(this);
+  }
+
+  updateDimensions({ target }) {
+    this.setState({
+      dimensions: {
+        width: target.naturalWidth,
+        height: target.naturalHeight,
+      },
+    });
+  }
+
+  render() {
+    const { mimeType, encoding, text, url } = this.props;
+    const { width, height } = this.state.dimensions;
+
+    return div(
+      { className: "panel-container response-image-box devtools-monospace" },
+      img({
+        className: "response-image",
+        src: formDataURI(mimeType, encoding, text),
+        onLoad: this.updateDimensions,
+      }),
+      div(
+        { className: "response-summary" },
+        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_NAME),
+        div({ className: "tabpanel-summary-value" }, getUrlBaseName(url))
+      ),
+      div(
+        { className: "response-summary" },
+        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_DIMENSIONS),
+        div({ className: "tabpanel-summary-value" }, `${width} × ${height}`)
+      ),
+      div(
+        { className: "response-summary" },
+        div({ className: "tabpanel-summary-label" }, RESPONSE_IMG_MIMETYPE),
+        div({ className: "tabpanel-summary-value" }, mimeType)
+      )
+    );
+  }
+}
+
+module.exports = ImagePreview;
diff --git a/devtools/client/netmonitor/src/components/previews/SourcePreview.js b/devtools/client/netmonitor/src/components/previews/SourcePreview.js
new file mode 100644
index 0000000000..7e9d011bad
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/SourcePreview.js
@@ -0,0 +1,178 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Editor = require("resource://devtools/client/shared/sourceeditor/editor.js");
+const {
+  setTargetSearchResult,
+} = require("resource://devtools/client/netmonitor/src/actions/search.js");
+const { div } = dom;
+/**
+ * CodeMirror editor as a React component
+ */
+class SourcePreview extends Component {
+  static get propTypes() {
+    return {
+      // Source editor syntax highlight mode, which is a mime type defined in CodeMirror
+      mode: PropTypes.string,
+      // Source editor content
+      text: PropTypes.string,
+      // Search result text to select
+      targetSearchResult: PropTypes.object,
+      // Reset target search result that has been used for navigation in this panel.
+      // This is done to avoid second navigation the next time.
+      resetTargetSearchResult: PropTypes.func,
+    };
+  }
+
+  componentDidMount() {
+    const { mode, text } = this.props;
+    this.loadEditor(mode, text);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.mode !== this.props.mode ||
+      nextProps.text !== this.props.text ||
+      nextProps.targetSearchResult !== this.props.targetSearchResult
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    const { mode, targetSearchResult, text } = this.props;
+
+    if (prevProps.text !== text) {
+      // When updating from editor to editor
+      this.updateEditor(mode, text);
+    } else if (prevProps.targetSearchResult !== targetSearchResult) {
+      this.findSearchResult();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unloadEditor();
+  }
+
+  loadEditor(mode, text) {
+    this.editor = new Editor({
+      lineNumbers: true,
+      lineWrapping: false,
+      mode: null, // Disable auto syntax detection, but then we set mode asynchronously
+      readOnly: true,
+      theme: "mozilla",
+      value: text,
+    });
+
+    // Delay to CodeMirror initialization content to prevent UI freezing
+    this.editorTimeout = setTimeout(() => {
+      this.editorTimeout = null;
+      this.editor.appendToLocalElement(this.refs.editorElement);
+
+      // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+      // processing large content, so we enable it asynchronously within the setTimeout
+      // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+      this.editorSetModeTimeout = setTimeout(() => {
+        this.editorSetModeTimeout = null;
+        this.editor.setMode(mode);
+        this.findSearchResult();
+      });
+    });
+  }
+
+  updateEditor(mode, text) {
+    // Reset the existed 'mode' attribute in order to make setText() process faster
+    // to prevent drawing unnecessary syntax highlight.
+    if (this?.editor?.hasCodeMirror) {
+      this.editor.setMode(null);
+      this.editor.setText(text);
+    }
+
+    if (this.editorSetModeTimeout) {
+      clearTimeout(this.editorSetModeTimeout);
+    }
+
+    // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+    // processing large content, so we enable it asynchronously within the setTimeout
+    // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+    this.editorSetModeTimeout = setTimeout(() => {
+      this.editorSetModeTimeout = null;
+      this.editor.setMode(mode);
+      this.findSearchResult();
+    });
+  }
+
+  unloadEditor() {
+    clearTimeout(this.editorTimeout);
+    clearTimeout(this.editorSetModeTimeout);
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
+  }
+
+  findSearchResult() {
+    const { targetSearchResult, resetTargetSearchResult } = this.props;
+
+    if (targetSearchResult?.line) {
+      const { line } = targetSearchResult;
+      // scroll the editor to center the line
+      // with the target search result
+      if (this.editor) {
+        this.editor.setCursor({ line: line - 1 }, "center");
+      }
+    }
+
+    resetTargetSearchResult();
+  }
+
+  // Scroll to specified line if the user clicks on search results.
+  scrollToLine(element) {
+    const { targetSearchResult, resetTargetSearchResult } = this.props;
+
+    // The following code is responsible for scrolling given line
+    // to visible view-port.
+    // It gets the <div> child element representing the target
+    // line (by index) and uses `scrollIntoView` API to make sure
+    // it's visible to the user.
+    if (element && targetSearchResult && targetSearchResult.line) {
+      const child = element.children[targetSearchResult.line - 1];
+      if (child) {
+        const range = document.createRange();
+        range.selectNode(child);
+        document.getSelection().addRange(range);
+        child.scrollIntoView({ block: "center" });
+      }
+      resetTargetSearchResult();
+    }
+  }
+
+  renderEditor() {
+    return div(
+      { className: "editor-row-container" },
+      div({
+        ref: "editorElement",
+        className: "source-editor-mount devtools-monospace",
+      })
+    );
+  }
+
+  render() {
+    return div(
+      { key: "EDITOR_CONFIG", className: "editor-row-container" },
+      this.renderEditor()
+    );
+  }
+}
+
+module.exports = connect(null, dispatch => ({
+  resetTargetSearchResult: () => dispatch(setTargetSearchResult(null)),
+}))(SourcePreview);
diff --git a/devtools/client/netmonitor/src/components/previews/UrlPreview.js b/devtools/client/netmonitor/src/components/previews/UrlPreview.js
new file mode 100644
index 0000000000..a2fdcdca7c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/UrlPreview.js
@@ -0,0 +1,295 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  parseQueryString,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const TreeRow = createFactory(
+  require("resource://devtools/client/shared/components/tree/TreeRow.js")
+);
+
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const { div, span, tr, td } = dom;
+
+/**
+ * Url Preview Component
+ * This component is used to render urls. Its show both compact and destructured views
+ * of the url. Its takes a url and the http method as properties.
+ *
+ * Example Url:
+ * https://foo.com/bla?x=123&y=456&z=789&a=foo&a=bar
+ *
+ * Structure:
+ * {
+ *   GET : {
+ *    "scheme" : "https",
+ *    "host" : "foo.com",
+ *    "filename" : "bla",
+ *    "query" : {
+ *      "x": "123",
+ *      "y": "456",
+ *      "z": "789",
+ *      "a": {
+ *         "0": foo,
+ *         "1": bar
+ *       }
+ *     },
+ *     "remote" :  {
+ *        "address" : "127.0.0.1:8080"
+ *     }
+ *   }
+ * }
+ */
+class UrlPreview extends Component {
+  static get propTypes() {
+    return {
+      url: PropTypes.string,
+      method: PropTypes.string,
+      address: PropTypes.string,
+      proxyStatus: PropTypes.string,
+      shouldExpandPreview: PropTypes.bool,
+      onTogglePreview: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.parseUrl = this.parseUrl.bind(this);
+    this.renderValue = this.renderValue.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.url !== this.props.url ||
+      nextProps.method !== this.props.method ||
+      nextProps.address !== this.props.address
+    );
+  }
+
+  renderRow(props) {
+    const {
+      member: { name, level },
+    } = props;
+    if ((name == "query" || name == "remote") && level == 1) {
+      return tr(
+        { key: name, className: "treeRow stringRow" },
+        td(
+          { colSpan: 2, className: "splitter" },
+          div({ className: "horizontal-splitter" })
+        )
+      );
+    }
+
+    const customProps = { ...props };
+    customProps.member.selected = false;
+    return TreeRow(customProps);
+  }
+
+  renderValue(props) {
+    const {
+      member: { level, open },
+      value,
+    } = props;
+    if (level == 0) {
+      if (open) {
+        return "";
+      }
+      const { scheme, host, filename, query } = value;
+      const queryParamNames = query ? Object.keys(query) : [];
+      // render collapsed url
+      return div(
+        { key: "url", className: "url" },
+        span({ key: "url-scheme", className: "url-scheme" }, `${scheme}://`),
+        span({ key: "url-host", className: "url-host" }, `${host}`),
+        span({ key: "url-filename", className: "url-filename" }, `${filename}`),
+        !!queryParamNames.length &&
+          span({ key: "url-ques", className: "url-chars" }, "?"),
+
+        queryParamNames.map((name, index) => {
+          if (Array.isArray(query[name])) {
+            return query[name].map((item, queryIndex) => {
+              return span(
+                {
+                  key: `url-params-${name}${queryIndex}`,
+                  className: "url-params",
+                },
+                span(
+                  {
+                    key: `url-params${name}${queryIndex}-name`,
+                    className: "url-params-name",
+                  },
+                  `${name}`
+                ),
+                span(
+                  {
+                    key: `url-chars-${name}${queryIndex}-equals`,
+                    className: "url-chars",
+                  },
+                  "="
+                ),
+                span(
+                  {
+                    key: `url-params-${name}${queryIndex}-value`,
+                    className: "url-params-value",
+                  },
+                  `${item}`
+                ),
+                (query[name].length - 1 !== queryIndex ||
+                  queryParamNames.length - 1 !== index) &&
+                  span({ key: "url-amp", className: "url-chars" }, "&")
+              );
+            });
+          }
+
+          return span(
+            { key: `url-params-${name}`, className: "url-params" },
+            span(
+              { key: "url-params-name", className: "url-params-name" },
+              `${name}`
+            ),
+            span({ key: "url-chars-equals", className: "url-chars" }, "="),
+            span(
+              { key: "url-params-value", className: "url-params-value" },
+              `${query[name]}`
+            ),
+            queryParamNames.length - 1 !== index &&
+              span({ key: "url-amp", className: "url-chars" }, "&")
+          );
+        })
+      );
+    }
+    if (typeof value !== "string") {
+      // the query node would be an object
+      if (level == 0) {
+        return "";
+      }
+      // for arrays (multival)
+      return "[...]";
+    }
+
+    return value;
+  }
+
+  parseUrl(url) {
+    const { method, address, proxyStatus } = this.props;
+    const { host, protocol, pathname, search } = new URL(url);
+
+    const urlObject = {
+      [method]: {
+        scheme: protocol.replace(":", ""),
+        host,
+        filename: pathname,
+      },
+    };
+
+    const expandedNodes = new Set();
+
+    // check and add query parameters
+    if (search.length) {
+      const params = parseQueryString(search);
+      // make sure the query node is always expanded
+      expandedNodes.add(`/${method}/query`);
+      urlObject[method].query = params.reduce((map, obj) => {
+        const value = map[obj.name];
+        if (value || value === "") {
+          if (typeof value !== "object") {
+            expandedNodes.add(`/${method}/query/${obj.name}`);
+            map[obj.name] = [value];
+          }
+          map[obj.name].push(obj.value);
+        } else {
+          map[obj.name] = obj.value;
+        }
+        return map;
+      }, Object.create(null));
+    }
+
+    if (address) {
+      // makes sure the remote address section is expanded
+      expandedNodes.add(`/${method}/remote`);
+      urlObject[method].remote = {
+        [L10N.getStr(
+          proxyStatus
+            ? "netmonitor.headers.proxyAddress"
+            : "netmonitor.headers.address"
+        )]: address,
+      };
+    }
+
+    return {
+      urlObject,
+      expandedNodes,
+    };
+  }
+
+  render() {
+    const {
+      url,
+      method,
+      shouldExpandPreview = false,
+      onTogglePreview,
+    } = this.props;
+
+    const { urlObject, expandedNodes } = this.parseUrl(url);
+
+    if (shouldExpandPreview) {
+      expandedNodes.add(`/${method}`);
+    }
+
+    return div(
+      { className: "url-preview" },
+      PropertiesView({
+        object: urlObject,
+        useQuotes: true,
+        defaultSelectFirstNode: false,
+        mode: MODE.TINY,
+        expandedNodes,
+        renderRow: this.renderRow,
+        renderValue: this.renderValue,
+        enableInput: false,
+        onClickRow: (path, evt, member) => {
+          // Only track when the root is toggled
+          // as all the others are always expanded by
+          // default.
+          if (path == `/${method}`) {
+            onTogglePreview(!member.open);
+          }
+        },
+        contextMenuFormatters: {
+          copyFormatter: (member, baseCopyFormatter) => {
+            const { value, level, hasChildren } = member;
+            if (hasChildren && level == 0) {
+              const { scheme, filename, host, query } = value;
+              return `${scheme}://${host}${filename}${
+                query ? "?" + new URLSearchParams(query).toString() : ""
+              }`;
+            }
+            return baseCopyFormatter(member);
+          },
+        },
+      })
+    );
+  }
+}
+
+module.exports = UrlPreview;
diff --git a/devtools/client/netmonitor/src/components/previews/moz.build b/devtools/client/netmonitor/src/components/previews/moz.build
new file mode 100644
index 0000000000..0252ec3246
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/moz.build
@@ -0,0 +1,11 @@
+# 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(
+    "FontPreview.js",
+    "HtmlPreview.js",
+    "ImagePreview.js",
+    "SourcePreview.js",
+    "UrlPreview.js",
+)
diff --git a/devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js b/devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js
new file mode 100644
index 0000000000..4d209e788d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-blocking/RequestBlockingPanel.js
@@ -0,0 +1,350 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  button,
+  div,
+  form,
+  input,
+  label,
+  li,
+  span,
+  ul,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const RequestBlockingContextMenu = require("resource://devtools/client/netmonitor/src/widgets/RequestBlockingContextMenu.js");
+
+const ENABLE_BLOCKING_LABEL = L10N.getStr(
+  "netmonitor.actionbar.enableBlocking"
+);
+const ADD_URL_PLACEHOLDER = L10N.getStr(
+  "netmonitor.actionbar.blockSearchPlaceholder"
+);
+const REQUEST_BLOCKING_USAGE_NOTICE = L10N.getStr(
+  "netmonitor.actionbar.requestBlockingUsageNotice"
+);
+const REQUEST_BLOCKING_ADD_NOTICE = L10N.getStr(
+  "netmonitor.actionbar.requestBlockingAddNotice"
+);
+const REMOVE_URL_TOOLTIP = L10N.getStr("netmonitor.actionbar.removeBlockedUrl");
+
+class RequestBlockingPanel extends Component {
+  static get propTypes() {
+    return {
+      blockedUrls: PropTypes.array.isRequired,
+      addBlockedUrl: PropTypes.func.isRequired,
+      isDisplaying: PropTypes.bool.isRequired,
+      removeBlockedUrl: PropTypes.func.isRequired,
+      toggleBlockingEnabled: PropTypes.func.isRequired,
+      toggleBlockedUrl: PropTypes.func.isRequired,
+      updateBlockedUrl: PropTypes.func.isRequired,
+      removeAllBlockedUrls: PropTypes.func.isRequired,
+      disableAllBlockedUrls: PropTypes.func.isRequired,
+      enableAllBlockedUrls: PropTypes.func.isRequired,
+      blockingEnabled: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editingUrl: null,
+    };
+  }
+
+  componentDidMount() {
+    this.refs.addInput.focus();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.state.editingUrl) {
+      this.refs.editInput.focus();
+      this.refs.editInput.select();
+    } else if (this.props.isDisplaying && !prevProps.isDisplaying) {
+      this.refs.addInput.focus();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.scrollToBottomTimeout) {
+      clearTimeout(this.scrollToBottomTimeout);
+    }
+  }
+
+  scrollToBottom() {
+    if (this.scrollToBottomTimeout) {
+      clearTimeout(this.scrollToBottomTimeout);
+    }
+    this.scrollToBottomTimeout = setTimeout(() => {
+      const { contents } = this.refs;
+      if (contents.scrollHeight > contents.offsetHeight) {
+        contents.scrollTo({ top: contents.scrollHeight });
+      }
+    }, 40);
+  }
+
+  renderEnableBar() {
+    return div(
+      { className: "request-blocking-enable-bar" },
+      div(
+        { className: "request-blocking-enable-form" },
+        label(
+          { className: "devtools-checkbox-label" },
+          input({
+            type: "checkbox",
+            className: "devtools-checkbox",
+            checked: this.props.blockingEnabled,
+            ref: "enabledCheckbox",
+            onChange: () =>
+              this.props.toggleBlockingEnabled(
+                this.refs.enabledCheckbox.checked
+              ),
+          }),
+          span({ className: "request-blocking-label" }, ENABLE_BLOCKING_LABEL)
+        )
+      )
+    );
+  }
+
+  renderItemContent({ url, enabled }) {
+    const { toggleBlockedUrl, removeBlockedUrl } = this.props;
+
+    return li(
+      { key: url },
+      label(
+        {
+          className: "devtools-checkbox-label",
+          onDoubleClick: () => this.setState({ editingUrl: url }),
+        },
+        input({
+          type: "checkbox",
+          className: "devtools-checkbox",
+          checked: enabled,
+          onChange: () => toggleBlockedUrl(url),
+        }),
+        span(
+          {
+            className: "request-blocking-label request-blocking-editable-label",
+            title: url,
+          },
+          url
+        )
+      ),
+      button({
+        className: "request-blocking-remove-button",
+        title: REMOVE_URL_TOOLTIP,
+        "aria-label": REMOVE_URL_TOOLTIP,
+        onClick: () => removeBlockedUrl(url),
+      })
+    );
+  }
+
+  renderEditForm(url) {
+    const { updateBlockedUrl, removeBlockedUrl } = this.props;
+    return li(
+      { key: url, className: "request-blocking-edit-item" },
+      form(
+        {
+          onSubmit: e => {
+            const { editInput } = this.refs;
+            const newValue = editInput.value;
+            e.preventDefault();
+
+            if (url != newValue) {
+              if (editInput.value.trim() === "") {
+                removeBlockedUrl(url, newValue);
+              } else {
+                updateBlockedUrl(url, newValue);
+              }
+            }
+            this.setState({ editingUrl: null });
+          },
+        },
+        input({
+          type: "text",
+          defaultValue: url,
+          ref: "editInput",
+          className: "devtools-searchinput",
+          placeholder: ADD_URL_PLACEHOLDER,
+          onBlur: () => this.setState({ editingUrl: null }),
+          onKeyDown: e => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              e.preventDefault();
+              this.setState({ editingUrl: null });
+            }
+          },
+        }),
+
+        input({ type: "submit", style: { display: "none" } })
+      )
+    );
+  }
+
+  renderBlockedList() {
+    const {
+      blockedUrls,
+      blockingEnabled,
+      removeAllBlockedUrls,
+      disableAllBlockedUrls,
+      enableAllBlockedUrls,
+    } = this.props;
+
+    if (blockedUrls.length === 0) {
+      return null;
+    }
+
+    const listItems = blockedUrls.map(item =>
+      this.state.editingUrl === item.url
+        ? this.renderEditForm(item.url)
+        : this.renderItemContent(item)
+    );
+
+    return div(
+      {
+        className: "request-blocking-contents",
+        ref: "contents",
+        onContextMenu: event => {
+          if (!this.contextMenu) {
+            this.contextMenu = new RequestBlockingContextMenu({
+              removeAllBlockedUrls,
+              disableAllBlockedUrls,
+              enableAllBlockedUrls,
+            });
+          }
+
+          const contextMenuOptions = {
+            disableDisableAllBlockedUrls: blockedUrls.every(
+              ({ enabled }) => enabled === false
+            ),
+            disableEnableAllBlockedUrls: blockedUrls.every(
+              ({ enabled }) => enabled === true
+            ),
+          };
+
+          this.contextMenu.open(event, contextMenuOptions);
+        },
+      },
+      ul(
+        {
+          className: `request-blocking-list ${
+            blockingEnabled ? "" : "disabled"
+          }`,
+        },
+        ...listItems
+      )
+    );
+  }
+
+  renderAddForm() {
+    const { addBlockedUrl } = this.props;
+    return div(
+      { className: "request-blocking-footer" },
+      form(
+        {
+          className: "request-blocking-add-form",
+          onSubmit: e => {
+            const { addInput } = this.refs;
+            e.preventDefault();
+            addBlockedUrl(addInput.value);
+            addInput.value = "";
+            addInput.focus();
+            this.scrollToBottom();
+          },
+        },
+        input({
+          type: "text",
+          ref: "addInput",
+          className: "devtools-searchinput",
+          placeholder: ADD_URL_PLACEHOLDER,
+          onKeyDown: e => {
+            if (e.key === "Escape") {
+              e.stopPropagation();
+              e.preventDefault();
+
+              const { addInput } = this.refs;
+              addInput.value = "";
+              addInput.focus();
+            }
+          },
+        }),
+        input({ type: "submit", style: { display: "none" } })
+      )
+    );
+  }
+
+  renderEmptyListNotice() {
+    return div(
+      { className: "request-blocking-list-empty-notice" },
+      div(
+        { className: "request-blocking-notice-element" },
+        REQUEST_BLOCKING_USAGE_NOTICE
+      ),
+      div(
+        { className: "request-blocking-notice-element" },
+        REQUEST_BLOCKING_ADD_NOTICE
+      )
+    );
+  }
+
+  render() {
+    const { blockedUrls, addBlockedUrl } = this.props;
+
+    return div(
+      {
+        className: "request-blocking-panel",
+        onDragOver: e => {
+          e.preventDefault();
+        },
+        onDrop: e => {
+          e.preventDefault();
+          const url = e.dataTransfer.getData("text/plain");
+          addBlockedUrl(url);
+          this.scrollToBottom();
+        },
+      },
+      this.renderEnableBar(),
+      this.renderBlockedList(),
+      this.renderAddForm(),
+      !blockedUrls.length && this.renderEmptyListNotice()
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    blockedUrls: state.requestBlocking.blockedUrls,
+    blockingEnabled: state.requestBlocking.blockingEnabled,
+    isDisplaying: state.ui.selectedActionBarTabId === PANELS.BLOCKING,
+  }),
+  dispatch => ({
+    toggleBlockingEnabled: checked =>
+      dispatch(Actions.toggleBlockingEnabled(checked)),
+    addBlockedUrl: url => dispatch(Actions.addBlockedUrl(url)),
+    removeBlockedUrl: url => dispatch(Actions.removeBlockedUrl(url)),
+    toggleBlockedUrl: url => dispatch(Actions.toggleBlockedUrl(url)),
+    removeAllBlockedUrls: () => dispatch(Actions.removeAllBlockedUrls()),
+    enableAllBlockedUrls: () => dispatch(Actions.enableAllBlockedUrls()),
+    disableAllBlockedUrls: () => dispatch(Actions.disableAllBlockedUrls()),
+    updateBlockedUrl: (oldUrl, newUrl) =>
+      dispatch(Actions.updateBlockedUrl(oldUrl, newUrl)),
+  })
+)(RequestBlockingPanel);
diff --git a/devtools/client/netmonitor/src/components/request-blocking/moz.build b/devtools/client/netmonitor/src/components/request-blocking/moz.build
new file mode 100644
index 0000000000..7ce0f7ecc6
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-blocking/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(
+    "RequestBlockingPanel.js",
+)
diff --git a/devtools/client/netmonitor/src/components/request-details/CachePanel.js b/devtools/client/netmonitor/src/components/request-details/CachePanel.js
new file mode 100644
index 0000000000..5f3db6c501
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/CachePanel.js
@@ -0,0 +1,144 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+// Components
+const TreeViewClass = require("resource://devtools/client/shared/components/tree/TreeView.js");
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+
+const { div, input } = dom;
+
+const CACHE = L10N.getStr("netmonitor.cache.cache");
+const DATA_SIZE = L10N.getStr("netmonitor.cache.dataSize");
+const EXPIRES = L10N.getStr("netmonitor.cache.expires");
+const FETCH_COUNT = L10N.getStr("netmonitor.cache.fetchCount");
+const LAST_FETCHED = L10N.getStr("netmonitor.cache.lastFetched");
+const LAST_MODIFIED = L10N.getStr("netmonitor.cache.lastModified");
+const DEVICE = L10N.getStr("netmonitor.cache.device");
+const NOT_AVAILABLE = L10N.getStr("netmonitor.cache.notAvailable");
+const EMPTY = L10N.getStr("netmonitor.cache.empty");
+
+/**
+ * Cache panel component
+ * This tab lists full details of any cache information of the response.
+ */
+class CachePanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { connector, request } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["responseCache"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { connector, request } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["responseCache"]);
+  }
+
+  renderSummary(label, value) {
+    return div(
+      { className: "tabpanel-summary-container cache-summary" },
+      div(
+        {
+          className: "tabpanel-summary-label cache-summary-label",
+        },
+        label + ":"
+      ),
+      input({
+        className: "tabpanel-summary-value textbox-input devtools-monospace",
+        readOnly: true,
+        value,
+      })
+    );
+  }
+
+  getProperties(responseCache) {
+    let responseCacheObj;
+    let cacheObj;
+    try {
+      responseCacheObj = Object.assign({}, responseCache);
+      responseCacheObj = responseCacheObj.cache;
+    } catch (e) {
+      return null;
+    }
+    try {
+      cacheObj = Object.assign({}, responseCacheObj);
+    } catch (e) {
+      return null;
+    }
+    return cacheObj;
+  }
+
+  getDate(timestamp) {
+    if (!timestamp) {
+      return null;
+    }
+    const d = new Date(parseInt(timestamp, 10) * 1000);
+    return d.toLocaleDateString() + " " + d.toLocaleTimeString();
+  }
+
+  render() {
+    const { request } = this.props;
+    const { responseCache } = request;
+
+    let object;
+    const cache = this.getProperties(responseCache);
+
+    if (
+      cache.lastFetched ||
+      cache.fetchCount ||
+      cache.storageDataSize ||
+      cache.lastModified ||
+      cache.expirationTime ||
+      cache.deviceID
+    ) {
+      object = {
+        [CACHE]: {
+          [LAST_FETCHED]: this.getDate(cache.lastFetched) || NOT_AVAILABLE,
+          [FETCH_COUNT]: cache.fetchCount || NOT_AVAILABLE,
+          [DATA_SIZE]: cache.storageDataSize || NOT_AVAILABLE,
+          [LAST_MODIFIED]: this.getDate(cache.lastModified) || NOT_AVAILABLE,
+          [EXPIRES]: this.getDate(cache.expirationTime) || NOT_AVAILABLE,
+          [DEVICE]: cache.deviceID || NOT_AVAILABLE,
+        },
+      };
+    } else {
+      return div({ className: "empty-notice" }, EMPTY);
+    }
+
+    return div(
+      { className: "panel-container security-panel" },
+      PropertiesView({
+        object,
+        enableFilter: false,
+        expandedNodes: TreeViewClass.getExpandedNodes(object),
+      })
+    );
+  }
+}
+
+module.exports = CachePanel;
diff --git a/devtools/client/netmonitor/src/components/request-details/CookiesPanel.js b/devtools/client/netmonitor/src/components/request-details/CookiesPanel.js
new file mode 100644
index 0000000000..466c0379cd
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/CookiesPanel.js
@@ -0,0 +1,225 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  sortObjectKeys,
+} = require("resource://devtools/client/netmonitor/src/utils/sort-utils.js");
+const {
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Component
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+
+loader.lazyGetter(this, "TreeRow", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/tree/TreeRow.js")
+  );
+});
+
+const { div } = dom;
+
+const COOKIES_EMPTY_TEXT = L10N.getStr("cookiesEmptyText");
+const COOKIES_FILTER_TEXT = L10N.getStr("cookiesFilterText");
+const REQUEST_COOKIES = L10N.getStr("requestCookies");
+const RESPONSE_COOKIES = L10N.getStr("responseCookies");
+
+/*
+ * Cookies panel component
+ * This tab lists full details of any cookies sent with the request or response
+ */
+class CookiesPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object.isRequired,
+      targetSearchResult: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      filterText: "",
+    };
+  }
+
+  componentDidMount() {
+    const { connector, request } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestCookies",
+      "responseCookies",
+    ]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { connector, request } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestCookies",
+      "responseCookies",
+    ]);
+  }
+
+  /**
+   * Mapping array to dict for TreeView usage.
+   * Since TreeView only support Object(dict) format.
+   *
+   * @param {Object[]} arr - key-value pair array like cookies or params
+   * @returns {Object}
+   */
+  getProperties(arr, title) {
+    const cookies = arr.reduce((map, obj) => {
+      // Generally cookies object contains only name and value properties and can
+      // be rendered as name: value pair.
+      // When there are more properties in cookies object such as extra or path,
+      // We will pass the object to display these extra information
+      if (Object.keys(obj).length > 2) {
+        map[obj.name] = Object.assign({}, obj);
+        delete map[obj.name].name;
+      } else {
+        map[obj.name] = obj.value;
+      }
+      return map;
+    }, Object.create(null));
+
+    // To have different roots for Request and Response cookies
+    return { [title]: cookies };
+  }
+
+  /**
+   * Custom rendering method passed to PropertiesView. It's
+   * responsible to filter out level 0 node in the tree
+   *
+   * @param {Object} props
+   */
+  renderRow(props) {
+    const { level } = props.member;
+
+    if (level === 0) {
+      return null;
+    }
+
+    return TreeRow(props);
+  }
+
+  /**
+   * Get the selected cookies path
+   * @param {Object} searchResult
+   * @returns {string}
+   */
+  getTargetCookiePath(searchResult) {
+    if (!searchResult) {
+      return null;
+    }
+
+    switch (searchResult.type) {
+      case "requestCookies": {
+        return `/${REQUEST_COOKIES}/${searchResult.label}`;
+      }
+      case "responseCookies":
+        return `/${RESPONSE_COOKIES}/${searchResult.label}`;
+    }
+
+    return null;
+  }
+
+  render() {
+    let {
+      request: {
+        requestCookies = { cookies: [] },
+        responseCookies = { cookies: [] },
+      },
+      targetSearchResult,
+    } = this.props;
+
+    const { filterText } = this.state;
+
+    requestCookies = requestCookies.cookies || requestCookies;
+    responseCookies = responseCookies.cookies || responseCookies;
+
+    if (!requestCookies.length && !responseCookies.length) {
+      return div({ className: "empty-notice" }, COOKIES_EMPTY_TEXT);
+    }
+
+    const items = [];
+
+    if (responseCookies.length) {
+      items.push({
+        component: PropertiesView,
+        componentProps: {
+          object: sortObjectKeys(
+            this.getProperties(responseCookies, RESPONSE_COOKIES)
+          ),
+          filterText,
+          targetSearchResult,
+          defaultSelectFirstNode: false,
+          selectPath: this.getTargetCookiePath,
+          renderRow: this.renderRow,
+        },
+        header: RESPONSE_COOKIES,
+        id: "responseCookies",
+        opened: true,
+      });
+    }
+
+    if (requestCookies.length) {
+      items.push({
+        component: PropertiesView,
+        componentProps: {
+          object: sortObjectKeys(
+            this.getProperties(requestCookies, REQUEST_COOKIES)
+          ),
+          filterText,
+          targetSearchResult,
+          defaultSelectFirstNode: false,
+          selectPath: this.getTargetCookiePath,
+          renderRow: this.renderRow,
+        },
+        header: REQUEST_COOKIES,
+        id: "requestCookies",
+        opened: true,
+      });
+    }
+
+    return div(
+      { className: "panel-container cookies-panel-container" },
+      div(
+        { className: "devtools-toolbar devtools-input-toolbar" },
+        SearchBox({
+          delay: FILTER_SEARCH_DELAY,
+          type: "filter",
+          onChange: text => this.setState({ filterText: text }),
+          placeholder: COOKIES_FILTER_TEXT,
+        })
+      ),
+      Accordion({ items })
+    );
+  }
+}
+
+module.exports = CookiesPanel;
diff --git a/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js b/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
new file mode 100644
index 0000000000..09226b72c5
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/HeadersPanel.js
@@ -0,0 +1,920 @@
+/* eslint-disable complexity */
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  getFormattedIPAndPort,
+  getFormattedSize,
+  getRequestPriorityAsText,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getHeadersURL,
+  getTrackingProtectionURL,
+  getHTTPStatusCodeURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+const {
+  fetchNetworkUpdatePacket,
+  writeHeaderText,
+  getRequestHeadersRawText,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  HeadersProvider,
+  HeaderList,
+} = require("resource://devtools/client/netmonitor/src/utils/headers-provider.js");
+const {
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+// Components
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+const Accordion = createFactory(
+  require("resource://devtools/client/shared/components/Accordion.js")
+);
+const UrlPreview = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/previews/UrlPreview.js")
+);
+const HeadersPanelContextMenu = require("resource://devtools/client/netmonitor/src/widgets/HeadersPanelContextMenu.js");
+const StatusCode = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/StatusCode.js")
+);
+
+loader.lazyGetter(this, "MDNLink", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/MdnLink.js")
+  );
+});
+loader.lazyGetter(this, "Rep", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+loader.lazyGetter(this, "TreeRow", function () {
+  return createFactory(
+    require("resource://devtools/client/shared/components/tree/TreeRow.js")
+  );
+});
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+
+loader.lazyGetter(this, "HEADERS_PROXY_STATUS", function () {
+  return L10N.getStr("netmonitor.headers.proxyStatus");
+});
+
+loader.lazyGetter(this, "HEADERS_PROXY_VERSION", function () {
+  return L10N.getStr("netmonitor.headers.proxyVersion");
+});
+
+const { div, input, label, span, textarea, tr, td, button } = dom;
+
+const RESEND = L10N.getStr("netmonitor.context.resend.label");
+const EDIT_AND_RESEND = L10N.getStr("netmonitor.summary.editAndResend");
+const RAW_HEADERS = L10N.getStr("netmonitor.headers.raw");
+const HEADERS_EMPTY_TEXT = L10N.getStr("headersEmptyText");
+const HEADERS_FILTER_TEXT = L10N.getStr("headersFilterText");
+const REQUEST_HEADERS = L10N.getStr("requestHeaders");
+const REQUEST_HEADERS_FROM_UPLOAD = L10N.getStr("requestHeadersFromUpload");
+const RESPONSE_HEADERS = L10N.getStr("responseHeaders");
+const HEADERS_STATUS = L10N.getStr("netmonitor.headers.status");
+const HEADERS_VERSION = L10N.getStr("netmonitor.headers.version");
+const HEADERS_TRANSFERRED = L10N.getStr("netmonitor.toolbar.transferred");
+const SUMMARY_STATUS_LEARN_MORE = L10N.getStr("netmonitor.summary.learnMore");
+const SUMMARY_ETP_LEARN_MORE = L10N.getStr(
+  "netmonitor.enhancedTrackingProtection.learnMore"
+);
+const HEADERS_REFERRER = L10N.getStr("netmonitor.headers.referrerPolicy");
+const HEADERS_CONTENT_BLOCKING = L10N.getStr(
+  "netmonitor.headers.contentBlocking"
+);
+const HEADERS_ETP = L10N.getStr(
+  "netmonitor.trackingResource.enhancedTrackingProtection"
+);
+const HEADERS_PRIORITY = L10N.getStr("netmonitor.headers.requestPriority");
+const HEADERS_DNS = L10N.getStr("netmonitor.headers.dns");
+/**
+ * Headers panel component
+ * Lists basic information about the request
+ *
+ * In http/2 all response headers are in small case.
+ * See: https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/request_details/index.html#response-headers
+ * RFC: https://tools.ietf.org/html/rfc7540#section-8.1.2
+ */
+class HeadersPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      cloneSelectedRequest: PropTypes.func.isRequired,
+      member: PropTypes.object,
+      request: PropTypes.object.isRequired,
+      renderValue: PropTypes.func,
+      openLink: PropTypes.func,
+      targetSearchResult: PropTypes.object,
+      openRequestBlockingAndAddUrl: PropTypes.func.isRequired,
+      openHTTPCustomRequestTab: PropTypes.func.isRequired,
+      cloneRequest: PropTypes.func,
+      sendCustomRequest: PropTypes.func,
+      shouldExpandPreview: PropTypes.bool,
+      setHeadersUrlPreviewExpanded: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      rawRequestHeadersOpened: false,
+      rawResponseHeadersOpened: false,
+      rawUploadHeadersOpened: false,
+      lastToggledRawHeader: "",
+      filterText: null,
+    };
+
+    this.getProperties = this.getProperties.bind(this);
+    this.getTargetHeaderPath = this.getTargetHeaderPath.bind(this);
+    this.toggleRawResponseHeaders = this.toggleRawResponseHeaders.bind(this);
+    this.toggleRawRequestHeaders = this.toggleRawRequestHeaders.bind(this);
+    this.toggleRawUploadHeaders = this.toggleRawUploadHeaders.bind(this);
+    this.renderSummary = this.renderSummary.bind(this);
+    this.renderRow = this.renderRow.bind(this);
+    this.renderValue = this.renderValue.bind(this);
+    this.renderRawHeadersBtn = this.renderRawHeadersBtn.bind(this);
+    this.onShowResendMenu = this.onShowResendMenu.bind(this);
+    this.onShowHeadersContextMenu = this.onShowHeadersContextMenu.bind(this);
+  }
+
+  componentDidMount() {
+    const { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestHeaders",
+      "responseHeaders",
+      "requestPostData",
+    ]);
+  }
+
+  getHeadersTitle(headers, title) {
+    let result = "";
+    let preHeaderText = "";
+    const {
+      responseHeaders,
+      requestHeaders,
+      httpVersion,
+      status,
+      statusText,
+      method,
+      urlDetails,
+    } = this.props.request;
+    if (headers?.headers.length) {
+      if (!headers.headersSize) {
+        if (title == RESPONSE_HEADERS) {
+          preHeaderText = `${httpVersion} ${status} ${statusText}`;
+          result = `${title} (${getFormattedSize(
+            writeHeaderText(responseHeaders.headers, preHeaderText).length,
+            3
+          )})`;
+        } else {
+          const hostHeader = requestHeaders.headers.find(
+            ele => ele.name === "Host"
+          );
+          if (hostHeader) {
+            preHeaderText = `${method} ${
+              urlDetails.url.split(hostHeader.value)[1]
+            } ${httpVersion}`;
+          }
+          result = `${title} (${getFormattedSize(
+            writeHeaderText(requestHeaders.headers, preHeaderText).length,
+            3
+          )})`;
+        }
+      } else {
+        result = `${title} (${getFormattedSize(headers.headersSize, 3)})`;
+      }
+    }
+
+    return result;
+  }
+
+  getProperties(headers, title) {
+    let propertiesResult;
+
+    if (headers?.headers.length) {
+      const headerKey = this.getHeadersTitle(headers, title);
+      propertiesResult = {
+        [headerKey]: new HeaderList(headers.headers),
+      };
+      if (
+        (title === RESPONSE_HEADERS && this.state.rawResponseHeadersOpened) ||
+        (title === REQUEST_HEADERS && this.state.rawRequestHeadersOpened) ||
+        (title === REQUEST_HEADERS_FROM_UPLOAD &&
+          this.state.rawUploadHeadersOpened)
+      ) {
+        propertiesResult = {
+          [headerKey]: { RAW_HEADERS_ID: headers.rawHeaders },
+        };
+      }
+    }
+    return propertiesResult;
+  }
+
+  toggleRawResponseHeaders() {
+    this.setState({
+      rawResponseHeadersOpened: !this.state.rawResponseHeadersOpened,
+      lastToggledRawHeader: "response",
+    });
+  }
+
+  toggleRawRequestHeaders() {
+    this.setState({
+      rawRequestHeadersOpened: !this.state.rawRequestHeadersOpened,
+      lastToggledRawHeader: "request",
+    });
+  }
+
+  toggleRawUploadHeaders() {
+    this.setState({
+      rawUploadHeadersOpened: !this.state.rawUploadHeadersOpened,
+      lastToggledRawHeader: "upload",
+    });
+  }
+
+  /**
+   * Helper method to identify what kind of raw header this is.
+   * Information is in the path variable
+   */
+  getRawHeaderType(path) {
+    if (path.includes(RESPONSE_HEADERS)) {
+      return "RESPONSE";
+    }
+    if (path.includes(REQUEST_HEADERS_FROM_UPLOAD)) {
+      return "UPLOAD";
+    }
+    return "REQUEST";
+  }
+
+  /**
+   * Renders the top part of the headers detail panel - Summary.
+   */
+  renderSummary(summaryLabel, value, summaryClass = "") {
+    return div(
+      {
+        key: summaryLabel,
+        className: "tabpanel-summary-container headers-summary " + summaryClass,
+      },
+      span(
+        { className: "tabpanel-summary-label headers-summary-label" },
+        summaryLabel
+      ),
+      span({ className: "tabpanel-summary-value" }, value)
+    );
+  }
+
+  /**
+   * Get path for target header if it's set. It's used to select
+   * the header automatically within the tree of headers.
+   * Note that the target header is set by the Search panel.
+   */
+  getTargetHeaderPath(searchResult) {
+    if (!searchResult) {
+      return null;
+    }
+    if (
+      searchResult.type !== "requestHeaders" &&
+      searchResult.type !== "responseHeaders" &&
+      searchResult.type !== "requestHeadersFromUploadStream"
+    ) {
+      return null;
+    }
+    const {
+      request: {
+        requestHeaders,
+        requestHeadersFromUploadStream: uploadHeaders,
+        responseHeaders,
+      },
+    } = this.props;
+    // Using `HeaderList` ensures that we'll get the same
+    // header index as it's used in the tree.
+    const getPath = (headers, title) => {
+      return (
+        "/" +
+        this.getHeadersTitle(headers, title) +
+        "/" +
+        new HeaderList(headers.headers).headers.findIndex(
+          header => header.name == searchResult.label
+        )
+      );
+    };
+    // Calculate target header path according to the header type.
+    switch (searchResult.type) {
+      case "requestHeaders":
+        return getPath(requestHeaders, REQUEST_HEADERS);
+      case "responseHeaders":
+        return getPath(responseHeaders, RESPONSE_HEADERS);
+      case "requestHeadersFromUploadStream":
+        return getPath(uploadHeaders, REQUEST_HEADERS_FROM_UPLOAD);
+    }
+    return null;
+  }
+
+  /**
+   * Custom rendering method passed to PropertiesView. It's responsible
+   * for rendering <textarea> element with raw headers data.
+   */
+  renderRow(props) {
+    const { level, path } = props.member;
+
+    const {
+      request: {
+        method,
+        httpVersion,
+        requestHeaders,
+        requestHeadersFromUploadStream: uploadHeaders,
+        responseHeaders,
+        status,
+        statusText,
+        urlDetails,
+      },
+    } = this.props;
+
+    let value;
+    let preHeaderText = "";
+    if (path.includes("RAW_HEADERS_ID")) {
+      const rawHeaderType = this.getRawHeaderType(path);
+      switch (rawHeaderType) {
+        case "REQUEST":
+          value = getRequestHeadersRawText(
+            method,
+            httpVersion,
+            requestHeaders,
+            urlDetails
+          );
+          break;
+        case "RESPONSE":
+          preHeaderText = `${httpVersion} ${status} ${statusText}`;
+          value = writeHeaderText(
+            responseHeaders.headers,
+            preHeaderText
+          ).trim();
+          break;
+        case "UPLOAD":
+          value = writeHeaderText(uploadHeaders.headers, preHeaderText).trim();
+          break;
+      }
+
+      let rows;
+      if (value) {
+        const match = value.match(/\n/g);
+        rows = match !== null ? match.length : 0;
+        // Need to add 1 for the horizontal scrollbar
+        // not to cover the last row of raw data
+        rows = rows + 1;
+      }
+
+      return tr(
+        {
+          key: path,
+          role: "treeitem",
+          className: "raw-headers-container",
+          onClick: event => {
+            event.stopPropagation();
+          },
+        },
+        td(
+          {
+            colSpan: 2,
+          },
+          textarea({
+            className: "raw-headers",
+            rows,
+            value,
+            readOnly: true,
+          })
+        )
+      );
+    }
+
+    if (level !== 1) {
+      return null;
+    }
+
+    return TreeRow(props);
+  }
+
+  renderRawHeadersBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawHeadersBtn`,
+          className: "raw-headers-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "headers-summary-label" }, RAW_HEADERS),
+        span(
+          { className: "raw-headers-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderValue(props) {
+    const { member, value } = props;
+
+    if (typeof value !== "string") {
+      return null;
+    }
+
+    const headerDocURL = getHeadersURL(member.name);
+
+    return div(
+      { className: "treeValueCellDivider" },
+      Rep(
+        Object.assign(props, {
+          // FIXME: A workaround for the issue in StringRep
+          // Force StringRep to crop the text everytime
+          member: Object.assign({}, member, { open: false }),
+          mode: MODE.TINY,
+          noGrip: true,
+          openLink: openContentLink,
+        })
+      ),
+      headerDocURL ? MDNLink({ url: headerDocURL }) : null
+    );
+  }
+
+  getShouldOpen(rawHeader, filterText, targetSearchResult) {
+    return (item, opened) => {
+      // If closed, open panel for these reasons
+      //  1.The raw header is switched on or off
+      //  2.The filter text is set
+      //  3.The search text is set
+      if (
+        (!opened && this.state.lastToggledRawHeader === rawHeader) ||
+        (!opened && filterText) ||
+        (!opened && targetSearchResult)
+      ) {
+        return true;
+      }
+      return !!opened;
+    };
+  }
+
+  onShowResendMenu(event) {
+    const {
+      request: { id },
+      cloneSelectedRequest,
+      cloneRequest,
+      sendCustomRequest,
+    } = this.props;
+    const menuItems = [
+      {
+        label: RESEND,
+        type: "button",
+        click: () => {
+          cloneRequest(id);
+          sendCustomRequest();
+        },
+      },
+      {
+        label: EDIT_AND_RESEND,
+        type: "button",
+        click: evt => {
+          cloneSelectedRequest(evt);
+        },
+      },
+    ];
+
+    showMenu(menuItems, { button: event.target });
+  }
+
+  onShowHeadersContextMenu(event) {
+    if (!this.contextMenu) {
+      this.contextMenu = new HeadersPanelContextMenu();
+    }
+    this.contextMenu.open(event, window.getSelection());
+  }
+
+  render() {
+    const {
+      targetSearchResult,
+      request: {
+        fromCache,
+        fromServiceWorker,
+        httpVersion,
+        method,
+        remoteAddress,
+        remotePort,
+        requestHeaders,
+        requestHeadersFromUploadStream: uploadHeaders,
+        responseHeaders,
+        status,
+        statusText,
+        urlDetails,
+        referrerPolicy,
+        priority,
+        isThirdPartyTrackingResource,
+        contentSize,
+        transferredSize,
+        isResolvedByTRR,
+        proxyHttpVersion,
+        proxyStatus,
+        proxyStatusText,
+      },
+      openRequestBlockingAndAddUrl,
+      openHTTPCustomRequestTab,
+      shouldExpandPreview,
+      setHeadersUrlPreviewExpanded,
+    } = this.props;
+    const {
+      rawResponseHeadersOpened,
+      rawRequestHeadersOpened,
+      rawUploadHeadersOpened,
+      filterText,
+    } = this.state;
+
+    if (
+      (!requestHeaders || !requestHeaders.headers.length) &&
+      (!uploadHeaders || !uploadHeaders.headers.length) &&
+      (!responseHeaders || !responseHeaders.headers.length)
+    ) {
+      return div({ className: "empty-notice" }, HEADERS_EMPTY_TEXT);
+    }
+
+    const items = [];
+
+    if (responseHeaders?.headers.length) {
+      items.push({
+        component: PropertiesView,
+        componentProps: {
+          object: this.getProperties(responseHeaders, RESPONSE_HEADERS),
+          filterText,
+          targetSearchResult,
+          renderRow: this.renderRow,
+          renderValue: this.renderValue,
+          provider: HeadersProvider,
+          selectPath: this.getTargetHeaderPath,
+          defaultSelectFirstNode: false,
+          enableInput: false,
+          useQuotes: false,
+        },
+        header: this.getHeadersTitle(responseHeaders, RESPONSE_HEADERS),
+        buttons: this.renderRawHeadersBtn(
+          "response",
+          rawResponseHeadersOpened,
+          this.toggleRawResponseHeaders
+        ),
+        id: "responseHeaders",
+        opened: true,
+        shouldOpen: this.getShouldOpen(
+          "response",
+          filterText,
+          targetSearchResult
+        ),
+      });
+    }
+
+    if (requestHeaders?.headers.length) {
+      items.push({
+        component: PropertiesView,
+        componentProps: {
+          object: this.getProperties(requestHeaders, REQUEST_HEADERS),
+          filterText,
+          targetSearchResult,
+          renderRow: this.renderRow,
+          renderValue: this.renderValue,
+          provider: HeadersProvider,
+          selectPath: this.getTargetHeaderPath,
+          defaultSelectFirstNode: false,
+          enableInput: false,
+          useQuotes: false,
+        },
+        header: this.getHeadersTitle(requestHeaders, REQUEST_HEADERS),
+        buttons: this.renderRawHeadersBtn(
+          "request",
+          rawRequestHeadersOpened,
+          this.toggleRawRequestHeaders
+        ),
+        id: "requestHeaders",
+        opened: true,
+        shouldOpen: this.getShouldOpen(
+          "request",
+          filterText,
+          targetSearchResult
+        ),
+      });
+    }
+
+    if (uploadHeaders?.headers.length) {
+      items.push({
+        component: PropertiesView,
+        componentProps: {
+          object: this.getProperties(
+            uploadHeaders,
+            REQUEST_HEADERS_FROM_UPLOAD
+          ),
+          filterText,
+          targetSearchResult,
+          renderRow: this.renderRow,
+          renderValue: this.renderValue,
+          provider: HeadersProvider,
+          selectPath: this.getTargetHeaderPath,
+          defaultSelectFirstNode: false,
+          enableInput: false,
+          useQuotes: false,
+        },
+        header: this.getHeadersTitle(
+          uploadHeaders,
+          REQUEST_HEADERS_FROM_UPLOAD
+        ),
+        buttons: this.renderRawHeadersBtn(
+          "upload",
+          rawUploadHeadersOpened,
+          this.toggleRawUploadHeaders
+        ),
+        id: "uploadHeaders",
+        opened: true,
+        shouldOpen: this.getShouldOpen(
+          "upload",
+          filterText,
+          targetSearchResult
+        ),
+      });
+    }
+
+    const sizeText = L10N.getFormatStrWithNumbers(
+      "netmonitor.headers.sizeDetails",
+      getFormattedSize(transferredSize),
+      getFormattedSize(contentSize)
+    );
+
+    const summarySize = this.renderSummary(HEADERS_TRANSFERRED, sizeText);
+
+    let summaryStatus;
+    if (status) {
+      summaryStatus = div(
+        {
+          key: "headers-summary",
+          className: "tabpanel-summary-container headers-summary",
+        },
+        span(
+          {
+            className: "tabpanel-summary-label headers-summary-label",
+          },
+          HEADERS_STATUS
+        ),
+        span(
+          {
+            className: "tabpanel-summary-value status",
+            "data-code": status,
+          },
+          StatusCode({
+            item: { fromCache, fromServiceWorker, status, statusText },
+          }),
+          statusText,
+          MDNLink({
+            url: getHTTPStatusCodeURL(status),
+            title: SUMMARY_STATUS_LEARN_MORE,
+          })
+        )
+      );
+    }
+
+    let summaryProxyStatus;
+    if (proxyStatus) {
+      summaryProxyStatus = div(
+        {
+          key: "headers-summary ",
+          className:
+            "tabpanel-summary-container headers-summary headers-proxy-status",
+        },
+        span(
+          {
+            className: "tabpanel-summary-label headers-summary-label",
+          },
+          HEADERS_PROXY_STATUS
+        ),
+        span(
+          {
+            className: "tabpanel-summary-value status",
+            "data-code": proxyStatus,
+          },
+          StatusCode({
+            item: {
+              fromCache,
+              fromServiceWorker,
+              status: proxyStatus,
+              statusText: proxyStatusText,
+            },
+          }),
+          proxyStatusText,
+          MDNLink({
+            url: getHTTPStatusCodeURL(proxyStatus),
+            title: SUMMARY_STATUS_LEARN_MORE,
+          })
+        )
+      );
+    }
+
+    let trackingProtectionStatus;
+    let trackingProtectionDetails = "";
+    if (isThirdPartyTrackingResource) {
+      const trackingProtectionDocURL = getTrackingProtectionURL();
+
+      trackingProtectionStatus = this.renderSummary(
+        HEADERS_CONTENT_BLOCKING,
+        div(null, span({ className: "tracking-resource" }), HEADERS_ETP)
+      );
+      trackingProtectionDetails = this.renderSummary(
+        "",
+        div(
+          {
+            key: "tracking-protection",
+            className: "tracking-protection",
+          },
+          L10N.getStr("netmonitor.trackingResource.tooltip"),
+          trackingProtectionDocURL
+            ? MDNLink({
+                url: trackingProtectionDocURL,
+                title: SUMMARY_ETP_LEARN_MORE,
+              })
+            : span({ className: "headers-summary learn-more-link" })
+        )
+      );
+    }
+
+    const summaryVersion = httpVersion
+      ? this.renderSummary(HEADERS_VERSION, httpVersion)
+      : null;
+
+    const summaryProxyHttpVersion = proxyHttpVersion
+      ? this.renderSummary(
+          HEADERS_PROXY_VERSION,
+          proxyHttpVersion,
+          "headers-proxy-version"
+        )
+      : null;
+
+    const summaryReferrerPolicy = referrerPolicy
+      ? this.renderSummary(HEADERS_REFERRER, referrerPolicy)
+      : null;
+
+    const summaryPriority = priority
+      ? this.renderSummary(HEADERS_PRIORITY, getRequestPriorityAsText(priority))
+      : null;
+
+    const summaryDNS = this.renderSummary(
+      HEADERS_DNS,
+      L10N.getStr(
+        isResolvedByTRR
+          ? "netmonitor.headers.dns.overHttps"
+          : "netmonitor.headers.dns.basic"
+      )
+    );
+
+    const summaryItems = [
+      summaryStatus,
+      summaryProxyStatus,
+      summaryVersion,
+      summaryProxyHttpVersion,
+      summarySize,
+      summaryReferrerPolicy,
+      summaryPriority,
+      summaryDNS,
+      trackingProtectionStatus,
+      trackingProtectionDetails,
+    ].filter(summaryItem => summaryItem !== null);
+
+    const newEditAndResendPref = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.newEditAndResend"
+    );
+
+    return div(
+      { className: "headers-panel-container" },
+      div(
+        { className: "devtools-toolbar devtools-input-toolbar" },
+        SearchBox({
+          delay: FILTER_SEARCH_DELAY,
+          type: "filter",
+          onChange: text => this.setState({ filterText: text }),
+          placeholder: HEADERS_FILTER_TEXT,
+        }),
+        span({ className: "devtools-separator" }),
+        button(
+          {
+            id: "block-button",
+            className: "devtools-button",
+            title: L10N.getStr("netmonitor.context.blockURL"),
+            onClick: () => openRequestBlockingAndAddUrl(urlDetails.url),
+          },
+          L10N.getStr("netmonitor.headers.toolbar.block")
+        ),
+        span({ className: "devtools-separator" }),
+        button(
+          {
+            id: "edit-resend-button",
+            className: !newEditAndResendPref
+              ? "devtools-button devtools-dropdown-button"
+              : "devtools-button",
+            title: RESEND,
+            onClick: !newEditAndResendPref
+              ? this.onShowResendMenu
+              : () => {
+                  openHTTPCustomRequestTab();
+                },
+          },
+          span({ className: "title" }, RESEND)
+        )
+      ),
+      div(
+        { className: "panel-container" },
+        div(
+          { className: "headers-overview" },
+          UrlPreview({
+            url: urlDetails.url,
+            method,
+            address: remoteAddress
+              ? getFormattedIPAndPort(remoteAddress, remotePort)
+              : null,
+            shouldExpandPreview,
+            onTogglePreview: expanded => setHeadersUrlPreviewExpanded(expanded),
+            proxyStatus,
+          }),
+          div(
+            {
+              className: "summary",
+              onContextMenu: this.onShowHeadersContextMenu,
+            },
+            summaryItems
+          )
+        ),
+        Accordion({ items })
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    shouldExpandPreview: state.ui.shouldExpandHeadersUrlPreview,
+  }),
+  (dispatch, props) => ({
+    setHeadersUrlPreviewExpanded: expanded =>
+      dispatch(Actions.setHeadersUrlPreviewExpanded(expanded)),
+    openRequestBlockingAndAddUrl: url =>
+      dispatch(Actions.openRequestBlockingAndAddUrl(url)),
+    openHTTPCustomRequestTab: () =>
+      dispatch(Actions.openHTTPCustomRequest(true)),
+    cloneRequest: id => dispatch(Actions.cloneRequest(id)),
+    sendCustomRequest: () => dispatch(Actions.sendCustomRequest()),
+  })
+)(HeadersPanel);
diff --git a/devtools/client/netmonitor/src/components/request-details/NetworkDetailsBar.js b/devtools/client/netmonitor/src/components/request-details/NetworkDetailsBar.js
new file mode 100644
index 0000000000..3f37a698f5
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/NetworkDetailsBar.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/. */
+
+"use strict";
+
+const {
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  getSelectedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+loader.lazyGetter(this, "CustomRequestPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/CustomRequestPanel.js")
+  );
+});
+loader.lazyGetter(this, "TabboxPanel", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/TabboxPanel.js")
+  );
+});
+
+const { div } = dom;
+
+/**
+ * Network details panel component
+ */
+function NetworkDetailsBar({
+  connector,
+  activeTabId,
+  cloneSelectedRequest,
+  request,
+  selectTab,
+  sourceMapURLService,
+  toggleNetworkDetails,
+  openNetworkDetails,
+  openLink,
+  targetSearchResult,
+}) {
+  if (!request) {
+    return null;
+  }
+
+  const newEditAndResendPref = Services.prefs.getBoolPref(
+    "devtools.netmonitor.features.newEditAndResend"
+  );
+
+  return div(
+    { className: "network-details-bar" },
+    request.isCustom && !newEditAndResendPref
+      ? CustomRequestPanel({
+          connector,
+          request,
+        })
+      : TabboxPanel({
+          activeTabId,
+          cloneSelectedRequest,
+          connector,
+          openLink,
+          request,
+          selectTab,
+          sourceMapURLService,
+          toggleNetworkDetails,
+          openNetworkDetails,
+          targetSearchResult,
+        })
+  );
+}
+
+NetworkDetailsBar.displayName = "NetworkDetailsBar";
+
+NetworkDetailsBar.propTypes = {
+  connector: PropTypes.object.isRequired,
+  activeTabId: PropTypes.string,
+  cloneSelectedRequest: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  request: PropTypes.object,
+  selectTab: PropTypes.func.isRequired,
+  sourceMapURLService: PropTypes.object,
+  toggleNetworkDetails: PropTypes.func.isRequired,
+  openLink: PropTypes.func,
+  openNetworkDetails: PropTypes.func,
+  targetSearchResult: PropTypes.object,
+};
+
+module.exports = connect(
+  state => ({
+    activeTabId: state.ui.detailsPanelSelectedTab,
+    request: getSelectedRequest(state),
+    targetSearchResult: state.search.targetSearchResult,
+  }),
+  dispatch => ({
+    cloneSelectedRequest: () => dispatch(Actions.cloneSelectedRequest()),
+    selectTab: tabId => dispatch(Actions.selectDetailsPanelTab(tabId)),
+    toggleNetworkDetails: () => dispatch(Actions.toggleNetworkDetails()),
+    openNetworkDetails: open => dispatch(Actions.openNetworkDetails(open)),
+  })
+)(NetworkDetailsBar);
diff --git a/devtools/client/netmonitor/src/components/request-details/PropertiesView.js b/devtools/client/netmonitor/src/components/request-details/PropertiesView.js
new file mode 100644
index 0000000000..759653c1aa
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/PropertiesView.js
@@ -0,0 +1,247 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-disable react/prop-types */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  setTargetSearchResult,
+} = require("resource://devtools/client/netmonitor/src/actions/search.js");
+
+// Components
+const TreeViewClass = require("resource://devtools/client/shared/components/tree/TreeView.js");
+const TreeView = createFactory(TreeViewClass);
+const PropertiesViewContextMenu = require("resource://devtools/client/netmonitor/src/widgets/PropertiesViewContextMenu.js");
+
+loader.lazyGetter(this, "Rep", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+
+// Constants
+const {
+  AUTO_EXPAND_MAX_LEVEL,
+  AUTO_EXPAND_MAX_NODES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const { div } = dom;
+
+/**
+ * Properties View component
+ * A scrollable tree view component which provides some useful features for
+ * representing object properties.
+ *
+ * Tree view
+ * Rep
+ */
+class PropertiesView extends Component {
+  static get propTypes() {
+    return {
+      object: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+      provider: PropTypes.object,
+      enableInput: PropTypes.bool,
+      expandableStrings: PropTypes.bool,
+      expandedNodes: PropTypes.object,
+      useBaseTreeViewExpand: PropTypes.bool,
+      filterText: PropTypes.string,
+      cropLimit: PropTypes.number,
+      targetSearchResult: PropTypes.object,
+      resetTargetSearchResult: PropTypes.func,
+      selectPath: PropTypes.func,
+      mode: PropTypes.symbol,
+      defaultSelectFirstNode: PropTypes.bool,
+      useQuotes: PropTypes.bool,
+      onClickRow: PropTypes.func,
+      contextMenuFormatters: PropTypes.object,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      enableInput: true,
+      enableFilter: true,
+      expandableStrings: false,
+      cropLimit: 1024,
+      useQuotes: true,
+      contextMenuFormatters: {},
+      useBaseTreeViewExpand: false,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onFilter = this.onFilter.bind(this);
+    this.renderValueWithRep = this.renderValueWithRep.bind(this);
+    this.getSelectedPath = this.getSelectedPath.bind(this);
+  }
+
+  /**
+   * Update only if:
+   * 1) The rendered object has changed
+   * 2) The filter text has changed
+   * 3) The user selected another search result target.
+   */
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.object !== nextProps.object ||
+      this.props.filterText !== nextProps.filterText ||
+      (this.props.targetSearchResult !== nextProps.targetSearchResult &&
+        nextProps.targetSearchResult !== null)
+    );
+  }
+
+  onFilter(props) {
+    const { name, value } = props;
+    const { filterText } = this.props;
+
+    if (!filterText) {
+      return true;
+    }
+
+    const jsonString = JSON.stringify({ [name]: value }).toLowerCase();
+    return jsonString.includes(filterText.toLowerCase());
+  }
+
+  getSelectedPath(targetSearchResult) {
+    if (!targetSearchResult) {
+      return null;
+    }
+
+    return `/${targetSearchResult.label}`;
+  }
+
+  /**
+   * If target is selected, let's scroll the content
+   * so the property is visible. This is used for search result navigation,
+   * which happens when the user clicks on a search result.
+   */
+  scrollSelectedIntoView() {
+    const { targetSearchResult, resetTargetSearchResult, selectPath } =
+      this.props;
+    if (!targetSearchResult) {
+      return;
+    }
+
+    const path =
+      typeof selectPath == "function"
+        ? selectPath(targetSearchResult)
+        : this.getSelectedPath(targetSearchResult);
+    const element = document.getElementById(path);
+    if (element) {
+      element.scrollIntoView({ block: "center" });
+    }
+
+    resetTargetSearchResult();
+  }
+
+  onContextMenuRow(member, evt) {
+    evt.preventDefault();
+
+    const { object } = member;
+
+    // Select the right clicked row
+    this.selectRow({ props: { member } });
+
+    // if data exists and can be copied, then show the contextmenu
+    if (typeof object === "object") {
+      if (!this.contextMenu) {
+        this.contextMenu = new PropertiesViewContextMenu({
+          customFormatters: this.props.contextMenuFormatters,
+        });
+      }
+      this.contextMenu.open(evt, window.getSelection(), {
+        member,
+        object: this.props.object,
+      });
+    }
+  }
+
+  renderValueWithRep(props) {
+    const { member } = props;
+
+    /* Hide strings with following conditions
+     * - the `value` object has a `value` property (only happens in Cookies panel)
+     */
+    if (typeof member.value === "object" && member.value?.value) {
+      return null;
+    }
+
+    return Rep(
+      Object.assign(props, {
+        // FIXME: A workaround for the issue in StringRep
+        // Force StringRep to crop the text every time
+        member: Object.assign({}, member, { open: false }),
+        mode: this.props.mode || MODE.TINY,
+        cropLimit: this.props.cropLimit,
+        noGrip: true,
+      })
+    );
+  }
+
+  render() {
+    const {
+      useBaseTreeViewExpand,
+      expandedNodes,
+      object,
+      renderValue,
+      targetSearchResult,
+      selectPath,
+    } = this.props;
+
+    let currentExpandedNodes;
+    // In the TreeView, when the component is re-rendered
+    // the state of `expandedNodes` is persisted by default
+    // e.g. when you open a node and filter the properties list,
+    // the node remains open.
+    // We have the prop `useBaseTreeViewExpand` to flag when we want to use
+    // this functionality or not.
+    if (!useBaseTreeViewExpand) {
+      currentExpandedNodes =
+        expandedNodes ||
+        TreeViewClass.getExpandedNodes(object, {
+          maxLevel: AUTO_EXPAND_MAX_LEVEL,
+          maxNodes: AUTO_EXPAND_MAX_NODES,
+        });
+    }
+    return div(
+      { className: "properties-view" },
+      div(
+        { className: "tree-container" },
+        TreeView({
+          ...this.props,
+          ref: () => this.scrollSelectedIntoView(),
+          columns: [{ id: "value", width: "100%" }],
+
+          expandedNodes: currentExpandedNodes,
+
+          onFilter: props => this.onFilter(props),
+          renderValue: renderValue || this.renderValueWithRep,
+          onContextMenuRow: this.onContextMenuRow,
+          selected:
+            typeof selectPath == "function"
+              ? selectPath(targetSearchResult)
+              : this.getSelectedPath(targetSearchResult),
+        })
+      )
+    );
+  }
+}
+
+module.exports = connect(null, dispatch => ({
+  resetTargetSearchResult: () => dispatch(setTargetSearchResult(null)),
+}))(PropertiesView);
diff --git a/devtools/client/netmonitor/src/components/request-details/RequestPanel.js b/devtools/client/netmonitor/src/components/request-details/RequestPanel.js
new file mode 100644
index 0000000000..5306161d2e
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/RequestPanel.js
@@ -0,0 +1,301 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+  parseFormData,
+  parseJSON,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  sortObjectKeys,
+} = require("resource://devtools/client/netmonitor/src/utils/sort-utils.js");
+const {
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  updateFormDataSections,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+
+// Components
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+loader.lazyGetter(this, "SourcePreview", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/previews/SourcePreview.js")
+  );
+});
+
+const { div, input, label, span, h2 } = dom;
+
+const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
+const REQUEST_EMPTY_TEXT = L10N.getStr("paramsNoPayloadText");
+const REQUEST_FILTER_TEXT = L10N.getStr("paramsFilterText");
+const REQUEST_FORM_DATA = L10N.getStr("paramsFormData");
+const REQUEST_POST_PAYLOAD = L10N.getStr("paramsPostPayload");
+const RAW_REQUEST_PAYLOAD = L10N.getStr("netmonitor.request.raw");
+const REQUEST_TRUNCATED = L10N.getStr("requestTruncated");
+
+/**
+ * Params panel component
+ * Displays the GET parameters and POST data of a request
+ */
+class RequestPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object.isRequired,
+      updateRequest: PropTypes.func.isRequired,
+      targetSearchResult: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      filterText: "",
+      rawRequestPayloadDisplayed: !!props.targetSearchResult,
+    };
+
+    this.toggleRawRequestPayload = this.toggleRawRequestPayload.bind(this);
+    this.renderRawRequestPayloadBtn =
+      this.renderRawRequestPayloadBtn.bind(this);
+  }
+
+  componentDidMount() {
+    const { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestPostData",
+    ]);
+    updateFormDataSections(this.props);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "requestPostData",
+    ]);
+    updateFormDataSections(nextProps);
+
+    if (nextProps.targetSearchResult !== null) {
+      this.setState({
+        rawRequestPayloadDisplayed: !!nextProps.targetSearchResult,
+      });
+    }
+  }
+
+  /**
+   * Update only if:
+   * 1) The rendered object has changed
+   * 2) The filter text has changed
+   * 2) The display got toggled between formatted and raw data
+   * 3) The user selected another search result target.
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.props.request !== nextProps.request ||
+      this.state.filterText !== nextState.filterText ||
+      this.state.rawRequestPayloadDisplayed !==
+        nextState.rawRequestPayloadDisplayed ||
+      this.props.targetSearchResult !== nextProps.targetSearchResult
+    );
+  }
+
+  /**
+   * Mapping array to dict for TreeView usage.
+   * Since TreeView only support Object(dict) format.
+   * This function also deal with duplicate key case
+   * (for multiple selection and query params with same keys)
+   *
+   * This function is not sorting result properties since it can
+   * results in unexpected order of params. See bug 1469533
+   *
+   * @param {Object[]} arr - key-value pair array or form params
+   * @returns {Object} Rep compatible object
+   */
+  getProperties(arr) {
+    return arr.reduce((map, obj) => {
+      const value = map[obj.name];
+      if (value || value === "") {
+        if (typeof value !== "object") {
+          map[obj.name] = [value];
+        }
+        map[obj.name].push(obj.value);
+      } else {
+        map[obj.name] = obj.value;
+      }
+      return map;
+    }, {});
+  }
+
+  toggleRawRequestPayload() {
+    this.setState({
+      rawRequestPayloadDisplayed: !this.state.rawRequestPayloadDisplayed,
+    });
+  }
+
+  renderRawRequestPayloadBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawRequestPayloadBtn`,
+          className: "raw-data-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "raw-data-toggle-label" }, RAW_REQUEST_PAYLOAD),
+        span(
+          { className: "raw-data-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderRequestPayload(component, componentProps) {
+    return component(componentProps);
+  }
+
+  render() {
+    const { request, targetSearchResult } = this.props;
+    const { filterText, rawRequestPayloadDisplayed } = this.state;
+    const { formDataSections, mimeType, requestPostData } = request;
+    const postData = requestPostData ? requestPostData.postData?.text : null;
+
+    if ((!formDataSections || formDataSections.length === 0) && !postData) {
+      return div({ className: "empty-notice" }, REQUEST_EMPTY_TEXT);
+    }
+
+    let component;
+    let componentProps;
+    let requestPayloadLabel = REQUEST_POST_PAYLOAD;
+    let hasFormattedDisplay = false;
+
+    let error;
+
+    // Form Data section
+    if (formDataSections && formDataSections.length) {
+      const sections = formDataSections.filter(str => /\S/.test(str)).join("&");
+      component = PropertiesView;
+      componentProps = {
+        object: this.getProperties(parseFormData(sections)),
+        filterText,
+        targetSearchResult,
+        defaultSelectFirstNode: false,
+      };
+      requestPayloadLabel = REQUEST_FORM_DATA;
+      hasFormattedDisplay = true;
+    }
+
+    // Request payload section
+    const limit = Services.prefs.getIntPref(
+      "devtools.netmonitor.requestBodyLimit"
+    );
+
+    // Check if the request post data has been truncated from the backend,
+    // in which case no parse should be attempted.
+    if (postData && limit <= postData.length) {
+      error = REQUEST_TRUNCATED;
+    }
+    if (formDataSections && formDataSections.length === 0 && postData) {
+      if (!error) {
+        const jsonParsedPostData = parseJSON(postData);
+        const { json, strippedChars } = jsonParsedPostData;
+        // If XSSI characters were present in the request just display the raw
+        // data because a request should never have XSSI escape characters
+        if (strippedChars) {
+          hasFormattedDisplay = false;
+        } else if (json) {
+          component = PropertiesView;
+          componentProps = {
+            object: sortObjectKeys(json),
+            filterText,
+            targetSearchResult,
+            defaultSelectFirstNode: false,
+          };
+          requestPayloadLabel = JSON_SCOPE_NAME;
+          hasFormattedDisplay = true;
+        }
+      }
+    }
+
+    if (
+      (!hasFormattedDisplay || this.state.rawRequestPayloadDisplayed) &&
+      postData
+    ) {
+      component = SourcePreview;
+      componentProps = {
+        text: postData,
+        mode: mimeType?.replace(/;.+/, ""),
+        targetSearchResult,
+      };
+      requestPayloadLabel = REQUEST_POST_PAYLOAD;
+    }
+
+    return div(
+      { className: "panel-container" },
+      error && div({ className: "request-error-header", title: error }, error),
+      div(
+        { className: "devtools-toolbar devtools-input-toolbar" },
+        SearchBox({
+          delay: FILTER_SEARCH_DELAY,
+          type: "filter",
+          onChange: text => this.setState({ filterText: text }),
+          placeholder: REQUEST_FILTER_TEXT,
+        })
+      ),
+      h2({ className: "data-header", role: "heading" }, [
+        span(
+          {
+            key: "data-label",
+            className: "data-label",
+          },
+          requestPayloadLabel
+        ),
+        hasFormattedDisplay &&
+          this.renderRawRequestPayloadBtn(
+            "request",
+            rawRequestPayloadDisplayed,
+            this.toggleRawRequestPayload
+          ),
+      ]),
+      this.renderRequestPayload(component, componentProps)
+    );
+  }
+}
+
+module.exports = connect(null, dispatch => ({
+  updateRequest: (id, data, batch) =>
+    dispatch(Actions.updateRequest(id, data, batch)),
+}))(RequestPanel);
diff --git a/devtools/client/netmonitor/src/components/request-details/ResponsePanel.js b/devtools/client/netmonitor/src/components/request-details/ResponsePanel.js
new file mode 100644
index 0000000000..ac4435ea1d
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/ResponsePanel.js
@@ -0,0 +1,496 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  decodeUnicodeBase64,
+  fetchNetworkUpdatePacket,
+  parseJSON,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getCORSErrorURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+const {
+  Filters,
+} = require("resource://devtools/client/netmonitor/src/utils/filter-predicates.js");
+const {
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  BLOCKED_REASON_MESSAGES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Components
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+const ImagePreview = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/previews/ImagePreview.js")
+);
+const FontPreview = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/previews/FontPreview.js")
+);
+const SourcePreview = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/previews/SourcePreview.js")
+);
+const HtmlPreview = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/previews/HtmlPreview.js")
+);
+let {
+  NotificationBox,
+  PriorityLevels,
+} = require("resource://devtools/client/shared/components/NotificationBox.js");
+NotificationBox = createFactory(NotificationBox);
+const MessagesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/MessagesView.js")
+);
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+
+const { div, input, label, span, h2 } = dom;
+const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
+const JSON_FILTER_TEXT = L10N.getStr("jsonFilterText");
+const RESPONSE_PAYLOAD = L10N.getStr("responsePayload");
+const RAW_RESPONSE_PAYLOAD = L10N.getStr("netmonitor.response.raw");
+const HTML_RESPONSE = L10N.getStr("netmonitor.response.html");
+const RESPONSE_EMPTY_TEXT = L10N.getStr("responseEmptyText");
+const RESPONSE_TRUNCATED = L10N.getStr("responseTruncated");
+
+const JSON_VIEW_MIME_TYPE = "application/vnd.mozilla.json.view";
+
+/**
+ * Response panel component
+ * Displays the GET parameters and POST data of a request
+ */
+class ResponsePanel extends Component {
+  static get propTypes() {
+    return {
+      request: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      targetSearchResult: PropTypes.object,
+      connector: PropTypes.object.isRequired,
+      showMessagesView: PropTypes.bool,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filterText: "",
+      rawResponsePayloadDisplayed: !!props.targetSearchResult,
+    };
+
+    this.toggleRawResponsePayload = this.toggleRawResponsePayload.bind(this);
+    this.renderCORSBlockedReason = this.renderCORSBlockedReason.bind(this);
+    this.renderRawResponsePayloadBtn =
+      this.renderRawResponsePayloadBtn.bind(this);
+    this.renderJsonHtmlAndSource = this.renderJsonHtmlAndSource.bind(this);
+    this.handleJSONResponse = this.handleJSONResponse.bind(this);
+  }
+
+  componentDidMount() {
+    const { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "responseContent",
+    ]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, [
+      "responseContent",
+    ]);
+
+    // If the response contains XSSI stripped chars default to raw view
+    const text = nextProps.request?.responseContent?.content?.text;
+    const xssiStrippedChars = text && parseJSON(text)?.strippedChars;
+    if (xssiStrippedChars && !this.state.rawResponsePayloadDisplayed) {
+      this.toggleRawResponsePayload();
+    }
+
+    if (nextProps.targetSearchResult !== null) {
+      this.setState({
+        rawResponsePayloadDisplayed: !!nextProps.targetSearchResult,
+      });
+    }
+  }
+
+  /**
+   * Update only if:
+   * 1) The rendered object has changed
+   * 2) The user selected another search result target.
+   * 3) Internal state changes
+   */
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.state !== nextState ||
+      this.props.request !== nextProps.request ||
+      nextProps.targetSearchResult !== null
+    );
+  }
+
+  /**
+   * Handle json, which we tentatively identify by checking the
+   * MIME type for "json" after any word boundary. This works
+   * for the standard "application/json", and also for custom
+   * types like "x-bigcorp-json". Additionally, we also
+   * directly parse the response text content to verify whether
+   * it's json or not, to handle responses incorrectly labeled
+   * as text/plain instead.
+   */
+  handleJSONResponse(mimeType, response) {
+    const limit = Services.prefs.getIntPref(
+      "devtools.netmonitor.responseBodyLimit"
+    );
+    const { request } = this.props;
+
+    // Check if the response has been truncated, in which case no parse should
+    // be attempted.
+    if (limit > 0 && limit <= request.responseContent.content.size) {
+      const result = {};
+      result.error = RESPONSE_TRUNCATED;
+      return result;
+    }
+
+    const { json, error, jsonpCallback, strippedChars } = parseJSON(response);
+
+    if (/\bjson/.test(mimeType) || json) {
+      const result = {};
+      // Make sure this is a valid JSON object first. If so, nicely display
+      // the parsing results in a tree view.
+
+      // Valid JSON
+      if (json) {
+        result.json = json;
+      }
+      // Valid JSONP
+      if (jsonpCallback) {
+        result.jsonpCallback = jsonpCallback;
+      }
+      // Malformed JSON
+      if (error) {
+        result.error = "" + error;
+      }
+      // XSSI protection sequence
+      if (strippedChars) {
+        result.strippedChars = strippedChars;
+      }
+
+      return result;
+    }
+
+    return null;
+  }
+
+  renderCORSBlockedReason(blockedReason) {
+    // ensure that the blocked reason is in the CORS range
+    if (
+      typeof blockedReason != "number" ||
+      blockedReason < 1000 ||
+      blockedReason > 1015
+    ) {
+      return null;
+    }
+
+    const blockedMessage = BLOCKED_REASON_MESSAGES[blockedReason];
+    const messageText = L10N.getFormatStr(
+      "netmonitor.headers.blockedByCORS",
+      blockedMessage
+    );
+
+    const learnMoreTooltip = L10N.getStr(
+      "netmonitor.headers.blockedByCORSTooltip"
+    );
+
+    // Create a notifications map with the CORS error notification
+    const notifications = new Map();
+    notifications.set("CORS-error", {
+      label: messageText,
+      value: "CORS-error",
+      image: "",
+      priority: PriorityLevels.PRIORITY_INFO_HIGH,
+      type: "info",
+      eventCallback: e => {},
+      buttons: [
+        {
+          mdnUrl: getCORSErrorURL(blockedReason),
+          label: learnMoreTooltip,
+        },
+      ],
+    });
+
+    return NotificationBox({
+      notifications,
+      displayBorderTop: false,
+      displayBorderBottom: true,
+      displayCloseButton: false,
+    });
+  }
+
+  toggleRawResponsePayload() {
+    this.setState({
+      rawResponsePayloadDisplayed: !this.state.rawResponsePayloadDisplayed,
+    });
+  }
+
+  /**
+   * Pick correct component, componentprops, and other needed data to render
+   * the given response
+   *
+   * @returns {Object} shape:
+   *  {component}: React component used to render response
+   *  {Object} componetProps: Props passed to component
+   *  {Error} error: JSON parsing error
+   *  {Object} json: parsed JSON payload
+   *  {bool} hasFormattedDisplay: whether the given payload has a formatted
+   *         display or if it should be rendered raw
+   *  {string} responsePayloadLabel: describes type in response panel
+   *  {component} xssiStrippedCharsInfoBox: React component to notifiy users
+   *              that XSSI characters were stripped from the response
+   */
+  renderJsonHtmlAndSource() {
+    const { request, targetSearchResult } = this.props;
+    const { responseContent } = request;
+    let { encoding, mimeType, text } = responseContent.content;
+    const { filterText, rawResponsePayloadDisplayed } = this.state;
+
+    // Decode response if it's coming from JSONView.
+    if (mimeType?.includes(JSON_VIEW_MIME_TYPE) && encoding === "base64") {
+      text = decodeUnicodeBase64(text);
+    }
+    const { json, jsonpCallback, error, strippedChars } =
+      this.handleJSONResponse(mimeType, text) || {};
+
+    let component;
+    let componentProps;
+    let xssiStrippedCharsInfoBox;
+    let responsePayloadLabel = RESPONSE_PAYLOAD;
+    let hasFormattedDisplay = false;
+
+    if (json) {
+      if (jsonpCallback) {
+        responsePayloadLabel = L10N.getFormatStr(
+          "jsonpScopeName",
+          jsonpCallback
+        );
+      } else {
+        responsePayloadLabel = JSON_SCOPE_NAME;
+      }
+
+      // If raw response payload is not displayed render xssi info box if
+      // there are stripped chars
+      if (!rawResponsePayloadDisplayed) {
+        xssiStrippedCharsInfoBox =
+          this.renderXssiStrippedCharsInfoBox(strippedChars);
+      } else {
+        xssiStrippedCharsInfoBox = null;
+      }
+
+      component = PropertiesView;
+      componentProps = {
+        object: json,
+        useQuotes: true,
+        filterText,
+        targetSearchResult,
+        defaultSelectFirstNode: false,
+        mode: MODE.LONG,
+        useBaseTreeViewExpand: true,
+      };
+      hasFormattedDisplay = true;
+    } else if (Filters.html(this.props.request)) {
+      // Display HTML
+      responsePayloadLabel = HTML_RESPONSE;
+      component = HtmlPreview;
+      componentProps = { responseContent };
+      hasFormattedDisplay = true;
+    }
+    if (!hasFormattedDisplay || rawResponsePayloadDisplayed) {
+      component = SourcePreview;
+      componentProps = {
+        text,
+        mode: json ? "application/json" : mimeType.replace(/;.+/, ""),
+        targetSearchResult,
+      };
+    }
+    return {
+      component,
+      componentProps,
+      error,
+      hasFormattedDisplay,
+      json,
+      responsePayloadLabel,
+      xssiStrippedCharsInfoBox,
+    };
+  }
+
+  renderRawResponsePayloadBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawResponsePayloadBtn`,
+          className: "raw-data-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "raw-data-toggle-label" }, RAW_RESPONSE_PAYLOAD),
+        span(
+          { className: "raw-data-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderResponsePayload(component, componentProps) {
+    return component(componentProps);
+  }
+
+  /**
+   * This function takes a string of the XSSI protection characters
+   * removed from a JSON payload and produces a notification component
+   * letting the user know that they were removed
+   *
+   * @param {string} strippedChars: string of XSSI protection characters
+   *                                removed from JSON payload
+   * @returns {component} NotificationBox component
+   */
+  renderXssiStrippedCharsInfoBox(strippedChars) {
+    if (!strippedChars || this.state.rawRequestPayloadDisplayed) {
+      return null;
+    }
+    const message = L10N.getFormatStr("jsonXssiStripped", strippedChars);
+
+    const notifications = new Map();
+    notifications.set("xssi-string-removed-info-box", {
+      label: message,
+      value: "xssi-string-removed-info-box",
+      image: "",
+      priority: PriorityLevels.PRIORITY_INFO_MEDIUM,
+      type: "info",
+      eventCallback: e => {},
+      buttons: [],
+    });
+
+    return NotificationBox({
+      notifications,
+      displayBorderTop: false,
+      displayBorderBottom: true,
+      displayCloseButton: false,
+    });
+  }
+
+  render() {
+    const { connector, showMessagesView, request } = this.props;
+    const { blockedReason, responseContent, url } = request;
+    const { filterText, rawResponsePayloadDisplayed } = this.state;
+
+    // Display CORS blocked Reason info box
+    const CORSBlockedReasonDetails =
+      this.renderCORSBlockedReason(blockedReason);
+
+    if (showMessagesView) {
+      return MessagesView({ connector });
+    }
+
+    if (
+      !responseContent ||
+      typeof responseContent.content.text !== "string" ||
+      !responseContent.content.text
+    ) {
+      return div(
+        { className: "panel-container" },
+        CORSBlockedReasonDetails,
+        div({ className: "empty-notice" }, RESPONSE_EMPTY_TEXT)
+      );
+    }
+
+    const { encoding, mimeType, text } = responseContent.content;
+
+    if (Filters.images({ mimeType })) {
+      return ImagePreview({ encoding, mimeType, text, url });
+    }
+
+    if (Filters.fonts({ url, mimeType })) {
+      return FontPreview({ connector, mimeType, url });
+    }
+
+    // Get Data needed for formatted display
+    const {
+      component,
+      componentProps,
+      error,
+      hasFormattedDisplay,
+      json,
+      responsePayloadLabel,
+      xssiStrippedCharsInfoBox,
+    } = this.renderJsonHtmlAndSource();
+
+    const classList = ["panel-container"];
+    if (Filters.html(this.props.request)) {
+      classList.push("contains-html-preview");
+    }
+
+    return div(
+      { className: classList.join(" ") },
+      error && div({ className: "response-error-header", title: error }, error),
+      json &&
+        div(
+          { className: "devtools-toolbar devtools-input-toolbar" },
+          SearchBox({
+            delay: FILTER_SEARCH_DELAY,
+            type: "filter",
+            onChange: filter => this.setState({ filterText: filter }),
+            placeholder: JSON_FILTER_TEXT,
+            value: filterText,
+          })
+        ),
+      div({ tabIndex: "0" }, CORSBlockedReasonDetails),
+      h2({ className: "data-header", role: "heading" }, [
+        span(
+          {
+            key: "data-label",
+            className: "data-label",
+          },
+          responsePayloadLabel
+        ),
+        hasFormattedDisplay &&
+          this.renderRawResponsePayloadBtn(
+            "response",
+            rawResponsePayloadDisplayed,
+            this.toggleRawResponsePayload
+          ),
+      ]),
+      xssiStrippedCharsInfoBox,
+      this.renderResponsePayload(component, componentProps)
+    );
+  }
+}
+
+module.exports = ResponsePanel;
diff --git a/devtools/client/netmonitor/src/components/request-details/SecurityPanel.js b/devtools/client/netmonitor/src/components/request-details/SecurityPanel.js
new file mode 100644
index 0000000000..74dca02cc8
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/SecurityPanel.js
@@ -0,0 +1,283 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+  getUrlHost,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+// Components
+const TreeViewClass = require("resource://devtools/client/shared/components/tree/TreeView.js");
+const PropertiesView = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+);
+
+loader.lazyGetter(this, "Rep", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .REPS.Rep;
+});
+loader.lazyGetter(this, "MODE", function () {
+  return require("resource://devtools/client/shared/components/reps/index.js")
+    .MODE;
+});
+
+const { div, span } = dom;
+const NOT_AVAILABLE = L10N.getStr("netmonitor.security.notAvailable");
+const ERROR_LABEL = L10N.getStr("netmonitor.security.error");
+const CIPHER_SUITE_LABEL = L10N.getStr("netmonitor.security.cipherSuite");
+const WARNING_CIPHER_LABEL = L10N.getStr("netmonitor.security.warning.cipher");
+const ENABLED_LABEL = L10N.getStr("netmonitor.security.enabled");
+const DISABLED_LABEL = L10N.getStr("netmonitor.security.disabled");
+const CONNECTION_LABEL = L10N.getStr("netmonitor.security.connection");
+const PROTOCOL_VERSION_LABEL = L10N.getStr(
+  "netmonitor.security.protocolVersion"
+);
+const KEA_GROUP_LABEL = L10N.getStr("netmonitor.security.keaGroup");
+const KEA_GROUP_NONE = L10N.getStr("netmonitor.security.keaGroup.none");
+const KEA_GROUP_CUSTOM = L10N.getStr("netmonitor.security.keaGroup.custom");
+const KEA_GROUP_UNKNOWN = L10N.getStr("netmonitor.security.keaGroup.unknown");
+const SIGNATURE_SCHEME_LABEL = L10N.getStr(
+  "netmonitor.security.signatureScheme"
+);
+const SIGNATURE_SCHEME_NONE = L10N.getStr(
+  "netmonitor.security.signatureScheme.none"
+);
+const SIGNATURE_SCHEME_UNKNOWN = L10N.getStr(
+  "netmonitor.security.signatureScheme.unknown"
+);
+const HSTS_LABEL = L10N.getStr("netmonitor.security.hsts");
+const HPKP_LABEL = L10N.getStr("netmonitor.security.hpkp");
+const CERTIFICATE_LABEL = L10N.getStr("netmonitor.security.certificate");
+const CERTIFICATE_TRANSPARENCY_LABEL = L10N.getStr(
+  "certmgr.certificateTransparency.label"
+);
+const CERTIFICATE_TRANSPARENCY_POLICY_COMPLIANT = L10N.getStr(
+  "certmgr.certificateTransparency.status.ok"
+);
+const CERTIFICATE_TRANSPARENCY_POLICY_NOT_ENOUGH_SCTS = L10N.getStr(
+  "certmgr.certificateTransparency.status.notEnoughSCTS"
+);
+const CERTIFICATE_TRANSPARENCY_POLICY_NOT_DIVERSE_SCTS = L10N.getStr(
+  "certmgr.certificateTransparency.status.notDiverseSCTS"
+);
+const SUBJECT_INFO_LABEL = L10N.getStr("certmgr.subjectinfo.label");
+const CERT_DETAIL_COMMON_NAME_LABEL = L10N.getStr("certmgr.certdetail.cn");
+const CERT_DETAIL_ORG_LABEL = L10N.getStr("certmgr.certdetail.o");
+const CERT_DETAIL_ORG_UNIT_LABEL = L10N.getStr("certmgr.certdetail.ou");
+const ISSUER_INFO_LABEL = L10N.getStr("certmgr.issuerinfo.label");
+const PERIOD_OF_VALIDITY_LABEL = L10N.getStr("certmgr.periodofvalidity.label");
+const BEGINS_LABEL = L10N.getStr("certmgr.begins");
+const EXPIRES_LABEL = L10N.getStr("certmgr.expires");
+const FINGERPRINTS_LABEL = L10N.getStr("certmgr.fingerprints.label");
+const SHA256_FINGERPRINT_LABEL = L10N.getStr(
+  "certmgr.certdetail.sha256fingerprint"
+);
+const SHA1_FINGERPRINT_LABEL = L10N.getStr(
+  "certmgr.certdetail.sha1fingerprint"
+);
+
+/*
+ * Localize special values for key exchange group name,
+ * certificate signature scheme, and certificate
+ * transparency status.
+ */
+const formatSecurityInfo = securityInfo => {
+  const formattedSecurityInfo = { ...securityInfo };
+
+  const formatters = {
+    keaGroupName: value => {
+      if (value === "none") {
+        return KEA_GROUP_NONE;
+      }
+      if (value === "custom") {
+        return KEA_GROUP_CUSTOM;
+      }
+      if (value === "unknown group") {
+        return KEA_GROUP_UNKNOWN;
+      }
+      return value;
+    },
+    signatureSchemeName: value => {
+      if (value === "none") {
+        return SIGNATURE_SCHEME_NONE;
+      }
+      if (value === "unknown signature") {
+        return SIGNATURE_SCHEME_UNKNOWN;
+      }
+      return value;
+    },
+    certificateTransparency: value => {
+      if (value === 5) {
+        return CERTIFICATE_TRANSPARENCY_POLICY_COMPLIANT;
+      }
+      if (value === 6) {
+        return CERTIFICATE_TRANSPARENCY_POLICY_NOT_ENOUGH_SCTS;
+      }
+      if (value === 7) {
+        return CERTIFICATE_TRANSPARENCY_POLICY_NOT_DIVERSE_SCTS;
+      }
+      return value;
+    },
+  };
+
+  return Object.keys(formatters).reduce((acc, key) => {
+    const formatter = formatters[key];
+    acc[key] = formatter(acc[key]);
+    return acc;
+  }, formattedSecurityInfo);
+};
+
+const getConnectionLabel = securityInfo => ({
+  [PROTOCOL_VERSION_LABEL]: securityInfo.protocolVersion || NOT_AVAILABLE,
+  [CIPHER_SUITE_LABEL]: securityInfo.cipherSuite || NOT_AVAILABLE,
+  [KEA_GROUP_LABEL]: securityInfo.keaGroupName || NOT_AVAILABLE,
+  [SIGNATURE_SCHEME_LABEL]: securityInfo.signatureSchemeName || NOT_AVAILABLE,
+});
+
+const getHostHeaderLabel = securityInfo => ({
+  [HSTS_LABEL]: securityInfo.hsts ? ENABLED_LABEL : DISABLED_LABEL,
+  [HPKP_LABEL]: securityInfo.hpkp ? ENABLED_LABEL : DISABLED_LABEL,
+});
+
+const getCertificateLabel = securityInfo => {
+  const { fingerprint, issuer, subject, validity } = securityInfo.cert;
+
+  return {
+    [SUBJECT_INFO_LABEL]: {
+      [CERT_DETAIL_COMMON_NAME_LABEL]: subject?.commonName || NOT_AVAILABLE,
+      [CERT_DETAIL_ORG_LABEL]: subject?.organization || NOT_AVAILABLE,
+      [CERT_DETAIL_ORG_UNIT_LABEL]: subject?.organizationUnit || NOT_AVAILABLE,
+    },
+    [ISSUER_INFO_LABEL]: {
+      [CERT_DETAIL_COMMON_NAME_LABEL]: issuer?.commonName || NOT_AVAILABLE,
+      [CERT_DETAIL_ORG_LABEL]: issuer?.organization || NOT_AVAILABLE,
+      [CERT_DETAIL_ORG_UNIT_LABEL]: issuer?.organizationUnit || NOT_AVAILABLE,
+    },
+    [PERIOD_OF_VALIDITY_LABEL]: {
+      [BEGINS_LABEL]: validity?.start || NOT_AVAILABLE,
+      [EXPIRES_LABEL]: validity?.end || NOT_AVAILABLE,
+    },
+    [FINGERPRINTS_LABEL]: {
+      [SHA256_FINGERPRINT_LABEL]: fingerprint?.sha256 || NOT_AVAILABLE,
+      [SHA1_FINGERPRINT_LABEL]: fingerprint?.sha1 || NOT_AVAILABLE,
+    },
+    [CERTIFICATE_TRANSPARENCY_LABEL]:
+      securityInfo.certificateTransparency || NOT_AVAILABLE,
+  };
+};
+
+const getObject = ({ securityInfo, url }) => {
+  if (securityInfo.state !== "secure" && securityInfo.state !== "weak") {
+    return {
+      [ERROR_LABEL]: securityInfo.errorMessage || NOT_AVAILABLE,
+    };
+  }
+
+  const HOST_HEADER_LABEL = L10N.getFormatStr(
+    "netmonitor.security.hostHeader",
+    getUrlHost(url)
+  );
+  const formattedSecurityInfo = formatSecurityInfo(securityInfo);
+
+  return {
+    [CONNECTION_LABEL]: getConnectionLabel(formattedSecurityInfo),
+    [HOST_HEADER_LABEL]: getHostHeaderLabel(formattedSecurityInfo),
+    [CERTIFICATE_LABEL]: getCertificateLabel(formattedSecurityInfo),
+  };
+};
+
+/*
+ * Security panel component
+ * If the site is being served over HTTPS, you get an extra tab labeled "Security".
+ * This contains details about the secure connection used including the protocol,
+ * the cipher suite, and certificate details
+ */
+class SecurityPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { request, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["securityInfo"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["securityInfo"]);
+  }
+
+  renderValue(props, weaknessReasons = []) {
+    const { member, value } = props;
+
+    // Hide object summary
+    if (typeof member.value === "object") {
+      return null;
+    }
+
+    return span(
+      { className: "security-info-value" },
+      member.name === ERROR_LABEL
+        ? // Display multiline text for security error for a label using a rep.
+          value
+        : Rep(
+            Object.assign(props, {
+              // FIXME: A workaround for the issue in StringRep
+              // Force StringRep to crop the text everytime
+              member: Object.assign({}, member, { open: false }),
+              mode: MODE.TINY,
+              cropLimit: 60,
+              noGrip: true,
+            })
+          ),
+      weaknessReasons.includes("cipher") && member.name === CIPHER_SUITE_LABEL
+        ? // Display an extra warning icon after the cipher suite
+          div({
+            id: "security-warning-cipher",
+            className: "security-warning-icon",
+            title: WARNING_CIPHER_LABEL,
+          })
+        : null
+    );
+  }
+
+  render() {
+    const { request } = this.props;
+    const { securityInfo, url } = request;
+
+    if (!securityInfo || !url) {
+      return null;
+    }
+
+    const object = getObject({ securityInfo, url });
+    return div(
+      { className: "panel-container security-panel" },
+      PropertiesView({
+        object,
+        renderValue: props =>
+          this.renderValue(props, securityInfo.weaknessReasons),
+        enableFilter: false,
+        expandedNodes: TreeViewClass.getExpandedNodes(object),
+      })
+    );
+  }
+}
+
+module.exports = SecurityPanel;
diff --git a/devtools/client/netmonitor/src/components/request-details/StackTracePanel.js b/devtools/client/netmonitor/src/components/request-details/StackTracePanel.js
new file mode 100644
index 0000000000..6b01ee27b7
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/StackTracePanel.js
@@ -0,0 +1,81 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { div } = dom;
+
+// Components
+const StackTrace = createFactory(
+  require("resource://devtools/client/shared/components/StackTrace.js")
+);
+
+/**
+ * This component represents a side panel responsible for
+ * rendering stack-trace info for selected request.
+ */
+class StackTracePanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      request: PropTypes.object.isRequired,
+      sourceMapURLService: PropTypes.object,
+      openLink: PropTypes.func,
+    };
+  }
+
+  /**
+   * `componentDidMount` is called when opening the StackTracePanel
+   * for the first time
+   */
+  componentDidMount() {
+    const { request, connector } = this.props;
+    if (!request.stacktrace) {
+      fetchNetworkUpdatePacket(connector.requestData, request, ["stackTrace"]);
+    }
+  }
+
+  /**
+   * `componentWillReceiveProps` is the only method called when
+   * switching between two requests while this panel is displayed.
+   */
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { request, connector } = nextProps;
+    // Only try to fetch the stacktrace if we don't already have the stacktrace yet
+    if (!request.stacktrace) {
+      fetchNetworkUpdatePacket(connector.requestData, request, ["stackTrace"]);
+    }
+  }
+
+  render() {
+    const { connector, openLink, request, sourceMapURLService } = this.props;
+
+    const { stacktrace } = request;
+
+    return div(
+      { className: "panel-container" },
+      StackTrace({
+        stacktrace: stacktrace || [],
+        onViewSourceInDebugger: ({ url, line, column }) => {
+          return connector.viewSourceInDebugger(url, line, column);
+        },
+        sourceMapURLService,
+        openLink,
+      })
+    );
+  }
+}
+
+module.exports = StackTracePanel;
diff --git a/devtools/client/netmonitor/src/components/request-details/TimingsPanel.js b/devtools/client/netmonitor/src/components/request-details/TimingsPanel.js
new file mode 100644
index 0000000000..6cba22fa71
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/TimingsPanel.js
@@ -0,0 +1,272 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getNetMonitorTimingsURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  TIMING_KEYS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Components
+const MDNLink = require("resource://devtools/client/shared/components/MdnLink.js");
+
+const { div, span } = dom;
+
+/**
+ * Timings panel component
+ * Display timeline bars that shows the total wait time for various stages
+ */
+class TimingsPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      request: PropTypes.object.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { connector, request } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["eventTimings"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { connector, request } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, request, ["eventTimings"]);
+  }
+
+  renderServiceWorkerTimings() {
+    const { serviceWorkerTimings } = this.props.request.eventTimings;
+
+    if (!serviceWorkerTimings) {
+      return null;
+    }
+
+    const totalTime = Object.values(serviceWorkerTimings).reduce(
+      (acc, value) => acc + value,
+      0
+    );
+
+    let offset = 0;
+    let preValue = 0;
+
+    return div(
+      {},
+      div(
+        { className: "label-separator" },
+        L10N.getStr("netmonitor.timings.serviceWorkerTiming")
+      ),
+      Object.entries(serviceWorkerTimings).map(([key, value], index) => {
+        if (preValue > 0) {
+          offset += preValue / totalTime;
+        }
+        preValue = value;
+        return div(
+          {
+            key,
+            className:
+              "tabpanel-summary-container timings-container service-worker",
+          },
+          span(
+            { className: "tabpanel-summary-label timings-label" },
+            L10N.getStr(`netmonitor.timings.${key}`)
+          ),
+          div(
+            { className: "requests-list-timings-container" },
+            span({
+              className: `requests-list-timings-box serviceworker-timings-color-${key.replace(
+                "ServiceWorker",
+                ""
+              )}`,
+              style: {
+                "--current-timing-offset": offset > 0 ? offset : 0,
+                "--current-timing-width": value / totalTime,
+              },
+            }),
+            span(
+              { className: "requests-list-timings-total" },
+              getFormattedTime(value)
+            )
+          )
+        );
+      })
+    );
+  }
+
+  renderServerTimings() {
+    const { serverTimings, totalTime } = this.props.request.eventTimings;
+
+    if (!serverTimings?.length) {
+      return null;
+    }
+
+    return div(
+      {},
+      div(
+        { className: "label-separator" },
+        L10N.getStr("netmonitor.timings.serverTiming")
+      ),
+      ...serverTimings.map(({ name, duration, description }, index) => {
+        const color = name === "total" ? "total" : (index % 3) + 1;
+
+        return div(
+          {
+            key: index,
+            className: "tabpanel-summary-container timings-container server",
+          },
+          span(
+            { className: "tabpanel-summary-label timings-label" },
+            description || name
+          ),
+          div(
+            { className: "requests-list-timings-container" },
+            span({
+              className: `requests-list-timings-box server-timings-color-${color}`,
+              style: {
+                "--current-timing-offset": (totalTime - duration) / totalTime,
+                "--current-timing-width": duration / totalTime,
+              },
+            }),
+            span(
+              { className: "requests-list-timings-total" },
+              getFormattedTime(duration)
+            )
+          )
+        );
+      })
+    );
+  }
+
+  render() {
+    const { eventTimings, totalTime, startedMs } = this.props.request;
+    const { firstRequestStartedMs } = this.props;
+
+    if (!eventTimings) {
+      return div(
+        {
+          className:
+            "tabpanel-summary-container timings-container empty-notice",
+        },
+        L10N.getStr("netmonitor.timings.noTimings")
+      );
+    }
+
+    const { timings, offsets } = eventTimings;
+    let queuedAt, startedAt, downloadedAt;
+    const isFirstRequestStartedAvailable = firstRequestStartedMs !== null;
+
+    if (isFirstRequestStartedAvailable) {
+      queuedAt = startedMs - firstRequestStartedMs;
+      startedAt = queuedAt + timings.blocked;
+      downloadedAt = queuedAt + totalTime;
+    }
+
+    const timelines = TIMING_KEYS.map((type, idx) => {
+      // Determine the relative offset for each timings box. For example, the
+      // offset of third timings box will be 0 + blocked offset + dns offset
+      // If offsets sent from the backend aren't available calculate it
+      // from the timing info.
+      const offset = offsets
+        ? offsets[type]
+        : TIMING_KEYS.slice(0, idx).reduce(
+            (acc, cur) => acc + timings[cur] || 0,
+            0
+          );
+
+      const offsetScale = offset / totalTime || 0;
+      const timelineScale = timings[type] / totalTime || 0;
+
+      return div(
+        {
+          key: type,
+          id: `timings-summary-${type}`,
+          className: "tabpanel-summary-container timings-container request",
+        },
+        span(
+          { className: "tabpanel-summary-label timings-label" },
+          L10N.getStr(`netmonitor.timings.${type}`)
+        ),
+        div(
+          { className: "requests-list-timings-container" },
+          span({
+            className: `requests-list-timings-box ${type}`,
+            style: {
+              "--current-timing-offset": offsetScale,
+              "--current-timing-width": timelineScale,
+            },
+          }),
+          span(
+            { className: "requests-list-timings-total" },
+            getFormattedTime(timings[type])
+          )
+        )
+      );
+    });
+
+    return div(
+      { className: "panel-container" },
+      isFirstRequestStartedAvailable &&
+        div(
+          { className: "timings-overview" },
+          span(
+            { className: "timings-overview-item" },
+            L10N.getFormatStr(
+              "netmonitor.timings.queuedAt",
+              getFormattedTime(queuedAt)
+            )
+          ),
+          span(
+            { className: "timings-overview-item" },
+            L10N.getFormatStr(
+              "netmonitor.timings.startedAt",
+              getFormattedTime(startedAt)
+            )
+          ),
+          span(
+            { className: "timings-overview-item" },
+            L10N.getFormatStr(
+              "netmonitor.timings.downloadedAt",
+              getFormattedTime(downloadedAt)
+            )
+          )
+        ),
+      div(
+        { className: "label-separator" },
+        L10N.getStr("netmonitor.timings.requestTiming")
+      ),
+      timelines,
+      this.renderServiceWorkerTimings(),
+      this.renderServerTimings(),
+      MDNLink({
+        url: getNetMonitorTimingsURL(),
+        title: L10N.getStr("netmonitor.timings.learnMore"),
+      })
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  firstRequestStartedMs: state.requests ? state.requests.firstStartedMs : null,
+}))(TimingsPanel);
diff --git a/devtools/client/netmonitor/src/components/request-details/moz.build b/devtools/client/netmonitor/src/components/request-details/moz.build
new file mode 100644
index 0000000000..09896f2de3
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-details/moz.build
@@ -0,0 +1,16 @@
+# 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(
+    "CachePanel.js",
+    "CookiesPanel.js",
+    "HeadersPanel.js",
+    "NetworkDetailsBar.js",
+    "PropertiesView.js",
+    "RequestPanel.js",
+    "ResponsePanel.js",
+    "SecurityPanel.js",
+    "StackTracePanel.js",
+    "TimingsPanel.js",
+)
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestList.js b/devtools/client/netmonitor/src/components/request-list/RequestList.js
new file mode 100644
index 0000000000..63640e389c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestList.js
@@ -0,0 +1,50 @@
+/* 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,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+// Components
+const StatusBar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/StatusBar.js")
+);
+
+loader.lazyGetter(this, "RequestListContent", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListContent.js")
+  );
+});
+loader.lazyGetter(this, "RequestListEmptyNotice", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js")
+  );
+});
+
+/**
+ * Request panel component
+ */
+function RequestList({ connector, isEmpty }) {
+  return div(
+    { className: "request-list-container" },
+    isEmpty
+      ? RequestListEmptyNotice({ connector })
+      : RequestListContent({ connector }),
+    StatusBar({ connector })
+  );
+}
+
+RequestList.displayName = "RequestList";
+
+RequestList.propTypes = {
+  connector: PropTypes.object.isRequired,
+  isEmpty: PropTypes.bool.isRequired,
+};
+
+module.exports = RequestList;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnContentSize.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnContentSize.js
new file mode 100644
index 0000000000..4c20d4aebe
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnContentSize.js
@@ -0,0 +1,38 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedSize,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+class RequestListColumnContentSize extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.contentSize !== nextProps.item.contentSize;
+  }
+
+  render() {
+    const { contentSize } = this.props.item;
+    const size =
+      typeof contentSize === "number" ? getFormattedSize(contentSize) : null;
+    return dom.td(
+      { className: "requests-list-column requests-list-size", title: size },
+      size
+    );
+  }
+}
+
+module.exports = RequestListColumnContentSize;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnCookies.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnCookies.js
new file mode 100644
index 0000000000..0c1431ed60
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnCookies.js
@@ -0,0 +1,61 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+class RequestListColumnCookies extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["requestCookies"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["requestCookies"]);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    let { requestCookies: currRequestCookies = { cookies: [] } } =
+      this.props.item;
+    let { requestCookies: nextRequestCookies = { cookies: [] } } =
+      nextProps.item;
+    currRequestCookies = currRequestCookies.cookies || currRequestCookies;
+    nextRequestCookies = nextRequestCookies.cookies || nextRequestCookies;
+    return currRequestCookies !== nextRequestCookies;
+  }
+
+  render() {
+    let { requestCookies = { cookies: [] } } = this.props.item;
+    requestCookies = requestCookies.cookies || requestCookies;
+    const requestCookiesLength = requestCookies.length
+      ? requestCookies.length
+      : "";
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-cookies",
+        title: requestCookiesLength,
+      },
+      requestCookiesLength
+    );
+  }
+}
+
+module.exports = RequestListColumnCookies;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnDomain.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnDomain.js
new file mode 100644
index 0000000000..3ca6841da6
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnDomain.js
@@ -0,0 +1,66 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  td,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedIPAndPort,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const SecurityState = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/SecurityState.js")
+);
+
+const UPDATED_DOMAIN_PROPS = ["remoteAddress", "securityState", "urlDetails"];
+
+class RequestListColumnDomain extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_DOMAIN_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const { item, onSecurityIconMouseDown } = this.props;
+
+    const {
+      remoteAddress,
+      remotePort,
+      urlDetails: { host, isLocal },
+    } = item;
+
+    const title =
+      host +
+      (remoteAddress
+        ? ` (${getFormattedIPAndPort(remoteAddress, remotePort)})`
+        : "");
+
+    return td(
+      { className: "requests-list-column requests-list-domain", title },
+      SecurityState({ item, onSecurityIconMouseDown, isLocal }),
+      host
+    );
+  }
+}
+
+module.exports = RequestListColumnDomain;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnFile.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnFile.js
new file mode 100644
index 0000000000..f824cdb973
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnFile.js
@@ -0,0 +1,91 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+const UPDATED_FILE_PROPS = ["urlDetails", "waitingTime"];
+
+class RequestListColumnFile extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      slowLimit: PropTypes.number,
+      onWaterfallMouseDown: PropTypes.func,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_FILE_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const {
+      item: { urlDetails, waitingTime },
+      slowLimit,
+      onWaterfallMouseDown,
+    } = this.props;
+
+    const originalFileURL = urlDetails.url;
+    const decodedFileURL = urlDetails.unicodeUrl;
+    const ORIGINAL_FILE_URL = L10N.getFormatStr(
+      "netRequest.originalFileURL.tooltip",
+      originalFileURL
+    );
+    const DECODED_FILE_URL = L10N.getFormatStr(
+      "netRequest.decodedFileURL.tooltip",
+      decodedFileURL
+    );
+    const requestedFile = urlDetails.baseNameWithQuery;
+    const fileToolTip =
+      originalFileURL === decodedFileURL
+        ? originalFileURL
+        : ORIGINAL_FILE_URL + "\n\n" + DECODED_FILE_URL;
+
+    const isSlow = slowLimit > 0 && !!waitingTime && waitingTime > slowLimit;
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-file",
+        title: fileToolTip,
+      },
+      dom.div({}, requestedFile),
+      isSlow &&
+        dom.div({
+          title: L10N.getFormatStr(
+            "netmonitor.audits.slowIconTooltip",
+            getFormattedTime(waitingTime),
+            getFormattedTime(slowLimit)
+          ),
+          onMouseDown: onWaterfallMouseDown,
+          className: "requests-list-slow-button",
+        })
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  slowLimit: state.ui.slowLimit,
+}))(RequestListColumnFile);
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnInitiator.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnInitiator.js
new file mode 100644
index 0000000000..0c08387fa1
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnInitiator.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/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  getUrlBaseName,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class RequestListColumnInitiator extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onInitiatorBadgeMouseDown: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.cause !== nextProps.item.cause;
+  }
+
+  render() {
+    const {
+      item: { cause },
+      onInitiatorBadgeMouseDown,
+    } = this.props;
+
+    let initiator = "";
+    let lineNumber = "";
+
+    const lastFrameExists = cause && cause.lastFrame;
+    if (lastFrameExists) {
+      const { filename, lineNumber: _lineNumber } = cause.lastFrame;
+      initiator = getUrlBaseName(filename);
+      lineNumber = ":" + _lineNumber;
+    }
+
+    // Legacy server might send a numeric value. Display it as "unknown"
+    const causeType = typeof cause.type === "string" ? cause.type : "unknown";
+    const causeStr = lastFrameExists ? " (" + causeType + ")" : causeType;
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-initiator",
+        title: initiator + lineNumber + causeStr,
+      },
+      dom.div(
+        {
+          className: "requests-list-initiator-lastframe",
+          onMouseDown: onInitiatorBadgeMouseDown,
+        },
+        dom.span({ className: "requests-list-initiator-filename" }, initiator),
+        dom.span({ className: "requests-list-initiator-line" }, lineNumber)
+      ),
+      dom.div({ className: "requests-list-initiator-cause" }, causeStr)
+    );
+  }
+}
+
+module.exports = RequestListColumnInitiator;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnMethod.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnMethod.js
new file mode 100644
index 0000000000..08434a76fe
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnMethod.js
@@ -0,0 +1,33 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class RequestListColumnMethod extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.method !== nextProps.item.method;
+  }
+
+  render() {
+    const { method } = this.props.item;
+    return dom.td(
+      { className: "requests-list-column requests-list-method" },
+      method
+    );
+  }
+}
+
+module.exports = RequestListColumnMethod;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnPriority.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnPriority.js
new file mode 100644
index 0000000000..56f33ec3de
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnPriority.js
@@ -0,0 +1,36 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getRequestPriorityAsText,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+class RequestListColumnPriority extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.method !== nextProps.item.method;
+  }
+
+  render() {
+    const { priority } = this.props.item;
+    return dom.td(
+      { className: "requests-list-column" },
+      getRequestPriorityAsText(priority)
+    );
+  }
+}
+
+module.exports = RequestListColumnPriority;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnProtocol.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnProtocol.js
new file mode 100644
index 0000000000..d77ad43406
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnProtocol.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedProtocol,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+class RequestListColumnProtocol extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      getFormattedProtocol(this.props.item) !==
+      getFormattedProtocol(nextProps.item)
+    );
+  }
+
+  render() {
+    const protocol = getFormattedProtocol(this.props.item);
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-protocol",
+        title: protocol,
+      },
+      protocol
+    );
+  }
+}
+
+module.exports = RequestListColumnProtocol;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnRemoteIP.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnRemoteIP.js
new file mode 100644
index 0000000000..4fa22aa2b2
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnRemoteIP.js
@@ -0,0 +1,43 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedIPAndPort,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+class RequestListColumnRemoteIP extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.remoteAddress !== nextProps.item.remoteAddress;
+  }
+
+  render() {
+    const { remoteAddress, remotePort } = this.props.item;
+    const remoteIP = remoteAddress
+      ? getFormattedIPAndPort(remoteAddress, remotePort)
+      : "unknown";
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-remoteip",
+        title: remoteIP,
+      },
+      remoteIP
+    );
+  }
+}
+
+module.exports = RequestListColumnRemoteIP;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnResponseHeader.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnResponseHeader.js
new file mode 100644
index 0000000000..de02da0bc5
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnResponseHeader.js
@@ -0,0 +1,59 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getResponseHeader,
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/**
+ * Renders a response header column in the requests list.  The actual
+ * header to show is passed as a prop.
+ */
+class RequestListColumnResponseHeader extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      item: PropTypes.object.isRequired,
+      header: PropTypes.string.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseHeaders"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseHeaders"]);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const currHeader = getResponseHeader(this.props.item, this.props.header);
+    const nextHeader = getResponseHeader(nextProps.item, nextProps.header);
+    return currHeader !== nextHeader;
+  }
+
+  render() {
+    const header = getResponseHeader(this.props.item, this.props.header);
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-response-header",
+        title: header,
+      },
+      header
+    );
+  }
+}
+
+module.exports = RequestListColumnResponseHeader;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnScheme.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnScheme.js
new file mode 100644
index 0000000000..7309a17d60
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnScheme.js
@@ -0,0 +1,38 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+class RequestListColumnScheme extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      this.props.item.urlDetails.scheme !== nextProps.item.urlDetails.scheme
+    );
+  }
+
+  render() {
+    const { urlDetails } = this.props.item;
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-scheme",
+        title: urlDetails.scheme,
+      },
+      urlDetails.scheme
+    );
+  }
+}
+
+module.exports = RequestListColumnScheme;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnSetCookies.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnSetCookies.js
new file mode 100644
index 0000000000..0ee8164411
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnSetCookies.js
@@ -0,0 +1,61 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  fetchNetworkUpdatePacket,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+class RequestListColumnSetCookies extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseCookies"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["responseCookies"]);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    let { responseCookies: currResponseCookies = { cookies: [] } } =
+      this.props.item;
+    let { responseCookies: nextResponseCookies = { cookies: [] } } =
+      nextProps.item;
+    currResponseCookies = currResponseCookies.cookies || currResponseCookies;
+    nextResponseCookies = nextResponseCookies.cookies || nextResponseCookies;
+    return currResponseCookies !== nextResponseCookies;
+  }
+
+  render() {
+    let { responseCookies = { cookies: [] } } = this.props.item;
+    responseCookies = responseCookies.cookies || responseCookies;
+    const responseCookiesLength = responseCookies.length
+      ? responseCookies.length
+      : "";
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-set-cookies",
+        title: responseCookiesLength,
+      },
+      responseCookiesLength
+    );
+  }
+}
+
+module.exports = RequestListColumnSetCookies;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnStatus.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnStatus.js
new file mode 100644
index 0000000000..180d280b1b
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnStatus.js
@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+// Components
+
+const StatusCode = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/StatusCode.js")
+);
+
+class RequestListColumnStatus extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { item } = this.props;
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-status",
+      },
+      StatusCode({ item })
+    );
+  }
+}
+
+module.exports = RequestListColumnStatus;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnTime.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnTime.js
new file mode 100644
index 0000000000..4ee35d196f
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnTime.js
@@ -0,0 +1,91 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  fetchNetworkUpdatePacket,
+  getResponseTime,
+  getStartTime,
+  getEndTime,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/**
+ * This component represents a column displaying selected
+ * timing value. There are following possible values this
+ * column can render:
+ * - Start Time
+ * - End Time
+ * - Response Time
+ * - Duration Time
+ * - Latency Time
+ */
+class RequestListColumnTime extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+      type: PropTypes.oneOf(["start", "end", "response", "duration", "latency"])
+        .isRequired,
+    };
+  }
+
+  componentDidMount() {
+    const { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.getTime(this.props) !== this.getTime(nextProps);
+  }
+
+  getTime(props) {
+    const { firstRequestStartedMs, item, type } = props;
+
+    switch (type) {
+      case "start":
+        return getStartTime(item, firstRequestStartedMs);
+      case "end":
+        return getEndTime(item, firstRequestStartedMs);
+      case "response":
+        return getResponseTime(item, firstRequestStartedMs);
+      case "duration":
+        return item.totalTime;
+      case "latency":
+        return item.eventTimings ? item.eventTimings.timings.wait : undefined;
+    }
+
+    return 0;
+  }
+
+  render() {
+    const { type } = this.props;
+    const time = getFormattedTime(this.getTime(this.props));
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-" + type + "-time",
+        title: time,
+      },
+      time
+    );
+  }
+}
+
+module.exports = RequestListColumnTime;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnTransferredSize.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnTransferredSize.js
new file mode 100644
index 0000000000..63cc7a7009
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnTransferredSize.js
@@ -0,0 +1,99 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedSize,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  BLOCKED_REASON_MESSAGES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const SIZE_CACHED = L10N.getStr("networkMenu.sizeCached");
+const SIZE_SERVICE_WORKER = L10N.getStr("networkMenu.sizeServiceWorker");
+const SIZE_UNAVAILABLE = L10N.getStr("networkMenu.sizeUnavailable");
+const SIZE_UNAVAILABLE_TITLE = L10N.getStr("networkMenu.sizeUnavailable.title");
+const UPDATED_TRANSFERRED_PROPS = [
+  "transferredSize",
+  "fromCache",
+  "isRacing",
+  "fromServiceWorker",
+];
+
+class RequestListColumnTransferredSize extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_TRANSFERRED_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const {
+      blockedReason,
+      blockingExtension,
+      fromCache,
+      fromServiceWorker,
+      status,
+      transferredSize,
+      isRacing,
+    } = this.props.item;
+    let text;
+
+    if (blockedReason && blockingExtension) {
+      text = L10N.getFormatStr("networkMenu.blockedby", blockingExtension);
+    } else if (blockedReason) {
+      // If we receive a platform error code, print it as-is
+      if (typeof blockedReason == "string" && blockedReason.startsWith("NS_")) {
+        text = blockedReason;
+      } else {
+        text =
+          BLOCKED_REASON_MESSAGES[blockedReason] ||
+          L10N.getStr("networkMenu.blocked2");
+      }
+    } else if (fromCache || status === "304") {
+      text = SIZE_CACHED;
+    } else if (fromServiceWorker) {
+      text = SIZE_SERVICE_WORKER;
+    } else if (typeof transferredSize == "number") {
+      text = getFormattedSize(transferredSize);
+      if (isRacing && typeof isRacing == "boolean") {
+        text = L10N.getFormatStr("networkMenu.raced", text);
+      }
+    } else if (transferredSize === null) {
+      text = SIZE_UNAVAILABLE;
+    }
+
+    const title = text == SIZE_UNAVAILABLE ? SIZE_UNAVAILABLE_TITLE : text;
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-transferred",
+        title,
+      },
+      text
+    );
+  }
+}
+
+module.exports = RequestListColumnTransferredSize;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnType.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnType.js
new file mode 100644
index 0000000000..783245dc19
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnType.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getAbbreviatedMimeType,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+class RequestListColumnType extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.item.mimeType !== nextProps.item.mimeType;
+  }
+
+  render() {
+    const { mimeType } = this.props.item;
+    let abbrevType;
+
+    if (mimeType) {
+      abbrevType = getAbbreviatedMimeType(mimeType);
+    }
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-type",
+        title: mimeType,
+      },
+      abbrevType
+    );
+  }
+}
+
+module.exports = RequestListColumnType;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnUrl.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnUrl.js
new file mode 100644
index 0000000000..9782e9e820
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnUrl.js
@@ -0,0 +1,89 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  td,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  getFormattedIPAndPort,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const SecurityState = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/SecurityState.js")
+);
+const UPDATED_FILE_PROPS = ["remoteAddress", "securityState", "urlDetails"];
+
+class RequestListColumnUrl extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !propertiesEqual(
+      UPDATED_FILE_PROPS,
+      this.props.item,
+      nextProps.item
+    );
+  }
+
+  render() {
+    const {
+      item: { urlDetails },
+    } = this.props;
+
+    const { item, onSecurityIconMouseDown } = this.props;
+
+    const {
+      remoteAddress,
+      remotePort,
+      urlDetails: { isLocal },
+    } = item;
+
+    const title = remoteAddress
+      ? ` (${getFormattedIPAndPort(remoteAddress, remotePort)})`
+      : "";
+
+    // deals with returning whole url
+    const originalURL = urlDetails.url;
+    const decodedFileURL = urlDetails.unicodeUrl;
+    const ORIGINAL_FILE_URL = L10N.getFormatStr(
+      "netRequest.originalFileURL.tooltip",
+      originalURL
+    );
+    const DECODED_FILE_URL = L10N.getFormatStr(
+      "netRequest.decodedFileURL.tooltip",
+      decodedFileURL
+    );
+    const urlToolTip =
+      originalURL === decodedFileURL
+        ? originalURL
+        : ORIGINAL_FILE_URL + "\n\n" + DECODED_FILE_URL;
+
+    return td(
+      {
+        className: "requests-list-column requests-list-url",
+        title: urlToolTip + title,
+      },
+      SecurityState({ item, onSecurityIconMouseDown, isLocal }),
+      originalURL
+    );
+  }
+}
+
+module.exports = RequestListColumnUrl;
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListColumnWaterfall.js b/devtools/client/netmonitor/src/components/request-list/RequestListColumnWaterfall.js
new file mode 100644
index 0000000000..19523399b6
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListColumnWaterfall.js
@@ -0,0 +1,209 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  getWaterfallScale,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  fetchNetworkUpdatePacket,
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+// List of properties of the timing info we want to create boxes for
+const {
+  TIMING_KEYS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const { div } = dom;
+
+const UPDATED_WATERFALL_ITEM_PROPS = ["eventTimings", "totalTime"];
+const UPDATED_WATERFALL_PROPS = [
+  "item",
+  "firstRequestStartedMs",
+  "scale",
+  "isVisible",
+];
+
+class RequestListColumnWaterfall extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+      scale: PropTypes.number,
+      isVisible: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor() {
+    super();
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+  }
+
+  componentDidMount() {
+    const { connector, item } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.isVisible && nextProps.item.totalTime) {
+      const { connector, item } = nextProps;
+      fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.isVisible &&
+      (!propertiesEqual(UPDATED_WATERFALL_PROPS, this.props, nextProps) ||
+        !propertiesEqual(
+          UPDATED_WATERFALL_ITEM_PROPS,
+          this.props.item,
+          nextProps.item
+        ))
+    );
+  }
+
+  handleMouseOver({ target }) {
+    if (!target.title) {
+      target.title = this.timingTooltip();
+    }
+  }
+
+  timingTooltip() {
+    const { eventTimings, totalTime } = this.props.item;
+    const tooltip = [];
+
+    if (eventTimings) {
+      for (const key of TIMING_KEYS) {
+        const width = eventTimings.timings[key];
+
+        if (width > 0) {
+          tooltip.push(
+            L10N.getFormatStr("netmonitor.waterfall.tooltip." + key, width)
+          );
+        }
+      }
+    }
+
+    if (typeof totalTime === "number") {
+      tooltip.push(
+        L10N.getFormatStr("netmonitor.waterfall.tooltip.total", totalTime)
+      );
+    }
+
+    return tooltip.join(L10N.getStr("netmonitor.waterfall.tooltip.separator"));
+  }
+
+  timingBoxes() {
+    const {
+      scale,
+      item: { eventTimings, totalTime },
+    } = this.props;
+    const boxes = [];
+
+    // Physical pixel as minimum size
+    const minPixel = 1 / window.devicePixelRatio;
+
+    if (typeof totalTime === "number") {
+      if (eventTimings) {
+        // Add a set of boxes representing timing information.
+        for (const key of TIMING_KEYS) {
+          if (eventTimings.timings[key] > 0) {
+            boxes.push(
+              div({
+                key,
+                className: `requests-list-timings-box ${key}`,
+                style: {
+                  width: Math.max(eventTimings.timings[key] * scale, minPixel),
+                },
+              })
+            );
+          }
+        }
+      }
+      // Minimal box to at least show start and total time
+      if (!boxes.length) {
+        boxes.push(
+          div({
+            className: "requests-list-timings-box filler",
+            key: "filler",
+            style: { width: Math.max(totalTime * scale, minPixel) },
+          })
+        );
+      }
+
+      const title = L10N.getFormatStr("networkMenu.totalMS2", totalTime);
+      boxes.push(
+        div(
+          {
+            key: "total",
+            className: "requests-list-timings-total",
+            title,
+          },
+          title
+        )
+      );
+    } else {
+      // Pending requests are marked for start time
+      boxes.push(
+        div({
+          className: "requests-list-timings-box filler",
+          key: "pending",
+          style: { width: minPixel },
+        })
+      );
+    }
+
+    return boxes;
+  }
+
+  render() {
+    const {
+      firstRequestStartedMs,
+      item: { startedMs },
+      scale,
+      onWaterfallMouseDown,
+    } = this.props;
+
+    return dom.td(
+      {
+        className: "requests-list-column requests-list-waterfall",
+        onMouseOver: this.handeMouseOver,
+      },
+      div(
+        {
+          className: "requests-list-timings",
+          style: {
+            paddingInlineStart: `${
+              (startedMs - firstRequestStartedMs) * scale
+            }px`,
+          },
+          onMouseDown: onWaterfallMouseDown,
+        },
+        this.timingBoxes()
+      )
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  scale: getWaterfallScale(state),
+}))(RequestListColumnWaterfall);
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListContent.js b/devtools/client/netmonitor/src/components/request-list/RequestListContent.js
new file mode 100644
index 0000000000..0ee91cc48e
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListContent.js
@@ -0,0 +1,524 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  HTMLTooltip,
+} = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");
+
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  formDataURI,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getDisplayedRequests,
+  getColumns,
+  getSelectedRequest,
+  getClickedRequest,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+loader.lazyRequireGetter(
+  this,
+  "openRequestInTab",
+  "resource://devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js",
+  true
+);
+loader.lazyGetter(this, "setImageTooltip", function () {
+  return require("resource://devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js")
+    .setImageTooltip;
+});
+loader.lazyGetter(this, "getImageDimensions", function () {
+  return require("resource://devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js")
+    .getImageDimensions;
+});
+
+// Components
+const RequestListHeader = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js")
+);
+const RequestListItem = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/request-list/RequestListItem.js")
+);
+const RequestListContextMenu = require("resource://devtools/client/netmonitor/src/widgets/RequestListContextMenu.js");
+
+const { div } = dom;
+
+// Tooltip show / hide delay in ms
+const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
+// Tooltip image maximum dimension in px
+const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400;
+
+const LEFT_MOUSE_BUTTON = 0;
+const MIDDLE_MOUSE_BUTTON = 1;
+const RIGHT_MOUSE_BUTTON = 2;
+
+/**
+ * Renders the actual contents of the request list.
+ */
+class RequestListContent extends Component {
+  static get propTypes() {
+    return {
+      blockedUrls: PropTypes.array.isRequired,
+      connector: PropTypes.object.isRequired,
+      columns: PropTypes.object.isRequired,
+      networkActionOpen: PropTypes.bool,
+      networkDetailsOpen: PropTypes.bool.isRequired,
+      networkDetailsWidth: PropTypes.number,
+      networkDetailsHeight: PropTypes.number,
+      cloneRequest: PropTypes.func.isRequired,
+      clickedRequest: PropTypes.object,
+      openDetailsPanelTab: PropTypes.func.isRequired,
+      openHTTPCustomRequestTab: PropTypes.func.isRequired,
+      closeHTTPCustomRequestTab: PropTypes.func.isRequired,
+      sendCustomRequest: PropTypes.func.isRequired,
+      sendHTTPCustomRequest: PropTypes.func.isRequired,
+      displayedRequests: PropTypes.array.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
+      fromCache: PropTypes.bool,
+      onInitiatorBadgeMouseDown: PropTypes.func.isRequired,
+      onItemRightMouseButtonDown: PropTypes.func.isRequired,
+      onItemMouseDown: PropTypes.func.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+      onSelectDelta: PropTypes.func.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+      openStatistics: PropTypes.func.isRequired,
+      openRequestBlockingAndAddUrl: PropTypes.func.isRequired,
+      openRequestBlockingAndDisableUrls: PropTypes.func.isRequired,
+      removeBlockedUrl: PropTypes.func.isRequired,
+      selectedActionBarTabId: PropTypes.string,
+      selectRequest: PropTypes.func.isRequired,
+      selectedRequest: PropTypes.object,
+      requestFilterTypes: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.onHover = this.onHover.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.onResize = this.onResize.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.openRequestInTab = this.openRequestInTab.bind(this);
+    this.onDoubleClick = this.onDoubleClick.bind(this);
+    this.onDragStart = this.onDragStart.bind(this);
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.hasOverflow = false;
+    this.onIntersect = this.onIntersect.bind(this);
+    this.intersectionObserver = null;
+    this.state = {
+      onscreenItems: new Set(),
+    };
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    this.tooltip = new HTMLTooltip(window.parent.document, { type: "arrow" });
+    window.addEventListener("resize", this.onResize);
+  }
+
+  componentDidMount() {
+    // Install event handler for displaying a tooltip
+    this.tooltip.startTogglingOnHover(this.refs.scrollEl, this.onHover, {
+      toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
+      interactive: true,
+    });
+    // Install event handler to hide the tooltip on scroll
+    this.refs.scrollEl.addEventListener("scroll", this.onScroll, true);
+    this.onResize();
+    this.intersectionObserver = new IntersectionObserver(this.onIntersect, {
+      root: this.refs.scrollEl,
+      // Render 10% more columns for a scrolling headstart
+      rootMargin: "10%",
+    });
+    // Prime IntersectionObserver with existing entries
+    for (const item of this.refs.scrollEl.querySelectorAll(
+      ".request-list-item"
+    )) {
+      this.intersectionObserver.observe(item);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const output = this.refs.scrollEl;
+    if (!this.hasOverflow && output.scrollHeight > output.clientHeight) {
+      output.scrollTop = output.scrollHeight;
+      this.hasOverflow = true;
+    }
+    if (
+      prevProps.networkDetailsOpen !== this.props.networkDetailsOpen ||
+      prevProps.networkDetailsWidth !== this.props.networkDetailsWidth ||
+      prevProps.networkDetailsHeight !== this.props.networkDetailsHeight
+    ) {
+      this.onResize();
+    }
+  }
+
+  componentWillUnmount() {
+    this.refs.scrollEl.removeEventListener("scroll", this.onScroll, true);
+
+    // Uninstall the tooltip event handler
+    this.tooltip.stopTogglingOnHover();
+    window.removeEventListener("resize", this.onResize);
+    if (this.intersectionObserver !== null) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+
+  /*
+   * Removing onResize() method causes perf regression - too many repaints of the panel.
+   * So it is needed in ComponentDidMount and ComponentDidUpdate. See Bug 1532914.
+   */
+  onResize() {
+    const parent = this.refs.scrollEl.parentNode;
+    this.refs.scrollEl.style.width = parent.offsetWidth + "px";
+    this.refs.scrollEl.style.height = parent.offsetHeight + "px";
+  }
+
+  onIntersect(entries) {
+    // Track when off screen elements moved on screen to ensure updates
+    let onscreenDidChange = false;
+    const onscreenItems = new Set(this.state.onscreenItems);
+    for (const { target, isIntersecting } of entries) {
+      const { id } = target.dataset;
+      if (isIntersecting) {
+        if (onscreenItems.add(id)) {
+          onscreenDidChange = true;
+        }
+      } else {
+        onscreenItems.delete(id);
+      }
+    }
+    if (onscreenDidChange) {
+      // Remove ids that are no longer displayed
+      const itemIds = new Set(this.props.displayedRequests.map(({ id }) => id));
+      for (const id of onscreenItems) {
+        if (!itemIds.has(id)) {
+          onscreenItems.delete(id);
+        }
+      }
+      this.setState({ onscreenItems });
+    }
+  }
+
+  /**
+   * The predicate used when deciding whether a popup should be shown
+   * over a request item or not.
+   *
+   * @param Node target
+   *        The element node currently being hovered.
+   * @param object tooltip
+   *        The current tooltip instance.
+   * @return {Promise}
+   */
+  async onHover(target, tooltip) {
+    const itemEl = target.closest(".request-list-item");
+    if (!itemEl) {
+      return false;
+    }
+    const itemId = itemEl.dataset.id;
+    if (!itemId) {
+      return false;
+    }
+    const requestItem = this.props.displayedRequests.find(r => r.id == itemId);
+    if (!requestItem) {
+      return false;
+    }
+
+    if (!target.closest(".requests-list-file")) {
+      return false;
+    }
+
+    const { mimeType } = requestItem;
+    if (!mimeType || !mimeType.includes("image/")) {
+      return false;
+    }
+
+    const responseContent = await this.props.connector.requestData(
+      requestItem.id,
+      "responseContent"
+    );
+    const { encoding, text } = responseContent.content;
+    const src = formDataURI(mimeType, encoding, text);
+    const maxDim = REQUESTS_TOOLTIP_IMAGE_MAX_DIM;
+    const { naturalWidth, naturalHeight } = await getImageDimensions(
+      tooltip.doc,
+      src
+    );
+    const options = { maxDim, naturalWidth, naturalHeight };
+    setImageTooltip(tooltip, tooltip.doc, src, options);
+
+    return itemEl.querySelector(".requests-list-file");
+  }
+
+  /**
+   * Scroll listener for the requests menu view.
+   */
+  onScroll() {
+    this.tooltip.hide();
+  }
+
+  onMouseDown(evt, id, request) {
+    if (evt.button === LEFT_MOUSE_BUTTON) {
+      this.props.selectRequest(id, request);
+    } else if (evt.button === RIGHT_MOUSE_BUTTON) {
+      this.props.onItemRightMouseButtonDown(id);
+    } else if (evt.button === MIDDLE_MOUSE_BUTTON) {
+      this.onMiddleMouseButtonDown(request);
+    }
+  }
+
+  /**
+   * Handler for keyboard events. For arrow up/down, page up/down, home/end,
+   * move the selection up or down.
+   */
+  onKeyDown(evt) {
+    let delta;
+
+    switch (evt.key) {
+      case "ArrowUp":
+        delta = -1;
+        break;
+      case "ArrowDown":
+        delta = +1;
+        break;
+      case "PageUp":
+        delta = "PAGE_UP";
+        break;
+      case "PageDown":
+        delta = "PAGE_DOWN";
+        break;
+      case "Home":
+        delta = -Infinity;
+        break;
+      case "End":
+        delta = +Infinity;
+        break;
+    }
+
+    if (delta) {
+      // Prevent scrolling when pressing navigation keys.
+      evt.preventDefault();
+      evt.stopPropagation();
+      this.props.onSelectDelta(delta);
+    }
+  }
+
+  /**
+   * Opens selected item in a new tab.
+   */
+  async openRequestInTab(id, url, requestHeaders, requestPostData) {
+    requestHeaders =
+      requestHeaders ||
+      (await this.props.connector.requestData(id, "requestHeaders"));
+
+    requestPostData =
+      requestPostData ||
+      (await this.props.connector.requestData(id, "requestPostData"));
+
+    openRequestInTab(url, requestHeaders, requestPostData);
+  }
+
+  onDoubleClick({ id, url, requestHeaders, requestPostData }) {
+    this.openRequestInTab(id, url, requestHeaders, requestPostData);
+  }
+
+  onMiddleMouseButtonDown({ id, url, requestHeaders, requestPostData }) {
+    this.openRequestInTab(id, url, requestHeaders, requestPostData);
+  }
+
+  onDragStart(evt, { url }) {
+    evt.dataTransfer.setData("text/plain", url);
+  }
+
+  onContextMenu(evt) {
+    evt.preventDefault();
+    const { clickedRequest, displayedRequests, blockedUrls } = this.props;
+
+    if (!this.contextMenu) {
+      const {
+        connector,
+        cloneRequest,
+        openDetailsPanelTab,
+        openHTTPCustomRequestTab,
+        closeHTTPCustomRequestTab,
+        sendCustomRequest,
+        sendHTTPCustomRequest,
+        openStatistics,
+        openRequestBlockingAndAddUrl,
+        openRequestBlockingAndDisableUrls,
+        removeBlockedUrl,
+      } = this.props;
+      this.contextMenu = new RequestListContextMenu({
+        connector,
+        cloneRequest,
+        openDetailsPanelTab,
+        openHTTPCustomRequestTab,
+        closeHTTPCustomRequestTab,
+        sendCustomRequest,
+        sendHTTPCustomRequest,
+        openStatistics,
+        openRequestBlockingAndAddUrl,
+        openRequestBlockingAndDisableUrls,
+        removeBlockedUrl,
+        openRequestInTab: this.openRequestInTab,
+      });
+    }
+
+    this.contextMenu.open(evt, clickedRequest, displayedRequests, blockedUrls);
+  }
+
+  render() {
+    const {
+      connector,
+      columns,
+      displayedRequests,
+      firstRequestStartedMs,
+      onInitiatorBadgeMouseDown,
+      onSecurityIconMouseDown,
+      onWaterfallMouseDown,
+      requestFilterTypes,
+      selectedRequest,
+      selectedActionBarTabId,
+      openRequestBlockingAndAddUrl,
+      openRequestBlockingAndDisableUrls,
+      networkActionOpen,
+      networkDetailsOpen,
+    } = this.props;
+
+    return div(
+      {
+        ref: "scrollEl",
+        className: "requests-list-scroll",
+      },
+      [
+        dom.table(
+          {
+            className: "requests-list-table",
+            key: "table",
+          },
+          RequestListHeader(),
+          dom.tbody(
+            {
+              ref: "rowGroupEl",
+              className: "requests-list-row-group",
+              tabIndex: 0,
+              onKeyDown: this.onKeyDown,
+            },
+            displayedRequests.map((item, index) => {
+              return RequestListItem({
+                blocked: !!item.blockedReason,
+                firstRequestStartedMs,
+                fromCache: item.status === "304" || item.fromCache,
+                networkDetailsOpen,
+                networkActionOpen,
+                selectedActionBarTabId,
+                connector,
+                columns,
+                item,
+                index,
+                isSelected: item.id === selectedRequest?.id,
+                isVisible: this.state.onscreenItems.has(item.id),
+                key: item.id,
+                intersectionObserver: this.intersectionObserver,
+                onContextMenu: this.onContextMenu,
+                onDoubleClick: () => this.onDoubleClick(item),
+                onDragStart: evt => this.onDragStart(evt, item),
+                onMouseDown: evt => this.onMouseDown(evt, item.id, item),
+                onInitiatorBadgeMouseDown: () =>
+                  onInitiatorBadgeMouseDown(item.cause),
+                onSecurityIconMouseDown: () =>
+                  onSecurityIconMouseDown(item.securityState),
+                onWaterfallMouseDown,
+                requestFilterTypes,
+                openRequestBlockingAndAddUrl,
+                openRequestBlockingAndDisableUrls,
+              });
+            })
+          )
+        ), // end of requests-list-row-group">
+        dom.div({
+          className: "requests-list-anchor",
+          key: "anchor",
+        }),
+      ]
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    blockedUrls: state.requestBlocking.blockedUrls
+      .map(({ enabled, url }) => (enabled ? url : null))
+      .filter(Boolean),
+    columns: getColumns(state),
+    networkActionOpen: state.ui.networkActionOpen,
+    networkDetailsOpen: state.ui.networkDetailsOpen,
+    networkDetailsWidth: state.ui.networkDetailsWidth,
+    networkDetailsHeight: state.ui.networkDetailsHeight,
+    clickedRequest: getClickedRequest(state),
+    displayedRequests: getDisplayedRequests(state),
+    firstRequestStartedMs: state.requests.firstStartedMs,
+    selectedActionBarTabId: state.ui.selectedActionBarTabId,
+    selectedRequest: getSelectedRequest(state),
+    requestFilterTypes: state.filters.requestFilterTypes,
+  }),
+  (dispatch, props) => ({
+    cloneRequest: id => dispatch(Actions.cloneRequest(id)),
+    openDetailsPanelTab: () => dispatch(Actions.openNetworkDetails(true)),
+    openHTTPCustomRequestTab: () =>
+      dispatch(Actions.openHTTPCustomRequest(true)),
+    closeHTTPCustomRequestTab: () =>
+      dispatch(Actions.openHTTPCustomRequest(false)),
+    sendCustomRequest: () => dispatch(Actions.sendCustomRequest()),
+    sendHTTPCustomRequest: request =>
+      dispatch(Actions.sendHTTPCustomRequest(request)),
+    openStatistics: open =>
+      dispatch(Actions.openStatistics(props.connector, open)),
+    openRequestBlockingAndAddUrl: url =>
+      dispatch(Actions.openRequestBlockingAndAddUrl(url)),
+    removeBlockedUrl: url => dispatch(Actions.removeBlockedUrl(url)),
+    openRequestBlockingAndDisableUrls: url =>
+      dispatch(Actions.openRequestBlockingAndDisableUrls(url)),
+    /**
+     * A handler that opens the stack trace tab when a stack trace is available
+     */
+    onInitiatorBadgeMouseDown: cause => {
+      if (cause.lastFrame) {
+        dispatch(Actions.selectDetailsPanelTab("stack-trace"));
+      }
+    },
+    selectRequest: (id, request) =>
+      dispatch(Actions.selectRequest(id, request)),
+    onItemRightMouseButtonDown: id => dispatch(Actions.rightClickRequest(id)),
+    onItemMouseDown: id => dispatch(Actions.selectRequest(id)),
+    /**
+     * A handler that opens the security tab in the details view if secure or
+     * broken security indicator is clicked.
+     */
+    onSecurityIconMouseDown: securityState => {
+      if (securityState && securityState !== "insecure") {
+        dispatch(Actions.selectDetailsPanelTab("security"));
+      }
+    },
+    onSelectDelta: delta => dispatch(Actions.selectDelta(delta)),
+    /**
+     * A handler that opens the timing sidebar panel if the waterfall is clicked.
+     */
+    onWaterfallMouseDown: () => {
+      dispatch(Actions.selectDetailsPanelTab("timings"));
+    },
+  })
+)(RequestListContent);
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js b/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js
new file mode 100644
index 0000000000..318078b782
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.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/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  ACTIVITY_TYPE,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getPerformanceAnalysisURL,
+} = require("resource://devtools/client/netmonitor/src/utils/doc-utils.js");
+
+// Components
+const MDNLink = createFactory(
+  require("resource://devtools/client/shared/components/MdnLink.js")
+);
+
+const { button, div, span } = dom;
+
+const RELOAD_NOTICE_1 = L10N.getStr("netmonitor.reloadNotice1");
+const RELOAD_NOTICE_2 = L10N.getStr("netmonitor.reloadNotice2");
+const RELOAD_NOTICE_3 = L10N.getStr("netmonitor.reloadNotice3");
+const RELOAD_NOTICE_BT = L10N.getStr("netmonitor.emptyBrowserToolbox");
+const PERFORMANCE_NOTICE_1 = L10N.getStr("netmonitor.perfNotice1");
+const PERFORMANCE_NOTICE_2 = L10N.getStr("netmonitor.perfNotice2");
+const PERFORMANCE_NOTICE_3 = L10N.getStr("netmonitor.perfNotice3");
+const PERFORMANCE_LEARN_MORE = L10N.getStr("charts.learnMore");
+
+/**
+ * UI displayed when the request list is empty. Contains instructions on reloading
+ * the page and on triggering performance analysis of the page.
+ */
+class RequestListEmptyNotice extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      onReloadClick: PropTypes.func.isRequired,
+      onPerfClick: PropTypes.func.isRequired,
+    };
+  }
+
+  render() {
+    const { connector } = this.props;
+    const toolbox = connector.getToolbox();
+
+    return div(
+      {
+        className: "request-list-empty-notice",
+      },
+      !toolbox.isBrowserToolbox
+        ? div(
+            { className: "notice-reload-message empty-notice-element" },
+            span(null, RELOAD_NOTICE_1),
+            button(
+              {
+                className: "devtools-button requests-list-reload-notice-button",
+                "data-standalone": true,
+                onClick: this.props.onReloadClick,
+              },
+              RELOAD_NOTICE_2
+            ),
+            span(null, RELOAD_NOTICE_3)
+          )
+        : div(
+            { className: "notice-reload-message empty-notice-element" },
+            span(null, RELOAD_NOTICE_BT)
+          ),
+      !toolbox.isBrowserToolbox
+        ? div(
+            { className: "notice-perf-message empty-notice-element" },
+            span(null, PERFORMANCE_NOTICE_1),
+            button({
+              title: PERFORMANCE_NOTICE_3,
+              className: "devtools-button requests-list-perf-notice-button",
+              "data-standalone": true,
+              onClick: this.props.onPerfClick,
+            }),
+            span(null, PERFORMANCE_NOTICE_2),
+            MDNLink({
+              url: getPerformanceAnalysisURL(),
+              title: PERFORMANCE_LEARN_MORE,
+            })
+          )
+        : null
+    );
+  }
+}
+
+module.exports = connect(undefined, (dispatch, props) => ({
+  onPerfClick: () => dispatch(Actions.openStatistics(props.connector, true)),
+  onReloadClick: () =>
+    props.connector.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT),
+}))(RequestListEmptyNotice);
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListHeader.js b/devtools/client/netmonitor/src/components/request-list/RequestListHeader.js
new file mode 100644
index 0000000000..d02e993b02
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListHeader.js
@@ -0,0 +1,731 @@
+/* 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 {
+  createRef,
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  getTheme,
+  addThemeObserver,
+  removeThemeObserver,
+} = require("resource://devtools/client/shared/theme.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  HEADERS,
+  REQUESTS_WATERFALL,
+  MIN_COLUMN_WIDTH,
+  DEFAULT_COLUMN_WIDTH,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getColumns,
+  getWaterfallScale,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const RequestListHeaderContextMenu = require("resource://devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js");
+const WaterfallBackground = require("resource://devtools/client/netmonitor/src/widgets/WaterfallBackground.js");
+const Draggable = createFactory(
+  require("resource://devtools/client/shared/components/splitter/Draggable.js")
+);
+
+const { div, button } = dom;
+
+/**
+ * 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.
+ */
+class RequestListHeader extends Component {
+  static get propTypes() {
+    return {
+      columns: PropTypes.object.isRequired,
+      resetColumns: PropTypes.func.isRequired,
+      resetSorting: PropTypes.func.isRequired,
+      resizeWaterfall: PropTypes.func.isRequired,
+      scale: PropTypes.number,
+      sort: PropTypes.object,
+      sortBy: PropTypes.func.isRequired,
+      toggleColumn: PropTypes.func.isRequired,
+      waterfallWidth: PropTypes.number,
+      columnsData: PropTypes.object.isRequired,
+      setColumnsWidth: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.requestListHeader = createRef();
+
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.drawBackground = this.drawBackground.bind(this);
+    this.resizeWaterfall = this.resizeWaterfall.bind(this);
+    this.waterfallDivisionLabels = this.waterfallDivisionLabels.bind(this);
+    this.waterfallLabel = this.waterfallLabel.bind(this);
+    this.onHeaderClick = this.onHeaderClick.bind(this);
+    this.resizeColumnToFitContent = this.resizeColumnToFitContent.bind(this);
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    const { resetColumns, resetSorting, toggleColumn } = this.props;
+    this.contextMenu = new RequestListHeaderContextMenu({
+      resetColumns,
+      resetSorting,
+      toggleColumn,
+      resizeColumnToFitContent: this.resizeColumnToFitContent,
+    });
+  }
+
+  componentDidMount() {
+    // Create the object that takes care of drawing the waterfall canvas background
+    this.background = new WaterfallBackground(document);
+    this.drawBackground();
+    // When visible columns add up to less or more than 100% => update widths in prefs.
+    if (this.shouldUpdateWidths()) {
+      this.updateColumnsWidth();
+    }
+    this.resizeWaterfall();
+    window.addEventListener("resize", this.resizeWaterfall);
+    addThemeObserver(this.drawBackground);
+  }
+
+  componentDidUpdate() {
+    this.drawBackground();
+    // check if the widths in prefs need to be updated
+    // e.g. after hide/show column
+    if (this.shouldUpdateWidths()) {
+      this.updateColumnsWidth();
+      this.resizeWaterfall();
+    }
+  }
+
+  componentWillUnmount() {
+    this.background.destroy();
+    this.background = null;
+    window.removeEventListener("resize", this.resizeWaterfall);
+    removeThemeObserver(this.drawBackground);
+  }
+
+  /**
+   * Helper method to get the total width of cell's content.
+   * Used for resizing columns to fit their content.
+   */
+  totalCellWidth(cellEl) {
+    return [...cellEl.childNodes]
+      .map(cNode => {
+        if (cNode.nodeType === 3) {
+          // if it's text node
+          return Math.ceil(
+            cNode.getBoxQuads()[0].p2.x - cNode.getBoxQuads()[0].p1.x
+          );
+        }
+        return cNode.getBoundingClientRect().width;
+      })
+      .reduce((a, b) => a + b, 0);
+  }
+
+  /**
+   * Resize column to fit its content.
+   * Additionally, resize other columns (starting from last) to compensate.
+   */
+  resizeColumnToFitContent(name) {
+    const headerRef = this.refs[`${name}Header`];
+    const parentEl = headerRef.closest(".requests-list-table");
+    const width = headerRef.getBoundingClientRect().width;
+    const parentWidth = parentEl.getBoundingClientRect().width;
+    const items = parentEl.querySelectorAll(".request-list-item");
+    const columnIndex = headerRef.cellIndex;
+    const widths = [...items].map(item =>
+      this.totalCellWidth(item.children[columnIndex])
+    );
+
+    const minW = this.getMinWidth(name);
+
+    // Add 11 to account for cell padding (padding-right + padding-left = 9px), not accurate.
+    let maxWidth = 11 + Math.max.apply(null, widths);
+
+    if (maxWidth < minW) {
+      maxWidth = minW;
+    }
+
+    // Pixel value which, if added to this column's width, will fit its content.
+    let change = maxWidth - width;
+
+    // Max change we can do while taking other columns into account.
+    let maxAllowedChange = 0;
+    const visibleColumns = this.getVisibleColumns();
+    const newWidths = [];
+
+    // Calculate new widths for other columns to compensate.
+    // Start from the 2nd last column if last column is waterfall.
+    // This is done to comply with the existing resizing behavior.
+    const delta =
+      visibleColumns[visibleColumns.length - 1].name === "waterfall" ? 2 : 1;
+
+    for (let i = visibleColumns.length - delta; i > 0; i--) {
+      if (i !== columnIndex) {
+        const columnName = visibleColumns[i].name;
+        const columnHeaderRef = this.refs[`${columnName}Header`];
+        const columnWidth = columnHeaderRef.getBoundingClientRect().width;
+        const minWidth = this.getMinWidth(columnName);
+        const newWidth = columnWidth - change;
+
+        // If this column can compensate for all the remaining change.
+        if (newWidth >= minWidth) {
+          maxAllowedChange += change;
+          change = 0;
+          newWidths.push({
+            name: columnName,
+            width: this.px2percent(newWidth, parentWidth),
+          });
+          break;
+        } else {
+          // Max change we can do in this column.
+          let maxColumnChange = columnWidth - minWidth;
+          maxColumnChange = maxColumnChange > change ? change : maxColumnChange;
+          maxAllowedChange += maxColumnChange;
+          change -= maxColumnChange;
+          newWidths.push({
+            name: columnName,
+            width: this.px2percent(columnWidth - maxColumnChange, parentWidth),
+          });
+        }
+      }
+    }
+    newWidths.push({
+      name,
+      width: this.px2percent(width + maxAllowedChange, parentWidth),
+    });
+    this.props.setColumnsWidth(newWidths);
+  }
+
+  onContextMenu(evt) {
+    evt.preventDefault();
+    this.contextMenu.open(evt, this.props.columns);
+  }
+
+  onHeaderClick(evt, headerName) {
+    const { sortBy, resetSorting } = this.props;
+    if (evt.button == 1) {
+      // reset sort state on middle click
+      resetSorting();
+    } else {
+      sortBy(headerName);
+    }
+  }
+
+  drawBackground() {
+    // The background component is theme dependent, so add the current theme to the props.
+    const props = Object.assign({}, this.props, {
+      theme: getTheme(),
+    });
+    this.background.draw(props);
+  }
+
+  resizeWaterfall() {
+    const { waterfallHeader } = this.refs;
+    if (waterfallHeader) {
+      // Measure its width and update the 'waterfallWidth' property in the store.
+      // The 'waterfallWidth' will be further updated on every window resize.
+      window.cancelIdleCallback(this._resizeTimerId);
+      this._resizeTimerId = window.requestIdleCallback(() =>
+        this.props.resizeWaterfall(
+          waterfallHeader.getBoundingClientRect().width
+        )
+      );
+    }
+  }
+
+  /**
+   * Build the waterfall header - timing tick marks with the right spacing
+   */
+  waterfallDivisionLabels(waterfallWidth, scale) {
+    const labels = [];
+
+    // Build new millisecond tick labels...
+    const 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) {
+      const millisecondTime = x / scale;
+      let divisionScale = "millisecond";
+
+      // If the division is greater than 1 minute.
+      if (millisecondTime > 60000) {
+        divisionScale = "minute";
+      } else if (millisecondTime > 1000) {
+        // If the division is greater than 1 second.
+        divisionScale = "second";
+      }
+
+      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-list-timings-division",
+            "data-division-scale": divisionScale,
+            style: { width },
+          },
+          getFormattedTime(millisecondTime)
+        )
+      );
+    }
+
+    return labels;
+  }
+
+  waterfallLabel(waterfallWidth, scale, label) {
+    let className = "button-text requests-list-waterfall-label-wrapper";
+
+    if (waterfallWidth !== null && scale !== null) {
+      label = this.waterfallDivisionLabels(waterfallWidth, scale);
+      className += " requests-list-waterfall-visible";
+    }
+
+    return div({ className }, label);
+  }
+
+  // Dragging Events
+
+  /**
+   * Set 'resizing' cursor on entire container dragging.
+   * This avoids cursor-flickering when the mouse leaves
+   * the column-resizer area (happens frequently).
+   */
+  onStartMove() {
+    // Set cursor to dragging
+    const container = document.querySelector(".request-list-container");
+    container.style.cursor = "ew-resize";
+    // Class .dragging is used to disable pointer events while dragging - see css.
+    this.requestListHeader.classList.add("dragging");
+  }
+
+  /**
+   * A handler that calculates the new width of the columns
+   * based on mouse position and adjusts the width.
+   */
+  onMove(name, x) {
+    const parentEl = document.querySelector(".requests-list-headers");
+    const parentWidth = parentEl.getBoundingClientRect().width;
+
+    // Get the current column handle and save its old width
+    // before changing so we can compute the adjustment in width
+    const headerRef = this.refs[`${name}Header`];
+    const headerRefRect = headerRef.getBoundingClientRect();
+    const oldWidth = headerRefRect.width;
+
+    // Get the column handle that will compensate the width change.
+    const compensateHeaderName = this.getCompensateHeader();
+
+    if (name === compensateHeaderName) {
+      // this is the case where we are resizing waterfall
+      this.moveWaterfall(x, parentWidth);
+      return;
+    }
+
+    const compensateHeaderRef = this.refs[`${compensateHeaderName}Header`];
+    const compensateHeaderRefRect = compensateHeaderRef.getBoundingClientRect();
+    const oldCompensateWidth = compensateHeaderRefRect.width;
+    const sumOfBothColumns = oldWidth + oldCompensateWidth;
+
+    // Get minimal widths for both changed columns (in px).
+    const minWidth = this.getMinWidth(name);
+    const minCompensateWidth = this.getMinWidth(compensateHeaderName);
+
+    // Calculate new width (according to the mouse x-position) and set to style.
+    // Do not allow to set it below minWidth.
+    let newWidth =
+      document.dir == "ltr" ? x - headerRefRect.left : headerRefRect.right - x;
+    newWidth = Math.max(newWidth, minWidth);
+    headerRef.style.width = `${this.px2percent(newWidth, parentWidth)}%`;
+    const adjustment = oldWidth - newWidth;
+
+    // Calculate new compensate width as the original width + adjustment.
+    // Do not allow to set it below minCompensateWidth.
+    const newCompensateWidth = Math.max(
+      adjustment + oldCompensateWidth,
+      minCompensateWidth
+    );
+    compensateHeaderRef.style.width = `${this.px2percent(
+      newCompensateWidth,
+      parentWidth
+    )}%`;
+
+    // Do not allow to reset size of column when compensate column is at minWidth.
+    if (newCompensateWidth === minCompensateWidth) {
+      headerRef.style.width = `${this.px2percent(
+        sumOfBothColumns - newCompensateWidth,
+        parentWidth
+      )}%`;
+    }
+  }
+
+  /**
+   * After resizing - we get the width for each 'column'
+   * and convert it into % and store it in user prefs.
+   * Also resets the 'resizing' cursor back to initial.
+   */
+  onStopMove() {
+    this.updateColumnsWidth();
+    // If waterfall is visible and width has changed, call resizeWaterfall.
+    const waterfallRef = this.refs.waterfallHeader;
+    if (waterfallRef) {
+      const { waterfallWidth } = this.props;
+      const realWaterfallWidth = waterfallRef.getBoundingClientRect().width;
+      if (Math.round(waterfallWidth) !== Math.round(realWaterfallWidth)) {
+        this.resizeWaterfall();
+      }
+    }
+
+    // Restore cursor back to default.
+    const container = document.querySelector(".request-list-container");
+    container.style.cursor = "initial";
+    this.requestListHeader.classList.remove("dragging");
+  }
+
+  /**
+   * Helper method to get the name of the column that will compensate
+   * the width change. It should be the last column before waterfall,
+   * (if waterfall visible) otherwise it is simply the last visible column.
+   */
+  getCompensateHeader() {
+    const visibleColumns = this.getVisibleColumns();
+    const lastColumn = visibleColumns[visibleColumns.length - 1].name;
+    const delta = lastColumn === "waterfall" ? 2 : 1;
+    return visibleColumns[visibleColumns.length - delta].name;
+  }
+
+  /**
+   * Called from onMove() when resizing waterfall column
+   * because waterfall is a special case, where ALL other
+   * columns are made smaller when waterfall is bigger and vice versa.
+   */
+  moveWaterfall(x, parentWidth) {
+    const visibleColumns = this.getVisibleColumns();
+    const minWaterfall = this.getMinWidth("waterfall");
+    const waterfallRef = this.refs.waterfallHeader;
+
+    // Compute and set style.width for waterfall.
+    const waterfallRefRect = waterfallRef.getBoundingClientRect();
+    const oldWidth = waterfallRefRect.width;
+    const adjustment =
+      document.dir == "ltr"
+        ? waterfallRefRect.left - x
+        : x - waterfallRefRect.right;
+    if (this.allColumnsAtMinWidth() && adjustment > 0) {
+      // When we want to make waterfall wider but all
+      // other columns are already at minWidth => return.
+      return;
+    }
+
+    const newWidth = Math.max(oldWidth + adjustment, minWaterfall);
+
+    // Now distribute evenly the change in width to all other columns except waterfall.
+    const changeInWidth = oldWidth - newWidth;
+    const widths = this.autoSizeWidths(changeInWidth, visibleColumns);
+
+    // Set the new computed width for waterfall into array widths.
+    widths[widths.length - 1] = newWidth;
+
+    // Update style for all columns from array widths.
+    let i = 0;
+    visibleColumns.forEach(col => {
+      const { name } = col;
+      const headerRef = this.refs[`${name}Header`];
+      headerRef.style.width = `${this.px2percent(widths[i], parentWidth)}%`;
+      i++;
+    });
+  }
+
+  /**
+   * Helper method that checks if all columns have reached their minWidth.
+   * This can happen when making waterfall column wider.
+   */
+  allColumnsAtMinWidth() {
+    const visibleColumns = this.getVisibleColumns();
+    // Do not check width for waterfall because
+    // when all are getting smaller, waterfall is getting bigger.
+    for (let i = 0; i < visibleColumns.length - 1; i++) {
+      const { name } = visibleColumns[i];
+      const headerRef = this.refs[`${name}Header`];
+      const minColWidth = this.getMinWidth(name);
+      if (headerRef.getBoundingClientRect().width > minColWidth) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Method takes the total change in width for waterfall column
+   * and distributes it among all other columns. Returns an array
+   * where all visible columns have newly computed width in pixels.
+   */
+  autoSizeWidths(changeInWidth, visibleColumns) {
+    const widths = visibleColumns.map(col => {
+      const headerRef = this.refs[`${col.name}Header`];
+      const colWidth = headerRef.getBoundingClientRect().width;
+      return colWidth;
+    });
+
+    // Divide changeInWidth among all columns but waterfall (that's why -1).
+    const changeInWidthPerColumn = changeInWidth / (widths.length - 1);
+
+    while (changeInWidth) {
+      const lastChangeInWidth = changeInWidth;
+      // In the loop adjust all columns except last one - waterfall
+      for (let i = 0; i < widths.length - 1; i++) {
+        const { name } = visibleColumns[i];
+        const minColWidth = this.getMinWidth(name);
+        const newColWidth = Math.max(
+          widths[i] + changeInWidthPerColumn,
+          minColWidth
+        );
+
+        widths[i] = newColWidth;
+        if (changeInWidth > 0) {
+          changeInWidth -= newColWidth - widths[i];
+        } else {
+          changeInWidth += newColWidth - widths[i];
+        }
+        if (!changeInWidth) {
+          break;
+        }
+      }
+      if (lastChangeInWidth == changeInWidth) {
+        break;
+      }
+    }
+    return widths;
+  }
+
+  /**
+   * Method returns 'true' - if the column widths need to be updated
+   * when the total % is less or more than 100%.
+   * It returns 'false' if they add up to 100% => no need to update.
+   */
+  shouldUpdateWidths() {
+    const visibleColumns = this.getVisibleColumns();
+    let totalPercent = 0;
+
+    visibleColumns.forEach(col => {
+      const { name } = col;
+      const headerRef = this.refs[`${name}Header`];
+      // Get column width from style.
+      let widthFromStyle = 0;
+      // In case the column is in visibleColumns but has display:none
+      // we don't want to count its style.width into totalPercent.
+      if (headerRef.getBoundingClientRect().width > 0) {
+        widthFromStyle = headerRef.style.width.slice(0, -1);
+      }
+      totalPercent += +widthFromStyle; // + converts it to a number
+    });
+
+    // Do not update if total percent is from 99-101% or when it is 0
+    // - it means that no columns are displayed (e.g. other panel is currently selected).
+    return Math.round(totalPercent) !== 100 && totalPercent !== 0;
+  }
+
+  /**
+   * Method reads real width of each column header
+   * and updates the style.width for that header.
+   * It returns updated columnsData.
+   */
+  updateColumnsWidth() {
+    const visibleColumns = this.getVisibleColumns();
+    const parentEl = document.querySelector(".requests-list-headers");
+    const parentElRect = parentEl.getBoundingClientRect();
+    const parentWidth = parentElRect.width;
+    const newWidths = [];
+    visibleColumns.forEach(col => {
+      const { name } = col;
+      const headerRef = this.refs[`${name}Header`];
+      const headerWidth = headerRef.getBoundingClientRect().width;
+
+      // Get actual column width, change into %, update style
+      const width = this.px2percent(headerWidth, parentWidth);
+
+      if (width > 0) {
+        // This prevents saving width 0 for waterfall when it is not showing for
+        // @media (max-width: 700px)
+        newWidths.push({ name, width });
+      }
+    });
+    this.props.setColumnsWidth(newWidths);
+  }
+
+  /**
+   * Helper method to convert pixels into percent based on parent container width
+   */
+  px2percent(pxWidth, parentWidth) {
+    const percent = Math.round(((100 * pxWidth) / parentWidth) * 100) / 100;
+    return percent;
+  }
+
+  /**
+   * Helper method to get visibleColumns;
+   */
+  getVisibleColumns() {
+    const { columns } = this.props;
+    return HEADERS.filter(header => columns[header.name]);
+  }
+
+  /**
+   * Helper method to get minWidth from columnsData;
+   */
+  getMinWidth(colName) {
+    const { columnsData } = this.props;
+    if (columnsData.has(colName)) {
+      return columnsData.get(colName).minWidth;
+    }
+    return MIN_COLUMN_WIDTH;
+  }
+
+  /**
+   * Render one column header from the table headers.
+   */
+  renderColumn(header) {
+    const { columnsData } = this.props;
+    const visibleColumns = this.getVisibleColumns();
+    const lastVisibleColumn = visibleColumns[visibleColumns.length - 1].name;
+    const { name } = header;
+    const boxName = header.boxName || name;
+    const label = header.noLocalization
+      ? name
+      : L10N.getStr(`netmonitor.toolbar.${header.label || name}`);
+
+    const { scale, sort, waterfallWidth } = this.props;
+    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"
+      );
+    }
+
+    // If the pref for this column width exists, set the style
+    // otherwise use default.
+    let colWidth = DEFAULT_COLUMN_WIDTH;
+    if (columnsData.has(name)) {
+      const oneColumnEl = columnsData.get(name);
+      colWidth = oneColumnEl.width;
+    }
+    const columnStyle = {
+      width: colWidth + "%",
+    };
+
+    // Support for columns resizing is currently hidden behind a pref.
+    const draggable = Draggable({
+      className: "column-resizer ",
+      title: L10N.getStr("netmonitor.toolbar.resizeColumnToFitContent.title"),
+      onStart: () => this.onStartMove(),
+      onStop: () => this.onStopMove(),
+      onMove: x => this.onMove(name, x),
+      onDoubleClick: () => this.resizeColumnToFitContent(name),
+    });
+
+    return dom.th(
+      {
+        id: `requests-list-${boxName}-header-box`,
+        className: `requests-list-column requests-list-${boxName}`,
+        scope: "col",
+        style: columnStyle,
+        key: name,
+        ref: `${name}Header`,
+        // Used to style the next column.
+        "data-active": active,
+      },
+      button(
+        {
+          id: `requests-list-${name}-button`,
+          className: `requests-list-header-button`,
+          "data-sorted": sorted,
+          "data-name": name,
+          title: sortedTitle ? `${label} (${sortedTitle})` : label,
+          onClick: evt => this.onHeaderClick(evt, name),
+        },
+        name === "waterfall"
+          ? this.waterfallLabel(waterfallWidth, scale, label)
+          : div({ className: "button-text" }, label),
+        div({ className: "button-icon" })
+      ),
+      name !== lastVisibleColumn && draggable
+    );
+  }
+
+  /**
+   * Render all columns in the table header
+   */
+  renderColumns() {
+    const visibleColumns = this.getVisibleColumns();
+    return visibleColumns.map(header => this.renderColumn(header));
+  }
+
+  render() {
+    return dom.thead(
+      { className: "requests-list-headers-group" },
+      dom.tr(
+        {
+          className: "requests-list-headers",
+          onContextMenu: this.onContextMenu,
+          ref: node => {
+            this.requestListHeader = node;
+          },
+        },
+        this.renderColumns()
+      )
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    columns: getColumns(state),
+    columnsData: state.ui.columnsData,
+    firstRequestStartedMs: state.requests.firstStartedMs,
+    scale: getWaterfallScale(state),
+    sort: state.sort,
+    timingMarkers: state.timingMarkers,
+    waterfallWidth: state.ui.waterfallWidth,
+  }),
+  dispatch => ({
+    resetColumns: () => dispatch(Actions.resetColumns()),
+    resetSorting: () => dispatch(Actions.sortBy(null)),
+    resizeWaterfall: width => dispatch(Actions.resizeWaterfall(width)),
+    sortBy: type => dispatch(Actions.sortBy(type)),
+    toggleColumn: column => dispatch(Actions.toggleColumn(column)),
+    setColumnsWidth: widths => dispatch(Actions.setColumnsWidth(widths)),
+  })
+)(RequestListHeader);
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListItem.js b/devtools/client/netmonitor/src/components/request-list/RequestListItem.js
new file mode 100644
index 0000000000..5c70b44e00
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/RequestListItem.js
@@ -0,0 +1,412 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  fetchNetworkUpdatePacket,
+  propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  PANELS,
+  RESPONSE_HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Components
+/* global
+  RequestListColumnInitiator,
+  RequestListColumnContentSize,
+  RequestListColumnCookies,
+  RequestListColumnDomain,
+  RequestListColumnFile,
+  RequestListColumnMethod,
+  RequestListColumnProtocol,
+  RequestListColumnRemoteIP,
+  RequestListColumnResponseHeader,
+  RequestListColumnScheme,
+  RequestListColumnSetCookies,
+  RequestListColumnStatus,
+  RequestListColumnTime,
+  RequestListColumnTransferredSize,
+  RequestListColumnType,
+  RequestListColumnUrl,
+  RequestListColumnWaterfall,
+  RequestListColumnPriority
+*/
+loader.lazyGetter(this, "RequestListColumnInitiator", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnInitiator.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnContentSize", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnContentSize.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnCookies", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnCookies.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnDomain", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnDomain.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnFile", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnFile.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnUrl", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnUrl.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnMethod", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnMethod.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnProtocol", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnProtocol.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnRemoteIP", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnRemoteIP.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnResponseHeader", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnResponseHeader.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnTime", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnTime.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnScheme", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnScheme.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnSetCookies", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnSetCookies.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnStatus", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnStatus.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnTransferredSize", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnTransferredSize.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnType", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnType.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnWaterfall", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnWaterfall.js")
+  );
+});
+loader.lazyGetter(this, "RequestListColumnPriority", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-list/RequestListColumnPriority.js")
+  );
+});
+
+/**
+ * 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
+ * network details, but not here.
+ */
+const UPDATED_REQ_ITEM_PROPS = [
+  "mimeType",
+  "eventTimings",
+  "securityState",
+  "status",
+  "statusText",
+  "fromCache",
+  "isRacing",
+  "fromServiceWorker",
+  "method",
+  "url",
+  "remoteAddress",
+  "cause",
+  "contentSize",
+  "transferredSize",
+  "startedMs",
+  "totalTime",
+  "requestCookies",
+  "requestHeaders",
+  "responseCookies",
+  "responseHeaders",
+  "waitingTime",
+  "isEventStream",
+  "priority",
+];
+
+const UPDATED_REQ_PROPS = [
+  "firstRequestStartedMs",
+  "index",
+  "networkDetailsOpen",
+  "isSelected",
+  "isVisible",
+  "requestFilterTypes",
+];
+
+/**
+ * Used by render: renders the given ColumnComponent if the flag for this column
+ * is set in the columns prop. The list of props are used to determine which of
+ * RequestListItem's need to be passed to the ColumnComponent. Any objects contained
+ * in that list are passed as props verbatim.
+ */
+const COLUMN_COMPONENTS = [
+  { column: "status", ColumnComponent: RequestListColumnStatus },
+  { column: "method", ColumnComponent: RequestListColumnMethod },
+  {
+    column: "domain",
+    ColumnComponent: RequestListColumnDomain,
+    props: ["onSecurityIconMouseDown"],
+  },
+  {
+    column: "file",
+    ColumnComponent: RequestListColumnFile,
+    props: ["onWaterfallMouseDown"],
+  },
+  {
+    column: "url",
+    ColumnComponent: RequestListColumnUrl,
+    props: ["onSecurityIconMouseDown"],
+  },
+  { column: "protocol", ColumnComponent: RequestListColumnProtocol },
+  { column: "scheme", ColumnComponent: RequestListColumnScheme },
+  { column: "remoteip", ColumnComponent: RequestListColumnRemoteIP },
+  {
+    column: "initiator",
+    ColumnComponent: RequestListColumnInitiator,
+    props: ["onInitiatorBadgeMouseDown"],
+  },
+  { column: "type", ColumnComponent: RequestListColumnType },
+  {
+    column: "cookies",
+    ColumnComponent: RequestListColumnCookies,
+    props: ["connector"],
+  },
+  {
+    column: "setCookies",
+    ColumnComponent: RequestListColumnSetCookies,
+    props: ["connector"],
+  },
+  { column: "transferred", ColumnComponent: RequestListColumnTransferredSize },
+  { column: "contentSize", ColumnComponent: RequestListColumnContentSize },
+  { column: "priority", ColumnComponent: RequestListColumnPriority },
+  {
+    column: "startTime",
+    ColumnComponent: RequestListColumnTime,
+    props: ["connector", "firstRequestStartedMs", { type: "start" }],
+  },
+  {
+    column: "endTime",
+    ColumnComponent: RequestListColumnTime,
+    props: ["connector", "firstRequestStartedMs", { type: "end" }],
+  },
+  {
+    column: "responseTime",
+    ColumnComponent: RequestListColumnTime,
+    props: ["connector", "firstRequestStartedMs", { type: "response" }],
+  },
+  {
+    column: "duration",
+    ColumnComponent: RequestListColumnTime,
+    props: ["connector", "firstRequestStartedMs", { type: "duration" }],
+  },
+  {
+    column: "latency",
+    ColumnComponent: RequestListColumnTime,
+    props: ["connector", "firstRequestStartedMs", { type: "latency" }],
+  },
+];
+
+/**
+ * Render one row in the request list.
+ */
+class RequestListItem extends Component {
+  static get propTypes() {
+    return {
+      blocked: PropTypes.bool,
+      connector: PropTypes.object.isRequired,
+      columns: PropTypes.object.isRequired,
+      item: PropTypes.object.isRequired,
+      index: PropTypes.number.isRequired,
+      isSelected: PropTypes.bool.isRequired,
+      isVisible: PropTypes.bool.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
+      fromCache: PropTypes.bool,
+      networkActionOpen: PropTypes.bool,
+      networkDetailsOpen: PropTypes.bool,
+      onInitiatorBadgeMouseDown: PropTypes.func.isRequired,
+      onDoubleClick: PropTypes.func.isRequired,
+      onDragStart: PropTypes.func.isRequired,
+      onContextMenu: PropTypes.func.isRequired,
+      onFocusedNodeChange: PropTypes.func,
+      onMouseDown: PropTypes.func.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+      requestFilterTypes: PropTypes.object.isRequired,
+      selectedActionBarTabId: PropTypes.string,
+      intersectionObserver: PropTypes.object,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.isSelected) {
+      this.refs.listItem.focus();
+    }
+    if (this.props.intersectionObserver) {
+      this.props.intersectionObserver.observe(this.refs.listItem);
+    }
+
+    const { connector, item, requestFilterTypes } = this.props;
+    // Filtering XHR & WS require to lazily fetch requestHeaders & responseHeaders
+    if (requestFilterTypes.xhr || requestFilterTypes.ws) {
+      fetchNetworkUpdatePacket(connector.requestData, item, [
+        "requestHeaders",
+        "responseHeaders",
+      ]);
+    }
+  }
+
+  // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { connector, item, requestFilterTypes } = nextProps;
+    // Filtering XHR & WS require to lazily fetch requestHeaders & responseHeaders
+    if (requestFilterTypes.xhr || requestFilterTypes.ws) {
+      fetchNetworkUpdatePacket(connector.requestData, item, [
+        "requestHeaders",
+        "responseHeaders",
+      ]);
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      !propertiesEqual(
+        UPDATED_REQ_ITEM_PROPS,
+        this.props.item,
+        nextProps.item
+      ) ||
+      !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps) ||
+      this.props.columns !== nextProps.columns
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isSelected && this.props.isSelected) {
+      this.refs.listItem.focus();
+      if (this.props.onFocusedNodeChange) {
+        this.props.onFocusedNodeChange();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.intersectionObserver) {
+      this.props.intersectionObserver.unobserve(this.refs.listItem);
+    }
+  }
+
+  render() {
+    const {
+      blocked,
+      connector,
+      columns,
+      item,
+      index,
+      isSelected,
+      isVisible,
+      firstRequestStartedMs,
+      fromCache,
+      networkActionOpen,
+      onDoubleClick,
+      onDragStart,
+      onContextMenu,
+      onMouseDown,
+      onWaterfallMouseDown,
+      selectedActionBarTabId,
+    } = this.props;
+
+    const classList = ["request-list-item", index % 2 ? "odd" : "even"];
+    isSelected && classList.push("selected");
+    fromCache && classList.push("fromCache");
+    blocked && classList.push("blocked");
+
+    return dom.tr(
+      {
+        ref: "listItem",
+        className: classList.join(" "),
+        "data-id": item.id,
+        draggable:
+          !blocked &&
+          networkActionOpen &&
+          selectedActionBarTabId === PANELS.BLOCKING,
+        tabIndex: 0,
+        onContextMenu,
+        onMouseDown,
+        onDoubleClick,
+        onDragStart,
+      },
+      ...COLUMN_COMPONENTS.filter(({ column }) => columns[column]).map(
+        ({ column, ColumnComponent, props: columnProps }) => {
+          return ColumnComponent({
+            key: column,
+            item,
+            ...(columnProps || []).reduce((acc, keyOrObject) => {
+              if (typeof keyOrObject == "string") {
+                acc[keyOrObject] = this.props[keyOrObject];
+              } else {
+                Object.assign(acc, keyOrObject);
+              }
+              return acc;
+            }, {}),
+          });
+        }
+      ),
+      ...RESPONSE_HEADERS.filter(header => columns[header]).map(header =>
+        RequestListColumnResponseHeader({
+          connector,
+          item,
+          header,
+        })
+      ),
+      // The last column is Waterfall (aka Timeline)
+      columns.waterfall &&
+        RequestListColumnWaterfall({
+          connector,
+          firstRequestStartedMs,
+          item,
+          onWaterfallMouseDown,
+          isVisible,
+        })
+    );
+  }
+}
+
+module.exports = RequestListItem;
diff --git a/devtools/client/netmonitor/src/components/request-list/moz.build b/devtools/client/netmonitor/src/components/request-list/moz.build
new file mode 100644
index 0000000000..22f0602b00
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/request-list/moz.build
@@ -0,0 +1,29 @@
+# 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(
+    "RequestList.js",
+    "RequestListColumnContentSize.js",
+    "RequestListColumnCookies.js",
+    "RequestListColumnDomain.js",
+    "RequestListColumnFile.js",
+    "RequestListColumnInitiator.js",
+    "RequestListColumnMethod.js",
+    "RequestListColumnPriority.js",
+    "RequestListColumnProtocol.js",
+    "RequestListColumnRemoteIP.js",
+    "RequestListColumnResponseHeader.js",
+    "RequestListColumnScheme.js",
+    "RequestListColumnSetCookies.js",
+    "RequestListColumnStatus.js",
+    "RequestListColumnTime.js",
+    "RequestListColumnTransferredSize.js",
+    "RequestListColumnType.js",
+    "RequestListColumnUrl.js",
+    "RequestListColumnWaterfall.js",
+    "RequestListContent.js",
+    "RequestListEmptyNotice.js",
+    "RequestListHeader.js",
+    "RequestListItem.js",
+)
diff --git a/devtools/client/netmonitor/src/components/search/SearchPanel.js b/devtools/client/netmonitor/src/components/search/SearchPanel.js
new file mode 100644
index 0000000000..11301a7d9c
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/search/SearchPanel.js
@@ -0,0 +1,264 @@
+/* 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 {
+  Component,
+  createRef,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div, span } = dom;
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+  PANELS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const TreeViewClass = require("resource://devtools/client/shared/components/tree/TreeView.js");
+const TreeView = createFactory(TreeViewClass);
+const LabelCell = createFactory(
+  require("resource://devtools/client/shared/components/tree/LabelCell.js")
+);
+const {
+  SearchProvider,
+} = require("resource://devtools/client/netmonitor/src/components/search/search-provider.js");
+const Toolbar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/search/Toolbar.js")
+);
+const StatusBar = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/search/StatusBar.js")
+);
+const {
+  limitTooltipLength,
+} = require("resource://devtools/client/netmonitor/src/utils/tooltips.js");
+// There are two levels in the search panel tree hierarchy:
+// 0: Resource - represents the source request object
+// 1: Search Result - represents a match coming from the parent resource
+const RESOURCE_LEVEL = 0;
+const SEARCH_RESULT_LEVEL = 1;
+
+/**
+ * This component is responsible for rendering all search results
+ * coming from the current search.
+ */
+class SearchPanel extends Component {
+  static get propTypes() {
+    return {
+      clearSearchResults: PropTypes.func.isRequired,
+      openSearch: PropTypes.func.isRequired,
+      closeSearch: PropTypes.func.isRequired,
+      search: PropTypes.func.isRequired,
+      caseSensitive: PropTypes.bool,
+      connector: PropTypes.object.isRequired,
+      addSearchQuery: PropTypes.func.isRequired,
+      query: PropTypes.string.isRequired,
+      results: PropTypes.array,
+      navigate: PropTypes.func.isRequired,
+      isDisplaying: PropTypes.bool.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.searchboxRef = createRef();
+    this.renderValue = this.renderValue.bind(this);
+    this.renderLabel = this.renderLabel.bind(this);
+    this.onClickTreeRow = this.onClickTreeRow.bind(this);
+    this.provider = SearchProvider;
+  }
+
+  componentDidMount() {
+    if (this.searchboxRef) {
+      this.searchboxRef.current.focus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isDisplaying && !prevProps.isDisplaying) {
+      this.searchboxRef.current.focus();
+    }
+  }
+
+  onClickTreeRow(path, event, member) {
+    if (member.object.parentResource) {
+      this.props.navigate(member.object);
+    }
+  }
+
+  /**
+   * Custom TreeView label rendering. The search result
+   * value isn't rendered in separate column, but in the
+   * same column as the label (to save space).
+   */
+  renderLabel(props) {
+    const { member } = props;
+    const level = member.level || 0;
+    const className = level == RESOURCE_LEVEL ? "resourceCell" : "resultCell";
+
+    // Customize label rendering by adding a suffix/value
+    const renderSuffix = () => {
+      return dom.span(
+        {
+          className,
+        },
+        " ",
+        this.renderValue(props)
+      );
+    };
+
+    return LabelCell({
+      ...props,
+      title:
+        member.level == 1
+          ? limitTooltipLength(member.object.value)
+          : this.provider.getResourceTooltipLabel(member.object),
+      renderSuffix,
+    });
+  }
+
+  renderTree() {
+    const { results } = this.props;
+    return TreeView({
+      object: results,
+      provider: this.provider,
+      expandableStrings: false,
+      renderLabelCell: this.renderLabel,
+      columns: [],
+      onClickRow: this.onClickTreeRow,
+    });
+  }
+
+  /**
+   * Custom tree value rendering. This method is responsible for
+   * rendering highlighted query string within the search result
+   * result tree.
+   */
+  renderValue(props) {
+    const { member } = props;
+    const { query, caseSensitive } = this.props;
+
+    // Handle only second level (zero based) that displays
+    // the search result. Find the query string inside the
+    // search result value (`props.object`) and render it
+    // within a span element with proper class name.
+    // level 0 = resource name
+    if (member.level === SEARCH_RESULT_LEVEL) {
+      const { object } = member;
+
+      // Handles multiple matches in a string
+      if (object.startIndex && object.startIndex.length > 1) {
+        let indexStart = 0;
+        const allMatches = object.startIndex.map((match, index) => {
+          if (index === 0) {
+            indexStart = match - 50;
+          }
+
+          const highlightedMatch = [
+            span(
+              { key: "match-" + match },
+              object.value.substring(indexStart, match - query.length)
+            ),
+            span(
+              {
+                className: "query-match",
+                key: "match-" + match + "-highlight",
+              },
+              object.value.substring(match - query.length, match)
+            ),
+          ];
+
+          indexStart = match;
+
+          return highlightedMatch;
+        });
+
+        return span(
+          {
+            title: limitTooltipLength(object.value),
+          },
+          allMatches
+        );
+      }
+
+      const indexStart = caseSensitive
+        ? object.value.indexOf(query)
+        : object.value.toLowerCase().indexOf(query.toLowerCase());
+      const indexEnd = indexStart + query.length;
+
+      // Handles a match in a string
+      if (indexStart >= 0) {
+        return span(
+          { title: limitTooltipLength(object.value) },
+          span({}, object.value.substring(0, indexStart)),
+          span(
+            { className: "query-match" },
+            object.value.substring(indexStart, indexStart + query.length)
+          ),
+          span({}, object.value.substring(indexEnd, object.value.length))
+        );
+      }
+
+      // Default for key:value matches where query might not
+      // be present in the value, but found in the key.
+      return span(
+        { title: limitTooltipLength(object.value) },
+        span({}, object.value)
+      );
+    }
+
+    return this.provider.getValue(member.object);
+  }
+
+  render() {
+    const {
+      openSearch,
+      closeSearch,
+      clearSearchResults,
+      connector,
+      addSearchQuery,
+      search,
+    } = this.props;
+    return div(
+      { className: "search-panel", style: { width: "100%" } },
+      Toolbar({
+        searchboxRef: this.searchboxRef,
+        openSearch,
+        closeSearch,
+        clearSearchResults,
+        addSearchQuery,
+        search,
+        connector,
+      }),
+      div(
+        { className: "search-panel-content", style: { width: "100%" } },
+        this.renderTree()
+      ),
+      StatusBar()
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    query: state.search.query,
+    caseSensitive: state.search.caseSensitive,
+    results: state.search.results,
+    ongoingSearch: state.search.ongoingSearch,
+    isDisplaying: state.ui.selectedActionBarTabId === PANELS.SEARCH,
+    status: state.search.status,
+  }),
+  dispatch => ({
+    closeSearch: () => dispatch(Actions.closeSearch()),
+    openSearch: () => dispatch(Actions.openSearch()),
+    search: () => dispatch(Actions.search()),
+    clearSearchResults: () => dispatch(Actions.clearSearchResults()),
+    addSearchQuery: query => dispatch(Actions.addSearchQuery(query)),
+    navigate: searchResult => dispatch(Actions.navigate(searchResult)),
+  })
+)(SearchPanel);
diff --git a/devtools/client/netmonitor/src/components/search/StatusBar.js b/devtools/client/netmonitor/src/components/search/StatusBar.js
new file mode 100644
index 0000000000..31ecdeffe9
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/search/StatusBar.js
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  getSearchStatus,
+  getSearchResultCount,
+  getSearchResourceCount,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const { div, span } = dom;
+const {
+  SEARCH_STATUS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * Displays the number of lines found for results and resource count (files)
+ */
+class StatusBar extends Component {
+  static get propTypes() {
+    return {
+      status: PropTypes.string,
+      resultsCount: PropTypes.string,
+      resourceCount: PropTypes.string,
+    };
+  }
+
+  getSearchStatusDoneLabel(lines, files) {
+    const matchingLines = PluralForm.get(
+      lines,
+      L10N.getStr("netmonitor.search.status.labels.matchingLines")
+    ).replace("#1", lines);
+    const matchingFiles = PluralForm.get(
+      files,
+      L10N.getStr("netmonitor.search.status.labels.fileCount")
+    ).replace("#1", files);
+
+    return L10N.getFormatStr(
+      "netmonitor.search.status.labels.done",
+      matchingLines,
+      matchingFiles
+    );
+  }
+
+  renderStatus() {
+    const { status, resultsCount, resourceCount } = this.props;
+
+    switch (status) {
+      case SEARCH_STATUS.FETCHING:
+        return L10N.getStr("netmonitor.search.status.labels.fetching");
+      case SEARCH_STATUS.DONE:
+        return this.getSearchStatusDoneLabel(resultsCount, resourceCount);
+      case SEARCH_STATUS.ERROR:
+        return L10N.getStr("netmonitor.search.status.labels.error");
+      case SEARCH_STATUS.CANCELED:
+        return L10N.getStr("netmonitor.search.status.labels.canceled");
+      default:
+        return "";
+    }
+  }
+
+  render() {
+    const { status } = this.props;
+    return div(
+      { className: "devtools-toolbar devtools-toolbar-bottom" },
+      div(
+        {
+          className: "status-bar-label",
+          title: this.renderStatus(),
+        },
+        this.renderStatus(),
+        status === SEARCH_STATUS.FETCHING
+          ? span({ className: "img loader" })
+          : ""
+      )
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  status: getSearchStatus(state),
+  resultsCount: getSearchResultCount(state),
+  resourceCount: getSearchResourceCount(state),
+}))(StatusBar);
diff --git a/devtools/client/netmonitor/src/components/search/Toolbar.js b/devtools/client/netmonitor/src/components/search/Toolbar.js
new file mode 100644
index 0000000000..0f39cfa17a
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/search/Toolbar.js
@@ -0,0 +1,160 @@
+/* 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 {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const {
+  FILTER_SEARCH_DELAY,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const { button, span, div } = dom;
+
+// Components
+const SearchBox = createFactory(
+  require("resource://devtools/client/shared/components/SearchBox.js")
+);
+
+/**
+ * Network Search toolbar component.
+ *
+ * Provides tools for greater control over search.
+ */
+class Toolbar extends Component {
+  static get propTypes() {
+    return {
+      searchboxRef: PropTypes.object.isRequired,
+      clearSearchResults: PropTypes.func.isRequired,
+      search: PropTypes.func.isRequired,
+      closeSearch: PropTypes.func.isRequired,
+      addSearchQuery: PropTypes.func.isRequired,
+      clearSearchResultAndCancel: PropTypes.func.isRequired,
+      caseSensitive: PropTypes.bool.isRequired,
+      toggleCaseSensitiveSearch: PropTypes.func.isRequired,
+      connector: PropTypes.object.isRequired,
+      query: PropTypes.string,
+    };
+  }
+
+  /**
+   * Render a separator.
+   */
+  renderSeparator() {
+    return span({ className: "devtools-separator" });
+  }
+
+  /**
+   * Handles what we do when key is pressed in search input.
+   * @param event
+   * @param conn
+   */
+  onKeyDown(event, connector) {
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        this.props.closeSearch();
+        break;
+      case "Enter":
+        event.preventDefault();
+        this.props.addSearchQuery(event.target.value);
+        this.props.search(connector, event.target.value);
+        break;
+    }
+  }
+
+  renderModifiers() {
+    return div(
+      { className: "search-modifiers" },
+      span({ className: "pipe-divider" }),
+      this.renderCaseSensitiveButton()
+    );
+  }
+
+  /**
+   * Render a clear button to clear search results.
+   */
+  renderClearButton() {
+    return button({
+      className:
+        "devtools-button devtools-clear-icon ws-frames-list-clear-button",
+      title: L10N.getStr("netmonitor.search.toolbar.clear"),
+      onClick: () => {
+        this.props.clearSearchResults();
+      },
+    });
+  }
+
+  /**
+   * Render the case sensitive search modifier button
+   */
+  renderCaseSensitiveButton() {
+    const { caseSensitive, toggleCaseSensitiveSearch } = this.props;
+    const active = caseSensitive ? "checked" : "";
+
+    return button({
+      id: "devtools-network-search-caseSensitive",
+      className: `devtools-button ${active}`,
+      title: L10N.getStr("netmonitor.search.toolbar.caseSensitive"),
+      onClick: toggleCaseSensitiveSearch,
+    });
+  }
+
+  /**
+   * Render Search box.
+   */
+  renderFilterBox() {
+    const { addSearchQuery, clearSearchResultAndCancel, connector, query } =
+      this.props;
+    return SearchBox({
+      keyShortcut: "CmdOrCtrl+Shift+F",
+      placeholder: L10N.getStr("netmonitor.search.toolbar.inputPlaceholder"),
+      type: "search",
+      delay: FILTER_SEARCH_DELAY,
+      ref: this.props.searchboxRef,
+      value: query,
+      onClearButtonClick: () => clearSearchResultAndCancel(),
+      onChange: newQuery => addSearchQuery(newQuery),
+      onKeyDown: event => this.onKeyDown(event, connector),
+    });
+  }
+
+  render() {
+    return div(
+      {
+        id: "netmonitor-toolbar-container",
+        className: "devtools-toolbar devtools-input-toolbar",
+      },
+      this.renderFilterBox(),
+      this.renderModifiers()
+    );
+  }
+}
+
+module.exports = connect(
+  state => ({
+    caseSensitive: state.search.caseSensitive,
+    query: state.search.query,
+  }),
+  dispatch => ({
+    closeSearch: () => dispatch(Actions.closeSearch()),
+    openSearch: () => dispatch(Actions.openSearch()),
+    clearSearchResultAndCancel: () =>
+      dispatch(Actions.clearSearchResultAndCancel()),
+    toggleCaseSensitiveSearch: () =>
+      dispatch(Actions.toggleCaseSensitiveSearch()),
+    search: (connector, query) => dispatch(Actions.search(connector, query)),
+    addSearchQuery: query => dispatch(Actions.addSearchQuery(query)),
+  })
+)(Toolbar);
diff --git a/devtools/client/netmonitor/src/components/search/moz.build b/devtools/client/netmonitor/src/components/search/moz.build
new file mode 100644
index 0000000000..7c48392d10
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/search/moz.build
@@ -0,0 +1,10 @@
+# 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(
+    "search-provider.js",
+    "SearchPanel.js",
+    "StatusBar.js",
+    "Toolbar.js",
+)
diff --git a/devtools/client/netmonitor/src/components/search/search-provider.js b/devtools/client/netmonitor/src/components/search/search-provider.js
new file mode 100644
index 0000000000..d076f35856
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/search/search-provider.js
@@ -0,0 +1,91 @@
+/* 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 {
+  ObjectProvider,
+} = require("resource://devtools/client/shared/components/tree/ObjectProvider.js");
+const {
+  getFileName,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/**
+ * This provider is responsible for providing data from the
+ * search reducer to the SearchPanel.
+ */
+const SearchProvider = {
+  ...ObjectProvider,
+
+  getChildren(object) {
+    if (Array.isArray(object)) {
+      return object;
+    } else if (object.resource) {
+      return object.results;
+    } else if (object.type) {
+      return [];
+    }
+    return ObjectProvider.getLabel(object);
+  },
+
+  hasChildren(object) {
+    return !!this.getChildren(object).length;
+  },
+
+  getLabel(object) {
+    if (object.resource) {
+      return this.getResourceLabel(object);
+    } else if (object.label) {
+      return object.label;
+    }
+    return ObjectProvider.getLabel(object);
+  },
+
+  getValue(object) {
+    if (object.resource) {
+      return "";
+    } else if (object.type) {
+      return object.value;
+    }
+    return ObjectProvider.getValue(object);
+  },
+
+  getKey(object) {
+    if (object.resource) {
+      return object.resource.id;
+    } else if (object.type) {
+      return object.key;
+    }
+    return ObjectProvider.getKey(object);
+  },
+
+  getType(object) {
+    if (object.resource) {
+      return "resource";
+    } else if (object.type) {
+      return "result";
+    }
+    return ObjectProvider.getType(object);
+  },
+
+  getResourceTooltipLabel(object) {
+    const { resource } = object;
+    if (resource.urlDetails?.url) {
+      return resource.urlDetails.url;
+    }
+
+    return this.getResourceLabel(object);
+  },
+
+  getResourceLabel(object) {
+    return (
+      getFileName(object.resource.urlDetails.baseNameWithQuery) ||
+      object.resource.urlDetails.host
+    );
+  },
+};
+
+module.exports = {
+  SearchProvider,
+};
diff --git a/devtools/client/netmonitor/src/connector/firefox-data-provider.js b/devtools/client/netmonitor/src/connector/firefox-data-provider.js
new file mode 100644
index 0000000000..9cdf6fc1d7
--- /dev/null
+++ b/devtools/client/netmonitor/src/connector/firefox-data-provider.js
@@ -0,0 +1,832 @@
+/* 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 block-scoped-var */
+
+"use strict";
+
+const {
+  EVENTS,
+  TEST_EVENTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const { CurlUtils } = require("resource://devtools/client/shared/curl.js");
+const {
+  fetchHeaders,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const {
+  getLongStringFullText,
+} = require("resource://devtools/client/shared/string-utils.js");
+
+/**
+ * This object is responsible for fetching additional HTTP
+ * data from the backend over RDP protocol.
+ *
+ * The object also keeps track of RDP requests in-progress,
+ * so it's possible to determine whether all has been fetched
+ * or not.
+ */
+class FirefoxDataProvider {
+  /**
+   * Constructor for data provider
+   *
+   * @param {Object} commands Object defined from devtools/shared/commands to interact with the devtools backend
+   * @param {Object} actions set of actions fired during data fetching process.
+   * @param {Object} owner all events are fired on this object.
+   */
+  constructor({ commands, actions, owner }) {
+    // Options
+    this.commands = commands;
+    this.actions = actions || {};
+    this.actionsEnabled = true;
+
+    // Allow requesting of on-demand network data, this would be `false` when requests
+    // are cleared (as we clear also on the backend), and will be flipped back
+    // to true on the next `onNetworkResourceAvailable` call.
+    this._requestDataEnabled = true;
+
+    // `_requestDataEnabled` can only be used to prevent new calls to
+    // requestData. For pending/already started calls, we need to check if
+    // clear() was called during the call, which is the purpose of this counter.
+    this._lastRequestDataClearId = 0;
+
+    this.owner = owner;
+
+    // This holds stacktraces infomation temporarily. Stacktrace resources
+    // can come before or after (out of order) their related network events.
+    // This will hold stacktrace related info from the NETWORK_EVENT_STACKTRACE resource
+    // for the NETWORK_EVENT resource and vice versa.
+    this.stackTraces = new Map();
+    // Map of the stacktrace information keyed by the actor id's
+    this.stackTraceRequestInfoByActorID = new Map();
+
+    // For tracking unfinished requests
+    this.pendingRequests = new Set();
+
+    // Map[key string => Promise] used by `requestData` to prevent requesting the same
+    // request data twice.
+    this.lazyRequestData = new Map();
+
+    // Fetching data from the backend
+    this.getLongString = this.getLongString.bind(this);
+
+    // Event handlers
+    this.onNetworkResourceAvailable =
+      this.onNetworkResourceAvailable.bind(this);
+    this.onNetworkResourceUpdated = this.onNetworkResourceUpdated.bind(this);
+
+    this.onWebSocketOpened = this.onWebSocketOpened.bind(this);
+    this.onWebSocketClosed = this.onWebSocketClosed.bind(this);
+    this.onFrameSent = this.onFrameSent.bind(this);
+    this.onFrameReceived = this.onFrameReceived.bind(this);
+
+    this.onEventSourceConnectionClosed =
+      this.onEventSourceConnectionClosed.bind(this);
+    this.onEventReceived = this.onEventReceived.bind(this);
+    this.setEventStreamFlag = this.setEventStreamFlag.bind(this);
+  }
+
+  /*
+   * Cleans up all the internal states, this usually done before navigation
+   * (without the persist flag on).
+   */
+  clear() {
+    this.stackTraces.clear();
+    this.pendingRequests.clear();
+    this.lazyRequestData.clear();
+    this.stackTraceRequestInfoByActorID.clear();
+    this._requestDataEnabled = false;
+    this._lastRequestDataClearId++;
+  }
+
+  destroy() {
+    // TODO: clear() is called in the middle of the lifecycle of the
+    // FirefoxDataProvider, for clarity we are exposing it as a separate method.
+    // `destroy` should be updated to nullify relevant instance properties.
+    this.clear();
+  }
+
+  /**
+   * Enable/disable firing redux actions (enabled by default).
+   *
+   * @param {boolean} enable Set to true to fire actions.
+   */
+  enableActions(enable) {
+    this.actionsEnabled = enable;
+  }
+
+  /**
+   * Add a new network request to application state.
+   *
+   * @param {string} id request id
+   * @param {object} resource resource payload will be added to application state
+   */
+  async addRequest(id, resource) {
+    // Add to the pending requests which helps when deciding if the request is complete.
+    this.pendingRequests.add(id);
+
+    if (this.actionsEnabled && this.actions.addRequest) {
+      await this.actions.addRequest(id, resource, true);
+    }
+
+    this.emit(EVENTS.REQUEST_ADDED, id);
+  }
+
+  /**
+   * Update a network request if it already exists in application state.
+   *
+   * @param {string} id request id
+   * @param {object} data data payload will be updated to application state
+   */
+  async updateRequest(id, data) {
+    const {
+      responseContent,
+      responseCookies,
+      responseHeaders,
+      requestCookies,
+      requestHeaders,
+      requestPostData,
+      responseCache,
+    } = data;
+
+    // fetch request detail contents in parallel
+    const [
+      responseContentObj,
+      requestHeadersObj,
+      responseHeadersObj,
+      postDataObj,
+      requestCookiesObj,
+      responseCookiesObj,
+      responseCacheObj,
+    ] = await Promise.all([
+      this.fetchResponseContent(responseContent),
+      this.fetchRequestHeaders(requestHeaders),
+      this.fetchResponseHeaders(responseHeaders),
+      this.fetchPostData(requestPostData),
+      this.fetchRequestCookies(requestCookies),
+      this.fetchResponseCookies(responseCookies),
+      this.fetchResponseCache(responseCache),
+    ]);
+
+    const payload = Object.assign(
+      {},
+      data,
+      responseContentObj,
+      requestHeadersObj,
+      responseHeadersObj,
+      postDataObj,
+      requestCookiesObj,
+      responseCookiesObj,
+      responseCacheObj
+    );
+
+    if (this.actionsEnabled && this.actions.updateRequest) {
+      await this.actions.updateRequest(id, payload, true);
+    }
+
+    return payload;
+  }
+
+  async fetchResponseContent(responseContent) {
+    const payload = {};
+    if (responseContent?.content) {
+      const { text } = responseContent.content;
+      const response = await this.getLongString(text);
+      responseContent.content.text = response;
+      payload.responseContent = responseContent;
+    }
+    return payload;
+  }
+
+  async fetchRequestHeaders(requestHeaders) {
+    const payload = {};
+    if (requestHeaders?.headers?.length) {
+      const headers = await fetchHeaders(requestHeaders, this.getLongString);
+      if (headers) {
+        payload.requestHeaders = headers;
+      }
+    }
+    return payload;
+  }
+
+  async fetchResponseHeaders(responseHeaders) {
+    const payload = {};
+    if (responseHeaders?.headers?.length) {
+      const headers = await fetchHeaders(responseHeaders, this.getLongString);
+      if (headers) {
+        payload.responseHeaders = headers;
+      }
+    }
+    return payload;
+  }
+
+  async fetchPostData(requestPostData) {
+    const payload = {};
+    if (requestPostData?.postData) {
+      const { text } = requestPostData.postData;
+      const postData = await this.getLongString(text);
+      const headers = CurlUtils.getHeadersFromMultipartText(postData);
+
+      // Calculate total header size and don't forget to include
+      // two new-line characters at the end.
+      const headersSize = headers.reduce((acc, { name, value }) => {
+        return acc + name.length + value.length + 2;
+      }, 0);
+
+      requestPostData.postData.text = postData;
+      payload.requestPostData = {
+        ...requestPostData,
+        uploadHeaders: { headers, headersSize },
+      };
+    }
+    return payload;
+  }
+
+  async fetchRequestCookies(requestCookies) {
+    const payload = {};
+    if (requestCookies) {
+      const reqCookies = [];
+      // request store cookies in requestCookies or requestCookies.cookies
+      const cookies = requestCookies.cookies
+        ? requestCookies.cookies
+        : requestCookies;
+      // make sure cookies is iterable
+      if (typeof cookies[Symbol.iterator] === "function") {
+        for (const cookie of cookies) {
+          reqCookies.push(
+            Object.assign({}, cookie, {
+              value: await this.getLongString(cookie.value),
+            })
+          );
+        }
+        if (reqCookies.length) {
+          payload.requestCookies = reqCookies;
+        }
+      }
+    }
+    return payload;
+  }
+
+  async fetchResponseCookies(responseCookies) {
+    const payload = {};
+    if (responseCookies) {
+      const resCookies = [];
+      // response store cookies in responseCookies or responseCookies.cookies
+      const cookies = responseCookies.cookies
+        ? responseCookies.cookies
+        : responseCookies;
+      // make sure cookies is iterable
+      if (typeof cookies[Symbol.iterator] === "function") {
+        for (const cookie of cookies) {
+          resCookies.push(
+            Object.assign({}, cookie, {
+              value: await this.getLongString(cookie.value),
+            })
+          );
+        }
+        if (resCookies.length) {
+          payload.responseCookies = resCookies;
+        }
+      }
+    }
+    return payload;
+  }
+
+  async fetchResponseCache(responseCache) {
+    const payload = {};
+    if (responseCache) {
+      payload.responseCache = await responseCache;
+      payload.responseCacheAvailable = false;
+    }
+    return payload;
+  }
+
+  /**
+   * Public API used by the Toolbox: Tells if there is still any pending request.
+   *
+   * @return {boolean} returns true if pending requests still exist in the queue.
+   */
+  hasPendingRequests() {
+    return this.pendingRequests.size > 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}
+   *         A promise that is resolved when the full string contents
+   *         are available, or rejected if something goes wrong.
+   */
+  async getLongString(stringGrip) {
+    const payload = await getLongStringFullText(
+      this.commands.client,
+      stringGrip
+    );
+    this.emitForTests(TEST_EVENTS.LONGSTRING_RESOLVED, { payload });
+    return payload;
+  }
+
+  /**
+   * Retrieve the stack-trace information for the given StackTracesActor.
+   *
+   * @param object actor
+   *        - {Object} targetFront: the target front.
+   *
+   *        - {String} resourceId: the resource id for the network request".
+   * @return {object}
+   */
+  async _getStackTraceFromWatcher(actor) {
+    // If we request the stack trace for the navigation request,
+    // t was coming from previous page content process, which may no longer be around.
+    // In any case, the previous target is destroyed and we can't fetch the stack anymore.
+    let stacktrace = [];
+    if (!actor.targetFront.isDestroyed()) {
+      const networkContentFront = await actor.targetFront.getFront(
+        "networkContent"
+      );
+      stacktrace = await networkContentFront.getStackTrace(
+        actor.stacktraceResourceId
+      );
+    }
+    return { stacktrace };
+  }
+
+  /**
+   * The handler for when the network event stacktrace resource is available.
+   * The resource contains basic info, the actual stacktrace is fetched lazily
+   * using requestData.
+   * @param {object} resource The network event stacktrace resource
+   */
+  async onStackTraceAvailable(resource) {
+    if (!this.stackTraces.has(resource.resourceId)) {
+      // If no stacktrace info exists, this means the network event
+      // has not fired yet, lets store useful info for the NETWORK_EVENT
+      // resource.
+      this.stackTraces.set(resource.resourceId, resource);
+    } else {
+      // If stacktrace info exists, this means the network event has already
+      // fired, so lets just update the reducer with the necessary stacktrace info.
+      const request = this.stackTraces.get(resource.resourceId);
+      request.cause.stacktraceAvailable = resource.stacktraceAvailable;
+      request.cause.lastFrame = resource.lastFrame;
+
+      this.stackTraces.delete(resource.resourceId);
+
+      this.stackTraceRequestInfoByActorID.set(request.actor, {
+        targetFront: resource.targetFront,
+        stacktraceResourceId: resource.resourceId,
+      });
+
+      if (this.actionsEnabled && this.actions.updateRequest) {
+        await this.actions.updateRequest(request.actor, request, true);
+      }
+    }
+  }
+
+  /**
+   * The handler for when the network event resource is available.
+   *
+   * @param {object} resource The network event resource
+   */
+  async onNetworkResourceAvailable(resource) {
+    const { actor, stacktraceResourceId, cause } = resource;
+
+    if (!this._requestDataEnabled) {
+      this._requestDataEnabled = true;
+    }
+
+    // Check if a stacktrace resource already exists for this network resource.
+    if (this.stackTraces.has(stacktraceResourceId)) {
+      const { stacktraceAvailable, lastFrame, targetFront } =
+        this.stackTraces.get(stacktraceResourceId);
+
+      resource.cause.stacktraceAvailable = stacktraceAvailable;
+      resource.cause.lastFrame = lastFrame;
+
+      this.stackTraces.delete(stacktraceResourceId);
+      // We retrieve preliminary information about the stacktrace from the
+      // NETWORK_EVENT_STACKTRACE resource via `this.stackTraces` Map,
+      // The actual stacktrace is fetched lazily based on the actor id, using
+      // the targetFront and the stacktrace resource id therefore we
+      // map these for easy access.
+      this.stackTraceRequestInfoByActorID.set(actor, {
+        targetFront,
+        stacktraceResourceId,
+      });
+    } else if (cause) {
+      // If the stacktrace for this request is not available, and we
+      // expect that this request should have a stacktrace, lets store
+      // some useful info for when the NETWORK_EVENT_STACKTRACE resource
+      // finally comes.
+      this.stackTraces.set(stacktraceResourceId, { actor, cause });
+    }
+    await this.addRequest(actor, resource);
+    this.emitForTests(TEST_EVENTS.NETWORK_EVENT, resource);
+  }
+
+  /**
+   * The handler for when the network event resource is updated.
+   *
+   * @param {object} resource The updated network event resource.
+   */
+  async onNetworkResourceUpdated(resource) {
+    // Identify the channel as SSE if mimeType is event-stream.
+    if (resource?.mimeType?.includes("text/event-stream")) {
+      await this.setEventStreamFlag(resource.actor);
+    }
+
+    this.pendingRequests.delete(resource.actor);
+    if (this.actionsEnabled && this.actions.updateRequest) {
+      await this.actions.updateRequest(resource.actor, resource, true);
+    }
+
+    // This event is fired only once per request, once all the properties are fetched
+    // from `onNetworkResourceUpdated`. There should be no more RDP requests after this.
+    // Note that this event might be consumed by extension so, emit it in production
+    // release as well.
+    this.emitForTests(TEST_EVENTS.NETWORK_EVENT_UPDATED, resource.actor);
+    this.emit(EVENTS.PAYLOAD_READY, resource);
+  }
+
+  /**
+   * The "webSocketOpened" message type handler.
+   *
+   * @param {number} httpChannelId the channel ID
+   * @param {string} effectiveURI the effective URI of the page
+   * @param {string} protocols webSocket protocols
+   * @param {string} extensions
+   */
+  async onWebSocketOpened(httpChannelId, effectiveURI, protocols, extensions) {}
+
+  /**
+   * The "webSocketClosed" message type handler.
+   *
+   * @param {number} httpChannelId
+   * @param {boolean} wasClean
+   * @param {number} code
+   * @param {string} reason
+   */
+  async onWebSocketClosed(httpChannelId, wasClean, code, reason) {
+    if (this.actionsEnabled && this.actions.closeConnection) {
+      await this.actions.closeConnection(httpChannelId, wasClean, code, reason);
+    }
+  }
+
+  /**
+   * The "frameSent" message type handler.
+   *
+   * @param {number} httpChannelId the channel ID
+   * @param {object} data websocket frame information
+   */
+  async onFrameSent(httpChannelId, data) {
+    this.addMessage(httpChannelId, data);
+  }
+
+  /**
+   * The "frameReceived" message type handler.
+   *
+   * @param {number} httpChannelId the channel ID
+   * @param {object} data websocket frame information
+   */
+  async onFrameReceived(httpChannelId, data) {
+    this.addMessage(httpChannelId, data);
+  }
+
+  /**
+   * Add a new WebSocket frame to application state.
+   *
+   * @param {number} httpChannelId the channel ID
+   * @param {object} data websocket frame information
+   */
+  async addMessage(httpChannelId, data) {
+    if (this.actionsEnabled && this.actions.addMessage) {
+      await this.actions.addMessage(httpChannelId, data, true);
+    }
+    // TODO: Emit an event for test here
+  }
+
+  /**
+   * Public connector API to lazily request HTTP details from the backend.
+   *
+   * The method focus on:
+   * - calling the right actor method,
+   * - emitting an event to tell we start fetching some request data,
+   * - call data processing method.
+   *
+   * @param {string} actor actor id (used as request id)
+   * @param {string} method identifier of the data we want to fetch
+   *
+   * @return {Promise} return a promise resolved when data is received.
+   */
+  requestData(actor, method) {
+    // if this is `false`, do not try to request data as requests on the backend
+    // might no longer exist (usually `false` after requests are cleared).
+    if (!this._requestDataEnabled) {
+      return Promise.resolve();
+    }
+    // Key string used in `lazyRequestData`. We use this Map to prevent requesting
+    // the same data twice at the same time.
+    const key = `${actor}-${method}`;
+    let promise = this.lazyRequestData.get(key);
+    // If a request is pending, reuse it.
+    if (promise) {
+      return promise;
+    }
+    // Fetch the data
+    promise = this._requestData(actor, method).then(async payload => {
+      // Remove the request from the cache, any new call to requestData will fetch the
+      // data again.
+      this.lazyRequestData.delete(key);
+
+      if (this.actionsEnabled && this.actions.updateRequest) {
+        await this.actions.updateRequest(
+          actor,
+          {
+            ...payload,
+            // Lockdown *Available property once we fetch data from back-end.
+            // Using this as a flag to prevent fetching arrived data again.
+            [`${method}Available`]: false,
+          },
+          true
+        );
+      }
+
+      return payload;
+    });
+
+    this.lazyRequestData.set(key, promise);
+
+    return promise;
+  }
+
+  /**
+   * Internal helper used to request HTTP details from the backend.
+   *
+   * This is internal method that focus on:
+   * - calling the right actor method,
+   * - emitting an event to tell we start fetching some request data,
+   * - call data processing method.
+   *
+   * @param {string} actor actor id (used as request id)
+   * @param {string} method identifier of the data we want to fetch
+   *
+   * @return {Promise} return a promise resolved when data is received.
+   */
+  async _requestData(actor, method) {
+    // Backup the lastRequestDataClearId before doing any async processing.
+    const lastRequestDataClearId = this._lastRequestDataClearId;
+
+    // Calculate real name of the client getter.
+    const clientMethodName = `get${method
+      .charAt(0)
+      .toUpperCase()}${method.slice(1)}`;
+    // The name of the callback that processes request response
+    const callbackMethodName = `on${method
+      .charAt(0)
+      .toUpperCase()}${method.slice(1)}`;
+    // And the event to fire before updating this data
+    const updatingEventName = `UPDATING_${method
+      .replace(/([A-Z])/g, "_$1")
+      .toUpperCase()}`;
+
+    // Emit event that tell we just start fetching some data
+    this.emitForTests(EVENTS[updatingEventName], actor);
+
+    // Make sure we fetch the real actor data instead of cloned actor
+    // e.g. CustomRequestPanel will clone a request with additional '-clone' actor id
+    const actorID = actor.replace("-clone", "");
+
+    // 'getStackTrace' is the only one to be fetched via the NetworkContent actor in content process
+    // while all other attributes are fetched from the NetworkEvent actors, running in the parent process
+    let response;
+    if (
+      clientMethodName == "getStackTrace" &&
+      this.commands.resourceCommand.hasResourceCommandSupport(
+        this.commands.resourceCommand.TYPES.NETWORK_EVENT_STACKTRACE
+      )
+    ) {
+      const requestInfo = this.stackTraceRequestInfoByActorID.get(actorID);
+      const { stacktrace } = await this._getStackTraceFromWatcher(requestInfo);
+      this.stackTraceRequestInfoByActorID.delete(actorID);
+      response = { from: actor, stacktrace };
+    } else {
+      // We don't create fronts for NetworkEvent actors,
+      // so that we have to do the request manually via DevToolsClient.request()
+      try {
+        const packet = {
+          to: actorID,
+          type: clientMethodName,
+        };
+        response = await this.commands.client.request(packet);
+      } catch (e) {
+        if (this._lastRequestDataClearId !== lastRequestDataClearId) {
+          // If lastRequestDataClearId was updated, FirefoxDataProvider:clear()
+          // was called and all network event actors have been destroyed.
+          // Swallow errors to avoid unhandled promise rejections in tests.
+          console.warn(
+            `Firefox Data Provider destroyed while requesting data: ${e.message}`
+          );
+          // Return an empty response packet to avoid too many callback errors.
+          response = { from: actor };
+        } else {
+          throw new Error(
+            `Error while calling method ${clientMethodName}: ${e.message}`
+          );
+        }
+      }
+    }
+
+    // Restore clone actor id
+    if (actor.includes("-clone")) {
+      // Because response's properties are read-only, we create a new response
+      response = { ...response, from: `${response.from}-clone` };
+    }
+
+    // Call data processing method.
+    return this[callbackMethodName](response);
+  }
+
+  /**
+   * Handles additional information received for a "requestHeaders" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onRequestHeaders(response) {
+    const payload = await this.updateRequest(response.from, {
+      requestHeaders: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_REQUEST_HEADERS, response);
+    return payload.requestHeaders;
+  }
+
+  /**
+   * Handles additional information received for a "responseHeaders" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onResponseHeaders(response) {
+    const payload = await this.updateRequest(response.from, {
+      responseHeaders: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_RESPONSE_HEADERS, response);
+    return payload.responseHeaders;
+  }
+
+  /**
+   * Handles additional information received for a "requestCookies" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onRequestCookies(response) {
+    const payload = await this.updateRequest(response.from, {
+      requestCookies: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_REQUEST_COOKIES, response);
+    return payload.requestCookies;
+  }
+
+  /**
+   * Handles additional information received for a "requestPostData" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onRequestPostData(response) {
+    const payload = await this.updateRequest(response.from, {
+      requestPostData: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_REQUEST_POST_DATA, response);
+    return payload.requestPostData;
+  }
+
+  /**
+   * Handles additional information received for a "securityInfo" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onSecurityInfo(response) {
+    const payload = await this.updateRequest(response.from, {
+      securityInfo: response.securityInfo,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_SECURITY_INFO, response);
+    return payload.securityInfo;
+  }
+
+  /**
+   * Handles additional information received for a "responseCookies" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onResponseCookies(response) {
+    const payload = await this.updateRequest(response.from, {
+      responseCookies: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_RESPONSE_COOKIES, response);
+    return payload.responseCookies;
+  }
+
+  /**
+   * Handles additional information received for a "responseCache" packet.
+   * @param {object} response the message received from the server.
+   */
+  async onResponseCache(response) {
+    const payload = await this.updateRequest(response.from, {
+      responseCache: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_RESPONSE_CACHE, response);
+    return payload.responseCache;
+  }
+
+  /**
+   * Handles additional information received via "getResponseContent" request.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onResponseContent(response) {
+    const payload = await this.updateRequest(response.from, {
+      // We have to ensure passing mimeType as fetchResponseContent needs it from
+      // updateRequest. It will convert the LongString in `response.content.text` to a
+      // string.
+      mimeType: response.content.mimeType,
+      responseContent: response,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_RESPONSE_CONTENT, response);
+    return payload.responseContent;
+  }
+
+  /**
+   * Handles additional information received for a "eventTimings" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onEventTimings(response) {
+    const payload = await this.updateRequest(response.from, {
+      eventTimings: response,
+    });
+
+    // This event is utilized only in tests but, DAMP is using it too
+    // and running DAMP test doesn't set the `devtools.testing` flag.
+    // So, emit this event even in the production mode.
+    // See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1578215
+    this.emit(EVENTS.RECEIVED_EVENT_TIMINGS, response);
+    return payload.eventTimings;
+  }
+
+  /**
+   * Handles information received for a "stackTrace" packet.
+   *
+   * @param {object} response the message received from the server.
+   */
+  async onStackTrace(response) {
+    const payload = await this.updateRequest(response.from, {
+      stacktrace: response.stacktrace,
+    });
+    this.emitForTests(TEST_EVENTS.RECEIVED_EVENT_STACKTRACE, response);
+    return payload.stacktrace;
+  }
+
+  /**
+   * Handle EventSource events.
+   */
+
+  async onEventSourceConnectionClosed(httpChannelId) {
+    if (this.actionsEnabled && this.actions.closeConnection) {
+      await this.actions.closeConnection(httpChannelId);
+    }
+  }
+
+  async onEventReceived(httpChannelId, data) {
+    // Dispatch the same action used by websocket inspector.
+    this.addMessage(httpChannelId, data);
+  }
+
+  async setEventStreamFlag(actorId) {
+    if (this.actionsEnabled && this.actions.setEventStreamFlag) {
+      await this.actions.setEventStreamFlag(actorId, true);
+    }
+  }
+
+  /**
+   * Fire events for the owner object.
+   */
+  emit(type, data) {
+    if (this.owner) {
+      this.owner.emit(type, data);
+    }
+  }
+
+  /**
+   * Fire test events for the owner object. These events are
+   * emitted only when tests are running.
+   */
+  emitForTests(type, data) {
+    if (this.owner) {
+      this.owner.emitForTests(type, data);
+    }
+  }
+}
+
+module.exports = FirefoxDataProvider;
diff --git a/devtools/client/netmonitor/src/connector/har-metadata-collector.js b/devtools/client/netmonitor/src/connector/har-metadata-collector.js
new file mode 100644
index 0000000000..bf9313a36c
--- /dev/null
+++ b/devtools/client/netmonitor/src/connector/har-metadata-collector.js
@@ -0,0 +1,81 @@
+/* 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 {
+  TYPES,
+} = require("resource://devtools/shared/commands/resource/resource-command.js");
+
+/**
+ * This collector class is dedicated to recording additional metadata necessary
+ * to build HAR files. The actual request data will be provided by the
+ * netmonitor which is already monitoring for requests.
+ *
+ * The only purpose of this class is to record additional document and network
+ * events, which will help to assign requests to individual pages.
+ *
+ * It should be created and destroyed by the main netmonitor data collector.
+ */
+class HarMetadataCollector {
+  #commands;
+  #initialURL;
+  #navigationRequests;
+
+  constructor(commands) {
+    this.#commands = commands;
+  }
+
+  /**
+   * Stop recording and clear the state.
+   */
+  destroy() {
+    this.clear();
+
+    this.#commands.resourceCommand.unwatchResources([TYPES.NETWORK_EVENT], {
+      onAvailable: this.#onResourceAvailable,
+    });
+  }
+
+  /**
+   * Reset the current state.
+   */
+  clear() {
+    // Keep the initial URL for requests captured before the first recorded
+    // navigation.
+    this.#initialURL = this.#commands.targetCommand.targetFront.url;
+    this.#navigationRequests = [];
+  }
+
+  /**
+   * Start recording additional events for HAR files building.
+   */
+  async connect() {
+    this.clear();
+
+    await this.#commands.resourceCommand.watchResources([TYPES.NETWORK_EVENT], {
+      onAvailable: this.#onResourceAvailable,
+    });
+  }
+
+  getHarData() {
+    return {
+      initialURL: this.#initialURL,
+      navigationRequests: this.#navigationRequests,
+    };
+  }
+
+  #onResourceAvailable = resources => {
+    for (const resource of resources) {
+      if (
+        resource.resourceType === TYPES.NETWORK_EVENT &&
+        resource.isNavigationRequest
+      ) {
+        this.#navigationRequests.push(resource);
+      }
+    }
+  };
+}
+
+exports.HarMetadataCollector = HarMetadataCollector;
diff --git a/devtools/client/netmonitor/src/connector/index.js b/devtools/client/netmonitor/src/connector/index.js
new file mode 100644
index 0000000000..1871f7aab1
--- /dev/null
+++ b/devtools/client/netmonitor/src/connector/index.js
@@ -0,0 +1,552 @@
+/* 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 {
+  ACTIVITY_TYPE,
+  EVENTS,
+  TEST_EVENTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const FirefoxDataProvider = require("resource://devtools/client/netmonitor/src/connector/firefox-data-provider.js");
+const {
+  getDisplayedTimingMarker,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const {
+  TYPES,
+} = require("resource://devtools/shared/commands/resource/resource-command.js");
+
+// Network throttling
+loader.lazyRequireGetter(
+  this,
+  "throttlingProfiles",
+  "resource://devtools/client/shared/components/throttling/profiles.js"
+);
+
+loader.lazyRequireGetter(
+  this,
+  "HarMetadataCollector",
+  "resource://devtools/client/netmonitor/src/connector/har-metadata-collector.js",
+  true
+);
+
+const DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF = "devtools.netmonitor.persistlog";
+
+/**
+ * Connector to Firefox backend.
+ */
+class Connector {
+  constructor() {
+    // Public methods
+    this.connect = this.connect.bind(this);
+    this.disconnect = this.disconnect.bind(this);
+    this.willNavigate = this.willNavigate.bind(this);
+    this.navigate = this.navigate.bind(this);
+    this.triggerActivity = this.triggerActivity.bind(this);
+    this.viewSourceInDebugger = this.viewSourceInDebugger.bind(this);
+    this.requestData = this.requestData.bind(this);
+    this.getTimingMarker = this.getTimingMarker.bind(this);
+    this.updateNetworkThrottling = this.updateNetworkThrottling.bind(this);
+
+    // Internals
+    this.getLongString = this.getLongString.bind(this);
+    this.onResourceAvailable = this.onResourceAvailable.bind(this);
+    this.onResourceUpdated = this.onResourceUpdated.bind(this);
+    this.updatePersist = this.updatePersist.bind(this);
+
+    this.networkFront = null;
+  }
+
+  static NETWORK_RESOURCES = [
+    TYPES.NETWORK_EVENT,
+    TYPES.NETWORK_EVENT_STACKTRACE,
+    TYPES.WEBSOCKET,
+    TYPES.SERVER_SENT_EVENT,
+  ];
+
+  get currentTarget() {
+    return this.commands.targetCommand.targetFront;
+  }
+
+  /**
+   * Connect to the backend.
+   *
+   * @param {Object} connection object with e.g. reference to the Toolbox.
+   * @param {Object} actions (optional) is used to fire Redux actions to update store.
+   * @param {Object} getState (optional) is used to get access to the state.
+   */
+  async connect(connection, actions, getState) {
+    this.actions = actions;
+    this.getState = getState;
+    this.toolbox = connection.toolbox;
+    this.commands = this.toolbox.commands;
+    this.networkCommand = this.commands.networkCommand;
+
+    // The owner object (NetMonitorAPI) received all events.
+    this.owner = connection.owner;
+
+    this.networkFront =
+      await this.commands.watcherFront.getNetworkParentActor();
+
+    this.dataProvider = new FirefoxDataProvider({
+      commands: this.commands,
+      actions: this.actions,
+      owner: this.owner,
+    });
+
+    this._harMetadataCollector = new HarMetadataCollector(this.commands);
+    await this._harMetadataCollector.connect();
+
+    await this.commands.resourceCommand.watchResources([TYPES.DOCUMENT_EVENT], {
+      onAvailable: this.onResourceAvailable,
+    });
+
+    await this.resume(false);
+
+    // Server side persistance of the data across reload is disabled by default.
+    // Ensure enabling it, if the related frontend pref is true.
+    if (Services.prefs.getBoolPref(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF)) {
+      await this.updatePersist();
+    }
+    Services.prefs.addObserver(
+      DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+      this.updatePersist
+    );
+  }
+
+  disconnect() {
+    // As this function might be called twice, we need to guard if already called.
+    if (this._destroyed) {
+      return;
+    }
+
+    this._destroyed = true;
+
+    this.commands.resourceCommand.unwatchResources([TYPES.DOCUMENT_EVENT], {
+      onAvailable: this.onResourceAvailable,
+    });
+
+    this.pause();
+
+    Services.prefs.removeObserver(
+      DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
+      this.updatePersist
+    );
+
+    if (this.actions) {
+      this.actions.batchReset();
+    }
+
+    this.dataProvider.destroy();
+    this.dataProvider = null;
+    this._harMetadataCollector.destroy();
+  }
+
+  clear() {
+    // Clear all the caches in the data provider
+    this.dataProvider.clear();
+
+    this._harMetadataCollector.clear();
+
+    this.commands.resourceCommand.clearResources(Connector.NETWORK_RESOURCES);
+    this.emitForTests("clear-network-resources");
+
+    // Disable the realted network logs in the webconsole
+    this.toolbox.disableAllConsoleNetworkLogs();
+  }
+
+  pause() {
+    return this.commands.resourceCommand.unwatchResources(
+      Connector.NETWORK_RESOURCES,
+      {
+        onAvailable: this.onResourceAvailable,
+        onUpdated: this.onResourceUpdated,
+      }
+    );
+  }
+
+  resume(ignoreExistingResources = true) {
+    return this.commands.resourceCommand.watchResources(
+      Connector.NETWORK_RESOURCES,
+      {
+        onAvailable: this.onResourceAvailable,
+        onUpdated: this.onResourceUpdated,
+        ignoreExistingResources,
+      }
+    );
+  }
+
+  async onResourceAvailable(resources, { areExistingResources }) {
+    for (const resource of resources) {
+      if (resource.resourceType === TYPES.DOCUMENT_EVENT) {
+        this.onDocEvent(resource, { areExistingResources });
+        continue;
+      }
+
+      if (resource.resourceType === TYPES.NETWORK_EVENT) {
+        this.dataProvider.onNetworkResourceAvailable(resource);
+        continue;
+      }
+
+      if (resource.resourceType === TYPES.NETWORK_EVENT_STACKTRACE) {
+        this.dataProvider.onStackTraceAvailable(resource);
+        continue;
+      }
+
+      if (resource.resourceType === TYPES.WEBSOCKET) {
+        const { wsMessageType } = resource;
+
+        switch (wsMessageType) {
+          case "webSocketOpened": {
+            this.dataProvider.onWebSocketOpened(
+              resource.httpChannelId,
+              resource.effectiveURI,
+              resource.protocols,
+              resource.extensions
+            );
+            break;
+          }
+          case "webSocketClosed": {
+            this.dataProvider.onWebSocketClosed(
+              resource.httpChannelId,
+              resource.wasClean,
+              resource.code,
+              resource.reason
+            );
+            break;
+          }
+          case "frameReceived": {
+            this.dataProvider.onFrameReceived(
+              resource.httpChannelId,
+              resource.data
+            );
+            break;
+          }
+          case "frameSent": {
+            this.dataProvider.onFrameSent(
+              resource.httpChannelId,
+              resource.data
+            );
+            break;
+          }
+        }
+        continue;
+      }
+
+      if (resource.resourceType === TYPES.SERVER_SENT_EVENT) {
+        const { messageType, httpChannelId, data } = resource;
+        switch (messageType) {
+          case "eventSourceConnectionClosed": {
+            this.dataProvider.onEventSourceConnectionClosed(httpChannelId);
+            break;
+          }
+          case "eventReceived": {
+            this.dataProvider.onEventReceived(httpChannelId, data);
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  async onResourceUpdated(updates) {
+    for (const { resource, update } of updates) {
+      this.dataProvider.onNetworkResourceUpdated(resource, update);
+    }
+  }
+
+  enableActions(enable) {
+    this.dataProvider.enableActions(enable);
+  }
+
+  willNavigate() {
+    if (this.actions) {
+      if (!Services.prefs.getBoolPref(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF)) {
+        this.actions.batchReset();
+        this.actions.clearRequests();
+      } else {
+        // If the log is persistent, just clear all accumulated timing markers.
+        this.actions.clearTimingMarkers();
+      }
+    }
+
+    if (this.actions && this.getState) {
+      const state = this.getState();
+      // Resume is done automatically on page reload/navigation.
+      if (!state.requests.recording) {
+        this.actions.toggleRecording();
+      }
+
+      // Stop any ongoing search.
+      if (state.search.ongoingSearch) {
+        this.actions.stopOngoingSearch();
+      }
+    }
+  }
+
+  navigate() {
+    if (!this.dataProvider.hasPendingRequests()) {
+      this.onReloaded();
+      return;
+    }
+    const listener = () => {
+      if (this.dataProvider && this.dataProvider.hasPendingRequests()) {
+        return;
+      }
+      if (this.owner) {
+        this.owner.off(EVENTS.PAYLOAD_READY, listener);
+      }
+      // Netmonitor may already be destroyed,
+      // so do not try to notify the listeners
+      if (this.dataProvider) {
+        this.onReloaded();
+      }
+    };
+    if (this.owner) {
+      this.owner.on(EVENTS.PAYLOAD_READY, listener);
+    }
+  }
+
+  onReloaded() {
+    const panel = this.toolbox.getPanel("netmonitor");
+    if (panel) {
+      panel.emit("reloaded");
+    }
+  }
+
+  /**
+   * The "DOMContentLoaded" and "Load" events sent by the console actor.
+   *
+   * @param {object} resource The DOCUMENT_EVENT resource
+   */
+  onDocEvent(resource, { areExistingResources }) {
+    if (!resource.targetFront.isTopLevel) {
+      // Only consider top level document, and ignore remote iframes top document
+      return;
+    }
+
+    // Netmonitor does not support dom-loading
+    if (
+      resource.name != "dom-interactive" &&
+      resource.name != "dom-complete" &&
+      resource.name != "will-navigate"
+    ) {
+      return;
+    }
+
+    if (resource.name == "will-navigate") {
+      // When we open the netmonitor while the page already started loading,
+      // we don't want to clear it. So here, we ignore will-navigate events
+      // which were stored in the ResourceCommand cache and only consider
+      // the live one coming straight from the server.
+      if (!areExistingResources) {
+        this.willNavigate();
+      }
+      return;
+    }
+
+    if (this.actions) {
+      this.actions.addTimingMarker(resource);
+    }
+
+    if (resource.name === "dom-complete") {
+      this.navigate();
+    }
+
+    this.emitForTests(TEST_EVENTS.TIMELINE_EVENT, resource);
+  }
+
+  async updatePersist() {
+    const enabled = Services.prefs.getBoolPref(
+      DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF
+    );
+
+    await this.networkFront.setPersist(enabled);
+
+    this.emitForTests(TEST_EVENTS.PERSIST_CHANGED, enabled);
+  }
+
+  /**
+   * Triggers a specific "activity" to be performed by the frontend.
+   * This can be, for example, triggering reloads or enabling/disabling cache.
+   *
+   * @param {number} type The activity type. See the ACTIVITY_TYPE const.
+   * @return {object} A promise resolved once the activity finishes and the frontend
+   *                  is back into "standby" mode.
+   */
+  triggerActivity(type) {
+    // Puts the frontend into "standby" (when there's no particular activity).
+    const standBy = () => {
+      this.currentActivity = ACTIVITY_TYPE.NONE;
+    };
+
+    // Reconfigures the tab, optionally triggering a reload.
+    const reconfigureTab = async options => {
+      await this.commands.targetConfigurationCommand.updateConfiguration(
+        options
+      );
+    };
+
+    // Reconfigures the tab and waits for the target to finish navigating.
+    const reconfigureTabAndReload = async options => {
+      await reconfigureTab(options);
+      await this.commands.targetCommand.reloadTopLevelTarget();
+    };
+
+    switch (type) {
+      case ACTIVITY_TYPE.RELOAD.WITH_CACHE_DEFAULT:
+        return reconfigureTabAndReload({}).then(standBy);
+      case ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED:
+        this.currentActivity = ACTIVITY_TYPE.ENABLE_CACHE;
+        this.commands.resourceCommand
+          .waitForNextResource(
+            this.commands.resourceCommand.TYPES.DOCUMENT_EVENT,
+            {
+              ignoreExistingResources: true,
+              predicate(resource) {
+                return resource.name == "will-navigate";
+              },
+            }
+          )
+          .then(() => {
+            this.currentActivity = type;
+          });
+        return reconfigureTabAndReload({
+          cacheDisabled: false,
+        }).then(standBy);
+      case ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED:
+        this.currentActivity = ACTIVITY_TYPE.DISABLE_CACHE;
+        this.commands.resourceCommand
+          .waitForNextResource(
+            this.commands.resourceCommand.TYPES.DOCUMENT_EVENT,
+            {
+              ignoreExistingResources: true,
+              predicate(resource) {
+                return resource.name == "will-navigate";
+              },
+            }
+          )
+          .then(() => {
+            this.currentActivity = type;
+          });
+        return reconfigureTabAndReload({
+          cacheDisabled: true,
+        }).then(standBy);
+      case ACTIVITY_TYPE.ENABLE_CACHE:
+        this.currentActivity = type;
+        return reconfigureTab({
+          cacheDisabled: false,
+        }).then(standBy);
+      case ACTIVITY_TYPE.DISABLE_CACHE:
+        this.currentActivity = type;
+        return reconfigureTab({
+          cacheDisabled: true,
+        }).then(standBy);
+    }
+    this.currentActivity = ACTIVITY_TYPE.NONE;
+    return Promise.reject(new Error("Invalid activity type"));
+  }
+
+  /**
+   * 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}
+   *         A promise that is resolved when the full string contents
+   *         are available, or rejected if something goes wrong.
+   */
+  getLongString(stringGrip) {
+    return this.dataProvider.getLongString(stringGrip);
+  }
+
+  /**
+   * Used for HAR generation.
+   */
+  getHarData() {
+    return this._harMetadataCollector.getHarData();
+  }
+
+  /**
+   * Getter that returns the current toolbox instance.
+   * @return {Toolbox} toolbox instance
+   */
+  getToolbox() {
+    return this.toolbox;
+  }
+
+  /**
+   * Open a given source in Debugger
+   * @param {string} sourceURL source url
+   * @param {number} sourceLine source line number
+   */
+  viewSourceInDebugger(sourceURL, sourceLine, sourceColumn) {
+    if (this.toolbox) {
+      this.toolbox.viewSourceInDebugger(sourceURL, sourceLine, sourceColumn);
+    }
+  }
+
+  /**
+   * Fetch networkEventUpdate websocket message from back-end when
+   * data provider is connected.
+   * @param {object} request network request instance
+   * @param {string} type NetworkEventUpdate type
+   */
+  requestData(request, type) {
+    return this.dataProvider.requestData(request, type);
+  }
+
+  getTimingMarker(name) {
+    if (!this.getState) {
+      return -1;
+    }
+
+    const state = this.getState();
+    return getDisplayedTimingMarker(state, name);
+  }
+
+  async updateNetworkThrottling(enabled, profile) {
+    if (!enabled) {
+      this.networkFront.clearNetworkThrottling();
+      await this.commands.targetConfigurationCommand.updateConfiguration({
+        setTabOffline: false,
+      });
+    } else {
+      // The profile can be either a profile id which is used to
+      // search the predefined throttle profiles or a profile object
+      // as defined in the trottle tests.
+      if (typeof profile === "string") {
+        profile = throttlingProfiles.profiles.find(({ id }) => id == profile);
+      }
+      const { download, upload, latency, id } = profile;
+
+      // The offline profile has download and upload set to false
+      await this.commands.targetConfigurationCommand.updateConfiguration({
+        setTabOffline: id === throttlingProfiles.PROFILE_CONSTANTS.OFFLINE,
+      });
+
+      await this.networkFront.setNetworkThrottling({
+        downloadThroughput: download,
+        uploadThroughput: upload,
+        latency,
+      });
+    }
+
+    this.emitForTests(TEST_EVENTS.THROTTLING_CHANGED, { profile });
+  }
+
+  /**
+   * Fire events for the owner object. These events are only
+   * used in tests so, don't fire them in production release.
+   */
+  emitForTests(type, data) {
+    if (this.owner) {
+      this.owner.emitForTests(type, data);
+    }
+  }
+}
+module.exports.Connector = Connector;
diff --git a/devtools/client/netmonitor/src/connector/moz.build b/devtools/client/netmonitor/src/connector/moz.build
new file mode 100644
index 0000000000..4f65ddea0e
--- /dev/null
+++ b/devtools/client/netmonitor/src/connector/moz.build
@@ -0,0 +1,9 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "firefox-data-provider.js",
+    "har-metadata-collector.js",
+    "index.js",
+)
diff --git a/devtools/client/netmonitor/src/constants.js b/devtools/client/netmonitor/src/constants.js
new file mode 100644
index 0000000000..ae6cbde750
--- /dev/null
+++ b/devtools/client/netmonitor/src/constants.js
@@ -0,0 +1,612 @@
+/* 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 actionTypes = {
+  ADD_REQUEST: "ADD_REQUEST",
+  SET_EVENT_STREAM_FLAG: "SET_EVENT_STREAM_FLAG",
+  ADD_TIMING_MARKER: "ADD_TIMING_MARKER",
+  ADD_BLOCKED_URL: "ADD_BLOCKED_URL",
+  BATCH_ACTIONS: "BATCH_ACTIONS",
+  BATCH_ENABLE: "BATCH_ENABLE",
+  BATCH_FLUSH: "BATCH_FLUSH",
+  BLOCK_SELECTED_REQUEST_DONE: "BLOCK_SELECTED_REQUEST_DONE",
+  CLEAR_REQUESTS: "CLEAR_REQUESTS",
+  CLEAR_TIMING_MARKERS: "CLEAR_TIMING_MARKERS",
+  CLONE_REQUEST: "CLONE_REQUEST",
+  CLONE_SELECTED_REQUEST: "CLONE_SELECTED_REQUEST",
+  ENABLE_REQUEST_FILTER_TYPE_ONLY: "ENABLE_REQUEST_FILTER_TYPE_ONLY",
+  OPEN_NETWORK_DETAILS: "OPEN_NETWORK_DETAILS",
+  OPEN_ACTION_BAR: "OPEN_ACTION_BAR",
+  RESIZE_NETWORK_DETAILS: "RESIZE_NETWORK_DETAILS",
+  RIGHT_CLICK_REQUEST: "RIGHT_CLICK_REQUEST",
+  ENABLE_PERSISTENT_LOGS: "ENABLE_PERSISTENT_LOGS",
+  DISABLE_BROWSER_CACHE: "DISABLE_BROWSER_CACHE",
+  OPEN_STATISTICS: "OPEN_STATISTICS",
+  PERSIST_CHANGED: "PERSIST_CHANGED",
+  PRESELECT_REQUEST: "PRESELECT_REQUEST",
+  REMOVE_SELECTED_CUSTOM_REQUEST: "REMOVE_SELECTED_CUSTOM_REQUEST",
+  RESET_COLUMNS: "RESET_COLUMNS",
+  SELECT_REQUEST: "SELECT_REQUEST",
+  SELECT_DETAILS_PANEL_TAB: "SELECT_DETAILS_PANEL_TAB",
+  SELECT_ACTION_BAR_TAB: "SELECT_ACTION_BAR_TAB",
+  SEND_CUSTOM_REQUEST: "SEND_CUSTOM_REQUEST",
+  SET_REQUEST_FILTER_TEXT: "SET_REQUEST_FILTER_TEXT",
+  SORT_BY: "SORT_BY",
+  SYNCED_BLOCKED_URLS: "SYNCED_BLOCKED_URLS",
+  TOGGLE_BLOCKING_ENABLED: "TOGGLE_BLOCKING_ENABLED",
+  REMOVE_BLOCKED_URL: "REMOVE_BLOCKED_URL",
+  REMOVE_ALL_BLOCKED_URLS: "REMOVE_ALL_BLOCKED_URLS",
+  ENABLE_ALL_BLOCKED_URLS: "ENABLE_ALL_BLOCKED_URLS",
+  DISABLE_ALL_BLOCKED_URLS: "DISABLE_ALL_BLOCKED_URLS",
+  TOGGLE_BLOCKED_URL: "TOGGLE_BLOCKED_URL",
+  UPDATE_BLOCKED_URL: "UPDATE_BLOCKED_URL",
+  DISABLE_MATCHING_URLS: "DISABLE_MATCHING_URLS",
+  REQUEST_BLOCKING_UPDATE_COMPLETE: "REQUEST_BLOCKING_UPDATE_COMPLETE",
+  TOGGLE_COLUMN: "TOGGLE_COLUMN",
+  SET_RECORDING_STATE: "SET_RECORDING_STATE",
+  TOGGLE_REQUEST_FILTER_TYPE: "TOGGLE_REQUEST_FILTER_TYPE",
+  UNBLOCK_SELECTED_REQUEST_DONE: "UNBLOCK_SELECTED_REQUEST_DONE",
+  UPDATE_REQUEST: "UPDATE_REQUEST",
+  WATERFALL_RESIZE: "WATERFALL_RESIZE",
+  SET_COLUMNS_WIDTH: "SET_COLUMNS_WIDTH",
+  MSG_ADD: "MSG_ADD",
+  MSG_SELECT: "MSG_SELECT",
+  MSG_OPEN_DETAILS: "MSG_OPEN_DETAILS",
+  MSG_CLEAR: "MSG_CLEAR",
+  MSG_TOGGLE_FILTER_TYPE: "MSG_TOGGLE_FILTER_TYPE",
+  MSG_TOGGLE_CONTROL: "MSG_TOGGLE_CONTROL",
+  MSG_SET_FILTER_TEXT: "MSG_SET_FILTER_TEXT",
+  MSG_TOGGLE_COLUMN: "MSG_TOGGLE_COLUMN",
+  MSG_RESET_COLUMNS: "MSG_RESET_COLUMNS",
+  MSG_CLOSE_CONNECTION: "MSG_CLOSE_CONNECTION",
+  SET_HEADERS_URL_PREVIEW_EXPANDED: "SET_HEADERS_URL_PREVIEW_EXPANDED",
+
+  // Search
+  ADD_SEARCH_QUERY: "ADD_SEARCH_QUERY",
+  ADD_SEARCH_RESULT: "ADD_SEARCH_RESULT",
+  CLEAR_SEARCH_RESULTS: "CLEAR_SEARCH_RESULTS",
+  ADD_ONGOING_SEARCH: "ADD_ONGOING_SEARCH",
+  TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH: "TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH",
+  UPDATE_SEARCH_STATUS: "UPDATE_SEARCH_STATUS",
+  SET_TARGET_SEARCH_RESULT: "SET_TARGET_SEARCH_RESULT",
+};
+
+// Search status types
+const SEARCH_STATUS = {
+  INITIAL: "INITIAL",
+  FETCHING: "FETCHING",
+  CANCELED: "CANCELED",
+  DONE: "DONE",
+  ERROR: "ERROR",
+};
+
+const CHANNEL_TYPE = {
+  WEB_SOCKET: "WEB_SOCKET",
+  EVENT_STREAM: "EVENT_STREAM",
+};
+
+// 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,
+};
+
+// The panel's window global is an EventEmitter firing the following events:
+const EVENTS = {
+  // When a network event is added to the view
+  REQUEST_ADDED: "NetMonitor:RequestAdded",
+
+  // When request headers begin receiving.
+  UPDATING_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdating:RequestHeaders",
+
+  // When request cookies begin receiving.
+  UPDATING_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdating:RequestCookies",
+
+  // When request post data begins receiving.
+  UPDATING_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdating:RequestPostData",
+
+  // When security information begins receiving.
+  UPDATING_SECURITY_INFO: "NetMonitor:NetworkEventUpdating:SecurityInfo",
+
+  // When response headers begin receiving.
+  UPDATING_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdating:ResponseHeaders",
+
+  // When response cookies begin receiving.
+  UPDATING_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdating:ResponseCookies",
+
+  // When event timings begin and finish receiving.
+  UPDATING_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdating:EventTimings",
+  RECEIVED_EVENT_TIMINGS: "NetMonitor:NetworkEventUpdated:EventTimings",
+
+  // When response content updates receiving.
+  UPDATING_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdating:ResponseContent",
+
+  UPDATING_RESPONSE_CACHE: "NetMonitor:NetworkEventUpdating:ResponseCache",
+
+  // Fired once the connection is established
+  CONNECTED: "connected",
+
+  // When request payload (HTTP details data) are fetched from the backend.
+  PAYLOAD_READY: "NetMonitor:PayloadReady",
+};
+
+const TEST_EVENTS = {
+  // When a network or timeline event is received.
+  // See https://firefox-source-docs.mozilla.org/devtools-user/web_console/remoting/ for
+  // more information about what each packet is supposed to deliver.
+  NETWORK_EVENT: "NetMonitor:NetworkEvent",
+  NETWORK_EVENT_UPDATED: "NetMonitor:NetworkEventUpdated",
+  TIMELINE_EVENT: "NetMonitor:TimelineEvent",
+
+  // When response content begins receiving.
+  STARTED_RECEIVING_RESPONSE: "NetMonitor:NetworkEventUpdating:ResponseStart",
+
+  // When request headers finish receiving.
+  RECEIVED_REQUEST_HEADERS: "NetMonitor:NetworkEventUpdated:RequestHeaders",
+
+  // When response headers finish receiving.
+  RECEIVED_RESPONSE_HEADERS: "NetMonitor:NetworkEventUpdated:ResponseHeaders",
+
+  // When request cookies finish receiving.
+  RECEIVED_REQUEST_COOKIES: "NetMonitor:NetworkEventUpdated:RequestCookies",
+
+  // When request post data finishes receiving.
+  RECEIVED_REQUEST_POST_DATA: "NetMonitor:NetworkEventUpdated:RequestPostData",
+
+  // When security information finishes receiving.
+  RECEIVED_SECURITY_INFO: "NetMonitor:NetworkEventUpdated:SecurityInfo",
+
+  // When response cookies finish receiving.
+  RECEIVED_RESPONSE_COOKIES: "NetMonitor:NetworkEventUpdated:ResponseCookies",
+
+  RECEIVED_RESPONSE_CACHE: "NetMonitor:NetworkEventUpdated:ResponseCache",
+
+  // When response content finishes receiving.
+  RECEIVED_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdated:ResponseContent",
+
+  // When stack-trace finishes receiving.
+  RECEIVED_EVENT_STACKTRACE: "NetMonitor:NetworkEventUpdated:StackTrace",
+
+  // When throttling is set on the backend.
+  THROTTLING_CHANGED: "NetMonitor:ThrottlingChanged",
+
+  // When a long string is resolved
+  LONGSTRING_RESOLVED: "NetMonitor:LongStringResolved",
+};
+
+const UPDATE_PROPS = [
+  "method",
+  "url",
+  "remotePort",
+  "remoteAddress",
+  "status",
+  "statusText",
+  "httpVersion",
+  "isRacing",
+  "securityState",
+  "securityInfo",
+  "securityInfoAvailable",
+  "mimeType",
+  "contentSize",
+  "transferredSize",
+  "totalTime",
+  "eventTimings",
+  "eventTimingsAvailable",
+  "headersSize",
+  "customQueryValue",
+  "requestHeaders",
+  "requestHeadersAvailable",
+  "requestHeadersFromUploadStream",
+  "requestCookies",
+  "requestCookiesAvailable",
+  "requestPostData",
+  "requestPostDataAvailable",
+  "responseHeaders",
+  "responseHeadersAvailable",
+  "responseCookies",
+  "responseCookiesAvailable",
+  "responseContent",
+  "responseContentAvailable",
+  "responseCache",
+  "responseCacheAvailable",
+  "formDataSections",
+  "stacktrace",
+  "isThirdPartyTrackingResource",
+  "isResolvedByTRR",
+  "referrerPolicy",
+  "priority",
+  "blockedReason",
+  "blockingExtension",
+  "channelId",
+  "waitingTime",
+  "proxyHttpVersion",
+  "proxyStatus",
+  "proxyStatusText",
+];
+
+const PANELS = {
+  COOKIES: "cookies",
+  HEADERS: "headers",
+  MESSAGES: "messages",
+  REQUEST: "request",
+  RESPONSE: "response",
+  CACHE: "cache",
+  SECURITY: "security",
+  STACK_TRACE: "stack-trace",
+  TIMINGS: "timings",
+  HTTP_CUSTOM_REQUEST: "network-action-bar-HTTP-custom-request",
+  SEARCH: "network-action-bar-search",
+  BLOCKING: "network-action-bar-blocked",
+};
+
+const RESPONSE_HEADERS = [
+  "Cache-Control",
+  "Connection",
+  "Content-Encoding",
+  "Content-Length",
+  "ETag",
+  "Keep-Alive",
+  "Last-Modified",
+  "Server",
+  "Vary",
+];
+
+const HEADERS = [
+  {
+    name: "status",
+    label: "status3",
+    canFilter: true,
+    filterKey: "status-code",
+  },
+  {
+    name: "method",
+    canFilter: true,
+  },
+  {
+    name: "domain",
+    canFilter: true,
+  },
+  {
+    name: "file",
+    canFilter: false,
+  },
+  {
+    name: "url",
+    canFilter: true,
+  },
+  {
+    name: "protocol",
+    canFilter: true,
+  },
+  {
+    name: "scheme",
+    canFilter: true,
+  },
+  {
+    name: "remoteip",
+    canFilter: true,
+    filterKey: "remote-ip",
+  },
+  {
+    name: "cause",
+    canFilter: true,
+  },
+  {
+    name: "initiator",
+    canFilter: true,
+  },
+  {
+    name: "type",
+    canFilter: false,
+  },
+  {
+    name: "cookies",
+    canFilter: false,
+  },
+  {
+    name: "setCookies",
+    boxName: "set-cookies",
+    canFilter: false,
+  },
+  {
+    name: "transferred",
+    canFilter: true,
+  },
+  {
+    name: "contentSize",
+    boxName: "size",
+    filterKey: "size",
+    canFilter: true,
+  },
+  {
+    name: "priority",
+    boxName: "priority",
+    canFilter: true,
+  },
+  {
+    name: "startTime",
+    boxName: "start-time",
+    canFilter: false,
+    subMenu: "timings",
+  },
+  {
+    name: "endTime",
+    boxName: "end-time",
+    canFilter: false,
+    subMenu: "timings",
+  },
+  {
+    name: "responseTime",
+    boxName: "response-time",
+    canFilter: false,
+    subMenu: "timings",
+  },
+  {
+    name: "duration",
+    canFilter: false,
+    subMenu: "timings",
+  },
+  {
+    name: "latency",
+    canFilter: false,
+    subMenu: "timings",
+  },
+  ...RESPONSE_HEADERS.map(header => ({
+    name: header,
+    boxName: "response-header",
+    canFilter: false,
+    subMenu: "responseHeaders",
+    noLocalization: true,
+  })),
+  {
+    name: "waterfall",
+    canFilter: false,
+  },
+];
+
+const HEADER_FILTERS = HEADERS.filter(h => h.canFilter).map(
+  h => h.filterKey || h.name
+);
+
+const FILTER_FLAGS = [
+  ...HEADER_FILTERS,
+  "set-cookie-domain",
+  "set-cookie-name",
+  "set-cookie-value",
+  "mime-type",
+  "larger-than",
+  "transferred-larger-than",
+  "is",
+  "has-response-header",
+  "regexp",
+];
+
+const FILTER_TAGS = [
+  "html",
+  "css",
+  "js",
+  "xhr",
+  "fonts",
+  "images",
+  "media",
+  "ws",
+  "other",
+];
+
+const MESSAGE_HEADERS = [
+  {
+    name: "data",
+    width: "40%",
+  },
+  {
+    name: "size",
+    width: "12%",
+  },
+  {
+    name: "opCode",
+    width: "9%",
+  },
+  {
+    name: "maskBit",
+    width: "9%",
+  },
+  {
+    name: "finBit",
+    width: "9%",
+  },
+  {
+    name: "time",
+    width: "20%",
+  },
+  {
+    name: "eventName",
+    width: "9%",
+  },
+  {
+    name: "lastEventId",
+    width: "9%",
+  },
+  {
+    name: "retry",
+    width: "9%",
+  },
+];
+
+const REQUESTS_WATERFALL = {
+  BACKGROUND_TICKS_MULTIPLE: 5, // ms
+  BACKGROUND_TICKS_SCALES: 3,
+  BACKGROUND_TICKS_SPACING_MIN: 10, // px
+  BACKGROUND_TICKS_COLOR_RGB: [128, 136, 144],
+  // 8-bit value of the alpha component of the tick color
+  BACKGROUND_TICKS_OPACITY_MIN: 32,
+  BACKGROUND_TICKS_OPACITY_ADD: 32,
+  // Colors for timing markers (theme colors, see variables.css)
+  DOMCONTENTLOADED_TICKS_COLOR: "highlight-blue",
+  LOAD_TICKS_COLOR: "highlight-red",
+  // Opacity for the timing markers
+  TICKS_COLOR_OPACITY: 192,
+  HEADER_TICKS_MULTIPLE: 5, // ms
+  HEADER_TICKS_SPACING_MIN: 60, // px
+  // Reserve extra space for rendering waterfall time label
+  LABEL_WIDTH: 50, // px
+};
+
+const TIMING_KEYS = [
+  "blocked",
+  "dns",
+  "connect",
+  "ssl",
+  "send",
+  "wait",
+  "receive",
+];
+
+// Minimal width of Network Monitor column is 30px, for Waterfall 150px
+// Default width of columns (which are not defined in DEFAULT_COLUMNS_DATA) is 8%
+const MIN_COLUMN_WIDTH = 30; // in px
+const DEFAULT_COLUMN_WIDTH = 8; // in %
+/**
+ * A mapping of HTTP status codes.
+ */
+const SUPPORTED_HTTP_CODES = [
+  "100",
+  "101",
+  "200",
+  "201",
+  "202",
+  "203",
+  "204",
+  "205",
+  "206",
+  "300",
+  "301",
+  "302",
+  "303",
+  "304",
+  "307",
+  "308",
+  "400",
+  "401",
+  "403",
+  "404",
+  "405",
+  "406",
+  "407",
+  "408",
+  "409",
+  "410",
+  "411",
+  "412",
+  "413",
+  "414",
+  "415",
+  "416",
+  "417",
+  "418",
+  "422",
+  "425",
+  "426",
+  "428",
+  "429",
+  "431",
+  "451",
+  "500",
+  "501",
+  "502",
+  "503",
+  "504",
+  "505",
+  "511",
+];
+
+// Keys are the codes provided by server, values are localization messages
+// prefixed by "netmonitor.blocked."
+const BLOCKED_REASON_MESSAGES = {
+  devtools: "Blocked by DevTools",
+  1001: "CORS disabled",
+  1002: "CORS Failed",
+  1003: "CORS Not HTTP",
+  1004: "CORS Multiple Origin Not Allowed",
+  1005: "CORS Missing Allow Origin",
+  1006: "CORS No Allow Credentials",
+  1007: "CORS Allow Origin Not Matching Origin",
+  1008: "CORS Missing Allow Credentials",
+  1009: "CORS Origin Header Missing",
+  1010: "CORS External Redirect Not Allowed",
+  1011: "CORS Preflight Did Not Succeed",
+  1012: "CORS Invalid Allow Method",
+  1013: "CORS Method Not Found",
+  1014: "CORS Invalid Allow Header",
+  1015: "CORS Missing Allow Header",
+  2001: "Malware",
+  2002: "Phishing",
+  2003: "Unwanted",
+  2004: "Tracking",
+  2005: "Blocked",
+  2006: "Harmful",
+  2007: "Cryptomining",
+  2008: "Fingerprinting",
+  2009: "Socialtracking",
+  3001: "Mixed Block",
+  4000: "CSP",
+  4001: "CSP No Data Protocol",
+  4002: "CSP Web Extension",
+  4003: "CSP Content Blocked",
+  4004: "CSP Data Document",
+  4005: "CSP Web Browser",
+  4006: "CSP Preload",
+  5000: "Not same-origin",
+  6000: "Blocked By Extension",
+};
+
+/** @see {@link https://searchfox.org/mozilla-central/rev/d7a8eadc28298c31381119cbf25c8ba14b8712b3/netwerk/protocol/websocket/nsIWebSocketEventService.idl#30-38} */
+const WEB_SOCKET_OPCODE = {
+  CONTINUATION: 0,
+  TEXT: 1,
+  BINARY: 2,
+  CLOSE: 8,
+  PING: 9,
+  PONG: 10,
+};
+
+const general = {
+  ACTIVITY_TYPE,
+  EVENTS,
+  TEST_EVENTS,
+  FILTER_SEARCH_DELAY: 200,
+  UPDATE_PROPS,
+  HEADERS,
+  MESSAGE_HEADERS,
+  RESPONSE_HEADERS,
+  FILTER_FLAGS,
+  FILTER_TAGS,
+  REQUESTS_WATERFALL,
+  PANELS,
+  TIMING_KEYS,
+  MIN_COLUMN_WIDTH,
+  DEFAULT_COLUMN_WIDTH,
+  SUPPORTED_HTTP_CODES,
+  BLOCKED_REASON_MESSAGES,
+  SEARCH_STATUS,
+  AUTO_EXPAND_MAX_LEVEL: 7,
+  AUTO_EXPAND_MAX_NODES: 50,
+  CHANNEL_TYPE,
+  WEB_SOCKET_OPCODE,
+};
+
+// flatten constants
+module.exports = Object.assign({}, general, actionTypes);
diff --git a/devtools/client/netmonitor/src/create-store.js b/devtools/client/netmonitor/src/create-store.js
new file mode 100644
index 0000000000..0056e9fe2e
--- /dev/null
+++ b/devtools/client/netmonitor/src/create-store.js
@@ -0,0 +1,172 @@
+/* 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 {
+  applyMiddleware,
+  createStore,
+} = require("resource://devtools/client/shared/vendor/redux.js");
+
+const {
+  waitUntilService,
+} = require("resource://devtools/client/shared/redux/middleware/wait-service.js");
+
+const {
+  MIN_COLUMN_WIDTH,
+  DEFAULT_COLUMN_WIDTH,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+// Middleware
+const batching = require("resource://devtools/client/netmonitor/src/middleware/batching.js");
+const prefs = require("resource://devtools/client/netmonitor/src/middleware/prefs.js");
+const {
+  thunk,
+} = require("resource://devtools/client/shared/redux/middleware/thunk.js");
+const throttling = require("resource://devtools/client/netmonitor/src/middleware/throttling.js");
+const eventTelemetry = require("resource://devtools/client/netmonitor/src/middleware/event-telemetry.js");
+const requestBlocking = require("resource://devtools/client/netmonitor/src/middleware/request-blocking.js");
+
+// Reducers
+const rootReducer = require("resource://devtools/client/netmonitor/src/reducers/index.js");
+const {
+  FilterTypes,
+  Filters,
+} = require("resource://devtools/client/netmonitor/src/reducers/filters.js");
+const {
+  Requests,
+} = require("resource://devtools/client/netmonitor/src/reducers/requests.js");
+const {
+  Sort,
+} = require("resource://devtools/client/netmonitor/src/reducers/sort.js");
+const {
+  TimingMarkers,
+} = require("resource://devtools/client/netmonitor/src/reducers/timing-markers.js");
+const {
+  UI,
+  Columns,
+  ColumnsData,
+} = require("resource://devtools/client/netmonitor/src/reducers/ui.js");
+const {
+  Messages,
+  getMessageDefaultColumnsState,
+} = require("resource://devtools/client/netmonitor/src/reducers/messages.js");
+const {
+  Search,
+} = require("resource://devtools/client/netmonitor/src/reducers/search.js");
+
+/**
+ * Configure state and middleware for the Network monitor tool.
+ */
+function configureStore(connector, commands, telemetry) {
+  // Prepare initial state.
+  const initialState = {
+    filters: new Filters({
+      requestFilterTypes: getFilterState(),
+    }),
+    requests: new Requests(),
+    sort: new Sort(),
+    timingMarkers: new TimingMarkers(),
+    ui: UI({
+      columns: getColumnState(),
+      columnsData: getColumnsData(),
+    }),
+    messages: Messages({
+      columns: getMessageColumnState(),
+    }),
+    search: new Search(),
+  };
+
+  // Prepare middleware.
+  const middleware = applyMiddleware(
+    requestBlocking(commands),
+    thunk({ connector, commands }),
+    prefs,
+    batching,
+    throttling(connector),
+    eventTelemetry(connector, telemetry),
+    waitUntilService
+  );
+
+  return createStore(rootReducer, initialState, middleware);
+}
+
+// Helpers
+
+/**
+ * Get column state from preferences.
+ */
+function getColumnState() {
+  const columns = Columns();
+  const visibleColumns = getPref("devtools.netmonitor.visibleColumns");
+
+  const state = {};
+  for (const col in columns) {
+    state[col] = visibleColumns.includes(col);
+  }
+
+  return state;
+}
+
+/**
+ * Get column state of Messages from preferences.
+ */
+function getMessageColumnState() {
+  const columns = getMessageDefaultColumnsState();
+  const visibleColumns = getPref("devtools.netmonitor.msg.visibleColumns");
+
+  const state = {};
+  for (const col in columns) {
+    state[col] = visibleColumns.includes(col);
+  }
+
+  return state;
+}
+
+/**
+ * Get columns data (width, min-width)
+ */
+function getColumnsData() {
+  const columnsData = getPref("devtools.netmonitor.columnsData");
+  if (!columnsData.length) {
+    return ColumnsData();
+  }
+
+  const newMap = new Map();
+  columnsData.forEach(col => {
+    if (col.name) {
+      col.minWidth = col.minWidth ? col.minWidth : MIN_COLUMN_WIDTH;
+      col.width = col.width ? col.width : DEFAULT_COLUMN_WIDTH;
+      newMap.set(col.name, col);
+    }
+  });
+
+  return newMap;
+}
+
+/**
+ * Get filter state from preferences.
+ */
+function getFilterState() {
+  const activeFilters = {};
+  const filters = getPref("devtools.netmonitor.filters");
+  filters.forEach(filter => {
+    activeFilters[filter] = true;
+  });
+  return new FilterTypes(activeFilters);
+}
+
+/**
+ * Get json data from preferences
+ */
+
+function getPref(pref) {
+  try {
+    return JSON.parse(Services.prefs.getCharPref(pref));
+  } catch (_) {
+    return [];
+  }
+}
+
+exports.configureStore = configureStore;
diff --git a/devtools/client/netmonitor/src/har/README.md b/devtools/client/netmonitor/src/har/README.md
new file mode 100644
index 0000000000..fe3e362aaf
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/README.md
@@ -0,0 +1,42 @@
+# HAR
+HAR stands for `HTTP Archive` format used by various HTTP monitoring tools
+to export collected data. This format is based on JSON and is supported by
+many tools on the market including all main browsers (Firefox/Chrome/IE/Edge etc.)
+
+HAR spec:
+* http://www.softwareishard.com/blog/har-12-spec/
+* https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html
+
+HAR adopters:
+* http://www.softwareishard.com/blog/har-adopters/
+
+# Netmonitor
+Network monitor tool (in Firefox) supports exporting data in HAR format and
+the implementation consists from the following objects.
+
+## HarAutomation
+This object is responsible for automated HAR export. It listens for Network
+activity and triggers HAR export when the page is loaded.
+
+The user needs to enable `devtools.netmonitor.har.enableAutoExportToFile` pref
+and restart Firefox to switch this automation tool on.
+
+## HarBuilder
+This object is responsible for building HAR object (JSON). It gets all
+HTTP requests currently displayed in the Network panel and builds valid HAR.
+This object lazy loads all necessary data from the backend if needed,
+so the result structure is complete.
+
+## HarCollector
+This object is responsible for collecting data related to all  HTTP requests
+executed by the page (including inner iframes). The final export is triggered
+by HarAutomation at the right time.
+
+Note: this object is using it's own logic to fetch data from the backend.
+It should reuse the Netmonitor Connector (src/connector/index),
+so we don't have to maintain two code paths.
+
+## HarExporter
+This object represents the main public API designed to access export logic.
+Clients, such as the Network panel itself, or WebExtensions API should use
+this object to trigger exporting of collected HTTP data from the panel.
diff --git a/devtools/client/netmonitor/src/har/har-automation.js b/devtools/client/netmonitor/src/har/har-automation.js
new file mode 100644
index 0000000000..b3c4153d1e
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-automation.js
@@ -0,0 +1,253 @@
+/* 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 {
+  HarCollector,
+} = require("resource://devtools/client/netmonitor/src/har/har-collector.js");
+const {
+  HarExporter,
+} = require("resource://devtools/client/netmonitor/src/har/har-exporter.js");
+const {
+  HarUtils,
+} = require("resource://devtools/client/netmonitor/src/har/har-utils.js");
+const {
+  getLongStringFullText,
+} = require("resource://devtools/client/shared/string-utils.js");
+
+const prefDomain = "devtools.netmonitor.har.";
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log(...args) {},
+};
+
+/**
+ * This object is responsible for automated HAR export. It listens
+ * for Network activity, collects all HTTP data and triggers HAR
+ * export when the page is loaded.
+ *
+ * The user needs to enable the following preference to make the
+ * auto-export work: devtools.netmonitor.har.enableAutoExportToFile
+ *
+ * HAR files are stored within directory that is specified in this
+ * preference: devtools.netmonitor.har.defaultLogDir
+ *
+ * If the default log directory preference isn't set the following
+ * directory is used by default: <profile>/har/logs
+ */
+function HarAutomation() {}
+
+HarAutomation.prototype = {
+  // Initialization
+
+  async initialize(toolbox) {
+    this.toolbox = toolbox;
+    this.commands = toolbox.commands;
+
+    await this.startMonitoring();
+  },
+
+  destroy() {
+    if (this.collector) {
+      this.collector.stop();
+    }
+
+    if (this.tabWatcher) {
+      this.tabWatcher.disconnect();
+    }
+  },
+
+  // Automation
+
+  async startMonitoring() {
+    await this.toolbox.resourceCommand.watchResources(
+      [this.toolbox.resourceCommand.TYPES.DOCUMENT_EVENT],
+      {
+        onAvailable: resources => {
+          // Only consider top level document, and ignore remote iframes top document
+          if (
+            resources.find(
+              r => r.name == "will-navigate" && r.targetFront.isTopLevel
+            )
+          ) {
+            this.pageLoadBegin();
+          }
+          if (
+            resources.find(
+              r => r.name == "dom-complete" && r.targetFront.isTopLevel
+            )
+          ) {
+            this.pageLoadDone();
+          }
+        },
+        ignoreExistingResources: true,
+      }
+    );
+  },
+
+  pageLoadBegin(response) {
+    this.resetCollector();
+  },
+
+  resetCollector() {
+    if (this.collector) {
+      this.collector.stop();
+    }
+
+    // A page is about to be loaded, start collecting HTTP
+    // data from events sent from the backend.
+    this.collector = new HarCollector({
+      commands: this.commands,
+    });
+
+    this.collector.start();
+  },
+
+  /**
+   * A page is done loading, export collected data. Note that
+   * some requests for additional page resources might be pending,
+   * so export all after all has been properly received from the backend.
+   *
+   * This collector still works and collects any consequent HTTP
+   * traffic (e.g. XHRs) happening after the page is loaded and
+   * The additional traffic can be exported by executing
+   * triggerExport on this object.
+   */
+  pageLoadDone(response) {
+    trace.log("HarAutomation.pageLoadDone; ", response);
+
+    if (this.collector) {
+      this.collector.waitForHarLoad().then(collector => {
+        return this.autoExport();
+      });
+    }
+  },
+
+  autoExport() {
+    const autoExport = Services.prefs.getBoolPref(
+      prefDomain + "enableAutoExportToFile"
+    );
+
+    if (!autoExport) {
+      return Promise.resolve();
+    }
+
+    // Auto export to file is enabled, so save collected data
+    // into a file and use all the default options.
+    const data = {
+      fileName: Services.prefs.getCharPref(prefDomain + "defaultFileName"),
+    };
+
+    return this.executeExport(data);
+  },
+
+  // Public API
+
+  /**
+   * Export all what is currently collected.
+   */
+  triggerExport(data) {
+    if (!data.fileName) {
+      data.fileName = Services.prefs.getCharPref(
+        prefDomain + "defaultFileName"
+      );
+    }
+
+    return this.executeExport(data);
+  },
+
+  /**
+   * Clear currently collected data.
+   */
+  clear() {
+    this.resetCollector();
+  },
+
+  // HAR Export
+
+  /**
+   * Execute HAR export. This method fetches all data from the
+   * Network panel (asynchronously) and saves it into a file.
+   */
+  async executeExport(data) {
+    const items = this.collector.getItems();
+    const { title } = this.commands.targetCommand.targetFront;
+
+    const netMonitor = await this.toolbox.getNetMonitorAPI();
+    const connector = await netMonitor.getHarExportConnector();
+
+    const options = {
+      connector,
+      requestData: null,
+      getTimingMarker: null,
+      getString: this.getString.bind(this),
+      view: this,
+      items,
+    };
+
+    options.defaultFileName = data.fileName;
+    options.compress = data.compress;
+    options.title = data.title || title;
+    options.id = data.id;
+    options.jsonp = data.jsonp;
+    options.includeResponseBodies = data.includeResponseBodies;
+    options.jsonpCallback = data.jsonpCallback;
+    options.forceExport = data.forceExport;
+
+    trace.log("HarAutomation.executeExport; " + data.fileName, options);
+
+    const jsonString = await HarExporter.fetchHarData(options);
+
+    // Save the HAR file if the file name is provided.
+    if (jsonString && options.defaultFileName) {
+      const file = getDefaultTargetFile(options);
+      if (file) {
+        HarUtils.saveToFile(file, jsonString, options.compress);
+      }
+    }
+
+    return jsonString;
+  },
+
+  /**
+   * Fetches the full text of a string.
+   */
+  async getString(stringGrip) {
+    const fullText = await getLongStringFullText(
+      this.commands.client,
+      stringGrip
+    );
+    return fullText;
+  },
+};
+
+// Protocol Helpers
+
+/**
+ * Returns target file for exported HAR data.
+ */
+function getDefaultTargetFile(options) {
+  const path =
+    options.defaultLogDir ||
+    Services.prefs.getCharPref("devtools.netmonitor.har.defaultLogDir");
+  const folder = HarUtils.getLocalDirectory(path);
+
+  const host = new URL(options.connector.currentTarget.url);
+  const fileName = HarUtils.getHarFileName(
+    options.defaultFileName,
+    options.jsonp,
+    options.compress,
+    host.hostname
+  );
+
+  folder.append(fileName);
+  folder.createUnique(Ci.nsIFile.NORMAL_FILE_TYPE, parseInt("0666", 8));
+
+  return folder;
+}
+
+// Exports from this module
+exports.HarAutomation = HarAutomation;
diff --git a/devtools/client/netmonitor/src/har/har-builder-utils.js b/devtools/client/netmonitor/src/har/har-builder-utils.js
new file mode 100644
index 0000000000..e669263681
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-builder-utils.js
@@ -0,0 +1,30 @@
+/* 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";
+
+/**
+ * Currently supported HAR version.
+ */
+const HAR_VERSION = "1.2";
+
+function buildHarLog(appInfo) {
+  return {
+    log: {
+      version: HAR_VERSION,
+      creator: {
+        name: appInfo.name,
+        version: appInfo.version,
+      },
+      browser: {
+        name: appInfo.name,
+        version: appInfo.version,
+      },
+      pages: [],
+      entries: [],
+    },
+  };
+}
+
+exports.buildHarLog = buildHarLog;
diff --git a/devtools/client/netmonitor/src/har/har-builder.js b/devtools/client/netmonitor/src/har/har-builder.js
new file mode 100644
index 0000000000..8f1a9095c7
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-builder.js
@@ -0,0 +1,651 @@
+/* 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 appInfo = Services.appinfo;
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const { CurlUtils } = require("resource://devtools/client/shared/curl.js");
+const {
+  getFormDataSections,
+  getUrlQuery,
+  parseQueryString,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  buildHarLog,
+} = require("resource://devtools/client/netmonitor/src/har/har-builder-utils.js");
+const L10N = new LocalizationHelper("devtools/client/locales/har.properties");
+const {
+  TIMING_KEYS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * This object is responsible for building HAR file. See HAR spec:
+ * https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html
+ * http://www.softwareishard.com/blog/har-12-spec/
+ *
+ * @param {Object} options
+ *        configuration object
+ * @param {Boolean} options.connector
+ *        Set to true to include HTTP response bodies in the result data
+ *        structure.
+ * @param {String} options.id
+ *        ID of the exported page.
+ * @param {Boolean} options.includeResponseBodies
+ *        Set to true to include HTTP response bodies in the result data
+ *        structure.
+ * @param {Array} options.items
+ *        List of network events to be exported.
+ * @param {Boolean} options.supportsMultiplePages
+ *        Set to true to create distinct page entries for each navigation.
+ */
+var HarBuilder = function (options) {
+  this._connector = options.connector;
+  this._id = options.id;
+  this._includeResponseBodies = options.includeResponseBodies;
+  this._items = options.items;
+  // Page id counter, only used when options.supportsMultiplePages is true.
+  this._pageId = options.supportsMultiplePages ? 0 : options.id;
+  this._pageMap = [];
+  this._supportsMultiplePages = options.supportsMultiplePages;
+  this._url = this._connector.currentTarget.url;
+};
+
+HarBuilder.prototype = {
+  // Public API
+
+  /**
+   * This is the main method used to build the entire result HAR data.
+   * The process is asynchronous since it can involve additional RDP
+   * communication (e.g. resolving long strings).
+   *
+   * @returns {Promise} A promise that resolves to the HAR object when
+   * the entire build process is done.
+   */
+  async build() {
+    this.promises = [];
+
+    // Build basic structure for data.
+    const harLog = buildHarLog(appInfo);
+
+    // Build pages.
+    this.buildPages(harLog.log);
+
+    // Build entries.
+    for (const request of this._items) {
+      const entry = await this.buildEntry(harLog.log, request);
+      if (entry) {
+        harLog.log.entries.push(entry);
+      }
+    }
+
+    // Some data needs to be fetched from the backend during the
+    // build process, so wait till all is done.
+    await Promise.all(this.promises);
+
+    return harLog;
+  },
+
+  // Helpers
+
+  buildPages(log) {
+    if (this._supportsMultiplePages) {
+      this.buildPagesFromTargetTitles(log);
+    } else if (this._items.length) {
+      const firstRequest = this._items[0];
+      const page = this.buildPage(this._url, firstRequest);
+      log.pages.push(page);
+      this._pageMap[this._id] = page;
+    }
+  },
+
+  buildPagesFromTargetTitles(log) {
+    // Retrieve the additional HAR data collected by the connector.
+    const { initialURL, navigationRequests } = this._connector.getHarData();
+    const firstNavigationRequest = navigationRequests[0];
+    const firstRequest = this._items[0];
+
+    if (
+      !firstNavigationRequest ||
+      firstRequest.resourceId !== firstNavigationRequest.resourceId
+    ) {
+      // If the first request is not a navigation request, it must be related
+      // to the initial page. Create a first page entry for such early requests.
+      const initialPage = this.buildPage(initialURL, firstRequest);
+      log.pages.push(initialPage);
+    }
+
+    for (const request of navigationRequests) {
+      const page = this.buildPage(request.url, request);
+      log.pages.push(page);
+    }
+  },
+
+  buildPage(url, networkEvent) {
+    const page = {};
+
+    page.id = "page_" + this._pageId;
+    page.pageTimings = this.buildPageTimings(page, networkEvent);
+    page.startedDateTime = dateToHarString(new Date(networkEvent.startedMs));
+
+    // To align with other existing implementations of HAR exporters, the title
+    // should contain the page URL and not the page title.
+    page.title = url;
+
+    // Increase the pageId, for upcoming calls to buildPage.
+    // If supportsMultiplePages is disabled this method is only called once.
+    this._pageId++;
+
+    return page;
+  },
+
+  getPage(log, entry) {
+    const existingPage = log.pages.findLast(
+      ({ startedDateTime }) => startedDateTime <= entry.startedDateTime
+    );
+
+    if (!existingPage) {
+      throw new Error(
+        "Could not find a page for request: " + entry.request.url
+      );
+    }
+
+    return existingPage;
+  },
+
+  async buildEntry(log, networkEvent) {
+    const entry = {};
+    entry.startedDateTime = dateToHarString(new Date(networkEvent.startedMs));
+
+    let { eventTimings, id } = networkEvent;
+    try {
+      if (!eventTimings && this._connector.requestData) {
+        eventTimings = await this._connector.requestData(id, "eventTimings");
+      }
+
+      entry.request = await this.buildRequest(networkEvent);
+      entry.response = await this.buildResponse(networkEvent);
+      entry.cache = await this.buildCache(networkEvent);
+    } catch (e) {
+      // Ignore any request for which we can't retrieve lazy data
+      // The request has most likely been destroyed on the server side,
+      // either because persist is disabled or the request's target/WindowGlobal/process
+      // has been destroyed.
+      console.warn("HAR builder failed on", networkEvent.url, e, e.stack);
+      return null;
+    }
+    entry.timings = eventTimings ? eventTimings.timings : {};
+
+    // Calculate total time by summing all timings. Note that
+    // `networkEvent.totalTime` can't be used since it doesn't have to
+    // correspond to plain summary of individual timings.
+    // With TCP Fast Open and TLS early data sending data can
+    // start at the same time as connect (we can send data on
+    // TCP syn packet). Also TLS handshake can carry application
+    // data thereby overlapping a sending data period and TLS
+    // handshake period.
+    entry.time = TIMING_KEYS.reduce((sum, type) => {
+      const time = entry.timings[type];
+      return typeof time != "undefined" && time != -1 ? sum + time : sum;
+    }, 0);
+
+    // Security state isn't part of HAR spec, and so create
+    // custom field that needs to use '_' prefix.
+    entry._securityState = networkEvent.securityState;
+
+    if (networkEvent.remoteAddress) {
+      entry.serverIPAddress = networkEvent.remoteAddress;
+    }
+
+    if (networkEvent.remotePort) {
+      entry.connection = networkEvent.remotePort + "";
+    }
+
+    const page = this.getPage(log, entry);
+    entry.pageref = page.id;
+
+    return entry;
+  },
+
+  buildPageTimings(page, networkEvent) {
+    // Event timing info isn't available
+    const timings = {
+      onContentLoad: -1,
+      onLoad: -1,
+    };
+
+    // TODO: This method currently ignores the networkEvent and always retrieves
+    // the same timing markers for all pages. Seee Bug 1833806.
+    if (this._connector.getTimingMarker) {
+      timings.onContentLoad = this._connector.getTimingMarker(
+        "firstDocumentDOMContentLoadedTimestamp"
+      );
+      timings.onLoad = this._connector.getTimingMarker(
+        "firstDocumentLoadTimestamp"
+      );
+    }
+
+    return timings;
+  },
+
+  async buildRequest(networkEvent) {
+    // When using HarAutomation, HarCollector will automatically fetch requestHeaders
+    // and requestCookies, but when we use it from netmonitor, FirefoxDataProvider
+    // should fetch it itself lazily, via requestData.
+
+    let { id, requestHeaders } = networkEvent;
+    if (!requestHeaders && this._connector.requestData) {
+      requestHeaders = await this._connector.requestData(id, "requestHeaders");
+    }
+
+    let { requestCookies } = networkEvent;
+    if (!requestCookies && this._connector.requestData) {
+      requestCookies = await this._connector.requestData(id, "requestCookies");
+    }
+
+    const request = {
+      bodySize: 0,
+    };
+    request.method = networkEvent.method;
+    request.url = networkEvent.url;
+    request.httpVersion = networkEvent.httpVersion || "";
+    request.headers = this.buildHeaders(requestHeaders);
+    request.headers = this.appendHeadersPostData(request.headers, networkEvent);
+    request.cookies = this.buildCookies(requestCookies);
+    request.queryString = parseQueryString(getUrlQuery(networkEvent.url)) || [];
+    request.headersSize = requestHeaders.headersSize;
+    request.postData = await this.buildPostData(networkEvent);
+
+    if (request.postData?.text) {
+      request.bodySize = request.postData.text.length;
+    }
+
+    return request;
+  },
+
+  /**
+   * Fetch all header values from the backend (if necessary) and
+   * build the result HAR structure.
+   *
+   * @param {Object} input Request or response header object.
+   */
+  buildHeaders(input) {
+    if (!input) {
+      return [];
+    }
+
+    return this.buildNameValuePairs(input.headers);
+  },
+
+  appendHeadersPostData(input = [], networkEvent) {
+    if (!networkEvent.requestPostData) {
+      return input;
+    }
+
+    this.fetchData(networkEvent.requestPostData.postData.text).then(value => {
+      const multipartHeaders = CurlUtils.getHeadersFromMultipartText(value);
+      for (const header of multipartHeaders) {
+        input.push(header);
+      }
+    });
+
+    return input;
+  },
+
+  buildCookies(input) {
+    if (!input) {
+      return [];
+    }
+
+    return this.buildNameValuePairs(input.cookies || input);
+  },
+
+  buildNameValuePairs(entries) {
+    const result = [];
+
+    // HAR requires headers array to be presented, so always
+    // return at least an empty array.
+    if (!entries) {
+      return result;
+    }
+
+    // Make sure header values are fully fetched from the server.
+    entries.forEach(entry => {
+      this.fetchData(entry.value).then(value => {
+        result.push({
+          name: entry.name,
+          value,
+        });
+      });
+    });
+
+    return result;
+  },
+
+  async buildPostData(networkEvent) {
+    // When using HarAutomation, HarCollector will automatically fetch requestPostData
+    // and requestHeaders, but when we use it from netmonitor, FirefoxDataProvider
+    // should fetch it itself lazily, via requestData.
+    let { id, requestHeaders, requestPostData } = networkEvent;
+    let requestHeadersFromUploadStream;
+
+    if (!requestPostData && this._connector.requestData) {
+      requestPostData = await this._connector.requestData(
+        id,
+        "requestPostData"
+      );
+      requestHeadersFromUploadStream = requestPostData.uploadHeaders;
+    }
+
+    if (!requestPostData.postData.text) {
+      return undefined;
+    }
+
+    if (!requestHeaders && this._connector.requestData) {
+      requestHeaders = await this._connector.requestData(id, "requestHeaders");
+    }
+
+    const postData = {
+      mimeType: findValue(requestHeaders.headers, "content-type"),
+      params: [],
+      text: requestPostData.postData.text,
+    };
+
+    if (requestPostData.postDataDiscarded) {
+      postData.comment = L10N.getStr("har.requestBodyNotIncluded");
+      return postData;
+    }
+
+    // If we are dealing with URL encoded body, parse parameters.
+    if (
+      CurlUtils.isUrlEncodedRequest({
+        headers: requestHeaders.headers,
+        postDataText: postData.text,
+      })
+    ) {
+      postData.mimeType = "application/x-www-form-urlencoded";
+      // Extract form parameters and produce nice HAR array.
+      const formDataSections = await getFormDataSections(
+        requestHeaders,
+        requestHeadersFromUploadStream,
+        requestPostData,
+        this._connector.getLongString
+      );
+
+      formDataSections.forEach(section => {
+        const paramsArray = parseQueryString(section);
+        if (paramsArray) {
+          postData.params = [...postData.params, ...paramsArray];
+        }
+      });
+    }
+
+    return postData;
+  },
+
+  async buildResponse(networkEvent) {
+    // When using HarAutomation, HarCollector will automatically fetch responseHeaders
+    // and responseCookies, but when we use it from netmonitor, FirefoxDataProvider
+    // should fetch it itself lazily, via requestData.
+
+    let { id, responseCookies, responseHeaders } = networkEvent;
+    if (!responseHeaders && this._connector.requestData) {
+      responseHeaders = await this._connector.requestData(
+        id,
+        "responseHeaders"
+      );
+    }
+
+    if (!responseCookies && this._connector.requestData) {
+      responseCookies = await this._connector.requestData(
+        id,
+        "responseCookies"
+      );
+    }
+
+    const response = {
+      status: 0,
+    };
+
+    // Arbitrary value if it's aborted to make sure status has a number
+    if (networkEvent.status) {
+      response.status = parseInt(networkEvent.status, 10);
+    }
+    response.statusText = networkEvent.statusText || "";
+    response.httpVersion = networkEvent.httpVersion || "";
+
+    response.headers = this.buildHeaders(responseHeaders);
+    response.cookies = this.buildCookies(responseCookies);
+    response.content = await this.buildContent(networkEvent);
+
+    const headers = responseHeaders ? responseHeaders.headers : null;
+    const headersSize = responseHeaders ? responseHeaders.headersSize : -1;
+
+    response.redirectURL = findValue(headers, "Location");
+    response.headersSize = headersSize;
+
+    // 'bodySize' is size of the received response body in bytes.
+    // Set to zero in case of responses coming from the cache (304).
+    // Set to -1 if the info is not available.
+    if (typeof networkEvent.transferredSize != "number") {
+      response.bodySize = response.status == 304 ? 0 : -1;
+    } else {
+      response.bodySize = networkEvent.transferredSize;
+    }
+
+    return response;
+  },
+
+  async buildContent(networkEvent) {
+    const content = {
+      mimeType: networkEvent.mimeType,
+      size: -1,
+    };
+
+    // When using HarAutomation, HarCollector will automatically fetch responseContent,
+    // but when we use it from netmonitor, FirefoxDataProvider should fetch it itself
+    // lazily, via requestData.
+    let { responseContent } = networkEvent;
+    if (!responseContent && this._connector.requestData) {
+      responseContent = await this._connector.requestData(
+        networkEvent.id,
+        "responseContent"
+      );
+    }
+    if (responseContent?.content) {
+      content.size = responseContent.content.size;
+      content.encoding = responseContent.content.encoding;
+    }
+
+    const includeBodies = this._includeResponseBodies;
+    const contentDiscarded = responseContent
+      ? responseContent.contentDiscarded
+      : false;
+
+    // The comment is appended only if the response content
+    // is explicitly discarded.
+    if (!includeBodies || contentDiscarded) {
+      content.comment = L10N.getStr("har.responseBodyNotIncluded");
+      return content;
+    }
+
+    if (responseContent) {
+      const { text } = responseContent.content;
+      this.fetchData(text).then(value => {
+        content.text = value;
+      });
+    }
+
+    return content;
+  },
+
+  async buildCache(networkEvent) {
+    const cache = {};
+
+    // if resource has changed, return early
+    if (networkEvent.status != "304") {
+      return cache;
+    }
+
+    if (networkEvent.responseCacheAvailable && this._connector.requestData) {
+      const responseCache = await this._connector.requestData(
+        networkEvent.id,
+        "responseCache"
+      );
+      if (responseCache.cache) {
+        cache.afterRequest = this.buildCacheEntry(responseCache.cache);
+      }
+    } else if (networkEvent.responseCache?.cache) {
+      cache.afterRequest = this.buildCacheEntry(
+        networkEvent.responseCache.cache
+      );
+    } else {
+      cache.afterRequest = null;
+    }
+
+    return cache;
+  },
+
+  buildCacheEntry(cacheEntry) {
+    const cache = {};
+
+    if (typeof cacheEntry !== "undefined") {
+      cache.expires = findKeys(cacheEntry, ["expirationTime", "expires"]);
+      cache.lastFetched = findKeys(cacheEntry, ["lastFetched"]);
+
+      // TODO: eTag support
+      // Har format expects cache entries to provide information about eTag,
+      // however this is not currently exposed on nsICacheEntry.
+      // This should be stored under cache.eTag. See Bug 1799844.
+
+      cache.fetchCount = findKeys(cacheEntry, ["fetchCount"]);
+
+      // har-importer.js, along with other files, use buildCacheEntry
+      // initial value comes from properties without underscores.
+      // this checks for both in appropriate order.
+      cache._dataSize = findKeys(cacheEntry, ["storageDataSize", "_dataSize"]);
+      cache._lastModified = findKeys(cacheEntry, [
+        "lastModified",
+        "_lastModified",
+      ]);
+      cache._device = findKeys(cacheEntry, ["deviceID", "_device"]);
+    }
+
+    return cache;
+  },
+
+  // RDP Helpers
+
+  fetchData(string) {
+    const promise = this._connector.getLongString(string).then(value => {
+      return value;
+    });
+
+    // Building HAR is asynchronous and not done till all
+    // collected promises are resolved.
+    this.promises.push(promise);
+
+    return promise;
+  },
+};
+
+// Helpers
+
+/**
+ * Find specified keys within an object.
+ * Searches object for keys passed in, returns first value returned,
+ * or an empty string.
+ *
+ * @param obj (object)
+ * @param keys (array)
+ * @returns {string}
+ */
+function findKeys(obj, keys) {
+  if (!keys) {
+    return "";
+  }
+
+  const keyFound = keys.filter(key => obj[key]);
+  if (!keys.length) {
+    return "";
+  }
+
+  const value = obj[keyFound[0]];
+  if (typeof value === "undefined" || typeof value === "object") {
+    return "";
+  }
+
+  return String(value);
+}
+
+/**
+ * Find specified value within an array of name-value pairs
+ * (used for headers, cookies and cache entries)
+ */
+function findValue(arr, name) {
+  if (!arr) {
+    return "";
+  }
+
+  name = name.toLowerCase();
+  const result = arr.find(entry => entry.name.toLowerCase() == name);
+  return result ? result.value : "";
+}
+
+/**
+ * Generate HAR representation of a date.
+ * (YYYY-MM-DDThh:mm:ss.sTZD, e.g. 2009-07-24T19:20:30.45+01:00)
+ * See also HAR Schema: http://janodvarko.cz/har/viewer/
+ *
+ * Note: it would be great if we could utilize Date.toJSON(), but
+ * it doesn't return proper time zone offset.
+ *
+ * An example:
+ * This helper returns:    2015-05-29T16:10:30.424+02:00
+ * Date.toJSON() returns:  2015-05-29T14:10:30.424Z
+ *
+ * @param date {Date} The date object we want to convert.
+ */
+function dateToHarString(date) {
+  function f(n, c) {
+    if (!c) {
+      c = 2;
+    }
+    let s = String(n);
+    while (s.length < c) {
+      s = "0" + s;
+    }
+    return s;
+  }
+
+  const result =
+    date.getFullYear() +
+    "-" +
+    f(date.getMonth() + 1) +
+    "-" +
+    f(date.getDate()) +
+    "T" +
+    f(date.getHours()) +
+    ":" +
+    f(date.getMinutes()) +
+    ":" +
+    f(date.getSeconds()) +
+    "." +
+    f(date.getMilliseconds(), 3);
+
+  let offset = date.getTimezoneOffset();
+  const positive = offset > 0;
+
+  // Convert to positive number before using Math.floor (see issue 5512)
+  offset = Math.abs(offset);
+  const offsetHours = Math.floor(offset / 60);
+  const offsetMinutes = Math.floor(offset % 60);
+  const prettyOffset =
+    (positive > 0 ? "-" : "+") + f(offsetHours) + ":" + f(offsetMinutes);
+
+  return result + prettyOffset;
+}
+
+// Exports from this module
+exports.HarBuilder = HarBuilder;
diff --git a/devtools/client/netmonitor/src/har/har-collector.js b/devtools/client/netmonitor/src/har/har-collector.js
new file mode 100644
index 0000000000..c5a4ae959d
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-collector.js
@@ -0,0 +1,488 @@
+/* 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 {
+  getLongStringFullText,
+} = require("resource://devtools/client/shared/string-utils.js");
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log(...args) {},
+};
+
+/**
+ * This object is responsible for collecting data related to all
+ * HTTP requests executed by the page (including inner iframes).
+ */
+function HarCollector(options) {
+  this.commands = options.commands;
+
+  this.onResourceAvailable = this.onResourceAvailable.bind(this);
+  this.onResourceUpdated = this.onResourceUpdated.bind(this);
+  this.onRequestHeaders = this.onRequestHeaders.bind(this);
+  this.onRequestCookies = this.onRequestCookies.bind(this);
+  this.onRequestPostData = this.onRequestPostData.bind(this);
+  this.onResponseHeaders = this.onResponseHeaders.bind(this);
+  this.onResponseCookies = this.onResponseCookies.bind(this);
+  this.onResponseContent = this.onResponseContent.bind(this);
+  this.onEventTimings = this.onEventTimings.bind(this);
+
+  this.clear();
+}
+
+HarCollector.prototype = {
+  // Connection
+
+  async start() {
+    await this.commands.resourceCommand.watchResources(
+      [this.commands.resourceCommand.TYPES.NETWORK_EVENT],
+      {
+        onAvailable: this.onResourceAvailable,
+        onUpdated: this.onResourceUpdated,
+      }
+    );
+  },
+
+  async stop() {
+    await this.commands.resourceCommand.unwatchResources(
+      [this.commands.resourceCommand.TYPES.NETWORK_EVENT],
+      {
+        onAvailable: this.onResourceAvailable,
+        onUpdated: this.onResourceUpdated,
+      }
+    );
+  },
+
+  clear() {
+    // Any pending requests events will be ignored (they turn
+    // into zombies, since not present in the files array).
+    this.files = new Map();
+    this.items = [];
+    this.firstRequestStart = -1;
+    this.lastRequestStart = -1;
+    this.requests = [];
+  },
+
+  waitForHarLoad() {
+    // There should be yet another timeout e.g.:
+    // 'devtools.netmonitor.har.pageLoadTimeout'
+    // that should force export even if page isn't fully loaded.
+    return new Promise(resolve => {
+      this.waitForResponses().then(() => {
+        trace.log("HarCollector.waitForHarLoad; DONE HAR loaded!");
+        resolve(this);
+      });
+    });
+  },
+
+  waitForResponses() {
+    trace.log("HarCollector.waitForResponses; " + this.requests.length);
+
+    // All requests for additional data must be received to have complete
+    // HTTP info to generate the result HAR file. So, wait for all current
+    // promises. Note that new promises (requests) can be generated during the
+    // process of HTTP data collection.
+    return waitForAll(this.requests).then(() => {
+      // All responses are received from the backend now. We yet need to
+      // wait for a little while to see if a new request appears. If yes,
+      // lets's start gathering HTTP data again. If no, we can declare
+      // the page loaded.
+      // If some new requests appears in the meantime the promise will
+      // be rejected and we need to wait for responses all over again.
+
+      this.pageLoadDeferred = this.waitForTimeout().then(
+        () => {
+          // Page loaded!
+        },
+        () => {
+          trace.log(
+            "HarCollector.waitForResponses; NEW requests " +
+              "appeared during page timeout!"
+          );
+          // New requests executed, let's wait again.
+          return this.waitForResponses();
+        }
+      );
+      return this.pageLoadDeferred;
+    });
+  },
+
+  // Page Loaded Timeout
+
+  /**
+   * The page is loaded when there are no new requests within given period
+   * of time. The time is set in preferences:
+   * 'devtools.netmonitor.har.pageLoadedTimeout'
+   */
+  waitForTimeout() {
+    // The auto-export is not done if the timeout is set to zero (or less).
+    // This is useful in cases where the export is done manually through
+    // API exposed to the content.
+    const timeout = Services.prefs.getIntPref(
+      "devtools.netmonitor.har.pageLoadedTimeout"
+    );
+
+    trace.log("HarCollector.waitForTimeout; " + timeout);
+
+    return new Promise((resolve, reject) => {
+      if (timeout <= 0) {
+        resolve();
+      }
+      this.pageLoadReject = reject;
+      this.pageLoadTimeout = setTimeout(() => {
+        trace.log("HarCollector.onPageLoadTimeout;");
+        resolve();
+      }, timeout);
+    });
+  },
+
+  resetPageLoadTimeout() {
+    // Remove the current timeout.
+    if (this.pageLoadTimeout) {
+      trace.log("HarCollector.resetPageLoadTimeout;");
+
+      clearTimeout(this.pageLoadTimeout);
+      this.pageLoadTimeout = null;
+    }
+
+    // Reject the current page load promise
+    if (this.pageLoadReject) {
+      this.pageLoadReject();
+      this.pageLoadReject = null;
+    }
+  },
+
+  // Collected Data
+
+  getFile(actorId) {
+    return this.files.get(actorId);
+  },
+
+  getItems() {
+    return this.items;
+  },
+
+  // Event Handlers
+
+  onResourceAvailable(resources) {
+    for (const resource of resources) {
+      trace.log("HarCollector.onNetworkEvent; ", resource);
+
+      const { actor, startedDateTime, method, url, isXHR } = resource;
+      const startTime = Date.parse(startedDateTime);
+
+      if (this.firstRequestStart == -1) {
+        this.firstRequestStart = startTime;
+      }
+
+      if (this.lastRequestEnd < startTime) {
+        this.lastRequestEnd = startTime;
+      }
+
+      let file = this.getFile(actor);
+      if (file) {
+        console.error(
+          "HarCollector.onNetworkEvent; ERROR " + "existing file conflict!"
+        );
+        continue;
+      }
+
+      file = {
+        id: actor,
+        startedDeltaMs: startTime - this.firstRequestStart,
+        startedMs: startTime,
+        method,
+        url,
+        isXHR,
+      };
+
+      this.files.set(actor, file);
+
+      // Mimic the Net panel data structure
+      this.items.push(file);
+    }
+  },
+
+  onResourceUpdated(updates) {
+    for (const { resource } of updates) {
+      // Skip events from unknown actors (not in the list).
+      // It can happen when there are zombie requests received after
+      // the target is closed or multiple tabs are attached through
+      // one connection (one DevToolsClient object).
+      const file = this.getFile(resource.actor);
+      if (!file) {
+        return;
+      }
+
+      const includeResponseBodies = Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.includeResponseBodies"
+      );
+
+      [
+        {
+          type: "eventTimings",
+          method: "getEventTimings",
+          callbackName: "onEventTimings",
+        },
+        {
+          type: "requestHeaders",
+          method: "getRequestHeaders",
+          callbackName: "onRequestHeaders",
+        },
+        {
+          type: "requestPostData",
+          method: "getRequestPostData",
+          callbackName: "onRequestPostData",
+        },
+        {
+          type: "responseHeaders",
+          method: "getResponseHeaders",
+          callbackName: "onResponseHeaders",
+        },
+        { type: "responseStart" },
+        {
+          type: "responseContent",
+          method: "getResponseContent",
+          callbackName: "onResponseContent",
+        },
+        {
+          type: "requestCookies",
+          method: "getRequestCookies",
+          callbackName: "onRequestCookies",
+        },
+        {
+          type: "responseCookies",
+          method: "getResponseCookies",
+          callbackName: "onResponseCookies",
+        },
+      ].forEach(updateType => {
+        trace.log(
+          "HarCollector.onNetworkEventUpdate; " + updateType.type,
+          resource
+        );
+
+        let request;
+        if (resource[`${updateType.type}Available`]) {
+          if (updateType.type == "responseStart") {
+            file.httpVersion = resource.httpVersion;
+            file.status = resource.status;
+            file.statusText = resource.statusText;
+          } else if (updateType.type == "responseContent") {
+            file.contentSize = resource.contentSize;
+            file.mimeType = resource.mimeType;
+            file.transferredSize = resource.transferredSize;
+            if (includeResponseBodies) {
+              request = this.getData(
+                resource.actor,
+                updateType.method,
+                this[updateType.callbackName]
+              );
+            }
+          } else {
+            request = this.getData(
+              resource.actor,
+              updateType.method,
+              this[updateType.callbackName]
+            );
+          }
+        }
+
+        if (request) {
+          this.requests.push(request);
+        }
+        this.resetPageLoadTimeout();
+      });
+    }
+  },
+
+  async getData(actor, method, callback) {
+    const file = this.getFile(actor);
+
+    trace.log(
+      "HarCollector.getData; REQUEST " + method + ", " + file.url,
+      file
+    );
+
+    // Bug 1519082: We don't create fronts for NetworkEvent actors,
+    // so that we have to do the request manually via DevToolsClient.request()
+    const packet = {
+      to: actor,
+      type: method,
+    };
+    const response = await this.commands.client.request(packet);
+
+    trace.log(
+      "HarCollector.getData; RESPONSE " + method + ", " + file.url,
+      response
+    );
+    callback(response);
+    return response;
+  },
+
+  /**
+   * Handles additional information received for a "requestHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestHeaders(response) {
+    const file = this.getFile(response.from);
+    file.requestHeaders = response;
+
+    this.getLongHeaders(response.headers);
+  },
+
+  /**
+   * Handles additional information received for a "requestCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestCookies(response) {
+    const file = this.getFile(response.from);
+    file.requestCookies = response;
+
+    this.getLongHeaders(response.cookies);
+  },
+
+  /**
+   * Handles additional information received for a "requestPostData" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onRequestPostData(response) {
+    trace.log("HarCollector.onRequestPostData;", response);
+
+    const file = this.getFile(response.from);
+    file.requestPostData = response;
+
+    // Resolve long string
+    const { text } = response.postData;
+    if (typeof text == "object") {
+      this.getString(text).then(value => {
+        response.postData.text = value;
+      });
+    }
+  },
+
+  /**
+   * Handles additional information received for a "responseHeaders" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseHeaders(response) {
+    const file = this.getFile(response.from);
+    file.responseHeaders = response;
+
+    this.getLongHeaders(response.headers);
+  },
+
+  /**
+   * Handles additional information received for a "responseCookies" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseCookies(response) {
+    const file = this.getFile(response.from);
+    file.responseCookies = response;
+
+    this.getLongHeaders(response.cookies);
+  },
+
+  /**
+   * Handles additional information received for a "responseContent" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onResponseContent(response) {
+    const file = this.getFile(response.from);
+    file.responseContent = response;
+
+    // Resolve long string
+    const { text } = response.content;
+    if (typeof text == "object") {
+      this.getString(text).then(value => {
+        response.content.text = value;
+      });
+    }
+  },
+
+  /**
+   * Handles additional information received for a "eventTimings" packet.
+   *
+   * @param object response
+   *        The message received from the server.
+   */
+  onEventTimings(response) {
+    const file = this.getFile(response.from);
+    file.eventTimings = response;
+    file.totalTime = response.totalTime;
+  },
+
+  // Helpers
+
+  getLongHeaders(headers) {
+    for (const header of headers) {
+      if (typeof header.value == "object") {
+        try {
+          this.getString(header.value).then(value => {
+            header.value = value;
+          });
+        } catch (error) {
+          trace.log("HarCollector.getLongHeaders; ERROR when getString", error);
+        }
+      }
+    }
+  },
+
+  /**
+   * Fetches the full text of a string.
+   *
+   * @param object | string stringGrip
+   *        The long string grip containing the corresponding actor.
+   *        If you pass in a plain string (by accident or because you're lazy),
+   *        then a promise of the same string is simply returned.
+   * @return object Promise
+   *         A promise that is resolved when the full string contents
+   *         are available, or rejected if something goes wrong.
+   */
+  async getString(stringGrip) {
+    const promise = getLongStringFullText(this.commands.client, stringGrip);
+    this.requests.push(promise);
+    return promise;
+  },
+};
+
+// Helpers
+
+/**
+ * Helper function that allows to wait for array of promises. It is
+ * possible to dynamically add new promises in the provided array.
+ * The function will wait even for the newly added promises.
+ * (this isn't possible with the default Promise.all);
+ */
+function waitForAll(promises) {
+  // Remove all from the original array and get clone of it.
+  const clone = promises.splice(0, promises.length);
+
+  // Wait for all promises in the given array.
+  return Promise.all(clone).then(() => {
+    // If there are new promises (in the original array)
+    // to wait for - chain them!
+    if (promises.length) {
+      return waitForAll(promises);
+    }
+
+    return undefined;
+  });
+}
+
+// Exports from this module
+exports.HarCollector = HarCollector;
diff --git a/devtools/client/netmonitor/src/har/har-exporter.js b/devtools/client/netmonitor/src/har/har-exporter.js
new file mode 100644
index 0000000000..fb401c2737
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-exporter.js
@@ -0,0 +1,230 @@
+/* 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 DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js");
+const JSZip = require("resource://devtools/client/shared/vendor/jszip.js");
+const clipboardHelper = require("resource://devtools/shared/platform/clipboard.js");
+const {
+  HarUtils,
+} = require("resource://devtools/client/netmonitor/src/har/har-utils.js");
+const {
+  HarBuilder,
+} = require("resource://devtools/client/netmonitor/src/har/har-builder.js");
+
+var uid = 1;
+
+// Helper tracer. Should be generic sharable by other modules (bug 1171927)
+const trace = {
+  log(...args) {},
+};
+
+/**
+ * This object represents the main public API designed to access
+ * Network export logic. Clients, such as the Network panel itself,
+ * should use this API to export collected HTTP data from the panel.
+ */
+const HarExporter = {
+  // Public API
+
+  /**
+   * Save collected HTTP data from the Network panel into HAR file.
+   *
+   * @param Object options
+   *        Configuration object
+   *
+   * The following options are supported:
+   *
+   * - includeResponseBodies {Boolean}: If set to true, HTTP response bodies
+   *   are also included in the HAR file (can produce significantly bigger
+   *   amount of data).
+   *
+   * - items {Array}: List of Network requests to be exported.
+   *
+   * - jsonp {Boolean}: If set to true the export format is HARP (support
+   *   for JSONP syntax).
+   *
+   * - jsonpCallback {String}: Default name of JSONP callback (used for
+   *   HARP format).
+   *
+   * - compress {Boolean}: If set to true the final HAR file is zipped.
+   *   This represents great disk-space optimization.
+   *
+   * - defaultFileName {String}: Default name of the target HAR file.
+   *   The default file name supports the format specifier %date to output the
+   *   current date/time.
+   *
+   * - defaultLogDir {String}: Default log directory for automated logs.
+   *
+   * - id {String}: ID of the page (used in the HAR file).
+   *
+   * - title {String}: Title of the page (used in the HAR file).
+   *
+   * - forceExport {Boolean}: The result HAR file is created even if
+   *   there are no HTTP entries.
+   */
+  async save(options) {
+    // Set default options related to save operation.
+    const defaultFileName = Services.prefs.getCharPref(
+      "devtools.netmonitor.har.defaultFileName"
+    );
+    const compress = Services.prefs.getBoolPref(
+      "devtools.netmonitor.har.compress"
+    );
+
+    trace.log("HarExporter.save; " + defaultFileName, options);
+
+    let data = await this.fetchHarData(options);
+
+    const host = new URL(options.connector.currentTarget.url);
+
+    const fileName = HarUtils.getHarFileName(
+      defaultFileName,
+      options.jsonp,
+      compress,
+      host.hostname
+    );
+
+    if (compress) {
+      data = await JSZip()
+        .file(fileName, data)
+        .generateAsync({
+          compression: "DEFLATE",
+          platform: Services.appinfo.OS === "WINNT" ? "DOS" : "UNIX",
+          type: "uint8array",
+        });
+    } else {
+      data = new TextEncoder().encode(data);
+    }
+
+    DevToolsUtils.saveAs(window, data, fileName);
+  },
+
+  /**
+   * Copy HAR string into the clipboard.
+   *
+   * @param Object options
+   *        Configuration object, see save() for detailed description.
+   */
+  copy(options) {
+    return this.fetchHarData(options).then(jsonString => {
+      clipboardHelper.copyString(jsonString);
+      return jsonString;
+    });
+  },
+
+  /**
+   * Get HAR data as JSON object.
+   *
+   * @param Object options
+   *        Configuration object, see save() for detailed description.
+   */
+  getHar(options) {
+    return this.fetchHarData(options).then(data => {
+      return data ? JSON.parse(data) : null;
+    });
+  },
+
+  // Helpers
+
+  fetchHarData(options) {
+    // Generate page ID
+    options.id = options.id || uid++;
+
+    // Set default generic HAR export options.
+    if (typeof options.jsonp != "boolean") {
+      options.jsonp = Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.jsonp"
+      );
+    }
+    if (typeof options.includeResponseBodies != "boolean") {
+      options.includeResponseBodies = Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.includeResponseBodies"
+      );
+    }
+    if (typeof options.jsonpCallback != "boolean") {
+      options.jsonpCallback = Services.prefs.getCharPref(
+        "devtools.netmonitor.har.jsonpCallback"
+      );
+    }
+    if (typeof options.forceExport != "boolean") {
+      options.forceExport = Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.forceExport"
+      );
+    }
+    if (typeof options.supportsMultiplePages != "boolean") {
+      options.supportsMultiplePages = Services.prefs.getBoolPref(
+        "devtools.netmonitor.har.multiple-pages"
+      );
+    }
+
+    // Build HAR object.
+    return this.buildHarData(options)
+      .then(har => {
+        // Do not export an empty HAR file, unless the user
+        // explicitly says so (using the forceExport option).
+        if (!har.log.entries.length && !options.forceExport) {
+          return Promise.resolve();
+        }
+
+        let jsonString = this.stringify(har);
+        if (!jsonString) {
+          return Promise.resolve();
+        }
+
+        // If JSONP is wanted, wrap the string in a function call
+        if (options.jsonp) {
+          // This callback name is also used in HAR Viewer by default.
+          // http://www.softwareishard.com/har/viewer/
+          const callbackName = options.jsonpCallback || "onInputData";
+          jsonString = callbackName + "(" + jsonString + ");";
+        }
+
+        return jsonString;
+      })
+      .catch(function onError(err) {
+        console.error(err);
+      });
+  },
+
+  /**
+   * Build HAR data object. This object contains all HTTP data
+   * collected by the Network panel. The process is asynchronous
+   * since it can involve additional RDP communication (e.g. resolving
+   * long strings).
+   */
+  async buildHarData(options) {
+    // Disconnect from redux actions/store.
+    options.connector.enableActions(false);
+
+    // Build HAR object from collected data.
+    const builder = new HarBuilder(options);
+    const result = await builder.build();
+
+    // Connect to redux actions again.
+    options.connector.enableActions(true);
+
+    return result;
+  },
+
+  /**
+   * Build JSON string from the HAR data object.
+   */
+  stringify(har) {
+    if (!har) {
+      return null;
+    }
+
+    try {
+      return JSON.stringify(har, null, "  ");
+    } catch (err) {
+      console.error(err);
+      return undefined;
+    }
+  },
+};
+
+// Exports from this module
+exports.HarExporter = HarExporter;
diff --git a/devtools/client/netmonitor/src/har/har-importer.js b/devtools/client/netmonitor/src/har/har-importer.js
new file mode 100644
index 0000000000..2246a29086
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-importer.js
@@ -0,0 +1,166 @@
+/* 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 {
+  TIMING_KEYS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getUrlDetails,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+var guid = 0;
+
+/**
+ * This object is responsible for importing HAR file. See HAR spec:
+ * https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html
+ * http://www.softwareishard.com/blog/har-12-spec/
+ */
+var HarImporter = function (actions) {
+  this.actions = actions;
+};
+
+HarImporter.prototype = {
+  /**
+   * This is the main method used to import HAR data.
+   */
+  import(har) {
+    const json = JSON.parse(har);
+    this.doImport(json);
+  },
+
+  doImport(har) {
+    this.actions.clearRequests();
+
+    // Helper map for pages.
+    const pages = new Map();
+    har.log.pages.forEach(page => {
+      pages.set(page.id, page);
+    });
+
+    // Iterate all entries/requests and generate state.
+    har.log.entries.forEach(entry => {
+      const requestId = String(++guid);
+      const startedMs = Date.parse(entry.startedDateTime);
+
+      // Add request
+      this.actions.addRequest(
+        requestId,
+        {
+          startedMs,
+          method: entry.request.method,
+          url: entry.request.url,
+          urlDetails: getUrlDetails(entry.request.url),
+          isXHR: false,
+          cause: {
+            loadingDocumentUri: "",
+            stackTraceAvailable: false,
+            type: "",
+          },
+          fromCache: false,
+          fromServiceWorker: false,
+        },
+        false
+      );
+
+      // Update request
+      const data = {
+        requestHeaders: {
+          headers: entry.request.headers,
+          headersSize: entry.request.headersSize,
+          rawHeaders: "",
+        },
+        responseHeaders: {
+          headers: entry.response.headers,
+          headersSize: entry.response.headersSize,
+          rawHeaders: "",
+        },
+        requestCookies: entry.request.cookies,
+        responseCookies: entry.response.cookies,
+        requestPostData: {
+          postData: entry.request.postData || {},
+          postDataDiscarded: false,
+        },
+        responseContent: {
+          content: entry.response.content,
+          contentDiscarded: false,
+        },
+        eventTimings: {
+          timings: entry.timings,
+        },
+        totalTime: TIMING_KEYS.reduce((sum, type) => {
+          const time = entry.timings[type];
+          return typeof time != "undefined" && time != -1 ? sum + time : sum;
+        }, 0),
+
+        httpVersion: entry.request.httpVersion,
+        contentSize: entry.response.content.size,
+        mimeType: entry.response.content.mimeType,
+        remoteAddress: entry.serverIPAddress,
+        remotePort: entry.connection,
+        status: entry.response.status,
+        statusText: entry.response.statusText,
+        transferredSize: entry.response.bodySize,
+        securityState: entry._securityState,
+
+        // Avoid auto-fetching data from the backend
+        eventTimingsAvailable: false,
+        requestCookiesAvailable: false,
+        requestHeadersAvailable: false,
+        responseContentAvailable: false,
+        responseStartAvailable: false,
+        responseCookiesAvailable: false,
+        responseHeadersAvailable: false,
+        securityInfoAvailable: false,
+        requestPostDataAvailable: false,
+      };
+
+      if (entry.cache.afterRequest) {
+        const { afterRequest } = entry.cache;
+        data.responseCache = {
+          cache: {
+            expires: afterRequest.expires,
+            fetchCount: afterRequest.fetchCount,
+            lastFetched: afterRequest.lastFetched,
+            // TODO: eTag support, see Bug 1799844.
+            // eTag: afterRequest.eTag,
+            _dataSize: afterRequest._dataSize,
+            _lastModified: afterRequest._lastModified,
+            _device: afterRequest._device,
+          },
+        };
+      }
+
+      this.actions.updateRequest(requestId, data, false);
+
+      // Page timing markers
+      const pageTimings = pages.get(entry.pageref)?.pageTimings;
+      let onContentLoad = (pageTimings && pageTimings.onContentLoad) || 0;
+      let onLoad = (pageTimings && pageTimings.onLoad) || 0;
+
+      // Set 0 as the default value
+      onContentLoad = onContentLoad != -1 ? onContentLoad : 0;
+      onLoad = onLoad != -1 ? onLoad : 0;
+
+      // Add timing markers
+      if (onContentLoad > 0) {
+        this.actions.addTimingMarker({
+          name: "dom-interactive",
+          time: startedMs + onContentLoad,
+        });
+      }
+
+      if (onLoad > 0) {
+        this.actions.addTimingMarker({
+          name: "dom-complete",
+          time: startedMs + onLoad,
+        });
+      }
+    });
+  },
+};
+
+// Exports from this module
+exports.HarImporter = HarImporter;
diff --git a/devtools/client/netmonitor/src/har/har-menu-utils.js b/devtools/client/netmonitor/src/har/har-menu-utils.js
new file mode 100644
index 0000000000..756d9d9f96
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-menu-utils.js
@@ -0,0 +1,118 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+loader.lazyRequireGetter(
+  this,
+  "HarExporter",
+  "resource://devtools/client/netmonitor/src/har/har-exporter.js",
+  true
+);
+
+loader.lazyGetter(this, "HarImporter", function () {
+  return require("resource://devtools/client/netmonitor/src/har/har-importer.js")
+    .HarImporter;
+});
+
+/**
+ * Helper object with HAR related context menu actions.
+ */
+var HarMenuUtils = {
+  /**
+   * Copy HAR from the network panel content to the clipboard.
+   */
+  async copyAllAsHar(requests, connector) {
+    const har = await HarExporter.copy(
+      this.getDefaultHarOptions(requests, connector)
+    );
+
+    // We cannot easily expect the clipboard content from tests, instead we emit
+    // a test event.
+    HarMenuUtils.emitForTests("copy-all-as-har-done", har);
+
+    return har;
+  },
+
+  /**
+   * Save HAR from the network panel content to a file.
+   */
+  saveAllAsHar(requests, connector) {
+    // This will not work in launchpad
+    // document.execCommand(‘cut’/‘copy’) was denied because it was not called from
+    // inside a short running user-generated event handler.
+    // https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard
+    return HarExporter.save(this.getDefaultHarOptions(requests, connector));
+  },
+
+  /**
+   * Import HAR file and preview its content in the Network panel.
+   */
+  openHarFile(actions, openSplitConsole) {
+    const fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
+    fp.init(
+      window,
+      L10N.getStr("netmonitor.har.importHarDialogTitle"),
+      Ci.nsIFilePicker.modeOpen
+    );
+
+    // Append file filters
+    fp.appendFilter(
+      L10N.getStr("netmonitor.har.importDialogHARFilter"),
+      "*.har"
+    );
+    fp.appendFilter(L10N.getStr("netmonitor.har.importDialogAllFilter"), "*.*");
+
+    fp.open(rv => {
+      if (rv == Ci.nsIFilePicker.returnOK) {
+        const file = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsIFile);
+        file.initWithPath(fp.file.path);
+        readFile(file).then(har => {
+          if (har) {
+            this.appendPreview(har, actions, openSplitConsole);
+          }
+        });
+      }
+    });
+  },
+
+  appendPreview(har, actions, openSplitConsole) {
+    try {
+      const importer = new HarImporter(actions);
+      importer.import(har);
+    } catch (err) {
+      if (openSplitConsole) {
+        openSplitConsole("Error while processing HAR file: " + err.message);
+      }
+    }
+  },
+
+  getDefaultHarOptions(requests, connector) {
+    return {
+      connector,
+      items: requests,
+    };
+  },
+};
+
+// Helpers
+
+function readFile(file) {
+  return new Promise(resolve => {
+    IOUtils.read(file.path).then(data => {
+      const decoder = new TextDecoder();
+      resolve(decoder.decode(data));
+    });
+  });
+}
+
+EventEmitter.decorate(HarMenuUtils);
+
+// Exports from this module
+exports.HarMenuUtils = HarMenuUtils;
diff --git a/devtools/client/netmonitor/src/har/har-utils.js b/devtools/client/netmonitor/src/har/har-utils.js
new file mode 100644
index 0000000000..08e8557cd8
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/har-utils.js
@@ -0,0 +1,163 @@
+/* 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";
+
+ChromeUtils.defineLazyGetter(this, "ZipWriter", function () {
+  return Components.Constructor("@mozilla.org/zipwriter;1", "nsIZipWriter");
+});
+
+const OPEN_FLAGS = {
+  RDONLY: parseInt("0x01", 16),
+  WRONLY: parseInt("0x02", 16),
+  CREATE_FILE: parseInt("0x08", 16),
+  APPEND: parseInt("0x10", 16),
+  TRUNCATE: parseInt("0x20", 16),
+  EXCL: parseInt("0x80", 16),
+};
+
+function formatDate(date) {
+  const year = String(date.getFullYear() % 100).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hour = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+
+  return `${year}-${month}-${day} ${hour}-${minutes}-${seconds}`;
+}
+
+/**
+ * Helper API for HAR export features.
+ */
+var HarUtils = {
+  getHarFileName(defaultFileName, jsonp, compress, hostname) {
+    const extension = jsonp ? ".harp" : ".har";
+
+    const now = new Date();
+    let name = defaultFileName.replace(/%date/g, formatDate(now));
+    name = name.replace(/%hostname/g, hostname);
+    name = name.replace(/\:/gm, "-", "");
+    name = name.replace(/\//gm, "_", "");
+
+    let fileName = name + extension;
+
+    // Default file extension is zip if compressing is on.
+    if (compress) {
+      fileName += ".zip";
+    }
+
+    return fileName;
+  },
+
+  /**
+   * Save HAR string into a given file. The file might be compressed
+   * if specified in the options.
+   *
+   * @param {File} file Target file where the HAR string (JSON)
+   * should be stored.
+   * @param {String} jsonString HAR data (JSON or JSONP)
+   * @param {Boolean} compress The result file is zipped if set to true.
+   */
+  saveToFile(file, jsonString, compress) {
+    const openFlags =
+      OPEN_FLAGS.WRONLY | OPEN_FLAGS.CREATE_FILE | OPEN_FLAGS.TRUNCATE;
+
+    try {
+      const foStream = Cc[
+        "@mozilla.org/network/file-output-stream;1"
+      ].createInstance(Ci.nsIFileOutputStream);
+
+      const permFlags = parseInt("0666", 8);
+      foStream.init(file, openFlags, permFlags, 0);
+
+      const convertor = Cc[
+        "@mozilla.org/intl/converter-output-stream;1"
+      ].createInstance(Ci.nsIConverterOutputStream);
+      convertor.init(foStream, "UTF-8");
+
+      // The entire jsonString can be huge so, write the data in chunks.
+      const chunkLength = 1024 * 1024;
+      for (let i = 0; i <= jsonString.length; i++) {
+        const data = jsonString.substr(i, chunkLength + 1);
+        if (data) {
+          convertor.writeString(data);
+        }
+
+        i = i + chunkLength;
+      }
+
+      // this closes foStream
+      convertor.close();
+    } catch (err) {
+      console.error(err);
+      return false;
+    }
+
+    // If no compressing then bail out.
+    if (!compress) {
+      return true;
+    }
+
+    // Remember name of the original file, it'll be replaced by a zip file.
+    const originalFilePath = file.path;
+    const originalFileName = file.leafName;
+
+    try {
+      // Rename using unique name (the file is going to be removed).
+      file.moveTo(null, "temp" + new Date().getTime() + "temphar");
+
+      // Create compressed file with the original file path name.
+      const zipFile = Cc["@mozilla.org/file/local;1"].createInstance(
+        Ci.nsIFile
+      );
+      zipFile.initWithPath(originalFilePath);
+
+      // The file within the zipped file doesn't use .zip extension.
+      let fileName = originalFileName;
+      if (fileName.indexOf(".zip") == fileName.length - 4) {
+        fileName = fileName.substr(0, fileName.indexOf(".zip"));
+      }
+
+      const zip = new ZipWriter();
+      zip.open(zipFile, openFlags);
+      zip.addEntryFile(
+        fileName,
+        Ci.nsIZipWriter.COMPRESSION_DEFAULT,
+        file,
+        false
+      );
+      zip.close();
+
+      // Remove the original file (now zipped).
+      file.remove(true);
+      return true;
+    } catch (err) {
+      console.error(err);
+
+      // Something went wrong (disk space?) rename the original file back.
+      file.moveTo(null, originalFileName);
+    }
+
+    return false;
+  },
+
+  getLocalDirectory(path) {
+    let dir;
+
+    if (!path) {
+      dir = Services.dirsvc.get("ProfD", Ci.nsIFile);
+      dir.append("har");
+      dir.append("logs");
+    } else {
+      dir = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsIFile);
+      dir.initWithPath(path);
+    }
+
+    return dir;
+  },
+};
+
+// Exports from this module
+exports.HarUtils = HarUtils;
diff --git a/devtools/client/netmonitor/src/har/moz.build b/devtools/client/netmonitor/src/har/moz.build
new file mode 100644
index 0000000000..449c4562ac
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/moz.build
@@ -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/.
+
+DevToolsModules(
+    "har-automation.js",
+    "har-builder-utils.js",
+    "har-builder.js",
+    "har-collector.js",
+    "har-exporter.js",
+    "har-importer.js",
+    "har-menu-utils.js",
+    "har-utils.js",
+)
+
+BROWSER_CHROME_MANIFESTS += [
+    "test/browser-harautomation.toml",
+    "test/browser.toml",
+]
diff --git a/devtools/client/netmonitor/src/har/test/browser-harautomation.toml b/devtools/client/netmonitor/src/har/test/browser-harautomation.toml
new file mode 100644
index 0000000000..883d35da86
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser-harautomation.toml
@@ -0,0 +1,14 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+prefs = ["devtools.netmonitor.har.enableAutoExportToFile=true"] # This preference needs to be set before starting Firefox, so we use a dedicated browser manifest
+
+support-files = [
+  "head.js",
+  "!/devtools/client/netmonitor/test/head.js",
+  "!/devtools/client/netmonitor/test/html_simple-test-page.html",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+["browser_harautomation_simple.js"]
diff --git a/devtools/client/netmonitor/src/har/test/browser.toml b/devtools/client/netmonitor/src/har/test/browser.toml
new file mode 100644
index 0000000000..7a11328f5a
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser.toml
@@ -0,0 +1,39 @@
+[DEFAULT]
+tags = "devtools"
+subsuite = "devtools"
+skip-if = [
+  "http3", # Bug 1829298
+  "http2",
+]
+support-files = [
+  "head.js",
+  "html_har_import-test-page.html",
+  "html_har_multipage_iframe.html",
+  "html_har_multipage_page.html",
+  "html_har_post-data-test-page.html",
+  "sjs_cache-test-server.sjs",
+  "sjs_cookies-test-server.sjs",
+  "!/devtools/client/netmonitor/test/head.js",
+  "!/devtools/client/netmonitor/test/html_simple-test-page.html",
+  "!/devtools/client/shared/test/shared-head.js",
+  "!/devtools/client/shared/test/telemetry-test-helpers.js",
+]
+
+["browser_net_har_copy_all_as_har.js"]
+skip-if = [
+  "!debug && os == 'mac'", #Bug 1622925
+  "!debug && os == 'linux'", #Bug 1622925
+  "win11_2009", # Bug 1797751
+]
+
+["browser_net_har_import.js"]
+
+["browser_net_har_import_no-mime.js"]
+
+["browser_net_har_multipage.js"]
+
+["browser_net_har_post_data.js"]
+
+["browser_net_har_post_data_on_get.js"]
+
+["browser_net_har_throttle_upload.js"]
diff --git a/devtools/client/netmonitor/src/har/test/browser_harautomation_simple.js b/devtools/client/netmonitor/src/har/test/browser_harautomation_simple.js
new file mode 100644
index 0000000000..e174c3ac26
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_harautomation_simple.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const HAR_FILENAME = "test_filename.har";
+
+// We expect the HAR file to be created on reload in profD/har/logs
+const HAR_PATH = ["har", "logs", HAR_FILENAME];
+
+/**
+ * Smoke test for automated HAR export.
+ * Note that the `enableAutoExportToFile` is set from browser-harautomation.ini
+ * because the preference needs to be set before starting the browser.
+ */
+add_task(async function () {
+  // Set a simple test filename for the exported HAR.
+  await pushPref("devtools.netmonitor.har.defaultFileName", "test_filename");
+
+  const tab = await addTab(SIMPLE_URL);
+  const toolbox = await gDevTools.showToolboxForTab(tab, {
+    toolId: "inspector",
+  });
+
+  await reloadBrowser();
+
+  info("Wait until the HAR file is created in the profile directory");
+  const harFile = new FileUtils.File(
+    PathUtils.join(PathUtils.profileDir, ...HAR_PATH)
+  );
+
+  await waitUntil(() => harFile.exists());
+  ok(harFile.exists(), "HAR file was automatically created");
+
+  await toolbox.destroy();
+  await removeTab(tab);
+});
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js b/devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js
new file mode 100644
index 0000000000..bcbb4bef2a
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_copy_all_as_har.js
@@ -0,0 +1,224 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Basic tests for exporting Network panel content into HAR format.
+ */
+
+const EXPECTED_REQUEST_HEADER_COUNT = 9;
+const EXPECTED_RESPONSE_HEADER_COUNT = 6;
+
+add_task(async function () {
+  // Disable tcp fast open, because it is setting a response header indicator
+  // (bug 1352274). TCP Fast Open is not present on all platforms therefore the
+  // number of response headers will vary depending on the platform.
+  await pushPref("network.tcp.tcp_fastopen_enable", false);
+  const { tab, monitor, toolbox } = await initNetMonitor(SIMPLE_URL, {
+    requestCount: 1,
+  });
+
+  info("Starting test... ");
+
+  await testSimpleReload({ tab, monitor, toolbox });
+  await testResponseBodyLimits({ tab, monitor, toolbox });
+  await testManyReloads({ tab, monitor, toolbox });
+  await testClearedRequests({ tab, monitor, toolbox });
+
+  // Do not use teardown(monitor) as testClearedRequests register broken requests
+  // which never complete and would block on waitForAllNetworkUpdateEvents
+  await closeTabAndToolbox();
+});
+
+async function testSimpleReload({ tab, monitor, toolbox }) {
+  info("Test with a simple page reload");
+
+  const har = await reloadAndCopyAllAsHar({ tab, monitor, toolbox });
+
+  // Check out HAR log
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.creator.name, "Firefox", "The creator field must be set");
+  is(har.log.browser.name, "Firefox", "The browser field must be set");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  const page = har.log.pages[0];
+
+  is(page.title, SIMPLE_URL, "There must be some page title");
+  ok("onContentLoad" in page.pageTimings, "There must be onContentLoad time");
+  ok("onLoad" in page.pageTimings, "There must be onLoad time");
+
+  const entry = har.log.entries[0];
+  assertNavigationRequestEntry(entry);
+
+  info("We get the response content and timings when doing a simple reload");
+  isnot(entry.response.content.text, undefined, "Check response body");
+  is(entry.response.content.text.length, 465, "Response body is complete");
+  isnot(entry.timings, undefined, "Check timings");
+}
+
+async function testResponseBodyLimits({ tab, monitor, toolbox }) {
+  info("Test response body limit (non zero).");
+  await pushPref("devtools.netmonitor.responseBodyLimit", 10);
+  let har = await reloadAndCopyAllAsHar({ tab, monitor, toolbox });
+  let entry = har.log.entries[0];
+  is(entry.response.content.text.length, 10, "Response body must be truncated");
+
+  info("Test response body limit (zero).");
+  await pushPref("devtools.netmonitor.responseBodyLimit", 0);
+  har = await reloadAndCopyAllAsHar({ tab, monitor, toolbox });
+  entry = har.log.entries[0];
+  is(
+    entry.response.content.text.length,
+    465,
+    "Response body must not be truncated"
+  );
+}
+
+async function testManyReloads({ tab, monitor, toolbox }) {
+  const har = await reloadAndCopyAllAsHar({
+    tab,
+    monitor,
+    toolbox,
+    reloadTwice: true,
+  });
+  // In most cases, we will have two requests, but sometimes,
+  // the first one might be missing as we couldn't fetch any lazy data for it.
+  Assert.greaterOrEqual(
+    har.log.entries.length,
+    1,
+    "There must be at least one request"
+  );
+  info(
+    "Assert the first navigation request which has been cancelled by the second reload"
+  );
+  // Requests may come out of order, so try to find the bogus cancelled request
+  let entry = har.log.entries.find(e => e.response.status == 0);
+  if (entry) {
+    ok(entry, "Found the cancelled request");
+    is(entry.request.method, "GET", "Method is set");
+    is(entry.request.url, SIMPLE_URL, "URL is set");
+    // We always get the following headers:
+    // "Host", "User-agent", "Accept", "Accept-Language", "Accept-Encoding", "Connection"
+    // but are missing the three last headers:
+    // "Upgrade-Insecure-Requests", "Pragma", "Cache-Control"
+    is(entry.request.headers.length, 6, "But headers are partialy populated");
+    is(entry.response.status, 0, "And status is set to 0");
+  }
+
+  entry = har.log.entries.find(e => e.response.status != 0);
+  assertNavigationRequestEntry(entry);
+}
+
+async function testClearedRequests({ tab, monitor, toolbox }) {
+  info("Navigate to an empty page");
+  const topDocumentURL =
+    "https://example.org/document-builder.sjs?html=empty-document";
+  const iframeURL =
+    "https://example.org/document-builder.sjs?html=" +
+    encodeURIComponent(
+      `iframe<script>fetch("/document-builder.sjs?html=iframe-request")</script>`
+    );
+
+  await waitForAllNetworkUpdateEvents();
+  await navigateTo(topDocumentURL);
+
+  info("Create an iframe doing a request and remove the iframe.");
+  info(
+    "Doing this, should notify a network request that is destroyed on the server side"
+  );
+  const onNetworkEvents = waitForNetworkEvents(monitor, 2);
+  await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [iframeURL],
+    async function (_iframeURL) {
+      const iframe = content.document.createElement("iframe");
+      iframe.setAttribute("src", _iframeURL);
+      content.document.body.appendChild(iframe);
+    }
+  );
+  // Wait for the two request to be processed (iframe doc + fetch requests)
+  // before removing the iframe so that the netmonitor is able to fetch
+  // all lazy data without throwing
+  await onNetworkEvents;
+  await waitForAllNetworkUpdateEvents();
+
+  info("Remove the iframe so that lazy request data are freed");
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.document.querySelector("iframe").remove();
+  });
+
+  // HAR will try to re-fetch lazy data and may throw on the iframe fetch request.
+  // This subtest is meants to verify we aren't throwing here and HAR export
+  // works fine, even if some requests can't be fetched.
+  const har = await copyAllAsHARWithContextMenu(monitor);
+  is(har.log.entries.length, 2, "There must be two requests");
+  is(
+    har.log.entries[0].request.url,
+    topDocumentURL,
+    "First request is for the top level document"
+  );
+  is(
+    har.log.entries[1].request.url,
+    iframeURL,
+    "Second request is for the iframe"
+  );
+  info(
+    "The fetch request doesn't appear in HAR export, because its lazy data is freed and we completely ignore the request."
+  );
+}
+
+function assertNavigationRequestEntry(entry) {
+  info("Assert that the entry relates to the navigation request");
+  Assert.greater(entry.time, 0, "Check the total time");
+  is(entry.request.method, "GET", "Check the method");
+  is(entry.request.url, SIMPLE_URL, "Check the URL");
+  is(
+    entry.request.headers.length,
+    EXPECTED_REQUEST_HEADER_COUNT,
+    "Check number of request headers"
+  );
+  is(entry.response.status, 200, "Check response status");
+  is(entry.response.statusText, "OK", "Check response status text");
+  is(
+    entry.response.headers.length,
+    EXPECTED_RESPONSE_HEADER_COUNT,
+    "Check number of response headers"
+  );
+  is(
+    entry.response.content.mimeType,
+    "text/html",
+    "Check response content type"
+  );
+}
+/**
+ * Reload the page and copy all as HAR.
+ */
+async function reloadAndCopyAllAsHar({
+  tab,
+  monitor,
+  toolbox,
+  reloadTwice = false,
+}) {
+  const { store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  const onNetworkEvent = waitForNetworkEvents(monitor, 1);
+  const { onDomCompleteResource } =
+    await waitForNextTopLevelDomCompleteResource(toolbox.commands);
+
+  if (reloadTwice) {
+    reloadBrowser();
+  }
+  await reloadBrowser();
+
+  info("Waiting for network events");
+  await onNetworkEvent;
+  info("Waiting for DOCUMENT_EVENT dom-complete resource");
+  await onDomCompleteResource;
+
+  return copyAllAsHARWithContextMenu(monitor);
+}
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_import.js b/devtools/client/netmonitor/src/har/test/browser_net_har_import.js
new file mode 100644
index 0000000000..44ae3a8e16
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_import.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests for importing HAR data.
+ */
+add_task(async () => {
+  const { tab, monitor } = await initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_import-test-page.html",
+    { requestCount: 1 }
+  );
+
+  info("Starting test... ");
+
+  const { actions, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+  const { HarImporter } = windowRequire(
+    "devtools/client/netmonitor/src/har/har-importer"
+  );
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Execute one POST request on the page and wait till its done.
+  const wait = waitForNetworkEvents(monitor, 3);
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
+    await content.wrappedJSObject.executeTest();
+  });
+  await wait;
+
+  // Copy HAR into the clipboard
+  const json1 = await copyAllAsHARWithContextMenu(monitor, { asString: true });
+
+  // Import HAR string
+  const importer = new HarImporter(actions);
+  importer.import(json1);
+
+  // Copy HAR into the clipboard again
+  const json2 = await copyAllAsHARWithContextMenu(monitor, { asString: true });
+
+  // Compare exported HAR data
+  const har1 = JSON.parse(json1);
+  const har2 = JSON.parse(json2);
+
+  // Explicit tests
+  is(har2.log.entries.length, 3, "There must be expected number of requests");
+  is(
+    har2.log.pages[0].title,
+    HAR_EXAMPLE_URL + "html_har_import-test-page.html",
+    "There must be some page title"
+  );
+  ok(
+    !!har2.log.entries[0].request.headers.length,
+    "There must be some request headers"
+  );
+  ok(
+    !!har2.log.entries[0].response.headers.length,
+    "There must be some response headers"
+  );
+  is(
+    har2.log.entries[1].response.cookies.length,
+    3,
+    "There must be expected number of cookies"
+  );
+  is(
+    har2.log.entries[1]._securityState,
+    "insecure",
+    "There must be expected security state"
+  );
+  is(har2.log.entries[2].response.status, 304, "There must be expected status");
+
+  // Complex test comparing exported & imported HARs.
+  ok(compare(har1.log, har2.log, ["log"]), "Exported HAR must be the same");
+
+  // Clean up
+  return teardown(monitor);
+});
+
+/**
+ * Check equality of HAR files.
+ */
+function compare(obj1, obj2, path) {
+  const keys1 = Object.getOwnPropertyNames(obj1).sort();
+  const keys2 = Object.getOwnPropertyNames(obj2).sort();
+
+  const name = path.join("/");
+
+  is(
+    keys1.length,
+    keys2.length,
+    "There must be the same number of keys for: " + name
+  );
+  if (keys1.length != keys2.length) {
+    return false;
+  }
+
+  is(keys1.join(), keys2.join(), "There must be the same keys for: " + name);
+  if (keys1.join() != keys2.join()) {
+    return false;
+  }
+
+  // Page IDs are generated and don't have to be the same after import.
+  const ignore = [
+    "log/entries/0/pageref",
+    "log/entries/1/pageref",
+    "log/entries/2/pageref",
+    "log/pages/0/id",
+    "log/pages/1/id",
+    "log/pages/2/id",
+  ];
+
+  let result = true;
+  for (let i = 0; i < keys1.length; i++) {
+    const key = keys1[i];
+    const prop1 = obj1[key];
+    const prop2 = obj2[key];
+
+    if (prop1 instanceof Array) {
+      if (!(prop2 instanceof Array)) {
+        ok(false, "Arrays are not the same " + name);
+        result = false;
+        break;
+      }
+      if (!compare(prop1, prop2, path.concat(key))) {
+        result = false;
+        break;
+      }
+    } else if (prop1 instanceof Object) {
+      if (!(prop2 instanceof Object)) {
+        ok(false, "Objects are not the same in: " + name);
+        result = false;
+        break;
+      }
+      if (!compare(prop1, prop2, path.concat(key))) {
+        result = false;
+        break;
+      }
+    } else if (prop1 !== prop2) {
+      const propName = name + "/" + key;
+      if (!ignore.includes(propName)) {
+        is(prop1, prop2, "Values are not the same: " + propName);
+        result = false;
+        break;
+      }
+    }
+  }
+
+  return result;
+}
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_import_no-mime.js b/devtools/client/netmonitor/src/har/test/browser_net_har_import_no-mime.js
new file mode 100644
index 0000000000..91c5160217
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_import_no-mime.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests importing HAR with missing `response.content.mimeType` does not crash the netmonitor.
+ */
+add_task(async () => {
+  const { monitor } = await initNetMonitor(SIMPLE_URL, {
+    requestCount: 1,
+  });
+
+  info("Starting test... ");
+
+  const { document, actions, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  const { HarImporter } = windowRequire(
+    "devtools/client/netmonitor/src/har/har-importer"
+  );
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Invalid HAR json which should contain `entries[0].response.content.mimeType`
+  const invalidHarJSON = {
+    log: {
+      version: "1.2",
+      pages: [
+        {
+          title: "bla",
+        },
+      ],
+      entries: [
+        {
+          request: {
+            method: "POST",
+            url: "https://bla.com",
+            httpVersion: "",
+            headers: [],
+            cookies: [],
+            queryString: [],
+          },
+          response: {
+            content: {
+              size: 1231,
+              text: '{"requests":[{"uri":"https://bla.com"}]}',
+            },
+            headers: [],
+          },
+          timings: {},
+          cache: {},
+        },
+      ],
+    },
+  };
+
+  // Import invalid Har file
+  const importer = new HarImporter(actions);
+  importer.import(JSON.stringify(invalidHarJSON));
+
+  const waitForResponsePanelOpen = waitUntil(() =>
+    document.querySelector("#response-panel")
+  );
+
+  // Open the response details panel
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" },
+    document.querySelector(".request-list-item")
+  );
+  clickOnSidebarTab(document, "response");
+
+  await waitForResponsePanelOpen;
+  ok(true, "The response panel opened");
+
+  // Clean up
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_multipage.js b/devtools/client/netmonitor/src/har/test/browser_net_har_multipage.js
new file mode 100644
index 0000000000..1761e2042c
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_multipage.js
@@ -0,0 +1,165 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+requestLongerTimeout(2);
+
+const MULTIPAGE_IFRAME_URL = HAR_EXAMPLE_URL + "html_har_multipage_iframe.html";
+const MULTIPAGE_PAGE_URL = HAR_EXAMPLE_URL + "html_har_multipage_page.html";
+
+/**
+ * Tests HAR export with navigations and multipage support
+ */
+add_task(async function () {
+  await testHARWithNavigation({ enableMultipage: false, filter: false });
+  await testHARWithNavigation({ enableMultipage: true, filter: false });
+  await testHARWithNavigation({ enableMultipage: false, filter: true });
+  await testHARWithNavigation({ enableMultipage: true, filter: true });
+});
+
+async function testHARWithNavigation({ enableMultipage, filter }) {
+  await pushPref("devtools.netmonitor.persistlog", true);
+  await pushPref("devtools.netmonitor.har.multiple-pages", enableMultipage);
+
+  const { tab, monitor } = await initNetMonitor(MULTIPAGE_PAGE_URL + "?page1", {
+    requestCount: 1,
+  });
+
+  info("Starting test... ");
+
+  const { store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  info("Perform 3 additional requests");
+  let onNetworkEvents = waitForNetworkEvents(monitor, 3);
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.wrappedJSObject.sendRequests(3);
+  });
+  await onNetworkEvents;
+
+  info("Navigate to a second page where we will not perform any extra request");
+  onNetworkEvents = waitForNetworkEvents(monitor, 1);
+  await navigateTo(MULTIPAGE_PAGE_URL + "?page2");
+  await onNetworkEvents;
+
+  info("Navigate to a third page where we will not perform any extra request");
+  onNetworkEvents = waitForNetworkEvents(monitor, 1);
+  await navigateTo(MULTIPAGE_PAGE_URL + "?page3");
+  await onNetworkEvents;
+
+  info("Perform 2 additional requests");
+  onNetworkEvents = waitForNetworkEvents(monitor, 2);
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.wrappedJSObject.sendRequests(2);
+  });
+  await onNetworkEvents;
+
+  info("Create an iframe which will perform 2 additional requests");
+  onNetworkEvents = waitForNetworkEvents(monitor, 2);
+  await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [MULTIPAGE_IFRAME_URL],
+    async function (url) {
+      const iframe = content.document.createElement("iframe");
+      const onLoad = new Promise(resolve =>
+        iframe.addEventListener("load", resolve, { once: true })
+      );
+      content.content.document.body.appendChild(iframe);
+      iframe.setAttribute("src", url);
+      await onLoad;
+    }
+  );
+  await onNetworkEvents;
+
+  if (filter) {
+    info("Start filtering requests");
+    store.dispatch(Actions.setRequestFilterText("?request"));
+  }
+
+  info("Trigger Copy All As HAR from the context menu");
+  const har = await copyAllAsHARWithContextMenu(monitor);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+
+  if (enableMultipage) {
+    is(har.log.pages.length, 3, "There must be three pages");
+  } else {
+    is(har.log.pages.length, 1, "There must be one page");
+  }
+
+  if (!filter) {
+    // Expect 9 requests:
+    // - 3 requests performed with sendRequests on the first page
+    // - 1 navigation request to the second page
+    // - 1 navigation request to the third page
+    // - 2 requests performed with sendRequests on the third page
+    // - 1 request to load an iframe on the third page
+    // - 1 request from the iframe on the third page
+    is(har.log.entries.length, 9, "There must be 9 requests");
+  } else {
+    // Same but we only expect the fetch requests
+    is(har.log.entries.length, 6, "There must be 6 requests");
+  }
+
+  if (enableMultipage) {
+    // With multipage enabled, check that the page entries are valid and that
+    // requests are referencing the expected page id.
+    assertPageDetails(
+      har.log.pages[0],
+      "page_0",
+      `${MULTIPAGE_PAGE_URL}?page1`
+    );
+    assertPageRequests(har.log.entries, 0, 2, har.log.pages[0].id);
+
+    assertPageDetails(
+      har.log.pages[1],
+      "page_1",
+      `${MULTIPAGE_PAGE_URL}?page2`
+    );
+    if (filter) {
+      // When filtering, we don't expect any request to match page_1
+    } else {
+      assertPageRequests(har.log.entries, 3, 3, har.log.pages[1].id);
+    }
+
+    assertPageDetails(
+      har.log.pages[2],
+      "page_2",
+      `${MULTIPAGE_PAGE_URL}?page3`
+    );
+    if (filter) {
+      assertPageRequests(har.log.entries, 3, 5, har.log.pages[2].id);
+    } else {
+      assertPageRequests(har.log.entries, 4, 8, har.log.pages[2].id);
+    }
+  } else {
+    is(har.log.pages[0].id, "page_1");
+    // Without multipage, all requests are associated with the only page entry.
+    for (const entry of har.log.entries) {
+      is(entry.pageref, "page_1");
+    }
+  }
+
+  // Clean up
+  return teardown(monitor);
+}
+
+function assertPageDetails(page, expectedId, expectedTitle) {
+  is(page.id, expectedId, "Page has the expected id");
+  is(page.title, expectedTitle, "Page has the expected title");
+}
+
+function assertPageRequests(entries, startIndex, endIndex, expectedPageId) {
+  for (let i = startIndex; i < endIndex + 1; i++) {
+    const entry = entries[i];
+    is(
+      entry.pageref,
+      expectedPageId,
+      `Entry ${i} is attached to page id: ${expectedPageId}`
+    );
+  }
+}
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_post_data.js b/devtools/client/netmonitor/src/har/test/browser_net_har_post_data.js
new file mode 100644
index 0000000000..0640364a39
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_post_data.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests for exporting POST data into HAR format.
+ */
+add_task(async function () {
+  const { tab, monitor } = await initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_post-data-test-page.html",
+    { requestCount: 1 }
+  );
+
+  info("Starting test... ");
+
+  const { store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Execute one POST request on the page and wait till its done.
+  const wait = waitForNetworkEvents(monitor, 1);
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.wrappedJSObject.executeTest();
+  });
+  await wait;
+
+  // Copy HAR into the clipboard (asynchronous).
+  const har = await copyAllAsHARWithContextMenu(monitor);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  const entry = har.log.entries[0];
+  is(
+    entry.request.postData.mimeType,
+    "application/json",
+    "Check post data content type"
+  );
+  is(
+    entry.request.postData.text,
+    "{'first': 'John', 'last': 'Doe'}",
+    "Check post data payload"
+  );
+
+  // Clean up
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_post_data_on_get.js b/devtools/client/netmonitor/src/har/test/browser_net_har_post_data_on_get.js
new file mode 100644
index 0000000000..206fc43da6
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_post_data_on_get.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests for exporting POST data into HAR format.
+ */
+add_task(async function () {
+  const { tab, monitor } = await initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_post-data-test-page.html",
+    { requestCount: 1 }
+  );
+
+  info("Starting test... ");
+
+  const { store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Execute one GET request on the page and wait till its done.
+  const wait = waitForNetworkEvents(monitor, 1);
+  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
+    content.wrappedJSObject.executeTest3();
+  });
+  await wait;
+
+  // Copy HAR into the clipboard (asynchronous).
+  const har = await copyAllAsHARWithContextMenu(monitor);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  const entry = har.log.entries[0];
+
+  is(entry.request.postData, undefined, "Check post data is not present");
+
+  // Clean up
+  return teardown(monitor);
+});
diff --git a/devtools/client/netmonitor/src/har/test/browser_net_har_throttle_upload.js b/devtools/client/netmonitor/src/har/test/browser_net_har_throttle_upload.js
new file mode 100644
index 0000000000..24f7d482ca
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/browser_net_har_throttle_upload.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test timing of upload when throttling.
+
+"use strict";
+
+add_task(async function () {
+  await throttleUploadTest(true);
+  await throttleUploadTest(false);
+});
+
+async function throttleUploadTest(actuallyThrottle) {
+  const { tab, monitor } = await initNetMonitor(
+    HAR_EXAMPLE_URL + "html_har_post-data-test-page.html",
+    { requestCount: 1 }
+  );
+
+  info("Starting test... (actuallyThrottle = " + actuallyThrottle + ")");
+
+  const { connector, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  const size = 4096;
+  const uploadSize = actuallyThrottle ? size / 3 : 0;
+
+  const throttleProfile = {
+    latency: 0,
+    download: 200000,
+    upload: uploadSize,
+  };
+
+  info("sending throttle request");
+  await connector.updateNetworkThrottling(true, throttleProfile);
+
+  // Execute one POST request on the page and wait till its done.
+  const wait = waitForNetworkEvents(monitor, 1);
+  await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [{ size }],
+    async function (args) {
+      content.wrappedJSObject.executeTest2(args.size);
+    }
+  );
+  await wait;
+
+  // Copy HAR into the clipboard (asynchronous).
+  const har = await copyAllAsHARWithContextMenu(monitor);
+
+  // Check out the HAR log.
+  isnot(har.log, null, "The HAR log must exist");
+  is(har.log.pages.length, 1, "There must be one page");
+  is(har.log.entries.length, 1, "There must be one request");
+
+  const entry = har.log.entries[0];
+  is(entry.request.postData.text, "x".repeat(size), "Check post data payload");
+
+  const wasTwoSeconds = entry.timings.send >= 2000;
+  if (actuallyThrottle) {
+    ok(wasTwoSeconds, "upload should have taken more than 2 seconds");
+  } else {
+    ok(!wasTwoSeconds, "upload should not have taken more than 2 seconds");
+  }
+
+  // Clean up
+  await teardown(monitor);
+}
diff --git a/devtools/client/netmonitor/src/har/test/head.js b/devtools/client/netmonitor/src/har/test/head.js
new file mode 100644
index 0000000000..b41ea580fd
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/head.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local", "args": "none"}] */
+/* import-globals-from ../../../test/head.js */
+
+// Load the NetMonitor head.js file to share its API.
+var netMonitorHead =
+  "chrome://mochitests/content/browser/devtools/client/netmonitor/test/head.js";
+Services.scriptloader.loadSubScript(netMonitorHead, this);
+
+// Directory with HAR related test files.
+const HAR_EXAMPLE_URL =
+  "http://example.com/browser/devtools/client/netmonitor/src/har/test/";
+
+/**
+ * Trigger a "copy all as har" from the context menu of the requests list.
+
+ * @param {Object} monitor
+ *        The network monitor object
+ */
+async function copyAllAsHARWithContextMenu(monitor, { asString = false } = {}) {
+  const { HarMenuUtils } = monitor.panelWin.windowRequire(
+    "devtools/client/netmonitor/src/har/har-menu-utils"
+  );
+
+  info("Open the context menu on the first visible request.");
+  const firstRequest =
+    monitor.panelWin.document.querySelectorAll(".request-list-item")[0];
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
+  EventUtils.sendMouseEvent({ type: "contextmenu" }, firstRequest);
+
+  info("Trigger Copy All As HAR from the context menu");
+  const onHarCopyDone = HarMenuUtils.once("copy-all-as-har-done");
+  await selectContextMenuItem(monitor, "request-list-context-copy-all-as-har");
+  const jsonString = await onHarCopyDone;
+
+  if (asString) {
+    return jsonString;
+  }
+  return JSON.parse(jsonString);
+}
diff --git a/devtools/client/netmonitor/src/har/test/html_har_import-test-page.html b/devtools/client/netmonitor/src/har/test/html_har_import-test-page.html
new file mode 100644
index 0000000000..04d5ec33ba
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/html_har_import-test-page.html
@@ -0,0 +1,51 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor Test Page</title>
+  </head>
+
+  <body>
+    <p>HAR import test</p>
+
+    <script type="text/javascript">
+      /* exported executeTest, executeTest2, executeTest3 */
+      "use strict";
+
+      function post(address, data) {
+        return new Promise(resolve => {
+          const xhr = new XMLHttpRequest();
+          xhr.open("POST", address, true);
+          xhr.setRequestHeader("Content-Type", "application/json");
+          xhr.onload = resolve;
+          xhr.send(data);
+        });
+      }
+
+      function get(address) {
+        return new Promise(resolve => {
+          const xhr = new XMLHttpRequest();
+          xhr.open("GET", address);
+          xhr.onload = resolve;
+          xhr.send();
+        });
+      }
+
+      async function executeTest() {
+        const url = "html_har_import-test-page.html";
+        const data = "{'first': 'John', 'last': 'Doe'}";
+        await post(url, data);
+        await get("sjs_cookies-test-server.sjs");
+        await get("sjs_cache-test-server.sjs");
+      }
+  </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/src/har/test/html_har_multipage_iframe.html b/devtools/client/netmonitor/src/har/test/html_har_multipage_iframe.html
new file mode 100644
index 0000000000..4e0fc96344
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/html_har_multipage_iframe.html
@@ -0,0 +1,24 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor HAR Multipage test iframe</title>
+  </head>
+
+  <body>
+    <p>HAR Multipage test iframe</p>
+
+    <script type="text/javascript">
+      "use strict";
+      fetch("?request-from-iframe");
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/src/har/test/html_har_multipage_page.html b/devtools/client/netmonitor/src/har/test/html_har_multipage_page.html
new file mode 100644
index 0000000000..d36fbca52b
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/html_har_multipage_page.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>HAR Multipage test page</title>
+  </head>
+
+  <body>
+    <p>HAR Multipage test page</p>
+
+    <script type="text/javascript">
+      /* exported sendRequests */
+      "use strict";
+
+      async function sendRequests(requestsCount) {
+        for (let i = 0; i < requestsCount; i++) {
+          fetch("?request" + i);
+        }
+      }
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/src/har/test/html_har_post-data-test-page.html b/devtools/client/netmonitor/src/har/test/html_har_post-data-test-page.html
new file mode 100644
index 0000000000..5e42c6139d
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/html_har_post-data-test-page.html
@@ -0,0 +1,55 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>Network Monitor Test Page</title>
+  </head>
+
+  <body>
+    <p>HAR POST data test</p>
+
+    <script type="text/javascript">
+      /* exported executeTest, executeTest2, executeTest3 */
+      "use strict";
+
+      function post(address, data) {
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", address, true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.send(data);
+      }
+
+      function get(address) {
+        const xhr = new XMLHttpRequest();
+        xhr.open("GET", address);
+        xhr.send();
+      }
+
+      function executeTest() {
+        const url = "html_har_post-data-test-page.html";
+        const data = "{'first': 'John', 'last': 'Doe'}";
+        post(url, data);
+      }
+
+      function executeTest2(size) {
+        const url = "html_har_post-data-test-page.html";
+        const data = "x".repeat(size);
+        post(url, data);
+      }
+
+      function executeTest3(size) {
+        const url = "html_har_post-data-test-page.html";
+        get(url);
+      }
+
+    </script>
+  </body>
+
+</html>
diff --git a/devtools/client/netmonitor/src/har/test/sjs_cache-test-server.sjs b/devtools/client/netmonitor/src/har/test/sjs_cache-test-server.sjs
new file mode 100644
index 0000000000..66081fe1bb
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/sjs_cache-test-server.sjs
@@ -0,0 +1,14 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 304, "Not Modified");
+  response.setHeader(
+    "Cache-Control",
+    "no-transform,public,max-age=300,s-maxage=900"
+  );
+  response.setHeader("Expires", "Thu, 01 Dec 2100 20:00:00 GMT");
+  response.setHeader("Content-Type", "text/plain; charset=utf-8", false);
+  response.write("Hello from cache!");
+}
diff --git a/devtools/client/netmonitor/src/har/test/sjs_cookies-test-server.sjs b/devtools/client/netmonitor/src/har/test/sjs_cookies-test-server.sjs
new file mode 100644
index 0000000000..a86a0f13cd
--- /dev/null
+++ b/devtools/client/netmonitor/src/har/test/sjs_cookies-test-server.sjs
@@ -0,0 +1,10 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+function handleRequest(request, response) {
+  response.setHeader("Set-Cookie", "tom=cool; Max-Age=10; HttpOnly", true);
+  response.setHeader("Set-Cookie", "bob=true; Max-Age=10; HttpOnly", true);
+  response.setHeader("Set-Cookie", "foo=bar; Max-Age=10; HttpOnly", true);
+  response.write("Hello world!");
+}
diff --git a/devtools/client/netmonitor/src/middleware/batching.js b/devtools/client/netmonitor/src/middleware/batching.js
new file mode 100644
index 0000000000..9d8c57084c
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/batching.js
@@ -0,0 +1,146 @@
+/* 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,
+  BATCH_FLUSH,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const REQUESTS_REFRESH_RATE = 50; // ms
+
+/**
+ * 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.type === BATCH_FLUSH) {
+        return flushQueue();
+      }
+
+      if (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 flushQueue() {
+      if (flushTask) {
+        flushTask.runNow();
+      }
+    }
+
+    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;
diff --git a/devtools/client/netmonitor/src/middleware/event-telemetry.js b/devtools/client/netmonitor/src/middleware/event-telemetry.js
new file mode 100644
index 0000000000..026dfab4ba
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/event-telemetry.js
@@ -0,0 +1,192 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  TOGGLE_REQUEST_FILTER_TYPE,
+  ENABLE_REQUEST_FILTER_TYPE_ONLY,
+  SET_REQUEST_FILTER_TEXT,
+  SELECT_DETAILS_PANEL_TAB,
+  SEND_CUSTOM_REQUEST,
+  ENABLE_PERSISTENT_LOGS,
+  MSG_SELECT,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  CHANGE_NETWORK_THROTTLING,
+} = require("resource://devtools/client/shared/components/throttling/actions.js");
+
+/**
+ * Event telemetry middleware is responsible for logging
+ * various events to telemetry. This helps to track Network
+ * panel usage.
+ */
+function eventTelemetryMiddleware(connector, telemetry) {
+  return store => next => action => {
+    const oldState = store.getState();
+    const res = next(action);
+    const toolbox = connector.getToolbox();
+    if (!toolbox) {
+      return res;
+    }
+
+    if (action.skipTelemetry) {
+      return res;
+    }
+
+    const state = store.getState();
+
+    const filterChangeActions = [
+      TOGGLE_REQUEST_FILTER_TYPE,
+      ENABLE_REQUEST_FILTER_TYPE_ONLY,
+      SET_REQUEST_FILTER_TEXT,
+    ];
+
+    // Record telemetry event when filter changes.
+    if (filterChangeActions.includes(action.type)) {
+      filterChange({
+        action,
+        state,
+        oldState,
+        telemetry,
+      });
+    }
+
+    // Record telemetry event when side panel is selected.
+    if (action.type == SELECT_DETAILS_PANEL_TAB) {
+      sidePanelChange({
+        state,
+        oldState,
+        telemetry,
+      });
+    }
+
+    // Record telemetry event when a request is resent.
+    if (action.type == SEND_CUSTOM_REQUEST) {
+      sendCustomRequest({
+        telemetry,
+      });
+    }
+
+    // Record telemetry event when throttling is changed.
+    if (action.type == CHANGE_NETWORK_THROTTLING) {
+      throttlingChange({
+        action,
+        telemetry,
+      });
+    }
+
+    // Record telemetry event when log persistence changes.
+    if (action.type == ENABLE_PERSISTENT_LOGS) {
+      persistenceChange({
+        telemetry,
+        state,
+      });
+    }
+
+    // Record telemetry event when message is selected.
+    if (action.type == MSG_SELECT) {
+      selectMessage({
+        telemetry,
+      });
+    }
+
+    return res;
+  };
+}
+
+/**
+ * This helper function is executed when filter related action is fired.
+ * It's responsible for recording "filters_changed" telemetry event.
+ */
+function filterChange({ action, state, oldState, telemetry }) {
+  const oldFilterState = oldState.filters;
+  const filterState = state.filters;
+  const activeFilters = [];
+  const inactiveFilters = [];
+
+  for (const [key, value] of Object.entries(filterState.requestFilterTypes)) {
+    if (value) {
+      activeFilters.push(key);
+    } else {
+      inactiveFilters.push(key);
+    }
+  }
+
+  let trigger;
+  if (
+    action.type === TOGGLE_REQUEST_FILTER_TYPE ||
+    action.type === ENABLE_REQUEST_FILTER_TYPE_ONLY
+  ) {
+    trigger = action.filter;
+  } else if (action.type === SET_REQUEST_FILTER_TEXT) {
+    if (
+      oldFilterState.requestFilterText !== "" &&
+      filterState.requestFilterText !== ""
+    ) {
+      return;
+    }
+
+    trigger = "text";
+  }
+
+  telemetry.recordEvent("filters_changed", "netmonitor", null, {
+    trigger,
+    active: activeFilters.join(","),
+    inactive: inactiveFilters.join(","),
+  });
+}
+
+/**
+ * This helper function is executed when side panel is selected.
+ * It's responsible for recording "sidepanel_tool_changed"
+ * telemetry event.
+ */
+function sidePanelChange({ state, oldState, telemetry }) {
+  telemetry.recordEvent("sidepanel_changed", "netmonitor", null, {
+    oldpanel: oldState.ui.detailsPanelSelectedTab,
+    newpanel: state.ui.detailsPanelSelectedTab,
+  });
+}
+
+/**
+ * This helper function is executed when a request is resent.
+ * It's responsible for recording "edit_resend" telemetry event.
+ */
+function sendCustomRequest({ telemetry }) {
+  telemetry.recordEvent("edit_resend", "netmonitor");
+}
+
+/**
+ * This helper function is executed when network throttling is changed.
+ * It's responsible for recording "throttle_changed" telemetry event.
+ */
+function throttlingChange({ action, telemetry }) {
+  telemetry.recordEvent("throttle_changed", "netmonitor", null, {
+    mode: action.profile,
+  });
+}
+
+/**
+ * This helper function is executed when log persistence is changed.
+ * It's responsible for recording "persist_changed" telemetry event.
+ */
+function persistenceChange({ telemetry, state }) {
+  telemetry.recordEvent(
+    "persist_changed",
+    "netmonitor",
+    String(state.ui.persistentLogsEnabled)
+  );
+}
+
+/**
+ * This helper function is executed when a WS frame is selected.
+ * It's responsible for recording "select_ws_frame" telemetry event.
+ */
+function selectMessage({ telemetry }) {
+  telemetry.recordEvent("select_ws_frame", "netmonitor");
+}
+
+module.exports = eventTelemetryMiddleware;
diff --git a/devtools/client/netmonitor/src/middleware/moz.build b/devtools/client/netmonitor/src/middleware/moz.build
new file mode 100644
index 0000000000..4e551c24c8
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/moz.build
@@ -0,0 +1,11 @@
+# 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",
+    "event-telemetry.js",
+    "prefs.js",
+    "request-blocking.js",
+    "throttling.js",
+)
diff --git a/devtools/client/netmonitor/src/middleware/prefs.js b/devtools/client/netmonitor/src/middleware/prefs.js
new file mode 100644
index 0000000000..6034a95dbf
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/prefs.js
@@ -0,0 +1,116 @@
+/* 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 {
+  ENABLE_REQUEST_FILTER_TYPE_ONLY,
+  RESET_COLUMNS,
+  TOGGLE_COLUMN,
+  TOGGLE_REQUEST_FILTER_TYPE,
+  ENABLE_PERSISTENT_LOGS,
+  DISABLE_BROWSER_CACHE,
+  SET_COLUMNS_WIDTH,
+  WS_TOGGLE_COLUMN,
+  WS_RESET_COLUMNS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * Update the relevant prefs when:
+ *   - a column has been toggled
+ *   - a filter type has been set
+ */
+function prefsMiddleware(store) {
+  return next => action => {
+    const res = next(action);
+    switch (action.type) {
+      case ENABLE_REQUEST_FILTER_TYPE_ONLY:
+      case TOGGLE_REQUEST_FILTER_TYPE:
+        const filters = Object.entries(
+          store.getState().filters.requestFilterTypes
+        )
+          .filter(([type, check]) => check)
+          .map(([type, check]) => type);
+        Services.prefs.setCharPref(
+          "devtools.netmonitor.filters",
+          JSON.stringify(filters)
+        );
+        break;
+      case ENABLE_PERSISTENT_LOGS:
+        const enabled = store.getState().ui.persistentLogsEnabled;
+        Services.prefs.setBoolPref("devtools.netmonitor.persistlog", enabled);
+        break;
+      case DISABLE_BROWSER_CACHE:
+        Services.prefs.setBoolPref(
+          "devtools.cache.disabled",
+          store.getState().ui.browserCacheDisabled
+        );
+        break;
+      case TOGGLE_COLUMN:
+        persistVisibleColumns(store.getState());
+        break;
+      case RESET_COLUMNS:
+        persistVisibleColumns(store.getState());
+        persistColumnsData(store.getState());
+        break;
+      case SET_COLUMNS_WIDTH:
+        persistColumnsData(store.getState());
+        break;
+      case WS_TOGGLE_COLUMN:
+      case WS_RESET_COLUMNS:
+        persistVisibleWebSocketsColumns(store.getState());
+        break;
+    }
+    return res;
+  };
+}
+
+/**
+ * Store list of visible columns into preferences.
+ */
+function persistVisibleColumns(state) {
+  const visibleColumns = [];
+  const { columns } = state.ui;
+  for (const column in columns) {
+    if (columns[column]) {
+      visibleColumns.push(column);
+    }
+  }
+
+  Services.prefs.setCharPref(
+    "devtools.netmonitor.visibleColumns",
+    JSON.stringify(visibleColumns)
+  );
+}
+
+/**
+ * Store list of visible columns into preferences.
+ */
+function persistVisibleWebSocketsColumns(state) {
+  const visibleColumns = [];
+  const { columns } = state.messages;
+  for (const column in columns) {
+    if (columns[column]) {
+      visibleColumns.push(column);
+    }
+  }
+
+  Services.prefs.setCharPref(
+    "devtools.netmonitor.msg.visibleColumns",
+    JSON.stringify(visibleColumns)
+  );
+}
+
+/**
+ * Store columns data (width, min-width, etc.) into preferences.
+ */
+function persistColumnsData(state) {
+  const columnsData = [...state.ui.columnsData.values()];
+  Services.prefs.setCharPref(
+    "devtools.netmonitor.columnsData",
+    JSON.stringify(columnsData)
+  );
+}
+
+module.exports = prefsMiddleware;
diff --git a/devtools/client/netmonitor/src/middleware/request-blocking.js b/devtools/client/netmonitor/src/middleware/request-blocking.js
new file mode 100644
index 0000000000..bb2a310a8d
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/request-blocking.js
@@ -0,0 +1,58 @@
+/* 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_BLOCKED_URL,
+  REMOVE_BLOCKED_URL,
+  TOGGLE_BLOCKED_URL,
+  UPDATE_BLOCKED_URL,
+  TOGGLE_BLOCKING_ENABLED,
+  DISABLE_MATCHING_URLS,
+  ENABLE_ALL_BLOCKED_URLS,
+  DISABLE_ALL_BLOCKED_URLS,
+  REMOVE_ALL_BLOCKED_URLS,
+  REQUEST_BLOCKING_UPDATE_COMPLETE,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const BLOCKING_EVENTS = [
+  ADD_BLOCKED_URL,
+  REMOVE_BLOCKED_URL,
+  TOGGLE_BLOCKED_URL,
+  UPDATE_BLOCKED_URL,
+  TOGGLE_BLOCKING_ENABLED,
+  DISABLE_MATCHING_URLS,
+  ENABLE_ALL_BLOCKED_URLS,
+  DISABLE_ALL_BLOCKED_URLS,
+  REMOVE_ALL_BLOCKED_URLS,
+];
+
+/**
+ * This middleware is responsible for syncing the list of blocking patterns/urls with the backed.
+ * It utilizes the NetworkCommand and `setBlockedUrls` function to sent the current list to the server
+ * every time it's been modified.
+ */
+function requestBlockingMiddleware(commands) {
+  return store => next => async action => {
+    const res = next(action);
+
+    if (BLOCKING_EVENTS.includes(action.type)) {
+      const { blockedUrls, blockingEnabled } = store.getState().requestBlocking;
+      const urls = blockingEnabled
+        ? blockedUrls.reduce((arr, { enabled, url }) => {
+            if (enabled) {
+              arr.push(url);
+            }
+            return arr;
+          }, [])
+        : [];
+      await commands.networkCommand.setBlockedUrls(urls);
+      store.dispatch({ type: REQUEST_BLOCKING_UPDATE_COMPLETE });
+    }
+    return res;
+  };
+}
+
+module.exports = requestBlockingMiddleware;
diff --git a/devtools/client/netmonitor/src/middleware/throttling.js b/devtools/client/netmonitor/src/middleware/throttling.js
new file mode 100644
index 0000000000..30f5a9b5f4
--- /dev/null
+++ b/devtools/client/netmonitor/src/middleware/throttling.js
@@ -0,0 +1,26 @@
+/* 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 {
+  CHANGE_NETWORK_THROTTLING,
+} = require("resource://devtools/client/shared/components/throttling/actions.js");
+
+/**
+ * Network throttling middleware is responsible for
+ * updating/syncing currently connected backend
+ * according to user actions.
+ */
+function throttlingMiddleware(connector) {
+  return store => next => action => {
+    const res = next(action);
+    if (action.type === CHANGE_NETWORK_THROTTLING) {
+      connector.updateNetworkThrottling(action.enabled, action.profile);
+    }
+    return res;
+  };
+}
+
+module.exports = throttlingMiddleware;
diff --git a/devtools/client/netmonitor/src/moz.build b/devtools/client/netmonitor/src/moz.build
new file mode 100644
index 0000000000..b3ba8c5060
--- /dev/null
+++ b/devtools/client/netmonitor/src/moz.build
@@ -0,0 +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/.
+
+DIRS += [
+    "actions",
+    "components",
+    "connector",
+    "har",
+    "middleware",
+    "reducers",
+    "selectors",
+    "utils",
+    "widgets",
+    "workers",
+]
+
+DevToolsModules(
+    "api.js",
+    "app.js",
+    "constants.js",
+    "create-store.js",
+)
diff --git a/devtools/client/netmonitor/src/reducers/batching.js b/devtools/client/netmonitor/src/reducers/batching.js
new file mode 100644
index 0000000000..bc4f02beb2
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/batching.js
@@ -0,0 +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/. */
+
+"use strict";
+
+const {
+  BATCH_ACTIONS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * 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;
diff --git a/devtools/client/netmonitor/src/reducers/filters.js b/devtools/client/netmonitor/src/reducers/filters.js
new file mode 100644
index 0000000000..4635f6f94a
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/filters.js
@@ -0,0 +1,102 @@
+/* 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 {
+  ENABLE_REQUEST_FILTER_TYPE_ONLY,
+  TOGGLE_REQUEST_FILTER_TYPE,
+  SET_REQUEST_FILTER_TEXT,
+  FILTER_TAGS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function FilterTypes(overrideParams = {}) {
+  const allFilterTypes = ["all"].concat(FILTER_TAGS);
+  // filter only those keys which are valid filter tags
+  overrideParams = Object.keys(overrideParams)
+    .filter(key => allFilterTypes.includes(key))
+    .reduce((obj, key) => {
+      obj[key] = overrideParams[key];
+      return obj;
+    }, {});
+  const filterTypes = allFilterTypes.reduce(
+    (o, tag) => Object.assign(o, { [tag]: false }),
+    {}
+  );
+  return Object.assign({}, filterTypes, overrideParams);
+}
+
+function Filters(overrideParams = {}) {
+  return Object.assign(
+    {
+      requestFilterTypes: new FilterTypes({ all: true }),
+      requestFilterText: "",
+    },
+    overrideParams
+  );
+}
+
+function toggleRequestFilterType(state, action) {
+  const { filter } = action;
+  let newState;
+
+  // Ignore unknown filter type
+  if (!state.hasOwnProperty(filter)) {
+    return state;
+  }
+  if (filter === "all") {
+    return new FilterTypes({ all: true });
+  }
+
+  newState = { ...state };
+  newState.all = false;
+  newState[filter] = !state[filter];
+
+  if (!Object.values(newState).includes(true)) {
+    newState = new FilterTypes({ all: true });
+  }
+
+  return newState;
+}
+
+function enableRequestFilterTypeOnly(state, action) {
+  const { filter } = action;
+
+  // Ignore unknown filter type
+  if (!state.hasOwnProperty(filter)) {
+    return state;
+  }
+
+  return new FilterTypes({ [filter]: true });
+}
+
+function filters(state = new Filters(), action) {
+  state = { ...state };
+  switch (action.type) {
+    case ENABLE_REQUEST_FILTER_TYPE_ONLY:
+      state.requestFilterTypes = enableRequestFilterTypeOnly(
+        state.requestFilterTypes,
+        action
+      );
+      break;
+    case TOGGLE_REQUEST_FILTER_TYPE:
+      state.requestFilterTypes = toggleRequestFilterType(
+        state.requestFilterTypes,
+        action
+      );
+      break;
+    case SET_REQUEST_FILTER_TEXT:
+      state.requestFilterText = action.text;
+      break;
+    default:
+      break;
+  }
+  return state;
+}
+
+module.exports = {
+  FilterTypes,
+  Filters,
+  filters,
+};
diff --git a/devtools/client/netmonitor/src/reducers/index.js b/devtools/client/netmonitor/src/reducers/index.js
new file mode 100644
index 0000000000..d73765f795
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/index.js
@@ -0,0 +1,47 @@
+/* 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("resource://devtools/client/shared/vendor/redux.js");
+const batchingReducer = require("resource://devtools/client/netmonitor/src/reducers/batching.js");
+const requestBlockingReducer = require("resource://devtools/client/netmonitor/src/reducers/request-blocking.js");
+const {
+  requestsReducer,
+} = require("resource://devtools/client/netmonitor/src/reducers/requests.js");
+const {
+  search,
+} = require("resource://devtools/client/netmonitor/src/reducers/search.js");
+const {
+  sortReducer,
+} = require("resource://devtools/client/netmonitor/src/reducers/sort.js");
+const {
+  filters,
+} = require("resource://devtools/client/netmonitor/src/reducers/filters.js");
+const {
+  timingMarkers,
+} = require("resource://devtools/client/netmonitor/src/reducers/timing-markers.js");
+const {
+  ui,
+} = require("resource://devtools/client/netmonitor/src/reducers/ui.js");
+const {
+  messages,
+} = require("resource://devtools/client/netmonitor/src/reducers/messages.js");
+const networkThrottling = require("resource://devtools/client/shared/components/throttling/reducer.js");
+
+module.exports = batchingReducer(
+  combineReducers({
+    filters,
+    messages,
+    networkThrottling,
+    requestBlocking: requestBlockingReducer,
+    requests: requestsReducer,
+    search,
+    sort: sortReducer,
+    timingMarkers,
+    ui,
+  })
+);
diff --git a/devtools/client/netmonitor/src/reducers/messages.js b/devtools/client/netmonitor/src/reducers/messages.js
new file mode 100644
index 0000000000..27d7da28c7
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/messages.js
@@ -0,0 +1,335 @@
+/* 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 {
+  SELECT_REQUEST,
+  MSG_ADD,
+  MSG_SELECT,
+  MSG_OPEN_DETAILS,
+  MSG_CLEAR,
+  MSG_TOGGLE_FILTER_TYPE,
+  MSG_TOGGLE_CONTROL,
+  MSG_SET_FILTER_TEXT,
+  MSG_TOGGLE_COLUMN,
+  MSG_RESET_COLUMNS,
+  MSG_CLOSE_CONNECTION,
+  CHANNEL_TYPE,
+  SET_EVENT_STREAM_FLAG,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * The default column states for the MessageListItem component.
+ */
+const defaultColumnsState = {
+  data: true,
+  size: false,
+  time: true,
+};
+
+const defaultWSColumnsState = {
+  ...defaultColumnsState,
+  opCode: false,
+  maskBit: false,
+  finBit: false,
+};
+
+const defaultSSEColumnsState = {
+  ...defaultColumnsState,
+  eventName: false,
+  lastEventId: false,
+  retry: false,
+};
+
+/**
+ * Returns a new object of default cols.
+ */
+function getMessageDefaultColumnsState(channelType) {
+  let columnsState = defaultColumnsState;
+  const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;
+
+  if (channelType === WEB_SOCKET) {
+    columnsState = defaultWSColumnsState;
+  } else if (channelType === EVENT_STREAM) {
+    columnsState = defaultSSEColumnsState;
+  }
+
+  return Object.assign({}, columnsState);
+}
+
+/**
+ * This structure stores list of all WebSocket and EventSource messages received
+ * from the backend.
+ */
+function Messages(initialState = {}) {
+  const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;
+
+  return {
+    // Map with all requests (key = resourceId, value = array of message objects)
+    messages: new Map(),
+    messageFilterText: "",
+    // Default filter type is "all",
+    messageFilterType: "all",
+    showControlFrames: false,
+    selectedMessage: null,
+    messageDetailsOpen: false,
+    currentChannelId: null,
+    currentChannelType: null,
+    currentRequestId: null,
+    closedConnections: new Map(),
+    columns: null,
+    sseColumns: getMessageDefaultColumnsState(EVENT_STREAM),
+    wsColumns: getMessageDefaultColumnsState(WEB_SOCKET),
+    ...initialState,
+  };
+}
+
+/**
+ * When a network request is selected,
+ * set the current resourceId affiliated with the connection.
+ */
+function setCurrentChannel(state, action) {
+  if (!action.request) {
+    return state;
+  }
+
+  const { id, cause, resourceId, isEventStream } = action.request;
+  const { EVENT_STREAM, WEB_SOCKET } = CHANNEL_TYPE;
+  let currentChannelType = null;
+  let columnsKey = "columns";
+  if (cause.type === "websocket") {
+    currentChannelType = WEB_SOCKET;
+    columnsKey = "wsColumns";
+  } else if (isEventStream) {
+    currentChannelType = EVENT_STREAM;
+    columnsKey = "sseColumns";
+  }
+
+  return {
+    ...state,
+    columns:
+      currentChannelType === state.currentChannelType
+        ? { ...state.columns }
+        : { ...state[columnsKey] },
+    currentChannelId: resourceId,
+    currentChannelType,
+    currentRequestId: id,
+    // Default filter text is empty string for a new connection
+    messageFilterText: "",
+  };
+}
+
+/**
+ * If the request is already selected and isEventStream flag
+ * is added later, we need to update currentChannelType & columns.
+ */
+function updateCurrentChannel(state, action) {
+  if (state.currentRequestId === action.id) {
+    const currentChannelType = CHANNEL_TYPE.EVENT_STREAM;
+    return {
+      ...state,
+      columns: { ...state.sseColumns },
+      currentChannelType,
+    };
+  }
+  return state;
+}
+
+/**
+ * Appending new message into the map.
+ */
+function addMessage(state, action) {
+  const { httpChannelId } = action;
+  const nextState = { ...state };
+
+  const newMessage = {
+    httpChannelId,
+    ...action.data,
+  };
+
+  nextState.messages = mapSet(
+    nextState.messages,
+    newMessage.httpChannelId,
+    newMessage
+  );
+
+  return nextState;
+}
+
+/**
+ * Select specific message.
+ */
+function selectMessage(state, action) {
+  return {
+    ...state,
+    selectedMessage: action.message,
+    messageDetailsOpen: action.open,
+  };
+}
+
+/**
+ * Shows/Hides the MessagePayload component.
+ */
+function openMessageDetails(state, action) {
+  return {
+    ...state,
+    messageDetailsOpen: action.open,
+  };
+}
+
+/**
+ * Clear messages of the request from the state.
+ */
+function clearMessages(state) {
+  const nextState = { ...state };
+  const defaultState = Messages();
+  nextState.messages = new Map(state.messages);
+  nextState.messages.delete(nextState.currentChannelId);
+
+  // Reset fields to default state.
+  nextState.selectedMessage = defaultState.selectedMessage;
+  nextState.messageDetailsOpen = defaultState.messageDetailsOpen;
+
+  return nextState;
+}
+
+/**
+ * Toggle the message filter type of the connection.
+ */
+function toggleMessageFilterType(state, action) {
+  return {
+    ...state,
+    messageFilterType: action.filter,
+  };
+}
+
+/**
+ * Toggle control frames for the WebSocket connection.
+ */
+function toggleControlFrames(state, action) {
+  return {
+    ...state,
+    showControlFrames: !state.showControlFrames,
+  };
+}
+
+/**
+ * Set the filter text of the current channelId.
+ */
+function setMessageFilterText(state, action) {
+  return {
+    ...state,
+    messageFilterText: action.text,
+  };
+}
+
+/**
+ * Toggle the user specified column view state.
+ */
+function toggleColumn(state, action) {
+  const { column } = action;
+  let columnsKey = null;
+  if (state.currentChannelType === CHANNEL_TYPE.WEB_SOCKET) {
+    columnsKey = "wsColumns";
+  } else {
+    columnsKey = "sseColumns";
+  }
+  const newColumnsState = {
+    ...state[columnsKey],
+    [column]: !state[columnsKey][column],
+  };
+  return {
+    ...state,
+    columns: newColumnsState,
+    [columnsKey]: newColumnsState,
+  };
+}
+
+/**
+ * Reset back to default columns view state.
+ */
+function resetColumns(state) {
+  let columnsKey = null;
+  if (state.currentChannelType === CHANNEL_TYPE.WEB_SOCKET) {
+    columnsKey = "wsColumns";
+  } else {
+    columnsKey = "sseColumns";
+  }
+  const newColumnsState = getMessageDefaultColumnsState(
+    state.currentChannelType
+  );
+  return {
+    ...state,
+    [columnsKey]: newColumnsState,
+    columns: newColumnsState,
+  };
+}
+
+function closeConnection(state, action) {
+  const { httpChannelId, code, reason } = action;
+  const nextState = { ...state };
+
+  nextState.closedConnections.set(httpChannelId, {
+    code,
+    reason,
+  });
+
+  return nextState;
+}
+
+/**
+ * Append new item into existing map and return new map.
+ */
+function mapSet(map, key, value) {
+  const newMap = new Map(map);
+  if (newMap.has(key)) {
+    const messagesArray = [...newMap.get(key)];
+    messagesArray.push(value);
+    newMap.set(key, messagesArray);
+    return newMap;
+  }
+  return newMap.set(key, [value]);
+}
+
+/**
+ * This reducer is responsible for maintaining list of
+ * messages within the Network panel.
+ */
+function messages(state = Messages(), action) {
+  switch (action.type) {
+    case SELECT_REQUEST:
+      return setCurrentChannel(state, action);
+    case SET_EVENT_STREAM_FLAG:
+      return updateCurrentChannel(state, action);
+    case MSG_ADD:
+      return addMessage(state, action);
+    case MSG_SELECT:
+      return selectMessage(state, action);
+    case MSG_OPEN_DETAILS:
+      return openMessageDetails(state, action);
+    case MSG_CLEAR:
+      return clearMessages(state);
+    case MSG_TOGGLE_FILTER_TYPE:
+      return toggleMessageFilterType(state, action);
+    case MSG_TOGGLE_CONTROL:
+      return toggleControlFrames(state, action);
+    case MSG_SET_FILTER_TEXT:
+      return setMessageFilterText(state, action);
+    case MSG_TOGGLE_COLUMN:
+      return toggleColumn(state, action);
+    case MSG_RESET_COLUMNS:
+      return resetColumns(state);
+    case MSG_CLOSE_CONNECTION:
+      return closeConnection(state, action);
+    default:
+      return state;
+  }
+}
+
+module.exports = {
+  Messages,
+  messages,
+  getMessageDefaultColumnsState,
+};
diff --git a/devtools/client/netmonitor/src/reducers/moz.build b/devtools/client/netmonitor/src/reducers/moz.build
new file mode 100644
index 0000000000..bd9d238761
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/moz.build
@@ -0,0 +1,16 @@
+# 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",
+    "messages.js",
+    "request-blocking.js",
+    "requests.js",
+    "search.js",
+    "sort.js",
+    "timing-markers.js",
+    "ui.js",
+)
diff --git a/devtools/client/netmonitor/src/reducers/request-blocking.js b/devtools/client/netmonitor/src/reducers/request-blocking.js
new file mode 100644
index 0000000000..ffd0d8c97a
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/request-blocking.js
@@ -0,0 +1,187 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  ADD_BLOCKED_URL,
+  DISABLE_MATCHING_URLS,
+  TOGGLE_BLOCKED_URL,
+  UPDATE_BLOCKED_URL,
+  REMOVE_BLOCKED_URL,
+  REMOVE_ALL_BLOCKED_URLS,
+  ENABLE_ALL_BLOCKED_URLS,
+  DISABLE_ALL_BLOCKED_URLS,
+  TOGGLE_BLOCKING_ENABLED,
+  SYNCED_BLOCKED_URLS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function RequestBlocking() {
+  return {
+    blockedUrls: [],
+    blockingSynced: false,
+    blockingEnabled: true,
+  };
+}
+
+function requestBlockingReducer(state = RequestBlocking(), action) {
+  switch (action.type) {
+    case ADD_BLOCKED_URL:
+      return addBlockedUrl(state, action);
+    case REMOVE_BLOCKED_URL:
+      return removeBlockedUrl(state, action);
+    case REMOVE_ALL_BLOCKED_URLS:
+      return removeAllBlockedUrls(state, action);
+    case UPDATE_BLOCKED_URL:
+      return updateBlockedUrl(state, action);
+    case TOGGLE_BLOCKED_URL:
+      return toggleBlockedUrl(state, action);
+    case TOGGLE_BLOCKING_ENABLED:
+      return toggleBlockingEnabled(state, action);
+    case ENABLE_ALL_BLOCKED_URLS:
+      return enableAllBlockedUrls(state, action);
+    case DISABLE_ALL_BLOCKED_URLS:
+      return disableAllBlockedUrls(state, action);
+    case DISABLE_MATCHING_URLS:
+      return disableOrRemoveMatchingUrls(state, action);
+    case SYNCED_BLOCKED_URLS:
+      return syncedBlockedUrls(state, action);
+    default:
+      return state;
+  }
+}
+
+function syncedBlockedUrls(state, action) {
+  // Indicates whether the blocked url has been synced
+  // with the server once. We don't need to do it once netmonitor is open.
+  return {
+    ...state,
+    blockingSynced: action.synced,
+  };
+}
+
+function toggleBlockingEnabled(state, action) {
+  return {
+    ...state,
+    blockingEnabled: action.enabled,
+  };
+}
+
+function addBlockedUrl(state, action) {
+  // The user can paste in a list of URLS so we need to cleanse the input
+  // Pasting a list turns new lines into spaces
+  const uniqueUrls = [...new Set(action.url.split(" "))].map(url => url.trim());
+
+  const newUrls = uniqueUrls
+    // Ensure the URL isn't already blocked
+    .filter(url => url && !state.blockedUrls.some(item => item.url === url))
+    // Add new URLs as enabled by default
+    .map(url => ({ url, enabled: true }));
+
+  // If the user is trying to block a URL that's currently in the list but disabled,
+  // re-enable the old item
+  const currentBlockedUrls = state.blockedUrls.map(item =>
+    uniqueUrls.includes(item.url) ? { url: item.url, enabled: true } : item
+  );
+
+  const blockedUrls = [...currentBlockedUrls, ...newUrls];
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+function removeBlockedUrl(state, action) {
+  return {
+    ...state,
+    blockedUrls: state.blockedUrls.filter(item => item.url != action.url),
+  };
+}
+
+function removeAllBlockedUrls(state, action) {
+  return {
+    ...state,
+    blockedUrls: [],
+  };
+}
+
+function enableAllBlockedUrls(state, action) {
+  const blockedUrls = state.blockedUrls.map(item => ({
+    ...item,
+    enabled: true,
+  }));
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+function disableAllBlockedUrls(state, action) {
+  const blockedUrls = state.blockedUrls.map(item => ({
+    ...item,
+    enabled: false,
+  }));
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+function updateBlockedUrl(state, action) {
+  const { oldUrl, newUrl } = action;
+  let { blockedUrls } = state;
+
+  if (!blockedUrls.find(item => item.url === newUrl)) {
+    blockedUrls = blockedUrls.map(item => {
+      if (item.url === oldUrl) {
+        return { ...item, url: newUrl };
+      }
+      return item;
+    });
+  } else {
+    blockedUrls = blockedUrls.filter(item => item.url != oldUrl);
+  }
+
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+function toggleBlockedUrl(state, action) {
+  const blockedUrls = state.blockedUrls.map(item => {
+    if (item.url === action.url) {
+      return { ...item, enabled: !item.enabled };
+    }
+    return item;
+  });
+
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+function disableOrRemoveMatchingUrls(state, action) {
+  const blockedUrls = state.blockedUrls
+    .map(item => {
+      // If the url matches exactly, remove the entry
+      if (action.url === item.url) {
+        return null;
+      }
+      // If just a partial match, disable the entry
+      if (action.url.includes(item.url)) {
+        return { ...item, enabled: false };
+      }
+      return item;
+    })
+    .filter(Boolean);
+
+  return {
+    ...state,
+    blockedUrls,
+  };
+}
+
+module.exports = requestBlockingReducer;
diff --git a/devtools/client/netmonitor/src/reducers/requests.js b/devtools/client/netmonitor/src/reducers/requests.js
new file mode 100644
index 0000000000..0bc503727e
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/requests.js
@@ -0,0 +1,313 @@
+/* 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 {
+  processNetworkUpdates,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  ADD_REQUEST,
+  SET_EVENT_STREAM_FLAG,
+  CLEAR_REQUESTS,
+  CLONE_REQUEST,
+  CLONE_SELECTED_REQUEST,
+  OPEN_NETWORK_DETAILS,
+  REMOVE_SELECTED_CUSTOM_REQUEST,
+  RIGHT_CLICK_REQUEST,
+  SELECT_REQUEST,
+  PRESELECT_REQUEST,
+  SEND_CUSTOM_REQUEST,
+  SET_RECORDING_STATE,
+  UPDATE_REQUEST,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * This structure stores list of all HTTP requests received
+ * from the backend. It's using plain JS structures to store
+ * data instead of ImmutableJS, which is performance expensive.
+ */
+function Requests() {
+  return {
+    // Map with all requests (key = actor ID, value = request object)
+    requests: [],
+    // Selected request ID
+    selectedId: null,
+    // Right click request represents the last request that was clicked
+    clickedRequestId: null,
+    // @backward-compact { version 85 } The preselectedId can either be
+    // the actor id on old servers, or the resourceId on new ones.
+    preselectedId: null,
+    // True if the monitor is recording HTTP traffic
+    recording: true,
+    // Auxiliary fields to hold requests stats
+    firstStartedMs: +Infinity,
+    lastEndedMs: -Infinity,
+  };
+}
+
+/**
+ * This reducer is responsible for maintaining list of request
+ * within the Network panel.
+ */
+function requestsReducer(state = Requests(), action) {
+  switch (action.type) {
+    // Appending new request into the list/map.
+    case ADD_REQUEST: {
+      return addRequest(state, action);
+    }
+
+    // Update an existing request (with received data).
+    case UPDATE_REQUEST: {
+      return updateRequest(state, action);
+    }
+
+    // Add isEventStream flag to a request.
+    case SET_EVENT_STREAM_FLAG: {
+      return setEventStreamFlag(state, action);
+    }
+
+    // Remove all requests in the list. Create fresh new state
+    // object, but keep value of the `recording` field.
+    case CLEAR_REQUESTS: {
+      return {
+        ...Requests(),
+        recording: state.recording,
+      };
+    }
+
+    // Select specific request.
+    case SELECT_REQUEST: {
+      return {
+        ...state,
+        clickedRequestId: action.id,
+        selectedId: action.id,
+      };
+    }
+
+    // Clone selected request for re-send.
+    case CLONE_REQUEST: {
+      return cloneRequest(state, action.id);
+    }
+
+    case CLONE_SELECTED_REQUEST: {
+      return cloneRequest(state, state.selectedId);
+    }
+
+    case RIGHT_CLICK_REQUEST: {
+      return {
+        ...state,
+        clickedRequestId: action.id,
+      };
+    }
+
+    case PRESELECT_REQUEST: {
+      return {
+        ...state,
+        preselectedId: action.id,
+      };
+    }
+
+    // Removing temporary cloned request (created for re-send, but canceled).
+    case REMOVE_SELECTED_CUSTOM_REQUEST: {
+      return closeCustomRequest(state);
+    }
+
+    // Re-sending an existing request.
+    case SEND_CUSTOM_REQUEST: {
+      // When a new request with a given id is added in future, select it immediately.
+      // where we know in advance the ID of the request, at a time when it
+      // wasn't sent yet.
+      return closeCustomRequest({ ...state, preselectedId: action.id });
+    }
+
+    // Pause/resume button clicked.
+    case SET_RECORDING_STATE: {
+      return {
+        ...state,
+        recording: action.recording,
+      };
+    }
+
+    // Side bar with request details opened.
+    case OPEN_NETWORK_DETAILS: {
+      const nextState = { ...state };
+      if (!action.open) {
+        nextState.selectedId = null;
+        return nextState;
+      }
+
+      if (!state.selectedId && action.defaultSelectedId) {
+        nextState.selectedId = action.defaultSelectedId;
+        return nextState;
+      }
+
+      return state;
+    }
+
+    default:
+      return state;
+  }
+}
+
+// Helpers
+
+function addRequest(state, action) {
+  const nextState = { ...state };
+  // The target front is not used and cannot be serialized by redux
+  // eslint-disable-next-line no-unused-vars
+  const { targetFront, ...requestData } = action.data;
+  const newRequest = {
+    id: action.id,
+    ...requestData,
+  };
+
+  nextState.requests = [...state.requests, newRequest];
+
+  // Update the started/ended timestamps.
+  const { startedMs } = action.data;
+  if (startedMs < state.firstStartedMs) {
+    nextState.firstStartedMs = startedMs;
+  }
+  if (startedMs > state.lastEndedMs) {
+    nextState.lastEndedMs = startedMs;
+  }
+
+  // Select the request if it was preselected and there is no other selection.
+  if (state.preselectedId) {
+    if (state.preselectedId === action.id) {
+      nextState.selectedId = state.selectedId || state.preselectedId;
+    }
+    // @backward-compact { version 85 } The preselectedId can be resourceId
+    // instead of actor id when a custom request is created, and could not be
+    // selected immediately because it was not yet in the request map.
+    else if (state.preselectedId === newRequest.resourceId) {
+      nextState.selectedId = action.id;
+    }
+    nextState.preselectedId = null;
+  }
+
+  return nextState;
+}
+
+function updateRequest(state, action) {
+  const { requests, lastEndedMs } = state;
+
+  const { id } = action;
+  const index = requests.findIndex(needle => needle.id === id);
+  if (index === -1) {
+    return state;
+  }
+  const request = requests[index];
+
+  const nextRequest = {
+    ...request,
+    ...processNetworkUpdates(action.data),
+  };
+  const requestEndTime =
+    nextRequest.startedMs +
+    (nextRequest.eventTimings ? nextRequest.eventTimings.totalTime : 0);
+
+  const nextRequests = [...requests];
+  nextRequests[index] = nextRequest;
+  return {
+    ...state,
+    requests: nextRequests,
+    lastEndedMs: requestEndTime > lastEndedMs ? requestEndTime : lastEndedMs,
+  };
+}
+
+function setEventStreamFlag(state, action) {
+  const { requests } = state;
+  const { id } = action;
+  const index = requests.findIndex(needle => needle.id === id);
+  if (index === -1) {
+    return state;
+  }
+
+  const request = requests[index];
+
+  const nextRequest = {
+    ...request,
+    isEventStream: true,
+  };
+
+  const nextRequests = [...requests];
+  nextRequests[index] = nextRequest;
+  return {
+    ...state,
+    requests: nextRequests,
+  };
+}
+
+function cloneRequest(state, id) {
+  const { requests } = state;
+
+  if (!id) {
+    return state;
+  }
+
+  const clonedRequest = requests.find(needle => needle.id === id);
+  if (!clonedRequest) {
+    return state;
+  }
+
+  const newRequest = {
+    id: clonedRequest.id + "-clone",
+    method: clonedRequest.method,
+    cause: clonedRequest.cause,
+    url: clonedRequest.url,
+    urlDetails: clonedRequest.urlDetails,
+    requestHeaders: clonedRequest.requestHeaders,
+    requestPostData: clonedRequest.requestPostData,
+    requestPostDataAvailable: clonedRequest.requestPostDataAvailable,
+    requestHeadersAvailable: clonedRequest.requestHeadersAvailable,
+    isCustom: true,
+  };
+
+  return {
+    ...state,
+    requests: [...requests, newRequest],
+    selectedId: newRequest.id,
+    preselectedId: id,
+  };
+}
+
+/**
+ * Remove the currently selected custom request.
+ */
+function closeCustomRequest(state) {
+  const { requests, selectedId, preselectedId } = state;
+
+  if (!selectedId) {
+    return state;
+  }
+
+  // Find the cloned requests to be removed
+  const removedRequest = requests.find(needle => needle.id === selectedId);
+
+  // If the custom request is already in the Map, select it immediately,
+  // and reset `preselectedId` attribute.
+  // @backward-compact { version 85 } The preselectId can also be a resourceId
+  // or an actor id.
+  const customRequest = requests.find(
+    needle => needle.id === preselectedId || needle.resourceId === preselectedId
+  );
+  const hasPreselectedId = preselectedId && customRequest;
+
+  return {
+    ...state,
+    // Only custom requests can be removed
+    [removedRequest?.isCustom && "requests"]: requests.filter(
+      item => item.id !== selectedId
+    ),
+    preselectedId: hasPreselectedId ? null : preselectedId,
+    selectedId: hasPreselectedId ? customRequest.id : null,
+  };
+}
+
+module.exports = {
+  Requests,
+  requestsReducer,
+};
diff --git a/devtools/client/netmonitor/src/reducers/search.js b/devtools/client/netmonitor/src/reducers/search.js
new file mode 100644
index 0000000000..91e843e18c
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/search.js
@@ -0,0 +1,118 @@
+/* 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_SEARCH_QUERY,
+  ADD_SEARCH_RESULT,
+  CLEAR_SEARCH_RESULTS,
+  ADD_ONGOING_SEARCH,
+  SEARCH_STATUS,
+  TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH,
+  UPDATE_SEARCH_STATUS,
+  SET_TARGET_SEARCH_RESULT,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * Search reducer stores the following data:
+ * - query [String]: the string the user is looking for
+ * - results [Object]: the list of search results
+ * - ongoingSearch [Object]: the object representing the current search
+ * - status [String]: status of the current search (see constants.js)
+ */
+function Search(overrideParams = {}) {
+  return Object.assign(
+    {
+      query: "",
+      results: [],
+      ongoingSearch: null,
+      status: SEARCH_STATUS.INITIAL,
+      caseSensitive: false,
+      targetSearchResult: null,
+    },
+    overrideParams
+  );
+}
+
+function search(state = new Search(), action) {
+  switch (action.type) {
+    case ADD_SEARCH_QUERY:
+      return onAddSearchQuery(state, action);
+    case ADD_SEARCH_RESULT:
+      return onAddSearchResult(state, action);
+    case CLEAR_SEARCH_RESULTS:
+      return onClearSearchResults(state);
+    case ADD_ONGOING_SEARCH:
+      return onAddOngoingSearch(state, action);
+    case TOGGLE_SEARCH_CASE_SENSITIVE_SEARCH:
+      return onToggleCaseSensitiveSearch(state);
+    case UPDATE_SEARCH_STATUS:
+      return onUpdateSearchStatus(state, action);
+    case SET_TARGET_SEARCH_RESULT:
+      return onSetTargetSearchResult(state, action);
+  }
+  return state;
+}
+
+function onAddSearchQuery(state, action) {
+  return {
+    ...state,
+    query: action.query,
+  };
+}
+
+function onAddSearchResult(state, action) {
+  const { resource } = action;
+  const results = state.results.slice();
+  results.push({
+    resource,
+    results: action.result,
+  });
+
+  return {
+    ...state,
+    results,
+  };
+}
+
+function onClearSearchResults(state) {
+  return {
+    ...state,
+    results: [],
+  };
+}
+
+function onAddOngoingSearch(state, action) {
+  return {
+    ...state,
+    ongoingSearch: action.ongoingSearch,
+  };
+}
+
+function onToggleCaseSensitiveSearch(state) {
+  return {
+    ...state,
+    caseSensitive: !state.caseSensitive,
+  };
+}
+
+function onUpdateSearchStatus(state, action) {
+  return {
+    ...state,
+    status: action.status,
+  };
+}
+
+function onSetTargetSearchResult(state, action) {
+  return {
+    ...state,
+    targetSearchResult: action.searchResult,
+  };
+}
+
+module.exports = {
+  Search,
+  search,
+};
diff --git a/devtools/client/netmonitor/src/reducers/sort.js b/devtools/client/netmonitor/src/reducers/sort.js
new file mode 100644
index 0000000000..0d3486f57b
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/sort.js
@@ -0,0 +1,48 @@
+/* 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,
+  RESET_COLUMNS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function Sort() {
+  return {
+    // null means: sort by "waterfall", but don't highlight the table header
+    type: null,
+    ascending: true,
+  };
+}
+
+function sortReducer(state = new Sort(), action) {
+  switch (action.type) {
+    case SORT_BY: {
+      state = { ...state };
+      if (action.sortType != null && action.sortType == state.type) {
+        state.ascending = !state.ascending;
+      } else {
+        state.type = action.sortType;
+        state.ascending = true;
+      }
+      return state;
+    }
+
+    case RESET_COLUMNS: {
+      state = { ...state };
+      state.type = null;
+      state.ascending = true;
+      return state;
+    }
+
+    default:
+      return state;
+  }
+}
+
+module.exports = {
+  Sort,
+  sortReducer,
+};
diff --git a/devtools/client/netmonitor/src/reducers/timing-markers.js b/devtools/client/netmonitor/src/reducers/timing-markers.js
new file mode 100644
index 0000000000..4a41f9b495
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/timing-markers.js
@@ -0,0 +1,78 @@
+/* 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_REQUEST,
+  ADD_TIMING_MARKER,
+  CLEAR_TIMING_MARKERS,
+  CLEAR_REQUESTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+function TimingMarkers() {
+  return {
+    firstDocumentDOMContentLoadedTimestamp: -1,
+    firstDocumentLoadTimestamp: -1,
+    firstDocumentRequestStartTimestamp: +Infinity,
+  };
+}
+
+function addRequest(state, action) {
+  const nextState = { ...state };
+  const { startedMs } = action.data;
+  if (startedMs < state.firstDocumentRequestStartTimestamp) {
+    nextState.firstDocumentRequestStartTimestamp = startedMs;
+  }
+
+  return nextState;
+}
+
+function addTimingMarker(state, action) {
+  state = { ...state };
+
+  if (
+    action.marker.name === "dom-interactive" &&
+    state.firstDocumentDOMContentLoadedTimestamp === -1
+  ) {
+    state.firstDocumentDOMContentLoadedTimestamp = action.marker.time;
+    return state;
+  }
+
+  if (
+    action.marker.name === "dom-complete" &&
+    state.firstDocumentLoadTimestamp === -1
+  ) {
+    state.firstDocumentLoadTimestamp = action.marker.time;
+    return state;
+  }
+
+  return state;
+}
+
+function clearTimingMarkers(state) {
+  return new TimingMarkers();
+}
+
+function timingMarkers(state = new TimingMarkers(), action) {
+  switch (action.type) {
+    case ADD_REQUEST:
+      return addRequest(state, action);
+
+    case ADD_TIMING_MARKER:
+      return addTimingMarker(state, action);
+
+    case CLEAR_REQUESTS:
+    case CLEAR_TIMING_MARKERS:
+      return clearTimingMarkers(state);
+
+    default:
+      return state;
+  }
+}
+
+module.exports = {
+  TimingMarkers,
+  timingMarkers,
+};
diff --git a/devtools/client/netmonitor/src/reducers/ui.js b/devtools/client/netmonitor/src/reducers/ui.js
new file mode 100644
index 0000000000..d1b405f033
--- /dev/null
+++ b/devtools/client/netmonitor/src/reducers/ui.js
@@ -0,0 +1,260 @@
+/* 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 {
+  CLEAR_REQUESTS,
+  OPEN_NETWORK_DETAILS,
+  OPEN_ACTION_BAR,
+  RESIZE_NETWORK_DETAILS,
+  ENABLE_PERSISTENT_LOGS,
+  DISABLE_BROWSER_CACHE,
+  OPEN_STATISTICS,
+  REMOVE_SELECTED_CUSTOM_REQUEST,
+  RESET_COLUMNS,
+  RESPONSE_HEADERS,
+  SELECT_DETAILS_PANEL_TAB,
+  SELECT_ACTION_BAR_TAB,
+  SEND_CUSTOM_REQUEST,
+  SELECT_REQUEST,
+  TOGGLE_COLUMN,
+  WATERFALL_RESIZE,
+  PANELS,
+  MIN_COLUMN_WIDTH,
+  SET_COLUMNS_WIDTH,
+  SET_HEADERS_URL_PREVIEW_EXPANDED,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const cols = {
+  status: true,
+  method: true,
+  domain: true,
+  file: true,
+  url: false,
+  protocol: false,
+  scheme: false,
+  remoteip: false,
+  initiator: true,
+  type: true,
+  cookies: false,
+  setCookies: false,
+  transferred: true,
+  contentSize: true,
+  priority: false,
+  startTime: false,
+  endTime: false,
+  responseTime: false,
+  duration: false,
+  latency: false,
+  waterfall: true,
+};
+
+function Columns() {
+  return Object.assign(
+    cols,
+    RESPONSE_HEADERS.reduce(
+      (acc, header) => Object.assign(acc, { [header]: false }),
+      {}
+    )
+  );
+}
+
+function ColumnsData() {
+  const defaultColumnsData = JSON.parse(
+    Services.prefs
+      .getDefaultBranch(null)
+      .getCharPref("devtools.netmonitor.columnsData")
+  );
+  return new Map(defaultColumnsData.map(i => [i.name, i]));
+}
+
+function UI(initialState = {}) {
+  return {
+    columns: Columns(),
+    columnsData: ColumnsData(),
+    detailsPanelSelectedTab: PANELS.HEADERS,
+    networkDetailsOpen: false,
+    networkDetailsWidth: null,
+    networkDetailsHeight: null,
+    persistentLogsEnabled: Services.prefs.getBoolPref(
+      "devtools.netmonitor.persistlog"
+    ),
+    browserCacheDisabled: Services.prefs.getBoolPref("devtools.cache.disabled"),
+    slowLimit: Services.prefs.getIntPref("devtools.netmonitor.audits.slow"),
+    statisticsOpen: false,
+    waterfallWidth: null,
+    networkActionOpen: false,
+    selectedActionBarTabId: null,
+    shouldExpandHeadersUrlPreview: false,
+    ...initialState,
+  };
+}
+
+function resetColumns(state) {
+  return {
+    ...state,
+    columns: Columns(),
+    columnsData: ColumnsData(),
+  };
+}
+
+function resizeWaterfall(state, action) {
+  return {
+    ...state,
+    waterfallWidth: action.width,
+  };
+}
+
+function openNetworkDetails(state, action) {
+  return {
+    ...state,
+    networkDetailsOpen: action.open,
+  };
+}
+
+function openNetworkAction(state, action) {
+  return {
+    ...state,
+    networkActionOpen: action.open,
+  };
+}
+
+function resizeNetworkDetails(state, action) {
+  return {
+    ...state,
+    networkDetailsWidth: action.width,
+    networkDetailsHeight: action.height,
+  };
+}
+
+function enablePersistentLogs(state, action) {
+  return {
+    ...state,
+    persistentLogsEnabled: action.enabled,
+  };
+}
+
+function disableBrowserCache(state, action) {
+  return {
+    ...state,
+    browserCacheDisabled: action.disabled,
+  };
+}
+
+function openStatistics(state, action) {
+  return {
+    ...state,
+    statisticsOpen: action.open,
+  };
+}
+
+function setDetailsPanelTab(state, action) {
+  return {
+    ...state,
+    detailsPanelSelectedTab: action.id,
+  };
+}
+
+function setActionBarTab(state, action) {
+  return {
+    ...state,
+    selectedActionBarTabId: action.id,
+  };
+}
+
+function setHeadersUrlPreviewExpanded(state, action) {
+  return {
+    ...state,
+    shouldExpandHeadersUrlPreview: action.expanded,
+  };
+}
+
+function toggleColumn(state, action) {
+  const { column } = action;
+
+  if (!state.columns.hasOwnProperty(column)) {
+    return state;
+  }
+
+  return {
+    ...state,
+    columns: {
+      ...state.columns,
+      [column]: !state.columns[column],
+    },
+  };
+}
+
+function setColumnsWidth(state, action) {
+  const { widths } = action;
+  const columnsData = new Map(state.columnsData);
+
+  widths.forEach(col => {
+    let data = columnsData.get(col.name);
+    if (!data) {
+      data = {
+        name: col.name,
+        minWidth: MIN_COLUMN_WIDTH,
+      };
+    }
+    columnsData.set(col.name, {
+      ...data,
+      width: col.width,
+    });
+  });
+
+  return {
+    ...state,
+    columnsData,
+  };
+}
+
+function ui(state = UI(), action) {
+  switch (action.type) {
+    case CLEAR_REQUESTS:
+      return openNetworkDetails(state, { open: false });
+    case OPEN_NETWORK_DETAILS:
+      return openNetworkDetails(state, action);
+    case RESIZE_NETWORK_DETAILS:
+      return resizeNetworkDetails(state, action);
+    case ENABLE_PERSISTENT_LOGS:
+      return enablePersistentLogs(state, action);
+    case DISABLE_BROWSER_CACHE:
+      return disableBrowserCache(state, action);
+    case OPEN_STATISTICS:
+      return openStatistics(state, action);
+    case RESET_COLUMNS:
+      return resetColumns(state);
+    case REMOVE_SELECTED_CUSTOM_REQUEST:
+      return openNetworkDetails(state, { open: true });
+    case SEND_CUSTOM_REQUEST:
+      return openNetworkDetails(state, { open: false });
+    case SELECT_DETAILS_PANEL_TAB:
+      return setDetailsPanelTab(state, action);
+    case SELECT_ACTION_BAR_TAB:
+      return setActionBarTab(state, action);
+    case SELECT_REQUEST:
+      return openNetworkDetails(state, { open: true });
+    case TOGGLE_COLUMN:
+      return toggleColumn(state, action);
+    case WATERFALL_RESIZE:
+      return resizeWaterfall(state, action);
+    case SET_COLUMNS_WIDTH:
+      return setColumnsWidth(state, action);
+    case OPEN_ACTION_BAR:
+      return openNetworkAction(state, action);
+    case SET_HEADERS_URL_PREVIEW_EXPANDED:
+      return setHeadersUrlPreviewExpanded(state, action);
+    default:
+      return state;
+  }
+}
+
+module.exports = {
+  Columns,
+  ColumnsData,
+  UI,
+  ui,
+};
diff --git a/devtools/client/netmonitor/src/selectors/index.js b/devtools/client/netmonitor/src/selectors/index.js
new file mode 100644
index 0000000000..52243d9a64
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/index.js
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const requests = require("resource://devtools/client/netmonitor/src/selectors/requests.js");
+const search = require("resource://devtools/client/netmonitor/src/selectors/search.js");
+const timingMarkers = require("resource://devtools/client/netmonitor/src/selectors/timing-markers.js");
+const ui = require("resource://devtools/client/netmonitor/src/selectors/ui.js");
+const messages = require("resource://devtools/client/netmonitor/src/selectors/messages.js");
+
+Object.assign(exports, search, requests, timingMarkers, ui, messages);
diff --git a/devtools/client/netmonitor/src/selectors/messages.js b/devtools/client/netmonitor/src/selectors/messages.js
new file mode 100644
index 0000000000..d12b465b94
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/messages.js
@@ -0,0 +1,162 @@
+/* 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 {
+  createSelector,
+} = require("resource://devtools/client/shared/vendor/reselect.js");
+
+/**
+ * Returns list of messages that are visible to the user.
+ * Filtered messages by types and text are factored in.
+ */
+const getDisplayedMessages = createSelector(
+  state => state.messages,
+  ({
+    messages,
+    messageFilterType,
+    showControlFrames,
+    messageFilterText,
+    currentChannelId,
+  }) => {
+    if (!currentChannelId || !messages.get(currentChannelId)) {
+      return [];
+    }
+
+    const messagesArray = messages.get(currentChannelId);
+    if (messageFilterType === "all" && messageFilterText.length === 0) {
+      return messagesArray.filter(message =>
+        typeFilter(message, messageFilterType, showControlFrames)
+      );
+    }
+
+    const filter = searchFilter(messageFilterText);
+
+    // If message payload is > 10,000 characters long, we check the LongStringActor payload string
+    return messagesArray.filter(
+      message =>
+        (message.payload.initial
+          ? filter(message.payload.initial)
+          : filter(message.payload)) &&
+        typeFilter(message, messageFilterType, showControlFrames)
+    );
+  }
+);
+
+function typeFilter(message, messageFilterType, showControlFrames) {
+  const controlFrames = [0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe, 0xf];
+  const isControlFrame = controlFrames.includes(message.opCode);
+  if (messageFilterType === "all" || messageFilterType === message.type) {
+    return showControlFrames || !isControlFrame;
+  }
+  return false;
+}
+
+function searchFilter(messageFilterText) {
+  let regex;
+  if (looksLikeRegex(messageFilterText)) {
+    try {
+      regex = regexFromText(messageFilterText);
+    } catch (e) {}
+  }
+
+  return regex
+    ? payload => regex.test(payload)
+    : payload => payload.includes(messageFilterText);
+}
+
+function looksLikeRegex(text) {
+  return text.startsWith("/") && text.endsWith("/") && text.length > 2;
+}
+
+function regexFromText(text) {
+  return new RegExp(text.slice(1, -1), "im");
+}
+
+/**
+ * Checks if the selected message is visible.
+ * If the selected message is not visible, the SplitBox component
+ * should not show the MessagePayload component.
+ */
+const isSelectedMessageVisible = createSelector(
+  state => state.messages,
+  getDisplayedMessages,
+  ({ selectedMessage }, displayedMessages) =>
+    displayedMessages.some(message => message === selectedMessage)
+);
+
+/**
+ * Returns the current selected message.
+ */
+const getSelectedMessage = createSelector(
+  state => state.messages,
+  ({ selectedMessage }) => (selectedMessage ? selectedMessage : undefined)
+);
+
+/**
+ * Returns summary data of the list of messages that are visible to the user.
+ * Filtered messages by types and text are factored in.
+ */
+const getDisplayedMessagesSummary = createSelector(
+  getDisplayedMessages,
+  displayedMessages => {
+    let firstStartedMs = +Infinity;
+    let lastEndedMs = -Infinity;
+    let sentSize = 0;
+    let receivedSize = 0;
+    let totalSize = 0;
+
+    displayedMessages.forEach(message => {
+      if (message.type == "received") {
+        receivedSize += message.payload.length;
+      } else if (message.type == "sent") {
+        sentSize += message.payload.length;
+      }
+      totalSize += message.payload.length;
+      if (message.timeStamp < firstStartedMs) {
+        firstStartedMs = message.timeStamp;
+      }
+      if (message.timeStamp > lastEndedMs) {
+        lastEndedMs = message.timeStamp;
+      }
+    });
+
+    return {
+      count: displayedMessages.length,
+      totalMs: (lastEndedMs - firstStartedMs) / 1000,
+      sentSize,
+      receivedSize,
+      totalSize,
+    };
+  }
+);
+
+/**
+ * Returns if the currentChannelId is closed
+ */
+const isCurrentChannelClosed = createSelector(
+  state => state.messages,
+  ({ closedConnections, currentChannelId }) =>
+    closedConnections.has(currentChannelId)
+);
+
+/**
+ * Returns the closed connection details of the currentChannelId
+ * Null, if the connection is still open
+ */
+const getClosedConnectionDetails = createSelector(
+  state => state.messages,
+  ({ closedConnections, currentChannelId }) =>
+    closedConnections.get(currentChannelId)
+);
+
+module.exports = {
+  getSelectedMessage,
+  isSelectedMessageVisible,
+  getDisplayedMessages,
+  getDisplayedMessagesSummary,
+  isCurrentChannelClosed,
+  getClosedConnectionDetails,
+};
diff --git a/devtools/client/netmonitor/src/selectors/moz.build b/devtools/client/netmonitor/src/selectors/moz.build
new file mode 100644
index 0000000000..dcc4eac916
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/moz.build
@@ -0,0 +1,12 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "index.js",
+    "messages.js",
+    "requests.js",
+    "search.js",
+    "timing-markers.js",
+    "ui.js",
+)
diff --git a/devtools/client/netmonitor/src/selectors/requests.js b/devtools/client/netmonitor/src/selectors/requests.js
new file mode 100644
index 0000000000..002c478c78
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/requests.js
@@ -0,0 +1,198 @@
+/* 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 {
+  createSelector,
+} = require("resource://devtools/client/shared/vendor/reselect.js");
+const {
+  Filters,
+  isFreetextMatch,
+} = require("resource://devtools/client/netmonitor/src/utils/filter-predicates.js");
+const {
+  Sorters,
+} = require("resource://devtools/client/netmonitor/src/utils/sort-predicates.js");
+
+/**
+ * Take clones into account when sorting.
+ * If a request is a clone, use the original request for comparison.
+ * If one of the compared request is a clone of the other, sort them next to each other.
+ */
+function sortWithClones(requests, sorter, a, b) {
+  const aId = a.id,
+    bId = b.id;
+
+  if (aId.endsWith("-clone")) {
+    const aOrigId = aId.replace(/-clone$/, "");
+    if (aOrigId === bId) {
+      return +1;
+    }
+    a = requests.find(item => item.id === aOrigId);
+  }
+
+  if (bId.endsWith("-clone")) {
+    const bOrigId = bId.replace(/-clone$/, "");
+    if (bOrigId === aId) {
+      return -1;
+    }
+    b = requests.find(item => item.id === bOrigId);
+  }
+
+  const defaultSorter = () => false;
+  return sorter ? sorter(a, b) : defaultSorter;
+}
+
+/**
+ * Take clones into account when filtering. If a request is
+ * a clone, it's not filtered out.
+ */
+const getFilterWithCloneFn = createSelector(
+  state => state.filters,
+  filters => r => {
+    const matchesType = Object.keys(filters.requestFilterTypes).some(filter => {
+      if (r.id.endsWith("-clone")) {
+        return true;
+      }
+      return (
+        filters.requestFilterTypes[filter] &&
+        Filters[filter] &&
+        Filters[filter](r)
+      );
+    });
+    return matchesType && isFreetextMatch(r, filters.requestFilterText);
+  }
+);
+
+const getTypeFilterFn = createSelector(
+  state => state.filters,
+  filters => r => {
+    return Object.keys(filters.requestFilterTypes).some(filter => {
+      return (
+        filters.requestFilterTypes[filter] &&
+        Filters[filter] &&
+        Filters[filter](r)
+      );
+    });
+  }
+);
+
+const getSortFn = createSelector(
+  state => state.requests,
+  state => state.sort,
+  ({ requests }, sort) => {
+    const sorter = Sorters[sort.type || "waterfall"];
+    const ascending = sort.ascending ? +1 : -1;
+    return (a, b) => ascending * sortWithClones(requests, sorter, a, b);
+  }
+);
+
+const getSortedRequests = createSelector(
+  state => state.requests,
+  getSortFn,
+  ({ requests }, sortFn) => [...requests].sort(sortFn)
+);
+
+const getDisplayedRequests = createSelector(
+  state => state.requests,
+  getFilterWithCloneFn,
+  getSortFn,
+  ({ requests }, filterFn, sortFn) => requests.filter(filterFn).sort(sortFn)
+);
+
+const getTypeFilteredRequests = createSelector(
+  state => state.requests,
+  getTypeFilterFn,
+  ({ requests }, filterFn) => requests.filter(filterFn)
+);
+
+const getDisplayedRequestsSummary = createSelector(
+  getDisplayedRequests,
+  state => state.requests.lastEndedMs - state.requests.firstStartedMs,
+  (requests, totalMs) => {
+    if (requests.length === 0) {
+      return { count: 0, bytes: 0, ms: 0 };
+    }
+
+    const totalBytes = requests.reduce(
+      (totals, item) => {
+        if (typeof item.contentSize == "number") {
+          totals.contentSize += item.contentSize;
+        }
+
+        if (
+          typeof item.transferredSize == "number" &&
+          !(item.fromCache || item.fromServiceWorker || item.status === "304")
+        ) {
+          totals.transferredSize += item.transferredSize;
+        }
+
+        return totals;
+      },
+      { contentSize: 0, transferredSize: 0 }
+    );
+
+    return {
+      count: requests.length,
+      contentSize: totalBytes.contentSize,
+      ms: totalMs,
+      transferredSize: totalBytes.transferredSize,
+    };
+  }
+);
+
+const getSelectedRequest = createSelector(
+  state => state.requests,
+  ({ selectedId, requests }) =>
+    selectedId ? requests.find(item => item.id === selectedId) : undefined
+);
+
+const isSelectedRequestVisible = createSelector(
+  state => state.requests,
+  getDisplayedRequests,
+  ({ selectedId }, displayedRequests) =>
+    displayedRequests.some(r => r.id === selectedId)
+);
+
+function getRequestById(state, id) {
+  return state.requests.requests.find(item => item.id === id);
+}
+
+function getRequestByChannelId(state, channelId) {
+  return [...state.requests.requests.values()].find(
+    r => r.resourceId == channelId
+  );
+}
+
+function getDisplayedRequestById(state, id) {
+  return getDisplayedRequests(state).find(r => r.id === id);
+}
+
+/**
+ * Returns the current recording boolean state (HTTP traffic is
+ * monitored or not monitored)
+ */
+function getRecordingState(state) {
+  return state.requests.recording;
+}
+
+const getClickedRequest = createSelector(
+  state => state.requests,
+  ({ requests, clickedRequestId }) =>
+    requests.find(request => request.id == clickedRequestId)
+);
+
+module.exports = {
+  getClickedRequest,
+  getDisplayedRequestById,
+  getDisplayedRequests,
+  getDisplayedRequestsSummary,
+  getRecordingState,
+  getRequestById,
+  getRequestByChannelId,
+  getSelectedRequest,
+  getSortedRequests,
+  getTypeFilteredRequests,
+  isSelectedRequestVisible,
+};
diff --git a/devtools/client/netmonitor/src/selectors/search.js b/devtools/client/netmonitor/src/selectors/search.js
new file mode 100644
index 0000000000..8ab0191a42
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/search.js
@@ -0,0 +1,33 @@
+/* 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";
+
+function getOngoingSearch(state) {
+  return state.search.ongoingSearch;
+}
+
+function getSearchStatus(state) {
+  return state.search.status;
+}
+
+function getSearchResultCount(state) {
+  const { results } = state.search;
+  return (
+    (results.length !== 0
+      ? results.reduce((total, current) => total + current.results.length, 0)
+      : 0) + ""
+  );
+}
+
+function getSearchResourceCount(state) {
+  return state.search.results.length + "";
+}
+
+module.exports = {
+  getOngoingSearch,
+  getSearchStatus,
+  getSearchResultCount,
+  getSearchResourceCount,
+};
diff --git a/devtools/client/netmonitor/src/selectors/timing-markers.js b/devtools/client/netmonitor/src/selectors/timing-markers.js
new file mode 100644
index 0000000000..3855529904
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/timing-markers.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";
+
+function getDisplayedTimingMarker(state, marker) {
+  const value = state.timingMarkers[marker];
+  if (value == -1) {
+    return value;
+  }
+
+  return value - state.timingMarkers.firstDocumentRequestStartTimestamp;
+}
+
+module.exports = {
+  getDisplayedTimingMarker,
+};
diff --git a/devtools/client/netmonitor/src/selectors/ui.js b/devtools/client/netmonitor/src/selectors/ui.js
new file mode 100644
index 0000000000..d9d8995a71
--- /dev/null
+++ b/devtools/client/netmonitor/src/selectors/ui.js
@@ -0,0 +1,81 @@
+/* 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 {
+  createSelector,
+} = require("resource://devtools/client/shared/vendor/reselect.js");
+const {
+  REQUESTS_WATERFALL,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const EPSILON = 0.001;
+
+const getWaterfallScale = createSelector(
+  state => state.requests.firstStartedMs,
+  state => state.requests.lastEndedMs,
+  state => state.timingMarkers.firstDocumentDOMContentLoadedTimestamp,
+  state => state.timingMarkers.firstDocumentLoadTimestamp,
+  state => state.ui.waterfallWidth,
+  (
+    firstStartedMs,
+    lastEndedMs,
+    firstDocumentDOMContentLoadedTimestamp,
+    firstDocumentLoadTimestamp,
+    waterfallWidth
+  ) => {
+    if (firstStartedMs === +Infinity || waterfallWidth === null) {
+      return null;
+    }
+
+    const lastEventMs = Math.max(
+      lastEndedMs,
+      firstDocumentDOMContentLoadedTimestamp,
+      firstDocumentLoadTimestamp
+    );
+    const longestWidth = lastEventMs - firstStartedMs;
+
+    // Reduce 20px for the last request's requests-list-timings-total
+    return Math.min(
+      Math.max(
+        (waterfallWidth - REQUESTS_WATERFALL.LABEL_WIDTH - 20) / longestWidth,
+        EPSILON
+      ),
+      1
+    );
+  }
+);
+
+function getVisibleColumns(columns) {
+  return Object.entries(columns).filter(([_, shown]) => shown);
+}
+
+const getColumns = createSelector(
+  state => state.ui,
+  state => state.search,
+  (ui, search) => {
+    if (
+      ((ui.networkDetailsOpen || search.panelOpen) &&
+        getVisibleColumns(ui.columns).length === 1 &&
+        ui.columns.waterfall) ||
+      (!ui.networkDetailsOpen && !search.panelOpen)
+    ) {
+      return ui.columns;
+    }
+
+    // Remove the Waterfall/Timeline column from the list of available
+    // columns if the details side-bar is opened and more than one column is
+    // visible.
+    const columns = { ...ui.columns };
+    delete columns.waterfall;
+    return columns;
+  }
+);
+
+module.exports = {
+  getColumns,
+  getVisibleColumns,
+  getWaterfallScale,
+};
diff --git a/devtools/client/netmonitor/src/utils/context-menu-utils.js b/devtools/client/netmonitor/src/utils/context-menu-utils.js
new file mode 100644
index 0000000000..3b44ff20cc
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/context-menu-utils.js
@@ -0,0 +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/. */
+
+"use strict";
+
+/**
+ * The default format for the content copied to the
+ *  clipboard when the `Copy Value` option is selected.
+ */
+function baseCopyFormatter({ name, value, object, hasChildren }) {
+  if (hasChildren) {
+    return baseCopyAllFormatter({ [name]: value });
+  }
+  return `${value}`;
+}
+
+/**
+ * The default format for the content copied to the
+ *  clipboard when the `Copy All` option is selected.
+ * @param {Object} object The whole data object
+ */
+function baseCopyAllFormatter(object) {
+  return JSON.stringify(object, null, "\t");
+}
+
+module.exports = {
+  contextMenuFormatters: {
+    baseCopyFormatter,
+    baseCopyAllFormatter,
+  },
+};
diff --git a/devtools/client/netmonitor/src/utils/doc-utils.js b/devtools/client/netmonitor/src/utils/doc-utils.js
new file mode 100644
index 0000000000..7427be2bd2
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/doc-utils.js
@@ -0,0 +1,223 @@
+/* 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 {
+  SUPPORTED_HTTP_CODES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+/**
+ * A mapping of header names to external documentation. Any header included
+ * here will show a MDN link alongside it.
+ */
+const SUPPORTED_HEADERS = [
+  "Accept",
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Accept-Ranges",
+  "Access-Control-Allow-Credentials",
+  "Access-Control-Allow-Headers",
+  "Access-Control-Allow-Methods",
+  "Access-Control-Allow-Origin",
+  "Access-Control-Expose-Headers",
+  "Access-Control-Max-Age",
+  "Access-Control-Request-Headers",
+  "Access-Control-Request-Method",
+  "Age",
+  "Allow",
+  "Authorization",
+  "Cache-Control",
+  "Clear-Site-Data",
+  "Connection",
+  "Content-Disposition",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Location",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Security-Policy-Report-Only",
+  "Content-Type",
+  "Cookie",
+  "Cookie2",
+  "DNT",
+  "Date",
+  "ETag",
+  "Early-Data",
+  "Expect",
+  "Expect-CT",
+  "Expires",
+  "Feature-Policy",
+  "Forwarded",
+  "From",
+  "Host",
+  "If-Match",
+  "If-Modified-Since",
+  "If-None-Match",
+  "If-Range",
+  "If-Unmodified-Since",
+  "Keep-Alive",
+  "Last-Modified",
+  "Location",
+  "Origin",
+  "Pragma",
+  "Proxy-Authenticate",
+  "Public-Key-Pins",
+  "Public-Key-Pins-Report-Only",
+  "Range",
+  "Referer",
+  "Referrer-Policy",
+  "Retry-After",
+  "Save-Data",
+  "Sec-Fetch-Dest",
+  "Sec-Fetch-Mode",
+  "Sec-Fetch-Site",
+  "Sec-Fetch-User",
+  "Sec-GPC",
+  "Server",
+  "Server-Timing",
+  "Set-Cookie",
+  "Set-Cookie2",
+  "SourceMap",
+  "Strict-Transport-Security",
+  "TE",
+  "Timing-Allow-Origin",
+  "Tk",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade-Insecure-Requests",
+  "User-Agent",
+  "Vary",
+  "Via",
+  "WWW-Authenticate",
+  "Warning",
+  "X-Content-Type-Options",
+  "X-DNS-Prefetch-Control",
+  "X-Forwarded-For",
+  "X-Forwarded-Host",
+  "X-Forwarded-Proto",
+  "X-Frame-Options",
+  "X-XSS-Protection",
+];
+
+const MDN_URL = "https://developer.mozilla.org/docs/";
+const MDN_STATUS_CODES_LIST_URL = `${MDN_URL}Web/HTTP/Status`;
+const getGAParams = (panelId = "netmonitor") => {
+  return `?utm_source=mozilla&utm_medium=devtools-${panelId}&utm_campaign=default`;
+};
+
+// Base URL to DevTools user docs
+const USER_DOC_URL = "https://firefox-source-docs.mozilla.org/devtools-user/";
+
+/**
+ * Get the MDN URL for the specified header.
+ *
+ * @param {string} header Name of the header for the baseURL to use.
+ *
+ * @return {string} The MDN URL for the header, or null if not available.
+ */
+function getHeadersURL(header) {
+  const lowerCaseHeader = header.toLowerCase();
+  const idx = SUPPORTED_HEADERS.findIndex(
+    item => item.toLowerCase() === lowerCaseHeader
+  );
+  return idx > -1
+    ? `${MDN_URL}Web/HTTP/Headers/${SUPPORTED_HEADERS[idx] + getGAParams()}`
+    : null;
+}
+
+/**
+ * Get the MDN URL for the specified HTTP status code.
+ *
+ * @param {string} HTTP status code for the baseURL to use.
+ *
+ * @return {string} The MDN URL for the HTTP status code, or null if not available.
+ */
+function getHTTPStatusCodeURL(statusCode, panelId) {
+  return (
+    (SUPPORTED_HTTP_CODES.includes(statusCode)
+      ? `${MDN_URL}Web/HTTP/Status/${statusCode}`
+      : MDN_STATUS_CODES_LIST_URL) + getGAParams(panelId)
+  );
+}
+
+/**
+ * Get the URL of the Timings tag for Network Monitor.
+ *
+ * @return {string} the URL of the Timings tag for Network Monitor.
+ */
+function getNetMonitorTimingsURL() {
+  return `${USER_DOC_URL}network_monitor/request_details/#network-monitor-request-details-timings-tab`;
+}
+
+/**
+ * Get the URL for Performance Analysis
+ *
+ * @return {string} The URL for the documentation of Performance Analysis.
+ */
+function getPerformanceAnalysisURL() {
+  return `${USER_DOC_URL}network_monitor/performance_analysis/`;
+}
+
+/**
+ * Get the URL for Filter box
+ *
+ * @return {string} The URL for the documentation of Filter box.
+ */
+function getFilterBoxURL() {
+  return `${USER_DOC_URL}network_monitor/request_list/#filtering-by-properties`;
+}
+
+/**
+ * Get the MDN URL for Tracking Protection
+ *
+ * @return {string} The MDN URL for the documentation of Tracking Protection.
+ */
+function getTrackingProtectionURL() {
+  return `${MDN_URL}Mozilla/Firefox/Privacy/Tracking_Protection${getGAParams()}`;
+}
+
+/**
+ * Get the MDN URL for CORS error reason, falls back to generic cors error page
+ * if reason is not understood.
+ *
+ * @param {int} reason: Blocked Reason message from `netmonitor/src/constants.js`
+ *
+ * @returns {string} the MDN URL for the documentation of CORS errors
+ */
+function getCORSErrorURL(reason) {
+  // Map from blocked reasons from netmonitor/src/constants.js to the correct
+  // URL fragment to append to MDN_URL
+  const reasonMap = new Map([
+    [1001, "CORSDisabled"],
+    [1002, "CORSDidNotSucceed"],
+    [1003, "CORSRequestNotHttp"],
+    [1004, "CORSMultipleAllowOriginNotAllowed"],
+    [1005, "CORSMissingAllowOrigin"],
+    [1006, "CORSNotSupportingCredentials"],
+    [1007, "CORSAllowOriginNotMatchingOrigin"],
+    [1008, "CORSMIssingAllowCredentials"],
+    [1009, "CORSOriginHeaderNotAdded"],
+    [1010, "CORSExternalRedirectNotAllowed"],
+    [1011, "CORSPreflightDidNotSucceed"],
+    [1012, "CORSInvalidAllowMethod"],
+    [1013, "CORSMethodNotFound"],
+    [1014, "CORSInvalidAllowHeader"],
+    [1015, "CORSMissingAllowHeaderFromPreflight"],
+  ]);
+  const urlFrag = reasonMap.get(reason) || "";
+  return `${MDN_URL}Web/HTTP/CORS/Errors/${urlFrag}`;
+}
+
+module.exports = {
+  getHeadersURL,
+  getHTTPStatusCodeURL,
+  getNetMonitorTimingsURL,
+  getPerformanceAnalysisURL,
+  getFilterBoxURL,
+  getTrackingProtectionURL,
+  getCORSErrorURL,
+};
diff --git a/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js b/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js
new file mode 100644
index 0000000000..991027c67b
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js
@@ -0,0 +1,209 @@
+/* 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 {
+  FILTER_FLAGS,
+  SUPPORTED_HTTP_CODES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const {
+  getRequestPriorityAsText,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+/**
+ * Generates a value for the given filter
+ * ie. if flag = status-code, will generate "200" from the given request item.
+ * For flags related to cookies, it might generate an array based on the request
+ * ie. ["cookie-name-1", "cookie-name-2", ...]
+ *
+ * @param {string} flag - flag specified in filter, ie. "status-code"
+ * @param {object} request - Network request item
+ * @return {string|Array} - The output is a string or an array based on the request
+ */
+function getAutocompleteValuesForFlag(flag, request) {
+  let values = [];
+  let { responseCookies = { cookies: [] } } = request;
+  responseCookies = responseCookies.cookies || responseCookies;
+
+  switch (flag) {
+    case "status-code":
+      // Sometimes status comes as Number
+      values.push(String(request.status));
+      break;
+    case "scheme":
+      values.push(request.urlDetails.scheme);
+      break;
+    case "domain":
+      values.push(request.urlDetails.host);
+      break;
+    case "remote-ip":
+      values.push(request.remoteAddress);
+      break;
+    case "cause":
+      values.push(request.cause.type);
+      break;
+    case "mime-type":
+      values.push((request.mimeType || "").replace(/;.+/, ""));
+      break;
+    case "set-cookie-name":
+      values = responseCookies.map(c => c.name);
+      break;
+    case "set-cookie-value":
+      values = responseCookies.map(c => c.value);
+      break;
+    case "priority":
+      values.push(getRequestPriorityAsText(request.priority));
+      break;
+    case "set-cookie-domain":
+      values = responseCookies.map(c =>
+        c.hasOwnProperty("domain") ? c.domain : request.urlDetails.host
+      );
+      break;
+    case "is":
+      values = ["cached", "from-cache", "running"];
+      break;
+    case "has-response-header":
+      // Some requests not having responseHeaders..?
+      values = request.responseHeaders
+        ? request.responseHeaders.headers.map(h => h.name)
+        : [];
+      break;
+    case "protocol":
+      values.push(request.httpVersion);
+      break;
+    case "method":
+    default:
+      values.push(request[flag]);
+  }
+
+  return values;
+}
+
+/**
+ * For a given lastToken passed ie. "is:", returns an array of populated flag
+ * values for consumption in autocompleteProvider
+ * ie. ["is:cached", "is:running", "is:from-cache"]
+ *
+ * @param {string} lastToken - lastToken parsed from filter input, ie "is:"
+ * @param {object} requests - List of requests from which values are generated
+ * @return {Array} - array of autocomplete values
+ */
+function getLastTokenFlagValues(lastToken, requests) {
+  // The last token must be a string like "method:GET" or "method:", Any token
+  // without a ":" cant be used to parse out flag values
+  if (!lastToken.includes(":")) {
+    return [];
+  }
+
+  // Parse out possible flag from lastToken
+  let [flag, typedFlagValue] = lastToken.split(":");
+  let isNegativeFlag = false;
+
+  // Check if flag is used with negative match
+  if (flag.startsWith("-")) {
+    flag = flag.slice(1);
+    isNegativeFlag = true;
+  }
+
+  // Flag is some random string, return
+  if (!FILTER_FLAGS.includes(flag)) {
+    return [];
+  }
+
+  let values = [];
+  for (const request of requests) {
+    values.push(...getAutocompleteValuesForFlag(flag, request));
+  }
+  values = [...new Set(values)];
+
+  return values
+    .filter(value => value)
+    .filter(value => {
+      if (typedFlagValue && value) {
+        const lowerTyped = typedFlagValue.toLowerCase();
+        const lowerValue = value.toLowerCase();
+        return lowerValue.includes(lowerTyped) && lowerValue !== lowerTyped;
+      }
+      return (
+        typeof value !== "undefined" && value !== "" && value !== "undefined"
+      );
+    })
+    .sort()
+    .map(value => (isNegativeFlag ? `-${flag}:${value}` : `${flag}:${value}`));
+}
+
+/**
+ * Generates an autocomplete list for the search-box for network monitor
+ *
+ * It expects an entire string of the searchbox ie "is:cached pr".
+ * The string is then tokenized into "is:cached" and "pr"
+ *
+ * @param {string} filter - The entire search string of the search box
+ * @param {object} requests - Iteratable object of requests displayed
+ * @return {Array} - The output is an array of objects as below
+ * [{value: "is:cached protocol", displayValue: "protocol"}[, ...]]
+ * `value` is used to update the search-box input box for given item
+ * `displayValue` is used to render the autocomplete list
+ */
+function autocompleteProvider(filter, requests) {
+  if (!filter) {
+    return [];
+  }
+
+  const negativeAutocompleteList = FILTER_FLAGS.map(item => `-${item}`);
+  const baseList = [...FILTER_FLAGS, ...negativeAutocompleteList].map(
+    item => `${item}:`
+  );
+
+  // The last token is used to filter the base autocomplete list
+  const tokens = filter.split(/\s+/g);
+  const lastToken = tokens[tokens.length - 1];
+  const previousTokens = tokens.slice(0, tokens.length - 1);
+
+  // Autocomplete list is not generated for empty lastToken
+  if (!lastToken) {
+    return [];
+  }
+
+  let autocompleteList;
+  const availableValues = getLastTokenFlagValues(lastToken, requests);
+  if (availableValues.length) {
+    autocompleteList = availableValues;
+  } else {
+    const isNegativeFlag = lastToken.startsWith("-");
+
+    // Stores list of HTTP codes that starts with value of lastToken
+    const filteredStatusCodes = SUPPORTED_HTTP_CODES.filter(item => {
+      item = isNegativeFlag ? item.substr(1) : item;
+      return item.toLowerCase().startsWith(lastToken.toLowerCase());
+    });
+
+    if (filteredStatusCodes.length) {
+      // Shows an autocomplete list of "status-code" values from filteredStatusCodes
+      autocompleteList = isNegativeFlag
+        ? filteredStatusCodes.map(item => `-status-code:${item}`)
+        : filteredStatusCodes.map(item => `status-code:${item}`);
+    } else {
+      // Shows an autocomplete list of values from baseList
+      // that starts with value of lastToken
+      autocompleteList = baseList.filter(item => {
+        return (
+          item.toLowerCase().startsWith(lastToken.toLowerCase()) &&
+          item.toLowerCase() !== lastToken.toLowerCase()
+        );
+      });
+    }
+  }
+
+  return autocompleteList.sort().map(item => ({
+    value: [...previousTokens, item].join(" "),
+    displayValue: item,
+  }));
+}
+
+module.exports = {
+  autocompleteProvider,
+};
diff --git a/devtools/client/netmonitor/src/utils/filter-predicates.js b/devtools/client/netmonitor/src/utils/filter-predicates.js
new file mode 100644
index 0000000000..63105dec0c
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/filter-predicates.js
@@ -0,0 +1,137 @@
+/* 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 {
+  isFreetextMatch,
+} = require("resource://devtools/client/netmonitor/src/utils/filter-text-utils.js");
+
+/**
+ * Predicates used when filtering items.
+ *
+ * @param object item
+ *        The filtered item.
+ * @return boolean
+ *         True if the item should be visible, false otherwise.
+ */
+function all() {
+  return true;
+}
+
+function isHtml({ mimeType }) {
+  return (
+    mimeType && (mimeType.includes("/html") || mimeType.includes("/xhtml+xml"))
+  );
+}
+
+function isCss({ mimeType }) {
+  return mimeType && mimeType.includes("/css");
+}
+
+function isJs({ mimeType }) {
+  return (
+    mimeType &&
+    (mimeType.includes("/ecmascript") ||
+      mimeType.includes("/javascript") ||
+      mimeType.includes("/x-javascript"))
+  );
+}
+
+function isXHR(item) {
+  // Show the request it is XHR, except if the request is a WS upgrade
+  return item.isXHR && !isWS(item);
+}
+
+function isFont({ url, mimeType }) {
+  // Fonts are a mess.
+  return (
+    (mimeType && (mimeType.includes("font/") || mimeType.includes("/font"))) ||
+    url.includes(".eot") ||
+    url.includes(".ttf") ||
+    url.includes(".otf") ||
+    url.includes(".woff")
+  );
+}
+
+function isImage({ mimeType, cause }) {
+  // We check cause.type so anything loaded via "img", "imageset", "lazy-img", etc. is in the right category
+  // When mimeType is not set to "image/", we still "detect" the image with cause.type (Bug-1654257)
+  return (
+    mimeType?.includes("image/") ||
+    cause?.type.includes("img") ||
+    cause?.type.includes("image")
+  );
+}
+
+function isMedia({ mimeType }) {
+  // Not including images.
+  return (
+    mimeType &&
+    (mimeType.includes("audio/") ||
+      mimeType.includes("video/") ||
+      mimeType.includes("model/") ||
+      mimeType === "application/vnd.apple.mpegurl" ||
+      mimeType === "application/x-mpegurl" ||
+      mimeType === "application/ogg")
+  );
+}
+
+function isWS({ requestHeaders, responseHeaders, cause }) {
+  // For the first call, the requestHeaders is not ready(empty),
+  // so checking for cause.type instead (Bug-1454962)
+  if (typeof cause.type === "string" && cause.type === "websocket") {
+    return true;
+  }
+  // Detect a websocket upgrade if request has an Upgrade header with value 'websocket'
+  if (!requestHeaders || !Array.isArray(requestHeaders.headers)) {
+    return false;
+  }
+
+  // Find the 'upgrade' header.
+  let upgradeHeader = requestHeaders.headers.find(header => {
+    return header.name.toLowerCase() == "upgrade";
+  });
+
+  // If no header found on request, check response - mainly to get
+  // something we can unit test, as it is impossible to set
+  // the Upgrade header on outgoing XHR as per the spec.
+  if (
+    !upgradeHeader &&
+    responseHeaders &&
+    Array.isArray(responseHeaders.headers)
+  ) {
+    upgradeHeader = responseHeaders.headers.find(header => {
+      return header.name.toLowerCase() == "upgrade";
+    });
+  }
+
+  // Return false if there is no such header or if its value isn't 'websocket'.
+  if (!upgradeHeader || upgradeHeader.value != "websocket") {
+    return false;
+  }
+
+  return true;
+}
+
+function isOther(item) {
+  const tests = [isHtml, isCss, isJs, isXHR, isFont, isImage, isMedia, isWS];
+  return tests.every(is => !is(item));
+}
+
+module.exports = {
+  Filters: {
+    all,
+    html: isHtml,
+    css: isCss,
+    js: isJs,
+    xhr: isXHR,
+    fonts: isFont,
+    images: isImage,
+    media: isMedia,
+    ws: isWS,
+    other: isOther,
+  },
+  isFreetextMatch,
+};
diff --git a/devtools/client/netmonitor/src/utils/filter-text-utils.js b/devtools/client/netmonitor/src/utils/filter-text-utils.js
new file mode 100644
index 0000000000..911e70e4bd
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/filter-text-utils.js
@@ -0,0 +1,291 @@
+/*
+ * Copyright (c) 2013 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+"use strict";
+
+const {
+  FILTER_FLAGS,
+  SUPPORTED_HTTP_CODES,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getFormattedIPAndPort,
+  getRequestPriorityAsText,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+  getUnicodeUrl,
+} = require("resource://devtools/client/shared/unicode-url.js");
+const {
+  getUrlBaseName,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/*
+  The function `parseFilters` is from:
+  https://github.com/ChromeDevTools/devtools-frontend/
+
+  front_end/network/FilterSuggestionBuilder.js#L138-L163
+  Commit f340aefd7ec9b702de9366a812288cfb12111fce
+*/
+
+function parseFilters(query) {
+  const flags = [];
+  const text = [];
+  const parts = query.split(/\s+/);
+
+  for (const part of parts) {
+    if (!part) {
+      continue;
+    }
+    const colonIndex = part.indexOf(":");
+    if (colonIndex === -1) {
+      const isNegative = part.startsWith("-");
+      // Stores list of HTTP codes that starts with value of lastToken
+      const filteredStatusCodes = SUPPORTED_HTTP_CODES.filter(item => {
+        item = isNegative ? item.substr(1) : item;
+        return item.toLowerCase().startsWith(part.toLowerCase());
+      });
+
+      if (filteredStatusCodes.length) {
+        flags.push({
+          type: "status-code", // a standard key before a colon
+          value: isNegative ? part.substring(1) : part,
+          isNegative,
+        });
+        continue;
+      }
+
+      // Value of lastToken is just text that does not correspond to status codes
+      text.push(part);
+      continue;
+    }
+    let key = part.substring(0, colonIndex);
+    const negative = key.startsWith("-");
+    if (negative) {
+      key = key.substring(1);
+    }
+    if (!FILTER_FLAGS.includes(key)) {
+      text.push(part);
+      continue;
+    }
+    let value = part.substring(colonIndex + 1);
+    value = processFlagFilter(key, value);
+    flags.push({
+      type: key,
+      value,
+      negative,
+    });
+  }
+
+  return { text, flags };
+}
+
+function processFlagFilter(type, value) {
+  switch (type) {
+    case "regexp":
+      return value;
+    case "size":
+    case "transferred":
+    case "larger-than":
+    case "transferred-larger-than":
+      let multiplier = 1;
+      if (value.endsWith("k")) {
+        multiplier = 1000;
+        value = value.substring(0, value.length - 1);
+      } else if (value.endsWith("m")) {
+        multiplier = 1000 * 1000;
+        value = value.substring(0, value.length - 1);
+      }
+      const quantity = Number(value);
+      if (isNaN(quantity)) {
+        return null;
+      }
+      return quantity * multiplier;
+    default:
+      return value.toLowerCase();
+  }
+}
+
+function isFlagFilterMatch(item, { type, value, negative }) {
+  if (value == null) {
+    return false;
+  }
+
+  // Ensures when filter token is exactly a flag ie. "remote-ip:", all values are shown
+  if (value.length < 1) {
+    return true;
+  }
+
+  let match = true;
+  let { responseCookies = { cookies: [] } } = item;
+  responseCookies = responseCookies.cookies || responseCookies;
+
+  const matchers = {
+    "status-code": () =>
+      item.status && item.status.toString().startsWith(value),
+    method: () => item.method.toLowerCase() === value,
+    protocol: () => {
+      const protocol = item.httpVersion;
+      return typeof protocol === "string"
+        ? protocol.toLowerCase().includes(value)
+        : false;
+    },
+    domain: () => item.urlDetails.host.toLowerCase().includes(value),
+    "remote-ip": () => {
+      const data = getFormattedIPAndPort(item.remoteAddress, item.remotePort);
+      return data ? data.toLowerCase().includes(value) : false;
+    },
+    "has-response-header": () => {
+      if (typeof item.responseHeaders === "object") {
+        const { headers } = item.responseHeaders;
+        return headers.findIndex(h => h.name.toLowerCase() === value) > -1;
+      }
+      return false;
+    },
+    cause: () => {
+      const causeType = item.cause.type;
+      return typeof causeType === "string"
+        ? causeType.toLowerCase().includes(value)
+        : false;
+    },
+    initiator: () => {
+      const initiator = item.cause.lastFrame
+        ? getUrlBaseName(item.cause.lastFrame.filename) +
+          ":" +
+          item.cause.lastFrame.lineNumber
+        : "";
+      return typeof initiator === "string"
+        ? initiator.toLowerCase().includes(value)
+        : !value;
+    },
+    transferred: () => {
+      if (item.fromCache) {
+        return false;
+      }
+      return isSizeMatch(value, item.transferredSize);
+    },
+    size: () => isSizeMatch(value, item.contentSize),
+    "larger-than": () => item.contentSize > value,
+    "transferred-larger-than": () => {
+      if (item.fromCache) {
+        return false;
+      }
+      return item.transferredSize > value;
+    },
+    "mime-type": () => {
+      if (!item.mimeType) {
+        return false;
+      }
+      return item.mimeType.includes(value);
+    },
+    is: () => {
+      if (value === "from-cache" || value === "cached") {
+        return item.fromCache || item.status === "304";
+      }
+      if (value === "running") {
+        return !item.status;
+      }
+      return match;
+    },
+    scheme: () => item.urlDetails.scheme === value,
+    regexp: () => {
+      try {
+        const pattern = new RegExp(value);
+        return pattern.test(item.url);
+      } catch (e) {
+        return false;
+      }
+    },
+    priority: () =>
+      getRequestPriorityAsText(item.priority).toLowerCase() == value,
+    "set-cookie-domain": () => {
+      if (responseCookies.length) {
+        const { host } = item.urlDetails;
+        const i = responseCookies.findIndex(c => {
+          const domain = c.hasOwnProperty("domain") ? c.domain : host;
+          return domain.includes(value);
+        });
+        return i > -1;
+      }
+      return false;
+    },
+    "set-cookie-name": () =>
+      responseCookies.findIndex(c => c.name.toLowerCase().includes(value)) > -1,
+    "set-cookie-value": () =>
+      responseCookies.findIndex(c => c.value.toLowerCase().includes(value)) >
+      -1,
+  };
+
+  const matcher = matchers[type];
+  if (matcher) {
+    match = matcher();
+  }
+
+  return negative ? !match : match;
+}
+
+function isSizeMatch(value, size) {
+  return value >= size - size / 10 && value <= size + size / 10;
+}
+
+function isTextFilterMatch({ url }, text) {
+  const lowerCaseUrl = getUnicodeUrl(url).toLowerCase();
+  let lowerCaseText = text.toLowerCase();
+  const textLength = text.length;
+  // Support negative filtering
+  if (text.startsWith("-") && textLength > 1) {
+    lowerCaseText = lowerCaseText.substring(1, textLength);
+    return !lowerCaseUrl.includes(lowerCaseText);
+  }
+
+  // no text is a positive match
+  return !text || lowerCaseUrl.includes(lowerCaseText);
+}
+
+function isFreetextMatch(item, text) {
+  if (!text) {
+    return true;
+  }
+
+  const filters = parseFilters(text);
+  let match = true;
+
+  for (const textFilter of filters.text) {
+    match = match && isTextFilterMatch(item, textFilter);
+  }
+
+  for (const flagFilter of filters.flags) {
+    match = match && isFlagFilterMatch(item, flagFilter);
+  }
+
+  return match;
+}
+
+module.exports = {
+  isFreetextMatch,
+};
diff --git a/devtools/client/netmonitor/src/utils/firefox/moz.build b/devtools/client/netmonitor/src/utils/firefox/moz.build
new file mode 100644
index 0000000000..bb0acafdf7
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/firefox/moz.build
@@ -0,0 +1,8 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "open-request-in-tab.js",
+)
diff --git a/devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js b/devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js
new file mode 100644
index 0000000000..20ea3dcba2
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.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/. */
+
+// This file is a chrome-API-dependent version of the module
+// devtools/client/netmonitor/src/utils/open-request-in-tab.js, so that it can
+// take advantage of utilizing chrome APIs. But because of this, it isn't
+// intended to be used in Chrome-API-free applications, such as the Launchpad.
+//
+// Please keep in mind that if the feature in this file has changed, don't
+// forget to also change that accordingly in
+// devtools/client/netmonitor/src/utils/open-request-in-tab.js.
+
+"use strict";
+
+const {
+  gDevTools,
+} = require("resource://devtools/client/framework/devtools.js");
+
+/**
+ * Opens given request in a new tab.
+ */
+function openRequestInTab(url, requestHeaders, requestPostData) {
+  const win = Services.wm.getMostRecentWindow(gDevTools.chromeWindowType);
+  const rawData = requestPostData ? requestPostData.postData : null;
+  let postData;
+
+  if (rawData?.text) {
+    const stringStream = getInputStreamFromString(rawData.text);
+    postData = Cc["@mozilla.org/network/mime-input-stream;1"].createInstance(
+      Ci.nsIMIMEInputStream
+    );
+
+    const contentTypeHeader = requestHeaders.headers.find(e => {
+      return e.name.toLowerCase() === "content-type";
+    });
+
+    postData.addHeader(
+      "Content-Type",
+      contentTypeHeader
+        ? contentTypeHeader.value
+        : "application/x-www-form-urlencoded"
+    );
+    postData.setData(stringStream);
+  }
+  const { userContextId } = win.gBrowser.contentPrincipal;
+  win.gBrowser.selectedTab = win.gBrowser.addWebTab(url, {
+    // TODO this should be using the original request principal
+    triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({
+      userContextId,
+    }),
+    userContextId,
+    postData,
+  });
+}
+
+function getInputStreamFromString(data) {
+  const stringStream = Cc[
+    "@mozilla.org/io/string-input-stream;1"
+  ].createInstance(Ci.nsIStringInputStream);
+  stringStream.data = data;
+  return stringStream;
+}
+
+module.exports = {
+  openRequestInTab,
+};
diff --git a/devtools/client/netmonitor/src/utils/format-utils.js b/devtools/client/netmonitor/src/utils/format-utils.js
new file mode 100644
index 0000000000..c0d5c29818
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/format-utils.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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+// Constants for formatting bytes.
+const BYTES_IN_KB = 1000;
+const BYTES_IN_MB = Math.pow(BYTES_IN_KB, 2);
+const BYTES_IN_GB = Math.pow(BYTES_IN_KB, 3);
+const MAX_BYTES_SIZE = 1000;
+const MAX_KB_SIZE = 1000 * BYTES_IN_KB;
+const MAX_MB_SIZE = 1000 * BYTES_IN_MB;
+
+// Constants for formatting time.
+const MAX_MILLISECOND = 1000;
+const MAX_SECOND = 60 * MAX_MILLISECOND;
+
+const REQUEST_DECIMALS = 2;
+
+// Constants for formatting the priority, derived from nsISupportsPriority.idl
+const PRIORITY_HIGH = -10;
+const PRIORITY_NORMAL = 0;
+const PRIORITY_LOW = 10;
+
+function getSizeWithDecimals(size, decimals = REQUEST_DECIMALS) {
+  return L10N.numberWithDecimals(size, decimals);
+}
+
+function getTimeWithDecimals(time) {
+  return L10N.numberWithDecimals(time, REQUEST_DECIMALS);
+}
+
+function formatDecimals(size, decimals) {
+  return size % 1 > 0 ? decimals : 0;
+}
+
+/**
+ * Get a human-readable string from a number of bytes, with the B, kB, MB, or
+ * GB value.
+ */
+function getFormattedSize(bytes, decimals = REQUEST_DECIMALS) {
+  if (bytes < MAX_BYTES_SIZE) {
+    return L10N.getFormatStr("networkMenu.sizeB", bytes);
+  }
+  if (bytes < MAX_KB_SIZE) {
+    const kb = bytes / BYTES_IN_KB;
+    const formattedDecimals = formatDecimals(kb, decimals);
+
+    return L10N.getFormatStr(
+      "networkMenu.size.kB",
+      getSizeWithDecimals(kb, formattedDecimals)
+    );
+  }
+  if (bytes < MAX_MB_SIZE) {
+    const mb = bytes / BYTES_IN_MB;
+    const formattedDecimals = formatDecimals(mb, decimals);
+    return L10N.getFormatStr(
+      "networkMenu.sizeMB",
+      getSizeWithDecimals(mb, formattedDecimals)
+    );
+  }
+  const gb = bytes / BYTES_IN_GB;
+  const formattedDecimals = formatDecimals(gb, decimals);
+  return L10N.getFormatStr(
+    "networkMenu.sizeGB",
+    getSizeWithDecimals(gb, formattedDecimals)
+  );
+}
+
+/**
+ * Get a human-readable string from a number of time, with the ms, s, or min
+ * value.
+ */
+function getFormattedTime(ms) {
+  if (ms < MAX_MILLISECOND) {
+    return L10N.getFormatStr("networkMenu.millisecond", ms | 0);
+  }
+  if (ms < MAX_SECOND) {
+    const sec = ms / MAX_MILLISECOND;
+    return L10N.getFormatStr("networkMenu.second", getTimeWithDecimals(sec));
+  }
+  const min = ms / MAX_SECOND;
+  return L10N.getFormatStr("networkMenu.minute", getTimeWithDecimals(min));
+}
+
+/**
+ * Formats IP (v4 and v6) and port
+ *
+ * @param {string} ip - IP address
+ * @param {string} port
+ * @return {string} the formatted IP + port
+ */
+function getFormattedIPAndPort(ip, port) {
+  if (!port) {
+    return ip;
+  }
+  return ip.match(/:+/) ? `[${ip}]:${port}` : `${ip}:${port}`;
+}
+
+/**
+ * Formats the priority of a request
+ * Based on unix conventions
+ * See xpcom/threads/nsISupportsPriority.idl
+ *
+ * @param {Number} priority - request priority
+ */
+function getRequestPriorityAsText(priority) {
+  if (priority < PRIORITY_HIGH) {
+    return "Highest";
+  } else if (priority >= PRIORITY_HIGH && priority < PRIORITY_NORMAL) {
+    return "High";
+  } else if (priority === PRIORITY_NORMAL) {
+    return "Normal";
+  } else if (priority > PRIORITY_NORMAL && priority <= PRIORITY_LOW) {
+    return "Low";
+  }
+  return "Lowest";
+}
+
+module.exports = {
+  getFormattedIPAndPort,
+  getFormattedSize,
+  getFormattedTime,
+  getSizeWithDecimals,
+  getTimeWithDecimals,
+  getRequestPriorityAsText,
+};
diff --git a/devtools/client/netmonitor/src/utils/headers-provider.js b/devtools/client/netmonitor/src/utils/headers-provider.js
new file mode 100644
index 0000000000..a76e7d1c0e
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/headers-provider.js
@@ -0,0 +1,90 @@
+/* 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 {
+  ObjectProvider,
+} = require("resource://devtools/client/shared/components/tree/ObjectProvider.js");
+
+/**
+ * Custom tree provider.
+ *
+ * This provider is used to provide set of headers and is
+ * utilized by the HeadersPanel.
+ * The default ObjectProvider can't be used since it doesn't
+ * allow duplicities by design and so it can't support duplicity
+ * headers (more headers with the same name).
+ */
+var HeadersProvider = {
+  ...ObjectProvider,
+
+  getChildren(object) {
+    if (object && object.value instanceof HeaderList) {
+      return object.value.headers.map(
+        (header, index) => new Header(header.name, header.value, index)
+      );
+    }
+    return ObjectProvider.getChildren(object);
+  },
+
+  hasChildren(object) {
+    if (object.value instanceof HeaderList) {
+      return !!object.value.headers.length;
+    } else if (object instanceof Header) {
+      return false;
+    }
+    return ObjectProvider.hasChildren(object);
+  },
+
+  getLabel(object) {
+    if (object instanceof Header) {
+      return object.name;
+    }
+    return ObjectProvider.getLabel(object);
+  },
+
+  getValue(object) {
+    if (object instanceof Header) {
+      return object.value;
+    }
+    return ObjectProvider.getValue(object);
+  },
+
+  getKey(object) {
+    if (object instanceof Header) {
+      return object.key;
+    }
+    return ObjectProvider.getKey(object);
+  },
+
+  getType(object) {
+    if (object instanceof Header) {
+      return "string";
+    }
+    return ObjectProvider.getType(object);
+  },
+};
+
+/**
+ * Helper data structures for list of headers.
+ */
+function HeaderList(headers) {
+  // Clone, so the sort doesn't affect the original array.
+  this.headers = headers.slice(0);
+  this.headers.sort((a, b) => {
+    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
+}
+
+function Header(name, value, key) {
+  this.name = name;
+  this.value = value;
+  this.key = key;
+}
+
+module.exports = {
+  HeadersProvider,
+  HeaderList,
+};
diff --git a/devtools/client/netmonitor/src/utils/l10n.js b/devtools/client/netmonitor/src/utils/l10n.js
new file mode 100644
index 0000000000..74c8b22299
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/l10n.js
@@ -0,0 +1,11 @@
+/* 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 { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+
+const NET_STRINGS_URI = "devtools/client/locales/netmonitor.properties";
+
+exports.L10N = new LocalizationHelper(NET_STRINGS_URI);
diff --git a/devtools/client/netmonitor/src/utils/moz.build b/devtools/client/netmonitor/src/utils/moz.build
new file mode 100644
index 0000000000..2eb6aec69c
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/moz.build
@@ -0,0 +1,27 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "firefox",
+]
+
+DevToolsModules(
+    "context-menu-utils.js",
+    "doc-utils.js",
+    "filter-autocomplete-provider.js",
+    "filter-predicates.js",
+    "filter-text-utils.js",
+    "format-utils.js",
+    "headers-provider.js",
+    "l10n.js",
+    "open-request-in-tab.js",
+    "powershell.js",
+    "prefs.js",
+    "request-blocking.js",
+    "request-utils.js",
+    "sort-predicates.js",
+    "sort-utils.js",
+    "tooltips.js",
+)
diff --git a/devtools/client/netmonitor/src/utils/open-request-in-tab.js b/devtools/client/netmonitor/src/utils/open-request-in-tab.js
new file mode 100644
index 0000000000..cb63da61ec
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/open-request-in-tab.js
@@ -0,0 +1,63 @@
+/* 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/. */
+
+// This file is a chrome-API-free version of the module
+// devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js, so that
+// it can be used in Chrome-API-free applications, such as the Launchpad. But
+// because of this, it cannot take advantage of utilizing chrome APIs and should
+// implement the similar functionalities on its own.
+//
+// Please keep in mind that if the feature in this file has changed, don't
+// forget to also change that accordingly in
+// devtools/client/netmonitor/src/utils/firefox/open-request-in-tab.js.
+
+"use strict";
+
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+
+/**
+ * Opens given request in a new tab.
+ *
+ * For POST request supports application/x-www-form-urlencoded content-type only.
+ */
+function openRequestInTab(url, requestHeaders, requestPostData) {
+  if (!requestPostData) {
+    openContentLink(url, { relatedToCurrent: true });
+  } else {
+    openPostRequestInTabHelper({
+      url,
+      data: requestPostData.postData,
+    });
+  }
+}
+
+function openPostRequestInTabHelper({ url, data }) {
+  const form = document.createElement("form");
+  form.target = "_blank";
+  form.action = url;
+  form.method = "post";
+
+  if (data) {
+    for (const key in data) {
+      const input = document.createElement("input");
+      input.name = key;
+      input.value = data[key];
+      form.appendChild(input);
+    }
+  }
+
+  form.hidden = true;
+  document.body.appendChild(form);
+  form.submit();
+  form.remove();
+}
+
+module.exports = {
+  openRequestInTab,
+};
diff --git a/devtools/client/netmonitor/src/utils/powershell.js b/devtools/client/netmonitor/src/utils/powershell.js
new file mode 100644
index 0000000000..2efcfd8faa
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/powershell.js
@@ -0,0 +1,142 @@
+/* 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/. */
+
+/*
+ * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2022 Mozilla Foundation. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// Utility to generate commands to invoke a request for powershell
+"use strict";
+
+// Some of these headers are passed in as seperate `Invoke-WebRequest` parameters so ignore
+// when building the headers list, others are not to neccesarily restrict the request.
+const IGNORED_HEADERS = [
+  "connection",
+  "proxy-connection",
+  "content-length",
+  "expect",
+  "range",
+  "host",
+  "content-type",
+  "user-agent",
+  "cookie",
+];
+/**
+ * This escapes strings for the powershell command
+ *
+ * 1. Escape the backtick, dollar sign and the double quotes See https://www.rlmueller.net/PowerShellEscape.htm
+ * 2. Convert any non printing ASCII characters found, using the ASCII code.
+ */
+function escapeStr(str) {
+  return `"${str
+    .replace(/[`\$"]/g, "`$&")
+    .replace(/[^\x20-\x7E]/g, char => "$([char]" + char.charCodeAt(0) + ")")}"`;
+}
+
+const PowerShell = {
+  generateCommand(url, method, headers, postData, cookies) {
+    const parameters = [];
+
+    // Create a WebSession to pass the information about cookies
+    // See https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.2#-websession
+    const session = [];
+    for (const { name, value, domain } of cookies) {
+      if (!session.length) {
+        session.push(
+          "$session = New-Object Microsoft.PowerShell.Commands.WebRequestSession"
+        );
+      }
+      session.push(
+        `$session.Cookies.Add((New-Object System.Net.Cookie(${escapeStr(
+          name
+        )}, ${escapeStr(value)}, "/", ${escapeStr(
+          domain || new URL(url).host
+        )})))`
+      );
+    }
+
+    parameters.push(`-Uri ${escapeStr(url)}`);
+
+    if (method !== "GET") {
+      parameters.push(`-Method ${method}`);
+    }
+
+    if (session.length) {
+      parameters.push("-WebSession $session");
+    }
+
+    const userAgent = headers.find(
+      ({ name }) => name.toLowerCase() === "user-agent"
+    );
+    if (userAgent) {
+      parameters.push("-UserAgent " + escapeStr(userAgent.value));
+    }
+
+    const headersStr = [];
+    for (let { name, value } of headers) {
+      // Translate any HTTP2 pseudo headers to HTTP headers
+      name = name.replace(/^:/, "");
+
+      if (IGNORED_HEADERS.includes(name.toLowerCase())) {
+        continue;
+      }
+      headersStr.push(`${escapeStr(name)} = ${escapeStr(value)}`);
+    }
+    if (headersStr.length) {
+      parameters.push(`-Headers @{\n${headersStr.join("\n  ")}\n}`);
+    }
+
+    const contentType = headers.find(
+      header => header.name.toLowerCase() === "content-type"
+    );
+    if (contentType) {
+      parameters.push("-ContentType " + escapeStr(contentType.value));
+    }
+
+    const formData = postData.text;
+    if (formData) {
+      // Encode bytes if any of the characters is not an ASCII printing character (not between Space character and ~ character)
+      // a-zA-Z0-9 etc. See http://www.asciitable.com/
+      const body = /[^\x20-\x7E]/.test(formData)
+        ? "([System.Text.Encoding]::UTF8.GetBytes(" + escapeStr(formData) + "))"
+        : escapeStr(formData);
+      parameters.push("-Body " + body);
+    }
+
+    return `${
+      session.length ? session.join("\n").concat("\n") : ""
+      // -UseBasicParsing is added for backward compatibility.
+      // See https://learn.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/invoke-webrequest?view=powershell-7.2#-usebasicparsing
+    }Invoke-WebRequest -UseBasicParsing ${parameters.join(" `\n")}`;
+  },
+};
+
+exports.PowerShell = PowerShell;
diff --git a/devtools/client/netmonitor/src/utils/prefs.js b/devtools/client/netmonitor/src/utils/prefs.js
new file mode 100644
index 0000000000..3c988f4294
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/prefs.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 { PrefsHelper } = require("resource://devtools/client/shared/prefs.js");
+
+/**
+ * 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"],
+  visibleColumns: ["Json", "visibleColumns"],
+  columnsData: ["Json", "columnsData"],
+  filters: ["Json", "filters"],
+});
diff --git a/devtools/client/netmonitor/src/utils/request-blocking.js b/devtools/client/netmonitor/src/utils/request-blocking.js
new file mode 100644
index 0000000000..67b217afe0
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/request-blocking.js
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+function hasMatchingBlockingRequestPattern(blockedUrls, url) {
+  return blockedUrls.some(blockedUrl => url.includes(blockedUrl));
+}
+
+module.exports = {
+  hasMatchingBlockingRequestPattern,
+};
diff --git a/devtools/client/netmonitor/src/utils/request-utils.js b/devtools/client/netmonitor/src/utils/request-utils.js
new file mode 100644
index 0000000000..5a0c312a88
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/request-utils.js
@@ -0,0 +1,773 @@
+/* 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 {
+  getUnicodeUrl,
+  getUnicodeUrlPath,
+  getUnicodeHostname,
+} = require("resource://devtools/client/shared/unicode-url.js");
+
+const {
+  UPDATE_PROPS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const CONTENT_MIME_TYPE_ABBREVIATIONS = {
+  ecmascript: "js",
+  javascript: "js",
+  "x-javascript": "js",
+};
+
+/**
+ * Extracts any urlencoded form data sections (e.g. "?foo=bar&baz=42") from a
+ * POST request.
+ *
+ * @param {object} headers - the "requestHeaders".
+ * @param {object} uploadHeaders - the "requestHeadersFromUploadStream".
+ * @param {object} postData - the "requestPostData".
+ * @return {array} a promise list that is resolved with the extracted form data.
+ */
+async function getFormDataSections(
+  headers,
+  uploadHeaders,
+  postData,
+  getLongString
+) {
+  const formDataSections = [];
+
+  const requestHeaders = headers.headers;
+  const payloadHeaders = uploadHeaders ? uploadHeaders.headers : [];
+  const allHeaders = [...payloadHeaders, ...requestHeaders];
+
+  const contentTypeHeader = allHeaders.find(e => {
+    return e.name.toLowerCase() == "content-type";
+  });
+
+  const contentTypeLongString = contentTypeHeader
+    ? contentTypeHeader.value
+    : "";
+
+  const contentType = await getLongString(contentTypeLongString);
+
+  if (contentType && contentType.includes("x-www-form-urlencoded")) {
+    const postDataLongString = postData.postData.text;
+    const text = await getLongString(postDataLongString);
+
+    for (const section of text.trim().split(/\r\n|\r|\n/)) {
+      // Before displaying it, make sure this section of the POST data
+      // isn't a line containing upload stream headers.
+      if (payloadHeaders.every(header => !section.startsWith(header.name))) {
+        formDataSections.push(section);
+      }
+    }
+  }
+
+  return formDataSections;
+}
+
+/**
+ * Fetch headers full content from actor server
+ *
+ * @param {object} headers - a object presents headers data
+ * @return {object} a headers object with updated content payload
+ */
+async function fetchHeaders(headers, getLongString) {
+  for (const { value } of headers.headers) {
+    headers.headers.value = await getLongString(value);
+  }
+  return headers;
+}
+
+/**
+ * Fetch network event update packets from actor server
+ * Expect to fetch a couple of network update packets from a given request.
+ *
+ * @param {function} requestData - requestData function for lazily fetch data
+ * @param {object} request - request object
+ * @param {array} updateTypes - a list of network event update types
+ */
+function fetchNetworkUpdatePacket(requestData, request, updateTypes) {
+  const promises = [];
+  if (request) {
+    updateTypes.forEach(updateType => {
+      // Only stackTrace will be handled differently
+      if (updateType === "stackTrace") {
+        if (request.cause.stacktraceAvailable && !request.stacktrace) {
+          promises.push(requestData(request.id, updateType));
+        }
+        return;
+      }
+
+      if (request[`${updateType}Available`] && !request[updateType]) {
+        promises.push(requestData(request.id, updateType));
+      }
+    });
+  }
+
+  return Promise.all(promises);
+}
+
+/**
+ * Form a data: URI given a mime type, encoding, and some text.
+ *
+ * @param {string} mimeType - mime type
+ * @param {string} encoding - encoding to use; if not set, the
+ *                            text will be base64-encoded.
+ * @param {string} text - text of the URI.
+ * @return {string} a data URI
+ */
+function formDataURI(mimeType, encoding, text) {
+  if (!encoding) {
+    encoding = "base64";
+    text = btoa(unescape(encodeURIComponent(text)));
+  }
+  return "data:" + mimeType + ";" + encoding + "," + text;
+}
+
+/**
+ * Write out a list of headers into a chunk of text
+ *
+ * @param {array} headers - array of headers info { name, value }
+ * @param {string} preHeaderText - first line of the headers request/response
+ * @return {string} list of headers in text format
+ */
+function writeHeaderText(headers, preHeaderText) {
+  let result = "";
+  if (preHeaderText) {
+    result += preHeaderText + "\r\n";
+  }
+  result += headers.map(({ name, value }) => name + ": " + value).join("\r\n");
+  result += "\r\n\r\n";
+  return result;
+}
+
+/**
+ * Decode base64 string.
+ *
+ * @param {string} url - a string
+ * @return {string} decoded string
+ */
+function decodeUnicodeBase64(string) {
+  try {
+    return decodeURIComponent(atob(string));
+  } catch (err) {
+    // Ignore error and return input string directly.
+  }
+  return string;
+}
+
+/**
+ * Helper for getting an abbreviated string for a mime type.
+ *
+ * @param {string} mimeType - mime type
+ * @return {string} abbreviated mime type
+ */
+function getAbbreviatedMimeType(mimeType) {
+  if (!mimeType) {
+    return "";
+  }
+  const abbrevType = (mimeType.split(";")[0].split("/")[1] || "").split("+")[0];
+  return CONTENT_MIME_TYPE_ABBREVIATIONS[abbrevType] || abbrevType;
+}
+
+/**
+ * Helpers for getting a filename from a mime type.
+ *
+ * @param {string} baseNameWithQuery - unicode basename and query of a url
+ * @return {string} unicode filename portion of a url
+ */
+function getFileName(baseNameWithQuery) {
+  const basename = baseNameWithQuery && baseNameWithQuery.split("?")[0];
+  return basename && basename.includes(".") ? basename : null;
+}
+
+/**
+ * Helpers for retrieving a URL object from a string
+ *
+ * @param {string} url - unvalidated url string
+ * @return {URL} The URL object
+ */
+function getUrl(url) {
+  try {
+    return new URL(url);
+  } catch (err) {
+    return null;
+  }
+}
+
+/**
+ * Helpers for retrieving the value of a URL object property
+ *
+ * @param {string} input - unvalidated url string
+ * @param {string} string - desired property in the URL object
+ * @return {string} unicode query of a url
+ */
+function getUrlProperty(input, property) {
+  const url = getUrl(input);
+  return url?.[property] ? url[property] : "";
+}
+
+/**
+ * Helpers for getting the last portion of a url.
+ * For example helper returns "basename" from http://domain.com/path/basename
+ * If basename portion is empty, it returns the url pathname.
+ *
+ * @param {string} input - unvalidated url string
+ * @return {string} unicode basename of a url
+ */
+function getUrlBaseName(url) {
+  const pathname = getUrlProperty(url, "pathname");
+  return getUnicodeUrlPath(pathname.replace(/\S*\//, "") || pathname || "/");
+}
+
+/**
+ * Helpers for getting the query portion of a url.
+ *
+ * @param {string} url - unvalidated url string
+ * @return {string} unicode query of a url
+ */
+function getUrlQuery(url) {
+  return getUrlProperty(url, "search").replace(/^\?/, "");
+}
+
+/**
+ * Helpers for getting unicode name and query portions of a url.
+ *
+ * @param {string} url - unvalidated url string
+ * @return {string} unicode basename and query portions of a url
+ */
+function getUrlBaseNameWithQuery(url) {
+  const basename = getUrlBaseName(url);
+  const search = getUrlProperty(url, "search");
+  return basename + getUnicodeUrlPath(search);
+}
+
+/**
+ * Helpers for getting hostname portion of an URL.
+ *
+ * @param {string} url - unvalidated url string
+ * @return {string} unicode hostname of a url
+ */
+function getUrlHostName(url) {
+  return getUrlProperty(url, "hostname");
+}
+
+/**
+ * Helpers for getting host portion of an URL.
+ *
+ * @param {string} url - unvalidated url string
+ * @return {string} unicode host of a url
+ */
+function getUrlHost(url) {
+  return getUrlProperty(url, "host");
+}
+
+/**
+ * Helpers for getting the shceme portion of a url.
+ * For example helper returns "http" from http://domain.com/path/basename
+ *
+ * @param {string}  url - unvalidated url string
+ * @return {string} string scheme of a url
+ */
+function getUrlScheme(url) {
+  const protocol = getUrlProperty(url, "protocol");
+  return protocol.replace(":", "").toLowerCase();
+}
+
+/**
+ * Extract several details fields from a URL at once.
+ */
+function getUrlDetails(url) {
+  const baseNameWithQuery = getUrlBaseNameWithQuery(url);
+  let host = getUrlHost(url);
+  const hostname = getUrlHostName(url);
+  const unicodeUrl = getUnicodeUrl(url);
+  const scheme = getUrlScheme(url);
+
+  // If the hostname contains unreadable ASCII characters, we need to do the
+  // following two steps:
+  // 1. Converting the unreadable hostname to a readable Unicode domain name.
+  //    For example, converting xn--g6w.xn--8pv into a Unicode domain name.
+  // 2. Replacing the unreadable hostname portion in the `host` with the
+  //    readable hostname.
+  //    For example, replacing xn--g6w.xn--8pv:8000 with [Unicode domain]:8000
+  // After finishing the two steps, we get a readable `host`.
+  const unicodeHostname = getUnicodeHostname(hostname);
+  if (unicodeHostname !== hostname) {
+    host = host.replace(hostname, unicodeHostname);
+  }
+
+  // Mark local hosts specially, where "local" is  as defined in the W3C
+  // spec for secure contexts.
+  // http://www.w3.org/TR/powerful-features/
+  //
+  //  * If the name falls under 'localhost'
+  //  * If the name is an IPv4 address within 127.0.0.0/8
+  //  * If the name is an IPv6 address within ::1/128
+  //
+  // IPv6 parsing is a little sloppy; it assumes that the address has
+  // been validated before it gets here.
+  const isLocal =
+    hostname.match(/(.+\.)?localhost$/) ||
+    hostname.match(/^127\.\d{1,3}\.\d{1,3}\.\d{1,3}/) ||
+    hostname.match(/\[[0:]+1\]/);
+
+  return {
+    baseNameWithQuery,
+    host,
+    scheme,
+    unicodeUrl,
+    isLocal,
+    url,
+  };
+}
+
+/**
+ * Parse a url's query string into its components
+ *
+ * @param {string} query - query string of a url portion
+ * @return {array} array of query params { name, value }
+ */
+function parseQueryString(query) {
+  if (!query) {
+    return null;
+  }
+  return query
+    .replace(/^[?&]/, "")
+    .split("&")
+    .map(e => {
+      const param = e.split("=");
+      return {
+        name: param[0] ? getUnicodeUrlPath(param[0].replace(/\+/g, " ")) : "",
+        value: param[1]
+          ? getUnicodeUrlPath(param.slice(1).join("=").replace(/\+/g, " "))
+          : "",
+      };
+    });
+}
+
+/**
+ * Parse a string of formdata sections into its components
+ *
+ * @param {string} sections - sections of formdata joined by &
+ * @return {array} array of formdata params { name, value }
+ */
+function parseFormData(sections) {
+  if (!sections) {
+    return [];
+  }
+
+  return sections
+    .replace(/^&/, "")
+    .split("&")
+    .map(e => {
+      const firstEqualSignIndex = e.indexOf("=");
+      const paramName =
+        firstEqualSignIndex !== -1 ? e.slice(0, firstEqualSignIndex) : e;
+      const paramValue =
+        firstEqualSignIndex !== -1 ? e.slice(firstEqualSignIndex + 1) : "";
+      return {
+        name: paramName ? getUnicodeUrlPath(paramName) : "",
+        value: paramValue ? getUnicodeUrlPath(paramValue) : "",
+      };
+    });
+}
+
+/**
+ * Reduces an IP address into a number for easier sorting
+ *
+ * @param {string} ip - IP address to reduce
+ * @return {number} the number representing the IP address
+ */
+function ipToLong(ip) {
+  if (!ip) {
+    // Invalid IP
+    return -1;
+  }
+
+  let base;
+  let octets = ip.split(".");
+
+  if (octets.length === 4) {
+    // IPv4
+    base = 10;
+  } else if (ip.includes(":")) {
+    // IPv6
+    const numberOfZeroSections =
+      8 - ip.replace(/^:+|:+$/g, "").split(/:+/g).length;
+    octets = ip
+      .replace("::", `:${"0:".repeat(numberOfZeroSections)}`)
+      .replace(/^:|:$/g, "")
+      .split(":");
+    base = 16;
+  } else {
+    // Invalid IP
+    return -1;
+  }
+  return octets
+    .map((val, ix, arr) => {
+      return parseInt(val, base) * Math.pow(256, arr.length - 1 - ix);
+    })
+    .reduce((sum, val) => {
+      return sum + val;
+    }, 0);
+}
+
+/**
+ * Compare two objects on a subset of their properties
+ */
+function propertiesEqual(props, item1, item2) {
+  return item1 === item2 || props.every(p => item1[p] === item2[p]);
+}
+
+/**
+ * Calculate the start time of a request, which is the time from start
+ * of 1st request until the start of this request.
+ *
+ * Without a firstRequestStartedMs argument the wrong time will be returned.
+ * However, it can be omitted when comparing two start times and neither supplies
+ * a firstRequestStartedMs.
+ */
+function getStartTime(item, firstRequestStartedMs = 0) {
+  return item.startedMs - firstRequestStartedMs;
+}
+
+/**
+ * Calculate the end time of a request, which is the time from start
+ * of 1st request until the end of this response.
+ *
+ * Without a firstRequestStartedMs argument the wrong time will be returned.
+ * However, it can be omitted when comparing two end times and neither supplies
+ * a firstRequestStartedMs.
+ */
+function getEndTime(item, firstRequestStartedMs = 0) {
+  const { startedMs, totalTime } = item;
+  return startedMs + totalTime - firstRequestStartedMs;
+}
+
+/**
+ * Calculate the response time of a request, which is the time from start
+ * of 1st request until the beginning of download of this response.
+ *
+ * Without a firstRequestStartedMs argument the wrong time will be returned.
+ * However, it can be omitted when comparing two response times and neither supplies
+ * a firstRequestStartedMs.
+ */
+function getResponseTime(item, firstRequestStartedMs = 0) {
+  const { startedMs, totalTime, eventTimings = { timings: {} } } = item;
+  return (
+    startedMs + totalTime - firstRequestStartedMs - eventTimings.timings.receive
+  );
+}
+
+/**
+ * Format the protocols used by the request.
+ */
+function getFormattedProtocol(item) {
+  const { httpVersion = "", responseHeaders = { headers: [] } } = item;
+  const protocol = [httpVersion];
+  responseHeaders.headers.some(h => {
+    if (h.hasOwnProperty("name") && h.name.toLowerCase() === "x-firefox-spdy") {
+      /**
+       * First we make sure h.value is defined and not an empty string.
+       * Then check that HTTP version and x-firefox-spdy == "http/1.1".
+       * If not, check that HTTP version and x-firefox-spdy have the same
+       * numeric value when of the forms "http/<x>" and "h<x>" respectively.
+       * If not, will push to protocol the non-standard x-firefox-spdy value.
+       *
+       * @see https://bugzilla.mozilla.org/show_bug.cgi?id=1501357
+       */
+      if (h.value !== undefined && h.value.length) {
+        if (
+          h.value.toLowerCase() !== "http/1.1" ||
+          protocol[0].toLowerCase() !== "http/1.1"
+        ) {
+          if (
+            parseFloat(h.value.toLowerCase().split("")[1]) !==
+            parseFloat(protocol[0].toLowerCase().split("/")[1])
+          ) {
+            protocol.push(h.value);
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  });
+  return protocol.join("+");
+}
+
+/**
+ * Get the value of a particular response header, or null if not
+ * present.
+ */
+function getResponseHeader(item, header) {
+  const { responseHeaders } = item;
+  if (!responseHeaders || !responseHeaders.headers.length) {
+    return null;
+  }
+  header = header.toLowerCase();
+  for (const responseHeader of responseHeaders.headers) {
+    if (responseHeader.name.toLowerCase() == header) {
+      return responseHeader.value;
+    }
+  }
+  return null;
+}
+
+/**
+ * Get the value of a particular request header, or null if not
+ * present.
+ */
+function getRequestHeader(item, header) {
+  const { requestHeaders } = item;
+  if (!requestHeaders || !requestHeaders.headers.length) {
+    return null;
+  }
+  header = header.toLowerCase();
+  for (const requestHeader of requestHeaders.headers) {
+    if (requestHeader.name.toLowerCase() == header) {
+      return requestHeader.value;
+    }
+  }
+  return null;
+}
+
+/**
+ * Extracts any urlencoded form data sections from a POST request.
+ */
+async function updateFormDataSections(props) {
+  const { connector, request = {}, updateRequest } = props;
+  let {
+    id,
+    formDataSections,
+    requestHeaders,
+    requestHeadersAvailable,
+    requestHeadersFromUploadStream,
+    requestPostData,
+    requestPostDataAvailable,
+  } = request;
+
+  if (requestHeadersAvailable && !requestHeaders) {
+    requestHeaders = await connector.requestData(id, "requestHeaders");
+  }
+
+  if (requestPostDataAvailable && !requestPostData) {
+    requestPostData = await connector.requestData(id, "requestPostData");
+  }
+
+  if (
+    !formDataSections &&
+    requestHeaders &&
+    requestPostData &&
+    requestHeadersFromUploadStream
+  ) {
+    formDataSections = await getFormDataSections(
+      requestHeaders,
+      requestHeadersFromUploadStream,
+      requestPostData,
+      connector.getLongString
+    );
+
+    updateRequest(request.id, { formDataSections }, true);
+  }
+}
+
+/**
+ * This helper function helps to resolve the full payload of a message
+ * that is wrapped in a LongStringActor object.
+ */
+async function getMessagePayload(payload, getLongString) {
+  const result = await getLongString(payload);
+  return result;
+}
+
+/**
+ * This helper function is used for additional processing of
+ * incoming network update packets. It makes sure the only valid
+ * update properties and the values are correct.
+ * It's used by Network and Console panel reducers.
+ * @param {object} update
+ *        The new update payload
+ * @param {object} request
+ *        The current request in the state
+ */
+function processNetworkUpdates(update) {
+  const newRequest = {};
+  for (const [key, value] of Object.entries(update)) {
+    if (UPDATE_PROPS.includes(key)) {
+      newRequest[key] = value;
+      if (key == "requestPostData") {
+        newRequest.requestHeadersFromUploadStream = value.uploadHeaders;
+      }
+    }
+  }
+  return newRequest;
+}
+
+/**
+ * This method checks that the response is base64 encoded by
+ * comparing these 2 values:
+ * 1. The original response
+ * 2. The value of doing a base64 decode on the
+ * response and then base64 encoding the result.
+ * If the values are different or an error is thrown,
+ * the method will return false.
+ */
+function isBase64(payload) {
+  try {
+    return btoa(atob(payload)) == payload;
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Checks if the payload is of JSON type.
+ * This function also handles JSON with XSSI-escaping characters by stripping them
+ * and returning the stripped chars in the strippedChars property
+ * This function also handles Base64 encoded JSON.
+ * @returns {Object} shape:
+ *  {Object} json: parsed JSON object
+ *  {Error} error: JSON parsing error
+ *  {string} strippedChars: XSSI stripped chars removed from JSON payload
+ */
+function parseJSON(payloadUnclean) {
+  let json;
+  const jsonpRegex = /^\s*([\w$]+)\s*\(\s*([^]*)\s*\)\s*;?\s*$/;
+  const [, jsonpCallback, jsonp] = payloadUnclean.match(jsonpRegex) || [];
+  if (jsonpCallback && jsonp) {
+    let error;
+    try {
+      json = parseJSON(jsonp).json;
+    } catch (err) {
+      error = err;
+    }
+    return { json, error, jsonpCallback };
+  }
+
+  let { payload, strippedChars, error } = removeXSSIString(payloadUnclean);
+
+  try {
+    json = JSON.parse(payload);
+  } catch (err) {
+    if (isBase64(payload)) {
+      try {
+        json = JSON.parse(atob(payload));
+      } catch (err64) {
+        error = err64;
+      }
+    } else {
+      error = err;
+    }
+  }
+
+  // Do not present JSON primitives (e.g. boolean, strings in quotes, numbers)
+  // as JSON expandable tree.
+  if (!error) {
+    if (typeof json !== "object") {
+      return {};
+    }
+  }
+  return {
+    json,
+    error,
+    strippedChars,
+  };
+}
+
+/**
+ * Removes XSSI prevention sequences from JSON payloads
+ * @param {string} payloadUnclean: JSON payload that may or may have a
+ *                                 XSSI prevention sequence
+ * @returns {Object} Shape:
+ *   {string} payload: the JSON witht the XSSI prevention sequence removed
+ *   {string} strippedChars: XSSI string that was removed, null if no XSSI
+ *                           prevention sequence was found
+ *   {Error} error: error attempting to strip XSSI prevention sequence
+ */
+function removeXSSIString(payloadUnclean) {
+  // Regex that finds the XSSI protection sequences )]}'\n for(;;); and while(1);
+  const xssiRegex = /(^\)\]\}',?\n)|(^for ?\(;;\);?)|(^while ?\(1\);?)/;
+  let payload, strippedChars, error;
+  const xssiRegexMatch = payloadUnclean.match(xssiRegex);
+
+  // Remove XSSI string if there was one found
+  if (xssiRegexMatch?.length > 0) {
+    const xssiLen = xssiRegexMatch[0].length;
+    try {
+      // substring the payload by the length of the XSSI match to remove it
+      // and save the match to report
+      payload = payloadUnclean.substring(xssiLen);
+      strippedChars = xssiRegexMatch[0];
+    } catch (err) {
+      error = err;
+      payload = payloadUnclean;
+    }
+  } else {
+    // if there was no XSSI match just return the raw payload
+    payload = payloadUnclean;
+  }
+  return {
+    payload,
+    strippedChars,
+    error,
+  };
+}
+
+/**
+ * Computes the request headers of an HTTP request
+ *
+ * @param {string} method: request method
+ * @param {string} httpVersion: request http version
+ * @param {object} requestHeaders: request headers
+ * @param {object} urlDetails: request url details
+ *
+ * @return {string} the request headers
+ */
+function getRequestHeadersRawText(
+  method,
+  httpVersion,
+  requestHeaders,
+  urlDetails
+) {
+  const url = new URL(urlDetails.url);
+  const path = url ? `${url.pathname}${url.search}` : "<unknown>";
+  const preHeaderText = `${method} ${path} ${httpVersion}`;
+  return writeHeaderText(requestHeaders.headers, preHeaderText).trim();
+}
+
+module.exports = {
+  decodeUnicodeBase64,
+  getFormDataSections,
+  fetchHeaders,
+  fetchNetworkUpdatePacket,
+  formDataURI,
+  writeHeaderText,
+  getAbbreviatedMimeType,
+  getFileName,
+  getEndTime,
+  getFormattedProtocol,
+  getMessagePayload,
+  getRequestHeader,
+  getResponseHeader,
+  getResponseTime,
+  getStartTime,
+  getUrlBaseName,
+  getUrlBaseNameWithQuery,
+  getUrlDetails,
+  getUrlHost,
+  getUrlHostName,
+  getUrlQuery,
+  getUrlScheme,
+  parseQueryString,
+  parseFormData,
+  updateFormDataSections,
+  processNetworkUpdates,
+  propertiesEqual,
+  ipToLong,
+  parseJSON,
+  getRequestHeadersRawText,
+};
diff --git a/devtools/client/netmonitor/src/utils/sort-predicates.js b/devtools/client/netmonitor/src/utils/sort-predicates.js
new file mode 100644
index 0000000000..839a37d00e
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/sort-predicates.js
@@ -0,0 +1,319 @@
+/* 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 {
+  getAbbreviatedMimeType,
+  getEndTime,
+  getResponseTime,
+  getResponseHeader,
+  getStartTime,
+  ipToLong,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  RESPONSE_HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  getUrlBaseName,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+/**
+ * Predicates used when sorting items.
+ *
+ * @param object first
+ *        The first item used in the comparison.
+ * @param object second
+ *        The second item used in the comparison.
+ * @return number
+ *         <0 to sort first to a lower index than second
+ *         =0 to leave first and second unchanged with respect to each other
+ *         >0 to sort second to a lower index than first
+ */
+
+function compareValues(first, second) {
+  if (first === second) {
+    return 0;
+  }
+  return first > second ? 1 : -1;
+}
+
+function waterfall(first, second) {
+  const result = compareValues(first.startedMs, second.startedMs);
+  return result || compareValues(first.id, second.id);
+}
+
+function priority(first, second) {
+  const result = compareValues(first.priority, second.priority);
+  return result || waterfall(first, second);
+}
+
+function status(first, second) {
+  const result = compareValues(getStatusValue(first), getStatusValue(second));
+  return result || waterfall(first, second);
+}
+
+function method(first, second) {
+  const result = compareValues(first.method, second.method);
+  return result || waterfall(first, second);
+}
+
+function file(first, second) {
+  const firstUrl = first.urlDetails.baseNameWithQuery.toLowerCase();
+  const secondUrl = second.urlDetails.baseNameWithQuery.toLowerCase();
+  const result = compareValues(firstUrl, secondUrl);
+  return result || waterfall(first, second);
+}
+
+function url(first, second) {
+  const firstUrl = first.url.toLowerCase();
+  const secondUrl = second.url.toLowerCase();
+  const result = compareValues(firstUrl, secondUrl);
+  return result || waterfall(first, second);
+}
+
+function protocol(first, second) {
+  const result = compareValues(first.httpVersion, second.httpVersion);
+  return result || waterfall(first, second);
+}
+
+function scheme(first, second) {
+  const result = compareValues(
+    first.urlDetails.scheme,
+    second.urlDetails.scheme
+  );
+  return result || waterfall(first, second);
+}
+
+function startTime(first, second) {
+  const result = compareValues(getStartTime(first), getStartTime(second));
+  return result || waterfall(first, second);
+}
+
+function endTime(first, second) {
+  const result = compareValues(getEndTime(first), getEndTime(second));
+  return result || waterfall(first, second);
+}
+
+function responseTime(first, second) {
+  const result = compareValues(getResponseTime(first), getResponseTime(second));
+  return result || waterfall(first, second);
+}
+
+function duration(first, second) {
+  const result = compareValues(first.totalTime, second.totalTime);
+  return result || waterfall(first, second);
+}
+
+function latency(first, second) {
+  const { eventTimings: firstEventTimings = { timings: {} } } = first;
+  const { eventTimings: secondEventTimings = { timings: {} } } = second;
+  const result = compareValues(
+    firstEventTimings.timings.wait,
+    secondEventTimings.timings.wait
+  );
+  return result || waterfall(first, second);
+}
+
+function compareHeader(header, first, second) {
+  const firstValue = getResponseHeader(first, header) || "";
+  const secondValue = getResponseHeader(second, header) || "";
+
+  let result;
+
+  switch (header) {
+    case "Content-Length": {
+      result = compareValues(
+        parseInt(firstValue, 10) || 0,
+        parseInt(secondValue, 10) || 0
+      );
+      break;
+    }
+    case "Last-Modified": {
+      result = compareValues(
+        new Date(firstValue).valueOf() || -1,
+        new Date(secondValue).valueOf() || -1
+      );
+      break;
+    }
+    default: {
+      result = compareValues(firstValue, secondValue);
+      break;
+    }
+  }
+
+  return result || waterfall(first, second);
+}
+
+const responseHeaders = RESPONSE_HEADERS.reduce(
+  (acc, header) =>
+    Object.assign(acc, {
+      [header]: (first, second) => compareHeader(header, first, second),
+    }),
+  {}
+);
+
+function domain(first, second) {
+  const firstDomain = first.urlDetails.host.toLowerCase();
+  const secondDomain = second.urlDetails.host.toLowerCase();
+  const result = compareValues(firstDomain, secondDomain);
+  return result || waterfall(first, second);
+}
+
+function remoteip(first, second) {
+  const firstIP = ipToLong(first.remoteAddress);
+  const secondIP = ipToLong(second.remoteAddress);
+  const result = compareValues(firstIP, secondIP);
+  return result || waterfall(first, second);
+}
+
+function cause(first, second) {
+  const firstCause = first.cause.type;
+  const secondCause = second.cause.type;
+  const result = compareValues(firstCause, secondCause);
+  return result || waterfall(first, second);
+}
+
+function initiator(first, second) {
+  const firstCause = first.cause.type;
+  const secondCause = second.cause.type;
+
+  let firstInitiator = "";
+  let firstInitiatorLineNumber = 0;
+
+  if (first.cause.lastFrame) {
+    firstInitiator = getUrlBaseName(first.cause.lastFrame.filename);
+    firstInitiatorLineNumber = first.cause.lastFrame.lineNumber;
+  }
+
+  let secondInitiator = "";
+  let secondInitiatorLineNumber = 0;
+
+  if (second.cause.lastFrame) {
+    secondInitiator = getUrlBaseName(second.cause.lastFrame.filename);
+    secondInitiatorLineNumber = second.cause.lastFrame.lineNumber;
+  }
+
+  let result;
+  // if both initiators don't have a stack trace, compare their causes
+  if (!firstInitiator && !secondInitiator) {
+    result = compareValues(firstCause, secondCause);
+  } else if (!firstInitiator || !secondInitiator) {
+    // if one initiator doesn't have a stack trace but the other does, former should precede the latter
+    result = compareValues(firstInitiatorLineNumber, secondInitiatorLineNumber);
+  } else {
+    result = compareValues(firstInitiator, secondInitiator);
+    if (result === 0) {
+      result = compareValues(
+        firstInitiatorLineNumber,
+        secondInitiatorLineNumber
+      );
+    }
+  }
+
+  return result || waterfall(first, second);
+}
+
+function setCookies(first, second) {
+  let { responseCookies: firstResponseCookies = { cookies: [] } } = first;
+  let { responseCookies: secondResponseCookies = { cookies: [] } } = second;
+  firstResponseCookies = firstResponseCookies.cookies || firstResponseCookies;
+  secondResponseCookies =
+    secondResponseCookies.cookies || secondResponseCookies;
+  const result = compareValues(
+    firstResponseCookies.length,
+    secondResponseCookies.length
+  );
+  return result || waterfall(first, second);
+}
+
+function cookies(first, second) {
+  let { requestCookies: firstRequestCookies = { cookies: [] } } = first;
+  let { requestCookies: secondRequestCookies = { cookies: [] } } = second;
+  firstRequestCookies = firstRequestCookies.cookies || firstRequestCookies;
+  secondRequestCookies = secondRequestCookies.cookies || secondRequestCookies;
+  const result = compareValues(
+    firstRequestCookies.length,
+    secondRequestCookies.length
+  );
+  return result || waterfall(first, second);
+}
+
+function type(first, second) {
+  const firstType = getAbbreviatedMimeType(first.mimeType).toLowerCase();
+  const secondType = getAbbreviatedMimeType(second.mimeType).toLowerCase();
+  const result = compareValues(firstType, secondType);
+  return result || waterfall(first, second);
+}
+
+function getStatusValue(item) {
+  let value;
+  if (item.blockedReason) {
+    value = typeof item.blockedReason == "number" ? -item.blockedReason : -1000;
+  } else if (item.status == null) {
+    value = -2;
+  } else {
+    value = item.status;
+  }
+  return value;
+}
+
+function getTransferedSizeValue(item) {
+  let value;
+  if (item.blockedReason) {
+    // Also properly group/sort various blocked reasons.
+    value = typeof item.blockedReason == "number" ? -item.blockedReason : -1000;
+  } else if (item.fromCache || item.status === "304") {
+    value = -2;
+  } else if (item.fromServiceWorker) {
+    value = -3;
+  } else if (typeof item.transferredSize == "number") {
+    value = item.transferredSize;
+    if (item.isRacing && typeof item.isRacing == "boolean") {
+      value = -4;
+    }
+  } else if (item.transferredSize === null) {
+    value = -5;
+  }
+  return value;
+}
+
+function transferred(first, second) {
+  const result = compareValues(
+    getTransferedSizeValue(first),
+    getTransferedSizeValue(second)
+  );
+  return result || waterfall(first, second);
+}
+
+function contentSize(first, second) {
+  const result = compareValues(first.contentSize, second.contentSize);
+  return result || waterfall(first, second);
+}
+
+const sorters = {
+  status,
+  method,
+  domain,
+  file,
+  protocol,
+  scheme,
+  cookies,
+  setCookies,
+  remoteip,
+  cause,
+  initiator,
+  type,
+  transferred,
+  contentSize,
+  startTime,
+  endTime,
+  responseTime,
+  duration,
+  latency,
+  waterfall,
+  url,
+  priority,
+};
+exports.Sorters = Object.assign(sorters, responseHeaders);
diff --git a/devtools/client/netmonitor/src/utils/sort-utils.js b/devtools/client/netmonitor/src/utils/sort-utils.js
new file mode 100644
index 0000000000..a7f49417e8
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/sort-utils.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";
+
+/**
+ * Sorts object by keys in alphabetical order
+ * If object has nested children, it sorts the child-elements also by keys
+ * @param {object} which should be sorted by keys in alphabetical order
+ */
+function sortObjectKeys(object) {
+  if (object == null) {
+    return null;
+  }
+
+  if (Array.isArray(object)) {
+    for (let i = 0; i < object.length; i++) {
+      if (typeof object[i] === "object") {
+        object[i] = sortObjectKeys(object[i]);
+      }
+    }
+    return object;
+  }
+
+  return Object.keys(object)
+    .sort(function (left, right) {
+      return left.toLowerCase().localeCompare(right.toLowerCase());
+    })
+    .reduce((acc, key) => {
+      if (typeof object[key] === "object") {
+        acc[key] = sortObjectKeys(object[key]);
+      } else {
+        acc[key] = object[key];
+      }
+      return acc;
+    }, Object.create(null));
+}
+
+module.exports = {
+  sortObjectKeys,
+};
diff --git a/devtools/client/netmonitor/src/utils/tooltips.js b/devtools/client/netmonitor/src/utils/tooltips.js
new file mode 100644
index 0000000000..1f35346353
--- /dev/null
+++ b/devtools/client/netmonitor/src/utils/tooltips.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";
+
+/**
+ * Returns first 128 characters of value for use as a tooltip.
+ * @param object
+ * @returns {*}
+ */
+function limitTooltipLength(object) {
+  return object.length > 128 ? object.substring(0, 128) + "…" : object;
+}
+
+module.exports = {
+  limitTooltipLength,
+};
diff --git a/devtools/client/netmonitor/src/widgets/HeadersPanelContextMenu.js b/devtools/client/netmonitor/src/widgets/HeadersPanelContextMenu.js
new file mode 100644
index 0000000000..6f159ded73
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/HeadersPanelContextMenu.js
@@ -0,0 +1,137 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  contextMenuFormatters,
+} = require("resource://devtools/client/netmonitor/src/utils/context-menu-utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  "copyString",
+  "resource://devtools/shared/platform/clipboard.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+
+class HeadersPanelContextMenu {
+  constructor(props = {}) {
+    this.props = props;
+    this.copyAll = this.copyAll.bind(this);
+    this.copyValue = this.copyValue.bind(this);
+  }
+
+  /**
+   * Handle the context menu opening.
+   * @param {Object} event open event
+   * @param {Object} selection object representing the current selection
+   */
+  open(event = {}, selection) {
+    const { target } = event;
+    const menuItems = [
+      {
+        id: "headers-panel-context-menu-copyvalue",
+        label: L10N.getStr("netmonitor.context.copyValue"),
+        accesskey: L10N.getStr("netmonitor.context.copyValue.accesskey"),
+        click: () => {
+          const { name, value } = getSummaryContent(
+            target.closest(".tabpanel-summary-container")
+          );
+          this.copyValue(
+            { name, value, object: null, hasChildren: false },
+            selection
+          );
+        },
+      },
+      {
+        id: "headers-panel-context-menu-copyall",
+        label: L10N.getStr("netmonitor.context.copyAll"),
+        accesskey: L10N.getStr("netmonitor.context.copyAll.accesskey"),
+        click: () => {
+          const root = target.closest(".summary");
+          const object = {};
+          if (root) {
+            const { children } = root;
+            for (let i = 0; i < children.length; i++) {
+              const content = getSummaryContent(children[i]);
+              object[content.name] = content.value;
+            }
+          }
+          return this.copyAll(object, selection);
+        },
+      },
+    ];
+
+    showMenu(menuItems, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+
+  /**
+   * Copies all.
+   * @param {Object} object the whole tree data
+   * @param {Object} selection object representing the current selection
+   */
+  copyAll(object, selection) {
+    let buffer = "";
+    if (selection.toString() !== "") {
+      buffer = selection.toString();
+    } else {
+      const { customFormatters } = this.props;
+      buffer = contextMenuFormatters.baseCopyAllFormatter(object);
+      if (customFormatters?.copyAllFormatter) {
+        buffer = customFormatters.copyAllFormatter(
+          object,
+          contextMenuFormatters.baseCopyAllFormatter
+        );
+      }
+    }
+    try {
+      copyString(buffer);
+    } catch (error) {}
+  }
+
+  /**
+   * Copies the value of a single item.
+   * @param {Object} object data object for specific node
+   * @param {Object} selection object representing the current selection
+   */
+  copyValue(object, selection) {
+    let buffer = "";
+    if (selection.toString() !== "") {
+      buffer = selection.toString();
+    } else {
+      const { customFormatters } = this.props;
+      buffer = contextMenuFormatters.baseCopyFormatter(object);
+      if (customFormatters?.copyFormatter) {
+        buffer = customFormatters.copyFormatter(
+          object,
+          contextMenuFormatters.baseCopyFormatter
+        );
+      }
+    }
+    try {
+      copyString(buffer);
+    } catch (error) {}
+  }
+}
+
+function getSummaryContent(el) {
+  return {
+    name: el.querySelector(".tabpanel-summary-label").textContent,
+    value: el.querySelector(".tabpanel-summary-value").textContent,
+  };
+}
+
+module.exports = HeadersPanelContextMenu;
diff --git a/devtools/client/netmonitor/src/widgets/PropertiesViewContextMenu.js b/devtools/client/netmonitor/src/widgets/PropertiesViewContextMenu.js
new file mode 100644
index 0000000000..8d823444c2
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/PropertiesViewContextMenu.js
@@ -0,0 +1,113 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  contextMenuFormatters,
+} = require("resource://devtools/client/netmonitor/src/utils/context-menu-utils.js");
+
+loader.lazyRequireGetter(
+  this,
+  "copyString",
+  "resource://devtools/shared/platform/clipboard.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+
+class PropertiesViewContextMenu {
+  constructor(props = {}) {
+    this.props = props;
+    this.copyAll = this.copyAll.bind(this);
+    this.copyValue = this.copyValue.bind(this);
+  }
+
+  /**
+   * Handle the context menu opening.
+   * @param {Object} event open event
+   * @param {Object} selection object representing the current selection
+   * @param {Object} data object containing information
+   * @param {Object} data.member member of the right-clicked row
+   * @param {Object} data.object the whole tree data
+   */
+  open(event = {}, selection, { member, object }) {
+    const menuItems = [
+      {
+        id: "properties-view-context-menu-copyvalue",
+        label: L10N.getStr("netmonitor.context.copyValue"),
+        accesskey: L10N.getStr("netmonitor.context.copyValue.accesskey"),
+        click: () => this.copyValue(member, selection),
+      },
+      {
+        id: "properties-view-context-menu-copyall",
+        label: L10N.getStr("netmonitor.context.copyAll"),
+        accesskey: L10N.getStr("netmonitor.context.copyAll.accesskey"),
+        click: () => this.copyAll(object, selection),
+      },
+    ];
+
+    showMenu(menuItems, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+
+  /**
+   * Copies all.
+   * @param {Object} object the whole tree data
+   * @param {Object} selection object representing the current selection
+   */
+  copyAll(object, selection) {
+    let buffer = "";
+    if (selection.toString() !== "") {
+      buffer = selection.toString();
+    } else {
+      const { customFormatters } = this.props;
+      buffer = contextMenuFormatters.baseCopyAllFormatter(object);
+      if (customFormatters?.copyAllFormatter) {
+        buffer = customFormatters.copyAllFormatter(
+          object,
+          contextMenuFormatters.baseCopyAllFormatter
+        );
+      }
+    }
+    try {
+      copyString(buffer);
+    } catch (error) {}
+  }
+
+  /**
+   * Copies the value of a single item.
+   * @param {Object} member member of the right-clicked row
+   * @param {Object} selection object representing the current selection
+   */
+  copyValue(member, selection) {
+    let buffer = "";
+    if (selection.toString() !== "") {
+      buffer = selection.toString();
+    } else {
+      const { customFormatters } = this.props;
+      buffer = contextMenuFormatters.baseCopyFormatter(member);
+      if (customFormatters?.copyFormatter) {
+        buffer = customFormatters.copyFormatter(
+          member,
+          contextMenuFormatters.baseCopyFormatter
+        );
+      }
+    }
+    try {
+      copyString(buffer);
+    } catch (error) {}
+  }
+}
+
+module.exports = PropertiesViewContextMenu;
diff --git a/devtools/client/netmonitor/src/widgets/RequestBlockingContextMenu.js b/devtools/client/netmonitor/src/widgets/RequestBlockingContextMenu.js
new file mode 100644
index 0000000000..f6a10b0ca3
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/RequestBlockingContextMenu.js
@@ -0,0 +1,78 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+
+class RequestBlockingContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  createMenu(contextMenuOptions) {
+    const {
+      removeAllBlockedUrls,
+      disableAllBlockedUrls,
+      enableAllBlockedUrls,
+    } = this.props;
+
+    const { disableDisableAllBlockedUrls, disableEnableAllBlockedUrls } =
+      contextMenuOptions;
+
+    const menu = [
+      {
+        id: "request-blocking-enable-all",
+        label: L10N.getStr(
+          "netmonitor.requestBlockingMenu.enableAllBlockedUrls"
+        ),
+        accesskey: "",
+        disabled: disableEnableAllBlockedUrls,
+        visible: true,
+        click: () => enableAllBlockedUrls(),
+      },
+      {
+        id: "request-blocking-disable-all",
+        label: L10N.getStr(
+          "netmonitor.requestBlockingMenu.disableAllBlockedUrls"
+        ),
+        accesskey: "",
+        disabled: disableDisableAllBlockedUrls,
+        visible: true,
+        click: () => disableAllBlockedUrls(),
+      },
+      {
+        id: "request-blocking-remove-all",
+        label: L10N.getStr(
+          "netmonitor.requestBlockingMenu.removeAllBlockedUrls"
+        ),
+        accesskey: "",
+        visible: true,
+        click: () => removeAllBlockedUrls(),
+      },
+    ];
+
+    return menu;
+  }
+
+  open(event, contextMenuOptions) {
+    const menu = this.createMenu(contextMenuOptions);
+
+    showMenu(menu, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+}
+
+module.exports = RequestBlockingContextMenu;
diff --git a/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js b/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js
new file mode 100644
index 0000000000..7c19e912c6
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/RequestListContextMenu.js
@@ -0,0 +1,797 @@
+/* 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 {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  formDataURI,
+  getUrlQuery,
+  getUrlBaseName,
+  parseQueryString,
+  getRequestHeadersRawText,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  hasMatchingBlockingRequestPattern,
+} = require("resource://devtools/client/netmonitor/src/utils/request-blocking.js");
+
+loader.lazyRequireGetter(
+  this,
+  "Curl",
+  "resource://devtools/client/shared/curl.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "saveAs",
+  "resource://devtools/shared/DevToolsUtils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "PowerShell",
+  "resource://devtools/client/netmonitor/src/utils/powershell.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "copyString",
+  "resource://devtools/shared/platform/clipboard.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "showMenu",
+  "resource://devtools/client/shared/components/menu/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "HarMenuUtils",
+  "resource://devtools/client/netmonitor/src/har/har-menu-utils.js",
+  true
+);
+
+const { OS } = Services.appinfo;
+
+class RequestListContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  createCopySubMenu(clickedRequest, requests) {
+    const { connector } = this.props;
+
+    const {
+      id,
+      formDataSections,
+      method,
+      mimeType,
+      httpVersion,
+      requestHeaders,
+      requestHeadersAvailable,
+      requestPostData,
+      requestPostDataAvailable,
+      responseHeaders,
+      responseHeadersAvailable,
+      responseContent,
+      responseContentAvailable,
+      url,
+    } = clickedRequest;
+
+    const copySubMenu = [];
+
+    copySubMenu.push({
+      id: "request-list-context-copy-url",
+      label: L10N.getStr("netmonitor.context.copyUrl"),
+      accesskey: L10N.getStr("netmonitor.context.copyUrl.accesskey"),
+      visible: !!clickedRequest,
+      click: () => this.copyUrl(url),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-url-params",
+      label: L10N.getStr("netmonitor.context.copyUrlParams"),
+      accesskey: L10N.getStr("netmonitor.context.copyUrlParams.accesskey"),
+      visible: !!(clickedRequest && getUrlQuery(url)),
+      click: () => this.copyUrlParams(url),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-post-data",
+      label: L10N.getFormatStr("netmonitor.context.copyRequestData", method),
+      accesskey: L10N.getStr("netmonitor.context.copyRequestData.accesskey"),
+      // Menu item will be visible even if data hasn't arrived, so we need to check
+      // *Available property and then fetch data lazily once user triggers the action.
+      visible: !!(
+        clickedRequest &&
+        (requestPostDataAvailable || requestPostData)
+      ),
+      click: () => this.copyPostData(id, formDataSections, requestPostData),
+    });
+
+    if (OS === "WINNT") {
+      copySubMenu.push({
+        id: "request-list-context-copy-as-curl-win",
+        label: L10N.getFormatStr(
+          "netmonitor.context.copyAsCurl.win",
+          L10N.getStr("netmonitor.context.copyAsCurl")
+        ),
+        accesskey: L10N.getStr("netmonitor.context.copyAsCurl.win.accesskey"),
+        // Menu item will be visible even if data hasn't arrived, so we need to check
+        // *Available property and then fetch data lazily once user triggers the action.
+        visible: !!clickedRequest,
+        click: () =>
+          this.copyAsCurl(
+            id,
+            url,
+            method,
+            httpVersion,
+            requestHeaders,
+            requestPostData,
+            responseHeaders,
+            "WINNT"
+          ),
+      });
+
+      copySubMenu.push({
+        id: "request-list-context-copy-as-curl-posix",
+        label: L10N.getFormatStr(
+          "netmonitor.context.copyAsCurl.posix",
+          L10N.getStr("netmonitor.context.copyAsCurl")
+        ),
+        accesskey: L10N.getStr("netmonitor.context.copyAsCurl.posix.accesskey"),
+        // Menu item will be visible even if data hasn't arrived, so we need to check
+        // *Available property and then fetch data lazily once user triggers the action.
+        visible: !!clickedRequest,
+        click: () =>
+          this.copyAsCurl(
+            id,
+            url,
+            method,
+            httpVersion,
+            requestHeaders,
+            requestPostData,
+            responseHeaders,
+            "Linux"
+          ),
+      });
+    } else {
+      copySubMenu.push({
+        id: "request-list-context-copy-as-curl",
+        label: L10N.getStr("netmonitor.context.copyAsCurl"),
+        accesskey: L10N.getStr("netmonitor.context.copyAsCurl.accesskey"),
+        // Menu item will be visible even if data hasn't arrived, so we need to check
+        // *Available property and then fetch data lazily once user triggers the action.
+        visible: !!clickedRequest,
+        click: () =>
+          this.copyAsCurl(
+            id,
+            url,
+            method,
+            httpVersion,
+            requestHeaders,
+            requestPostData,
+            responseHeaders
+          ),
+      });
+    }
+
+    copySubMenu.push({
+      id: "request-list-context-copy-as-powershell",
+      label: L10N.getStr("netmonitor.context.copyAsPowerShell"),
+      accesskey: L10N.getStr("netmonitor.context.copyAsPowerShell.accesskey"),
+      // Menu item will be visible even if data hasn't arrived, so we need to check
+      // *Available property and then fetch data lazily once user triggers the action.
+      visible: !!clickedRequest,
+      click: () => this.copyAsPowerShell(clickedRequest),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-as-fetch",
+      label: L10N.getStr("netmonitor.context.copyAsFetch"),
+      accesskey: L10N.getStr("netmonitor.context.copyAsFetch.accesskey"),
+      visible: !!clickedRequest,
+      click: () =>
+        this.copyAsFetch(id, url, method, requestHeaders, requestPostData),
+    });
+
+    copySubMenu.push({
+      type: "separator",
+      visible: copySubMenu.slice(0, 4).some(subMenu => subMenu.visible),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-request-headers",
+      label: L10N.getStr("netmonitor.context.copyRequestHeaders"),
+      accesskey: L10N.getStr("netmonitor.context.copyRequestHeaders.accesskey"),
+      // Menu item will be visible even if data hasn't arrived, so we need to check
+      // *Available property and then fetch data lazily once user triggers the action.
+      visible: !!(
+        clickedRequest &&
+        (requestHeadersAvailable || requestHeaders)
+      ),
+      click: () => this.copyRequestHeaders(id, clickedRequest),
+    });
+
+    copySubMenu.push({
+      id: "response-list-context-copy-response-headers",
+      label: L10N.getStr("netmonitor.context.copyResponseHeaders"),
+      accesskey: L10N.getStr(
+        "netmonitor.context.copyResponseHeaders.accesskey"
+      ),
+      // Menu item will be visible even if data hasn't arrived, so we need to check
+      // *Available property and then fetch data lazily once user triggers the action.
+      visible: !!(
+        clickedRequest &&
+        (responseHeadersAvailable || responseHeaders)
+      ),
+      click: () => this.copyResponseHeaders(id, responseHeaders),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-response",
+      label: L10N.getStr("netmonitor.context.copyResponse"),
+      accesskey: L10N.getStr("netmonitor.context.copyResponse.accesskey"),
+      // Menu item will be visible even if data hasn't arrived, so we need to check
+      // *Available property and then fetch data lazily once user triggers the action.
+      visible: !!(
+        clickedRequest &&
+        (responseContentAvailable || responseContent)
+      ),
+      click: () => this.copyResponse(id, responseContent),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-image-as-data-uri",
+      label: L10N.getStr("netmonitor.context.copyImageAsDataUri"),
+      accesskey: L10N.getStr("netmonitor.context.copyImageAsDataUri.accesskey"),
+      visible: !!(
+        clickedRequest &&
+        (responseContentAvailable || responseContent) &&
+        mimeType &&
+        mimeType.includes("image/")
+      ),
+      click: () => this.copyImageAsDataUri(id, mimeType, responseContent),
+    });
+
+    copySubMenu.push({
+      type: "separator",
+      visible: copySubMenu.slice(5, 9).some(subMenu => subMenu.visible),
+    });
+
+    copySubMenu.push({
+      id: "request-list-context-copy-all-as-har",
+      label: L10N.getStr("netmonitor.context.copyAllAsHar"),
+      accesskey: L10N.getStr("netmonitor.context.copyAllAsHar.accesskey"),
+      visible: !!requests.length,
+      click: () => HarMenuUtils.copyAllAsHar(requests, connector),
+    });
+
+    return copySubMenu;
+  }
+
+  createMenu(clickedRequest, requests, blockedUrls) {
+    const {
+      connector,
+      cloneRequest,
+      openDetailsPanelTab,
+      openHTTPCustomRequestTab,
+      closeHTTPCustomRequestTab,
+      sendCustomRequest,
+      sendHTTPCustomRequest,
+      openStatistics,
+      openRequestInTab,
+      openRequestBlockingAndAddUrl,
+      openRequestBlockingAndDisableUrls,
+      removeBlockedUrl,
+    } = this.props;
+
+    const {
+      id,
+      isCustom,
+      method,
+      cause,
+      isEventStream,
+      mimeType,
+      requestHeaders,
+      requestPostData,
+      responseContent,
+      responseContentAvailable,
+      url,
+    } = clickedRequest;
+
+    const copySubMenu = this.createCopySubMenu(clickedRequest, requests);
+    const newEditAndResendPref = Services.prefs.getBoolPref(
+      "devtools.netmonitor.features.newEditAndResend"
+    );
+
+    return [
+      {
+        label: L10N.getStr("netmonitor.context.copyValue"),
+        accesskey: L10N.getStr("netmonitor.context.copyValue.accesskey"),
+        visible: !!clickedRequest,
+        submenu: copySubMenu,
+      },
+      {
+        id: "request-list-context-save-all-as-har",
+        label: L10N.getStr("netmonitor.context.saveAllAsHar"),
+        accesskey: L10N.getStr("netmonitor.context.saveAllAsHar.accesskey"),
+        visible: !!requests.length,
+        click: () => HarMenuUtils.saveAllAsHar(requests, connector),
+      },
+      {
+        id: "request-list-context-save-response-as",
+        label: L10N.getStr("netmonitor.context.saveResponseAs"),
+        accesskey: L10N.getStr("netmonitor.context.saveResponseAs.accesskey"),
+        visible: !!(
+          clickedRequest &&
+          (responseContentAvailable || responseContent) &&
+          mimeType &&
+          // Websockets and server-sent events don't have a real 'response' for us to save
+          cause.type !== "websocket" &&
+          !isEventStream
+        ),
+        click: () => this.saveResponseAs(id, url, responseContent),
+      },
+      {
+        type: "separator",
+        visible: copySubMenu.slice(10, 14).some(subMenu => subMenu.visible),
+      },
+      {
+        id: "request-list-context-resend-only",
+        label: L10N.getStr("netmonitor.context.resend.label"),
+        accesskey: L10N.getStr("netmonitor.context.resend.accesskey"),
+        visible: !!(clickedRequest && !isCustom),
+        click: () => {
+          if (!newEditAndResendPref) {
+            cloneRequest(id);
+            sendCustomRequest();
+          } else {
+            sendHTTPCustomRequest(clickedRequest);
+          }
+        },
+      },
+
+      {
+        id: "request-list-context-edit-resend",
+        label: L10N.getStr("netmonitor.context.editAndResend"),
+        accesskey: L10N.getStr("netmonitor.context.editAndResend.accesskey"),
+        visible: !!(clickedRequest && !isCustom),
+        click: () => {
+          this.fetchRequestHeaders(id).then(() => {
+            if (!newEditAndResendPref) {
+              cloneRequest(id);
+              openDetailsPanelTab();
+            } else {
+              closeHTTPCustomRequestTab();
+              openHTTPCustomRequestTab();
+            }
+          });
+        },
+      },
+      {
+        id: "request-list-context-block-url",
+        label: L10N.getStr("netmonitor.context.blockURL"),
+        visible: !hasMatchingBlockingRequestPattern(
+          blockedUrls,
+          clickedRequest.url
+        ),
+        click: () => {
+          openRequestBlockingAndAddUrl(clickedRequest.url);
+        },
+      },
+      {
+        id: "request-list-context-unblock-url",
+        label: L10N.getStr("netmonitor.context.unblockURL"),
+        visible: hasMatchingBlockingRequestPattern(
+          blockedUrls,
+          clickedRequest.url
+        ),
+        click: () => {
+          if (
+            blockedUrls.find(blockedUrl => blockedUrl === clickedRequest.url)
+          ) {
+            removeBlockedUrl(clickedRequest.url);
+          } else {
+            openRequestBlockingAndDisableUrls(clickedRequest.url);
+          }
+        },
+      },
+      {
+        type: "separator",
+        visible: copySubMenu.slice(15, 16).some(subMenu => subMenu.visible),
+      },
+      {
+        id: "request-list-context-newtab",
+        label: L10N.getStr("netmonitor.context.newTab"),
+        accesskey: L10N.getStr("netmonitor.context.newTab.accesskey"),
+        visible: !!clickedRequest,
+        click: () => openRequestInTab(id, url, requestHeaders, requestPostData),
+      },
+      {
+        id: "request-list-context-open-in-debugger",
+        label: L10N.getStr("netmonitor.context.openInDebugger"),
+        accesskey: L10N.getStr("netmonitor.context.openInDebugger.accesskey"),
+        visible: !!(
+          clickedRequest &&
+          mimeType &&
+          mimeType.includes("javascript")
+        ),
+        click: () => this.openInDebugger(url),
+      },
+      {
+        id: "request-list-context-open-in-style-editor",
+        label: L10N.getStr("netmonitor.context.openInStyleEditor"),
+        accesskey: L10N.getStr(
+          "netmonitor.context.openInStyleEditor.accesskey"
+        ),
+        visible: !!(
+          clickedRequest &&
+          Services.prefs.getBoolPref("devtools.styleeditor.enabled") &&
+          mimeType &&
+          mimeType.includes("css")
+        ),
+        click: () => this.openInStyleEditor(url),
+      },
+      {
+        id: "request-list-context-perf",
+        label: L10N.getStr("netmonitor.context.perfTools"),
+        accesskey: L10N.getStr("netmonitor.context.perfTools.accesskey"),
+        visible: !!requests.length,
+        click: () => openStatistics(true),
+      },
+      {
+        type: "separator",
+      },
+      {
+        id: "request-list-context-use-as-fetch",
+        label: L10N.getStr("netmonitor.context.useAsFetch"),
+        accesskey: L10N.getStr("netmonitor.context.useAsFetch.accesskey"),
+        visible: !!clickedRequest,
+        click: () =>
+          this.useAsFetch(id, url, method, requestHeaders, requestPostData),
+      },
+    ];
+  }
+
+  open(event, clickedRequest, requests, blockedUrls) {
+    const menu = this.createMenu(clickedRequest, requests, blockedUrls);
+
+    showMenu(menu, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+
+  /**
+   * Opens selected item in the debugger
+   */
+  openInDebugger(url) {
+    const toolbox = this.props.connector.getToolbox();
+    toolbox.viewGeneratedSourceInDebugger(url);
+  }
+
+  /**
+   * Opens selected item in the style editor
+   */
+  openInStyleEditor(url) {
+    const toolbox = this.props.connector.getToolbox();
+    toolbox.viewGeneratedSourceInStyleEditor(url);
+  }
+
+  /**
+   * Copy the request url from the currently selected item.
+   */
+  copyUrl(url) {
+    copyString(url);
+  }
+
+  /**
+   * Copy the request url query string parameters from the currently
+   * selected item.
+   */
+  copyUrlParams(url) {
+    const params = getUrlQuery(url).split("&");
+    copyString(params.join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n"));
+  }
+
+  /**
+   * Copy the request form data parameters (or raw payload) from
+   * the currently selected item.
+   */
+  async copyPostData(id, formDataSections, requestPostData) {
+    let params = [];
+    // Try to extract any form data parameters if formDataSections is already
+    // available, which is only true if RequestPanel has ever been mounted before.
+    if (formDataSections) {
+      formDataSections.forEach(section => {
+        const paramsArray = parseQueryString(section);
+        if (paramsArray) {
+          params = [...params, ...paramsArray];
+        }
+      });
+    }
+
+    let string = params
+      .map(param => param.name + (param.value ? "=" + param.value : ""))
+      .join(Services.appinfo.OS === "WINNT" ? "\r\n" : "\n");
+
+    // Fall back to raw payload.
+    if (!string) {
+      requestPostData =
+        requestPostData ||
+        (await this.props.connector.requestData(id, "requestPostData"));
+
+      string = requestPostData.postData.text;
+      if (Services.appinfo.OS !== "WINNT") {
+        string = string.replace(/\r/g, "");
+      }
+    }
+    copyString(string);
+  }
+
+  /**
+   * Copy a cURL command from the currently selected item.
+   */
+  async copyAsCurl(
+    id,
+    url,
+    method,
+    httpVersion,
+    requestHeaders,
+    requestPostData,
+    responseHeaders,
+    platform
+  ) {
+    requestHeaders =
+      requestHeaders ||
+      (await this.props.connector.requestData(id, "requestHeaders"));
+
+    requestPostData =
+      requestPostData ||
+      (await this.props.connector.requestData(id, "requestPostData"));
+
+    responseHeaders =
+      responseHeaders ||
+      (await this.props.connector.requestData(id, "responseHeaders"));
+
+    // Create a sanitized object for the Curl command generator.
+    const data = {
+      url,
+      method,
+      headers: requestHeaders.headers,
+      responseHeaders: responseHeaders.headers,
+      httpVersion,
+      postDataText: requestPostData ? requestPostData.postData.text : "",
+    };
+    copyString(Curl.generateCommand(data, platform));
+  }
+
+  async copyAsPowerShell(request) {
+    let { id, url, method, requestHeaders, requestPostData, requestCookies } =
+      request;
+
+    requestHeaders =
+      requestHeaders ||
+      (await this.props.connector.requestData(id, "requestHeaders"));
+
+    requestPostData =
+      requestPostData ||
+      (await this.props.connector.requestData(id, "requestPostData"));
+
+    requestCookies =
+      requestCookies ||
+      (await this.props.connector.requestData(id, "requestCookies"));
+
+    return copyString(
+      PowerShell.generateCommand(
+        url,
+        method,
+        requestHeaders.headers,
+        requestPostData.postData,
+        requestCookies.cookies || requestCookies
+      )
+    );
+  }
+
+  /**
+   * Generate fetch string
+   */
+  async generateFetchString(id, url, method, requestHeaders, requestPostData) {
+    requestHeaders =
+      requestHeaders ||
+      (await this.props.connector.requestData(id, "requestHeaders"));
+
+    requestPostData =
+      requestPostData ||
+      (await this.props.connector.requestData(id, "requestPostData"));
+
+    // https://fetch.spec.whatwg.org/#forbidden-header-name
+    const forbiddenHeaders = {
+      "accept-charset": 1,
+      "accept-encoding": 1,
+      "access-control-request-headers": 1,
+      "access-control-request-method": 1,
+      connection: 1,
+      "content-length": 1,
+      cookie: 1,
+      cookie2: 1,
+      date: 1,
+      dnt: 1,
+      expect: 1,
+      host: 1,
+      "keep-alive": 1,
+      origin: 1,
+      referer: 1,
+      te: 1,
+      trailer: 1,
+      "transfer-encoding": 1,
+      upgrade: 1,
+      via: 1,
+    };
+    const credentialHeaders = { cookie: 1, authorization: 1 };
+
+    const headers = {};
+    for (const { name, value } of requestHeaders.headers) {
+      if (!forbiddenHeaders[name.toLowerCase()]) {
+        headers[name] = value;
+      }
+    }
+
+    const referrerHeader = requestHeaders.headers.find(
+      ({ name }) => name.toLowerCase() === "referer"
+    );
+
+    const referrerPolicy = requestHeaders.headers.find(
+      ({ name }) => name.toLowerCase() === "referrer-policy"
+    );
+
+    const referrer = referrerHeader ? referrerHeader.value : undefined;
+    const credentials = requestHeaders.headers.some(
+      ({ name }) => credentialHeaders[name.toLowerCase()]
+    )
+      ? "include"
+      : "omit";
+
+    const fetchOptions = {
+      credentials,
+      headers,
+      referrer,
+      referrerPolicy,
+      body: requestPostData.postData.text,
+      method,
+      mode: "cors",
+    };
+
+    const options = JSON.stringify(fetchOptions, null, 4);
+    const fetchString = `await fetch("${url}", ${options});`;
+    return fetchString;
+  }
+
+  /**
+   * Copy the currently selected item as fetch request.
+   */
+  async copyAsFetch(id, url, method, requestHeaders, requestPostData) {
+    const fetchString = await this.generateFetchString(
+      id,
+      url,
+      method,
+      requestHeaders,
+      requestPostData
+    );
+    copyString(fetchString);
+  }
+
+  /**
+   * Open split console and fill it with fetch command for selected item
+   */
+  async useAsFetch(id, url, method, requestHeaders, requestPostData) {
+    const fetchString = await this.generateFetchString(
+      id,
+      url,
+      method,
+      requestHeaders,
+      requestPostData
+    );
+    const toolbox = this.props.connector.getToolbox();
+    await toolbox.openSplitConsole();
+    const { hud } = await toolbox.getPanel("webconsole");
+    hud.setInputValue(fetchString);
+  }
+
+  /**
+   * Copy the raw request headers from the currently selected item.
+   */
+  async copyRequestHeaders(
+    id,
+    { method, httpVersion, requestHeaders, urlDetails }
+  ) {
+    requestHeaders =
+      requestHeaders ||
+      (await this.props.connector.requestData(id, "requestHeaders"));
+
+    let rawHeaders = getRequestHeadersRawText(
+      method,
+      httpVersion,
+      requestHeaders,
+      urlDetails
+    );
+
+    if (Services.appinfo.OS !== "WINNT") {
+      rawHeaders = rawHeaders.replace(/\r/g, "");
+    }
+    copyString(rawHeaders);
+  }
+
+  /**
+   * Copy the raw response headers from the currently selected item.
+   */
+  async copyResponseHeaders(id, responseHeaders) {
+    responseHeaders =
+      responseHeaders ||
+      (await this.props.connector.requestData(id, "responseHeaders"));
+
+    let rawHeaders = responseHeaders.rawHeaders.trim();
+
+    if (Services.appinfo.OS !== "WINNT") {
+      rawHeaders = rawHeaders.replace(/\r/g, "");
+    }
+    copyString(rawHeaders);
+  }
+
+  /**
+   * Copy image as data uri.
+   */
+  async copyImageAsDataUri(id, mimeType, responseContent) {
+    responseContent =
+      responseContent ||
+      (await this.props.connector.requestData(id, "responseContent"));
+
+    const { encoding, text } = responseContent.content;
+    copyString(formDataURI(mimeType, encoding, text));
+  }
+
+  /**
+   * Save response as.
+   */
+  async saveResponseAs(id, url, responseContent) {
+    responseContent =
+      responseContent ||
+      (await this.props.connector.requestData(id, "responseContent"));
+
+    const { encoding, text } = responseContent.content;
+    const fileName = getUrlBaseName(url);
+    let data;
+    if (encoding === "base64") {
+      const decoded = atob(text);
+      data = new Uint8Array(decoded.length);
+      for (let i = 0; i < decoded.length; ++i) {
+        data[i] = decoded.charCodeAt(i);
+      }
+    } else {
+      data = new TextEncoder().encode(text);
+    }
+    saveAs(window, data, fileName);
+  }
+
+  /**
+   * Copy response data as a string.
+   */
+  async copyResponse(id, responseContent) {
+    responseContent =
+      responseContent ||
+      (await this.props.connector.requestData(id, "responseContent"));
+
+    copyString(responseContent.content.text);
+  }
+
+  async fetchRequestHeaders(id) {
+    await this.props.connector.requestData(id, "requestHeaders");
+  }
+}
+
+module.exports = RequestListContextMenu;
diff --git a/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js b/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js
new file mode 100644
index 0000000000..02ee502790
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/RequestListHeaderContextMenu.js
@@ -0,0 +1,105 @@
+/* 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 {
+  showMenu,
+} = require("resource://devtools/client/shared/components/menu/utils.js");
+const {
+  HEADERS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getVisibleColumns,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const stringMap = HEADERS.filter(header =>
+  header.hasOwnProperty("label")
+).reduce((acc, { name, label }) => Object.assign(acc, { [name]: label }), {});
+
+const subMenuMap = HEADERS.filter(header =>
+  header.hasOwnProperty("subMenu")
+).reduce(
+  (acc, { name, subMenu }) => Object.assign(acc, { [name]: subMenu }),
+  {}
+);
+
+const nonLocalizedHeaders = HEADERS.filter(header =>
+  header.hasOwnProperty("noLocalization")
+).map(header => header.name);
+
+class RequestListHeaderContextMenu {
+  constructor(props) {
+    this.props = props;
+  }
+
+  /**
+   * Handle the context menu opening.
+   */
+  open(event = {}, columns) {
+    const menu = [];
+    const subMenu = { timings: [], responseHeaders: [] };
+    const onlyOneColumn = getVisibleColumns(columns).length === 1;
+
+    for (const column in columns) {
+      const shown = columns[column];
+      const label = nonLocalizedHeaders.includes(column)
+        ? stringMap[column] || column
+        : L10N.getStr(`netmonitor.toolbar.${stringMap[column] || column}`);
+      const entry = {
+        id: `request-list-header-${column}-toggle`,
+        label,
+        type: "checkbox",
+        checked: shown,
+        click: () => this.props.toggleColumn(column),
+        // We don't want to allow hiding the last visible column
+        disabled: onlyOneColumn && shown,
+      };
+      subMenuMap.hasOwnProperty(column)
+        ? subMenu[subMenuMap[column]].push(entry)
+        : menu.push(entry);
+    }
+
+    menu.push({ type: "separator" });
+    menu.push({
+      label: L10N.getStr("netmonitor.toolbar.timings"),
+      submenu: subMenu.timings,
+    });
+    menu.push({
+      label: L10N.getStr("netmonitor.toolbar.responseHeaders"),
+      submenu: subMenu.responseHeaders,
+    });
+
+    menu.push({ type: "separator" });
+    menu.push({
+      id: "request-list-header-reset-columns",
+      label: L10N.getStr("netmonitor.toolbar.resetColumns"),
+      click: () => this.props.resetColumns(),
+    });
+
+    menu.push({
+      id: "request-list-header-reset-sorting",
+      label: L10N.getStr("netmonitor.toolbar.resetSorting"),
+      click: () => this.props.resetSorting(),
+    });
+
+    const columnName = event.target.getAttribute("data-name");
+
+    menu.push({
+      id: "request-list-header-resize-column-to-fit-content",
+      label: L10N.getStr("netmonitor.toolbar.resizeColumnToFitContent"),
+      click: () => this.props.resizeColumnToFitContent(columnName),
+    });
+
+    showMenu(menu, {
+      screenX: event.screenX,
+      screenY: event.screenY,
+    });
+  }
+}
+
+module.exports = RequestListHeaderContextMenu;
diff --git a/devtools/client/netmonitor/src/widgets/WaterfallBackground.js b/devtools/client/netmonitor/src/widgets/WaterfallBackground.js
new file mode 100644
index 0000000000..e2be7f5715
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/WaterfallBackground.js
@@ -0,0 +1,163 @@
+/* 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 { getColor } = require("resource://devtools/client/shared/theme.js");
+const { colorUtils } = require("resource://devtools/shared/css/color.js");
+const {
+  REQUESTS_WATERFALL,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const STATE_KEYS = [
+  "firstRequestStartedMs",
+  "scale",
+  "timingMarkers",
+  "waterfallWidth",
+];
+
+/**
+ * Creates the background displayed on each waterfall view in this container.
+ */
+class WaterfallBackground {
+  constructor() {
+    this.canvas = document.createElementNS(HTML_NS, "canvas");
+    this.ctx = this.canvas.getContext("2d");
+    this.prevState = {};
+  }
+
+  /**
+   * Changes the element being used as the CSS background for a background
+   * with a given background element ID.
+   *
+   * The funtion wrap the Firefox only API. Waterfall Will not draw the
+   * vertical line when running on non-firefox browser.
+   * Could be fixed by Bug 1308695
+   */
+  setImageElement(imageElementId, imageElement) {
+    if (document.mozSetImageElement) {
+      document.mozSetImageElement(imageElementId, imageElement);
+    }
+  }
+
+  draw(state) {
+    // Do a shallow compare of the previous and the new state
+    const shouldUpdate = STATE_KEYS.some(
+      key => this.prevState[key] !== state[key]
+    );
+    if (!shouldUpdate) {
+      return;
+    }
+
+    this.prevState = state;
+
+    if (state.waterfallWidth === null || state.scale === null) {
+      this.setImageElement("waterfall-background", null);
+      return;
+    }
+
+    // Nuke the context.
+    const canvasWidth = (this.canvas.width = Math.max(
+      state.waterfallWidth - REQUESTS_WATERFALL.LABEL_WIDTH,
+      1
+    ));
+    // Awww yeah, 1px, repeats on Y axis.
+    const canvasHeight = (this.canvas.height = 1);
+
+    // Start over.
+    const imageData = this.ctx.createImageData(canvasWidth, canvasHeight);
+    const pixelArray = imageData.data;
+
+    const buf = new ArrayBuffer(pixelArray.length);
+    const view8bit = new Uint8ClampedArray(buf);
+    const view32bit = new Uint32Array(buf);
+
+    // Build new millisecond tick lines...
+    let timingStep = REQUESTS_WATERFALL.BACKGROUND_TICKS_MULTIPLE;
+    let optimalTickIntervalFound = false;
+    let scaledStep;
+
+    while (!optimalTickIntervalFound) {
+      // Ignore any divisions that would end up being too close to each other.
+      scaledStep = state.scale * timingStep;
+      if (scaledStep < REQUESTS_WATERFALL.BACKGROUND_TICKS_SPACING_MIN) {
+        timingStep <<= 1;
+        continue;
+      }
+      optimalTickIntervalFound = true;
+    }
+
+    const isRTL = document.dir === "rtl";
+    const [r, g, b] = REQUESTS_WATERFALL.BACKGROUND_TICKS_COLOR_RGB;
+    let alphaComponent = REQUESTS_WATERFALL.BACKGROUND_TICKS_OPACITY_MIN;
+
+    function drawPixelAt(offset, color) {
+      const position = (isRTL ? canvasWidth - offset : offset - 1) | 0;
+      const [rc, gc, bc, ac] = color;
+      view32bit[position] = (ac << 24) | (bc << 16) | (gc << 8) | rc;
+    }
+
+    // Insert one pixel for each division on each scale.
+    for (let i = 1; i <= REQUESTS_WATERFALL.BACKGROUND_TICKS_SCALES; i++) {
+      const increment = scaledStep * Math.pow(2, i);
+      for (let x = 0; x < canvasWidth; x += increment) {
+        drawPixelAt(x, [r, g, b, alphaComponent]);
+      }
+      alphaComponent += REQUESTS_WATERFALL.BACKGROUND_TICKS_OPACITY_ADD;
+    }
+
+    function drawTimestamp(timestamp, color) {
+      if (timestamp === -1) {
+        return;
+      }
+
+      const delta = Math.floor(
+        (timestamp - state.firstRequestStartedMs) * state.scale
+      );
+      drawPixelAt(delta, color);
+    }
+
+    const { DOMCONTENTLOADED_TICKS_COLOR, LOAD_TICKS_COLOR } =
+      REQUESTS_WATERFALL;
+    drawTimestamp(
+      state.timingMarkers.firstDocumentDOMContentLoadedTimestamp,
+      this.getThemeColorAsRgba(DOMCONTENTLOADED_TICKS_COLOR, state.theme)
+    );
+
+    drawTimestamp(
+      state.timingMarkers.firstDocumentLoadTimestamp,
+      this.getThemeColorAsRgba(LOAD_TICKS_COLOR, state.theme)
+    );
+
+    // Flush the image data and cache the waterfall background.
+    pixelArray.set(view8bit);
+    this.ctx.putImageData(imageData, 0, 0);
+
+    this.setImageElement("waterfall-background", this.canvas);
+  }
+
+  /**
+   * Retrieve a color defined for the provided theme as a rgba array. The alpha channel is
+   * forced to the waterfall constant TICKS_COLOR_OPACITY.
+   *
+   * @param {String} colorName
+   *        The name of the theme color
+   * @param {String} theme
+   *        The name of the theme
+   * @return {Array} RGBA array for the color.
+   */
+  getThemeColorAsRgba(colorName, theme) {
+    const colorStr = getColor(colorName, theme);
+    const color = new colorUtils.CssColor(colorStr);
+    const { r, g, b } = color.getRGBATuple();
+    return [r, g, b, REQUESTS_WATERFALL.TICKS_COLOR_OPACITY];
+  }
+
+  destroy() {
+    this.setImageElement("waterfall-background", null);
+  }
+}
+
+module.exports = WaterfallBackground;
diff --git a/devtools/client/netmonitor/src/widgets/moz.build b/devtools/client/netmonitor/src/widgets/moz.build
new file mode 100644
index 0000000000..106deca935
--- /dev/null
+++ b/devtools/client/netmonitor/src/widgets/moz.build
@@ -0,0 +1,12 @@
+# 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(
+    "HeadersPanelContextMenu.js",
+    "PropertiesViewContextMenu.js",
+    "RequestBlockingContextMenu.js",
+    "RequestListContextMenu.js",
+    "RequestListHeaderContextMenu.js",
+    "WaterfallBackground.js",
+)
diff --git a/devtools/client/netmonitor/src/workers/moz.build b/devtools/client/netmonitor/src/workers/moz.build
new file mode 100644
index 0000000000..a1384c1e10
--- /dev/null
+++ b/devtools/client/netmonitor/src/workers/moz.build
@@ -0,0 +1,8 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+    "search",
+]
diff --git a/devtools/client/netmonitor/src/workers/search/index.js b/devtools/client/netmonitor/src/workers/search/index.js
new file mode 100644
index 0000000000..a721454034
--- /dev/null
+++ b/devtools/client/netmonitor/src/workers/search/index.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 {
+  WorkerDispatcher,
+} = require("resource://devtools/client/shared/worker-utils.js");
+
+const SEARCH_WORKER_URL =
+  "resource://devtools/client/netmonitor/src/workers/search/worker.js";
+
+class SearchDispatcher extends WorkerDispatcher {
+  constructor() {
+    super(SEARCH_WORKER_URL);
+  }
+
+  // The search worker support just one task at this point,
+  // which is searching through specified resource.
+  searchInResource = this.task("searchInResource");
+}
+
+// Compared to debugger, we instantiate a singleton within the dispatcher module
+module.exports = new SearchDispatcher();
diff --git a/devtools/client/netmonitor/src/workers/search/moz.build b/devtools/client/netmonitor/src/workers/search/moz.build
new file mode 100644
index 0000000000..ee5a5dd950
--- /dev/null
+++ b/devtools/client/netmonitor/src/workers/search/moz.build
@@ -0,0 +1,10 @@
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    "index.js",
+    "search.js",
+    "worker.js",
+)
diff --git a/devtools/client/netmonitor/src/workers/search/search.js b/devtools/client/netmonitor/src/workers/search/search.js
new file mode 100644
index 0000000000..880f5357b2
--- /dev/null
+++ b/devtools/client/netmonitor/src/workers/search/search.js
@@ -0,0 +1,349 @@
+/* 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 no-unused-vars */
+
+"use strict";
+
+/**
+ * Search within specified resource. Note that this function runs
+ * within a worker thread.
+ */
+function searchInResource(resource, query, modifiers) {
+  const results = [];
+
+  if (resource.url) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "url",
+        label: "Url",
+        type: "url",
+        panel: "headers",
+      })
+    );
+  }
+
+  if (resource.responseHeaders) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "responseHeaders.headers",
+        type: "responseHeaders",
+        panel: "headers",
+      })
+    );
+  }
+
+  if (resource.requestHeaders) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "requestHeaders.headers",
+        type: "requestHeaders",
+        panel: "headers",
+      })
+    );
+  }
+
+  if (resource.requestHeadersFromUploadStream) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "requestHeadersFromUploadStream.headers",
+        type: "requestHeadersFromUploadStream",
+        panel: "headers",
+      })
+    );
+  }
+
+  if (resource.responseCookies) {
+    let key = "responseCookies";
+
+    if (resource.responseCookies.cookies) {
+      key = "responseCookies.cookies";
+    }
+
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key,
+        type: "responseCookies",
+        panel: "cookies",
+      })
+    );
+  }
+
+  if (resource.requestCookies) {
+    let key = "requestCookies";
+
+    if (resource.requestCookies.cookies) {
+      key = "requestCookies.cookies";
+    }
+
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key,
+        type: "requestCookies",
+        panel: "cookies",
+      })
+    );
+  }
+
+  if (resource.responseContent) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "responseContent.content.text",
+        type: "responseContent",
+        panel: "response",
+      })
+    );
+  }
+
+  if (resource.requestPostData) {
+    results.push(
+      findMatches(resource, query, modifiers, {
+        key: "requestPostData.postData.text",
+        type: "requestPostData",
+        panel: "request",
+      })
+    );
+  }
+
+  return getResults(results, resource);
+}
+
+/**
+ * Concatenates all results
+ * @param results
+ * @returns {*[]}
+ */
+function getResults(results, resource) {
+  const tempResults = [].concat.apply([], results);
+
+  // Generate unique result keys
+  tempResults.forEach((result, index) => {
+    result.key = index;
+    result.parentResource = resource;
+  });
+
+  return tempResults;
+}
+
+function find(query, modifiers, source) {
+  const { caseSensitive } = modifiers;
+  const value = caseSensitive ? source : source.toLowerCase();
+  const q = caseSensitive ? query : query.toLowerCase();
+
+  return value.includes(q);
+}
+
+/**
+ * Find query matches in arrays, objects and strings.
+ * @param resource
+ * @param query
+ * @param modifiers
+ * @param data
+ * @returns {*[]|[]|Array|*}
+ */
+function findMatches(resource, query, modifiers, data) {
+  if (!resource || !query || !modifiers || !data) {
+    return [];
+  }
+
+  const resourceValue = getValue(data.key, resource);
+  const resourceType = getType(resourceValue);
+
+  if (resource.hasOwnProperty("name") && resource.hasOwnProperty("value")) {
+    return searchInProperties(query, modifiers, resource, data);
+  }
+
+  switch (resourceType) {
+    case "string":
+      return searchInText(query, modifiers, resourceValue, data);
+    case "array":
+      return searchInArray(query, modifiers, resourceValue, data);
+    case "object":
+      return searchInObject(query, modifiers, resourceValue, data);
+    default:
+      return [];
+  }
+}
+
+function searchInProperties(query, modifiers, obj, data) {
+  const { name, value } = obj;
+  const match = {
+    ...data,
+  };
+
+  if (find(query, modifiers, name)) {
+    match.label = name;
+  }
+
+  if (find(query, modifiers, name) || find(query, modifiers, value)) {
+    match.value = value;
+    match.startIndex = value.indexOf(query);
+
+    return match;
+  }
+
+  return [];
+}
+
+/**
+ * Get type of resource - deals with arrays as well.
+ * @param resource
+ * @returns {*}
+ */
+function getType(resource) {
+  return Array.isArray(resource) ? "array" : typeof resource;
+}
+
+/**
+ * Function returns the value of a key, included nested keys.
+ * @param path
+ * @param obj
+ * @returns {*}
+ */
+function getValue(path, obj) {
+  const properties = Array.isArray(path) ? path : path.split(".");
+  return properties.reduce((prev, curr) => prev?.[curr], obj);
+}
+
+/**
+ * Search text for specific string and return all matches found
+ * @param query
+ * @param modifiers
+ * @param text
+ * @param data
+ * @returns {*}
+ */
+function searchInText(query, modifiers, text, data) {
+  const { type } = data;
+  const lines = text.split(/\r\n|\r|\n/);
+  const matches = [];
+
+  // iterate through each line
+  lines.forEach((curr, i) => {
+    const { caseSensitive } = modifiers;
+    const flags = caseSensitive ? "g" : "gi";
+    const regexQuery = RegExp(
+      caseSensitive ? query : query.toLowerCase(),
+      flags
+    );
+    const lineMatches = [];
+    let singleMatch;
+
+    while ((singleMatch = regexQuery.exec(lines[i])) !== null) {
+      const startIndex = regexQuery.lastIndex;
+      lineMatches.push(startIndex);
+    }
+
+    if (lineMatches.length !== 0) {
+      const line = i + 1;
+      const match = {
+        ...data,
+        label: type !== "url" ? line + "" : "Url",
+        line,
+        startIndex: lineMatches,
+      };
+
+      match.value =
+        lineMatches.length === 1
+          ? getTruncatedValue(lines[i], query, lineMatches[0])
+          : lines[i];
+
+      matches.push(match);
+    }
+  });
+
+  return matches.length === 0 ? [] : matches;
+}
+
+/**
+ * Search for query in array.
+ * Iterates through each array item and handles item based on type.
+ * @param query
+ * @param modifiers
+ * @param arr
+ * @param data
+ * @returns {*[]}
+ */
+function searchInArray(query, modifiers, arr, data) {
+  const { key, label } = data;
+  const matches = arr.map((match, i) =>
+    findMatches(match, query, modifiers, {
+      ...data,
+      label: match.hasOwnProperty("name") ? match.name : label,
+      key: key + ".[" + i + "]",
+    })
+  );
+
+  return getResults(matches);
+}
+
+/**
+ * Return query match and up to 50 characters on left and right.
+ * (50) + [matched query] + (50)
+ * @param value
+ * @param query
+ * @param startIndex
+ * @returns {*}
+ */
+function getTruncatedValue(value, query, startIndex) {
+  const valueSize = value.length;
+  const indexEnd = startIndex + query.length;
+
+  if (valueSize < 100 + query.length) {
+    return value;
+  }
+
+  const start = value.substring(startIndex, startIndex - 50);
+  const end = value.substring(indexEnd, indexEnd + 50);
+
+  return start + end;
+}
+
+/**
+ * Iterates through object, including nested objects, returns all
+ * @param query
+ * @param modifiers
+ * @param obj
+ * @param data
+ * @returns {*|[]}
+ */
+function searchInObject(query, modifiers, obj, data) {
+  const matches = data.hasOwnProperty("collector") ? data.collector : [];
+  const { caseSensitive } = modifiers;
+
+  for (const objectKey in obj) {
+    const objectKeyType = getType(obj[objectKey]);
+
+    // if the value is an object, send to search in object
+    if (objectKeyType === "object" && Object.keys(obj[objectKey].length > 1)) {
+      searchInObject(query, obj[objectKey], {
+        ...data,
+        collector: matches,
+      });
+
+      continue;
+    }
+
+    const value = !caseSensitive
+      ? obj[objectKey].toLowerCase()
+      : obj[objectKey];
+    const key = !caseSensitive ? objectKey.toLowerCase() : objectKey;
+    const q = !caseSensitive ? query.toLowerCase() : query;
+
+    if ((objectKeyType === "string" && value.includes(q)) || key.includes(q)) {
+      const match = {
+        ...data,
+      };
+
+      const startIndex = value.indexOf(q);
+
+      match.label = objectKey;
+      match.startIndex = startIndex;
+      match.value = getTruncatedValue(obj[objectKey], query, startIndex);
+
+      matches.push(match);
+    }
+  }
+
+  return matches;
+}
diff --git a/devtools/client/netmonitor/src/workers/search/worker.js b/devtools/client/netmonitor/src/workers/search/worker.js
new file mode 100644
index 0000000000..5557e7d27d
--- /dev/null
+++ b/devtools/client/netmonitor/src/workers/search/worker.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+"use strict";
+
+/* import-globals-from search.js */
+/* import-globals-from ../../../../shared/worker-utils.js */
+importScripts(
+  "resource://devtools/client/netmonitor/src/workers/search/search.js",
+  "resource://devtools/client/shared/worker-utils.js"
+);
+
+// Implementation of search worker (runs in worker scope).
+self.onmessage = workerHandler({ searchInResource });