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
115
116
117
118
119
120
121
122
|
/* 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/. */
// @ts-check
/**
* @typedef {Object} Props
* @property {string[]} dirs
* @property {() => void} onAdd
* @property {(index: number) => void} onRemove
*/
"use strict";
const {
PureComponent,
createFactory,
} = require("devtools/client/shared/vendor/react");
const {
div,
button,
select,
option,
} = require("devtools/client/shared/vendor/react-dom-factories");
const {
withCommonPathPrefixRemoved,
} = require("devtools/client/performance-new/utils");
const Localized = createFactory(
require("devtools/client/shared/vendor/fluent-react").Localized
);
/**
* A list of directories with add and remove buttons.
* Looks like this:
*
* +---------------------------------------------+
* | code/obj-m-android-opt |
* | code/obj-m-android-debug |
* | test/obj-m-test |
* | |
* +---------------------------------------------+
*
* [+] [-]
*
* @extends {React.PureComponent<Props>}
*/
class DirectoryPicker extends PureComponent {
/** @param {Props} props */
constructor(props) {
super(props);
this._listBox = null;
this._takeListBoxRef = this._takeListBoxRef.bind(this);
this._handleAddButtonClick = this._handleAddButtonClick.bind(this);
this._handleRemoveButtonClick = this._handleRemoveButtonClick.bind(this);
}
/**
* @param {HTMLSelectElement} element
*/
_takeListBoxRef(element) {
this._listBox = element;
}
_handleAddButtonClick() {
this.props.onAdd();
}
_handleRemoveButtonClick() {
if (this._listBox && this._listBox.selectedIndex !== -1) {
this.props.onRemove(this._listBox.selectedIndex);
}
}
render() {
const { dirs } = this.props;
const truncatedDirs = withCommonPathPrefixRemoved(dirs);
return [
select(
{
className: "perf-settings-dir-list",
size: 4,
ref: this._takeListBoxRef,
key: "directory-picker-select",
},
dirs.map((fullPath, i) =>
option(
{
key: fullPath,
className: "pref-settings-dir-list-item",
title: fullPath,
},
truncatedDirs[i]
)
)
),
div(
{
className: "perf-settings-dir-list-button-group",
key: "directory-picker-div",
},
button(
{
type: "button",
className: `perf-photon-button perf-photon-button-default perf-button`,
onClick: this._handleAddButtonClick,
},
Localized({ id: "perftools-button-add-directory" })
),
button(
{
type: "button",
className: `perf-photon-button perf-photon-button-default perf-button`,
onClick: this._handleRemoveButtonClick,
},
Localized({ id: "perftools-button-remove-directory" })
)
),
];
}
}
module.exports = DirectoryPicker;
|
