Adding upstream version 115.8.0esr.upstream/115.8.0esr

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

1 files changed, 1493 insertions, 0 deletions

diff --git a/devtools/client/netmonitor/test/head.js b/devtools/client/netmonitor/test/head.js
new file mode 100644
index 0000000000..d1c3112f02
--- /dev/null
+++ b/devtools/client/netmonitor/test/head.js
@@ -0,0 +1,1493 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * This file (head.js) is injected into all other test contexts within
+ * this directory, allowing one to utilize the functions here in said
+ * tests without referencing head.js explicitly.
+ */
+
+/* exported Toolbox, restartNetMonitor, teardown, waitForExplicitFinish,
+   verifyRequestItemTarget, waitFor, waitForDispatch, testFilterButtons,
+   performRequestsInContent, waitForNetworkEvents, selectIndexAndWaitForSourceEditor,
+   testColumnsAlignment, hideColumn, showColumn, performRequests, waitForRequestData,
+   toggleBlockedUrl, registerFaviconNotifier, clickOnSidebarTab */
+
+"use strict";
+
+// The below file (shared-head.js) handles imports, constants, and
+// utility functions, and is loaded into this context.
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/shared-head.js",
+  this
+);
+
+const { LinkHandlerParent } = ChromeUtils.importESModule(
+  "resource:///actors/LinkHandlerParent.sys.mjs"
+);
+
+const {
+  getFormattedIPAndPort,
+  getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+
+const {
+  getSortedRequests,
+  getRequestById,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+const {
+  getUnicodeUrl,
+  getUnicodeHostname,
+} = require("resource://devtools/client/shared/unicode-url.js");
+const {
+  getFormattedProtocol,
+  getUrlHost,
+  getUrlScheme,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  EVENTS,
+  TEST_EVENTS,
+} = require("resource://devtools/client/netmonitor/src/constants.js");
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+
+/* eslint-disable no-unused-vars, max-len */
+const EXAMPLE_URL =
+  "http://example.com/browser/devtools/client/netmonitor/test/";
+const EXAMPLE_ORG_URL =
+  "http://example.org/browser/devtools/client/netmonitor/test/";
+const HTTPS_EXAMPLE_URL =
+  "https://example.com/browser/devtools/client/netmonitor/test/";
+const HTTPS_EXAMPLE_ORG_URL =
+  "https://example.org/browser/devtools/client/netmonitor/test/";
+/* Since the test server will proxy `ws://example.com` to websocket server on 9988,
+so we must sepecify the port explicitly */
+const WS_URL = "ws://127.0.0.1:8888/browser/devtools/client/netmonitor/test/";
+const WS_HTTP_URL =
+  "http://127.0.0.1:8888/browser/devtools/client/netmonitor/test/";
+
+const WS_BASE_URL =
+  "http://mochi.test:8888/browser/devtools/client/netmonitor/test/";
+const WS_PAGE_URL = WS_BASE_URL + "html_ws-test-page.html";
+const WS_PAGE_EARLY_CONNECTION_URL =
+  WS_BASE_URL + "html_ws-early-connection-page.html";
+const API_CALLS_URL = HTTPS_EXAMPLE_URL + "html_api-calls-test-page.html";
+const SIMPLE_URL = EXAMPLE_URL + "html_simple-test-page.html";
+const HTTPS_SIMPLE_URL = HTTPS_EXAMPLE_URL + "html_simple-test-page.html";
+const NAVIGATE_URL = EXAMPLE_URL + "html_navigate-test-page.html";
+const CONTENT_TYPE_WITHOUT_CACHE_URL =
+  EXAMPLE_URL + "html_content-type-without-cache-test-page.html";
+const CONTENT_TYPE_WITHOUT_CACHE_REQUESTS = 8;
+const CYRILLIC_URL = EXAMPLE_URL + "html_cyrillic-test-page.html";
+const STATUS_CODES_URL = EXAMPLE_URL + "html_status-codes-test-page.html";
+const HTTPS_STATUS_CODES_URL =
+  HTTPS_EXAMPLE_URL + "html_status-codes-test-page.html";
+const POST_DATA_URL = EXAMPLE_URL + "html_post-data-test-page.html";
+const POST_ARRAY_DATA_URL = EXAMPLE_URL + "html_post-array-data-test-page.html";
+const POST_JSON_URL = EXAMPLE_URL + "html_post-json-test-page.html";
+const POST_RAW_URL = EXAMPLE_URL + "html_post-raw-test-page.html";
+const POST_RAW_URL_WITH_HASH = EXAMPLE_URL + "html_header-test-page.html";
+const POST_RAW_WITH_HEADERS_URL =
+  EXAMPLE_URL + "html_post-raw-with-headers-test-page.html";
+const PARAMS_URL = EXAMPLE_URL + "html_params-test-page.html";
+const JSONP_URL = EXAMPLE_URL + "html_jsonp-test-page.html";
+const JSON_LONG_URL = EXAMPLE_URL + "html_json-long-test-page.html";
+const JSON_MALFORMED_URL = EXAMPLE_URL + "html_json-malformed-test-page.html";
+const JSON_CUSTOM_MIME_URL =
+  EXAMPLE_URL + "html_json-custom-mime-test-page.html";
+const JSON_TEXT_MIME_URL = EXAMPLE_URL + "html_json-text-mime-test-page.html";
+const JSON_B64_URL = EXAMPLE_URL + "html_json-b64.html";
+const JSON_BASIC_URL = EXAMPLE_URL + "html_json-basic.html";
+const JSON_EMPTY_URL = EXAMPLE_URL + "html_json-empty.html";
+const JSON_XSSI_PROTECTION_URL = EXAMPLE_URL + "html_json-xssi-protection.html";
+const FONTS_URL = EXAMPLE_URL + "html_fonts-test-page.html";
+const SORTING_URL = EXAMPLE_URL + "html_sorting-test-page.html";
+const FILTERING_URL = EXAMPLE_URL + "html_filter-test-page.html";
+const HTTPS_FILTERING_URL = HTTPS_EXAMPLE_URL + "html_filter-test-page.html";
+const INFINITE_GET_URL = EXAMPLE_URL + "html_infinite-get-page.html";
+const CUSTOM_GET_URL = EXAMPLE_URL + "html_custom-get-page.html";
+const HTTPS_CUSTOM_GET_URL = HTTPS_EXAMPLE_URL + "html_custom-get-page.html";
+const SINGLE_GET_URL = EXAMPLE_URL + "html_single-get-page.html";
+const HTTPS_SINGLE_GET_URL = HTTPS_EXAMPLE_URL + "html_single-get-page.html";
+const STATISTICS_URL = EXAMPLE_URL + "html_statistics-test-page.html";
+const STATISTICS_EDGE_CASE_URL =
+  EXAMPLE_URL + "html_statistics-edge-case-page.html";
+const CURL_URL = EXAMPLE_URL + "html_copy-as-curl.html";
+const HTTPS_CURL_URL = HTTPS_EXAMPLE_URL + "html_copy-as-curl.html";
+const HTTPS_CURL_UTILS_URL = HTTPS_EXAMPLE_URL + "html_curl-utils.html";
+const SEND_BEACON_URL = EXAMPLE_URL + "html_send-beacon.html";
+const CORS_URL = EXAMPLE_URL + "html_cors-test-page.html";
+const HTTPS_CORS_URL = HTTPS_EXAMPLE_URL + "html_cors-test-page.html";
+const PAUSE_URL = EXAMPLE_URL + "html_pause-test-page.html";
+const OPEN_REQUEST_IN_TAB_URL = EXAMPLE_URL + "html_open-request-in-tab.html";
+const CSP_URL = EXAMPLE_URL + "html_csp-test-page.html";
+const CSP_RESEND_URL = EXAMPLE_URL + "html_csp-resend-test-page.html";
+const IMAGE_CACHE_URL = HTTPS_EXAMPLE_URL + "html_image-cache.html";
+const SLOW_REQUESTS_URL = EXAMPLE_URL + "html_slow-requests-test-page.html";
+
+const SIMPLE_SJS = EXAMPLE_URL + "sjs_simple-test-server.sjs";
+const HTTPS_SIMPLE_SJS = HTTPS_EXAMPLE_URL + "sjs_simple-test-server.sjs";
+const SIMPLE_UNSORTED_COOKIES_SJS =
+  EXAMPLE_URL + "sjs_simple-unsorted-cookies-test-server.sjs";
+const CONTENT_TYPE_SJS = EXAMPLE_URL + "sjs_content-type-test-server.sjs";
+const WS_CONTENT_TYPE_SJS = WS_HTTP_URL + "sjs_content-type-test-server.sjs";
+const WS_WS_CONTENT_TYPE_SJS = WS_URL + "sjs_content-type-test-server.sjs";
+const HTTPS_CONTENT_TYPE_SJS =
+  HTTPS_EXAMPLE_URL + "sjs_content-type-test-server.sjs";
+const SERVER_TIMINGS_TYPE_SJS =
+  HTTPS_EXAMPLE_URL + "sjs_timings-test-server.sjs";
+const STATUS_CODES_SJS = EXAMPLE_URL + "sjs_status-codes-test-server.sjs";
+const SORTING_SJS = EXAMPLE_URL + "sjs_sorting-test-server.sjs";
+const HTTPS_REDIRECT_SJS = EXAMPLE_URL + "sjs_https-redirect-test-server.sjs";
+const CORS_SJS_PATH =
+  "/browser/devtools/client/netmonitor/test/sjs_cors-test-server.sjs";
+const HSTS_SJS = EXAMPLE_URL + "sjs_hsts-test-server.sjs";
+const METHOD_SJS = EXAMPLE_URL + "sjs_method-test-server.sjs";
+const HTTPS_SLOW_SJS = HTTPS_EXAMPLE_URL + "sjs_slow-test-server.sjs";
+const SET_COOKIE_SAME_SITE_SJS = EXAMPLE_URL + "sjs_set-cookie-same-site.sjs";
+const SEARCH_SJS = EXAMPLE_URL + "sjs_search-test-server.sjs";
+const HTTPS_SEARCH_SJS = HTTPS_EXAMPLE_URL + "sjs_search-test-server.sjs";
+
+const HSTS_BASE_URL = EXAMPLE_URL;
+const HSTS_PAGE_URL = CUSTOM_GET_URL;
+
+const TEST_IMAGE = EXAMPLE_URL + "test-image.png";
+const TEST_IMAGE_DATA_URI =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==";
+
+const SETTINGS_MENU_ITEMS = {
+  "persist-logs": ".netmonitor-settings-persist-item",
+  "import-har": ".netmonitor-settings-import-har-item",
+  "save-har": ".netmonitor-settings-import-save-item",
+  "copy-har": ".netmonitor-settings-import-copy-item",
+};
+
+/* eslint-enable no-unused-vars, max-len */
+
+// All tests are asynchronous.
+waitForExplicitFinish();
+
+const gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
+// To enable logging for try runs, just set the pref to true.
+Services.prefs.setBoolPref("devtools.debugger.log", false);
+
+// Uncomment this pref to dump all devtools emitted events to the console.
+// Services.prefs.setBoolPref("devtools.dump.emit", true);
+
+// Always reset some prefs to their original values after the test finishes.
+const gDefaultFilters = Services.prefs.getCharPref(
+  "devtools.netmonitor.filters"
+);
+
+// Reveal many columns for test
+Services.prefs.setCharPref(
+  "devtools.netmonitor.visibleColumns",
+  '["initiator","contentSize","cookies","domain","duration",' +
+    '"endTime","file","url","latency","method","protocol",' +
+    '"remoteip","responseTime","scheme","setCookies",' +
+    '"startTime","status","transferred","type","waterfall"]'
+);
+
+Services.prefs.setCharPref(
+  "devtools.netmonitor.columnsData",
+  '[{"name":"status","minWidth":30,"width":5},' +
+    '{"name":"method","minWidth":30,"width":5},' +
+    '{"name":"domain","minWidth":30,"width":10},' +
+    '{"name":"file","minWidth":30,"width":25},' +
+    '{"name":"url","minWidth":30,"width":25},' +
+    '{"name":"initiator","minWidth":30,"width":20},' +
+    '{"name":"type","minWidth":30,"width":5},' +
+    '{"name":"transferred","minWidth":30,"width":10},' +
+    '{"name":"contentSize","minWidth":30,"width":5},' +
+    '{"name":"waterfall","minWidth":150,"width":15}]'
+);
+
+registerCleanupFunction(() => {
+  info("finish() was called, cleaning up...");
+
+  Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
+  Services.prefs.setCharPref("devtools.netmonitor.filters", gDefaultFilters);
+  Services.prefs.clearUserPref("devtools.cache.disabled");
+  Services.prefs.clearUserPref("devtools.netmonitor.columnsData");
+  Services.prefs.clearUserPref("devtools.netmonitor.visibleColumns");
+  Services.cookies.removeAll();
+});
+
+async function disableCacheAndReload(toolbox, waitForLoad) {
+  // Disable the cache for any toolbox that it is opened from this point on.
+  Services.prefs.setBoolPref("devtools.cache.disabled", true);
+
+  await toolbox.commands.targetConfigurationCommand.updateConfiguration({
+    cacheDisabled: true,
+  });
+
+  // If the page which is reloaded is not found, this will likely cause
+  // reloadTopLevelTarget to not return so let not wait for it.
+  if (waitForLoad) {
+    await toolbox.commands.targetCommand.reloadTopLevelTarget();
+  } else {
+    toolbox.commands.targetCommand.reloadTopLevelTarget();
+  }
+}
+
+/**
+ * Wait for 2 markers during document load.
+ */
+function waitForTimelineMarkers(monitor) {
+  return new Promise(resolve => {
+    const markers = [];
+
+    function handleTimelineEvent(marker) {
+      info(`Got marker: ${marker.name}`);
+      markers.push(marker);
+      if (markers.length == 2) {
+        monitor.panelWin.api.off(
+          TEST_EVENTS.TIMELINE_EVENT,
+          handleTimelineEvent
+        );
+        info("Got two timeline markers, done waiting");
+        resolve(markers);
+      }
+    }
+
+    monitor.panelWin.api.on(TEST_EVENTS.TIMELINE_EVENT, handleTimelineEvent);
+  });
+}
+
+let finishedQueue = {};
+const updatingTypes = [
+  "NetMonitor:NetworkEventUpdating:RequestCookies",
+  "NetMonitor:NetworkEventUpdating:ResponseCookies",
+  "NetMonitor:NetworkEventUpdating:RequestHeaders",
+  "NetMonitor:NetworkEventUpdating:ResponseHeaders",
+  "NetMonitor:NetworkEventUpdating:RequestPostData",
+  "NetMonitor:NetworkEventUpdating:ResponseContent",
+  "NetMonitor:NetworkEventUpdating:SecurityInfo",
+  "NetMonitor:NetworkEventUpdating:EventTimings",
+];
+const updatedTypes = [
+  "NetMonitor:NetworkEventUpdated:RequestCookies",
+  "NetMonitor:NetworkEventUpdated:ResponseCookies",
+  "NetMonitor:NetworkEventUpdated:RequestHeaders",
+  "NetMonitor:NetworkEventUpdated:ResponseHeaders",
+  "NetMonitor:NetworkEventUpdated:RequestPostData",
+  "NetMonitor:NetworkEventUpdated:ResponseContent",
+  "NetMonitor:NetworkEventUpdated:SecurityInfo",
+  "NetMonitor:NetworkEventUpdated:EventTimings",
+];
+
+// Start collecting all networkEventUpdate event when panel is opened.
+// removeTab() should be called once all corresponded RECEIVED_* events finished.
+function startNetworkEventUpdateObserver(panelWin) {
+  updatingTypes.forEach(type =>
+    panelWin.api.on(type, actor => {
+      const key = actor + "-" + updatedTypes[updatingTypes.indexOf(type)];
+      finishedQueue[key] = finishedQueue[key] ? finishedQueue[key] + 1 : 1;
+    })
+  );
+
+  updatedTypes.forEach(type =>
+    panelWin.api.on(type, payload => {
+      const key = payload.from + "-" + type;
+      finishedQueue[key] = finishedQueue[key] ? finishedQueue[key] - 1 : -1;
+    })
+  );
+
+  panelWin.api.on("clear-network-resources", () => {
+    finishedQueue = {};
+  });
+}
+
+async function waitForAllNetworkUpdateEvents() {
+  function checkNetworkEventUpdateState() {
+    for (const key in finishedQueue) {
+      if (finishedQueue[key] > 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+  info("Wait for completion of all NetworkUpdateEvents packets...");
+  await waitUntil(() => checkNetworkEventUpdateState());
+  finishedQueue = {};
+}
+
+function initNetMonitor(
+  url,
+  {
+    requestCount,
+    expectedEventTimings,
+    waitForLoad = true,
+    enableCache = false,
+  }
+) {
+  info("Initializing a network monitor pane.");
+
+  if (!requestCount && !enableCache) {
+    ok(
+      false,
+      "initNetMonitor should be given a number of requests the page will perform"
+    );
+  }
+
+  return (async function () {
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        // Capture all stacks so that the timing of devtools opening
+        // doesn't affect the stack trace results.
+        ["javascript.options.asyncstack_capture_debuggee_only", false],
+      ],
+    });
+
+    const tab = await addTab(url, { waitForLoad });
+    info("Net tab added successfully: " + url);
+
+    const toolbox = await gDevTools.showToolboxForTab(tab, {
+      toolId: "netmonitor",
+    });
+    info("Network monitor pane shown successfully.");
+
+    const monitor = toolbox.getCurrentPanel();
+
+    startNetworkEventUpdateObserver(monitor.panelWin);
+
+    if (!enableCache) {
+      info("Disabling cache and reloading page.");
+
+      const allComplete = [];
+      allComplete.push(
+        waitForNetworkEvents(monitor, requestCount, {
+          expectedEventTimings,
+        })
+      );
+
+      if (waitForLoad) {
+        allComplete.push(waitForTimelineMarkers(monitor));
+      }
+      await disableCacheAndReload(toolbox, waitForLoad);
+      await Promise.all(allComplete);
+      await clearNetworkEvents(monitor);
+    }
+
+    return { tab, monitor, toolbox };
+  })();
+}
+
+function restartNetMonitor(monitor, { requestCount }) {
+  info("Restarting the specified network monitor.");
+
+  return (async function () {
+    const tab = monitor.commands.descriptorFront.localTab;
+    const url = tab.linkedBrowser.currentURI.spec;
+
+    await waitForAllNetworkUpdateEvents();
+    info("All pending requests finished.");
+
+    const onDestroyed = monitor.once("destroyed");
+    await removeTab(tab);
+    await onDestroyed;
+
+    return initNetMonitor(url, { requestCount });
+  })();
+}
+
+/**
+ * Clears the network requests in the UI
+ * @param {Object} monitor
+ *         The netmonitor instance used for retrieving a context menu element.
+ */
+async function clearNetworkEvents(monitor) {
+  const { store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  await waitForAllNetworkUpdateEvents();
+
+  info("Clearing the network requests in the UI");
+  store.dispatch(Actions.clearRequests());
+}
+
+function teardown(monitor) {
+  info("Destroying the specified network monitor.");
+
+  return (async function () {
+    const tab = monitor.commands.descriptorFront.localTab;
+
+    await waitForAllNetworkUpdateEvents();
+    info("All pending requests finished.");
+
+    await monitor.toolbox.destroy();
+    await removeTab(tab);
+  })();
+}
+
+/**
+ * Wait for the request(s) to be fully notified to the frontend.
+ *
+ * @param {Object} monitor
+ *        The netmonitor instance used for retrieving a context menu element.
+ * @param {Number} getRequests
+ *        The number of request to wait for
+ * @param {Object} options (optional)
+ *        - expectedEventTimings {Number} Number of EVENT_TIMINGS events to wait for.
+ *        In case of filtering, we get less of such events.
+ */
+function waitForNetworkEvents(monitor, getRequests, options = {}) {
+  return new Promise(resolve => {
+    const panel = monitor.panelWin;
+    let networkEvent = 0;
+    let nonBlockedNetworkEvent = 0;
+    let payloadReady = 0;
+    let eventTimings = 0;
+
+    function onNetworkEvent(resource) {
+      networkEvent++;
+      if (!resource.blockedReason) {
+        nonBlockedNetworkEvent++;
+      }
+      maybeResolve(TEST_EVENTS.NETWORK_EVENT, resource.actor);
+    }
+
+    function onPayloadReady(resource) {
+      payloadReady++;
+      maybeResolve(EVENTS.PAYLOAD_READY, resource.actor);
+    }
+
+    function onEventTimings(response) {
+      eventTimings++;
+      maybeResolve(EVENTS.RECEIVED_EVENT_TIMINGS, response.from);
+    }
+
+    function onClearNetworkResources() {
+      // Reset all counters.
+      networkEvent = 0;
+      nonBlockedNetworkEvent = 0;
+      payloadReady = 0;
+      eventTimings = 0;
+    }
+
+    function maybeResolve(event, actor) {
+      const { document } = monitor.panelWin;
+      // Wait until networkEvent, payloadReady and event timings finish for each request.
+      // The UI won't fetch timings when:
+      // * hidden in background,
+      // * for any blocked request,
+      let expectedEventTimings =
+        document.visibilityState == "hidden" ? 0 : nonBlockedNetworkEvent;
+      let expectedPayloadReady = getRequests;
+      // Typically ignore this option if it is undefined or null
+      if (typeof options?.expectedEventTimings == "number") {
+        expectedEventTimings = options.expectedEventTimings;
+      }
+      if (typeof options?.expectedPayloadReady == "number") {
+        expectedPayloadReady = options.expectedPayloadReady;
+      }
+      info(
+        "> Network event progress: " +
+          "NetworkEvent: " +
+          networkEvent +
+          "/" +
+          getRequests +
+          ", " +
+          "PayloadReady: " +
+          payloadReady +
+          "/" +
+          expectedPayloadReady +
+          ", " +
+          "EventTimings: " +
+          eventTimings +
+          "/" +
+          expectedEventTimings +
+          ", " +
+          "got " +
+          event +
+          " for " +
+          actor
+      );
+
+      if (
+        networkEvent >= getRequests &&
+        payloadReady >= expectedPayloadReady &&
+        eventTimings >= expectedEventTimings
+      ) {
+        panel.api.off(TEST_EVENTS.NETWORK_EVENT, onNetworkEvent);
+        panel.api.off(EVENTS.PAYLOAD_READY, onPayloadReady);
+        panel.api.off(EVENTS.RECEIVED_EVENT_TIMINGS, onEventTimings);
+        panel.api.off("clear-network-resources", onClearNetworkResources);
+        executeSoon(resolve);
+      }
+    }
+
+    panel.api.on(TEST_EVENTS.NETWORK_EVENT, onNetworkEvent);
+    panel.api.on(EVENTS.PAYLOAD_READY, onPayloadReady);
+    panel.api.on(EVENTS.RECEIVED_EVENT_TIMINGS, onEventTimings);
+    panel.api.on("clear-network-resources", onClearNetworkResources);
+  });
+}
+
+function verifyRequestItemTarget(
+  document,
+  requestList,
+  requestItem,
+  method,
+  url,
+  data = {}
+) {
+  info("> Verifying: " + method + " " + url + " " + data.toSource());
+
+  const visibleIndex = requestList.findIndex(
+    needle => needle.id === requestItem.id
+  );
+
+  isnot(visibleIndex, -1, "The requestItem exists");
+  info("Visible index of item: " + visibleIndex);
+
+  const {
+    fuzzyUrl,
+    status,
+    statusText,
+    cause,
+    type,
+    fullMimeType,
+    transferred,
+    size,
+    time,
+    displayedStatus,
+  } = data;
+
+  const target = document.querySelectorAll(".request-list-item")[visibleIndex];
+
+  // Bug 1414981 - Request URL should not show #hash
+  const unicodeUrl = getUnicodeUrl(url.split("#")[0]);
+  const ORIGINAL_FILE_URL = L10N.getFormatStr(
+    "netRequest.originalFileURL.tooltip",
+    url
+  );
+  const DECODED_FILE_URL = L10N.getFormatStr(
+    "netRequest.decodedFileURL.tooltip",
+    unicodeUrl
+  );
+  const fileToolTip =
+    url === unicodeUrl ? url : ORIGINAL_FILE_URL + "\n\n" + DECODED_FILE_URL;
+  const requestedFile = requestItem.urlDetails.baseNameWithQuery;
+  const host = getUnicodeHostname(getUrlHost(url));
+  const scheme = getUrlScheme(url);
+  const {
+    remoteAddress,
+    remotePort,
+    totalTime,
+    eventTimings = { timings: {} },
+  } = requestItem;
+  const formattedIPPort = getFormattedIPAndPort(remoteAddress, remotePort);
+  const remoteIP = remoteAddress ? `${formattedIPPort}` : "unknown";
+  const duration = getFormattedTime(totalTime);
+  const latency = getFormattedTime(eventTimings.timings.wait);
+  const protocol = getFormattedProtocol(requestItem);
+
+  if (fuzzyUrl) {
+    ok(
+      requestItem.method.startsWith(method),
+      "The attached method is correct."
+    );
+    ok(requestItem.url.startsWith(url), "The attached url is correct.");
+  } else {
+    is(requestItem.method, method, "The attached method is correct.");
+    is(requestItem.url, url.split("#")[0], "The attached url is correct.");
+  }
+
+  is(
+    target.querySelector(".requests-list-method").textContent,
+    method,
+    "The displayed method is correct."
+  );
+
+  if (fuzzyUrl) {
+    ok(
+      target
+        .querySelector(".requests-list-file")
+        .textContent.startsWith(requestedFile),
+      "The displayed file is correct."
+    );
+    ok(
+      target
+        .querySelector(".requests-list-file")
+        .getAttribute("title")
+        .startsWith(fileToolTip),
+      "The tooltip file is correct."
+    );
+  } else {
+    is(
+      target.querySelector(".requests-list-file").textContent,
+      requestedFile,
+      "The displayed file is correct."
+    );
+    is(
+      target.querySelector(".requests-list-file").getAttribute("title"),
+      fileToolTip,
+      "The tooltip file is correct."
+    );
+  }
+
+  is(
+    target.querySelector(".requests-list-protocol").textContent,
+    protocol,
+    "The displayed protocol is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-protocol").getAttribute("title"),
+    protocol,
+    "The tooltip protocol is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-domain").textContent,
+    host,
+    "The displayed domain is correct."
+  );
+
+  const domainTooltip =
+    host + (remoteAddress ? " (" + formattedIPPort + ")" : "");
+  is(
+    target.querySelector(".requests-list-domain").getAttribute("title"),
+    domainTooltip,
+    "The tooltip domain is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-remoteip").textContent,
+    remoteIP,
+    "The displayed remote IP is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-remoteip").getAttribute("title"),
+    remoteIP,
+    "The tooltip remote IP is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-scheme").textContent,
+    scheme,
+    "The displayed scheme is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-scheme").getAttribute("title"),
+    scheme,
+    "The tooltip scheme is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-duration-time").textContent,
+    duration,
+    "The displayed duration is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-duration-time").getAttribute("title"),
+    duration,
+    "The tooltip duration is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-latency-time").textContent,
+    latency,
+    "The displayed latency is correct."
+  );
+
+  is(
+    target.querySelector(".requests-list-latency-time").getAttribute("title"),
+    latency,
+    "The tooltip latency is correct."
+  );
+
+  if (status !== undefined) {
+    const value = target
+      .querySelector(".requests-list-status-code")
+      .getAttribute("data-status-code");
+    const codeValue = target.querySelector(
+      ".requests-list-status-code"
+    ).textContent;
+    const tooltip = target
+      .querySelector(".requests-list-status-code")
+      .getAttribute("title");
+    info("Displayed status: " + value);
+    info("Displayed code: " + codeValue);
+    info("Tooltip status: " + tooltip);
+    is(
+      `${value}`,
+      displayedStatus ? `${displayedStatus}` : `${status}`,
+      "The displayed status is correct."
+    );
+    is(`${codeValue}`, `${status}`, "The displayed status code is correct.");
+    is(tooltip, status + " " + statusText, "The tooltip status is correct.");
+  }
+  if (cause !== undefined) {
+    const value = Array.from(
+      target.querySelector(".requests-list-initiator").childNodes
+    )
+      .filter(node => node.nodeType === Node.ELEMENT_NODE)
+      .map(({ textContent }) => textContent)
+      .join("");
+    const tooltip = target
+      .querySelector(".requests-list-initiator")
+      .getAttribute("title");
+    info("Displayed cause: " + value);
+    info("Tooltip cause: " + tooltip);
+    ok(value.includes(cause.type), "The displayed cause is correct.");
+    ok(tooltip.includes(cause.type), "The tooltip cause is correct.");
+  }
+  if (type !== undefined) {
+    const value = target.querySelector(".requests-list-type").textContent;
+    let tooltip = target
+      .querySelector(".requests-list-type")
+      .getAttribute("title");
+    info("Displayed type: " + value);
+    info("Tooltip type: " + tooltip);
+    is(value, type, "The displayed type is correct.");
+    if (Object.is(tooltip, null)) {
+      tooltip = undefined;
+    }
+    is(tooltip, fullMimeType, "The tooltip type is correct.");
+  }
+  if (transferred !== undefined) {
+    const value = target.querySelector(
+      ".requests-list-transferred"
+    ).textContent;
+    const tooltip = target
+      .querySelector(".requests-list-transferred")
+      .getAttribute("title");
+    info("Displayed transferred size: " + value);
+    info("Tooltip transferred size: " + tooltip);
+    is(value, transferred, "The displayed transferred size is correct.");
+    is(tooltip, transferred, "The tooltip transferred size is correct.");
+  }
+  if (size !== undefined) {
+    const value = target.querySelector(".requests-list-size").textContent;
+    const tooltip = target
+      .querySelector(".requests-list-size")
+      .getAttribute("title");
+    info("Displayed size: " + value);
+    info("Tooltip size: " + tooltip);
+    is(value, size, "The displayed size is correct.");
+    is(tooltip, size, "The tooltip size is correct.");
+  }
+  if (time !== undefined) {
+    const value = target.querySelector(
+      ".requests-list-timings-total"
+    ).textContent;
+    const tooltip = target
+      .querySelector(".requests-list-timings-total")
+      .getAttribute("title");
+    info("Displayed time: " + value);
+    info("Tooltip time: " + tooltip);
+    ok(~~value.match(/[0-9]+/) >= 0, "The displayed time is correct.");
+    ok(~~tooltip.match(/[0-9]+/) >= 0, "The tooltip time is correct.");
+  }
+
+  if (visibleIndex !== -1) {
+    if (visibleIndex % 2 === 0) {
+      ok(target.classList.contains("even"), "Item should have 'even' class.");
+      ok(!target.classList.contains("odd"), "Item shouldn't have 'odd' class.");
+    } else {
+      ok(
+        !target.classList.contains("even"),
+        "Item shouldn't have 'even' class."
+      );
+      ok(target.classList.contains("odd"), "Item should have 'odd' class.");
+    }
+  }
+}
+
+/**
+ * Tests if a button for a filter of given type is the only one checked.
+ *
+ * @param string filterType
+ *        The type of the filter that should be the only one checked.
+ */
+function testFilterButtons(monitor, filterType) {
+  const doc = monitor.panelWin.document;
+  const target = doc.querySelector(
+    ".requests-list-filter-" + filterType + "-button"
+  );
+  ok(target, `Filter button '${filterType}' was found`);
+  const buttons = [
+    ...doc.querySelectorAll(".requests-list-filter-buttons button"),
+  ];
+  ok(!!buttons.length, "More than zero filter buttons were found");
+
+  // Only target should be checked.
+  const checkStatus = buttons.map(button => (button == target ? 1 : 0));
+  testFilterButtonsCustom(monitor, checkStatus);
+}
+
+/**
+ * Tests if filter buttons have 'checked' attributes set correctly.
+ *
+ * @param array aIsChecked
+ *        An array specifying if a button at given index should have a
+ *        'checked' attribute. For example, if the third item of the array
+ *        evaluates to true, the third button should be checked.
+ */
+function testFilterButtonsCustom(monitor, isChecked) {
+  const doc = monitor.panelWin.document;
+  const buttons = doc.querySelectorAll(".requests-list-filter-buttons button");
+  for (let i = 0; i < isChecked.length; i++) {
+    const button = buttons[i];
+    if (isChecked[i]) {
+      is(
+        button.getAttribute("aria-pressed"),
+        "true",
+        "The " + button.id + " button should set 'aria-pressed' = true."
+      );
+    } else {
+      is(
+        button.getAttribute("aria-pressed"),
+        "false",
+        "The " + button.id + " button should set 'aria-pressed' = false."
+      );
+    }
+  }
+}
+
+/**
+ * Performs a single XMLHttpRequest and returns a promise that resolves once
+ * the request has loaded.
+ *
+ * @param Object data
+ *        { method: the request method (default: "GET"),
+ *          url: the url to request (default: content.location.href),
+ *          body: the request body to send (default: ""),
+ *          nocache: append an unique token to the query string (default: true),
+ *          requestHeaders: set request headers (default: none)
+ *        }
+ *
+ * @return Promise A promise that's resolved with object
+ *         { status: XMLHttpRequest.status,
+ *           response: XMLHttpRequest.response }
+ *
+ */
+function promiseXHR(data) {
+  return new Promise((resolve, reject) => {
+    const xhr = new content.XMLHttpRequest();
+
+    const method = data.method || "GET";
+    let url = data.url || content.location.href;
+    const body = data.body || "";
+
+    if (data.nocache) {
+      url += "?devtools-cachebust=" + Math.random();
+    }
+
+    xhr.addEventListener(
+      "loadend",
+      function (event) {
+        resolve({ status: xhr.status, response: xhr.response });
+      },
+      { once: true }
+    );
+
+    xhr.open(method, url);
+
+    // Set request headers
+    if (data.requestHeaders) {
+      data.requestHeaders.forEach(header => {
+        xhr.setRequestHeader(header.name, header.value);
+      });
+    }
+
+    xhr.send(body);
+  });
+}
+
+/**
+ * Performs a single websocket request and returns a promise that resolves once
+ * the request has loaded.
+ *
+ * @param Object data
+ *        { url: the url to request (default: content.location.href),
+ *          nocache: append an unique token to the query string (default: true),
+ *        }
+ *
+ * @return Promise A promise that's resolved with object
+ *         { status: websocket status(101),
+ *           response: empty string }
+ *
+ */
+function promiseWS(data) {
+  return new Promise((resolve, reject) => {
+    let url = data.url;
+
+    if (data.nocache) {
+      url += "?devtools-cachebust=" + Math.random();
+    }
+
+    /* Create websocket instance */
+    const socket = new content.WebSocket(url);
+
+    /* Since we only use HTTP server to mock websocket, so just ignore the error */
+    socket.onclose = e => {
+      socket.close();
+      resolve({
+        status: 101,
+        response: "",
+      });
+    };
+
+    socket.onerror = e => {
+      socket.close();
+      resolve({
+        status: 101,
+        response: "",
+      });
+    };
+  });
+}
+
+/**
+ * Perform the specified requests in the context of the page content.
+ *
+ * @param Array requests
+ *        An array of objects specifying the requests to perform. See
+ *        shared/test/frame-script-utils.js for more information.
+ *
+ * @return A promise that resolves once the requests complete.
+ */
+async function performRequestsInContent(requests) {
+  if (!Array.isArray(requests)) {
+    requests = [requests];
+  }
+
+  const responses = [];
+
+  info("Performing requests in the context of the content.");
+
+  for (const request of requests) {
+    const requestFn = request.ws ? promiseWS : promiseXHR;
+    const response = await SpecialPowers.spawn(
+      gBrowser.selectedBrowser,
+      [request],
+      requestFn
+    );
+    responses.push(response);
+  }
+}
+
+function testColumnsAlignment(headers, requestList) {
+  const firstRequestLine = requestList.childNodes[0];
+
+  // Find number of columns
+  const numberOfColumns = headers.childElementCount;
+  for (let i = 0; i < numberOfColumns; i++) {
+    const headerColumn = headers.childNodes[i];
+    const requestColumn = firstRequestLine.childNodes[i];
+    is(
+      headerColumn.getBoundingClientRect().left,
+      requestColumn.getBoundingClientRect().left,
+      "Headers for columns number " + i + " are aligned."
+    );
+  }
+}
+
+async function hideColumn(monitor, column) {
+  const { document } = monitor.panelWin;
+
+  info(`Clicking context-menu item for ${column}`);
+  EventUtils.sendMouseEvent(
+    { type: "contextmenu" },
+    document.querySelector(".requests-list-headers")
+  );
+
+  const onHeaderRemoved = waitForDOM(
+    document,
+    `#requests-list-${column}-button`,
+    0
+  );
+  await selectContextMenuItem(monitor, `request-list-header-${column}-toggle`);
+  await onHeaderRemoved;
+
+  ok(
+    !document.querySelector(`#requests-list-${column}-button`),
+    `Column ${column} should be hidden`
+  );
+}
+
+async function showColumn(monitor, column) {
+  const { document } = monitor.panelWin;
+
+  info(`Clicking context-menu item for ${column}`);
+  EventUtils.sendMouseEvent(
+    { type: "contextmenu" },
+    document.querySelector(".requests-list-headers")
+  );
+
+  const onHeaderAdded = waitForDOM(
+    document,
+    `#requests-list-${column}-button`,
+    1
+  );
+  await selectContextMenuItem(monitor, `request-list-header-${column}-toggle`);
+  await onHeaderAdded;
+
+  ok(
+    document.querySelector(`#requests-list-${column}-button`),
+    `Column ${column} should be visible`
+  );
+}
+
+/**
+ * Select a request and switch to its response panel.
+ *
+ * @param {Number} index The request index to be selected
+ */
+async function selectIndexAndWaitForSourceEditor(monitor, index) {
+  const { document } = monitor.panelWin;
+  const onResponseContent = monitor.panelWin.api.once(
+    TEST_EVENTS.RECEIVED_RESPONSE_CONTENT
+  );
+  // Select the request first, as it may try to fetch whatever is the current request's
+  // responseContent if we select the ResponseTab first.
+  EventUtils.sendMouseEvent(
+    { type: "mousedown" },
+    document.querySelectorAll(".request-list-item")[index]
+  );
+  // We may already be on the ResponseTab, so only select it if needed.
+  const editor = document.querySelector("#response-panel .CodeMirror-code");
+  if (!editor) {
+    const waitDOM = waitForDOM(document, "#response-panel .CodeMirror-code");
+    document.querySelector("#response-tab").click();
+    await waitDOM;
+  }
+  await onResponseContent;
+}
+
+/**
+ * Helper function for executing XHRs on a test page.
+ *
+ * @param {Number} count Number of requests to be executed.
+ */
+async function performRequests(monitor, tab, count) {
+  const wait = waitForNetworkEvents(monitor, count);
+  await ContentTask.spawn(tab.linkedBrowser, count, requestCount => {
+    content.wrappedJSObject.performRequests(requestCount);
+  });
+  await wait;
+}
+
+/**
+ * Helper function for retrieving `.CodeMirror` content
+ */
+function getCodeMirrorValue(monitor) {
+  const { document } = monitor.panelWin;
+  return document.querySelector(".CodeMirror").CodeMirror.getValue();
+}
+
+/**
+ * Helper function opening the options menu
+ */
+function openSettingsMenu(monitor) {
+  const { document } = monitor.panelWin;
+  document.querySelector(".netmonitor-settings-menu-button").click();
+}
+
+function clickSettingsMenuItem(monitor, itemKey) {
+  openSettingsMenu(monitor);
+  const node = getSettingsMenuItem(monitor, itemKey);
+  node.click();
+}
+
+function getSettingsMenuItem(monitor, itemKey) {
+  // The settings menu is injected into the toolbox document,
+  // so we must use the panelWin parent to query for items
+  const { parent } = monitor.panelWin;
+  const { document } = parent;
+
+  return document.querySelector(SETTINGS_MENU_ITEMS[itemKey]);
+}
+
+/**
+ * Wait for lazy fields to be loaded in a request.
+ *
+ * @param Object Store redux store containing request list.
+ * @param array fields array of strings which contain field names to be checked
+ * on the request.
+ */
+function waitForRequestData(store, fields, id) {
+  return waitUntil(() => {
+    let item;
+    if (id) {
+      item = getRequestById(store.getState(), id);
+    } else {
+      item = getSortedRequests(store.getState())[0];
+    }
+    if (!item) {
+      return false;
+    }
+    for (const field of fields) {
+      if (!item[field]) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+
+// Telemetry
+
+/**
+ * Helper for verifying telemetry event.
+ *
+ * @param Object expectedEvent object representing expected event data.
+ * @param Object query fields specifying category, method and object
+ *                     of the target telemetry event.
+ */
+function checkTelemetryEvent(expectedEvent, query) {
+  const events = queryTelemetryEvents(query);
+  is(events.length, 1, "There was only 1 event logged");
+
+  const [event] = events;
+  ok(event.session_id > 0, "There is a valid session_id in the logged event");
+
+  const f = e => JSON.stringify(e, null, 2);
+  is(
+    f(event),
+    f({
+      ...expectedEvent,
+      session_id: event.session_id,
+    }),
+    "The event has the expected data"
+  );
+}
+
+function queryTelemetryEvents(query) {
+  const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const category = query.category || "devtools.main";
+  const object = query.object || "netmonitor";
+
+  const filtersChangedEvents = snapshot.parent.filter(
+    event =>
+      event[1] === category && event[2] === query.method && event[3] === object
+  );
+
+  // Return the `extra` field (which is event[5]e).
+  return filtersChangedEvents.map(event => event[5]);
+}
+/**
+ * Check that the provided requests match the requests displayed in the netmonitor.
+ *
+ * @param {array} requests
+ *     The expected requests.
+ * @param {object} monitor
+ *     The netmonitor instance.
+ * @param {object=} options
+ * @param {boolean} allowDifferentOrder
+ *     When set to true, requests are allowed to be in a different order in the
+ *     netmonitor than in the expected requests array. Defaults to false.
+ */
+function validateRequests(requests, monitor, options = {}) {
+  const { allowDifferentOrder } = options;
+  const { document, store, windowRequire } = monitor.panelWin;
+
+  const { getDisplayedRequests } = windowRequire(
+    "devtools/client/netmonitor/src/selectors/index"
+  );
+  const sortedRequests = getSortedRequests(store.getState());
+
+  requests.forEach((spec, i) => {
+    const { method, url, causeType, causeUri, stack } = spec;
+
+    let requestItem;
+    if (allowDifferentOrder) {
+      requestItem = sortedRequests.find(r => r.url === url);
+    } else {
+      requestItem = sortedRequests[i];
+    }
+
+    verifyRequestItemTarget(
+      document,
+      getDisplayedRequests(store.getState()),
+      requestItem,
+      method,
+      url,
+      { cause: { type: causeType, loadingDocumentUri: causeUri } }
+    );
+
+    const { stacktrace } = requestItem;
+    const stackLen = stacktrace ? stacktrace.length : 0;
+
+    if (stack) {
+      ok(stacktrace, `Request #${i} has a stacktrace`);
+      ok(
+        stackLen > 0,
+        `Request #${i} (${causeType}) has a stacktrace with ${stackLen} items`
+      );
+
+      // if "stack" is array, check the details about the top stack frames
+      if (Array.isArray(stack)) {
+        stack.forEach((frame, j) => {
+          // If the `fn` is "*", it means the request is triggered from chrome
+          // resources, e.g. `resource:///modules/XX.jsm`, so we skip checking
+          // the function name for now (bug 1280266).
+          if (frame.file.startsWith("resource:///")) {
+            todo(false, "Requests from chrome resource should not be included");
+          } else {
+            let value = stacktrace[j].functionName;
+            if (Object.is(value, null)) {
+              value = undefined;
+            }
+            is(
+              value,
+              frame.fn,
+              `Request #${i} has the correct function on JS stack frame #${j}`
+            );
+            is(
+              stacktrace[j].filename.split("/").pop(),
+              frame.file.split("/").pop(),
+              `Request #${i} has the correct file on JS stack frame #${j}`
+            );
+            is(
+              stacktrace[j].lineNumber,
+              frame.line,
+              `Request #${i} has the correct line number on JS stack frame #${j}`
+            );
+            value = stacktrace[j].asyncCause;
+            if (Object.is(value, null)) {
+              value = undefined;
+            }
+            is(
+              value,
+              frame.asyncCause,
+              `Request #${i} has the correct async cause on JS stack frame #${j}`
+            );
+          }
+        });
+      }
+    } else {
+      is(stackLen, 0, `Request #${i} (${causeType}) has an empty stacktrace`);
+    }
+  });
+}
+
+/**
+ * Retrieve the context menu element corresponding to the provided id, for the provided
+ * netmonitor instance.
+ * @param {Object} monitor
+ *        The network monnitor object
+ * @param {String} id
+ *        The id of the context menu item
+ */
+function getContextMenuItem(monitor, id) {
+  const Menu = require("resource://devtools/client/framework/menu.js");
+  return Menu.getMenuElementById(id, monitor.panelWin.document);
+}
+
+async function maybeOpenAncestorMenu(menuItem) {
+  const parentPopup = menuItem.parentNode;
+  if (parentPopup.state == "shown") {
+    return;
+  }
+  const shown = BrowserTestUtils.waitForEvent(parentPopup, "popupshown");
+  if (parentPopup.state == "showing") {
+    await shown;
+    return;
+  }
+  const parentMenu = parentPopup.parentNode;
+  await maybeOpenAncestorMenu(parentMenu);
+  parentMenu.openMenu(true);
+  await shown;
+}
+
+/*
+ * Selects and clicks the context menu item, it should
+ * also wait for the popup to close.
+ * @param {Object} monitor
+ *        The network monnitor object
+ * @param {String} id
+ *        The id of the context menu item
+ */
+async function selectContextMenuItem(monitor, id) {
+  const contextMenuItem = getContextMenuItem(monitor, id);
+
+  const popup = contextMenuItem.parentNode;
+  await maybeOpenAncestorMenu(contextMenuItem);
+  const hidden = BrowserTestUtils.waitForEvent(popup, "popuphidden");
+  popup.activateItem(contextMenuItem);
+  await hidden;
+}
+
+/**
+ * Wait for DOM being in specific state. But, do not wait
+ * for change if it's in the expected state already.
+ */
+async function waitForDOMIfNeeded(target, selector, expectedLength = 1) {
+  return new Promise(resolve => {
+    const elements = target.querySelectorAll(selector);
+    if (elements.length == expectedLength) {
+      resolve(elements);
+    } else {
+      waitForDOM(target, selector, expectedLength).then(elems => {
+        resolve(elems);
+      });
+    }
+  });
+}
+
+/**
+ * Helper for blocking or unblocking a request via the list item's context menu.
+ *
+ * @param {Element} element
+ *        Target request list item to be right clicked to bring up its context menu.
+ * @param {Object} monitor
+ *        The netmonitor instance used for retrieving a context menu element.
+ * @param {Object} store
+ *        The redux store (wait-service middleware required).
+ * @param {String} action
+ *        The action, block or unblock, to construct a corresponding context menu id.
+ */
+async function toggleBlockedUrl(element, monitor, store, action = "block") {
+  EventUtils.sendMouseEvent({ type: "contextmenu" }, element);
+  const contextMenuId = `request-list-context-${action}-url`;
+  const onRequestComplete = waitForDispatch(
+    store,
+    "REQUEST_BLOCKING_UPDATE_COMPLETE"
+  );
+  await selectContextMenuItem(monitor, contextMenuId);
+
+  info(`Wait for selected request to be ${action}ed`);
+  await onRequestComplete;
+  info(`Selected request is now ${action}ed`);
+}
+
+/**
+ * Find and click an element
+ *
+ * @param {Element} element
+ *        Target element to be clicked
+ * @param {Object} monitor
+ *        The netmonitor instance used for retrieving the window.
+ */
+
+function clickElement(element, monitor) {
+  EventUtils.synthesizeMouseAtCenter(element, {}, monitor.panelWin);
+}
+
+/**
+ * Register a listener to be notified when a favicon finished loading and
+ * dispatch a "devtools:test:favicon" event to the favicon's link element.
+ *
+ * @param {Browser} browser
+ *        Target browser to observe the favicon load.
+ */
+function registerFaviconNotifier(browser) {
+  const listener = async (name, data) => {
+    if (name == "SetIcon" || name == "SetFailedIcon") {
+      await SpecialPowers.spawn(browser, [], async () => {
+        content.document
+          .querySelector("link[rel='icon']")
+          .dispatchEvent(new content.CustomEvent("devtools:test:favicon"));
+      });
+      LinkHandlerParent.removeListenerForTests(listener);
+    }
+  };
+  LinkHandlerParent.addListenerForTests(listener);
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Click on the "Response" tab to open "Response" panel in the sidebar.
+ * @param {Document} doc
+ *        Network panel document.
+ * @param {String} name
+ *        Network panel sidebar tab name.
+ */
+const clickOnSidebarTab = (doc, name) => {
+  AccessibilityUtils.setEnv({
+    // Keyboard accessibility is handled on the sidebar tabs container level
+    // (nav). Users can use arrow keys to navigate between and select tabs.
+    nonNegativeTabIndexRule: false,
+  });
+  EventUtils.sendMouseEvent(
+    { type: "click" },
+    doc.querySelector(`#${name}-tab`)
+  );
+  AccessibilityUtils.resetEnv();
+};
+
+/**
+ * Add a new blocked request URL pattern. The request blocking sidepanel should
+ * already be opened.
+ *
+ * @param {string} pattern
+ *     The URL pattern to add to block requests.
+ * @param {Object} monitor
+ *     The netmonitor instance.
+ */
+async function addBlockedRequest(pattern, monitor) {
+  info("Add a blocked request for the URL pattern " + pattern);
+  const doc = monitor.panelWin.document;
+
+  const addRequestForm = await waitFor(() =>
+    doc.querySelector(
+      "#network-action-bar-blocked-panel .request-blocking-add-form"
+    )
+  );
+  ok(!!addRequestForm, "The request blocking side panel is not available");
+
+  info("Wait for the add input to get focus");
+  await waitFor(() =>
+    addRequestForm.querySelector("input.devtools-searchinput:focus")
+  );
+
+  typeInNetmonitor(pattern, monitor);
+  EventUtils.synthesizeKey("KEY_Enter");
+}
+
+/**
+ * Check if the provided .request-list-item element corresponds to a blocked
+ * request.
+ *
+ * @param {Element}
+ *     The request's DOM element.
+ * @returns {boolean}
+ *     True if the request is displayed as blocked, false otherwise.
+ */
+function checkRequestListItemBlocked(item) {
+  return item.className.includes("blocked");
+}
+
+/**
+ * Type the provided string the netmonitor window. The correct input should be
+ * focused prior to using this helper.
+ *
+ * @param {string} string
+ *     The string to type.
+ * @param {Object} monitor
+ *     The netmonitor instance used to type the string.
+ */
+function typeInNetmonitor(string, monitor) {
+  for (const ch of string) {
+    EventUtils.synthesizeKey(ch, {}, monitor.panelWin);
+  }
+}