[DevTools] Switch from DIP to CSS pixels in device mode.

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 38 matching lines @@
     this._widthSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._widthSlider, false);
     this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._heightSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._heightSlider, true);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
 
     this._enabled = false;
+    this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1 };
+    this._drawContentsSize = true;
+    this._viewportChangedThrottler = new WebInspector.Throttler(0);
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
     this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Events.HeightUpdated, this.onResize, this);
+    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ViewportChanged, this._viewportChanged, this);
+
     this._emulationEnabledChanged();
     this._overridesWarningUpdated();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 22;
 
 WebInspector.ResponsiveDesignView.prototype = {
     _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
+        delete this._cachedViewport;
+        delete this._cachedDrawContentsSize;
         delete this._availableSize;
     },
 
     _emulationEnabledChanged: function()
     {
         var enabled = WebInspector.overridesSupport.emulationEnabled();
         this._mediaInspector.setEnabled(enabled);
         if (enabled && !this._enabled) {
             this._invalidateCache();
             this._ignoreResize = true;
@@ skipping 63 matching lines @@
         resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate, this._onResizeUpdate, this);
         resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, this._onResizeEnd, this);
         return resizer;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeStart: function(event)
     {
+        this._drawContentsSize = false;

[lushnikov, 2014/06/26 20:21:46]

why is this needed? In fact, here and in _onResizeEnd you force canvas
repainting. Is it really necessary?

[dgozman, 2014/06/27 11:07:00]

Yes it is. Contents size is lagging behind when you drag the handle, so it's
just hidden while resizing.

         var available = this._availableDipSize();
         this._slowPositionStart = null;
         this._resizeStartSize = event.target.isVertical() ? (this._dipHeight || available.height) : (this._dipWidth || available.width);
         this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.FixedScaleRequested, true);
+        this._updateUI();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeUpdate: function(event)
     {
         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 = this._resizeStartSize + dipOffset;
         newSize = Math.round(newSize / (this._scale || 1));
         newSize = Math.max(Math.min(newSize, WebInspector.OverridesSupport.MaxDeviceSize), 1);
         var requested = {};
         if (event.target.isVertical())
             requested.height = newSize;
         else
             requested.width = newSize;
         this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, requested);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onResizeEnd: function(event)
     {
+        this._drawContentsSize = true;
         this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.FixedScaleRequested, false);
         delete this._resizeStartSize;
+        this._updateUI();
     },
 
     /**
      * Draws canvas of the specified css size in DevTools page space.
      * Canvas contains grid and rulers.
      * @param {number} cssCanvasWidth
      * @param {number} cssCanvasHeight
      */
     _drawCanvas: function(cssCanvasWidth, cssCanvasHeight)
     {
@@ skipping 14 matching lines @@
         canvas.height = deviceScaleFactor * cssCanvasHeight;
         context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHeight);
         context.font = "11px " + WebInspector.fontFamily();
 
         const rulerBackgroundColor = "rgb(0, 0, 0)";
         const backgroundColor = "rgb(102, 102, 102)";
         const lightLineColor = "rgb(132, 132, 132)";
         const darkLineColor = "rgb(114, 114, 114)";
         const rulerColor = "rgb(125, 125, 125)";
         const textColor = "rgb(186, 186, 186)";
+        const contentsSizeColor = "rgba(128, 128, 128, 0.5)";
 
-        var scale = this._scale || 1;
-        var rulerScale = 1;
-        while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 1) * scale - 1))
-            rulerScale++;
+        var scale = (this._scale || 1) * this._viewport.pageScaleFactor;
+        var rulerScale = 0.5;
+        while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) * scale - 1))
+            rulerScale += 0.5;
 
         var gridStep = 50 * scale * rulerScale;
         var gridSubStep = 10 * scale * rulerScale;
 
         var rulerSubStep = 5 * scale * rulerScale;
         var rulerStepCount = 20;
 
         var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;
         var dipGridWidth = dipCanvasWidth - rulerWidth;
         var dipGridHeight = dipCanvasHeight - rulerWidth;
+        var dipScrollX = this._viewport.scrollX * scale;
+        var dipScrollY = this._viewport.scrollY * scale;
         context.translate(rulerWidth, rulerWidth);
 
         context.fillStyle = rulerBackgroundColor;
         context.fillRect(-rulerWidth, -rulerWidth, dipGridWidth + rulerWidth, rulerWidth);
         context.fillRect(-rulerWidth, 0, rulerWidth, dipGridHeight);
 
         context.fillStyle = backgroundColor;
         context.fillRect(0, 0, dipGridWidth, dipGridHeight);
 
         context.translate(0.5, 0.5);
         context.strokeStyle = rulerColor;
         context.fillStyle = textColor;
         context.lineWidth = 1;
 
         // Draw vertical ruler.
-        for (var x, index = 0; (x = index * rulerSubStep) < dipGridWidth; index++) {
+        context.save();
+        var minXIndex = Math.ceil(dipScrollX / rulerSubStep);
+        var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep);
+        context.translate(-dipScrollX, 0);
+        for (var index = minXIndex; index <= maxXIndex; index++) {
+            var x = index * rulerSubStep;
             var y = -rulerWidth / 4;
             if (!(index % (rulerStepCount / 4)))
                 y = -rulerWidth / 2;
             if (!(index % (rulerStepCount / 2)))
                 y = -rulerWidth + 2;
 
             if (!(index % rulerStepCount)) {
                 context.save();
                 context.translate(x, 0);
                 context.fillText(Math.round(x / scale), 2, -rulerWidth / 2);
                 context.restore();
                 y = -rulerWidth;
             }
 
             context.beginPath();
             context.moveTo(x, y);
             context.lineTo(x, 0);
             context.stroke();
         }
+        context.restore();
 
         // Draw horizontal ruler.
-        for (var y, index = 0; (y = index * rulerSubStep) < dipGridHeight; index++) {
+        context.save();
+        var minYIndex = Math.ceil(dipScrollY / rulerSubStep);
+        var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep);
+        context.translate(0, -dipScrollY);
+        for (var index = minYIndex; index <= maxYIndex; index++) {
+            var y = index * rulerSubStep;
             var x = -rulerWidth / 4;
             if (!(index % (rulerStepCount / 4)))
                 x = -rulerWidth / 2;
             if (!(index % (rulerStepCount / 2)))
                 x = -rulerWidth + 2;
 
             if (!(index % rulerStepCount)) {
                 context.save();
                 context.translate(0, y);
                 context.rotate(-Math.PI / 2);
                 context.fillText(Math.round(y / scale), 2, -rulerWidth / 2);
                 context.restore();
                 x = -rulerWidth;
             }
 
             context.beginPath();
             context.moveTo(x, y);
             context.lineTo(0, y);
             context.stroke();
         }
+        context.restore();
 
         // Draw grid.
-        drawGrid(darkLineColor, gridSubStep);
-        drawGrid(lightLineColor, gridStep);
+        drawGrid(dipScrollX, dipScrollY, darkLineColor, gridSubStep);
+        drawGrid(dipScrollX, dipScrollY, lightLineColor, gridStep);
 
         /**
+         * @param {number} scrollX
+         * @param {number} scrollY
          * @param {string} color
          * @param {number} step
          */
-        function drawGrid(color, step)
+        function drawGrid(scrollX, scrollY, color, step)
         {
             context.strokeStyle = color;
-            for (var x = 0; x < dipGridWidth; x += step) {
+            var minX = Math.ceil(scrollX / step) * step;
+            var maxX = Math.floor((scrollX + dipGridWidth) / step) * step - minX;
+            var minY = Math.ceil(scrollY / step) * step;
+            var maxY = Math.floor((scrollY + dipGridHeight) / step) * step - minY;
+
+            context.save();
+            context.translate(minX - scrollX, 0);
+            for (var x = 0; x <= maxX; x += step) {
                 context.beginPath();
                 context.moveTo(x, 0);
                 context.lineTo(x, dipGridHeight);
                 context.stroke();
             }
-            for (var y = 0; y < dipGridHeight; y += step) {
+            context.restore();
+
+            context.save();
+            context.translate(0, minY - scrollY);
+            for (var y = 0; y <= maxY; y += step) {
                 context.beginPath();
                 context.moveTo(0, y);
                 context.lineTo(dipGridWidth, y);
                 context.stroke();
             }
+            context.restore();
+        }
+
+        context.translate(-0.5, -0.5);
+
+        // Draw contents size.
+        if (this._drawContentsSize) {
+            context.fillStyle = contentsSizeColor;
+            var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._viewport.contentsWidth * scale - dipScrollX));
+            var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this._viewport.contentsHeight * scale - dipScrollY));
+            context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight);
         }
     },
 
     _updateUI: function()
     {
         if (!this._enabled || !this.isShowing())
             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._canvas.parentElement.getBoundingClientRect();
         var availableDip = this._availableDipSize();
         var cssCanvasWidth = rect.width;
         var cssCanvasHeight = rect.height;
 
-        this._mediaInspector.setAxisTransform(WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor, this._scale);
+        this._mediaInspector.setAxisTransform(WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor, this._viewport.scrollX, this._scale * this._viewport.pageScaleFactor);
 
         if (this._cachedZoomFactor !== zoomFactor) {
             var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor + "px";
             this._rulerGlasspane.style.height = cssRulerWidth;
             this._rulerGlasspane.style.left = cssRulerWidth;
             this._slidersContainer.style.left = cssRulerWidth;
             this._slidersContainer.style.top = cssRulerWidth;
             this._warningMessage.style.height = cssRulerWidth;
 
             var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth / zoomFactor + "px";
             this._heightSliderContainer.style.flexBasis = cssSliderWidth;
             this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidth;
             this._widthSliderContainer.style.flexBasis = cssSliderWidth;
             this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth;
         }
 
         var cssWidth = this._dipWidth ? (this._dipWidth / zoomFactor + "px") : (availableDip.width / zoomFactor + "px");
         this._widthSliderContainer.classList.toggle("hidden", !this._dipWidth);
         this._heightSliderContainer.classList.toggle("hidden", !this._dipHeight);
         var cssHeight = this._dipHeight ? (this._dipHeight / zoomFactor + "px") : (availableDip.height / zoomFactor + "px");
         if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHeight) {
             this._slidersContainer.style.width = cssWidth;
             this._slidersContainer.style.height = cssHeight;
             this._inspectedPagePlaceholder.onResize();
         }
 
-        if (this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor)
+        var viewportChanged = !this._cachedViewport
+            || this._cachedViewport.scrollX !== this._viewport.scrollX || this._cachedViewport.scrollY !== this._viewport.scrollY
+            || this._cachedViewport.contentsWidth !== this._viewport.contentsWidth || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight
+            || this._cachedViewport.pageScaleFactor !== this._viewport.pageScaleFactor;

[lushnikov, 2014/06/26 20:21:46]

isn't this a double? worth using "fuzzy equals". 

+        if (viewportChanged || this._drawContentsSize !== this._cachedDrawContentsSize || this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor)
             this._drawCanvas(cssCanvasWidth, cssCanvasHeight);
 
         this._cachedScale = this._scale;
         this._cachedCssCanvasWidth = cssCanvasWidth;
         this._cachedCssCanvasHeight = cssCanvasHeight;
         this._cachedCssHeight = cssHeight;
         this._cachedCssWidth = cssWidth;
         this._cachedZoomFactor = zoomFactor;
+        this._cachedViewport = this._viewport;
+        this._cachedDrawContentsSize = this._drawContentsSize;
     },
 
     onResize: function()
     {
         if (!this._enabled || this._ignoreResize)
             return;
         var oldSize = this._availableSize;
         delete this._availableSize;
         var newSize = this._availableDipSize();
         if (!newSize.isEqual(oldSize))
@@ skipping 139 matching lines @@
         this._warningMessage.querySelector("span").textContent = message;
         this._invalidateCache();
         this.onResize();
     },
 
     _showEmulationInDrawer: function()
     {
         WebInspector.overridesSupport.reveal();
     },
 
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _viewportChanged: function(event)
+    {
+        var viewport = /** @type {?PageAgent.Viewport} */ (event.data);
+        if (viewport) {
+            this._viewport = viewport;
+            this._viewportChangedThrottler.schedule(this._updateUIThrottled.bind(this));
+        }
+    },
+
+    /**
+     * @param {!WebInspector.Throttler.FinishCallback} finishCallback
+     */
+    _updateUIThrottled: function(finishCallback)
+    {
+        this._updateUI();
+        finishCallback();
+    },
+
     __proto__: WebInspector.VBox.prototype
 };