tor-browser

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

ComputedProperty.js (3250B)

      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 loader.lazyRequireGetter(
     15  this,
     16  "getNodeRep",
     17  "resource://devtools/client/inspector/shared/node-reps.js"
     18 );
     19 
     20 const {
     21  highlightNode,
     22  unhighlightNode,
     23 } = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
     24 
     25 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
     26 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
     27 
     28 class ComputedProperty extends PureComponent {
     29  static get propTypes() {
     30    return {
     31      dispatch: PropTypes.func.isRequired,
     32      name: PropTypes.string.isRequired,
     33      referenceElement: PropTypes.object,
     34      referenceElementType: PropTypes.string,
     35      setSelectedNode: PropTypes.func,
     36      value: PropTypes.string,
     37    };
     38  }
     39 
     40  constructor(props) {
     41    super(props);
     42 
     43    this.renderReferenceElementPreview =
     44      this.renderReferenceElementPreview.bind(this);
     45  }
     46 
     47  renderReferenceElementPreview() {
     48    const {
     49      dispatch,
     50      referenceElement,
     51      referenceElementType,
     52      setSelectedNode,
     53    } = this.props;
     54 
     55    if (!referenceElement) {
     56      return null;
     57    }
     58 
     59    return dom.div(
     60      { className: "reference-element" },
     61      dom.span(
     62        {
     63          className: "reference-element-type",
     64          role: "button",
     65          title: BOXMODEL_L10N.getStr("boxmodel.offsetParent.title"),
     66        },
     67        referenceElementType
     68      ),
     69      getNodeRep(referenceElement, {
     70        onInspectIconClick: () =>
     71          setSelectedNode(referenceElement, { reason: "box-model" }),
     72        onDOMNodeMouseOver: () => dispatch(highlightNode(referenceElement)),
     73        onDOMNodeMouseOut: () => dispatch(unhighlightNode()),
     74      })
     75    );
     76  }
     77 
     78  render() {
     79    const { name, value } = this.props;
     80 
     81    return dom.div(
     82      {
     83        className: "computed-property-view",
     84        role: "row",
     85        "data-property-name": name,
     86        ref: container => {
     87          this.container = container;
     88        },
     89      },
     90      dom.div(
     91        {
     92          className: "computed-property-name-container",
     93          role: "presentation",
     94        },
     95        dom.div(
     96          {
     97            className: "computed-property-name theme-fg-color3",
     98            role: "cell",
     99            title: name,
    100          },
    101          name
    102        )
    103      ),
    104      dom.div(
    105        {
    106          className: "computed-property-value-container",
    107          role: "presentation",
    108        },
    109        dom.div(
    110          {
    111            className: "computed-property-value theme-fg-color1",
    112            dir: "ltr",
    113            role: "cell",
    114          },
    115          value
    116        ),
    117        this.renderReferenceElementPreview()
    118      )
    119    );
    120  }
    121 }
    122 
    123 module.exports = ComputedProperty;