summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor/src/components/StatusBar.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/netmonitor/src/components/StatusBar.js')
-rw-r--r--devtools/client/netmonitor/src/components/StatusBar.js175
1 files changed, 175 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/StatusBar.js b/devtools/client/netmonitor/src/components/StatusBar.js
new file mode 100644
index 0000000000..3a6c73e0db
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/StatusBar.js
@@ -0,0 +1,175 @@
+/* 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("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+ connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const { PluralForm } = require("resource://devtools/shared/plural-form.js");
+const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
+const {
+ getDisplayedRequestsSummary,
+ getDisplayedTimingMarker,
+} = require("resource://devtools/client/netmonitor/src/selectors/index.js");
+const {
+ getFormattedSize,
+ getFormattedTime,
+} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js");
+const {
+ L10N,
+} = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
+const {
+ propertiesEqual,
+} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js");
+
+const { button, div } = dom;
+
+const REQUESTS_COUNT_EMPTY = L10N.getStr(
+ "networkMenu.summary.requestsCountEmpty"
+);
+const TOOLTIP_PERF = L10N.getStr("networkMenu.summary.tooltip.perf");
+const TOOLTIP_REQUESTS_COUNT = L10N.getStr(
+ "networkMenu.summary.tooltip.requestsCount"
+);
+const TOOLTIP_TRANSFERRED = L10N.getStr(
+ "networkMenu.summary.tooltip.transferred"
+);
+const TOOLTIP_FINISH = L10N.getStr("networkMenu.summary.tooltip.finish");
+const TOOLTIP_DOM_CONTENT_LOADED = L10N.getStr(
+ "networkMenu.summary.tooltip.domContentLoaded"
+);
+const TOOLTIP_LOAD = L10N.getStr("networkMenu.summary.tooltip.load");
+
+const UPDATED_SUMMARY_PROPS = ["count", "contentSize", "transferredSize", "ms"];
+
+const UPDATED_TIMING_PROPS = ["DOMContentLoaded", "load"];
+
+/**
+ * Status Bar component
+ * Displays the summary of total size and transferred size by all requests
+ * Also displays different timing markers
+ */
+class StatusBar extends Component {
+ static get propTypes() {
+ return {
+ connector: PropTypes.object.isRequired,
+ openStatistics: PropTypes.func.isRequired,
+ summary: PropTypes.object.isRequired,
+ timingMarkers: PropTypes.object.isRequired,
+ };
+ }
+
+ shouldComponentUpdate(nextProps) {
+ const { summary, timingMarkers } = this.props;
+ return (
+ !propertiesEqual(UPDATED_SUMMARY_PROPS, summary, nextProps.summary) ||
+ !propertiesEqual(
+ UPDATED_TIMING_PROPS,
+ timingMarkers,
+ nextProps.timingMarkers
+ )
+ );
+ }
+
+ render() {
+ const { openStatistics, summary, timingMarkers, connector } = this.props;
+ const { count, contentSize, transferredSize, ms } = summary;
+ const { DOMContentLoaded, load } = timingMarkers;
+
+ const toolbox = connector.getToolbox();
+ const countText =
+ count === 0
+ ? REQUESTS_COUNT_EMPTY
+ : PluralForm.get(
+ count,
+ L10N.getStr("networkMenu.summary.requestsCount2")
+ ).replace("#1", count);
+ const transferText = L10N.getFormatStrWithNumbers(
+ "networkMenu.summary.transferred",
+ getFormattedSize(contentSize),
+ getFormattedSize(transferredSize)
+ );
+ const finishText = L10N.getFormatStrWithNumbers(
+ "networkMenu.summary.finish",
+ getFormattedTime(ms)
+ );
+
+ return div(
+ { className: "devtools-toolbar devtools-toolbar-bottom" },
+ !toolbox.isBrowserToolbox
+ ? button(
+ {
+ className: "devtools-button requests-list-network-summary-button",
+ title: TOOLTIP_PERF,
+ onClick: openStatistics,
+ },
+ div({ className: "summary-info-icon" })
+ )
+ : null,
+ div(
+ {
+ className: "status-bar-label requests-list-network-summary-count",
+ title: TOOLTIP_REQUESTS_COUNT,
+ },
+ countText
+ ),
+ count !== 0 &&
+ div(
+ {
+ className:
+ "status-bar-label requests-list-network-summary-transfer",
+ title: TOOLTIP_TRANSFERRED,
+ },
+ transferText
+ ),
+ count !== 0 &&
+ div(
+ {
+ className: "status-bar-label requests-list-network-summary-finish",
+ title: TOOLTIP_FINISH,
+ },
+ finishText
+ ),
+ DOMContentLoaded > -1 &&
+ div(
+ {
+ className: "status-bar-label dom-content-loaded",
+ title: TOOLTIP_DOM_CONTENT_LOADED,
+ },
+ `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`
+ ),
+ load > -1 &&
+ div(
+ {
+ className: "status-bar-label load",
+ title: TOOLTIP_LOAD,
+ },
+ `load: ${getFormattedTime(load)}`
+ )
+ );
+ }
+}
+
+module.exports = connect(
+ state => ({
+ summary: getDisplayedRequestsSummary(state),
+ timingMarkers: {
+ DOMContentLoaded: getDisplayedTimingMarker(
+ state,
+ "firstDocumentDOMContentLoadedTimestamp"
+ ),
+ load: getDisplayedTimingMarker(state, "firstDocumentLoadTimestamp"),
+ },
+ }),
+ (dispatch, props) => ({
+ openStatistics: () =>
+ dispatch(Actions.openStatistics(props.connector, true)),
+ })
+)(StatusBar);