From ec6095e3d88fefff736f88b335fc9c768882e338 Mon Sep 17 00:00:00 2001 From: tanhengyeow Date: Mon, 18 Mar 2019 09:56:56 +0000 Subject: [PATCH] Bug 1409920 - add 404 as a filter option for the network panel. r=Honza Allow number to be mapped to "status-code:" Differential Revision: https://phabricator.services.mozilla.com/D21183 --HG-- extra : moz-landing-system : lando --- devtools/client/netmonitor/src/constants.js | 54 ++++++++++++++++++ .../src/utils/filter-autocomplete-provider.js | 29 ++++++++-- .../netmonitor/src/utils/filter-text-utils.js | 21 ++++++- .../client/netmonitor/src/utils/mdn-utils.js | 57 +------------------ .../test/browser_net_filter-autocomplete.js | 31 ++++++++-- 5 files changed, 124 insertions(+), 68 deletions(-) diff --git a/devtools/client/netmonitor/src/constants.js b/devtools/client/netmonitor/src/constants.js index fcb96976ded5..e0d6d1277995 100644 --- 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 diff --git a/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js b/devtools/client/netmonitor/src/utils/filter-autocomplete-provider.js index a59bafc84198..fd6afbeddfc5 100644 --- 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,11 +158,28 @@ function autocompleteProvider(filter, requests) { if (availableValues.length > 0) { autocompleteList = availableValues; } else { - autocompleteList = baseList - .filter((item) => { - return item.toLowerCase().startsWith(lastToken.toLowerCase()) - && item.toLowerCase() !== lastToken.toLowerCase(); - }); + 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 diff --git a/devtools/client/netmonitor/src/utils/filter-text-utils.js b/devtools/client/netmonitor/src/utils/filter-text-utils.js index c881b55e408a..01051590d2d8 100644 --- 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; diff --git a/devtools/client/netmonitor/src/utils/mdn-utils.js b/devtools/client/netmonitor/src/utils/mdn-utils.js index 9b5bdd8147e8..5a266e6543b5 100644 --- 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") => { diff --git a/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js b/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js index 4ee812dd16e3..20255488f6fe 100644 --- a/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js +++ b/devtools/client/netmonitor/test/browser_net_filter-autocomplete.js @@ -57,8 +57,29 @@ add_task(async function() { "Autocomplete Popup still hidden"); document.querySelector(".devtools-filterinput").focus(); - // Typing a char should invoke a autocomplete - EventUtils.sendString("s"); + + // 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"); testAutocompleteContents([ @@ -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