зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1412269 - DevTools Framework to ES6 classes r=Honza
MozReview-Commit-ID: F5wt65FAhtx --HG-- extra : rebase_source : de0a5bbf35d7f95a3fdbf97795efe5e39d05fd73
This commit is contained in:
Родитель
685298ea4c
Коммит
a86d96e077
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,11 +12,10 @@ 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: {
|
||||
static get propTypes() {
|
||||
return {
|
||||
currentToolId: PropTypes.string,
|
||||
focusButton: PropTypes.func,
|
||||
focusedButton: PropTypes.string,
|
||||
|
@ -25,21 +24,29 @@ module.exports = createClass({
|
|||
selectTool: PropTypes.func,
|
||||
toolbox: PropTypes.object,
|
||||
L10N: PropTypes.object,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
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
|
||||
|
|
|
@ -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,10 +15,9 @@ 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: {
|
||||
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,
|
||||
|
@ -36,14 +35,15 @@ module.exports = createClass({
|
|||
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.
|
||||
// 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
|
||||
|
|
Загрузка…
Ссылка в новой задаче