Bug 1616040 - Close the plain request payload section when the json section is open r=Honza

- For perfomance reasons the payload section should be closed when the json section is avaliable
	- Added a test for the collapsed payload section

Differential Revision: https://phabricator.services.mozilla.com/D66795

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/components/request-details/ParamsPanel.js

@@ -208,6 +208,8 @@ class ParamsPanel extends Component {
       error = REQUEST_TRUNCATED;
     }
 
+    let openPayload = true;
+
     if (formDataSections && formDataSections.length === 0 && postData) {
       if (!error) {
         const json = this.parseJSON(postData);
@@ -224,6 +226,9 @@ class ParamsPanel extends Component {
             id: "jsonScopeName",
             opened: true,
           });
+          // Keep the payload closed by default for perf reasons
+          // since the json is avaliable
+          openPayload = false;
         }
       }
     }
@@ -242,7 +247,8 @@ class ParamsPanel extends Component {
         },
         header: PARAMS_POST_PAYLOAD,
         id: "paramsPostPayload",
-        opened: true,
+        opened: openPayload,
+        shouldOpen: () => openPayload,
       });
     }
 

devtools/client/netmonitor/test/browser.ini

@@ -174,6 +174,7 @@ skip-if = verify # Bug 1607678
 [browser_net_pane-collapse.js]
 [browser_net_pane-network-details.js]
 [browser_net_pane-toggle.js]
+[browser_net_params_collapse_payload.js]
 [browser_net_pause.js]
 skip-if = (verify && debug && (os == 'win'))
 [browser_net_params_sorted.js]

devtools/client/netmonitor/test/browser_net_params_collapse_payload.js

@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if the  Request payload section is collapsed when the JSON section
+ * is avaliable.
+ */
+add_task(async function() {
+  const { tab, monitor } = await initNetMonitor(POST_ARRAY_DATA_URL);
+  info("Starting test... ");
+
+  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);
+
+  const 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")
+  );
+
+  await waitForDOM(document, "#params-panel .accordion-item", 2);
+
+  const panel = document.querySelector("#params-panel");
+
+  const jsonSection = panel.querySelector(".accordion-item#jsonScopeName");
+  const requestPayloadSection = panel.querySelector(
+    ".accordion-item#paramsPostPayload"
+  );
+
+  is(
+    !!jsonSection.querySelector(".accordion-header[aria-expanded='true']"),
+    true,
+    "JSON Accordion item should not be collapsed"
+  );
+
+  is(
+    !!requestPayloadSection.querySelector(
+      ".accordion-header[aria-expanded='true']"
+    ),
+    false,
+    "Request Payload Accordion item should be collapsed"
+  );
+
+  await teardown(monitor);
+});