Bug 1445963 - Render array payload as array in the params panel; r=nchevobbe draft
authorJan Odvarko <odvarko@gmail.com>
Mon, 19 Mar 2018 11:47:39 +0100
changeset 769288 e12e868f143484070bd36160be444b19db846f9b
parent 769198 0b997836c7cf258a2b821eaa1c1ee66b9289ab17
push id103091
push userjodvarko@mozilla.com
push dateMon, 19 Mar 2018 10:48:28 +0000
reviewersnchevobbe
bugs1445963
milestone61.0a1
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
devtools/client/netmonitor/src/utils/sort-utils.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_params_sorted.js
devtools/client/netmonitor/test/head.js
devtools/client/netmonitor/test/html_post-array-data-test-page.html
--- 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>