tor-browser

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

EditorToolbar.js (5040B)

      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 // React & Redux
      8 const {
      9  Component,
     10  createFactory,
     11 } = require("resource://devtools/client/shared/vendor/react.mjs");
     12 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     13 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     14 
     15 const EvaluationContextSelector = createFactory(
     16  require("resource://devtools/client/webconsole/components/Input/EvaluationContextSelector.js")
     17 );
     18 
     19 const actions = require("resource://devtools/client/webconsole/actions/index.js");
     20 const {
     21  l10n,
     22 } = require("resource://devtools/client/webconsole/utils/messages.js");
     23 const isMacOS = Services.appinfo.OS === "Darwin";
     24 
     25 // Constants used for defining the direction of JSTerm input history navigation.
     26 const {
     27  HISTORY_BACK,
     28  HISTORY_FORWARD,
     29 } = require("resource://devtools/client/webconsole/constants.js");
     30 
     31 class EditorToolbar extends Component {
     32  static get propTypes() {
     33    return {
     34      editorMode: PropTypes.bool,
     35      dispatch: PropTypes.func.isRequired,
     36      reverseSearchInputVisible: PropTypes.bool.isRequired,
     37      serviceContainer: PropTypes.object.isRequired,
     38      webConsoleUI: PropTypes.object.isRequired,
     39    };
     40  }
     41 
     42  constructor(props) {
     43    super(props);
     44 
     45    this.onReverseSearchButtonClick =
     46      this.onReverseSearchButtonClick.bind(this);
     47  }
     48 
     49  onReverseSearchButtonClick(event) {
     50    const { dispatch, serviceContainer } = this.props;
     51 
     52    event.stopPropagation();
     53    dispatch(
     54      actions.reverseSearchInputToggle({
     55        initialValue: serviceContainer.getInputSelection(),
     56        access: "editor-toolbar-icon",
     57      })
     58    );
     59  }
     60 
     61  renderEvaluationContextSelector() {
     62    return EvaluationContextSelector({
     63      webConsoleUI: this.props.webConsoleUI,
     64    });
     65  }
     66 
     67  render() {
     68    const { editorMode, dispatch, reverseSearchInputVisible, webConsoleUI } =
     69      this.props;
     70 
     71    if (!editorMode) {
     72      return null;
     73    }
     74 
     75    const enterStr = l10n.getStr("webconsole.enterKey");
     76 
     77    return dom.div(
     78      {
     79        className:
     80          "devtools-toolbar devtools-input-toolbar webconsole-editor-toolbar",
     81      },
     82      dom.button(
     83        {
     84          className: "devtools-button webconsole-editor-toolbar-executeButton",
     85          title: l10n.getFormatStr(
     86            "webconsole.editor.toolbar.executeButton.tooltip",
     87            [isMacOS ? `Cmd + ${enterStr}` : `Ctrl + ${enterStr}`]
     88          ),
     89          onClick: () => dispatch(actions.evaluateExpression()),
     90        },
     91        l10n.getStr("webconsole.editor.toolbar.executeButton.label")
     92      ),
     93      this.renderEvaluationContextSelector(),
     94      dom.button({
     95        className:
     96          "devtools-button webconsole-editor-toolbar-prettyPrintButton",
     97        title: l10n.getStr(
     98          "webconsole.editor.toolbar.prettyPrintButton.tooltip"
     99        ),
    100        onClick: () => dispatch(actions.prettyPrintEditor()),
    101      }),
    102      dom.div({
    103        className:
    104          "devtools-separator webconsole-editor-toolbar-prettyPrintSeparator",
    105      }),
    106      dom.button({
    107        className:
    108          "devtools-button webconsole-editor-toolbar-history-prevExpressionButton",
    109        title: l10n.getStr(
    110          "webconsole.editor.toolbar.history.prevExpressionButton.tooltip"
    111        ),
    112        onClick: () => {
    113          webConsoleUI.jsterm.historyPeruse(HISTORY_BACK);
    114        },
    115      }),
    116      dom.button({
    117        className:
    118          "devtools-button webconsole-editor-toolbar-history-nextExpressionButton",
    119        title: l10n.getStr(
    120          "webconsole.editor.toolbar.history.nextExpressionButton.tooltip"
    121        ),
    122        onClick: () => {
    123          webConsoleUI.jsterm.historyPeruse(HISTORY_FORWARD);
    124        },
    125      }),
    126      dom.button({
    127        className: `devtools-button webconsole-editor-toolbar-reverseSearchButton ${
    128          reverseSearchInputVisible ? "checked" : ""
    129        }`,
    130        title: reverseSearchInputVisible
    131          ? l10n.getFormatStr(
    132              "webconsole.editor.toolbar.reverseSearchButton.closeReverseSearch.tooltip",
    133              ["Esc" + (isMacOS ? " | Ctrl + C" : "")]
    134            )
    135          : l10n.getFormatStr(
    136              "webconsole.editor.toolbar.reverseSearchButton.openReverseSearch.tooltip",
    137              [isMacOS ? "Ctrl + R" : "F9"]
    138            ),
    139        onClick: this.onReverseSearchButtonClick,
    140      }),
    141      dom.div({
    142        className:
    143          "devtools-separator webconsole-editor-toolbar-historyNavSeparator",
    144      }),
    145      dom.button({
    146        className: "devtools-button webconsole-editor-toolbar-closeButton",
    147        title: l10n.getFormatStr(
    148          "webconsole.editor.toolbar.closeButton.tooltip2",
    149          [isMacOS ? "Cmd + B" : "Ctrl + B"]
    150        ),
    151        onClick: () => dispatch(actions.editorToggle()),
    152      })
    153    );
    154  }
    155 }
    156 
    157 module.exports = EditorToolbar;