Bug 1572840 Part 2: Make the RDM viewport render scaled to the viewport.zoom property. r=gl
authorBrad Werth <bwerth@mozilla.com>
Fri, 30 Aug 2019 18:44:29 +0000
changeset 551446 038722cc5bf49e63c2dc411788ca549bebac3eb7
parent 551445 23feecbe07eb871cd41d849da963c7e734c40ce3
child 551447 8cd803e497e700233742053f9fd663ab1c5e95ee
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1572840
milestone70.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 1572840 Part 2: Make the RDM viewport render scaled to the viewport.zoom property. r=gl Differential Revision: https://phabricator.services.mozilla.com/D41465
devtools/client/responsive/components/ResizableViewport.js
--- a/devtools/client/responsive/components/ResizableViewport.js
+++ b/devtools/client/responsive/components/ResizableViewport.js
@@ -61,44 +61,44 @@ class ResizableViewport extends PureComp
   }
 
   onResizeDrag({ clientX, clientY }) {
     if (!this.state.isResizing) {
       return;
     }
 
     let { lastClientX, lastClientY, ignoreX, ignoreY } = this.state;
-    let deltaX = clientX - lastClientX;
-    let deltaY = clientY - lastClientY;
+    let deltaX = (clientX - lastClientX) / this.props.viewport.zoom;
+    let deltaY = (clientY - lastClientY) / this.props.viewport.zoom;
 
     if (!this.props.leftAlignmentEnabled) {
       // The viewport is centered horizontally, so horizontal resize resizes
       // by twice the distance the mouse was dragged - on left and right side.
       deltaX = deltaX * 2;
     }
 
     if (ignoreX) {
       deltaX = 0;
     }
     if (ignoreY) {
       deltaY = 0;
     }
 
-    let width = this.props.viewport.width + deltaX;
-    let height = this.props.viewport.height + deltaY;
+    let width = Math.round(this.props.viewport.width + deltaX);
+    let height = Math.round(this.props.viewport.height + deltaY);
 
     if (width < VIEWPORT_MIN_WIDTH) {
       width = VIEWPORT_MIN_WIDTH;
-    } else {
+    } else if (width != this.props.viewport.width) {
       lastClientX = clientX;
     }
 
     if (height < VIEWPORT_MIN_HEIGHT) {
       height = VIEWPORT_MIN_HEIGHT;
-    } else {
+    } else if (height != this.props.viewport.height) {
       lastClientY = clientY;
     }
 
     // Update the viewport store with the new width and height.
     const { doResizeViewport, viewport } = this.props;
     doResizeViewport(viewport.id, width, height);
     // Change the device selector back to an unselected device
     // TODO: Bug 1332754: Logic like this probably belongs in the action creator.
@@ -166,18 +166,18 @@ class ResizableViewport extends PureComp
     return dom.div(
       { className: "viewport" },
       dom.div(
         { className: "resizable-viewport" },
         dom.div(
           {
             className: contentClass,
             style: {
-              width: viewport.width + "px",
-              height: viewport.height + "px",
+              width: Math.round(viewport.width * viewport.zoom) + "px",
+              height: Math.round(viewport.height * viewport.zoom) + "px",
             },
           },
           Browser({
             swapAfterMount,
             userContextId: viewport.userContextId,
             viewport,
             onBrowserMounted,
             onChangeViewportOrientation,