Network Monitor's WebSocket panel

[digitarald]

Landing a new panel for Network resources to monitor and inspect WebSocket frames.

🕷 Follow work in the Meta bug. 📑 Read and edit the spec in the PRD 🧪 Play with Honza's test page (pref devtools.netmonitor.features.webSockets)

This issue will be used to discuss the end to end experience.

cc @janodvarko

[fvsch]

Feedback from @nchevobbe on Slack re. column order and information density:

for websocket, I wonder if the order of columns is ideal: I feel like we should have the time first, then the type and payload (I think that are the important things) also, since we have a table here, I'm pretty sure people will ask to have the ability to resize the columns :) so a first step may be to grow the payload one as much as possible, and have all the other ones only take the minimum width

Based on that in bug 1561549 I'm trying out: Type > Time > Size > Payload > Rest…

With the type's visual treatment it might be best to keep it as the first column, but beyond that we can do Time > Payload > Size > Rest…

And bug 1561553 suggests hiding the OpCode, MaskBit and FinBit columns by default, and letting users enable them through context menu entries.

[janodvarko]

The suggested column order looks good to me! Plus hiding the last three columns will also improve the UX.

One comment, could the arrows (send/received) be part of the Time column? (not in its own column).

Honza

[fvsch]

The advantage of keeping a Type column is that the information is accessible: it has a header (with visually hidden text), and values like <img src="…" alt="Sent" />.

We could put it in a time column, with markup looking like:

<td>
  <img src="…" alt="Sent at" />
  16:30:12
</td>

(Not my preference, but I'm not against it.)

For order, maybe put the size after the payload? Type/Time > Payload > Size (> Rest…)

[janodvarko]

We could put it in a time column, with markup looking like:

I like it, not strong opinion, let's see what others think.

For order, maybe put the size after the payload? Type/Time > Payload > Size (> Rest…)

This works for me

Honza

[nchevobbe]

We could put it in a time column

I like it as well, but that brings a question. I think I saw a bug where we plan to sort the data on table header click. If we don't put the icon in its own column, we wouldn't be able to sort by sent/received state (note that we'll have sent/received filter buttons, so maybe it doesn't matter after all)

[janodvarko]

(note that we'll have sent/received filter buttons, so maybe it doesn't matter after all)

Yes, I think that the filter should be the way to go in such case.

[janodvarko]

I found one UX issue related to the filter buttons. See the following screenshot:

Both buttons are grey (bk), but only sent frames displayed. It's because the Received button has focus and it looks like 'checked'.

• Perhaps we could use just dotted frame (no bk) when focused?
• Also, if both are unchecked the panel is empty, is that ok?

Honza

[digitarald]

For posterity: @janodvarko and I went through the current implementation and captured these questions and decisions (copied from requirements):

• Panel title: WebSockets?
  • Follow Chrome with “Messages”
  • Let’s use it too, as it also works for Server-Sent Events
• Focus style for filter button is too similar to ‘checked’
  • Do we have UX issue for this?
  • This should be a follow up for toolbar redesign
  • We should use drop down - to get close to Chrome
• Check height of the toolbar?
• Should the arrow have its own columns?
  • Let’s ask this in UX issue?
  • Looks like we should leave it as is (and perhaps follow up with Victoria)
• We might display just the payload column by default
• “Payload“ should be changed to “Data“
• Copy Message to the clipboard (added to the backlog)
• Sorting (add to the backlog M2?), Chrome only has sorting for Time
• Using Accordion for payload previews make sense.
• Break on WS (backlog)
  • Needs a checkbox
  • Probably in the toolbar
• Telemetry
  • Opening the side panel
  • Selecting a frame
  • Should use Event Telemetry
• Time format: HH:mm:ss.SSS

[fvsch]

I've reworked my patch for columns significantly in https://phabricator.services.mozilla.com/D37064

• Type icon in the Time column
• Updated time format
• Updated default column widths

Here's the result at 2 different widths, with the 3 last columns hidden (which should be the default in the future) and with all columns shown.

[wiomoc]

Just wondering Chrome shows in the 'Length' column 2B less then in the current FF implementation. Maybe we should adapt that to ensure parity.

[fvsch]

Thanks @wiomoc, I opened bug 1565984 based on your report.

[digitarald]

Closing this for now, filing follow-up questions in new issues.