Bug 1444301 - Move the separator before the RDM icon; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 778576 2a2fb3f2fee762025329749c18289a4ce4558617
parent 778575 a8fad7b622613905ee2b64c1a6ad01cc22ff0323
child 778577 8c62b422a051fd6055fc3b6a25a1e5571a7bf747
push id105521
push userbbirtles@mozilla.com
push dateFri, 06 Apr 2018 14:07:54 +0000
reviewersjryans
bugs1444301
milestone61.0a1
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
devtools/client/framework/components/toolbox-toolbar.js
--- 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"});
 }