Bug 1445963 - Render array payload as array in the params panel; r=nchevobbe
* The patch fixes 'sortObjectKeys' method that caused the reported issue
MozReview-Commit-ID: ANg3OCwKCVo
--- a/devtools/client/netmonitor/src/utils/sort-utils.js
+++ b/devtools/client/netmonitor/src/utils/sort-utils.js
@@ -8,16 +8,26 @@
* 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];
}
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -22,16 +22,17 @@ support-files =
html_json-malformed-test-page.html
html_json-text-mime-test-page.html
html_jsonp-test-page.html
html_maps-test-page.html
html_navigate-test-page.html
html_params-test-page.html
html_pause-test-page.html
html_post-data-test-page.html
+ html_post-array-data-test-page.html
html_post-json-test-page.html
html_post-raw-test-page.html
html_post-raw-with-headers-test-page.html
html_simple-test-page.html
html_single-get-page.html
html_send-beacon.html
html_sorting-test-page.html
html_statistics-test-page.html
--- a/devtools/client/netmonitor/test/browser_net_params_sorted.js
+++ b/devtools/client/netmonitor/test/browser_net_params_sorted.js
@@ -1,42 +1,70 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Tests whether keys in Params panel are sorted.
*/
-
add_task(async function() {
- let { tab, monitor } = await initNetMonitor(POST_DATA_URL);
+ let { tab, monitor } = await initNetMonitor(POST_ARRAY_DATA_URL);
info("Starting test... ");
let { document, store, windowRequire } = monitor.panelWin;
let Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
store.dispatch(Actions.batchEnable(false));
- let wait = waitForNetworkEvents(monitor, 2);
+ let wait = waitForNetworkEvents(monitor, 1);
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
content.wrappedJSObject.performRequests();
});
await wait;
wait = waitForDOM(document, ".headers-overview");
EventUtils.sendMouseEvent({ type: "mousedown" },
document.querySelectorAll(".request-list-item")[0]);
await wait;
EventUtils.sendMouseEvent({ type: "click" },
document.querySelector("#params-tab"));
- let actualKeys = document.querySelectorAll(".treeLabel");
- let expectedKeys = ["Query string", "baz", "foo", "type",
- "Form data", "baz", "foo"];
+ // The Params panel should render the following
+ // POSTed JSON data structure:
+ //
+ // ▼ JSON
+ // ▼ watches: […]
+ // 0: hello
+ // 1: how
+ // 2: are
+ // 3: you
+ // ▼ 4: {…}
+ // a: 10
+ // ▼ b: […]
+ // 0: "a"
+ // 1: "c"
+ // 2: "b"
+ // c: 15
+ let actualKeys = document.querySelectorAll(".treeTable .treeRow");
+ let expectedKeys = [
+ "JSON",
+ "watches: [...]",
+ "0: hello",
+ "1: how",
+ "2: are",
+ "3: you",
+ "4: {...}",
+ "a: 10",
+ "b: [...]",
+ "0: a",
+ "1: c",
+ "2: b",
+ "c: 15",
+ ];
for (let i = 0; i < actualKeys.length; i++) {
is(actualKeys[i].innerText, expectedKeys[i],
"Actual value " + actualKeys[i].innerText + " is equal to the " +
"expected value " + expectedKeys[i]);
}
});
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -35,16 +35,17 @@ const HTTPS_EXAMPLE_URL = "https://examp
const API_CALLS_URL = EXAMPLE_URL + "html_api-calls-test-page.html";
const SIMPLE_URL = 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 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_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";
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/html_post-array-data-test-page.html
@@ -0,0 +1,34 @@
+<!-- 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>
+ <script type="text/javascript">
+ /* exported performRequests */
+ "use strict";
+
+ function performRequests() {
+ let xhr = new XMLHttpRequest();
+ xhr.open("POST", "sjs_simple-test-server.sjs", true);
+
+ let postData = JSON.stringify({
+ watches: ["hello", "how", "are", "you", {
+ a: 10,
+ c: 15,
+ b: ["a", "c", "b"]
+ }],
+ });
+ xhr.send(postData);
+ }
+ </script>
+ </body>
+</html>