Bug 1467572 - Part 8: Add proper separators to the global toolbar. r=jryans
☠☠ backed out by dc2c0b075c0e ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:39 -0400
changeset 486920 5880a55d2ee802f860490629df481a9da16a8160
parent 486919 0f19f84bb2edb6eb55a6e1f4e29319e95981cbd5
child 486921 636bf5ce96f79a4481dfb08a2394667b37b957d3
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1467572
milestone63.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 1467572 - Part 8: Add proper separators to the global toolbar. r=jryans
devtools/client/responsive.html/components/Toolbar.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/Toolbar.js
+++ b/devtools/client/responsive.html/components/Toolbar.js
@@ -90,27 +90,30 @@ class Toolbar extends PureComponent {
           onResizeViewport,
         }),
         dom.button({
           id: "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: "touch-simulation-button",
           className: touchButtonClass,
           title: (touchSimulation.enabled ?
             getStr("responsive.disableTouch") : getStr("responsive.enableTouch")),
           onClick: () => onChangeTouchSimulation(!touchSimulation.enabled),
         })
       ),
@@ -122,16 +125,17 @@ class Toolbar extends PureComponent {
           title: getStr("responsive.screenshot"),
           onClick: onScreenshot,
           disabled: screenshot.isCapturing,
         }),
         ReloadConditions({
           reloadConditions,
           onChangeReloadCondition,
         }),
+        dom.div({ className: "devtools-separator" }),
         dom.button({
           id: "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
@@ -52,16 +52,21 @@ body,
  * Common styles for shared components
  */
 
 .container {
   background-color: var(--theme-toolbar-background);
   border: 1px solid var(--theme-splitter-color);
 }
 
+.devtools-separator {
+  height: 100%;
+  margin: 0 1px;
+}
+
 .toolbar-button {
   margin: 0;
   padding: 0;
   border: none;
   color: var(--viewport-color);
 }
 
 .toolbar-button:empty:hover:not(:disabled),
@@ -171,17 +176,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;
 }
 
 /**
  * Toolbar
  */
 
 #toolbar {
@@ -199,20 +203,16 @@ select > option.divider {
 }
 
 #toolbar > .toolbar-button::before {
   width: 12px;
   height: 12px;
   background-size: cover;
 }
 
-#device-selector {
-  border-right: none;
-}
-
 #toolbar-center-controls,
 #toolbar-end-controls {
   display: flex;
   align-items: center;
 }
 
 #toolbar-center-controls {
   justify-self: center;