Filter according to WS connection ID

[janodvarko]

It should be possible to filter the list of frames according to the WS connection ID.

We want to utilize the filter-box and introduce a prefix # that will be used to distinguish WS ID from playin text.

There should also be a popup window (just like in the Debugger panel) listing all options and teaching the user how to use it.

Honza

[fflorent]

Not sure whether a prefix is worth here:

• the prefix already exists in the Debugger (which is BTW the only one that proposes prefixes) and is used for another purpose
• that would probably be the only option and would force us to implement a popup (as you mentioned)

How about a drop-down list, hidden if there are less than 2 connections? (assuming a large majority of webpages don't have many WS connections).

Florent

[janodvarko]

@helenvholmes UI/UX question related to filtering DevTools panel's content.

There might be more WS connections on the page, all producing some traffic (WS frames received/sent). It should be possible to filter the list of frames according to WS ID (every frame has a fields specifying parent WS ID).

There are more options how to implement the UI/UX:

1. We already have an input box that is currently used to filter according to a plain text. If the the user types a text into the box - only frames with the text within the payload data will be displayed.
   

We can reuse this box and introduce a new operator (prefix) that could be used to distinguish between the plain text filter from filter, e.g. typing #5 would display only frames from WS connection with ID 5 (typing just 5 would display frames with 5 in the payload). We can also display a helper popup describing possible operators (prefixes). Just like it works in the Debugger panel.

2. We can introduce a new drop-box select that lists all existing connections on the page. In case of just one connection this box wouldn't have to be even displayed. Picking a connection from the box would filter the content.

---

add 1) This is more consistent with the current search UI and I know that DevTools toolobox wants to have just one search/filter box UI shared among all panels (can't find the bugzilla bug atm). It's also more flexible in case we want to filter the content according to any other aspect of a frame (e.g. operation code)

add 2) This is more discoverable from the user perspective since it's immediately accessible. No need to learn prefixes. But, it isn't much flexible and inline with existing UI. One advantage is that the user can filter according to WS ID and further according to the payload.

Any tips, how we should proceed here?

Honza

[helenvholmes]

I am a bigger fan of your suggestion for number 2 since I think it is important that our search boxes act the same (Bug 1225459). If I'm understanding you correctly Honza, you're looking for a good way to have some sort of select menu with all of the socket connections next to the search box?

My first thought is that we could do exactly what you're suggesting (Chrome does it in the console, it seems to work for them pretty well):

I can see that you don't have a lot of room on that toolbar for a dropdown menu, though. Perhaps we could convert the "Clear" and "Pause" buttons to icons, like we're using in a few other places?

Clear button attached in Bug 1220208

[janodvarko]

I am a bigger fan of your suggestion for number 2 since I think it is important that our search boxes act the same

Ok, good

If I'm understanding you correctly Honza, you're looking for a good way to have some sort of select menu with all of the socket connections next to the search box?

A contributor (@esphen) provided a patch that introduces a select menu (drop box) with list of all connections and is placed next to the search box. See, the following comment with a screenshot:
#34 (comment)

This is how the patch works:

1. The search box we have now works still the same (e.g. filters the list of frames, only frames containing the text from the search box in the payload are displayed).
2. The (introduced) select menu can be used to show all frames or frames coming through selected WS connection only.

There is enough space for the select menu I believe.

So, this sounds ok for you, right?

Honza

[helenvholmes]

Yep, sounds good to me!

[janodvarko]

Great, thanks.

@esphen: I'll take a look at your patch tomorrow

Honza

[eliihen]

Awesome 👍