tor-browser

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

GridDisplaySettings.js (3571B)

      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  PureComponent,
      9 } = require("resource://devtools/client/shared/vendor/react.mjs");
     10 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     11 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     12 const {
     13  getStr,
     14 } = require("resource://devtools/client/inspector/layout/utils/l10n.js");
     15 
     16 const Types = require("resource://devtools/client/inspector/grids/types.js");
     17 
     18 class GridDisplaySettings extends PureComponent {
     19  static get propTypes() {
     20    return {
     21      highlighterSettings: PropTypes.shape(Types.highlighterSettings)
     22        .isRequired,
     23      onToggleShowGridAreas: PropTypes.func.isRequired,
     24      onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     25      onToggleShowInfiniteLines: PropTypes.func.isRequired,
     26    };
     27  }
     28 
     29  constructor(props) {
     30    super(props);
     31 
     32    this.onShowGridAreasCheckboxClick =
     33      this.onShowGridAreasCheckboxClick.bind(this);
     34    this.onShowGridLineNumbersCheckboxClick =
     35      this.onShowGridLineNumbersCheckboxClick.bind(this);
     36    this.onShowInfiniteLinesCheckboxClick =
     37      this.onShowInfiniteLinesCheckboxClick.bind(this);
     38  }
     39 
     40  onShowGridAreasCheckboxClick() {
     41    const { highlighterSettings, onToggleShowGridAreas } = this.props;
     42 
     43    onToggleShowGridAreas(!highlighterSettings.showGridAreasOverlay);
     44  }
     45 
     46  onShowGridLineNumbersCheckboxClick() {
     47    const { highlighterSettings, onToggleShowGridLineNumbers } = this.props;
     48 
     49    onToggleShowGridLineNumbers(!highlighterSettings.showGridLineNumbers);
     50  }
     51 
     52  onShowInfiniteLinesCheckboxClick() {
     53    const { highlighterSettings, onToggleShowInfiniteLines } = this.props;
     54 
     55    onToggleShowInfiniteLines(!highlighterSettings.showInfiniteLines);
     56  }
     57 
     58  render() {
     59    const { highlighterSettings } = this.props;
     60 
     61    return dom.div(
     62      { className: "grid-container" },
     63      dom.span(
     64        {
     65          role: "heading",
     66          "aria-level": "3",
     67        },
     68        getStr("layout.gridDisplaySettings")
     69      ),
     70      dom.ul(
     71        {},
     72        dom.li(
     73          { className: "grid-settings-item" },
     74          dom.label(
     75            {},
     76            dom.input({
     77              id: "grid-setting-show-grid-line-numbers",
     78              type: "checkbox",
     79              checked: highlighterSettings.showGridLineNumbers,
     80              onChange: this.onShowGridLineNumbersCheckboxClick,
     81            }),
     82            getStr("layout.displayLineNumbers")
     83          )
     84        ),
     85        dom.li(
     86          { className: "grid-settings-item" },
     87          dom.label(
     88            {},
     89            dom.input({
     90              id: "grid-setting-show-grid-areas",
     91              type: "checkbox",
     92              checked: highlighterSettings.showGridAreasOverlay,
     93              onChange: this.onShowGridAreasCheckboxClick,
     94            }),
     95            getStr("layout.displayAreaNames")
     96          )
     97        ),
     98        dom.li(
     99          { className: "grid-settings-item" },
    100          dom.label(
    101            {},
    102            dom.input({
    103              id: "grid-setting-extend-grid-lines",
    104              type: "checkbox",
    105              checked: highlighterSettings.showInfiniteLines,
    106              onChange: this.onShowInfiniteLinesCheckboxClick,
    107            }),
    108            getStr("layout.extendLinesInfinitely")
    109          )
    110        )
    111      )
    112    );
    113  }
    114 }
    115 
    116 module.exports = GridDisplaySettings;