Bug 1309194: Implement summary info in Net Panel Toolbar; Bug 1317205: CSS improvement for summary button

Required for: https://github.com/MoonchildProductions/moebius/pull/93

3 files changed, 71 insertions, 19 deletions

diff --git a/devtools/client/netmonitor/components/moz.build b/devtools/client/netmonitor/components/moz.build
index 47ef7f026..42459584d 100644
--- a/devtools/client/netmonitor/components/moz.build
+++ b/devtools/client/netmonitor/components/moz.build
@@ -6,5 +6,6 @@
 DevToolsModules(
     'filter-buttons.js',
     'search-box.js',
+    'summary-button.js',
     'toggle-button.js',
 )
diff --git a/devtools/client/netmonitor/components/summary-button.js b/devtools/client/netmonitor/components/summary-button.js
new file mode 100644
index 000000000..9465d3147
--- /dev/null
+++ b/devtools/client/netmonitor/components/summary-button.js
@@ -0,0 +1,57 @@
+/* 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/. */
+
+/* globals NetMonitorView */
+
+"use strict";
+
+const {
+  CONTENT_SIZE_DECIMALS,
+  REQUEST_TIME_DECIMALS,
+} = require("../constants");
+const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
+const { connect } = require("devtools/client/shared/vendor/react-redux");
+const { PluralForm } = require("devtools/shared/plural-form");
+const { L10N } = require("../l10n");
+const { getSummary } = require("../selectors/index");
+
+const { button, span } = DOM;
+
+function SummaryButton({
+  summary,
+  triggerSummary,
+}) {
+  let { count, totalBytes, totalMillis } = summary;
+  const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
+    PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+    .replace("#1", count)
+    .replace("#2", L10N.numberWithDecimals(totalBytes / 1024,
+      CONTENT_SIZE_DECIMALS))
+    .replace("#3", L10N.numberWithDecimals(totalMillis / 1000,
+      REQUEST_TIME_DECIMALS));
+
+  return button({
+    id: "requests-menu-network-summary-button",
+    className: "devtools-button",
+    title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
+    onClick: triggerSummary,
+  },
+  span({ className: "summary-info-icon" }),
+  span({ className: "summary-info-text" }, text));
+}
+
+SummaryButton.propTypes = {
+  summary: PropTypes.object.isRequired,
+};
+
+module.exports = connect(
+  (state) => ({
+    summary: getSummary(state),
+  }),
+  (dispatch) => ({
+    triggerSummary: () => {
+      NetMonitorView.toggleFrontendMode();
+    },
+  })
+)(SummaryButton);
diff --git a/devtools/client/netmonitor/components/toggle-button.js b/devtools/client/netmonitor/components/toggle-button.js
index db546c55d..c9a59a76b 100644
--- a/devtools/client/netmonitor/components/toggle-button.js
+++ b/devtools/client/netmonitor/components/toggle-button.js
@@ -1,5 +1,3 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* 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/. */
@@ -11,47 +9,43 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { L10N } = require("../l10n");
 const Actions = require("../actions/index");
 
-// Shortcuts
 const { button } = DOM;
 
-/**
- * Button used to toggle sidebar
- */
 function ToggleButton({
   disabled,
-  onToggle,
-  visible,
+  open,
+  triggerSidebar,
 }) {
   let className = ["devtools-button"];
-  if (!visible) {
+  if (!open) {
     className.push("pane-collapsed");
   }
-  let titleMsg = visible ? L10N.getStr("collapseDetailsPane") :
-                           L10N.getStr("expandDetailsPane");
+
+  const title = open ? L10N.getStr("collapseDetailsPane") :
+                       L10N.getStr("expandDetailsPane");
 
   return button({
     id: "details-pane-toggle",
     className: className.join(" "),
-    title: titleMsg,
-    disabled: disabled,
+    title,
+    disabled,
     tabIndex: "0",
-    onMouseDown: onToggle,
+    onMouseDown: triggerSidebar,
   });
 }
 
 ToggleButton.propTypes = {
   disabled: PropTypes.bool.isRequired,
-  onToggle: PropTypes.func.isRequired,
-  visible: PropTypes.bool.isRequired,
+  triggerSidebar: PropTypes.func.isRequired,
 };
 
 module.exports = connect(
   (state) => ({
-    disabled: state.sidebar.toggleButtonDisabled,
-    visible: state.sidebar.visible,
+    disabled: state.requests.items.length === 0,
+    open: state.ui.sidebar.open,
   }),
   (dispatch) => ({
-    onToggle: () => {
+    triggerSidebar: () => {
       dispatch(Actions.toggleSidebar());
 
       let requestsMenu = NetMonitorView.RequestsMenu;