tor-browser

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

BoxModelInfo.js (2500B)

      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 { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
     13 
     14 const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
     15 
     16 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
     17 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
     18 
     19 const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
     20 const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
     21 
     22 class BoxModelInfo extends PureComponent {
     23  static get propTypes() {
     24    return {
     25      boxModel: PropTypes.shape(Types.boxModel).isRequired,
     26      onToggleGeometryEditor: PropTypes.func.isRequired,
     27    };
     28  }
     29 
     30  constructor(props) {
     31    super(props);
     32    this.onToggleGeometryEditor = this.onToggleGeometryEditor.bind(this);
     33  }
     34 
     35  onToggleGeometryEditor() {
     36    this.props.onToggleGeometryEditor();
     37  }
     38 
     39  render() {
     40    const { boxModel } = this.props;
     41    const { geometryEditorEnabled, layout } = boxModel;
     42    const { height = "-", isPositionEditable, position, width = "-" } = layout;
     43 
     44    let buttonClass = "layout-geometry-editor devtools-button";
     45    if (geometryEditorEnabled) {
     46      buttonClass += " checked";
     47    }
     48 
     49    return dom.div(
     50      {
     51        className: "boxmodel-info",
     52        role: "region",
     53        "aria-label": SHARED_L10N.getFormatStr(
     54          "boxModelInfo.accessibleLabel",
     55          width,
     56          height,
     57          position
     58        ),
     59      },
     60      dom.span(
     61        { className: "boxmodel-element-size" },
     62        SHARED_L10N.getFormatStr("dimensions", width, height)
     63      ),
     64      dom.section(
     65        { className: "boxmodel-position-group" },
     66        isPositionEditable
     67          ? dom.button({
     68              className: buttonClass,
     69              title: BOXMODEL_L10N.getStr("boxmodel.geometryButton.tooltip"),
     70              onClick: this.onToggleGeometryEditor,
     71            })
     72          : null,
     73        dom.span({ className: "boxmodel-element-position" }, position)
     74      )
     75    );
     76  }
     77 }
     78 
     79 module.exports = BoxModelInfo;