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

Source/devtools/front_end/ResponsiveDesignView.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
@@ skipping 148 matching lines @@
         resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);
         return resizer;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeStart: function(event)
     {
         var available = this.availableDipSize();
+        this._slowPositionStart = null;
         this._resizeStartSize = event.target.isVertical() ? (this._dipHeight || available.height) : (this._dipWidth || available.width);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _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);
         if (event.target.isVertical())
             requested.height = newSize;
         else
             requested.width = newSize;
         this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, requested);
     },
 
@@ skipping 273 matching lines @@
         if (this._warningMessage.textContent === message)
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
         this._responsiveDesignModeChanged();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };