Bug 1309605 - Fix JSON Post body preview in the Net panel; r=jsnajdr

devtools/client/netmonitor/netmonitor-view.js

@@ -946,7 +946,7 @@ NetworkDetailsView.prototype = {
         let jsonScopeName = L10N.getStr("jsonScopeName");
         let jsonScope = this._params.addScope(jsonScopeName);
         jsonScope.expanded = true;
-        let jsonItem = jsonScope.addItem("", { enumerable: true });
+        let jsonItem = jsonScope.addItem(undefined, { enumerable: true });
         jsonItem.populate(jsonVal, { sorted: true });
       } else {
         // This is really awkward, but hey, it works. Let's show an empty

devtools/client/netmonitor/test/browser.ini

@@ -22,6 +22,7 @@ support-files =
   html_navigate-test-page.html
   html_params-test-page.html
   html_post-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
@@ -109,6 +110,7 @@ skip-if = (os == 'linux' && e10s && debug) # Bug 1242204
 [browser_net_post-data-01.js]
 [browser_net_post-data-02.js]
 [browser_net_post-data-03.js]
+[browser_net_post-data-04.js]
 [browser_net_prefs-and-l10n.js]
 [browser_net_prefs-reload.js]
 [browser_net_raw_headers.js]

devtools/client/netmonitor/test/browser_net_post-data-04.js

@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the POST requests display the correct information in the UI,
+ * for JSON payloads.
+ */
+
+add_task(function* () {
+  let { L10N } = require("devtools/client/netmonitor/l10n");
+
+  let { tab, monitor } = yield initNetMonitor(POST_JSON_URL);
+  info("Starting test... ");
+
+  let { document, EVENTS, NetMonitorView } = monitor.panelWin;
+  let { RequestsMenu, NetworkDetails } = NetMonitorView;
+
+  RequestsMenu.lazyUpdate = false;
+  NetworkDetails._params.lazyEmpty = false;
+
+  let wait = waitForNetworkEvents(monitor, 0, 1);
+  yield ContentTask.spawn(tab.linkedBrowser, {}, function* () {
+    content.wrappedJSObject.performRequests();
+  });
+  yield wait;
+
+  let onEvent = monitor.panelWin.once(EVENTS.TAB_UPDATED);
+  NetMonitorView.toggleDetailsPane({ visible: true }, 2);
+  RequestsMenu.selectedIndex = 0;
+  yield onEvent;
+
+  let tabEl = document.querySelectorAll("#event-details-pane tab")[2];
+  let tabpanel = document.querySelectorAll("#event-details-pane tabpanel")[2];
+
+  is(tabEl.getAttribute("selected"), "true",
+    "The params tab in the network details pane should be selected.");
+
+  is(tabpanel.querySelector("#request-params-box")
+    .hasAttribute("hidden"), false,
+    "The request params box doesn't have the intended visibility.");
+  is(tabpanel.querySelector("#request-post-data-textarea-box")
+    .hasAttribute("hidden"), true,
+    "The request post data textarea box doesn't have the intended visibility.");
+
+  is(tabpanel.querySelectorAll(".variables-view-scope").length, 1,
+    "There should be 1 param scopes displayed in this tabpanel.");
+  is(tabpanel.querySelectorAll(".variables-view-empty-notice").length, 0,
+    "The empty notice should not be displayed in this tabpanel.");
+
+  let jsonScope = tabpanel.querySelectorAll(".variables-view-scope")[0];
+  is(jsonScope.querySelector(".name").getAttribute("value"),
+    L10N.getStr("jsonScopeName"),
+    "The JSON scope doesn't have the correct title.");
+
+  let valueScope = tabpanel.querySelector(
+    ".variables-view-scope > .variables-view-element-details");
+
+  is(valueScope.querySelectorAll(".variables-view-variable").length, 1,
+    "There should be 1 value displayed in the JSON scope.");
+  is(valueScope.querySelector(".variables-view-property .name")
+    .getAttribute("value"),
+    "a", "The JSON var name was incorrect.");
+  is(valueScope.querySelector(".variables-view-property .value")
+    .getAttribute("value"),
+    "1", "The JSON var value was incorrect.");
+
+  let detailsParent = valueScope.querySelector(".variables-view-property .name")
+    .closest(".variables-view-element-details");
+  is(detailsParent.hasAttribute("open"), true, "The JSON value must be visible");
+
+  return teardown(monitor);
+});

devtools/client/netmonitor/test/head.js

@@ -22,6 +22,7 @@ const CONTENT_TYPE_WITHOUT_CACHE_URL = EXAMPLE_URL + "html_content-type-without-
 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_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";

devtools/client/netmonitor/test/html_post-json-test-page.html

@@ -0,0 +1,39 @@
+<!-- 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>
+    <p>POST raw test</p>
+
+    <script type="text/javascript">
+      function post(address, message, callback) {
+        let xhr = new XMLHttpRequest();
+        xhr.open("POST", address, true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+
+        xhr.onreadystatechange = function () {
+          if (this.readyState == this.DONE) {
+            callback();
+          }
+        };
+        xhr.send(message);
+      }
+
+      function performRequests() {
+        post("sjs_simple-test-server.sjs", JSON.stringify({a: 1}), function () {
+          // Done.
+        });
+      }
+    </script>
+  </body>
+
+</html>