tor-browser

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

Header.js (4000B)

      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 const FlexContainer = createFactory(
     20  require("resource://devtools/client/inspector/flexbox/components/FlexContainer.js")
     21 );
     22 const FlexItemSelector = createFactory(
     23  require("resource://devtools/client/inspector/flexbox/components/FlexItemSelector.js")
     24 );
     25 
     26 const Types = require("resource://devtools/client/inspector/flexbox/types.js");
     27 
     28 const {
     29  toggleFlexboxHighlighter,
     30 } = require("resource://devtools/client/inspector/flexbox/actions/flexbox-highlighter.js");
     31 
     32 class Header extends PureComponent {
     33  static get propTypes() {
     34    return {
     35      color: PropTypes.string.isRequired,
     36      dispatch: PropTypes.func.isRequired,
     37      flexContainer: PropTypes.shape(Types.flexContainer).isRequired,
     38      getSwatchColorPickerTooltip: PropTypes.func.isRequired,
     39      highlighted: PropTypes.bool.isRequired,
     40      onSetFlexboxOverlayColor: PropTypes.func.isRequired,
     41      setSelectedNode: PropTypes.func.isRequired,
     42    };
     43  }
     44 
     45  renderFlexboxHighlighterToggle() {
     46    const { dispatch, flexContainer, highlighted } = this.props;
     47    // Don't show the flexbox highlighter toggle for the parent flex container of the
     48    // selected element.
     49    if (flexContainer.isFlexItemContainer) {
     50      return null;
     51    }
     52 
     53    return createElement(
     54      Fragment,
     55      null,
     56      dom.div({ className: "devtools-separator" }),
     57      dom.input({
     58        id: "flexbox-checkbox-toggle",
     59        className: "devtools-checkbox-toggle",
     60        checked: highlighted,
     61        onChange: () =>
     62          dispatch(toggleFlexboxHighlighter(flexContainer.nodeFront, "layout")),
     63        title: getStr("flexbox.togglesFlexboxHighlighter2"),
     64        type: "checkbox",
     65      })
     66    );
     67  }
     68 
     69  renderFlexContainer() {
     70    if (this.props.flexContainer.flexItemShown) {
     71      return null;
     72    }
     73 
     74    const {
     75      color,
     76      dispatch,
     77      flexContainer,
     78      getSwatchColorPickerTooltip,
     79      onSetFlexboxOverlayColor,
     80    } = this.props;
     81 
     82    return FlexContainer({
     83      color,
     84      dispatch,
     85      flexContainer,
     86      getSwatchColorPickerTooltip,
     87      onSetFlexboxOverlayColor,
     88    });
     89  }
     90 
     91  renderFlexItemSelector() {
     92    if (!this.props.flexContainer.flexItemShown) {
     93      return null;
     94    }
     95 
     96    const { flexContainer, setSelectedNode } = this.props;
     97    const { flexItems, flexItemShown } = flexContainer;
     98    const flexItem = flexItems.find(
     99      item => item.nodeFront.actorID === flexItemShown
    100    );
    101 
    102    if (!flexItem) {
    103      return null;
    104    }
    105 
    106    return FlexItemSelector({
    107      flexItem,
    108      flexItems,
    109      setSelectedNode,
    110    });
    111  }
    112 
    113  render() {
    114    const { flexContainer, setSelectedNode } = this.props;
    115    const { flexItemShown, nodeFront } = flexContainer;
    116 
    117    return dom.div(
    118      { className: "flex-header devtools-monospace" },
    119      flexItemShown
    120        ? dom.button({
    121            className: "flex-header-button-prev devtools-button",
    122            "aria-label": getStr("flexbox.backButtonLabel"),
    123            onClick: e => {
    124              e.stopPropagation();
    125              setSelectedNode(nodeFront);
    126            },
    127          })
    128        : null,
    129      dom.div(
    130        {
    131          className:
    132            "flex-header-content" + (flexItemShown ? " flex-item-shown" : ""),
    133        },
    134        this.renderFlexContainer(),
    135        this.renderFlexItemSelector()
    136      ),
    137      this.renderFlexboxHighlighterToggle()
    138    );
    139  }
    140 }
    141 
    142 module.exports = Header;