From 627f167bf41935cad572b04c5b412f9294293ecb Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 28 Feb 2018 12:17:13 +0100 Subject: 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 --- .../client/netmonitor/components/summary-button.js | 57 ++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 devtools/client/netmonitor/components/summary-button.js (limited to 'devtools/client/netmonitor/components/summary-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); -- cgit v1.2.3