1 files changed, 403 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/messages/MessagePayload.js b/devtools/client/netmonitor/src/components/messages/MessagePayload.js
new file mode 100644
index 0000000000..b8d3f7ae33
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/messages/MessagePayload.js
@@ -0,0 +1,403 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const {
+  Component,
+  createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const { div, input, label, span, h2 } = dom;
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+
+const {
+  L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  getMessagePayload,
+  getResponseHeader,
+  parseJSON,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+const {
+  getFormattedSize,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const MESSAGE_DATA_LIMIT = Services.prefs.getIntPref(
+  "devtools.netmonitor.msg.messageDataLimit"
+);
+const MESSAGE_DATA_TRUNCATED = L10N.getStr("messageDataTruncated");
+const SocketIODecoder = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js");
+const {
+  JsonHubProtocol,
+  HandshakeProtocol,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js");
+const {
+  parseSockJS,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js");
+const {
+  parseStompJs,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js");
+const {
+  wampSerializers,
+} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js");
+const {
+  getRequestByChannelId,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+
+// Components
+const RawData = createFactory(
+  require("resource://devtools/client/netmonitor/src/components/messages/RawData.js")
+);
+loader.lazyGetter(this, "PropertiesView", function () {
+  return createFactory(
+    require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js")
+  );
+});
+
+const RAW_DATA = L10N.getStr("netmonitor.response.raw");
+
+/**
+ * Shows the full payload of a message.
+ * The payload is unwrapped from the LongStringActor object.
+ */
+class MessagePayload extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      selectedMessage: PropTypes.object,
+      request: PropTypes.object.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      payload: "",
+      isFormattedData: false,
+      formattedData: {},
+      formattedDataTitle: "",
+      rawDataDisplayed: false,
+    };
+
+    this.toggleRawData = this.toggleRawData.bind(this);
+    this.renderRawDataBtn = this.renderRawDataBtn.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateMessagePayload();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.selectedMessage !== prevProps.selectedMessage) {
+      this.updateMessagePayload();
+    }
+  }
+
+  updateMessagePayload() {
+    const { selectedMessage, connector } = this.props;
+
+    getMessagePayload(selectedMessage.payload, connector.getLongString).then(
+      async payload => {
+        const { formattedData, formattedDataTitle } = await this.parsePayload(
+          payload
+        );
+        this.setState({
+          payload,
+          isFormattedData: !!formattedData,
+          formattedData,
+          formattedDataTitle,
+        });
+      }
+    );
+  }
+
+  async parsePayload(payload) {
+    const { connector, selectedMessage, request } = this.props;
+
+    // Don't apply formatting to control frames
+    // Control frame check can be done using opCode as specified here:
+    // https://tools.ietf.org/html/rfc6455
+    const controlFrames = [0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe, 0xf];
+    const isControlFrame = controlFrames.includes(selectedMessage.opCode);
+    if (isControlFrame) {
+      return {
+        formattedData: null,
+        formattedDataTitle: "",
+      };
+    }
+
+    // Make sure that request headers are fetched from the backend before
+    // looking for `Sec-WebSocket-Protocol` header.
+    const responseHeaders = await connector.requestData(
+      request.id,
+      "responseHeaders"
+    );
+
+    const wsProtocol = getResponseHeader(
+      { responseHeaders },
+      "Sec-WebSocket-Protocol"
+    );
+
+    const wampSerializer = wampSerializers[wsProtocol];
+    if (wampSerializer) {
+      const wampPayload = wampSerializer.deserializeMessage(payload);
+
+      return {
+        formattedData: wampPayload,
+        formattedDataTitle: wampSerializer.description,
+      };
+    }
+
+    // socket.io payload
+    const socketIOPayload = this.parseSocketIOPayload(payload);
+
+    if (socketIOPayload) {
+      return {
+        formattedData: socketIOPayload,
+        formattedDataTitle: "Socket.IO",
+      };
+    }
+    // sockjs payload
+    const sockJSPayload = parseSockJS(payload);
+    if (sockJSPayload) {
+      let formattedData = sockJSPayload.data;
+
+      if (sockJSPayload.type === "message") {
+        if (Array.isArray(formattedData)) {
+          formattedData = formattedData.map(
+            message => parseStompJs(message) || message
+          );
+        } else {
+          formattedData = parseStompJs(formattedData) || formattedData;
+        }
+      }
+
+      return {
+        formattedData,
+        formattedDataTitle: "SockJS",
+      };
+    }
+    // signalr payload
+    const signalRPayload = this.parseSignalR(payload);
+    if (signalRPayload) {
+      return {
+        formattedData: signalRPayload,
+        formattedDataTitle: "SignalR",
+      };
+    }
+    // STOMP
+    const stompPayload = parseStompJs(payload);
+    if (stompPayload) {
+      return {
+        formattedData: stompPayload,
+        formattedDataTitle: "STOMP",
+      };
+    }
+
+    // json payload
+    let { json } = parseJSON(payload);
+    if (json) {
+      const { data, identifier } = json;
+      // A json payload MAY be an "Action cable" if it
+      // contains either a `data` or an `identifier` property
+      // which are also json strings and would need to be parsed.
+      // See https://medium.com/codequest/actioncable-in-rails-api-f087b65c860d
+      if (
+        (data && typeof data == "string") ||
+        (identifier && typeof identifier == "string")
+      ) {
+        const actionCablePayload = this.parseActionCable(json);
+        return {
+          formattedData: actionCablePayload,
+          formattedDataTitle: "Action Cable",
+        };
+      }
+
+      if (Array.isArray(json)) {
+        json = json.map(message => parseStompJs(message) || message);
+      }
+
+      return {
+        formattedData: json,
+        formattedDataTitle: "JSON",
+      };
+    }
+    return {
+      formattedData: null,
+      formattedDataTitle: "",
+    };
+  }
+
+  parseSocketIOPayload(payload) {
+    let result;
+    // Try decoding socket.io frames
+    try {
+      const decoder = new SocketIODecoder();
+      decoder.on("decoded", decodedPacket => {
+        if (
+          decodedPacket &&
+          !decodedPacket.data.includes("parser error") &&
+          decodedPacket.type
+        ) {
+          result = decodedPacket;
+        }
+      });
+      decoder.add(payload);
+      return result;
+    } catch (err) {
+      // Ignore errors
+    }
+    return null;
+  }
+
+  parseSignalR(payload) {
+    // attempt to parse as HandshakeResponseMessage
+    let decoder;
+    try {
+      decoder = new HandshakeProtocol();
+      const [remainingData, responseMessage] =
+        decoder.parseHandshakeResponse(payload);
+
+      if (responseMessage) {
+        return {
+          handshakeResponse: responseMessage,
+          remainingData: this.parseSignalR(remainingData),
+        };
+      }
+    } catch (err) {
+      // ignore errors;
+    }
+
+    // attempt to parse as JsonHubProtocolMessage
+    try {
+      decoder = new JsonHubProtocol();
+      const msgs = decoder.parseMessages(payload, null);
+      if (msgs?.length) {
+        return msgs;
+      }
+    } catch (err) {
+      // ignore errors;
+    }
+
+    // MVP Signalr
+    if (payload.endsWith("\u001e")) {
+      const { json } = parseJSON(payload.slice(0, -1));
+      if (json) {
+        return json;
+      }
+    }
+
+    return null;
+  }
+
+  parseActionCable(payload) {
+    const identifier = payload.identifier && parseJSON(payload.identifier).json;
+    const data = payload.data && parseJSON(payload.data).json;
+
+    if (identifier) {
+      payload.identifier = identifier;
+    }
+    if (data) {
+      payload.data = data;
+    }
+    return payload;
+  }
+
+  toggleRawData() {
+    this.setState({
+      rawDataDisplayed: !this.state.rawDataDisplayed,
+    });
+  }
+
+  renderRawDataBtn(key, checked, onChange) {
+    return [
+      label(
+        {
+          key: `${key}RawDataBtn`,
+          className: "raw-data-toggle",
+          htmlFor: `raw-${key}-checkbox`,
+          onClick: event => {
+            // stop the header click event
+            event.stopPropagation();
+          },
+        },
+        span({ className: "raw-data-toggle-label" }, RAW_DATA),
+        span(
+          { className: "raw-data-toggle-input" },
+          input({
+            id: `raw-${key}-checkbox`,
+            checked,
+            className: "devtools-checkbox-toggle",
+            onChange,
+            type: "checkbox",
+          })
+        )
+      ),
+    ];
+  }
+
+  renderData(component, componentProps) {
+    return component(componentProps);
+  }
+
+  render() {
+    let component;
+    let componentProps;
+    let dataLabel;
+    let { payload, rawDataDisplayed } = this.state;
+    let isTruncated = false;
+    if (this.state.payload.length >= MESSAGE_DATA_LIMIT) {
+      payload = payload.substring(0, MESSAGE_DATA_LIMIT);
+      isTruncated = true;
+    }
+
+    if (
+      !isTruncated &&
+      this.state.isFormattedData &&
+      !this.state.rawDataDisplayed
+    ) {
+      component = PropertiesView;
+      componentProps = {
+        object: this.state.formattedData,
+      };
+      dataLabel = this.state.formattedDataTitle;
+    } else {
+      component = RawData;
+      componentProps = { payload };
+      dataLabel = L10N.getFormatStrWithNumbers(
+        "netmonitor.ws.rawData.header",
+        getFormattedSize(this.state.payload.length)
+      );
+    }
+
+    return div(
+      {
+        className: "message-payload",
+      },
+      isTruncated &&
+        div(
+          {
+            className: "truncated-data-message",
+          },
+          MESSAGE_DATA_TRUNCATED
+        ),
+      h2({ className: "data-header", role: "heading" }, [
+        span({ key: "data-label", className: "data-label" }, dataLabel),
+        !isTruncated &&
+          this.state.isFormattedData &&
+          this.renderRawDataBtn("data", rawDataDisplayed, this.toggleRawData),
+      ]),
+      this.renderData(component, componentProps)
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  request: getRequestByChannelId(state, state.messages.currentChannelId),
+}))(MessagePayload);