tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

DirectoryPicker.js (3095B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 // @ts-check
      5 
      6 /**
      7 * @typedef {object} Props
      8 * @property {string[]} dirs
      9 * @property {() => void} onAdd
     10 * @property {(index: number) => void} onRemove
     11 */
     12 
     13 "use strict";
     14 
     15 const {
     16  PureComponent,
     17  createFactory,
     18 } = require("resource://devtools/client/shared/vendor/react.mjs");
     19 const {
     20  div,
     21  button,
     22  select,
     23  option,
     24 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     25 const {
     26  withCommonPathPrefixRemoved,
     27 } = require("resource://devtools/client/performance-new/shared/utils.js");
     28 const Localized = createFactory(
     29  require("resource://devtools/client/shared/vendor/fluent-react.js").Localized
     30 );
     31 
     32 /**
     33 * A list of directories with add and remove buttons.
     34 * Looks like this:
     35 *
     36 * +---------------------------------------------+
     37 * | code/obj-m-android-opt                      |
     38 * | code/obj-m-android-debug                    |
     39 * | test/obj-m-test                             |
     40 * |                                             |
     41 * +---------------------------------------------+
     42 *
     43 *  [+] [-]
     44 *
     45 * @augments {React.PureComponent<Props>}
     46 */
     47 class DirectoryPicker extends PureComponent {
     48  /** @param {Props} props */
     49  constructor(props) {
     50    super(props);
     51    this._listBox = null;
     52  }
     53 
     54  /**
     55   * @param {HTMLSelectElement} element
     56   */
     57  _takeListBoxRef = element => {
     58    this._listBox = element;
     59  };
     60 
     61  _handleAddButtonClick = () => {
     62    this.props.onAdd();
     63  };
     64 
     65  _handleRemoveButtonClick = () => {
     66    if (this._listBox && this._listBox.selectedIndex !== -1) {
     67      this.props.onRemove(this._listBox.selectedIndex);
     68    }
     69  };
     70 
     71  render() {
     72    const { dirs } = this.props;
     73    const truncatedDirs = withCommonPathPrefixRemoved(dirs);
     74    return [
     75      select(
     76        {
     77          className: "perf-settings-dir-list",
     78          size: 4,
     79          ref: this._takeListBoxRef,
     80          key: "directory-picker-select",
     81        },
     82        dirs.map((fullPath, i) =>
     83          option(
     84            {
     85              key: fullPath,
     86              className: "pref-settings-dir-list-item",
     87              title: fullPath,
     88            },
     89            truncatedDirs[i]
     90          )
     91        )
     92      ),
     93      div(
     94        {
     95          className: "perf-settings-dir-list-button-group",
     96          key: "directory-picker-div",
     97        },
     98        button(
     99          {
    100            type: "button",
    101            className: `perf-photon-button perf-photon-button-default perf-button`,
    102            onClick: this._handleAddButtonClick,
    103          },
    104          Localized({ id: "perftools-button-add-directory" })
    105        ),
    106        button(
    107          {
    108            type: "button",
    109            className: `perf-photon-button perf-photon-button-default perf-button`,
    110            onClick: this._handleRemoveButtonClick,
    111          },
    112          Localized({ id: "perftools-button-remove-directory" })
    113        )
    114      ),
    115    ];
    116  }
    117 }
    118 
    119 module.exports = DirectoryPicker;