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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/* 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/. */
const { assert } = require("devtools/shared/DevToolsUtils");
const { DOM: dom, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
const {
L10N,
getSnapshotTitle,
getSnapshotTotals,
getStatusText,
snapshotIsDiffable,
getSavedCensus
} = require("../utils");
const {
snapshotState: states,
diffingState,
censusState,
treeMapState
} = require("../constants");
const { snapshot: snapshotModel } = require("../models");
const SnapshotListItem = module.exports = createClass({
displayName: "SnapshotListItem",
propTypes: {
onClick: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
item: snapshotModel.isRequired,
index: PropTypes.number.isRequired,
},
render() {
let { index, item: snapshot, onClick, onSave, onDelete, diffing } = this.props;
let className = `snapshot-list-item ${snapshot.selected ? " selected" : ""}`;
let statusText = getStatusText(snapshot.state);
let wantThrobber = !!statusText;
let title = getSnapshotTitle(snapshot);
const selectedForDiffing = diffing
&& (diffing.firstSnapshotId === snapshot.id
|| diffing.secondSnapshotId === snapshot.id);
let checkbox;
if (diffing && snapshotIsDiffable(snapshot)) {
if (diffing.state === diffingState.SELECTING) {
wantThrobber = false;
}
const checkboxAttrs = {
type: "checkbox",
checked: false,
};
if (selectedForDiffing) {
checkboxAttrs.checked = true;
checkboxAttrs.disabled = true;
className += " selected";
statusText = L10N.getStr(diffing.firstSnapshotId === snapshot.id
? "diffing.baseline"
: "diffing.comparison");
}
if (selectedForDiffing || diffing.state == diffingState.SELECTING) {
checkbox = dom.input(checkboxAttrs);
}
}
let details;
if (!selectedForDiffing) {
// See if a tree map or census is in the read state.
let census = getSavedCensus(snapshot);
// If there is census data, fill in the total bytes.
if (census) {
let { bytes } = getSnapshotTotals(census);
let formatBytes = L10N.getFormatStr("aggregate.mb", L10N.numberWithDecimals(bytes / 1000000, 2));
details = dom.span({ className: "snapshot-totals" },
dom.span({ className: "total-bytes" }, formatBytes)
);
}
}
if (!details) {
details = dom.span({ className: "snapshot-state" }, statusText);
}
let saveLink = !snapshot.path ? void 0 : dom.a({
onClick: () => onSave(snapshot),
className: "save",
}, L10N.getStr("snapshot.io.save"));
let deleteButton = !snapshot.path ? void 0 : dom.button({
onClick: () => onDelete(snapshot),
className: "devtools-button delete",
title: L10N.getStr("snapshot.io.delete")
});
return (
dom.li({ className, onClick },
dom.span({ className: `snapshot-title ${wantThrobber ? " devtools-throbber" : ""}` },
checkbox,
title,
deleteButton
),
dom.span({ className: "snapshot-info" },
details,
saveLink
)
)
);
}
});
|
