DevTools: Screencast view scaling

Source/devtools/front_end/ScreencastView.js

Index: Source/devtools/front_end/ScreencastView.js
diff --git a/Source/devtools/front_end/ScreencastView.js b/Source/devtools/front_end/ScreencastView.js
index 3344a14fa7a0e4fd710194dd44f2a423134705e7..d066eea2b43a5b159638f55cc8e13d06defa74b7 100644
--- a/Source/devtools/front_end/ScreencastView.js
+++ b/Source/devtools/front_end/ScreencastView.js
@@ -123,14 +123,14 @@ WebInspector.ScreencastView.prototype = {
             return;
         this._isCasting = true;
 
-        const maxImageDimension = 1024;
+        const maxImageDimension = 2048;
         var dimensions = this._viewportDimensions();
         if (dimensions.width < 0 || dimensions.height < 0) {
             this._isCasting = false;
             return;
         }
-        dimensions.width *= WebInspector.zoomManager.zoomFactor();
-        dimensions.height *= WebInspector.zoomManager.zoomFactor();
+        dimensions.width *= window.devicePixelRatio;
+        dimensions.height *= window.devicePixelRatio;
         this._target.pageAgent().startScreencast("jpeg", 80, Math.min(maxImageDimension, dimensions.width), Math.min(maxImageDimension, dimensions.height));
         this._target.domModel.setHighlighter(this);
     },
@@ -150,28 +150,27 @@ WebInspector.ScreencastView.prototype = {
     _screencastFrame: function(event)
     {
         var metadata = /** type {PageAgent.ScreencastFrameMetadata} */(event.data.metadata);
-
-        if (!metadata.deviceScaleFactor) {
-          console.log(event.data.data);
-          return;
-        }
-
         var base64Data = /** type {string} */(event.data.data);
         this._imageElement.src = "data:image/jpg;base64," + base64Data;
-        this._deviceScaleFactor = metadata.deviceScaleFactor;
         this._pageScaleFactor = metadata.pageScaleFactor;
-        this._viewport = metadata.viewport;
-        if (!this._viewport)
-            return;
-        var offsetTop = metadata.offsetTop || 0;
-        var offsetBottom = metadata.offsetBottom || 0;
+        this._screenOffsetTop = metadata.offsetTop;
+        this._deviceWidth = metadata.deviceWidth;
+        this._deviceHeight = metadata.deviceHeight;
+        this._scrollOffsetX = metadata.scrollOffsetX;
+        this._scrollOffsetY = metadata.scrollOffsetY;
 
-        var screenWidthDIP = this._viewport.width * this._pageScaleFactor;
-        var screenHeightDIP = this._viewport.height * this._pageScaleFactor + offsetTop + offsetBottom;
-        this._screenOffsetTop = offsetTop;
-        this._resizeViewport(screenWidthDIP, screenHeightDIP);
+        var deviceSizeRatio = metadata.deviceHeight / metadata.deviceWidth;
+        var dimensionsCSS = this._viewportDimensions();
+
+        this._imageZoom = Math.min(dimensionsCSS.width / this._imageElement.naturalWidth, dimensionsCSS.height / (this._imageElement.naturalWidth * deviceSizeRatio));
+        this._viewportElement.classList.remove("hidden");
+        var bordersSize = WebInspector.ScreencastView._bordersSize;
+        if (this._imageZoom < 1.01 / window.devicePixelRatio)
+            this._imageZoom = 1 / window.devicePixelRatio;
+        this._screenZoom = this._imageElement.naturalWidth * this._imageZoom / metadata.deviceWidth;
+        this._viewportElement.style.width = metadata.deviceWidth * this._screenZoom + bordersSize + "px";
+        this._viewportElement.style.height = metadata.deviceHeight * this._screenZoom + bordersSize + "px";
 
-        this._imageZoom = this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;
         this.highlightDOMNode(this._highlightNode, this._highlightConfig);
     },
 
@@ -234,21 +233,6 @@ WebInspector.ScreencastView.prototype = {
     },
 
     /**
-     * @param {number} screenWidthDIP
-     * @param {number} screenHeightDIP
-     */
-    _resizeViewport: function(screenWidthDIP, screenHeightDIP)
-    {
-        var dimensions = this._viewportDimensions();
-        this._screenZoom = Math.min(dimensions.width / screenWidthDIP, dimensions.height / screenHeightDIP);
-
-        var bordersSize = WebInspector.ScreencastView._bordersSize;
-        this._viewportElement.classList.remove("hidden");
-        this._viewportElement.style.width = screenWidthDIP * this._screenZoom + bordersSize + "px";
-        this._viewportElement.style.height = screenHeightDIP * this._screenZoom + bordersSize + "px";
-    },
-
-    /**
      * @param {?Event} event
      */
     _handleMouseEvent: function(event)
@@ -258,7 +242,7 @@ WebInspector.ScreencastView.prototype = {
           return;
         }
 
-        if (!this._viewport)
+        if (!this._pageScaleFactor)
             return;
 
         if (!this._inspectModeConfig || event.type === "mousewheel") {
@@ -270,7 +254,7 @@ WebInspector.ScreencastView.prototype = {
         }
 
         var position = this._convertIntoScreenSpace(event);
-        this._target.domModel.nodeForLocation(position.x / this._pageScaleFactor, position.y / this._pageScaleFactor, callback.bind(this));
+        this._target.domModel.nodeForLocation(position.x / this._pageScaleFactor + this._scrollOffsetX, position.y / this._pageScaleFactor + this._scrollOffsetY, callback.bind(this));
 
         /**
          * @param {?WebInspector.DOMNode} node
@@ -494,7 +478,7 @@ WebInspector.ScreencastView.prototype = {
      */
     _zoomIntoScreenSpace: function(event)
     {
-        var zoom = this._canvasElement.offsetWidth / this._viewport.width / this._pageScaleFactor;
+        var zoom = this._canvasElement.offsetWidth / this._deviceWidth;

[dgozman, 2014/06/27 12:07:22]

This seems to be equal to _screenZoom.

[vkuzkokov, 2014/06/27 13:31:02]

It is. Replaced and inlined

         var position  = {};
         position.x = Math.round(event.offsetX / zoom);
         position.y = Math.round(event.offsetY / zoom);
@@ -568,7 +552,7 @@ WebInspector.ScreencastView.prototype = {
          */
         function callback(model)
         {
-            if (!model) {
+            if (!model || !this._pageScaleFactor) {
                 this._repaint();
                 return;
             }
@@ -584,7 +568,7 @@ WebInspector.ScreencastView.prototype = {
      */
     _scaleModel: function(model)
     {
-        var scale = this._canvasElement.offsetWidth / this._viewport.width;
+        var scale = this._canvasElement.offsetWidth * this._pageScaleFactor / this._deviceWidth;

[dgozman, 2014/06/27 12:07:22]

this is |_screenZoom * _pageScaleFactor|

[vkuzkokov, 2014/06/27 13:31:02]

Replaced and inlined

 
         /**
          * @param {!DOMAgent.Quad} quad
@@ -593,8 +577,8 @@ WebInspector.ScreencastView.prototype = {
         function scaleQuad(quad)
         {
             for (var i = 0; i < quad.length; i += 2) {
-                quad[i] = (quad[i] - this._viewport.x) * scale;
-                quad[i + 1] = (quad[i + 1] - this._viewport.y) * scale + this._screenOffsetTop * this._screenZoom;
+                quad[i] = (quad[i] - this._scrollOffsetX) * scale;
+                quad[i + 1] = (quad[i + 1] - this._scrollOffsetY) * scale + this._screenOffsetTop * this._screenZoom;
             }
         }
 
@@ -610,8 +594,8 @@ WebInspector.ScreencastView.prototype = {
         var model = this._model;
         var config = this._config;
 
-        this._canvasElement.width = window.devicePixelRatio * this._canvasElement.offsetWidth;
-        this._canvasElement.height = window.devicePixelRatio * this._canvasElement.offsetHeight;
+        this._canvasElement.width = window.devicePixelRatio * this._canvasElement.getBoundingClientRect().width;
+        this._canvasElement.height = window.devicePixelRatio * this._canvasElement.getBoundingClientRect().height;
 
         this._context.save();
         this._context.scale(window.devicePixelRatio, window.devicePixelRatio);
@@ -654,8 +638,8 @@ WebInspector.ScreencastView.prototype = {
         }
 
         this._context.drawImage(this._imageElement, 0, this._screenOffsetTop * this._screenZoom, this._imageElement.naturalWidth * this._imageZoom, this._imageElement.naturalHeight * this._imageZoom);
-
         this._context.restore();
+
     },
 
 
@@ -817,8 +801,9 @@ WebInspector.ScreencastView.prototype = {
     {
         const gutterSize = 30;
         const bordersSize = WebInspector.ScreencastView._bordersSize;
-        return { width: this.element.offsetWidth - bordersSize - gutterSize,
-                 height: this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight};
+        var width = this.element.offsetWidth - bordersSize - gutterSize;
+        var height = this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight;
+        return { width: width, height: height };
     },
 
     /**