Bug 1621914 - Remove PRE for rendering large content r=Honza,perftest-reviewers,Bebe

Remove PRE for rendering large content, to take advantage of
virtualization in codemirror.

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

devtools/client/netmonitor/src/components/previews/SourcePreview.js

@@ -13,7 +13,7 @@ const Editor = require("devtools/client/shared/sourceeditor/editor");
 const {
   setTargetSearchResult,
 } = require("devtools/client/netmonitor/src/actions/search");
-const { div, pre } = dom;
+const { div } = dom;
 /**
  * CodeMirror editor as a React component
  */
@@ -29,16 +29,12 @@ class SourcePreview extends Component {
       // Reset target search result that has been used for navigation in this panel.
       // This is done to avoid second navigation the next time.
       resetTargetSearchResult: PropTypes.func,
-      // Limit for determine how to render large content
-      limit: PropTypes.number,
     };
   }
 
   componentDidMount() {
     const { mode, text } = this.props;
-    if (!this.isOverSizeLimit(text)) {
-      this.loadEditor(mode, text);
-    }
+    this.loadEditor(mode, text);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -53,20 +49,8 @@ class SourcePreview extends Component {
     const { mode, targetSearchResult, text } = this.props;
 
     if (prevProps.text !== text) {
-      // if the text size is over the limit we have switched to
-      // rendering with a PRE, lets clean up any previous editor object.
-      if (this.isOverSizeLimit(text)) {
-        this.unloadEditor();
-        return;
-      }
-
-      if (!this.editor || this.editor.isDestroyed()) {
-        // When updating from a PRE to an editor
-        this.loadEditor(mode, text);
-      } else {
-        // When updating from editor to editor
-        this.updateEditor(mode, text);
-      }
+      // When updating from editor to editor
+      this.updateEditor(mode, text);
     } else if (prevProps.targetSearchResult !== targetSearchResult) {
       this.findSearchResult();
     }
@@ -167,23 +151,6 @@ class SourcePreview extends Component {
     }
   }
 
-  isOverSizeLimit(text) {
-    const { limit } = this.props;
-    return text && text.length > limit;
-  }
-
-  renderPre(text) {
-    return div(
-      { className: "responseTextContainer" },
-      pre(
-        { ref: element => this.scrollToLine(element) },
-        text.split(/\r\n|\r|\n/).map((line, index) => {
-          return div({ key: index }, line);
-        })
-      )
-    );
-  }
-
   renderEditor() {
     return div(
       { className: "editor-row-container" },
@@ -195,13 +162,9 @@ class SourcePreview extends Component {
   }
 
   render() {
-    const { text } = this.props;
-    // To prevent performance issues, switch from editor to pre()
-    // if response size is greater than specified limit.
-    const isOverSize = this.isOverSizeLimit(text);
     return div(
       { key: "EDITOR_CONFIG", className: "editor-row-container" },
-      isOverSize ? this.renderPre(text) : this.renderEditor()
+      this.renderEditor()
     );
   }
 }

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

@@ -237,10 +237,6 @@ class ParamsPanel extends Component {
           text: postData,
           mode: mimeType.replace(/;.+/, ""),
           targetSearchResult,
-          // Using the response limit to improve perf when rendering
-          limit: Services.prefs.getIntPref(
-            "devtools.netmonitor.response.ui.limit"
-          ),
         },
         header: PARAMS_POST_PAYLOAD,
         id: "paramsPostPayload",

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

@@ -290,9 +290,6 @@ class ResponsePanel extends Component {
         text,
         mode: json ? "application/json" : mimeType.replace(/;.+/, ""),
         targetSearchResult,
-        limit: Services.prefs.getIntPref(
-          "devtools.netmonitor.response.ui.limit"
-        ),
       },
       header: RESPONSE_PAYLOAD,
       id: "responsePayload",

devtools/client/netmonitor/test/browser.ini

@@ -188,7 +188,6 @@ skip-if = os == 'win' # bug 1391264
 [browser_net_raw_headers.js]
 [browser_net_reload-button.js]
 [browser_net_reload-markers.js]
-[browser_net_response-ui-limit.js]
 [browser_net_req-resp-bodies.js]
 [browser_net_resend_cors.js]
 [browser_net_resend_csp.js]

devtools/client/netmonitor/test/browser_net_response-ui-limit.js

@@ -1,57 +0,0 @@
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-/**
- * Tests if large response contents are  displayed using <pre>
- * and not using syntax color highlighting (e.g. using CodeMirror)
- */
-const HTML_LONG_URL = CONTENT_TYPE_SJS + "?fmt=html-long";
-
-add_task(async function() {
-  const { tab, monitor } = await initNetMonitor(CUSTOM_GET_URL, {
-    requestCount: 1,
-  });
-  info("Starting test... ");
-
-  // Decrease UI response limit for this test.
-  Services.prefs.setIntPref("devtools.netmonitor.response.ui.limit", 1024);
-
-  // This test could potentially be slow because over 100 KB of stuff
-  // is going to be requested and displayed in the source editor.
-  requestLongerTimeout(2);
-
-  const { document, store, windowRequire } = monitor.panelWin;
-  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
-  store.dispatch(Actions.batchEnable(false));
-
-  let wait = waitForNetworkEvents(monitor, 1);
-  await SpecialPowers.spawn(tab.linkedBrowser, [HTML_LONG_URL], async function(
-    url
-  ) {
-    content.wrappedJSObject.performRequests(1, url);
-  });
-  await wait;
-
-  wait = waitForDOM(document, "#response-panel .accordion-item", 2);
-  store.dispatch(Actions.toggleNetworkDetails());
-  EventUtils.sendMouseEvent(
-    { type: "click" },
-    document.querySelector("#response-tab")
-  );
-  await wait;
-
-  wait = waitForDOM(document, "#response-panel .responseTextContainer");
-  const payloadHeader = document.querySelector(
-    "#response-panel .accordion-item:last-child .accordion-header"
-  );
-  clickElement(payloadHeader, monitor);
-  await wait;
-
-  await teardown(monitor);
-
-  // This test uses a lot of memory, so force a GC to help fragmentation.
-  info("Forcing GC after netmonitor test.");
-  Cu.forceGC();
-});

devtools/client/netmonitor/test/browser_net_truncate-post-data.js

@@ -37,7 +37,7 @@ add_task(async function() {
   );
   const waitSourceEditor = waitForDOM(
     document,
-    "#params-panel .responseTextContainer"
+    "#params-panel .CodeMirror.cm-s-mozilla"
   );
 
   store.dispatch(Actions.toggleNetworkDetails());

devtools/client/netmonitor/test/head.js

@@ -166,9 +166,6 @@ Services.prefs.setCharPref(
     '{"name":"waterfall","minWidth":150,"width":15}]'
 );
 
-// Increase UI limit for responses rendered using CodeMirror in tests.
-Services.prefs.setIntPref("devtools.netmonitor.response.ui.limit", 1024 * 105);
-
 registerCleanupFunction(() => {
   info("finish() was called, cleaning up...");
 
@@ -176,7 +173,6 @@ registerCleanupFunction(() => {
   Services.prefs.setCharPref("devtools.netmonitor.filters", gDefaultFilters);
   Services.prefs.clearUserPref("devtools.cache.disabled");
   Services.prefs.clearUserPref("devtools.netmonitor.columnsData");
-  Services.prefs.clearUserPref("devtools.netmonitor.response.ui.limit");
   Services.prefs.clearUserPref("devtools.netmonitor.visibleColumns");
   Services.cookies.removeAll();
 });

testing/talos/talos/tests/devtools/addon/content/tests/netmonitor/netmonitor-helpers.js

@@ -163,13 +163,13 @@ exports.openResponseDetailsPanel = async function(label, toolbox) {
   // editor test
   const testEditor = runTest(label + ".responsePanel.editor");
   const request = document.querySelectorAll(".request-list-item")[0];
-  const waitForPre = waitForDOMElement(
+  const waitForEditor = waitForDOMElement(
     monitor,
-    "#response-panel .responseTextContainer pre",
+    "#response-panel .CodeMirror.cm-s-mozilla",
     win
   );
   mouseDownElement(request, win);
-  await waitForPre;
+  await waitForEditor;
 
   testEditor.done();
   store.dispatch(Actions.toggleNetworkDetails());