Closed Bug 1593831 Opened 4 months ago Closed 3 months ago

WebSockets: Display separate uploaded and downloaded transfer size

Categories

(DevTools :: Netmonitor, enhancement, P3)

enhancement

Tracking

(firefox72 fixed)

RESOLVED FIXED
Firefox 72
Tracking Status
firefox72 --- fixed

People

(Reporter: Harald, Assigned: hongda.huang)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug)

User Story

When tracking a websocket connection I want to see both uploaded and downloaded data sizes for all messages, so that I know which code (client or server) to tweak to reduce data usage.

Attachments

(6 files, 1 obsolete file)

Contributor friendly as the UI has all the data needed.

Keywords: good-first-bug

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

Flags: needinfo?(hkirschner)

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

Flags: needinfo?(hkirschner)

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

Summary: Display separate uploaded and downloaded transfer size → WebSockets: Display separate uploaded and downloaded transfer size
Attached image image.png

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

Honza

Hi Honza, can I take this one?

Assigned to you, thanks for the help!

Honza

Assignee: nobody → hongda.huang
Status: NEW → ASSIGNED
Attached image 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

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

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

Flags: needinfo?(hongda.huang)
Attached image hg.png

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

Flags: needinfo?(hongda.huang)
Attached image arc.png
  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

Attachment #9109863 - Attachment is obsolete: true

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

Flags: needinfo?(hongda.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?

Flags: needinfo?(hongda.huang)
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/608abbf990f2
WebSockets: Display separate uploaded and downloaded transfer size r=Honza
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72
You need to log in before you can comment on or make changes to this bug.