tor-browser

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

BoxModel.js (2675B)

      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 
     14 const BoxModelInfo = createFactory(
     15  require("resource://devtools/client/inspector/boxmodel/components/BoxModelInfo.js")
     16 );
     17 const BoxModelMain = createFactory(
     18  require("resource://devtools/client/inspector/boxmodel/components/BoxModelMain.js")
     19 );
     20 const BoxModelProperties = createFactory(
     21  require("resource://devtools/client/inspector/boxmodel/components/BoxModelProperties.js")
     22 );
     23 
     24 const Types = require("resource://devtools/client/inspector/boxmodel/types.js");
     25 
     26 class BoxModel extends PureComponent {
     27  static get propTypes() {
     28    return {
     29      boxModel: PropTypes.shape(Types.boxModel).isRequired,
     30      dispatch: PropTypes.func.isRequired,
     31      onShowBoxModelEditor: PropTypes.func.isRequired,
     32      onShowRulePreviewTooltip: PropTypes.func.isRequired,
     33      onToggleGeometryEditor: PropTypes.func.isRequired,
     34      showBoxModelProperties: PropTypes.bool.isRequired,
     35      setSelectedNode: PropTypes.func.isRequired,
     36    };
     37  }
     38 
     39  constructor(props) {
     40    super(props);
     41    this.onKeyDown = this.onKeyDown.bind(this);
     42  }
     43 
     44  onKeyDown(event) {
     45    const { target } = event;
     46 
     47    if (target == this.boxModelContainer) {
     48      this.boxModelMain.onKeyDown(event);
     49    }
     50  }
     51 
     52  render() {
     53    const {
     54      boxModel,
     55      dispatch,
     56      onShowBoxModelEditor,
     57      onShowRulePreviewTooltip,
     58      onToggleGeometryEditor,
     59      setSelectedNode,
     60      showBoxModelProperties,
     61    } = this.props;
     62 
     63    return dom.div(
     64      {
     65        className: "boxmodel-container",
     66        tabIndex: 0,
     67        ref: div => {
     68          this.boxModelContainer = div;
     69        },
     70        onKeyDown: this.onKeyDown,
     71      },
     72      BoxModelMain({
     73        boxModel,
     74        boxModelContainer: this.boxModelContainer,
     75        dispatch,
     76        onShowBoxModelEditor,
     77        onShowRulePreviewTooltip,
     78        ref: boxModelMain => {
     79          this.boxModelMain = boxModelMain;
     80        },
     81      }),
     82      BoxModelInfo({
     83        boxModel,
     84        onToggleGeometryEditor,
     85      }),
     86      showBoxModelProperties
     87        ? BoxModelProperties({
     88            boxModel,
     89            dispatch,
     90            setSelectedNode,
     91          })
     92        : null
     93    );
     94  }
     95 }
     96 
     97 module.exports = BoxModel;