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..a71c4c8e52f95eea9686a490a0fbee4d15915f3b 100644
--- a/Source/devtools/front_end/ScreencastView.js
+++ b/Source/devtools/front_end/ScreencastView.js
@@ -151,8 +151,8 @@ WebInspector.ScreencastView.prototype = {
     {
         var metadata = /** type {PageAgent.ScreencastFrameMetadata} */(event.data.metadata);
 
-        if (!metadata.deviceScaleFactor) {
-          console.log(event.data.data);
+        if (!metadata || !metadata.deviceScaleFactor) {
+          console.error(event.data.data);

[pfeldman, 2014/06/20 17:59:52]

Lets remove this message.

[vkuzkokov, 2014/06/23 10:57:12]

Done.

           return;
         }
 
@@ -166,12 +166,18 @@ 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);
+        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 bordersSize = WebInspector.ScreencastView._bordersSize;
+        this._viewportElement.classList.remove("hidden");
+        this._viewportElement.style.width = this._imageElement.naturalWidth + bordersSize + "px";
+        this._viewportElement.style.height = this._imageElement.naturalHeight + Math.floor((offsetTop + offsetBottom) * this._screenZoom) + bordersSize + "px";
+
+        this._imageZoom = 1;// this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;

[pfeldman, 2014/06/20 17:59:52]

Please remove this.

[pfeldman, 2014/06/23 06:44:38]

Note that we also need to make this work with devicePixelRatio > 1 on the
client.

[vkuzkokov, 2014/06/23 10:57:12]

Done.

         this.highlightDOMNode(this._highlightNode, this._highlightConfig);
     },
 
@@ -234,21 +240,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 +272,7 @@ WebInspector.ScreencastView.prototype = {
             if (!node)
                 return;
             if (event.type === "mousemove")
-                node.highlight(this._inspectModeConfig);
+                this.highlightDOMNode(node, this._inspectModeConfig);
             else if (event.type === "click")
                 node.reveal();
         }
@@ -817,8 +808,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 };
     },
 
     /**