tor-browser

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

DisplayTabbingOrder.js (2235B)

      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 "use strict";
      5 
      6 // React
      7 const {
      8  PureComponent,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const {
     11  label,
     12  input,
     13 } = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     14 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     15 
     16 const {
     17  L10N,
     18 } = require("resource://devtools/client/accessibility/utils/l10n.js");
     19 
     20 const {
     21  connect,
     22 } = require("resource://devtools/client/shared/vendor/react-redux.js");
     23 const {
     24  updateDisplayTabbingOrder,
     25 } = require("resource://devtools/client/accessibility/actions/ui.js");
     26 
     27 class DisplayTabbingOrder extends PureComponent {
     28  static get propTypes() {
     29    return {
     30      dispatch: PropTypes.func.isRequired,
     31      tabbingOrderDisplayed: PropTypes.bool.isRequired,
     32    };
     33  }
     34 
     35  constructor(props) {
     36    super(props);
     37 
     38    this.state = {
     39      disabled: false,
     40    };
     41 
     42    this.onChange = this.onChange.bind(this);
     43  }
     44 
     45  async onChange() {
     46    const { dispatch, tabbingOrderDisplayed } = this.props;
     47 
     48    this.setState({ disabled: true });
     49    await dispatch(updateDisplayTabbingOrder(!tabbingOrderDisplayed));
     50    this.setState({ disabled: false });
     51  }
     52 
     53  render() {
     54    const { tabbingOrderDisplayed } = this.props;
     55    return label(
     56      {
     57        className:
     58          "accessibility-tabbing-order devtools-checkbox-label devtools-ellipsis-text",
     59        htmlFor: "devtools-display-tabbing-order-checkbox",
     60        title: L10N.getStr("accessibility.toolbar.displayTabbingOrder.tooltip"),
     61      },
     62      input({
     63        id: "devtools-display-tabbing-order-checkbox",
     64        className: "devtools-checkbox",
     65        type: "checkbox",
     66        checked: tabbingOrderDisplayed,
     67        disabled: this.state.disabled,
     68        onChange: this.onChange,
     69      }),
     70      L10N.getStr("accessibility.toolbar.displayTabbingOrder.label")
     71    );
     72  }
     73 }
     74 
     75 const mapStateToProps = ({ ui: { tabbingOrderDisplayed } }) => ({
     76  tabbingOrderDisplayed,
     77 });
     78 
     79 module.exports = connect(mapStateToProps)(DisplayTabbingOrder);