Source code
Revision control
Copy as Markdown
Other Tools
/* 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
// @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;