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

Source/devtools/front_end/ResponsiveDesignView.js

Index: Source/devtools/front_end/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/ResponsiveDesignView.js b/Source/devtools/front_end/ResponsiveDesignView.js
index b05e8c36f9604d10bd18f47b024f169930c7ee21..1ad489c759b8b57486292fae67ec4798130b8608 100644
--- a/Source/devtools/front_end/ResponsiveDesignView.js
+++ b/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,7 +175,9 @@ WebInspector.ResponsiveDesignView.prototype = {
      */
     _onResizeUpdate: function(event)
     {
-        var cssOffset = event.data.currentPosition - event.data.startPosition;
+        if (event.data.shiftKey !== !!this._slowPositionStart)

[dgozman, 2014/06/04 09:05:24]

You will miss first update if shift was pressed before drag start. There have to
be similar |_slowPositionStart| update in |_onResizeStart|.

[lushnikov, 2014/06/04 09:14:38]

Yep, that's intentional - it doesn't affect actual usability, but saves us
couple of lines of code.

+            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 = cssOffset * WebInspector.zoomManager.zoomFactor();
         var newSize = Math.max(this._resizeStartSize + dipOffset, 1);
         var requested = new Size(this._dipWidth, this._dipHeight);