Closed Bug 1555628 Opened 1 year ago Closed 11 months ago

Toolbar for Messages side panel


(DevTools :: Netmonitor, enhancement, P2)



(firefox70 fixed)

Firefox 70
Tracking Status
firefox70 --- fixed


(Reporter: Honza, Assigned: tanhengyeow)


(Blocks 1 open bug)



(1 file)

Implement a Toolbar for Messages side panel. The following actions should be available:

  • Clear button - removes all frames from the list
  • Filter (all, sent, received) - filters content of the list


Some pointers:


Type: defect → enhancement
Priority: -- → P2

Implement Toolbar for WebSocketsPanel.

Attachment #9075075 - Attachment description: Bug 1555628 - Toolbar for Messages side panel. r=Honza → Bug 1555628 - Toolbar for Messages side panel. r=Honza,nchevobbe
Assignee: nobody → E0032242
Pushed by
Toolbar for Messages side panel. r=Honza,nchevobbe

Backed out changeset f5d458cf80ae (Bug 1555628) for ES lint failure on WebSocketsPanel.js

Push with failure:

Backout link:

Failure log:

[task 2019-07-11T17:34:49.146Z] copying build/lib.linux-x86_64-2.7/psutil/ -> psutil
[task 2019-07-11T17:34:49.146Z]
[task 2019-07-11T17:34:49.146Z] Error processing command. Ignoring because optional. (optional:packages.txt:comm/build/virtualenv_packages.txt)
[task 2019-07-11T17:34:51.956Z] yarn v^1.16.0 needs to be installed locally.
[task 2019-07-11T17:34:51.956Z] Installing eslint for mach using "/usr/local/bin/node /usr/local/bin/npm install --loglevel=error"...
[task 2019-07-11T17:34:51.957Z]
[task 2019-07-11T17:34:51.957Z] eslint installed successfully!
[task 2019-07-11T17:34:51.957Z]
[task 2019-07-11T17:34:51.957Z] NOTE: Your local eslint binary is at /builds/worker/checkouts/gecko/node_modules/.bin/eslint
[task 2019-07-11T17:34:51.957Z]
[task 2019-07-11T17:49:00.208Z] TEST-UNEXPECTED-ERROR | /builds/worker/checkouts/gecko/devtools/client/netmonitor/src/components/websockets/WebSocketsPanel.js:81:12 | Replace ???????frameDetailsOpen,???????connector,???????selectedFrame,???? with ?frameDetailsOpen,?connector,?selectedFrame (prettier/prettier)
[taskcluster 2019-07-11 17:49:00.759Z] === Task Finished ===
[taskcluster 2019-07-11 17:49:01.621Z] Unsuccessful task run with exit code: 1 completed in 1093.84 seconds

Flags: needinfo?(E0032242)

Updated the patch and fixed the issue.

Flags: needinfo?(E0032242)
Pushed by
Toolbar for Messages side panel. r=Honza,nchevobbe

Summary of final patch:

  1. New Redux support added:

    • Actions:
      • Added clearFrames function of type WS_CLEAR_FRAMES. Triggered when the clear button is clicked.
      • Added toggleFrameFilterType function of type WS_TOGGLE_FRAME_FILTER_TYPE. Triggered when users select a filter type in the dropdown menu to filter for a certain type of frame. Options are "All", "Received" and "Sent".
      • Added setFrameFilterText function of type WS_SET_REQUEST_FILTER_TEXT. Triggered for every keystroke that users input in the filter box.
    • Store:
      • Added frameFilterText, which represents the current filter text in the filter box. This is shared across all WebSocket (WS) requests.
      • Added frameFilterType, which represents the current filter type. This is shared across all WS requests.
      • Added currentChannelId, which represents the channel id of the selected WS request.
    • Reducers:
      • Added setChannelId function that sets the current channel id affiliated with the WS request. This reducer is triggered when a request is selected (corresponds to an action type of SELECT_REQUEST). The frameFilterText is also set to an empty string at this point because the default filter text should be an empty string for a new WS request. A common scenario that triggers this reducer is when users switch between different WS requests for inspection.
      • Added clearFrames function that removes all frames corresponding to the currentChannelId in the store. Frames belonging to other channel ids would be preserved. The current frameFilterType, and frameFilterText are preserved as well.
      • Added toggleFrameFilterType function that updates frameFilterType to the user-specified filter type ("All", "Received" or "Sent").
      • Added setFrameFilterText function that updates frameFilterText to the user specified string keyed in the filter box.
    • Selectors:
      • Added getDisplayedFrames function that returns an array of frames that are visible to the user. Filter type and filter text are taken into account.
  2. New components and updates to existing components:

    • The WebSocketsPanel component is the parent of the new ToolBar component. Inside the ToolBar component, it contains a new component FrameFilterMenu which represents the dropdown menu used for filtering frames.
    • The ToolBar component holds the clear button used to clear frames, the dropdown menu, and the filter box.
    • The WebSocketsPanel component has access to the filter box present in the ToolBar component through Refs. When a different WS request is clicked, which results in a different currentChannelId, the filter box would be cleared.
  3. Implemented some discussion items found in this discussion thread. They are:

    • Having a dropdown menu for filtering frames.
    • Changing the name of the WebSockets panel to Messages instead.
    • Changing the name of the Payload column to Data instead.
    • Using the following time format for frames, HH:mm:ss.SSS where SSS refers to microseconds.

P/S: Refer to this comment for some scenarios that might be useful for QA or testing for this patch.

Closed: 11 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70
You need to log in before you can comment on or make changes to this bug.