Bug 1565226 - Limit the payload rendered in the Preview panel. r=nchevobbe

Limit the payload rendered in the Preview panel to 100 KB

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

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

devtools/client/locales/en-US/netmonitor.properties

@@ -759,6 +759,10 @@ netmonitor.search.labels.responseHeaders=Response Header
 # displayed in the search results as the label for the request headers
 netmonitor.search.labels.requestHeaders=Request Header
 
+# LOCALIZATION NOTE (messageDataTruncated): This is the text displayed
+# to describe to describe data truncation in the messages panel.
+messageDataTruncated=Data has been truncated
+
 # LOCALIZATION NOTE (netmonitor.tab.headers): This is the label displayed
 # in the network details pane identifying the headers tab.
 netmonitor.tab.headers=Headers

devtools/client/netmonitor/src/assets/styles/websockets.css

@@ -68,3 +68,19 @@
   white-space: normal;
   overflow-wrap: break-word;
 }
+
+/* Styles related to truncated data */
+
+.theme-light #messages-panel .truncated-data-message {
+  background: var(--grey-20);
+}
+
+.theme-dark #messages-panel .truncated-data-message {
+  background: var(--grey-70);
+}
+
+.truncated-data-message {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px 8px;
+  font-size: 12px;
+}

devtools/client/netmonitor/src/components/websockets/FramePayload.js

@@ -11,6 +11,7 @@ const {
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { div } = dom;
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const Services = require("Services");
 const { L10N } = require("devtools/client/netmonitor/src/utils/l10n.js");
 const {
   getFramePayload,
@@ -19,6 +20,10 @@ const {
 const {
   getFormattedSize,
 } = require("devtools/client/netmonitor/src/utils/format-utils.js");
+const MESSAGE_DATA_LIMIT = Services.prefs.getIntPref(
+  "devtools.netmonitor.ws.messageDataLimit"
+);
+const MESSAGE_DATA_TRUNCATED = L10N.getStr("messageDataTruncated");
 
 // Components
 const Accordion = createFactory(
@@ -79,10 +84,19 @@ class FramePayload extends Component {
   }
 
   render() {
+    let payload = this.state.payload;
+    let isTruncated = false;
+    if (this.state.payload.length >= MESSAGE_DATA_LIMIT) {
+      payload = payload.substring(0, MESSAGE_DATA_LIMIT);
+      isTruncated = true;
+    }
+
     const items = [
       {
         className: "rawData",
-        component: RawData({ payload: this.state.payload }),
+        component: RawData({
+          payload,
+        }),
         header: L10N.getFormatStrWithNumbers(
           "netmonitor.ws.rawData.header",
           getFormattedSize(this.state.payload.length)
@@ -91,7 +105,7 @@ class FramePayload extends Component {
         opened: true,
       },
     ];
-    if (this.state.isFormattedData) {
+    if (!isTruncated && this.state.isFormattedData) {
       items.push({
         className: "formattedData",
         component: JSONPreview({
@@ -113,6 +127,13 @@ class FramePayload extends Component {
       {
         className: "ws-frame-payload",
       },
+      isTruncated &&
+        div(
+          {
+            className: "truncated-data-message",
+          },
+          MESSAGE_DATA_TRUNCATED
+        ),
       Accordion({
         items,
       })

devtools/client/netmonitor/src/components/websockets/RawData.js

@@ -9,7 +9,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
 /**
- * Shows raw payload of a WebSocket frame.
+ * Shows raw data of a WebSocket frame.
  */
 class RawData extends Component {
   static get propTypes() {

devtools/shared/preferences/devtools-shared.js

@@ -45,6 +45,9 @@ pref("devtools.debugger.force-local", true);
 pref("devtools.netmonitor.responseBodyLimit", 1048576);
 pref("devtools.netmonitor.requestBodyLimit", 1048576);
 
+// Limit for WebSocket frames (100 KB)
+pref("devtools.netmonitor.ws.messageDataLimit", 100000);
+
 // DevTools default color unit
 pref("devtools.defaultColorUnit", "authored");