Closed Bug 1555625 Opened 2 years ago Closed 2 years ago

Basic skeleton of side panel for WS frames


(DevTools :: Netmonitor, enhancement, P2)



(firefox69 fixed)

Firefox 69
Tracking Status
firefox69 --- fixed


(Reporter: Honza, Assigned: tanhengyeow)


(Blocks 1 open bug)



(1 file)

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)


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.


Assignee: nobody → E0032242

Implement basic skeleton of side panel for WS frames.

Pushed by
Basic skeleton of side panel for WS frames. r=Honza
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69

I've just tested this on github / where it works just fine.
However on / no frames are displayed (Use Chrome for reference)

I've just tested this on github / where it works just fine.
However on / no frames are displayed (Use Chrome for reference)

Thanks for the testing Christoph!

I filled bug 1560421 to cover this.


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.
You need to log in before you can comment on or make changes to this bug.