Bug 1555634 - Summary stats at the bottom of Messages panel. r=Honza,nchevobbe,flod

Add summary stats at bottom of Messages panel.

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

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

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

@@ -66,9 +66,9 @@ headersEmptyText=No headers for this request
 # headers tab of the network details pane for the filtering input.
 headersFilterText=Filter headers
 
-# LOCALIZATION NOTE (webSocketsEmptyText): This is the text displayed in the
+# LOCALIZATION NOTE (messagesEmptyText): This is the text displayed in the
 # WebSockets tab of the network details pane when there are no frames available.
-webSocketsEmptyText=No WebSocket frames for this request
+messagesEmptyText=No messages for this request
 
 # LOCALIZATION NOTE (cookiesEmptyText): This is the text displayed in the
 # cookies tab of the network details pane when there are no cookies available.
@@ -197,7 +197,7 @@ networkMenu.summary.tooltip.requestsCount=Number of requests
 networkMenu.summary.transferred=%S / %S transferred
 
 # LOCALIZATION NOTE (networkMenu.summary.tooltip.transferred): A tooltip explaining
-# what the transferred  label displays
+# what the transferred label displays
 networkMenu.summary.tooltip.transferred=Size/transferred size of all requests
 
 # LOCALIZATION NOTE (networkMenu.summary.finish): This label is displayed
@@ -208,6 +208,27 @@ networkMenu.summary.finish=Finish: %S
 # what the finish label displays
 networkMenu.summary.tooltip.finish=Total time needed to load all requests
 
+# LOCALIZATION NOTE (networkMenu.ws.summary.framesCount2): This label is displayed
+# in the messages table footer providing the number of frames
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+networkMenu.ws.summary.framesCount2=One message;#1 messages
+
+# LOCALIZATION NOTE (networkMenu.ws.summary.framesCountEmpty): This label is displayed
+# in the messages table footer when there are no frames
+networkMenu.ws.summary.framesCountEmpty=No messages
+
+# LOCALIZATION NOTE (networkMenu.ws.summary.tooltip.framesCount): A tooltip explaining
+# what the framesCount label displays
+networkMenu.ws.summary.tooltip.framesCount=Number of messages
+
+# LOCALIZATION NOTE (networkMenu.ws.summary.tooltip.framesTotalSize): A tooltip explaining
+# what the framesTotalSize label displays
+networkMenu.ws.summary.tooltip.framesTotalSize=Total size of displayed messages
+
+# 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
+
 # LOCALIZATION NOTE (networkMenu.sizeB): This is the label displayed
 # in the network menu specifying the size of a request (in bytes).
 networkMenu.sizeB=%S B

devtools/client/netmonitor/src/assets/styles/Toolbar.css

@@ -14,6 +14,11 @@
   min-height: var(--primary-toolbar-height);
 }
 
+.requests-list-filter-buttons {
+  white-space: nowrap;
+  margin: 0 7px;
+}
+
 .devtools-button.devtools-pause-icon::before,
 .devtools-button.devtools-play-icon::before {
   margin-bottom: 1px;

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

@@ -18,7 +18,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { table, tbody, div } = dom;
 
 const { L10N } = require("../../utils/l10n");
-const FRAMES_EMPTY_TEXT = L10N.getStr("webSocketsEmptyText");
+const FRAMES_EMPTY_TEXT = L10N.getStr("messagesEmptyText");
 const Actions = require("../../actions/index");
 
 const { getSelectedFrame } = require("../../selectors/index");

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

@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const {
+  connect,
+} = require("devtools/client/shared/redux/visibility-handler-connect");
+const { PluralForm } = require("devtools/shared/plural-form");
+const {
+  getDisplayedFramesSummary,
+} = require("devtools/client/netmonitor/src/selectors/index.js");
+const {
+  getFormattedSize,
+  getFormattedTime,
+} = require("devtools/client/netmonitor/src/utils/format-utils.js");
+const { L10N } = require("devtools/client/netmonitor/src/utils/l10n.js");
+const {
+  propertiesEqual,
+} = require("devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { div, footer } = dom;
+
+const FRAMES_COUNT_EMPTY = L10N.getStr(
+  "networkMenu.ws.summary.framesCountEmpty"
+);
+const TOOLTIP_FRAMES_COUNT = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesCount"
+);
+const TOOLTIP_FRAMES_TOTAL_SIZE = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesTotalSize"
+);
+const TOOLTIP_FRAMES_TOTAL_TIME = L10N.getStr(
+  "networkMenu.ws.summary.tooltip.framesTotalTime"
+);
+
+const UPDATED_WS_SUMMARY_PROPS = ["count", "totalMillis", "totalSize"];
+
+/**
+ * Displays the summary of frame count, total size and total time since the first frame.
+ */
+class StatusBar extends Component {
+  static get propTypes() {
+    return {
+      summary: PropTypes.object.isRequired,
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { summary } = this.props;
+    return !propertiesEqual(
+      UPDATED_WS_SUMMARY_PROPS,
+      summary,
+      nextProps.summary
+    );
+  }
+
+  render() {
+    const { summary } = this.props;
+    const { count, totalSize, totalMillis } = summary;
+
+    const countText =
+      count === 0
+        ? FRAMES_COUNT_EMPTY
+        : PluralForm.get(
+            count,
+            L10N.getStr("networkMenu.ws.summary.framesCount2")
+          ).replace("#1", count);
+    const totalSizeText = getFormattedSize(totalSize);
+    const totalMillisText = getFormattedTime(totalMillis);
+
+    return footer(
+      { className: "devtools-toolbar devtools-toolbar-bottom" },
+      div(
+        {
+          className: "status-bar-label frames-list-network-summary-count",
+          title: TOOLTIP_FRAMES_COUNT,
+        },
+        countText
+      ),
+      count !== 0 &&
+        div(
+          {
+            className:
+              "status-bar-label frames-list-network-summary-total-size",
+            title: TOOLTIP_FRAMES_TOTAL_SIZE,
+          },
+          totalSizeText
+        ),
+      count !== 0 &&
+        div(
+          {
+            className:
+              "status-bar-label frames-list-network-summary-total-millis",
+            title: TOOLTIP_FRAMES_TOTAL_TIME,
+          },
+          totalMillisText
+        )
+    );
+  }
+}
+
+module.exports = connect(state => ({
+  summary: getDisplayedFramesSummary(state),
+}))(StatusBar);

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

@@ -29,6 +29,7 @@ const SplitBox = createFactory(
 );
 const FrameListContent = createFactory(require("./FrameListContent"));
 const Toolbar = createFactory(require("./Toolbar"));
+const StatusBar = createFactory(require("./StatusBar"));
 
 loader.lazyGetter(this, "FramePayload", function() {
   return createFactory(require("./FramePayload"));
@@ -109,7 +110,8 @@ class WebSocketsPanel extends Component {
         endPanelCollapsed: !frameDetailsOpen,
         endPanelControl: true,
         vert: false,
-      })
+      }),
+      StatusBar()
     );
   }
 }

devtools/client/netmonitor/src/components/websockets/moz.build

@@ -14,6 +14,7 @@ DevToolsModules(
     'FrameListHeader.js',
     'FrameListItem.js',
     'FramePayload.js',
+    'StatusBar.js',
     'Toolbar.js',
     'WebSocketsPanel.js',
 )

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

@@ -22,9 +22,12 @@ const getDisplayedFrames = createSelector(
       return framesArray;
     }
 
+    // If frame payload is > 10,000 characters long, we check the LongStringActor payload string
     return framesArray.filter(
       frame =>
-        frame.payload.includes(frameFilterText) &&
+        (frame.payload.initial
+          ? frame.payload.initial.includes(frameFilterText)
+          : frame.payload.includes(frameFilterText)) &&
         (frameFilterType === "all" || frameFilterType === frame.type)
     );
   }
@@ -50,8 +53,38 @@ const getSelectedFrame = createSelector(
   ({ selectedFrame }) => (selectedFrame ? selectedFrame : undefined)
 );
 
+/**
+ * Returns summary data of the list of frames that are visible to the user.
+ * Filtered frames by types and text are factored in.
+ */
+const getDisplayedFramesSummary = createSelector(
+  getDisplayedFrames,
+  displayedFrames => {
+    let firstStartedMillis = +Infinity;
+    let lastEndedMillis = -Infinity;
+    let totalSize = 0;
+
+    displayedFrames.forEach(frame => {
+      totalSize += frame.payload.length;
+      if (frame.timeStamp < firstStartedMillis) {
+        firstStartedMillis = frame.timeStamp;
+      }
+      if (frame.timeStamp > lastEndedMillis) {
+        lastEndedMillis = frame.timeStamp;
+      }
+    });
+
+    return {
+      count: displayedFrames.length,
+      totalMillis: (lastEndedMillis - firstStartedMillis) / 1000,
+      totalSize,
+    };
+  }
+);
+
 module.exports = {
   getSelectedFrame,
   isSelectedFrameVisible,
   getDisplayedFrames,
+  getDisplayedFramesSummary,
 };

devtools/server/actors/network-monitor/websocket-actor.js

@@ -110,7 +110,7 @@ const WebSocketActor = ActorClassWithSpec(webSocketSpec, {
     }
 
     let payload = frame.payload;
-    payload = new LongStringActor(this.conn, JSON.stringify(payload));
+    payload = new LongStringActor(this.conn, payload);
     this.manage(payload);
     payload = payload.form();
 
@@ -135,7 +135,7 @@ const WebSocketActor = ActorClassWithSpec(webSocketSpec, {
       return;
     }
 
-    let payload = new LongStringActor(this.conn, JSON.stringify(frame.payload));
+    let payload = new LongStringActor(this.conn, frame.payload);
     this.manage(payload);
     payload = payload.form();