Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 00:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans

Browse Source
This commit is contained in:
Gabriel Luong 2018-08-15 17:27:37 -04:00
parent 3f628eefa6
commit d280f20fc3
3 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/responsive.html/components/App.js
View File

@ -195,6 +195,7 @@ class App extends Component {
onRemoveCustomDevice,
onRemoveDeviceAssociation,
onResizeViewport,
onRotateViewport,
onScreenshot,
onUpdateDeviceDisplayed,
onUpdateDeviceModal,
@ -234,6 +235,7 @@ class App extends Component {
onExit,
onRemoveDeviceAssociation,
onResizeViewport,
onRotateViewport,
onScreenshot,
onUpdateDeviceModal,
}),

8
devtools/client/responsive.html/components/Toolbar.js
View File

@ -37,6 +37,7 @@ class Toolbar extends PureComponent {
onExit: PropTypes.func.isRequired,
onRemoveDeviceAssociation: PropTypes.func.isRequired,
onResizeViewport: PropTypes.func.isRequired,
onRotateViewport: PropTypes.func.isRequired,
onScreenshot: PropTypes.func.isRequired,
onUpdateDeviceModal: PropTypes.func.isRequired,
};
@ -61,6 +62,7 @@ class Toolbar extends PureComponent {
onExit,
onRemoveDeviceAssociation,
onResizeViewport,
onRotateViewport,
onScreenshot,
onUpdateDeviceModal,
} = this.props;
@ -87,6 +89,12 @@ class Toolbar extends PureComponent {
onRemoveDeviceAssociation,
onResizeViewport,
}),
dom.button({
id: "rotate-button",
className: "toolbar-button devtools-button",
onClick: () => onRotateViewport(viewport.id),
title: getStr("responsive.rotate"),
}),
DevicePixelRatioSelector({
devices,
displayPixelRatio,

13
devtools/client/responsive.html/index.css
View File

@ -218,6 +218,10 @@ select > option.divider {
justify-self: center;
}
#rotate-button::before {
background-image: url("./images/rotate-viewport.svg");
}
#touch-simulation-button::before {
background-image: url("./images/touch-events.svg");
}
@ -268,15 +272,6 @@ select > option.divider {
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;