diff --git a/devtools/client/netmonitor/src/components/ParamsPanel.js b/devtools/client/netmonitor/src/components/ParamsPanel.js index 63a3c524c270..a449d4c292f7 100644 --- a/devtools/client/netmonitor/src/components/ParamsPanel.js +++ b/devtools/client/netmonitor/src/components/ParamsPanel.js @@ -82,7 +82,7 @@ class ParamsPanel extends Component { getProperties(arr) { return arr.reduce((map, obj) => { const value = map[obj.name]; - if (value) { + if (value || value === "") { if (typeof value !== "object") { map[obj.name] = [value]; } diff --git a/devtools/client/netmonitor/test/browser_net_complex-params.js b/devtools/client/netmonitor/test/browser_net_complex-params.js index 70ac96d67433..56b44c8dc11b 100644 --- a/devtools/client/netmonitor/test/browser_net_complex-params.js +++ b/devtools/client/netmonitor/test/browser_net_complex-params.js @@ -19,7 +19,7 @@ add_task(async function() { store.dispatch(Actions.batchEnable(false)); // Execute requests. - await performRequests(monitor, tab, 10); + await performRequests(monitor, tab, 12); wait = waitForDOM(document, "#params-panel .tree-section", 2); EventUtils.sendMouseEvent({ type: "mousedown" }, @@ -85,6 +85,23 @@ add_task(async function() { ["species", "in=(52,60)"], ])); + wait = waitForDOM(document, "#params-panel .tree-section", 1); + EventUtils.sendMouseEvent({ type: "mousedown" }, + document.querySelectorAll(".request-list-item")[10]); + await wait; + testParamsTabGetWithArgs(new Map([ + ["a", ["", "b"]], + ])); + + wait = waitForDOM(document, "#params-panel .tree-section", 1); + EventUtils.sendMouseEvent({ type: "mousedown" }, + document.querySelectorAll(".request-list-item")[11]); + await wait; + testParamsTabGetWithArgs(new Map([ + ["a", ["b", "c"]], + ["d", "1"] + ])); + await teardown(monitor); function testParamsTab1(queryStringParamName, queryStringParamValue, @@ -198,15 +215,22 @@ add_task(async function() { } /** - * @param {Map} expectedParams A map of expected parameter keys and values - * as Strings. + * @param {Map} expectedParams A map of expected parameter keys, and values + * as Strings or an array of Strings if the parameter key has multiple + * values */ function testParamsTabGetWithArgs(expectedParams) { const tabpanel = document.querySelector("#params-panel"); + let numParamRows = 0; + expectedParams.forEach((v, k, m) => { + numParamRows += (typeof v === "object" ? v.length + 1 : 1); + }); + is(tabpanel.querySelectorAll(".tree-section").length, 1, "Check the number of param tree sections displayed in this tabpanel."); - is(tabpanel.querySelectorAll("tr:not(.tree-section).treeRow").length, 1, + is(tabpanel.querySelectorAll("tr:not(.tree-section).treeRow").length, + numParamRows, "Check the number of param rows displayed in this tabpanel."); ok(!tabpanel.querySelector(".empty-notice"), "The empty notice should not be displayed in this tabpanel."); @@ -229,10 +253,28 @@ add_task(async function() { const labelsIter = labels.values(); const valuesIter = values.values(); for (const [expKey, expValue] of expectedParams) { - const label = labelsIter.next().value; - const value = valuesIter.next().value; - is(label.textContent, expKey, "Check that parameter name matches."); - is(value.textContent, expValue, "Check that parameter value matches."); + let label = labelsIter.next().value; + let value = valuesIter.next().value; + + if (typeof expValue === "object") { + // multiple values for one parameter + is(label.textContent, expKey, "Check that parameter name matches."); + is(value.textContent, "[\u2026]", // horizontal ellipsis + "Check that parameter value indicates multiple."); + + for (let i = 0; i < expValue.length; i++) { + label = labelsIter.next().value; + value = valuesIter.next().value; + is(label.textContent, i + "", + "Check that multi-value parameter index matches."); + is(value.textContent, expValue[i], + "Check that multi-value parameter value matches."); + is(label.dataset.level, 2, "Check that parameter is nested."); + } + } else { + is(label.textContent, expKey, "Check that parameter name matches."); + is(value.textContent, expValue, "Check that parameter value matches."); + } } } }); diff --git a/devtools/client/netmonitor/test/html_params-test-page.html b/devtools/client/netmonitor/test/html_params-test-page.html index 98d2d9b47bfb..4bdb248b8529 100644 --- a/devtools/client/netmonitor/test/html_params-test-page.html +++ b/devtools/client/netmonitor/test/html_params-test-page.html @@ -69,6 +69,8 @@ await patch("baz", "?a=b", urlencoded, '{ "foo": "bar" }'); await put("baz", "?a=b", urlencoded, '{ "foo": "bar" }'); await get("baz", "?species=in=(52,60)"); + await get("baz", "?a=&a=b"); + await get("baz", "?a=b&a=c&d=1"); }