tor-browser

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

Flexbox.js (3591B)

      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  createElement,
      9  createFactory,
     10  Fragment,
     11  PureComponent,
     12 } = require("resource://devtools/client/shared/vendor/react.mjs");
     13 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     14 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     15 const {
     16  getStr,
     17 } = require("resource://devtools/client/inspector/layout/utils/l10n.js");
     18 
     19 loader.lazyGetter(this, "FlexItemList", function () {
     20  return createFactory(
     21    require("resource://devtools/client/inspector/flexbox/components/FlexItemList.js")
     22  );
     23 });
     24 loader.lazyGetter(this, "FlexItemSizingOutline", function () {
     25  return createFactory(
     26    require("resource://devtools/client/inspector/flexbox/components/FlexItemSizingOutline.js")
     27  );
     28 });
     29 loader.lazyGetter(this, "FlexItemSizingProperties", function () {
     30  return createFactory(
     31    require("resource://devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js")
     32  );
     33 });
     34 loader.lazyGetter(this, "Header", function () {
     35  return createFactory(
     36    require("resource://devtools/client/inspector/flexbox/components/Header.js")
     37  );
     38 });
     39 
     40 const Types = require("resource://devtools/client/inspector/flexbox/types.js");
     41 
     42 class Flexbox extends PureComponent {
     43  static get propTypes() {
     44    return {
     45      dispatch: PropTypes.func.isRequired,
     46      flexbox: PropTypes.shape(Types.flexbox).isRequired,
     47      flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
     48      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     49      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
     50      scrollToTop: PropTypes.func.isRequired,
     51      setSelectedNode: PropTypes.func.isRequired,
     52    };
     53  }
     54 
     55  renderFlexItemList() {
     56    const { dispatch, scrollToTop, setSelectedNode } = this.props;
     57    const { flexItems } = this.props.flexContainer;
     58 
     59    return FlexItemList({
     60      dispatch,
     61      flexItems,
     62      scrollToTop,
     63      setSelectedNode,
     64    });
     65  }
     66 
     67  renderFlexItemSizing() {
     68    const { flexItems, flexItemShown, properties } = this.props.flexContainer;
     69 
     70    const flexItem = flexItems.find(
     71      item => item.nodeFront.actorID === flexItemShown
     72    );
     73    if (!flexItem) {
     74      return null;
     75    }
     76 
     77    return createElement(
     78      Fragment,
     79      null,
     80      FlexItemSizingOutline({
     81        flexDirection: properties["flex-direction"],
     82        flexItem,
     83      }),
     84      FlexItemSizingProperties({
     85        flexDirection: properties["flex-direction"],
     86        flexItem,
     87      })
     88    );
     89  }
     90 
     91  render() {
     92    const {
     93      dispatch,
     94      flexbox,
     95      flexContainer,
     96      getSwatchColorPickerTooltip,
     97      onSetFlexboxOverlayColor,
     98      setSelectedNode,
     99    } = this.props;
    100 
    101    if (!flexContainer.actorID) {
    102      return dom.div(
    103        { className: "devtools-sidepanel-no-result" },
    104        getStr("flexbox.noFlexboxeOnThisPage")
    105      );
    106    }
    107 
    108    const { flexItemShown } = flexContainer;
    109    const { color, highlighted } = flexbox;
    110 
    111    return dom.div(
    112      { className: "layout-flexbox-wrapper" },
    113      Header({
    114        color,
    115        dispatch,
    116        flexContainer,
    117        getSwatchColorPickerTooltip,
    118        highlighted,
    119        onSetFlexboxOverlayColor,
    120        setSelectedNode,
    121      }),
    122      !flexItemShown ? this.renderFlexItemList() : null,
    123      flexItemShown ? this.renderFlexItemSizing() : null
    124    );
    125  }
    126 }
    127 
    128 module.exports = Flexbox;