tor-browser

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

Toolbar.js (4687B)

      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 
      5 "use strict";
      6 
      7 const {
      8  Component,
      9  createFactory,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const {
     12  connect,
     13 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     14 const {
     15  FILTER_SEARCH_DELAY,
     16 } = require("resource://devtools/client/netmonitor/src/constants.js");
     17 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     18 const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
     19 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     20 const {
     21  L10N,
     22 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     23 const { button, span, div } = dom;
     24 
     25 // Components
     26 const SearchBox = createFactory(
     27  require("resource://devtools/client/shared/components/SearchBox.js")
     28 );
     29 
     30 /**
     31 * Network Search toolbar component.
     32 *
     33 * Provides tools for greater control over search.
     34 */
     35 class Toolbar extends Component {
     36  static get propTypes() {
     37    return {
     38      searchboxRef: PropTypes.object.isRequired,
     39      clearSearchResults: PropTypes.func.isRequired,
     40      search: PropTypes.func.isRequired,
     41      closeSearch: PropTypes.func.isRequired,
     42      addSearchQuery: PropTypes.func.isRequired,
     43      clearSearchResultAndCancel: PropTypes.func.isRequired,
     44      caseSensitive: PropTypes.bool.isRequired,
     45      toggleCaseSensitiveSearch: PropTypes.func.isRequired,
     46      connector: PropTypes.object.isRequired,
     47      query: PropTypes.string,
     48    };
     49  }
     50 
     51  /**
     52   * Render a separator.
     53   */
     54  renderSeparator() {
     55    return span({ className: "devtools-separator" });
     56  }
     57 
     58  /**
     59   * Handles what we do when key is pressed in search input.
     60   *
     61   * @param event
     62   * @param conn
     63   */
     64  onKeyDown(event, connector) {
     65    switch (event.key) {
     66      case "Escape":
     67        event.preventDefault();
     68        this.props.closeSearch();
     69        break;
     70      case "Enter":
     71        event.preventDefault();
     72        this.props.addSearchQuery(event.target.value);
     73        this.props.search(connector, event.target.value);
     74        break;
     75    }
     76  }
     77 
     78  renderModifiers() {
     79    return div(
     80      { className: "search-modifiers" },
     81      span({ className: "pipe-divider" }),
     82      this.renderCaseSensitiveButton()
     83    );
     84  }
     85 
     86  /**
     87   * Render a clear button to clear search results.
     88   */
     89  renderClearButton() {
     90    return button({
     91      className:
     92        "devtools-button devtools-clear-icon ws-frames-list-clear-button",
     93      title: L10N.getStr("netmonitor.search.toolbar.clear"),
     94      onClick: () => {
     95        this.props.clearSearchResults();
     96      },
     97    });
     98  }
     99 
    100  /**
    101   * Render the case sensitive search modifier button
    102   */
    103  renderCaseSensitiveButton() {
    104    const { caseSensitive, toggleCaseSensitiveSearch } = this.props;
    105    const active = caseSensitive ? "checked" : "";
    106 
    107    return button({
    108      id: "devtools-network-search-caseSensitive",
    109      className: `devtools-button ${active}`,
    110      title: L10N.getStr("netmonitor.search.toolbar.caseSensitive"),
    111      onClick: toggleCaseSensitiveSearch,
    112    });
    113  }
    114 
    115  /**
    116   * Render Search box.
    117   */
    118  renderFilterBox() {
    119    const { addSearchQuery, clearSearchResultAndCancel, connector, query } =
    120      this.props;
    121    return SearchBox({
    122      keyShortcut: "CmdOrCtrl+Shift+F",
    123      placeholder: L10N.getStr("netmonitor.search.toolbar.inputPlaceholder"),
    124      type: "search",
    125      delay: FILTER_SEARCH_DELAY,
    126      ref: this.props.searchboxRef,
    127      initialValue: query,
    128      onClearButtonClick: () => clearSearchResultAndCancel(),
    129      onChange: newQuery => addSearchQuery(newQuery),
    130      onKeyDown: event => this.onKeyDown(event, connector),
    131    });
    132  }
    133 
    134  render() {
    135    return div(
    136      {
    137        id: "netmonitor-toolbar-container",
    138        className: "devtools-toolbar devtools-input-toolbar",
    139      },
    140      this.renderFilterBox(),
    141      this.renderModifiers()
    142    );
    143  }
    144 }
    145 
    146 module.exports = connect(
    147  state => ({
    148    caseSensitive: state.search.caseSensitive,
    149    query: state.search.query,
    150  }),
    151  dispatch => ({
    152    closeSearch: () => dispatch(Actions.closeSearch()),
    153    openSearch: () => dispatch(Actions.openSearch()),
    154    clearSearchResultAndCancel: () =>
    155      dispatch(Actions.clearSearchResultAndCancel()),
    156    toggleCaseSensitiveSearch: () =>
    157      dispatch(Actions.toggleCaseSensitiveSearch()),
    158    search: (connector, query) => dispatch(Actions.search(connector, query)),
    159    addSearchQuery: query => dispatch(Actions.addSearchQuery(query)),
    160  })
    161 )(Toolbar);