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 cc5724da6fa00580b793f1073ca08e02ffc8fc27..d809c1db6e35d2b290caf6e652a9d1af07983175 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 *= WebInspector.zoomManager.zoomFactor() * window.devicePixelRatio;
+        dimensions.height *= WebInspector.zoomManager.zoomFactor() * window.devicePixelRatio;
         this._target.pageAgent().startScreencast("jpeg", 80, Math.min(maxImageDimension, dimensions.width), Math.min(maxImageDimension, dimensions.height));
         this._target.domModel.setHighlighter(this);
     },
@@ -150,12 +150,6 @@ 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;
@@ -166,12 +160,27 @@ WebInspector.ScreencastView.prototype = {
         var offsetTop = metadata.offsetTop || 0;
         var offsetBottom = metadata.offsetBottom || 0;
 
-        var screenWidthDIP = this._viewport.width * this._pageScaleFactor;
-        var screenHeightDIP = this._viewport.height * this._pageScaleFactor + offsetTop + offsetBottom;
+        // Physical device size.
+        var screenWidthDIP = Math.round(this._viewport.width * this._pageScaleFactor);

[pfeldman, 2014/06/23 12:43:12]

Can we send screen size DIP from the backend instead?

[vkuzkokov, 2014/06/23 16:54:53]

Backend patch:
https://codereview.chromium.org/351633002

+        var screenHeightDIP = Math.round(this._viewport.height * this._pageScaleFactor + offsetTop + offsetBottom);
+
+        this._screenZoom = this._imageElement.naturalWidth / screenWidthDIP;
         this._screenOffsetTop = offsetTop;
-        this._resizeViewport(screenWidthDIP, screenHeightDIP);
 
-        this._imageZoom = this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;
+        var dimensions = this._viewportDimensions();
+        this._imageZoom = Math.min(dimensions.width / screenWidthDIP, dimensions.height / screenHeightDIP) * window.devicePixelRatio / this._screenZoom;

[pfeldman, 2014/06/23 12:43:12]

This value has nothing to do with the imageZoom, right?

[vkuzkokov, 2014/06/23 16:54:53]

Multiplication by _imageZoom translates pixels of the image into real pixels on
screen.

+        this._viewportElement.classList.remove("hidden");
+        var bordersSize = WebInspector.ScreencastView._bordersSize;
+        if (this._imageZoom < 1.01) {
+            this._imageZoom = 1;
+            this._viewportElement.style.width = this._imageElement.naturalWidth / window.devicePixelRatio + bordersSize + "px";
+            this._viewportElement.style.height = (this._imageElement.naturalHeight + Math.floor((offsetTop + offsetBottom) * this._screenZoom)) / window.devicePixelRatio  + bordersSize + "px";
+        } else {
+            this._screenZoom *= this._imageZoom;
+            this._viewportElement.style.width = screenWidthDIP / window.devicePixelRatio * this._screenZoom + bordersSize + "px";

[pfeldman, 2014/06/23 12:43:12]

This is again confusing - why would we divide screenWidthDIP by
devicePixelRatio? Screen width DIP is DIP, viewport's style is DIP, why dividing
my dpr?

[vkuzkokov, 2014/06/23 16:54:53]

Perhaps, the ordering was unfortunate.
screenWidthDIP * this._screenZoom / window.devicePixelRatio is better.
DIP of device is translated into real pixels of the client and then into DIP of
the client.

+            this._viewportElement.style.height = screenHeightDIP / window.devicePixelRatio * this._screenZoom + bordersSize + "px";
+        }
+
         this.highlightDOMNode(this._highlightNode, this._highlightConfig);
     },
 
@@ -234,21 +243,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)
@@ -281,7 +275,7 @@ WebInspector.ScreencastView.prototype = {
             if (!node)
                 return;
             if (event.type === "mousemove")
-                node.highlight(this._inspectModeConfig);
+                this.highlightDOMNode(node, this._inspectModeConfig);

[pfeldman, 2014/06/23 12:43:12]

I fixed it in a separate patch.

[vkuzkokov, 2014/06/23 16:54:53]

Removed fix from this patch

             else if (event.type === "click")
                 node.reveal();
         }
@@ -568,7 +562,7 @@ WebInspector.ScreencastView.prototype = {
          */
         function callback(model)
         {
-            if (!model) {
+            if (!model || !this._viewport) {
                 this._repaint();
                 return;
             }
@@ -619,8 +613,8 @@ WebInspector.ScreencastView.prototype = {
         // Paint top and bottom gutter.
         this._context.save();
         this._context.fillStyle = this._checkerboardPattern;
-        this._context.fillRect(0, 0, this._canvasElement.offsetWidth, this._screenOffsetTop * this._screenZoom);
-        this._context.fillRect(0, this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom, this._canvasElement.offsetWidth, this._canvasElement.offsetHeight);
+        this._context.fillRect(0, 0, this._canvasElement.offsetWidth, (this._screenOffsetTop * this._screenZoom) / window.devicePixelRatio);
+        this._context.fillRect(0, (this._screenOffsetTop * this._screenZoom + this._imageElement.naturalHeight * this._imageZoom) / window.devicePixelRatio, this._canvasElement.offsetWidth, this._canvasElement.offsetHeight);
         this._context.restore();
 
         if (model && config) {
@@ -653,6 +647,7 @@ WebInspector.ScreencastView.prototype = {
             this._context.globalCompositeOperation = "destination-over";
         }
 
+        this._context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
         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 +812,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 = Math.floor(this.element.offsetWidth - bordersSize - gutterSize);
+        var height = Math.floor(this.element.offsetHeight - bordersSize - gutterSize - WebInspector.ScreencastView._navBarHeight);
+        return { width: width, height: height };
     },
 
     /**