80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
/* 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 {
|
|
getDisplayedRequestsSummary,
|
|
getDisplayedTimingMarker
|
|
} = require("../selectors/index");
|
|
|
|
const { button, span } = DOM;
|
|
|
|
function SummaryButton({
|
|
summary,
|
|
triggerSummary,
|
|
timingMarkers
|
|
}) {
|
|
let { count, contentSize, transferredSize, millis } = summary;
|
|
let {
|
|
DOMContentLoaded,
|
|
load,
|
|
} = timingMarkers;
|
|
const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
|
|
PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
|
|
.replace("#1", count)
|
|
.replace("#2", L10N.numberWithDecimals(contentSize / 1024,
|
|
CONTENT_SIZE_DECIMALS))
|
|
.replace("#3", L10N.numberWithDecimals(transferredSize / 1024,
|
|
CONTENT_SIZE_DECIMALS))
|
|
.replace("#4", L10N.numberWithDecimals(millis / 1000,
|
|
REQUEST_TIME_DECIMALS))
|
|
+ ((DOMContentLoaded > -1)
|
|
? ", " + "DOMContentLoaded: " + L10N.getFormatStrWithNumbers("networkMenu.timeS", L10N.numberWithDecimals(DOMContentLoaded / 1000, REQUEST_TIME_DECIMALS))
|
|
: "")
|
|
+ ((load > -1)
|
|
? ", " + "load: " + L10N.getFormatStrWithNumbers("networkMenu.timeS", L10N.numberWithDecimals(load / 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,
|
|
timingMarkers: PropTypes.object.isRequired,
|
|
};
|
|
|
|
module.exports = connect(
|
|
(state) => ({
|
|
summary: getDisplayedRequestsSummary(state),
|
|
timingMarkers: {
|
|
DOMContentLoaded:
|
|
getDisplayedTimingMarker(state, "firstDocumentDOMContentLoadedTimestamp"),
|
|
load: getDisplayedTimingMarker(state, "firstDocumentLoadTimestamp"),
|
|
},
|
|
}),
|
|
(dispatch) => ({
|
|
triggerSummary: () => {
|
|
NetMonitorView.toggleFrontendMode();
|
|
},
|
|
})
|
|
)(SummaryButton);
|