Bug 1693147 - Use toggle button for switching between raw and formatted request view. r=bomsy

Differential Revision: https://phabricator.services.mozilla.com/D107356
2021-03-18 12:46:47 +00:00 · 2021-03-18 12:46:47 +00:00 · 5b882432c3
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@ -111,6 +111,11 @@ paramsFormData=Form data
 # in the network details request tab identifying the request payload.
 paramsPostPayload=Request payload

+# LOCALIZATION NOTE (netmonitor.request.raw): This is the label displayed
+# on the button in the network details request tab that toggles the
+# view of the network request between the raw data and the formatted display.
+netmonitor.request.raw=Raw
+
 # LOCALIZATION NOTE (requestHeaders): This is the label displayed
 # in the network details headers tab identifying the request headers.
 requestHeaders=Request Headers
--- a/devtools/client/netmonitor/src/components/request-details/RequestPanel.js
+++ b/devtools/client/netmonitor/src/components/request-details/RequestPanel.js
@ -38,9 +38,6 @@ const PropertiesView = createFactory(
 const SearchBox = createFactory(
  require("devtools/client/shared/components/SearchBox")
 );
-const Accordion = createFactory(
-  require("devtools/client/shared/components/Accordion")
-);

 loader.lazyGetter(this, "SourcePreview", function() {
  return createFactory(
@ -48,13 +45,14 @@ loader.lazyGetter(this, "SourcePreview", function() {
  );
 });

-const { div } = dom;
+const { div, input, label, span, h2 } = dom;

 const JSON_SCOPE_NAME = L10N.getStr("jsonScopeName");
 const REQUEST_EMPTY_TEXT = L10N.getStr("paramsEmptyText");
 const REQUEST_FILTER_TEXT = L10N.getStr("paramsFilterText");
 const REQUEST_FORM_DATA = L10N.getStr("paramsFormData");
 const REQUEST_POST_PAYLOAD = L10N.getStr("paramsPostPayload");
+const RAW_REQUEST_PAYLOAD = L10N.getStr("netmonitor.request.raw");
 const REQUEST_TRUNCATED = L10N.getStr("requestTruncated");

 /**
@ -76,7 +74,13 @@ class RequestPanel extends Component {
    super(props);
    this.state = {
      filterText: "",
+      rawRequestPayloadDisplayed: false,
    };
+
+    this.toggleRawRequestPayload = this.toggleRawRequestPayload.bind(this);
+    this.renderRawRequestPayloadBtn = this.renderRawRequestPayloadBtn.bind(
+      this
+    );
  }

  componentDidMount() {
@ -99,12 +103,15 @@ class RequestPanel extends Component {
   * Update only if:
   * 1) The rendered object has changed
   * 2) The filter text has changed
+   * 2) The display got toggled between formatted and raw data
   * 3) The user selected another search result target.
   */
  shouldComponentUpdate(nextProps, nextState) {
    return (
      this.props.request !== nextProps.request ||
      this.state.filterText !== nextState.filterText ||
+      this.state.rawRequestPayloadDisplayed !==
+        nextState.rawRequestPayloadDisplayed ||
      (this.props.targetSearchResult !== nextProps.targetSearchResult &&
        nextProps.targetSearchResult !== null)
    );
@ -137,9 +144,46 @@ class RequestPanel extends Component {
    }, {});
  }

+  toggleRawRequestPayload() {
+    this.setState({
+      rawRequestPayloadDisplayed: !this.state.rawRequestPayloadDisplayed,
+    });
+  }
+
+  renderRawRequestPayloadBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawRequestPayloadBtn`,
+          className: "raw-data-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "raw-data-toggle-label" }, RAW_REQUEST_PAYLOAD),
+        span(
+          { className: "raw-data-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderRequestPayload(component, componentProps) {
+    return component(componentProps);
+  }
+
  render() {
    const { request, targetSearchResult } = this.props;
-    const { filterText } = this.state;
+    const { filterText, rawRequestPayloadDisplayed } = this.state;
    const { formDataSections, mimeType, requestPostData } = request;
    const postData = requestPostData ? requestPostData.postData.text : null;

@ -147,23 +191,25 @@ class RequestPanel extends Component {
      return div({ className: "empty-notice" }, REQUEST_EMPTY_TEXT);
    }

+    let component;
+    let componentProps;
+    let requestPayloadLabel = REQUEST_POST_PAYLOAD;
+    let hasFormattedDisplay = false;
+
    let error;
-    const items = [];
+
    // Form Data section
    if (formDataSections && formDataSections.length > 0) {
      const sections = formDataSections.filter(str => /\S/.test(str)).join("&");
-      items.push({
-        component: PropertiesView,
-        componentProps: {
-          object: this.getProperties(parseFormData(sections)),
-          filterText,
-          targetSearchResult,
-          defaultSelectFirstNode: false,
-        },
-        header: REQUEST_FORM_DATA,
-        id: "requestFormData",
-        opened: true,
-      });
+      component = PropertiesView;
+      componentProps = {
+        object: this.getProperties(parseFormData(sections)),
+        filterText,
+        targetSearchResult,
+        defaultSelectFirstNode: false,
+      };
+      requestPayloadLabel = REQUEST_FORM_DATA;
+      hasFormattedDisplay = true;
    }

    // Request payload section
@ -181,34 +227,30 @@ class RequestPanel extends Component {
      if (!error) {
        const json = parseJSON(postData).json;
        if (json) {
-          items.push({
-            component: PropertiesView,
-            componentProps: {
-              object: sortObjectKeys(json),
-              filterText,
-              targetSearchResult,
-              defaultSelectFirstNode: false,
-            },
-            header: JSON_SCOPE_NAME,
-            id: "jsonScopeName",
-            opened: true,
-          });
+          component = PropertiesView;
+          componentProps = {
+            object: sortObjectKeys(json),
+            filterText,
+            targetSearchResult,
+            defaultSelectFirstNode: false,
+          };
+          requestPayloadLabel = JSON_SCOPE_NAME;
+          hasFormattedDisplay = true;
        }
      }
    }

-    if (postData) {
-      items.push({
-        component: SourcePreview,
-        componentProps: {
-          text: postData,
-          mode: mimeType?.replace(/;.+/, ""),
-          targetSearchResult,
-        },
-        header: REQUEST_POST_PAYLOAD,
-        id: "requestPostPayload",
-        opened: true,
-      });
+    if (
+      (!hasFormattedDisplay || this.state.rawRequestPayloadDisplayed) &&
+      postData
+    ) {
+      component = SourcePreview;
+      componentProps = {
+        text: postData,
+        mode: mimeType?.replace(/;.+/, ""),
+        targetSearchResult,
+      };
+      requestPayloadLabel = REQUEST_POST_PAYLOAD;
    }

    return div(
@ -223,7 +265,22 @@ class RequestPanel extends Component {
          placeholder: REQUEST_FILTER_TEXT,
        })
      ),
-      Accordion({ items })
+      h2({ className: "data-header", role: "heading" }, [
+        span(
+          {
+            key: "data-label",
+            className: "data-label",
+          },
+          requestPayloadLabel
+        ),
+        hasFormattedDisplay &&
+          this.renderRawRequestPayloadBtn(
+            "request",
+            rawRequestPayloadDisplayed,
+            this.toggleRawRequestPayload
+          ),
+      ]),
+      this.renderRequestPayload(component, componentProps)
    );
  }
 }
--- a/devtools/client/netmonitor/test/browser_net_complex-params.js
+++ b/devtools/client/netmonitor/test/browser_net_complex-params.js
@ -16,240 +16,295 @@ add_task(async function() {

  const { document, store, windowRequire } = monitor.panelWin;
  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
-  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");

  store.dispatch(Actions.batchEnable(false));

  // Execute requests.
  await performRequests(monitor, tab, 12);

-  let wait = waitForDOM(document, "#request-panel .accordion-item", 2);
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[0]
+  const requestListItems = document.querySelectorAll(
+    ".network-monitor .request-list-item"
  );
+
+  // Select the Request tab.
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItems[0]);
  clickOnSidebarTab(document, "request");
-  await wait;
-  testParamsTab1('{ "foo": "bar" }', "");

-  wait = waitForDOM(document, "#request-panel .accordion-item", 2);
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[1]
-  );
-  await wait;
-  testParamsTab1('{ "foo": "bar" }', "");
-
-  wait = waitForDOM(document, "#request-panel .accordion-item", 2);
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[2]
-  );
-  await wait;
-  testParamsTab1("?foo", "bar");
-
-  let waitRows, waitSourceEditor;
-  waitRows = waitForDOM(document, "#request-panel tr.treeRow", 1);
-  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[3]
-  );
-  await Promise.all([waitRows, waitSourceEditor]);
-  testParamsTab2('{ "foo": "bar" }', "js");
-
-  waitRows = waitForDOM(document, "#request-panel tr.treeRow", 1);
-  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[4]
-  );
-  await Promise.all([waitRows, waitSourceEditor]);
-  testParamsTab2('{ "foo": "bar" }', "js");
-
-  // Wait for all accordion items and editor updated by react
-  const waitAccordionItems = waitForDOM(
-    document,
-    "#request-panel .accordion-item",
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[0],
+    '{ "foo": "bar" }',
+    "",
+    '{ "foo": "bar" }',
    1
  );
-  waitSourceEditor = waitForDOM(document, "#request-panel .CodeMirror-code");
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[5]
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[1],
+    '{ "foo": "bar" }',
+    "",
+    '{ "foo": "bar" }',
+    1
  );
-  await Promise.all([waitAccordionItems, waitSourceEditor]);
-  testParamsTab2("?foo=bar", "text");
-
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[6]
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[2],
+    "?foo",
+    "bar",
+    "?foo=bar",
+    1
  );
-  testParamsTab3();
-
-  wait = waitForDOM(document, "#request-panel .accordion-item", 2);
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[7]
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[3],
+    "foo",
+    "bar",
+    '{ "foo": "bar" }',
+    2
  );
-  await wait;
-  testParamsTab1('{ "foo": "bar" }', "");
-
-  wait = waitForDOM(document, "#request-panel .accordion-item", 2);
-  EventUtils.sendMouseEvent(
-    { type: "mousedown" },
-    document.querySelectorAll(".request-list-item")[8]
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[4],
+    "foo",
+    "bar",
+    '{ "foo": "bar" }',
+    2
+  );
+  await testRequestWithOnlyRawDataView(
+    monitor,
+    requestListItems[5],
+    "?foo=bar"
+  );
+  await testRequestWithoutRequestData(monitor, requestListItems[6]);
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[7],
+    '{ "foo": "bar" }',
+    "",
+    '{ "foo": "bar" }',
+    1
+  );
+  await testRequestWithFormattedView(
+    monitor,
+    requestListItems[8],
+    '{ "foo": "bar" }',
+    "",
+    '{ "foo": "bar" }',
+    1
  );
-  await wait;
-  testParamsTab1('{ "foo": "bar" }', "");

  await teardown(monitor);
-
-  function testParamsTab1(formDataParamName, formDataParamValue) {
-    const tabpanel = document.querySelector("#request-panel");
-
-    is(
-      tabpanel.querySelectorAll(".accordion-item").length,
-      2,
-      "The number of param accordion items displayed in this tabpanel is incorrect."
-    );
-    is(
-      tabpanel.querySelectorAll("tr.treeRow").length,
-      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."
-    );
-    ok(
-      tabpanel.querySelector(".CodeMirror-code") === null,
-      "The request post data editor should not be displayed."
-    );
-
-    const accordionItems = tabpanel.querySelectorAll(".accordion-item");
-    const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
-    const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
-
-    is(
-      accordionItems[0].querySelector(".accordion-header-label").textContent,
-      L10N.getStr("paramsFormData"),
-      "The form data section doesn't have the correct title."
-    );
-
-    is(
-      labels[0].textContent,
-      formDataParamName,
-      "The first form data param name was incorrect."
-    );
-    is(
-      values[0].textContent,
-      `"${formDataParamValue}"`,
-      "The first form data param value was incorrect."
-    );
-  }
-
-  function testParamsTab2(requestPayload, editorMode) {
-    const isJSON = editorMode === "js";
-    const tabpanel = document.querySelector("#request-panel");
-
-    is(
-      tabpanel.querySelectorAll(".accordion-item").length,
-      isJSON ? 2 : 1,
-      "The number of param accordion items displayed in this tabpanel is incorrect."
-    );
-    is(
-      tabpanel.querySelectorAll("tr.treeRow").length,
-      isJSON ? 1 : 0,
-      "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(".CodeMirror-code"),
-      "The request post data editor should be displayed."
-    );
-
-    const accordionItems = tabpanel.querySelectorAll(".accordion-item");
-
-    is(
-      accordionItems[0].querySelector(".accordion-header-label").textContent,
-      isJSON ? L10N.getStr("jsonScopeName") : L10N.getStr("paramsPostPayload"),
-      "The post section doesn't have the correct title."
-    );
-
-    const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
-    const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
-
-    ok(
-      getCodeMirrorValue(monitor).includes(requestPayload),
-      "The text shown in the source editor is incorrect."
-    );
-
-    if (isJSON) {
-      is(
-        accordionItems[1].querySelector(".accordion-header-label").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"
-        );
-      }
-    }
-  }
-
-  function testParamsTab3() {
-    const tabpanel = document.querySelector("#request-panel");
-
-    is(
-      tabpanel.querySelectorAll(".accordion-item").length,
-      0,
-      "The number of param accordion items displayed in this tabpanel is incorrect."
-    );
-    is(
-      tabpanel.querySelectorAll("tr.treeRow").length,
-      0,
-      "The number of param rows displayed in this tabpanel is incorrect."
-    );
-    is(
-      tabpanel.querySelectorAll(".empty-notice").length,
-      1,
-      "The empty notice should be displayed in this tabpanel."
-    );
-
-    ok(
-      !tabpanel.querySelector(".treeTable"),
-      "The request params box should be hidden."
-    );
-    ok(
-      !tabpanel.querySelector(".CodeMirror-code"),
-      "The request post data editor should be hidden."
-    );
-  }
 });
+
+async function testRequestWithFormattedView(
+  monitor,
+  requestListItem,
+  paramName,
+  paramValue,
+  rawValue,
+  dataType
+) {
+  const { document, windowRequire } = monitor.panelWin;
+  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");
+
+  // Wait for header and properties view to be displayed
+  const wait = waitForDOM(document, "#request-panel .data-header");
+  let waitForContent = waitForDOM(document, "#request-panel .properties-view");
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
+  await Promise.all([wait, waitForContent]);
+
+  const tabpanel = document.querySelector("#request-panel");
+  let headerLabel;
+  switch (dataType) {
+    case 1:
+      headerLabel = L10N.getStr("paramsFormData");
+      break;
+
+    case 2:
+      headerLabel = L10N.getStr("jsonScopeName");
+      break;
+  }
+
+  is(
+    tabpanel.querySelectorAll(".raw-data-toggle").length,
+    1,
+    "The raw request data toggle should be displayed in this tabpanel."
+  );
+  is(
+    tabpanel.querySelectorAll("tr.treeRow").length,
+    1,
+    "The number of param rows displayed in this tabpanel is incorrect."
+  );
+  ok(
+    tabpanel.querySelector(".empty-notice") === null,
+    "The empty notice should not be displayed in this tabpanel."
+  );
+
+  ok(
+    tabpanel.querySelector(".treeTable"),
+    "The request params box should be displayed."
+  );
+  ok(
+    tabpanel.querySelector(".CodeMirror-code") === null,
+    "The request post data editor should not be displayed."
+  );
+
+  const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
+  const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
+
+  is(
+    tabpanel.querySelector(".data-label").textContent,
+    headerLabel,
+    "The form data section doesn't have the correct title."
+  );
+
+  is(
+    labels[0].textContent,
+    paramName,
+    "The first form data param name was incorrect."
+  );
+  is(
+    values[0].textContent,
+    `"${paramValue}"`,
+    "The first form data param value was incorrect."
+  );
+
+  // Toggle the raw data display. This should hide the formatted display.
+  waitForContent = waitForDOM(document, "#request-panel .CodeMirror-code");
+  let rawDataToggle = document.querySelector(
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
+  clickElement(rawDataToggle, monitor);
+  await waitForContent;
+
+  const dataLabel = tabpanel.querySelector(".data-label") ?? {};
+  is(
+    dataLabel.textContent,
+    L10N.getStr("paramsPostPayload"),
+    "The label for the raw request payload is correct."
+  );
+  is(
+    tabpanel.querySelector(".raw-data-toggle-input .devtools-checkbox-toggle")
+      .checked,
+    true,
+    "The raw request toggle should be on."
+  );
+  is(
+    tabpanel.querySelector(".properties-view") === null,
+    true,
+    "The formatted display should be hidden."
+  );
+  is(
+    tabpanel.querySelector(".CodeMirror-code") !== null,
+    true,
+    "The raw payload data display is shown."
+  );
+  is(
+    getCodeMirrorValue(monitor),
+    rawValue,
+    "The raw payload data string needs to be correct."
+  );
+  ok(
+    tabpanel.querySelector(".empty-notice") === null,
+    "The empty notice should not be displayed in this tabpanel."
+  );
+
+  // Toggle the raw data display off again. This should show the formatted display.
+  // This is required to reset the original state
+  waitForContent = waitForDOM(document, "#request-panel .properties-view");
+  rawDataToggle = document.querySelector(
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
+  clickElement(rawDataToggle, monitor);
+  await waitForContent;
+}
+
+async function testRequestWithOnlyRawDataView(
+  monitor,
+  requestListItem,
+  paramName
+) {
+  const { document, windowRequire } = monitor.panelWin;
+  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");
+
+  // Wait for header and CodeMirror editor to be displayed
+  const wait = waitForDOM(document, "#request-panel .data-header");
+  const waitForContent = waitForDOM(
+    document,
+    "#request-panel .CodeMirror-code"
+  );
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
+  await Promise.all([wait, waitForContent]);
+
+  const tabpanel = document.querySelector("#request-panel");
+
+  const dataLabel = tabpanel.querySelector(".data-label") ?? {};
+  is(
+    dataLabel.textContent,
+    L10N.getStr("paramsPostPayload"),
+    "The label for the raw request payload is correct."
+  );
+  is(
+    tabpanel.querySelectorAll(".raw-data-toggle").length,
+    0,
+    "The raw request data toggle should not be displayed in this tabpanel."
+  );
+  is(
+    tabpanel.querySelector(".properties-view") === null,
+    true,
+    "The formatted display should be hidden."
+  );
+  is(
+    tabpanel.querySelector(".CodeMirror-code") !== null,
+    true,
+    "The raw payload data display is shown."
+  );
+  is(
+    getCodeMirrorValue(monitor),
+    paramName,
+    "The raw payload data string needs to be correct."
+  );
+  ok(
+    tabpanel.querySelector(".empty-notice") === null,
+    "The empty notice should not be displayed in this tabpanel."
+  );
+}
+
+async function testRequestWithoutRequestData(monitor, requestListItem) {
+  const { document } = monitor.panelWin;
+
+  EventUtils.sendMouseEvent({ type: "mousedown" }, requestListItem);
+
+  const tabpanel = document.querySelector("#request-panel");
+
+  is(
+    tabpanel.querySelector(".data-label") === null,
+    true,
+    "There must be no label for the request payload."
+  );
+  is(
+    tabpanel.querySelectorAll(".raw-data-toggle").length,
+    0,
+    "The raw request data toggle should not be displayed in this tabpanel."
+  );
+  is(
+    tabpanel.querySelector(".properties-view") === null,
+    true,
+    "The formatted display should be hidden."
+  );
+  is(
+    tabpanel.querySelector(".CodeMirror-code") === null,
+    true,
+    "The raw payload data display should be hidden."
+  );
+  is(
+    tabpanel.querySelector(".empty-notice") !== null,
+    true,
+    "The empty notice should be displayed in this tabpanel."
+  );
+  is(
+    tabpanel.querySelector(".empty-notice").textContent,
+    L10N.getStr("paramsEmptyText"),
+    "The empty notice should be correct."
+  );
+}
--- a/devtools/client/netmonitor/test/browser_net_post-data-01.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-01.js
@ -67,8 +67,11 @@ add_task(async function() {
    }
  );

-  // Wait for all accordion items updated by react
-  const wait = waitForDOM(document, "#request-panel .accordion-item", 2);
+  // Wait for raw data toggle to be displayed
+  const wait = waitForDOM(
+    document,
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
  EventUtils.sendMouseEvent(
    { type: "mousedown" },
    document.querySelectorAll(".request-list-item")[0]
@ -77,12 +80,8 @@ add_task(async function() {
  await wait;
  await testParamsTab("urlencoded");

-  // Wait for all accordion items and editor updated by react
-  const waitForAccordionItems = waitForDOM(
-    document,
-    "#request-panel .accordion-item",
-    1
-  );
+  // Wait for header and CodeMirror editor to be displayed
+  const waitForHeader = waitForDOM(document, "#request-panel .data-header");
  const waitForSourceEditor = waitForDOM(
    document,
    "#request-panel .CodeMirror-code"
@ -91,7 +90,7 @@ add_task(async function() {
    { type: "mousedown" },
    document.querySelectorAll(".request-list-item")[1]
  );
-  await Promise.all([waitForAccordionItems, waitForSourceEditor]);
+  await Promise.all([waitForHeader, waitForSourceEditor]);
  await testParamsTab("multipart");

  return teardown(monitor);
@ -108,9 +107,9 @@ add_task(async function() {
    }

    is(
-      tabpanel.querySelectorAll(".accordion-item").length,
-      type == "urlencoded" ? 2 : 1,
-      "There should be correct number of accordion items displayed in this tabpanel."
+      tabpanel.querySelectorAll(".raw-data-toggle").length,
+      type == "urlencoded" ? 1 : 0,
+      "The display of the raw request data toggle must be correct."
    );
    is(
      tabpanel.querySelectorAll(".empty-notice").length,
@ -118,10 +117,8 @@ add_task(async function() {
      "The empty notice should not be displayed in this tabpanel."
    );

-    const accordionItems = tabpanel.querySelectorAll(".accordion-item");
-
    is(
-      accordionItems[0].querySelector(".accordion-header-label").textContent,
+      tabpanel.querySelector(".data-label").textContent,
      L10N.getStr(
        type == "urlencoded" ? "paramsFormData" : "paramsPostPayload"
      ),
--- a/devtools/client/netmonitor/test/browser_net_post-data-02.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-02.js
@ -23,8 +23,11 @@ add_task(async function() {
  // Execute requests.
  await performRequests(monitor, tab, 1);

-  // Wait for all tree view updated by react
-  const wait = waitForDOM(document, "#request-panel .accordion-item", 2);
+  // Wait for raw data toggle to be displayed
+  const wait = waitForDOM(
+    document,
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
  EventUtils.sendMouseEvent(
    { type: "mousedown" },
    document.querySelectorAll(".request-list-item")[0]
@ -44,9 +47,9 @@ add_task(async function() {
  );

  is(
-    tabpanel.querySelectorAll(".accordion-item").length,
-    2,
-    "There should be 2 accordion items displayed in this tabpanel."
+    tabpanel.querySelectorAll(".raw-data-toggle") !== null,
+    true,
+    "The raw request data toggle should be displayed in this tabpanel."
  );
  is(
    tabpanel.querySelectorAll(".empty-notice").length,
@ -55,8 +58,7 @@ add_task(async function() {
  );

  is(
-    tabpanel.querySelector(".accordion-item .accordion-header-label")
-      .textContent,
+    tabpanel.querySelector(".data-label").textContent,
    L10N.getStr("paramsFormData"),
    "The post section doesn't have the correct title."
  );
--- a/devtools/client/netmonitor/test/browser_net_post-data-03.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-03.js
@ -70,8 +70,11 @@ add_task(async function() {
    "The second request header value was incorrect."
  );

-  // Wait for all tree sections updated by react
-  wait = waitForDOM(document, "#request-panel .accordion-item", 2);
+  // Wait for raw data toggle to be displayed
+  wait = waitForDOM(
+    document,
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
  clickOnSidebarTab(document, "request");
  await wait;

@ -87,8 +90,7 @@ add_task(async function() {
  );

  is(
-    tabpanel.querySelector(".accordion-item .accordion-header-label")
-      .textContent,
+    tabpanel.querySelector(".data-label").textContent,
    L10N.getStr("paramsFormData"),
    "The form data section doesn't have the correct title."
  );
--- a/devtools/client/netmonitor/test/browser_net_post-data-04.js
+++ b/devtools/client/netmonitor/test/browser_net_post-data-04.js
@ -24,34 +24,28 @@ add_task(async function() {
  // Execute requests.
  await performRequests(monitor, tab, 1);

-  // Wait for all aaccordion items updated by react, Bug 1514750 - wait for editor also
-  const waitAccordionItems = waitForDOM(
-    document,
-    "#request-panel .accordion-item",
-    2
-  );
-  const waitSourceEditor = waitForDOM(
-    document,
-    "#request-panel .CodeMirror-code"
-  );
+  // Wait for header and properties view to be displayed
+  const wait = waitForDOM(document, "#request-panel .data-header");
+  let waitForContent = waitForDOM(document, "#request-panel .properties-view");
  store.dispatch(Actions.toggleNetworkDetails());
  clickOnSidebarTab(document, "request");
-  await Promise.all([waitAccordionItems, waitSourceEditor]);
+  await Promise.all([wait, waitForContent]);
+
  const tabpanel = document.querySelector("#request-panel");

  ok(
    tabpanel.querySelector(".treeTable"),
    "The request params doesn't have the indended visibility."
  );
-  // Bug 1514750 - Show JSON request in plain text view also
-  ok(
-    tabpanel.querySelector(".CodeMirror-code"),
+  is(
+    tabpanel.querySelector(".CodeMirror-code") === null,
+    true,
    "The request post data doesn't have the indended visibility."
  );
  is(
-    tabpanel.querySelectorAll(".accordion-item").length,
-    2,
-    "There should be 2 accordion items displayed in this tabpanel."
+    tabpanel.querySelectorAll(".raw-data-toggle") !== null,
+    true,
+    "The raw request data toggle should be displayed in this tabpanel."
  );
  is(
    tabpanel.querySelectorAll(".empty-notice").length,
@ -59,18 +53,11 @@ add_task(async function() {
    "The empty notice should not be displayed in this tabpanel."
  );

-  const accordionItems = tabpanel.querySelectorAll(".accordion-item");
-
  is(
-    accordionItems[0].querySelector(".accordion-header-label").textContent,
+    tabpanel.querySelector(".data-label").textContent,
    L10N.getStr("jsonScopeName"),
    "The post section doesn't have the correct title."
  );
-  is(
-    accordionItems[1].querySelector(".accordion-header-label").textContent,
-    L10N.getStr("paramsPostPayload"),
-    "The post section doesn't have the correct title."
-  );

  const labels = tabpanel.querySelectorAll("tr .treeLabelCell .treeLabel");
  const values = tabpanel.querySelectorAll("tr .treeValueCell .objectBox");
@ -78,6 +65,35 @@ add_task(async function() {
  is(labels[0].textContent, "a", "The JSON var name was incorrect.");
  is(values[0].textContent, "1", "The JSON var value was incorrect.");

+  // Toggle the raw data display. This should hide the formatted display.
+  waitForContent = waitForDOM(document, "#request-panel .CodeMirror-code");
+  const rawDataToggle = document.querySelector(
+    "#request-panel .raw-data-toggle-input .devtools-checkbox-toggle"
+  );
+  clickElement(rawDataToggle, monitor);
+  await waitForContent;
+
+  is(
+    tabpanel.querySelector(".data-label").textContent,
+    L10N.getStr("paramsPostPayload"),
+    "The post section doesn't have the correct title."
+  );
+  is(
+    tabpanel.querySelector(".raw-data-toggle-input .devtools-checkbox-toggle")
+      .checked,
+    true,
+    "The raw request toggle should be on."
+  );
+  is(
+    tabpanel.querySelector(".properties-view") === null,
+    true,
+    "The formatted display should be hidden."
+  );
+  // Bug 1514750 - Show JSON request in plain text view also
+  ok(
+    tabpanel.querySelector(".CodeMirror-code"),
+    "The request post data doesn't have the indended visibility."
+  );
  ok(
    getCodeMirrorValue(monitor).includes('{"a":1}'),
    "The text shown in the source editor is incorrect."
--- a/devtools/client/netmonitor/test/browser_net_truncate-post-data.js
+++ b/devtools/client/netmonitor/test/browser_net_truncate-post-data.js
@ -29,12 +29,8 @@ add_task(async function() {
  const item = document.querySelectorAll(".request-list-item")[0];
  await waitUntil(() => item.querySelector(".requests-list-type").title);

-  // Make sure the accordion items and editor is loaded
-  const waitAccordionItems = waitForDOM(
-    document,
-    "#request-panel .accordion-item",
-    1
-  );
+  // Make sure the header and editor are loaded
+  const waitHeader = waitForDOM(document, "#request-panel .data-header");
  const waitSourceEditor = waitForDOM(
    document,
    "#request-panel .CodeMirror.cm-s-mozilla"
@ -43,7 +39,7 @@ add_task(async function() {
  store.dispatch(Actions.toggleNetworkDetails());
  clickOnSidebarTab(document, "request");

-  await Promise.all([waitAccordionItems, waitSourceEditor]);
+  await Promise.all([waitHeader, waitSourceEditor]);

  const tabpanel = document.querySelector("#request-panel");
  is(
@ -56,8 +52,7 @@ add_task(async function() {
    "Request has been truncated",
    "The error message shown is incorrect"
  );
-  const jsonView =
-    tabpanel.querySelector(".accordion-item .accordion-header-label") || {};
+  const jsonView = tabpanel.querySelector(".data-label") || {};
  is(
    jsonView.textContent === L10N.getStr("jsonScopeName"),
    false,