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

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);