1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
/* 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);
|
