Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans draft
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 14 Aug 2018 17:54:53 -0400 (2018-08-14)
changeset 829212 5ce1e27065eded945c86d4fd14068b81c0a7725c
parent 829211 3618a25db727c4752737e7761e0a3819fd5abb85
child 829213 69a5f7dde37abbf7f03af246bdac173936faa2b2
push id118750
push userbmo:gl@mozilla.com
push dateTue, 14 Aug 2018 21:55:43 +0000 (2018-08-14)
reviewersjryans
bugs1467572
milestone63.0a1
Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans MozReview-Commit-ID: 5B3KrG96sJh
devtools/client/responsive.html/components/App.js
devtools/client/responsive.html/components/Toolbar.js
devtools/client/responsive.html/index.css
--- 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%;
 }