DevTools: [Responsive design] shift-drag resize widget for more precise dragging

This patch makes it possible to shift-drag resize widgets on responsive
design page to slow down their movement.

BUG=380190

Review URL: https://codereview.chromium.org/312813002

git-svn-id: svn://svn.chromium.org/blink/trunk@175473 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js

@@ -166,6 +166,7 @@ WebInspector.ResponsiveDesignView.prototype = {
     _onResizeStart: function(event)
     {
         var available = this.availableDipSize();
+        this._slowPositionStart = null;
         this._resizeStartSize = event.target.isVertical() ? (this._dipHeight || available.height) : (this._dipWidth || available.width);
     },
 
@@ -174,8 +175,10 @@ WebInspector.ResponsiveDesignView.prototype = {
      */
     _onResizeUpdate: function(event)
     {
-        var cssOffset = event.data.currentPosition - event.data.startPosition;
-        var dipOffset = cssOffset * WebInspector.zoomManager.zoomFactor();
+        if (event.data.shiftKey !== !!this._slowPositionStart)
+            this._slowPositionStart = event.data.shiftKey ? event.data.currentPosition : null;
+        var cssOffset = this._slowPositionStart ? (event.data.currentPosition - this._slowPositionStart) / 10 + this._slowPositionStart - event.data.startPosition : event.data.currentPosition - event.data.startPosition;
+        var dipOffset = Math.round(cssOffset * WebInspector.zoomManager.zoomFactor());
         var newSize = Math.max(this._resizeStartSize + dipOffset, 1);
         var requested = new Size(this._dipWidth, this._dipHeight);
         if (event.target.isVertical())

third_party/WebKit/Source/devtools/front_end/ui/ResizerWidget.js

@@ -17,9 +17,9 @@ WebInspector.ResizerWidget = function()
 };
 
 WebInspector.ResizerWidget.Events = {
-    ResizeStart: "ResizeStart",  // Data: {{startPosition: number, currentPosition: number}}.
-    ResizeUpdate: "ResizeUpdate",  // Data: {{startPosition: number, currentPosition: number}}.
-    ResizeEnd: "ResizeEnd"  // No data.
+    ResizeStart: "ResizeStart",
+    ResizeUpdate: "ResizeUpdate",
+    ResizeEnd: "ResizeEnd"
 };
 
 WebInspector.ResizerWidget.prototype = {
@@ -138,7 +138,7 @@ WebInspector.ResizerWidget.prototype = {
         }
 
         var position = this._isVertical ? event.pageY : event.pageX;
-        this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startPosition: this._startPosition, currentPosition: position });
+        this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startPosition: this._startPosition, currentPosition: position, shiftKey: event.shiftKey });
         event.preventDefault();
         return false;  // Continue drag.
     },