Bug 1412269 - DevTools Framework to ES6 classes r=Honza

MozReview-Commit-ID: F5wt65FAhtx

--HG--
extra : rebase_source : de0a5bbf35d7f95a3fdbf97795efe5e39d05fd73

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

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {createClass, createFactory} = require("devtools/client/shared/vendor/react");
+const {Component, createFactory} = require("devtools/client/shared/vendor/react");
 const ToolboxToolbar = createFactory(require("devtools/client/framework/components/toolbox-toolbar"));
 const ELEMENT_PICKER_ID = "command-button-pick";
 
@@ -13,13 +13,13 @@ const ELEMENT_PICKER_ID = "command-button-pick";
  * 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",
+class ToolboxController extends Component {
+  constructor(props, context) {
+    super(props, context);
 
-  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 {
+    // See the ToolboxToolbar propTypes for documentation on each of these items in
+    // state, and for the definitions of the props that are expected to be passed in.
+    this.state = {
       focusedButton: ELEMENT_PICKER_ID,
       currentToolId: null,
       canRender: false,
@@ -34,13 +34,32 @@ module.exports = createClass({
         this.forceUpdate();
       }
     };
-  },
+
+    this.updateButtonIds = this.updateButtonIds.bind(this);
+    this.updateFocusedButton = this.updateFocusedButton.bind(this);
+    this.setFocusedButton = this.setFocusedButton.bind(this);
+    this.setCurrentToolId = this.setCurrentToolId.bind(this);
+    this.setCanRender = this.setCanRender.bind(this);
+    this.setOptionsPanel = this.setOptionsPanel.bind(this);
+    this.highlightTool = this.highlightTool.bind(this);
+    this.unhighlightTool = this.unhighlightTool.bind(this);
+    this.setDockButtonsEnabled = this.setDockButtonsEnabled.bind(this);
+    this.setHostTypes = this.setHostTypes.bind(this);
+    this.setCanCloseToolbox = this.setCanCloseToolbox.bind(this);
+    this.setPanelDefinitions = this.setPanelDefinitions.bind(this);
+    this.setToolboxButtons = this.setToolboxButtons.bind(this);
+    this.setCanMinimize = this.setCanMinimize.bind(this);
+  }
+
+  shouldComponentUpdate() {
+    return this.state.canRender;
+  }
 
   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
@@ -63,11 +82,11 @@ module.exports = createClass({
     });
 
     this.updateFocusedButton();
-  },
+  }
 
   updateFocusedButton() {
     this.setFocusedButton(this.state.focusedButton);
-  },
+  }
 
   setFocusedButton(focusedButton) {
     const {buttonIds} = this.state;
@@ -80,57 +99,53 @@ module.exports = createClass({
         focusedButton
       });
     }
-  },
+  }
 
   setCurrentToolId(currentToolId) {
     this.setState({currentToolId});
     // Also set the currently focused button to this tool.
     this.setFocusedButton(currentToolId);
-  },
-
-  shouldComponentUpdate() {
-    return this.state.canRender;
-  },
+  }
 
   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.
@@ -143,16 +158,18 @@ module.exports = createClass({
 
     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));
   }
-});
+}
+
+module.exports = ToolboxController;

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

@@ -3,11 +3,26 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {DOM, createClass} = require("devtools/client/shared/vendor/react");
+const {DOM, Component, PropTypes} = require("devtools/client/shared/vendor/react");
 const {img, button, span} = DOM;
 
-module.exports = createClass({
-  displayName: "ToolboxTab",
+class ToolboxTab extends Component {
+  // See toolbox-toolbar propTypes for details on the props used here.
+  static get propTypes() {
+    return {
+      currentToolId: PropTypes.string,
+      focusButton: PropTypes.func,
+      focusedButton: PropTypes.string,
+      highlightedTool: PropTypes.string,
+      panelDefinition: PropTypes.object,
+      selectTool: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.renderIcon = this.renderIcon.bind(this);
+  }
 
   renderIcon(definition, isHighlighted) {
     const {icon} = definition;
@@ -19,7 +34,7 @@ module.exports = createClass({
         src: icon
       }),
     ];
-  },
+  }
 
   render() {
     const {panelDefinition, currentToolId, highlightedTool, selectTool,
@@ -61,4 +76,6 @@ module.exports = createClass({
         )
     );
   }
-});
+}
+
+module.exports = ToolboxTab;

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

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {DOM, createClass, createFactory, PropTypes} = require("devtools/client/shared/vendor/react");
+const {DOM, Component, createFactory, PropTypes} = require("devtools/client/shared/vendor/react");
 
 const {findDOMNode} = require("devtools/client/shared/vendor/react-dom");
 const {button, div} = DOM;
@@ -12,34 +12,41 @@ const Menu = require("devtools/client/framework/menu");
 const MenuItem = require("devtools/client/framework/menu-item");
 const ToolboxTab = createFactory(require("devtools/client/framework/components/toolbox-tab"));
 
-module.exports = createClass({
-  displayName: "ToolboxTabs",
-
+class ToolboxTabs extends Component {
   // See toolbox-toolbar propTypes for details on the props used here.
-  propTypes: {
-    currentToolId: PropTypes.string,
-    focusButton: PropTypes.func,
-    focusedButton: PropTypes.string,
-    highlightedTool: PropTypes.string,
-    panelDefinitions: PropTypes.array,
-    selectTool: PropTypes.func,
-    toolbox: PropTypes.object,
-    L10N: PropTypes.object,
-  },
-
-  getInitialState() {
+  static get propTypes() {
     return {
+      currentToolId: PropTypes.string,
+      focusButton: PropTypes.func,
+      focusedButton: PropTypes.string,
+      highlightedTool: PropTypes.string,
+      panelDefinitions: PropTypes.array,
+      selectTool: PropTypes.func,
+      toolbox: PropTypes.object,
+      L10N: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       overflow: false,
     };
-  },
+
+    this.addFlowEvents = this.addFlowEvents.bind(this);
+    this.removeFlowEvents = this.removeFlowEvents.bind(this);
+    this.onOverflow = this.onOverflow.bind(this);
+    this.onUnderflow = this.onUnderflow.bind(this);
+  }
 
   componentDidUpdate() {
     this.addFlowEvents();
-  },
+  }
 
   componentWillUnmount() {
     this.removeFlowEvents();
-  },
+  }
 
   addFlowEvents() {
     this.removeFlowEvents();
@@ -48,7 +55,7 @@ module.exports = createClass({
       node.addEventListener("overflow", this.onOverflow);
       node.addEventListener("underflow", this.onUnderflow);
     }
-  },
+  }
 
   removeFlowEvents() {
     let node = findDOMNode(this);
@@ -56,19 +63,19 @@ module.exports = createClass({
       node.removeEventListener("overflow", this.onOverflow);
       node.removeEventListener("underflow", this.onUnderflow);
     }
-  },
+  }
 
   onOverflow() {
     this.setState({
       overflow: true
     });
-  },
+  }
 
   onUnderflow() {
     this.setState({
       overflow: false
     });
-  },
+  }
 
   /**
    * Render all of the tabs, based on the panel definitions and builds out
@@ -107,8 +114,10 @@ module.exports = createClass({
       ),
       this.state.overflow ? renderAllToolsButton(this.props) : null
     );
-  },
-});
+  }
+}
+
+module.exports = ToolboxTabs;
 
 /**
  * Render a button to access all tools, displayed only when the toolbar presents an

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

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-const {DOM, createClass, createFactory, PropTypes} = require("devtools/client/shared/vendor/react");
+const {DOM, Component, createFactory, PropTypes} = require("devtools/client/shared/vendor/react");
 const {div, button} = DOM;
 
 const ToolboxTab = createFactory(require("devtools/client/framework/components/toolbox-tab"));
@@ -15,35 +15,35 @@ const ToolboxTabs = createFactory(require("devtools/client/framework/components/
  * ToolboxController component controls the changing state, and passes in everything as
  * props.
  */
-module.exports = createClass({
-  displayName: "ToolboxToolbar",
-
-  propTypes: {
-    // The currently focused item (for arrow keyboard navigation)
-    // This ID determines the tabindex being 0 or -1.
-    focusedButton: PropTypes.string,
-    // List of command button definitions.
-    toolboxButtons: PropTypes.array,
-    // The id of the currently selected tool, e.g. "inspector"
-    currentToolId: PropTypes.string,
-    // An optionally highlighted tool, e.g. "inspector"
-    highlightedTool: PropTypes.string,
-    // List of tool panel definitions.
-    panelDefinitions: PropTypes.array,
-    // Function to select a tool based on its id.
-    selectTool: PropTypes.func,
-    // Keep a record of what button is focused.
-    focusButton: PropTypes.func,
-    // The options button definition.
-    optionsPanel: PropTypes.object,
-    // Hold off displaying the toolbar until enough information is ready for it to render
-    // nicely.
-    canRender: PropTypes.bool,
-    // Localization interface.
-    L10N: PropTypes.object,
-    // The devtools toolbox
-    toolbox: PropTypes.object,
-  },
+class ToolboxToolbar extends Component {
+  static get propTypes() {
+    return {
+      // The currently focused item (for arrow keyboard navigation)
+      // This ID determines the tabindex being 0 or -1.
+      focusedButton: PropTypes.string,
+      // List of command button definitions.
+      toolboxButtons: PropTypes.array,
+      // The id of the currently selected tool, e.g. "inspector"
+      currentToolId: PropTypes.string,
+      // An optionally highlighted tool, e.g. "inspector"
+      highlightedTool: PropTypes.string,
+      // List of tool panel definitions.
+      panelDefinitions: PropTypes.array,
+      // Function to select a tool based on its id.
+      selectTool: PropTypes.func,
+      // Keep a record of what button is focused.
+      focusButton: PropTypes.func,
+      // The options button definition.
+      optionsPanel: PropTypes.object,
+      // Hold off displaying the toolbar until enough information is ready for
+      // it to render nicely.
+      canRender: PropTypes.bool,
+      // Localization interface.
+      L10N: PropTypes.object,
+      // The devtools toolbox
+      toolbox: PropTypes.object,
+    };
+  }
 
   /**
    * The render function is kept fairly short for maintainability. See the individual
@@ -65,7 +65,9 @@ module.exports = createClass({
       )
       : div(containerProps);
   }
-});
+}
+
+module.exports = ToolboxToolbar;
 
 /**
  * A little helper function to call renderToolboxButtons for buttons at the start