tor-browser

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

FlexItem.js (1811B)

      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 
     13 loader.lazyRequireGetter(
     14  this,
     15  "getNodeRep",
     16  "resource://devtools/client/inspector/shared/node-reps.js"
     17 );
     18 
     19 const Types = require("resource://devtools/client/inspector/flexbox/types.js");
     20 
     21 const {
     22  highlightNode,
     23  unhighlightNode,
     24 } = require("resource://devtools/client/inspector/boxmodel/actions/box-model-highlighter.js");
     25 
     26 class FlexItem extends PureComponent {
     27  static get propTypes() {
     28    return {
     29      dispatch: PropTypes.func.isRequired,
     30      flexItem: PropTypes.shape(Types.flexItem).isRequired,
     31      index: PropTypes.number.isRequired,
     32      scrollToTop: PropTypes.func.isRequired,
     33      setSelectedNode: PropTypes.func.isRequired,
     34    };
     35  }
     36 
     37  render() {
     38    const { dispatch, flexItem, index, scrollToTop, setSelectedNode } =
     39      this.props;
     40    const { nodeFront } = flexItem;
     41 
     42    return dom.button(
     43      {
     44        className: "devtools-button devtools-monospace",
     45        onClick: e => {
     46          e.stopPropagation();
     47          scrollToTop();
     48          setSelectedNode(nodeFront);
     49          dispatch(unhighlightNode());
     50        },
     51        onMouseOut: () => dispatch(unhighlightNode()),
     52        onMouseOver: () => dispatch(highlightNode(nodeFront)),
     53      },
     54      dom.span({ className: "flex-item-index" }, index),
     55      getNodeRep(nodeFront)
     56    );
     57  }
     58 }
     59 
     60 module.exports = FlexItem;