Bug 1309605 - Fix JSON Post body preview in the Net panel; r=jsnajdr, a=gchang
☠☠ backed out by e7ceeddb165c ☠ ☠
authorJan Odvarko <odvarko@gmail.com>
Thu, 20 Oct 2016 17:08:24 +0200
changeset 356350 059c6aa6f3fd9154ed065d915a69928df8a2a40b
parent 356349 7fa42fc306c1feacba2a7126264e009c8ebabbbc
child 356351 c6604f69b1b70996277a948b1fad3c654f542b70
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjsnajdr, gchang
bugs1309605
milestone51.0a2
Bug 1309605 - Fix JSON Post body preview in the Net panel; r=jsnajdr, a=gchang
devtools/client/netmonitor/netmonitor-view.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_post-data-04.js
devtools/client/netmonitor/test/head.js
devtools/client/netmonitor/test/html_post-json-test-page.html
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -3312,17 +3312,17 @@ NetworkDetailsView.prototype = {
       } catch (ex) { // eslint-disable-line
       }
 
       if (jsonVal) {
         this._params.onlyEnumVisible = true;
         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
         // scope in the params view and place the source editor containing
         // the raw post data directly underneath.
         $("#request-params-box").removeAttribute("flex");
         let paramsScope = this._params.addScope(this._paramsPostPayload);
         paramsScope.expanded = true;
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -17,16 +17,17 @@ support-files =
   html_json-custom-mime-test-page.html
   html_json-long-test-page.html
   html_json-malformed-test-page.html
   html_json-text-mime-test-page.html
   html_jsonp-test-page.html
   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
   html_single-get-page.html
   html_send-beacon.html
   html_sorting-test-page.html
   html_statistics-test-page.html
   html_status-codes-test-page.html
@@ -103,16 +104,17 @@ skip-if = (os == 'linux' && e10s && debu
 [browser_net_leak_on_tab_close.js]
 [browser_net_open_request_in_tab.js]
 [browser_net_page-nav.js]
 [browser_net_pane-collapse.js]
 [browser_net_pane-toggle.js]
 [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]
 [browser_net_reload-button.js]
 [browser_net_reload-markers.js]
 [browser_net_req-resp-bodies.js]
 [browser_net_resend_cors.js]
 [browser_net_resend_headers.js]
new file mode 100644
--- /dev/null
+++ b/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);
+});
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -17,16 +17,17 @@ const EXAMPLE_URL = "http://example.com/
 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_URL = EXAMPLE_URL + "html_content-type-test-page.html";
 const CONTENT_TYPE_WITHOUT_CACHE_URL = EXAMPLE_URL + "html_content-type-without-cache-test-page.html";
 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";
 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";
 const JSON_TEXT_MIME_URL = EXAMPLE_URL + "html_json-text-mime-test-page.html";
new file mode 100644
--- /dev/null
+++ b/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>