1559398 - Implement table and preview sections in WebSocket side panel

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P2)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

This is a follow up for bug 1555625 introducing a new side panel for WebSockets frames.

This bug should:

1. Introduce a table for list of frames (list of columns spec is in PRD)
2. Introduce a preview section for payload
3. Use Splitter component to separate table and preview sections
   https://searchfox.org/mozilla-central/source/devtools/client/shared/components/splitter/SplitBox.js

Honza

Comment 1

[Hengyeow (:tanhengyeow)]

Attachment: Bug 1559398 - Implement table and preview sections in WebSocket side panel. r=Honza

Implement table and preview sections in WebSocket side panel.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/42fa48dca988
Implement table and preview sections in WebSocket side panel. r=Honza

Comment 3

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/42fa48dca988

Comment 4

[Hengyeow (:tanhengyeow)]

Summary of final patch:

1. New Redux support added:

   • Actions:
     • Added selectFrame function of type WS_SELECT_FRAME. Triggered when a WebSocket frame is selected.
     • Added openFrameDetails function of type WS_OPEN_FRAME_DETAILS. Triggered based on context (explained later).
   • Store: Added field selectedFrame (represents a WebSocket frame) and frameDetailsOpen (represents the view status of FramePayload component).
   • Reducers:
     • Added selectFrame function that adds the selectedFrame (object) and frameDetailsOpen (boolean) to the store.
     • Added openFrameDetails function that adds the frameDetailsOpen (boolean) to the store.
   • Selectors:
     • Added isSelectedFrameVisible function that checks if the selectedFrame is visible in the viewport.
     • Added getSelectedFrame function to fetch the current selected frame.

2. Updated the WebSocketsPanel component. The component is organized into the following structure:

   • SplitBox component demarcates two distinct components through a splitter between two panels. The startPanel is the FrameListContent component and the endPanel is the FramePayload component.
   • The FrameListContent component shows the table of WebSocket frames.
   • The FramePayload component shows the full payload of a WebSocket frame when it is being selected.
   • If the selected frame is not visible in the viewport (checked through isSelectedFrameVisible ), the FramePayload component would not be shown (decided by the frameDetailsOpen boolean).

3. New FrameListContent component in detail

   • Contains the new FrameListHeader component, representing the table headers.
   • Contains an array of FrameListItem components, which makes up the table body. Each FrameListItem represents a table row, and each table cell is rendered in different columns based on the fields present in a WebSocket frame. The list of ColumnComponent can be found in devtools/client/netmonitor/src/components/websockets.
   • When a FrameListItem component is clicked, the onMouseDown event is triggered, which dispatches the selectFrame action.

4. New FramePayload component in detail

   • Shows the full payload of a WebSocket frame.
   • The payload is unwrapped from the LongStringActor object through a new helper method getFramePayload (in request-utils.js). The helper method executes connector.getLongString(payload), an async function.
   • Before the async function resolves, the FramePayload component renders an empty payload, which is set as a state. The component rerenders again with the help of setState({ payload }) when the result is resolved.