devtools/client/inspector/flexbox/components/Flexbox.js

   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 { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
   8 const dom = require("devtools/client/shared/vendor/react-dom-factories");
   9 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
  10 const { getStr } = require("devtools/client/inspector/layout/utils/l10n");
  11
  12 const FlexboxItem = createFactory(require("./FlexboxItem"));
  13
  14 const Types = require("../types");
  15
  16 class Flexbox extends PureComponent {
  17   static get propTypes() {
  18     return {
  19       flexbox: PropTypes.shape(Types.flexbox).isRequired,
  20       getSwatchColorPickerTooltip: PropTypes.func.isRequired,
  21       setSelectedNode: PropTypes.func.isRequired,
  22       onHideBoxModelHighlighter: PropTypes.func.isRequired,
  23       onSetFlexboxOverlayColor: PropTypes.func.isRequired,
  24       onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
  25       onToggleFlexboxHighlighter: PropTypes.func.isRequired,
  26     };
  27   }
  28
  29   render() {
  30     const {
  31       flexbox,
  32       getSwatchColorPickerTooltip,
  33       setSelectedNode,
  34       onHideBoxModelHighlighter,
  35       onSetFlexboxOverlayColor,
  36       onShowBoxModelHighlighterForNode,
  37       onToggleFlexboxHighlighter,
  38     } = this.props;
  39
  40     return flexbox.actorID ?
  41       dom.div({ id: "layout-flexbox-container" },
  42         dom.div({ className: "flexbox-content" },
  43           dom.div({ className: "flexbox-container" },
  44             dom.span({}, getStr("flexbox.overlayFlexbox")),
  45             dom.ul(
  46               {
  47                 id: "flexbox-list",
  48                 className: "devtools-monospace",
  49               },
  50               FlexboxItem({
  51                 key: flexbox.id,
  52                 flexbox,
  53                 getSwatchColorPickerTooltip,
  54                 setSelectedNode,
  55                 onHideBoxModelHighlighter,
  56                 onSetFlexboxOverlayColor,
  57                 onShowBoxModelHighlighterForNode,
  58                 onToggleFlexboxHighlighter,
  59               })
  60             )
  61           )
  62         )
  63       )
  64       :
  65       dom.div({ className: "devtools-sidepanel-no-result" },
  66         getStr("flexbox.noFlexboxeOnThisPage")
  67       );
  68   }
  69 }
  70
  71 module.exports = Flexbox;