tor-browser

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

Toolbar.js (4426B)

      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 PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     15 const Actions = require("resource://devtools/client/netmonitor/src/actions/index.js");
     16 const {
     17  CHANNEL_TYPE,
     18  FILTER_SEARCH_DELAY,
     19 } = require("resource://devtools/client/netmonitor/src/constants.js");
     20 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     21 const {
     22  L10N,
     23 } = require("resource://devtools/client/netmonitor/src/utils/l10n.js");
     24 const { button, span, div } = dom;
     25 
     26 // Components
     27 const MessageFilterMenu = createFactory(
     28  require("resource://devtools/client/netmonitor/src/components/messages/MessageFilterMenu.js")
     29 );
     30 const SearchBox = createFactory(
     31  require("resource://devtools/client/shared/components/SearchBox.js")
     32 );
     33 
     34 // Localization
     35 const MSG_TOOLBAR_CLEAR = L10N.getStr("netmonitor.ws.toolbar.clear");
     36 const MSG_SEARCH_KEY_SHORTCUT = L10N.getStr(
     37  "netmonitor.ws.toolbar.filterFreetext.key"
     38 );
     39 const MSG_SEARCH_PLACE_HOLDER = L10N.getStr(
     40  "netmonitor.ws.toolbar.filterFreetext.label"
     41 );
     42 
     43 /**
     44 * MessagesPanel toolbar component.
     45 *
     46 * Toolbar contains a set of useful tools that clear the list of
     47 * existing messages as well as filter content.
     48 */
     49 class Toolbar extends Component {
     50  static get propTypes() {
     51    return {
     52      searchboxRef: PropTypes.object.isRequired,
     53      toggleMessageFilterType: PropTypes.func.isRequired,
     54      toggleControlFrames: PropTypes.func.isRequired,
     55      clearMessages: PropTypes.func.isRequired,
     56      setMessageFilterText: PropTypes.func.isRequired,
     57      messageFilterType: PropTypes.string.isRequired,
     58      showControlFrames: PropTypes.bool.isRequired,
     59      channelType: PropTypes.string,
     60    };
     61  }
     62 
     63  componentWillUnmount() {
     64    const { setMessageFilterText } = this.props;
     65    setMessageFilterText("");
     66  }
     67 
     68  /**
     69   * Render a separator.
     70   */
     71  renderSeparator() {
     72    return span({ className: "devtools-separator" });
     73  }
     74 
     75  /**
     76   * Render a clear button.
     77   */
     78  renderClearButton(clearMessages) {
     79    return button({
     80      className:
     81        "devtools-button devtools-clear-icon message-list-clear-button",
     82      title: MSG_TOOLBAR_CLEAR,
     83      onClick: () => {
     84        clearMessages();
     85      },
     86    });
     87  }
     88 
     89  /**
     90   * Render the message filter menu button.
     91   */
     92  renderMessageFilterMenu() {
     93    const {
     94      messageFilterType,
     95      toggleMessageFilterType,
     96      showControlFrames,
     97      toggleControlFrames,
     98    } = this.props;
     99 
    100    return MessageFilterMenu({
    101      messageFilterType,
    102      toggleMessageFilterType,
    103      showControlFrames,
    104      toggleControlFrames,
    105    });
    106  }
    107 
    108  /**
    109   * Render filter Searchbox.
    110   */
    111  renderFilterBox(setMessageFilterText) {
    112    return SearchBox({
    113      delay: FILTER_SEARCH_DELAY,
    114      keyShortcut: MSG_SEARCH_KEY_SHORTCUT,
    115      placeholder: MSG_SEARCH_PLACE_HOLDER,
    116      type: "filter",
    117      ref: this.props.searchboxRef,
    118      onChange: setMessageFilterText,
    119    });
    120  }
    121 
    122  render() {
    123    const { clearMessages, setMessageFilterText, channelType } = this.props;
    124    const isWs = channelType === CHANNEL_TYPE.WEB_SOCKET;
    125    return div(
    126      {
    127        id: "netmonitor-toolbar-container",
    128        className: "devtools-toolbar devtools-input-toolbar",
    129      },
    130      this.renderClearButton(clearMessages),
    131      isWs ? this.renderSeparator() : null,
    132      isWs ? this.renderMessageFilterMenu() : null,
    133      this.renderSeparator(),
    134      this.renderFilterBox(setMessageFilterText)
    135    );
    136  }
    137 }
    138 
    139 module.exports = connect(
    140  state => ({
    141    messageFilterType: state.messages.messageFilterType,
    142    showControlFrames: state.messages.showControlFrames,
    143    channelType: state.messages.currentChannelType,
    144  }),
    145  dispatch => ({
    146    clearMessages: () => dispatch(Actions.clearMessages()),
    147    toggleMessageFilterType: filter =>
    148      dispatch(Actions.toggleMessageFilterType(filter)),
    149    toggleControlFrames: () => dispatch(Actions.toggleControlFrames()),
    150    setMessageFilterText: text => dispatch(Actions.setMessageFilterText(text)),
    151  })
    152 )(Toolbar);