tor-browser

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

BoxModelProperties.js (4427B)

      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  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
     14 
     15 const ComputedProperty = createFactory(
     16  require("resource://devtools/client/inspector/boxmodel/components/ComputedProperty.js")
     17 );
     18 
     19 const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
     20 
     21 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
     22 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
     23 
     24 class BoxModelProperties extends PureComponent {
     25  static get propTypes() {
     26    return {
     27      boxModel: PropTypes.shape(Types.boxModel).isRequired,
     28      dispatch: PropTypes.func.isRequired,
     29      setSelectedNode: PropTypes.func.isRequired,
     30    };
     31  }
     32 
     33  constructor(props) {
     34    super(props);
     35 
     36    this.state = {
     37      isOpen: true,
     38    };
     39 
     40    this.getReferenceElement = this.getReferenceElement.bind(this);
     41    this.onToggleExpander = this.onToggleExpander.bind(this);
     42  }
     43 
     44  /**
     45   * Various properties can display a reference element. E.g. position displays an offset
     46   * parent if its value is other than fixed or static. Or z-index displays a stacking
     47   * context, etc.
     48   * This returns the right element if there needs to be one, and one was passed in the
     49   * props.
     50   *
     51   * @return {object} An object with 2 properties:
     52   * - referenceElement {NodeFront}
     53   * - referenceElementType {String}
     54   */
     55  getReferenceElement(propertyName) {
     56    const value = this.props.boxModel.layout[propertyName];
     57 
     58    if (
     59      propertyName === "position" &&
     60      this.props.boxModel.offsetParent &&
     61      value !== "static" &&
     62      // A fixed position element's offsetParent is the <body> element if its
     63      // containing block is the viewport. We only show the offsetParent for
     64      // fixed position elements if the offsetParent is not the viewport. This
     65      // can occur if the element has an ancestor that creates a fixed position
     66      // containing block, for instance with a `transform` declaration.
     67      (value !== "fixed" || this.props.boxModel.offsetParent.tagName !== "BODY")
     68    ) {
     69      return {
     70        referenceElement: this.props.boxModel.offsetParent,
     71        referenceElementType: BOXMODEL_L10N.getStr("boxmodel.offsetParent"),
     72      };
     73    }
     74 
     75    return {};
     76  }
     77 
     78  onToggleExpander(event) {
     79    this.setState({
     80      isOpen: !this.state.isOpen,
     81    });
     82    event.stopPropagation();
     83  }
     84 
     85  render() {
     86    const { boxModel, dispatch, setSelectedNode } = this.props;
     87    const { layout } = boxModel;
     88 
     89    const layoutInfo = [
     90      "box-sizing",
     91      "display",
     92      "float",
     93      "line-height",
     94      "position",
     95      "z-index",
     96    ];
     97 
     98    const properties = layoutInfo.map(info => {
     99      const { referenceElement, referenceElementType } =
    100        this.getReferenceElement(info);
    101 
    102      return ComputedProperty({
    103        dispatch,
    104        key: info,
    105        name: info,
    106        referenceElement,
    107        referenceElementType,
    108        setSelectedNode,
    109        value: layout[info],
    110      });
    111    });
    112 
    113    return dom.div(
    114      { className: "layout-properties" },
    115      dom.div(
    116        {
    117          className: "layout-properties-header",
    118          role: "heading",
    119          "aria-level": "3",
    120          onDoubleClick: this.onToggleExpander,
    121        },
    122        dom.span({
    123          className: "layout-properties-expander theme-twisty",
    124          open: this.state.isOpen,
    125          role: "button",
    126          "aria-label": BOXMODEL_L10N.getStr(
    127            this.state.isOpen
    128              ? "boxmodel.propertiesHideLabel"
    129              : "boxmodel.propertiesShowLabel"
    130          ),
    131          onClick: this.onToggleExpander,
    132        }),
    133        BOXMODEL_L10N.getStr("boxmodel.propertiesLabel")
    134      ),
    135      dom.div(
    136        {
    137          className: "layout-properties-wrapper devtools-monospace",
    138          hidden: !this.state.isOpen,
    139          role: "table",
    140        },
    141        properties
    142      )
    143    );
    144  }
    145 }
    146 
    147 module.exports = BoxModelProperties;