It should be possible to inspect selected frame's payload. The payload preview should be located at the bottom of the side panel.

• Support for plain text preview (binary payloads encoded using base64)
• Support for JSON (using TreeView, just like for JSON responses)

Honza

Some pointers:

• Here is an example of using TreeView to render JS object / JSON
  https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/devtools/client/netmonitor/src/components/PropertiesView.js#240

• Example of SplitBox usage
  https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/devtools/client/netmonitor/src/components/MonitorPanel.js#146

Honza

We should also use Accordion [1] component when we render the payload preview. This should be useful especially in cases where we want to display both (1) the raw payload and (2) its formatted version (e.g. JSON).

Honza

[1] https://searchfox.org/mozilla-central/rev/8a990595ce6d5ed07ace2d4d5d86cc69aec90bde/devtools/client/shared/components/Accordion.js#11

The Accordion section label can also show size of the payload the same way as we do e.g. for HTTP headers.

Honza

Support WebSocket frame payload preview.

See how to make the style of WS frame payload JSON preview the same as HTTP JSON response. It would be great to share one component that would preview JSON for both, but perhaps we can do it in a follow up.

https://hg.mozilla.org/mozilla-central/rev/c35365b22706