Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans
MozReview-Commit-ID: 5B3KrG96sJh
--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -190,16 +190,17 @@ class App extends Component {
onChangeReloadCondition,
onChangeTouchSimulation,
onContentResize,
onDeviceListUpdate,
onExit,
onRemoveCustomDevice,
onRemoveDeviceAssociation,
onResizeViewport,
+ onRotateViewport,
onScreenshot,
onUpdateDeviceDisplayed,
onUpdateDeviceModal,
} = this;
if (!viewports.length) {
return null;
}
@@ -229,16 +230,17 @@ class App extends Component {
onChangeDevice,
onChangeNetworkThrottling,
onChangePixelRatio,
onChangeReloadCondition,
onChangeTouchSimulation,
onExit,
onRemoveDeviceAssociation,
onResizeViewport,
+ onRotateViewport,
onScreenshot,
onUpdateDeviceModal,
}),
Viewports({
screenshot,
viewports,
onBrowserMounted,
onContentResize,
--- a/devtools/client/responsive.html/components/Toolbar.js
+++ b/devtools/client/responsive.html/components/Toolbar.js
@@ -32,16 +32,17 @@ class Toolbar extends PureComponent {
onChangeDevice: PropTypes.func.isRequired,
onChangeNetworkThrottling: PropTypes.func.isRequired,
onChangePixelRatio: PropTypes.func.isRequired,
onChangeReloadCondition: PropTypes.func.isRequired,
onChangeTouchSimulation: PropTypes.func.isRequired,
onExit: PropTypes.func.isRequired,
onRemoveDeviceAssociation: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
+ onRotateViewport: PropTypes.func.isRequired,
onScreenshot: PropTypes.func.isRequired,
onUpdateDeviceModal: PropTypes.func.isRequired,
};
}
render() {
const {
devices,
@@ -56,16 +57,17 @@ class Toolbar extends PureComponent {
onChangeDevice,
onChangeNetworkThrottling,
onChangePixelRatio,
onChangeReloadCondition,
onChangeTouchSimulation,
onExit,
onRemoveDeviceAssociation,
onResizeViewport,
+ onRotateViewport,
onScreenshot,
onUpdateDeviceModal,
} = this.props;
let touchButtonClass = "toolbar-button devtools-button";
if (touchSimulation.enabled) {
touchButtonClass += " checked";
}
@@ -82,16 +84,22 @@ class Toolbar extends PureComponent {
}),
dom.div(
{ id: "toolbar-center-controls" },
ViewportDimension({
viewport,
onRemoveDeviceAssociation,
onResizeViewport,
}),
+ dom.button({
+ id: "rotate-button",
+ className: "toolbar-button devtools-button",
+ onClick: () => onRotateViewport(viewport.id),
+ title: getStr("responsive.rotate"),
+ }),
DevicePixelRatioSelector({
devices,
displayPixelRatio,
selectedDevice,
selectedPixelRatio,
onChangePixelRatio,
}),
NetworkThrottlingSelector({
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -215,16 +215,20 @@ select > option.divider {
display: flex;
align-items: center;
}
#toolbar-center-controls {
justify-self: center;
}
+#rotate-button::before {
+ background-image: url("./images/rotate-viewport.svg");
+}
+
#touch-simulation-button::before {
background-image: url("./images/touch-events.svg");
}
#screenshot-button::before {
background-image: url("./images/screenshot.svg");
}
@@ -265,25 +269,16 @@ select > option.divider {
#device-pixel-ratio-selector.selected {
color: var(--viewport-active-color);
}
#device-pixel-ratio-selector > option {
padding: 5px;
}
-.viewport-rotate-button {
- position: absolute;
- right: 0;
-}
-
-.viewport-rotate-button::before {
- background-image: url("./images/rotate-viewport.svg");
-}
-
#viewports-container {
display: flex;
justify-content: center;
overflow: auto;
height: 100%;
width: 100%;
}