1555625 - Basic skeleton of side panel for WS frames

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P2)

Description

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

Implement basic skeleton for Messages side panel. This panel is responsible for rendering list of WS frames for selected HTTP WS upgrade request.

Some comments:

• The panel should start WS listening on the backend (through WebSocketFront.start API) in componentDidMount
• The panel renders list of frames in a table (HTML table). The initial list should be fetched through WebSocketFront.getFrames API
• The panel should support light/dark themes
• The panel should be hidden behind a pref devtools.netmonitor.features.webSockets
• Check how it works in the Console panel (we might disable WS support in the Console in case of issues for now)

Honza

Comment 1

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

Some pointers:

• Here is the current list of side panels
  https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/devtools/client/netmonitor/src/components/TabboxPanel.js#105-171

• An existing side panel
  https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/devtools/client/netmonitor/src/components/HeadersPanel.js#71

Honza

Comment 2

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

Implementing WebSocketReducer should be part of this bug too.

There will also be new actions.

Actions to getFrame and add payload:

• WS_ADD_FRAME - this would be fired from DataProvider when a new frame (sent or received) is received from the backend
• WS_ADD_FRAME_PAYLOAD - this would be fired from WebSocketPanel when the user selects a frame in order to preview it’s payload. At this moment the LongStringActor (representing the payload) will be resolved and the action fired.

Honza

Comment 3

[Hengyeow (:tanhengyeow)]

Attachment: Bug 1555625 - Basic skeleton of side panel for WS frames. r=Honza

Implement basic skeleton of side panel for WS frames.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c239c5218b5b
Basic skeleton of side panel for WS frames. r=Honza

Comment 5

[Razvan Maries]

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

Comment 6

[Christoph Walcher]

I've just tested this on github / https://socket.io where it works just fine.
However on https://web-whatsapp.com / https://discordapp.com/ no frames are displayed (Use Chrome for reference)

Comment 7

[Christoph Walcher]

I've just tested this on github / https://socket.io where it works just fine.
However on https://web.whatsapp.com / https://discordapp.com/ no frames are displayed (Use Chrome for reference)

Comment 8

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

Thanks for the testing Christoph!

I filled bug 1560421 to cover this.

Honza

Comment 9

[Hengyeow (:tanhengyeow)]

Summary of final patch:

1. Expose channelId from the backend to correlate the corresponding upgraded HTTP request with its WebSocket frames.

2. Setup React (new WebSocketsPanel component) and Redux architecture (new actions/reducers/store/selectors).

3. New Redux architecture in detail:

   • Actions: Added addFrame function of type WS_ADD_FRAME that transmits the channelId and the WebSocket frame data. This action is executed from FirefoxDataProvider via the onFrameSent and onFrameReceived message handlers.
   • Store: New object named WebSockets that contains the frames Map (key = channelId, value = array of frame objects).
   • Reducers: Handles the action of type WS_ADD_FRAME and updates the WebSockets object with the new WebSocket frame mapped to a channelId.
   • Selectors: Added getFramesByChannelId to fetch frames of a particular channelId. These frames would be displayed in the WebSocketsPanel component.

4. New WebSocketsPanel component in detail:

   • If there are no frames in the WebSockets object after getFramesByChannelId is called, the message No WebSocket frames for this request would be shown.
   • If there are frames present for a channelId, a HTML table is used to display the frames in different rows.
   • WebSocketsPanel is only visible if request.cause.type === "websocket" and the pref devtools.netmonitor.features.webSockets is set.