Bug 1514750 - Show JSON POST payload as plain text view also. r=Honza
authorHemakshi Sachdev <sachdev.hemakshi@gmail.com>
Thu, 14 Feb 2019 15:56:17 +0000
changeset 459546 8ced3fcdd37c8746935916eb5e746c0ebde84a75
parent 459545 a8d8de1df9e4f8ee5b671480d0a789d1631322b6
child 459547 a2bc2cdbcea34ff5e6a5d0576bc36ad5eede0550
push id111964
push usercsabou@mozilla.com
push dateFri, 15 Feb 2019 18:54:44 +0000
treeherdermozilla-inbound@db3c4f905082 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1514750
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1514750 - Show JSON POST payload as plain text view also. r=Honza Differential Revision: https://phabricator.services.mozilla.com/D19262
devtools/client/netmonitor/src/components/ParamsPanel.js
devtools/client/netmonitor/test/browser_net_complex-params.js
devtools/client/netmonitor/test/browser_net_post-data-04.js
--- a/devtools/client/netmonitor/src/components/ParamsPanel.js
+++ b/devtools/client/netmonitor/src/components/ParamsPanel.js
@@ -133,24 +133,23 @@ class ParamsPanel extends Component {
       try {
         json = JSON.parse(postData);
       } catch (error) {
         // Continue regardless of parsing error
       }
 
       if (json) {
         object[JSON_SCOPE_NAME] = sortObjectKeys(json);
-      } else {
-        object[PARAMS_POST_PAYLOAD] = {
-          EDITOR_CONFIG: {
-            text: postData,
-            mode: mimeType.replace(/;.+/, ""),
-          },
-        };
       }
+      object[PARAMS_POST_PAYLOAD] = {
+        EDITOR_CONFIG: {
+          text: postData,
+          mode: mimeType.replace(/;.+/, ""),
+        },
+      };
     } else {
       postData = "";
     }
 
     return (
       div({ className: "panel-container" },
         PropertiesView({
           object,
--- a/devtools/client/netmonitor/test/browser_net_complex-params.js
+++ b/devtools/client/netmonitor/test/browser_net_complex-params.js
@@ -36,31 +36,34 @@ add_task(async function() {
   testParamsTab1("a", "b", '{ "foo": "bar" }', "");
 
   wait = waitForDOM(document, "#params-panel .tree-section", 2);
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[2]);
   await wait;
   testParamsTab1("a", "b", "?foo", "bar");
 
-  wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
+  let waitSections, waitSourceEditor;
+  waitSections = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
+  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[3]);
-  await wait;
+  await Promise.all([waitSections, waitSourceEditor]);
   testParamsTab2("a", "", '{ "foo": "bar" }', "js");
 
-  wait = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
+  waitSections = waitForDOM(document, "#params-panel tr:not(.tree-section).treeRow", 2);
+  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[4]);
-  await wait;
+  await Promise.all([waitSections, waitSourceEditor]);
   testParamsTab2("a", "b", '{ "foo": "bar" }', "js");
 
   // Wait for all tree sections and editor updated by react
-  const waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
-  const waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
+  waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
+  waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[5]);
   await Promise.all([waitSections, waitSourceEditor]);
   testParamsTab2("a", "b", "?foo=bar", "text");
 
   EventUtils.sendMouseEvent({ type: "mousedown" },
     document.querySelectorAll(".request-list-item")[6]);
   testParamsTab3();
@@ -144,28 +147,27 @@ add_task(async function() {
       "The first form data param value was incorrect.");
   }
 
   function testParamsTab2(queryStringParamName, queryStringParamValue,
                           requestPayload, editorMode) {
     const isJSON = editorMode === "js";
     const tabpanel = document.querySelector("#params-panel");
 
-    is(tabpanel.querySelectorAll(".tree-section").length, 2,
+    is(tabpanel.querySelectorAll(".tree-section").length, isJSON ? 3 : 2,
       "The number of param tree sections displayed in this tabpanel is incorrect.");
     is(tabpanel.querySelectorAll("tr:not(.tree-section).treeRow").length, isJSON ? 2 : 1,
       "The number of param rows displayed in this tabpanel is incorrect.");
     is(tabpanel.querySelectorAll(".empty-notice").length, 0,
       "The empty notice should not be displayed in this tabpanel.");
 
     ok(tabpanel.querySelector(".treeTable"),
       "The request params box should be displayed.");
-    is(tabpanel.querySelector(".CodeMirror-code") === null,
-      isJSON,
-      "The request post data editor should be not displayed.");
+    ok(tabpanel.querySelector(".CodeMirror-code"),
+      "The request post data editor should be displayed.");
 
     const treeSections = tabpanel.querySelectorAll(".tree-section");
 
     is(treeSections[0].querySelector(".treeLabel").textContent,
       L10N.getStr("paramsQueryString"),
       "The query section doesn't have the correct title.");
     is(treeSections[1].querySelector(".treeLabel").textContent,
       isJSON ? L10N.getStr("jsonScopeName") : L10N.getStr("paramsPostPayload"),
@@ -176,30 +178,34 @@ add_task(async function() {
     const values = tabpanel
       .querySelectorAll("tr:not(.treeS-section) .treeValueCell .objectBox");
 
     is(labels[0].textContent, queryStringParamName,
       "The first query string param name was incorrect.");
     is(values[0].textContent, queryStringParamValue,
       "The first query string param value was incorrect.");
 
+    ok(tabpanel.querySelector(".CodeMirror-code").textContent.includes(requestPayload),
+      "The text shown in the source editor is incorrect.");
+
     if (isJSON) {
+      is(treeSections[2].querySelector(".treeLabel").textContent,
+        L10N.getStr("paramsPostPayload"),
+        "The post section doesn't have the correct title.");
+
       const requestPayloadObject = JSON.parse(requestPayload);
       const requestPairs = Object.keys(requestPayloadObject)
         .map(k => [k, requestPayloadObject[k]]);
       for (let i = 1; i < requestPairs.length; i++) {
         const [requestPayloadName, requestPayloadValue] = requestPairs[i];
         is(requestPayloadName, labels[i].textContent,
           "JSON property name " + i + " should be displayed correctly");
         is('"' + requestPayloadValue + '"', values[i].textContent,
           "JSON property value " + i + " should be displayed correctly");
       }
-    } else {
-      ok(document.querySelector(".CodeMirror-code").textContent.includes(requestPayload),
-        "The text shown in the source editor is incorrect.");
     }
   }
 
   function testParamsTab3() {
     const tabpanel = document.querySelector("#params-panel");
 
     is(tabpanel.querySelectorAll(".tree-section").length, 0,
       "The number of param tree sections displayed in this tabpanel is incorrect.");
--- a/devtools/client/netmonitor/test/browser_net_post-data-04.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-04.js
@@ -17,41 +17,48 @@ add_task(async function() {
   const { document, store, windowRequire } = monitor.panelWin;
   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 
   store.dispatch(Actions.batchEnable(false));
 
   // Execute requests.
   await performRequests(monitor, tab, 1);
 
-  // Wait for all tree view updated by react
-  wait = waitForDOM(document, "#params-panel .tree-section");
+  // Wait for all tree view updated by react, Bug 1514750 - wait for editor also
+  const waitSections = waitForDOM(document, "#params-panel .tree-section", 2);
+  const waitSourceEditor = waitForDOM(document, "#params-panel .CodeMirror-code");
   store.dispatch(Actions.toggleNetworkDetails());
   EventUtils.sendMouseEvent({ type: "click" },
     document.querySelector("#params-tab"));
-  await wait;
-
+  await Promise.all([waitSections, waitSourceEditor]);
   const tabpanel = document.querySelector("#params-panel");
 
   ok(tabpanel.querySelector(".treeTable"),
     "The request params doesn't have the indended visibility.");
-  ok(tabpanel.querySelector(".editor-mount") === null,
+  // Bug 1514750 - Show JSON params in plain text view also
+  ok(tabpanel.querySelector(".CodeMirror-code"),
     "The request post data doesn't have the indended visibility.");
-
-  is(tabpanel.querySelectorAll(".tree-section").length, 1,
-    "There should be 1 tree sections displayed in this tabpanel.");
+  is(tabpanel.querySelectorAll(".tree-section").length, 2,
+    "There should be 2 tree sections displayed in this tabpanel.");
   is(tabpanel.querySelectorAll(".empty-notice").length, 0,
     "The empty notice should not be displayed in this tabpanel.");
 
-  is(tabpanel.querySelector(".tree-section .treeLabel").textContent,
-    L10N.getStr("jsonScopeName"),
-    "The JSON section doesn't have the correct title.");
+  const treeSections = tabpanel.querySelectorAll(".tree-section");
+
+  is(treeSections[0].querySelector(".treeLabel").textContent,
+    L10N.getStr("jsonScopeName"), "The post section doesn't have the correct title.");
+  is(treeSections[1].querySelector(".treeLabel").textContent,
+    L10N.getStr("paramsPostPayload"),
+    "The post section doesn't have the correct title.");
 
   const labels = tabpanel
     .querySelectorAll("tr:not(.tree-section) .treeLabelCell .treeLabel");
   const values = tabpanel
     .querySelectorAll("tr:not(.tree-section) .treeValueCell .objectBox");
 
   is(labels[0].textContent, "a", "The JSON var name was incorrect.");
   is(values[0].textContent, "1", "The JSON var value was incorrect.");
 
+  ok(tabpanel.querySelector(".CodeMirror-code").textContent.includes('{"a":1}'),
+    "The text shown in the source editor is incorrect.");
+
   return teardown(monitor);
 });