devtools/client/inspector/rules/components/Toolbar.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 {
   8   createFactory,
   9   PureComponent,
  10 } = require("devtools/client/shared/vendor/react");
  11 const dom = require("devtools/client/shared/vendor/react-dom-factories");
  12 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
  13 const { connect } = require("devtools/client/shared/vendor/react-redux");
  14 const { COLOR_SCHEMES } = require("devtools/client/inspector/rules/constants");
  15
  16 const SearchBox = createFactory(require("./SearchBox"));
  17
  18 loader.lazyGetter(this, "ClassListPanel", function() {
  19   return createFactory(require("./ClassListPanel"));
  20 });
  21 loader.lazyGetter(this, "PseudoClassPanel", function() {
  22   return createFactory(require("./PseudoClassPanel"));
  23 });
  24
  25 const { getStr } = require("../utils/l10n");
  26
  27 class Toolbar extends PureComponent {
  28   static get propTypes() {
  29     return {
  30       isAddRuleEnabled: PropTypes.bool.isRequired,
  31       isClassPanelExpanded: PropTypes.bool.isRequired,
  32       isColorSchemeSimulationHidden: PropTypes.bool.isRequired,
  33       isPrintSimulationHidden: PropTypes.bool.isRequired,
  34       onAddClass: PropTypes.func.isRequired,
  35       onAddRule: PropTypes.func.isRequired,
  36       onSetClassState: PropTypes.func.isRequired,
  37       onToggleClassPanelExpanded: PropTypes.func.isRequired,
  38       onToggleColorSchemeSimulation: PropTypes.func.isRequired,
  39       onTogglePrintSimulation: PropTypes.func.isRequired,
  40       onTogglePseudoClass: PropTypes.func.isRequired,
  41     };
  42   }
  43
  44   constructor(props) {
  45     super(props);
  46
  47     this.state = {
  48       // Which of the color schemes is simulated, if any.
  49       currentColorScheme: 0,
  50       // Whether or not the print simulation button is enabled.
  51       isPrintSimulationEnabled: false,
  52       // Whether or not the pseudo class panel is expanded.
  53       isPseudoClassPanelExpanded: false,
  54     };
  55
  56     this.onAddRuleClick = this.onAddRuleClick.bind(this);
  57     this.onClassPanelToggle = this.onClassPanelToggle.bind(this);
  58     this.onColorSchemeSimulationClick = this.onColorSchemeSimulationClick.bind(
  59       this
  60     );
  61     this.onPrintSimulationToggle = this.onPrintSimulationToggle.bind(this);
  62     this.onPseudoClassPanelToggle = this.onPseudoClassPanelToggle.bind(this);
  63   }
  64
  65   onAddRuleClick(event) {
  66     event.stopPropagation();
  67     this.props.onAddRule();
  68   }
  69
  70   onClassPanelToggle(event) {
  71     event.stopPropagation();
  72
  73     const isClassPanelExpanded = !this.props.isClassPanelExpanded;
  74     this.props.onToggleClassPanelExpanded(isClassPanelExpanded);
  75     this.setState(prevState => {
  76       return {
  77         isPseudoClassPanelExpanded: isClassPanelExpanded
  78           ? false
  79           : prevState.isPseudoClassPanelExpanded,
  80       };
  81     });
  82   }
  83
  84   onColorSchemeSimulationClick(event) {
  85     event.stopPropagation();
  86
  87     this.props.onToggleColorSchemeSimulation();
  88     this.setState(prevState => ({
  89       currentColorScheme:
  90         (prevState.currentColorScheme + 1) % COLOR_SCHEMES.length,
  91     }));
  92   }
  93
  94   onPrintSimulationToggle(event) {
  95     event.stopPropagation();
  96     this.props.onTogglePrintSimulation();
  97     this.setState(prevState => ({
  98       isPrintSimulationEnabled: !prevState.isPrintSimulationEnabled,
  99     }));
 100   }
 101
 102   onPseudoClassPanelToggle(event) {
 103     event.stopPropagation();
 104
 105     const isPseudoClassPanelExpanded = !this.state.isPseudoClassPanelExpanded;
 106
 107     if (isPseudoClassPanelExpanded) {
 108       this.props.onToggleClassPanelExpanded(false);
 109     }
 110
 111     this.setState({ isPseudoClassPanelExpanded });
 112   }
 113
 114   render() {
 115     const {
 116       isAddRuleEnabled,
 117       isClassPanelExpanded,
 118       isColorSchemeSimulationHidden,
 119       isPrintSimulationHidden,
 120     } = this.props;
 121     const { isPrintSimulationEnabled, isPseudoClassPanelExpanded } = this.state;
 122
 123     return dom.div(
 124       {
 125         id: "ruleview-toolbar-container",
 126       },
 127       dom.div(
 128         {
 129           id: "ruleview-toolbar",
 130           className: "devtools-toolbar devtools-input-toolbar",
 131         },
 132         SearchBox({}),
 133         dom.div({ className: "devtools-separator" }),
 134         dom.div(
 135           { id: "ruleview-command-toolbar" },
 136           dom.button({
 137             id: "pseudo-class-panel-toggle",
 138             className:
 139               "devtools-button" +
 140               (isPseudoClassPanelExpanded ? " checked" : ""),
 141             onClick: this.onPseudoClassPanelToggle,
 142             title: getStr("rule.togglePseudo.tooltip"),
 143           }),
 144           dom.button({
 145             id: "class-panel-toggle",
 146             className:
 147               "devtools-button" + (isClassPanelExpanded ? " checked" : ""),
 148             onClick: this.onClassPanelToggle,
 149             title: getStr("rule.classPanel.toggleClass.tooltip"),
 150           }),
 151           dom.button({
 152             id: "ruleview-add-rule-button",
 153             className: "devtools-button",
 154             disabled: !isAddRuleEnabled,
 155             onClick: this.onAddRuleClick,
 156             title: getStr("rule.addRule.tooltip"),
 157           }),
 158           isColorSchemeSimulationHidden
 159             ? dom.button({
 160                 id: "color-scheme-simulation-toggle",
 161                 className: "devtools-button",
 162                 onClick: this.onColorSchemeSimulationClick,
 163                 state: COLOR_SCHEMES[this.state.currentColorScheme],
 164                 title: getStr("rule.colorSchemeSimulation.tooltip"),
 165               })
 166             : null,
 167           !isPrintSimulationHidden
 168             ? dom.button({
 169                 id: "print-simulation-toggle",
 170                 className:
 171                   "devtools-button" +
 172                   (isPrintSimulationEnabled ? " checked" : ""),
 173                 onClick: this.onPrintSimulationToggle,
 174                 title: getStr("rule.printSimulation.tooltip"),
 175               })
 176             : null
 177         )
 178       ),
 179       isClassPanelExpanded
 180         ? ClassListPanel({
 181             onAddClass: this.props.onAddClass,
 182             onSetClassState: this.props.onSetClassState,
 183           })
 184         : null,
 185       isPseudoClassPanelExpanded
 186         ? PseudoClassPanel({
 187             onTogglePseudoClass: this.props.onTogglePseudoClass,
 188           })
 189         : null
 190     );
 191   }
 192 }
 193
 194 const mapStateToProps = state => {
 195   return {
 196     isAddRuleEnabled: state.rules.isAddRuleEnabled,
 197     isClassPanelExpanded: state.classList.isClassPanelExpanded,
 198     isColorSchemeSimulationHidden: state.rules.isColorSchemeSimulationHidden,
 199     isPrintSimulationHidden: state.rules.isPrintSimulationHidden,
 200   };
 201 };
 202
 203 module.exports = connect(mapStateToProps)(Toolbar);