Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:37 -0400
changeset 486952 c208d5b5b7462b19efc3556d112c346c93842307
parent 486951 9f1db12b0ab98e66e49a0816a353ce99e7acdaa9
child 486953 aa2ea377f944d50885514d39d6568a510fe797e9
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 7: Add rotate viewport button to the global toolbar. r=jryans
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
@@ -213,16 +213,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");
 }
 
@@ -263,25 +267,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%;
 }