Bug 1250138 - The mouse cursor doesn't stick to the grippers while resizing the viewport. r=jryans

devtools/client/responsive.html/components/resizable-viewport.js

@@ -74,8 +74,10 @@ module.exports = createClass({
     }
 
     let { lastClientX, lastClientY, ignoreX, ignoreY } = this.state;
-    let deltaX = clientX - lastClientX;
-    let deltaY = clientY - lastClientY;
+    // we are resizing a centered viewport, so dragging a mouse resizes
+    // twice as much - also on opposite side.
+    let deltaX = 2 * (clientX - lastClientX);
+    let deltaY = 2 * (clientY - lastClientY);
 
     if (ignoreX) {
       deltaX = 0;

devtools/client/responsive.html/test/browser/browser.ini

@@ -11,6 +11,7 @@ support-files =
 
 [browser_device_width.js]
 [browser_exit_button.js]
+[browser_mouse_resize.js]
 [browser_resize_cmd.js]
 [browser_screenshot_button.js]
 [browser_viewport_basics.js]

devtools/client/responsive.html/test/browser/browser_mouse_resize.js

@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = "about:logo";
+
+function dragElementBy(selector, x, y, win) {
+  let el = win.document.querySelector(selector);
+  let rect = el.getBoundingClientRect();
+  let startPoint = [ rect.left + rect.width / 2, rect.top + rect.height / 2 ];
+  let endPoint = [ startPoint[0] + x, startPoint[1] + y ];
+
+  EventUtils.synthesizeMouseAtPoint(...startPoint, { type: "mousedown" }, win);
+  EventUtils.synthesizeMouseAtPoint(...endPoint, { type: "mousemove" }, win);
+  EventUtils.synthesizeMouseAtPoint(...endPoint, { type: "mouseup" }, win);
+}
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  ok(ui, "An instance of the RDM should be attached to the tab.");
+  yield setViewportSize(ui, manager, 300, 300);
+  let win = ui.toolWindow;
+
+  // Do horizontal + vertical resize
+  let resized = waitForViewportResizeTo(ui, 320, 320);
+  dragElementBy(".viewport-resize-handle", 10, 10, win);
+  yield resized;
+
+  // Do horizontal resize
+  let hResized = waitForViewportResizeTo(ui, 300, 320);
+  dragElementBy(".viewport-horizontal-resize-handle", -10, -10, win);
+  yield hResized;
+
+  // Do vertical resize
+  let vResized = waitForViewportResizeTo(ui, 300, 300);
+  dragElementBy(".viewport-vertical-resize-handle", -10, -10, win);
+  yield vResized;
+});