Bug 1467572 - Part 8: Add proper separators to the global toolbar. r=jryans
MozReview-Commit-ID: IWfXrZSbvJE
--- 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;