Bug 1444301 - Move the separator before the RDM icon; r=jryans
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 412187 abf995f8c9b36509798c01077df829d414601306
parent 412186 5d0acb7cf92189a846b4dfb9ff390b5991b188fc
child 412188 2b22e8b9c85166d77ca25839a70bd1b33161abdc
push id62302
push userbbirtles@mozilla.com
push dateFri, 06 Apr 2018 21:15:54 +0000
treeherderautoland@c5e2ad71fce5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1444301
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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"});
 }