Bug 1467572 - Part 7: Add rotate viewport button to the global toolbar. r=jryans
☠☠ backed out by dc2c0b075c0e ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Wed, 15 Aug 2018 17:27:37 -0400
changeset 431821 0f19f84bb2edb6eb55a6e1f4e29319e95981cbd5
parent 431820 e83526778ccde7eb8d9deb9c2422efa7bfe9f02f
child 431822 5880a55d2ee802f860490629df481a9da16a8160
push id34451
push userebalazs@mozilla.com
push dateThu, 16 Aug 2018 09:25:15 +0000
treeherdermozilla-central@161817e6d127 [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%;
 }