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

Differential Revision: https://phabricator.services.mozilla.com/D54059

--HG--
extra : moz-landing-system : lando

devtools/client/locales/en-US/netmonitor.properties

@@ -225,6 +225,11 @@ networkMenu.ws.summary.tooltip.framesCount=Number of messages
 # what the framesTotalSize label displays
 networkMenu.ws.summary.tooltip.framesTotalSize=Total size of displayed messages
 
+# LOCALIZATION NOTE (networkMenu.ws.summary.tooltip.framesTranferredSize): A tooltip explaining
+# what the framesTranferredSize label displays
+# %1$S is the total size of the transferred data, %2$S is the size of sent data, %3$S is the size of received data.
+networkMenu.ws.summary.tooltip.framesTranferredSize=%1$S total, %2$S sent, %3$S received
+
 # LOCALIZATION NOTE (networkMenu.ws.summary.tooltip.framesTotalTime): A tooltip explaining
 # what framesTotalTime displays
 networkMenu.ws.summary.tooltip.framesTotalTime=Total elapsed time between the first and last displayed messages

devtools/client/netmonitor/src/components/websockets/StatusBar.js

@@ -61,7 +61,7 @@ class StatusBar extends Component {
 
   render() {
     const { summary } = this.props;
-    const { count, totalSize, totalMs } = summary;
+    const { count, totalMs, sentSize, receivedSize, totalSize } = summary;
 
     const countText =
       count === 0
@@ -71,6 +71,8 @@ class StatusBar extends Component {
             L10N.getStr("networkMenu.ws.summary.framesCount2")
           ).replace("#1", count);
     const totalSizeText = getFormattedSize(totalSize);
+    const sentSizeText = getFormattedSize(sentSize);
+    const receivedText = getFormattedSize(receivedSize);
     const totalMillisText = getFormattedTime(totalMs);
 
     return footer(
@@ -89,7 +91,12 @@ class StatusBar extends Component {
               "status-bar-label frames-list-network-summary-total-size",
             title: TOOLTIP_FRAMES_TOTAL_SIZE,
           },
-          totalSizeText
+          L10N.getFormatStr(
+            "networkMenu.ws.summary.tooltip.framesTranferredSize",
+            totalSizeText,
+            sentSizeText,
+            receivedText
+          )
         ),
       count !== 0 &&
         div(

devtools/client/netmonitor/src/selectors/web-sockets.js

@@ -62,9 +62,16 @@ const getDisplayedFramesSummary = createSelector(
   displayedFrames => {
     let firstStartedMs = +Infinity;
     let lastEndedMs = -Infinity;
+    let sentSize = 0;
+    let receivedSize = 0;
     let totalSize = 0;
 
     displayedFrames.forEach(frame => {
+      if (frame.type == "received") {
+        receivedSize += frame.payload.length;
+      } else if (frame.type == "sent") {
+        sentSize += frame.payload.length;
+      }
       totalSize += frame.payload.length;
       if (frame.timeStamp < firstStartedMs) {
         firstStartedMs = frame.timeStamp;
@@ -77,6 +84,8 @@ const getDisplayedFramesSummary = createSelector(
     return {
       count: displayedFrames.length,
       totalMs: (lastEndedMs - firstStartedMs) / 1000,
+      sentSize,
+      receivedSize,
       totalSize,
     };
   }