Bug 1409920 - add 404 as a filter option for the network panel. r=Honza

Allow number to be mapped to "status-code:<number>" Differential Revision: https://phabricator.services.mozilla.com/D21183 --HG-- extra : moz-landing-system : lando
2019-03-18 09:56:56 +00:00 · 2019-03-18 09:56:56 +00:00 · ec6095e3d8
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@ -337,6 +337,59 @@ const TIMING_KEYS = [
 // 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",
+];

 const general = {
  ACTIVITY_TYPE,
@ -352,6 +405,7 @@ const general = {
  TIMING_KEYS,
  MIN_COLUMN_WIDTH,
  DEFAULT_COLUMN_WIDTH,
+  SUPPORTED_HTTP_CODES,
 };

 // flatten constants
--- a/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js
+++ b/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js
@ -4,7 +4,7 @@

 "use strict";

-const { FILTER_FLAGS } = require("../constants");
+const { FILTER_FLAGS, SUPPORTED_HTTP_CODES } = require("../constants");

 /**
 * Generates a value for the given filter
@ -158,12 +158,29 @@ function autocompleteProvider(filter, requests) {
  if (availableValues.length > 0) {
    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 > 0) {
+      // 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()
--- a/devtools/client/netmonitor/src/utils/filter-text-utils.js
+++ b/devtools/client/netmonitor/src/utils/filter-text-utils.js
@ -30,7 +30,7 @@

 "use strict";

-const { FILTER_FLAGS } = require("../constants");
+const { FILTER_FLAGS, SUPPORTED_HTTP_CODES } = require("../constants");
 const { getFormattedIPAndPort } = require("./format-utils");
 const { getUnicodeUrl } = require("devtools/client/shared/unicode-url");

@ -53,6 +53,23 @@ function parseFilters(query) {
    }
    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 > 0) {
+        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;
    }
@ -118,7 +135,7 @@ function isFlagFilterMatch(item, { type, value, negative }) {
  responseCookies = responseCookies.cookies || responseCookies;
  switch (type) {
    case "status-code":
-      match = item.status === value;
+      match = item.status && item.status.toString() === value;
      break;
    case "method":
      match = item.method.toLowerCase() === value;
--- a/devtools/client/netmonitor/src/utils/mdn-utils.js
+++ b/devtools/client/netmonitor/src/utils/mdn-utils.js
@ -4,6 +4,8 @@

 "use strict";

+const { SUPPORTED_HTTP_CODES } = require("../constants");
+
 /**
 * A mapping of header names to external documentation. Any header included
 * here will show a MDN link alongside it.
@ -95,61 +97,6 @@ const SUPPORTED_HEADERS = [
  "X-XSS-Protection",
 ];

-/**
- * A mapping of HTTP status codes to external documentation. Any code included
- * here will show a MDN link alongside it.
- */
-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",
-];
-
 const MDN_URL = "https://developer.mozilla.org/docs/";
 const MDN_STATUS_CODES_LIST_URL = `${MDN_URL}Web/HTTP/Status`;
 const getGAParams = (panelId = "netmonitor") => {
--- a/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js
+++ b/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js
@ -57,7 +57,28 @@ add_task(async function() {
    "Autocomplete Popup still hidden");

  document.querySelector(".devtools-filterinput").focus();
-  // Typing a char should invoke a autocomplete
+
+  // Typing numbers that corresponds to status codes should invoke an autocomplete
+  EventUtils.sendString("2");
+  ok(document.querySelector(".devtools-autocomplete-popup"),
+    "Autocomplete Popup Created");
+  testAutocompleteContents([
+    "status-code:200",
+    "status-code:201",
+    "status-code:202",
+    "status-code:203",
+    "status-code:204",
+    "status-code:205",
+    "status-code:206",
+  ], document);
+  EventUtils.synthesizeKey("KEY_Enter");
+  is(document.querySelector(".devtools-filterinput").value,
+    "status-code:200", "Value correctly set after Enter");
+  ok(!document.querySelector(".devtools-autocomplete-popup"),
+    "Autocomplete Popup hidden after keyboard Enter key");
+
+  // Space separated tokens
+  // The last token where autocomplete is available shall generate the popup
  EventUtils.sendString(" s");
  ok(document.querySelector(".devtools-autocomplete-popup"),
    "Autocomplete Popup Created");
@ -80,12 +101,12 @@ add_task(async function() {

  EventUtils.synthesizeKey("KEY_Enter");
  is(document.querySelector(".devtools-filterinput").value,
-    "scheme:http", "Value correctly set after Enter");
+    "status-code:200 scheme:http", "Value correctly set after Enter");
  ok(!document.querySelector(".devtools-autocomplete-popup"),
    "Autocomplete Popup hidden after keyboard Enter key");

  // Space separated tokens
-  // The last token where autocomplete is availabe shall generate the popup
+  // The last token where autocomplete is available shall generate the popup
  EventUtils.sendString(" p");
  testAutocompleteContents(["protocol:"], document);

@ -95,7 +116,7 @@ add_task(async function() {
  // Second return selects "protocol:HTTP/1.1"
  EventUtils.synthesizeKey("KEY_Enter");
  is(document.querySelector(".devtools-filterinput").value,
-    "scheme:http protocol:HTTP/1.1",
+    "status-code:200 scheme:http protocol:HTTP/1.1",
    "Tokenized click generates correct value in input box");

  // Explicitly type in `flag:` renders autocomplete with values