summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/components/summary-button.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/netmonitor/components/summary-button.js')
-rw-r--r--devtools/client/netmonitor/components/summary-button.js57
1 files changed, 57 insertions, 0 deletions
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);