Bug 1467572 - Part 8: Add proper separators to the global toolbar. r=jryans draft
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 11 Jun 2018 13:43:02 -0400 (2018-06-11)
changeset 806763 098de2a9783fbdd5575ce10d5867983dd6ab543a
parent 806762 47a79c155fb166156b4a45b841b375aac9c3914d
child 806764 4835c628368dab1c24b75a381a381a46261ea3f8
push id112948
push userbmo:gl@mozilla.com
push dateMon, 11 Jun 2018 17:44:47 +0000 (2018-06-11)
reviewersjryans
bugs1467572
milestone62.0a1
Bug 1467572 - Part 8: Add proper separators to the global toolbar. r=jryans MozReview-Commit-ID: IWfXrZSbvJE
devtools/client/responsive.html/components/GlobalToolbar.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/GlobalToolbar.js
+++ b/devtools/client/responsive.html/components/GlobalToolbar.js
@@ -89,27 +89,30 @@ class GlobalToolbar extends PureComponen
           onRemoveDeviceAssociation,
         }),
         dom.button({
           id: "global-rotate-button",
           className: "toolbar-button devtools-button",
           onClick: () => onRotateViewport(viewport.id),
           title: getStr("responsive.rotate"),
         }),
+        dom.div({ className: "devtools-separator" }),
         DevicePixelRatioSelector({
           devices,
           displayPixelRatio,
           selectedDevice,
           selectedPixelRatio,
           onChangePixelRatio,
         }),
+        dom.div({ className: "devtools-separator" }),
         NetworkThrottlingSelector({
           networkThrottling,
           onChangeNetworkThrottling,
         }),
+        dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "global-touch-simulation-button",
           className: touchButtonClass,
           title: (touchSimulation.enabled ?
             getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
           onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
         })
       ),
@@ -121,16 +124,17 @@ class GlobalToolbar extends PureComponen
           title: getStr("responsive.screenshot"),
           onClick: onScreenshot,
           disabled: screenshot.isCapturing,
         }),
         ReloadConditions({
           reloadConditions,
           onChangeReloadCondition,
         }),
+        dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "global-exit-button",
           className: "toolbar-button devtools-button",
           title: getStr("responsive.exit"),
           onClick: onExit,
         })
       )
     );
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -57,16 +57,20 @@ body,
  * Common styles for shared components
  */
 
 .container {
   background-color: var(--theme-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
 }
 
+.devtools-separator {
+  height: 100%;
+}
+
 .toolbar-button {
   margin: 0;
   padding: 0;
   border: none;
   color: var(--viewport-color);
 }
 
 .toolbar-button:empty:hover:not(:disabled),
@@ -176,17 +180,16 @@ select > option.divider {
   background-repeat: no-repeat;
   background-size: 7px;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .toolbar-dropdown {
   background-position-x: right 5px;
-  border-right: 1px solid var(--theme-splitter-color);
   padding-right: 15px;
 }
 
 /**
  * Global Toolbar
  */
 
 #global-toolbar {
@@ -205,20 +208,16 @@ select > option.divider {
 }
 
 #global-toolbar > .toolbar-button::before {
   width: 12px;
   height: 12px;
   background-size: cover;
 }
 
-#global-device-selector {
-  border-right: none;
-}
-
 #global-toolbar-center-controls,
 #global-toolbar-end-controls {
   display: flex;
   align-items: center;
 }
 
 #global-toolbar-center-controls {
   justify-self: center;