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
|
/* 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("resource://devtools/client/shared/vendor/react.js");
const {
div,
button,
select,
option,
} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const {
withCommonPathPrefixRemoved,
} = require("resource://devtools/client/performance-new/shared/utils.js");
const Localized = createFactory(
require("resource://devtools/client/shared/vendor/fluent-react.js").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;
}
/**
* @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;
|
