Bug 1245921 - Turn toolbox toolbar into a React component r+miker r=miker

MozReview-Commit-ID: 4UZbcfw2YI9

devtools/client/framework/components/toolbox-controller.js

@@ -0,0 +1,151 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+"use strict";
+
+const {createClass, createFactory} = require("devtools/client/shared/vendor/react");
+const ToolboxToolbar = createFactory(require("devtools/client/framework/components/toolbox-toolbar"));
+const ELEMENT_PICKER_ID = "command-button-pick";
+
+/**
+ * This component serves as a state controller for the toolbox React component. It's a
+ * thin layer for translating events and state of the outside world into the React update
+ * cycle. This solution was used to keep the amount of code changes to a minimimum while
+ * adapting the existing codebase to start using React.
+ */
+module.exports = createClass({
+  displayName: "ToolboxController",
+
+  getInitialState() {
+    // See the ToolboxToolbar propTypes for documentation on each of these items in state,
+    // and for the defintions of the props that are expected to be passed in.
+    return {
+      focusedButton: ELEMENT_PICKER_ID,
+      currentToolId: null,
+      canRender: false,
+      highlightedTool: "",
+      areDockButtonsEnabled: true,
+      panelDefinitions: [],
+      hostTypes: [],
+      canCloseToolbox: true,
+      toolboxButtons: [],
+      buttonIds: [],
+      checkedButtonsUpdated: () => {
+        this.forceUpdate();
+      }
+    };
+  },
+
+  componentWillUnmount() {
+    this.state.toolboxButtons.forEach(button => {
+      button.off("updatechecked", this.state.checkedButtonsUpdated);
+    });
+  },
+
+  /**
+   * The button and tab ids must be known in order to be able to focus left and right
+   * using the arrow keys.
+   */
+  updateButtonIds() {
+    const {panelDefinitions, toolboxButtons, optionsPanel, hostTypes,
+           canCloseToolbox} = this.state;
+
+    // This is a little gnarly, but go through all of the state and extract the IDs.
+    this.setState({
+      buttonIds: [
+        ...toolboxButtons.filter(btn => btn.isInStartContainer).map(({id}) => id),
+        ...panelDefinitions.map(({id}) => id),
+        ...toolboxButtons.filter(btn => !btn.isInStartContainer).map(({id}) => id),
+        optionsPanel ? optionsPanel.id : null,
+        ...hostTypes.map(({position}) => "toolbox-dock-" + position),
+        canCloseToolbox ? "toolbox-close" : null
+      ].filter(id => id)
+    });
+
+    this.updateFocusedButton();
+  },
+
+  updateFocusedButton() {
+    this.setFocusedButton(this.state.focusedButton);
+  },
+
+  setFocusedButton(focusedButton) {
+    const {buttonIds} = this.state;
+
+    this.setState({
+      focusedButton: focusedButton && buttonIds.includes(focusedButton)
+        ? focusedButton
+        : buttonIds[0]
+    });
+  },
+
+  setCurrentToolId(currentToolId) {
+    this.setState({currentToolId});
+    // Also set the currently focused button to this tool.
+    this.setFocusedButton(currentToolId);
+  },
+
+  setCanRender() {
+    this.setState({ canRender: true });
+    this.updateButtonIds();
+  },
+
+  setOptionsPanel(optionsPanel) {
+    this.setState({ optionsPanel });
+    this.updateButtonIds();
+  },
+
+  highlightTool(highlightedTool) {
+    this.setState({ highlightedTool });
+  },
+
+  unhighlightTool(id) {
+    if (this.state.highlightedTool === id) {
+      this.setState({ highlightedTool: "" });
+    }
+  },
+
+  setDockButtonsEnabled(areDockButtonsEnabled) {
+    this.setState({ areDockButtonsEnabled });
+    this.updateButtonIds();
+  },
+
+  setHostTypes(hostTypes) {
+    this.setState({ hostTypes });
+    this.updateButtonIds();
+  },
+
+  setCanCloseToolbox(canCloseToolbox) {
+    this.setState({ canCloseToolbox });
+    this.updateButtonIds();
+  },
+
+  setPanelDefinitions(panelDefinitions) {
+    this.setState({ panelDefinitions });
+    this.updateButtonIds();
+  },
+
+  setToolboxButtons(toolboxButtons) {
+    // Listen for updates of the checked attribute.
+    this.state.toolboxButtons.forEach(button => {
+      button.off("updatechecked", this.state.checkedButtonsUpdated);
+    });
+    toolboxButtons.forEach(button => {
+      button.on("updatechecked", this.state.checkedButtonsUpdated);
+    });
+
+    this.setState({ toolboxButtons });
+    this.updateButtonIds();
+  },
+
+  setCanMinimize(canMinimize) {
+    /* Bug 1177463 - The minimize button is currently hidden until we agree on
+       the UI for it, and until bug 1173849 is fixed too. */
+
+    // this.setState({ canMinimize });
+  },
+
+  render() {
+    return ToolboxToolbar(Object.assign({}, this.props, this.state));
+  }
+});