1593831 - WebSockets: Display separate uploaded and downloaded transfer size

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[:Harald Kirschner :digitarald]

Via https://discourse.mozilla.org/t/feedback-wanted-websocket-inspector-in-devedition-70/46859/10

UI could use the same color coding or icons.

Comment 1

[:Harald Kirschner :digitarald]

Contributor friendly as the UI has all the data needed.

Comment 2

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

Where should we display the transfer size (upload + download) ?

1. We can extend the existing status bar in Messages side panel
2. We can extend the Transferred column in the request list

I think having both would be useful.
Or is there any other option?

Harald WDYT?

Honza

Comment 3

[:Harald Kirschner :digitarald]

Status bar is what I thought, as it summarizes all messages.

Comment 4

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

Some pointers to the source code:

1. The StatusBar in Messages panel (displaying WebSocket frames) is rendering the total size here:
   https://searchfox.org/mozilla-central/rev/8b7aa8af652f87d39349067a5bc9c0256bf6dedc/devtools/client/netmonitor/src/components/websockets/StatusBar.js#92

2. The summary prop used in the render method to get the total size is initialized here
   https://searchfox.org/mozilla-central/rev/8b7aa8af652f87d39349067a5bc9c0256bf6dedc/devtools/client/netmonitor/src/components/websockets/StatusBar.js#108

3. The goal here is to extend getDisplayedFramesSummary so, it returns separate uploaded/downloaded sizes. The implementation is here:
   https://searchfox.org/mozilla-central/rev/8b7aa8af652f87d39349067a5bc9c0256bf6dedc/devtools/client/netmonitor/src/selectors/web-sockets.js#60

The method iterates over all displayed frames and executes calculation. It needs to make a difference between frames sent and received using something like as follows:

if (frame.type == "received") { }
or
if (frame.type == "sent") {
}

Honza

Comment 5

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

Attachment: image.png

The screenshot what piece of UI is involved in this feature request

Honza

Comment 6

[Hayden Huang]

Hi Honza, can I take this one?

Comment 7

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

Assigned to you, thanks for the help!

Honza

Comment 8

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

Attachment: image.png

A mockup showing how the status bar could looks like. Bug, as Harald says, we can play with colors and icons (using the same as in the list of frames).

Honza

Comment 9

[Hayden Huang]

Hi, I've just create a pull request on GitHub gecko-dev, can you take a look to check whether I am doing right? Thanks

Comment 10

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

Sounds great, thanks for the work!

But, we are using Phabricator for patches. Can you please post your patch there, thanks!
https://docs.firefox-dev.tools/contributing/making-prs.html

If you specify me as the reviewer the patch will automatically appear in my review queue.

Honza

Comment 11

[Hayden Huang]

Attachment: hg.png

I am not sure I am doing right, can you take a look?

Comment 12

[Hayden Huang]

Attachment: arc.png

Comment 13

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

1. Use hg commit -m "Bug 1593831 - WebSockets: Display separate uploaded and downloaded transfer size" to commit your changes in your working directory into your local HG repo

2. Use arc diff .^ --create to upload the last commit to phabricator

3. Use arc diff .^ --update D<####> to update the specific revision in phabricator

Honza

Comment 14

[Hayden Huang]

Attachment: Bug 1593831 - WebSockets: Display separate uploaded and downloaded transfer size r=honza

Comment 15

[Hayden Huang]

Attachment: Bug 1593831 - WebSockets: Display separate uploaded and downloaded transfer size r=honza

Comment 16

[Hayden Huang]

Attachment: Bug 1593831 - WebSockets: Display separate uploaded and downloaded transfer size r=honza

Comment 17

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

Hayden, can you try again the instructions I posted in comment #13 to avoid creating a new revision for every update?

This is the main piece: arc diff .^ --update D54059
Just try to update the D54059 revision
https://phabricator.services.mozilla.com/D54059

It would be a lot easier to do the review if I can see my previous comments.

Honza

Comment 18

[Hayden Huang]

It seems work now, but it also lose track of some changes I already commit to the another revision (Line:95,devtools/client/netmonitor/src/components/websockets/StatusBar.js)
how can I revert and add it again in D54059?

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/608abbf990f2
WebSockets: Display separate uploaded and downloaded transfer size r=Honza

Comment 20

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/608abbf990f2