Closed Bug 1593831 Opened 4 months ago Closed 3 months ago

WebSockets: Display separate uploaded and downloaded transfer size


(DevTools :: Netmonitor, enhancement, P3)



(firefox72 fixed)

Firefox 72
Tracking Status
firefox72 --- fixed


(Reporter: Harald, Assigned: hongda.huang)


(Blocks 1 open bug)


(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.


(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?


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:

  2. The summary prop used in the render method to get the total size is initialized here

  3. The goal here is to extend getDisplayedFramesSummary so, it returns separate uploaded/downloaded sizes. The implementation is here:

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") { }
if (frame.type == "sent") {


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


Hi Honza, can I take this one?

Assigned to you, thanks for the help!


Assignee: nobody → hongda.huang
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).


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!

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


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


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

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


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
WebSockets: Display separate uploaded and downloaded transfer size r=Honza
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.