1555628 - Toolbar for Messages side panel

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P2)

Description

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

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

Honza

Comment 1

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

Some pointers:

• Existing Toolbar component in the Network panel
  https://searchfox.org/mozilla-central/rev/7556a400affa9eb99e522d2d17c40689fa23a729/devtools/client/netmonitor/src/components/Toolbar.js#69

• We need proper Redux action objects for all toolbar buttons.

Honza

Comment 2

[Hengyeow (:tanhengyeow)]

Attachment: Bug 1555628 - Toolbar for Messages side panel. r=Honza,nchevobbe

Implement Toolbar for WebSocketsPanel.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f5d458cf80ae
Toolbar for Messages side panel. r=Honza,nchevobbe

Comment 4

[Bogdan Tara[:bogdan_tara | bogdant]]

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

Push with failure: https://treeherder.mozilla.org/#/jobs?repo=autoland&searchStr=linting%2Copt%2Csource-test-mozlint-eslint%2C%28es%29&fromchange=79349e1d98a64139c9ceaf73d6027003b5c309b2&tochange=21fe727a9ebaff6d7842bb45594299da66ae5efd&selectedJob=255987674

Backout link: https://hg.mozilla.org/integration/autoland/rev/21fe727a9ebaff6d7842bb45594299da66ae5efd

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=255987674&repo=autoland&lineNumber=228

[task 2019-07-11T17:34:49.146Z] copying build/lib.linux-x86_64-2.7/psutil/_psutil_posix.so -> 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

Comment 5

[Hengyeow (:tanhengyeow)]

Updated the patch and fixed the issue.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/41d8b9ebef49
Toolbar for Messages side panel. r=Honza,nchevobbe

Comment 7

[Hengyeow (:tanhengyeow)]

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.

Comment 8

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/41d8b9ebef49