Bug 1444301 - Move the separator before the RDM icon; r?jryans
As per the mockup:
https://mozilla.invisionapp.com/share/M5G8OO1ZVE4#/screens/283871189
MozReview-Commit-ID: 6IF4JhiTqql
--- a/devtools/client/framework/components/toolbox-toolbar.js
+++ b/devtools/client/framework/components/toolbox-toolbar.js
@@ -83,17 +83,16 @@ class ToolboxToolbar extends Component {
const containerProps = {className: "devtools-tabbar"};
return this.props.canRender
? (
div(
containerProps,
renderToolboxButtonsStart(this.props),
ToolboxTabs(this.props),
renderToolboxButtonsEnd(this.props),
- renderSeparator(),
renderToolboxControls(this.props)
)
)
: div(containerProps);
}
}
module.exports = ToolboxToolbar;
@@ -130,18 +129,27 @@ function renderToolboxButtons({focusedBu
const {isVisible, isInStartContainer} = command;
return isVisible && (isStart ? isInStartContainer : !isInStartContainer);
});
if (visibleButtons.length === 0) {
return null;
}
- return div({id: `toolbox-buttons-${isStart ? "start" : "end"}`},
- ...visibleButtons.map(command => {
+ // The RDM button, if present, should always go last
+ const rdmIndex = visibleButtons.findIndex(
+ button => button.id === "command-button-responsive"
+ );
+ if (rdmIndex !== -1 && rdmIndex !== visibleButtons.length - 1) {
+ const rdm = visibleButtons.splice(rdmIndex, 1)[0];
+ visibleButtons.push(rdm);
+ }
+
+ const renderedButtons =
+ visibleButtons.map(command => {
const {
id,
description,
disabled,
onClick,
isChecked,
className: buttonClass,
onKeyDown
@@ -159,19 +167,35 @@ function renderToolboxButtons({focusedBu
focusButton(id);
},
onFocus: () => focusButton(id),
tabIndex: id === focusedButton ? "0" : "-1",
onKeyDown: (event) => {
onKeyDown(event);
}
});
- }),
- isStart ? div({className: "devtools-separator"}) : null
- );
+ });
+
+ // Add the appropriate separator, if needed.
+ let children = renderedButtons;
+ if (renderedButtons.length) {
+ // For the end group we add a separator *before* the RDM button if it
+ // exists.
+ if (rdmIndex !== -1) {
+ children.splice(
+ children.length - 1,
+ 0,
+ renderSeparator()
+ );
+ } else {
+ children.push(renderSeparator())
+ }
+ }
+
+ return div({id: `toolbox-buttons-${isStart ? "start" : "end"}`}, ...children);
}
/**
* Render a separator.
*/
function renderSeparator() {
return div({className: "devtools-separator"});
}