DevTools: Screencast view scaling

Source/devtools/front_end/ScreencastView.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 105 matching lines @@
     },
 
     _startCasting: function()
     {
         if (this._timelineActive || this._profilerActive)
             return;
         if (this._isCasting)
             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);
     },
 
     _stopCasting: function()
     {
         if (!this._isCasting)
             return;
         this._isCasting = false;
         this._target.pageAgent().stopScreencast();
         this._target.domModel.setHighlighter(null);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _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;
+        var offsetTopDIP = metadata.offsetTop || 0;
+        var offsetBottomDIP = metadata.offsetBottom || 0;
+        this._screenOffsetTop = offsetTopDIP;
 
-        var screenWidthDIP = this._viewport.width * this._pageScaleFactor;
-        var screenHeightDIP = this._viewport.height * this._pageScaleFactor + offsetTop + offsetBottom;
-        this._screenOffsetTop = offsetTop;
-        this._resizeViewport(screenWidthDIP, screenHeightDIP);
+        var totalBarHeightDIP = offsetTopDIP + offsetBottomDIP;
+        var deviceWidthDIP = Math.round(this._viewport.width);
+        var deviceHeightDIP = Math.round(this._viewport.height + totalBarHeightDIP);

[pfeldman, 2014/06/24 16:24:59]

Lets pass device dimensions from the backend instead.

[vkuzkokov, 2014/06/25 12:17:39]

Done.

+        var deviceSizeRatio = deviceHeightDIP / deviceWidthDIP;
 
-        this._imageZoom = this._imageElement.naturalWidth ? this._canvasElement.offsetWidth / this._imageElement.naturalWidth : 1;
+        var dimensionsCSS = this._viewportDimensions();
+        var dimensions = { width : dimensionsCSS.width * window.devicePixelRatio, height : dimensionsCSS.height * window.devicePixelRatio };
+
+        // _imageZoom - screen pixels per pixel of the image
+        this._imageZoom = Math.min(dimensions.width / this._imageElement.naturalWidth, dimensions.height / (this._imageElement.naturalWidth * deviceSizeRatio));
+        this._viewportElement.classList.remove("hidden");
+        var bordersSize = WebInspector.ScreencastView._bordersSize;
+        if (this._imageZoom < 1.01) {
+            this._imageZoom = 1;
+            // _screenZoom - screen pixels per DIP
+            this._screenZoom = this._imageElement.naturalWidth / deviceWidthDIP;
+            this._viewportElement.style.width = this._imageElement.naturalWidth / window.devicePixelRatio + bordersSize + "px";
+            this._viewportElement.style.height = (this._imageElement.naturalHeight + Math.round(totalBarHeightDIP * this._screenZoom)) / window.devicePixelRatio  + bordersSize + "px";
+        } else {
+            // _screenZoom - screen pixels per DIP
+            this._screenZoom = Math.min(dimensions.width / deviceWidthDIP, dimensions.height / deviceHeightDIP);
+            this._viewportElement.style.width = deviceWidthDIP * this._screenZoom / window.devicePixelRatio + bordersSize + "px";
+            this._viewportElement.style.height = deviceHeightDIP * this._screenZoom / window.devicePixelRatio + bordersSize + "px";
+        }
+
         this.highlightDOMNode(this._highlightNode, this._highlightConfig);
     },
 
     _isGlassPaneActive: function()
     {
         return !this._glassPaneElement.classList.contains("hidden");
     },
 
     /**
      * @param {!WebInspector.Event} event
@@ skipping 42 matching lines @@
             this._glassPaneElement.classList.remove("hidden");
         } else if (this._profilerActive) {
             this._glassPaneElement.textContent = WebInspector.UIString("CPU profiler is active");
             this._glassPaneElement.classList.remove("hidden");
         } else {
             this._glassPaneElement.classList.add("hidden");
         }
     },
 
     /**
-     * @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)
     {
         if (this._isGlassPaneActive()) {
           event.consume();
           return;
         }
 
         if (!this._viewport)
@@ skipping 12 matching lines @@
 
         /**
          * @param {?WebInspector.DOMNode} node
          * @this {WebInspector.ScreencastView}
          */
         function callback(node)
         {
             if (!node)
                 return;
             if (event.type === "mousemove")
-                this.highlightDOMNode(node, this._inspectModeConfig);
+                node.highlight(this._inspectModeConfig);

[pfeldman, 2014/06/24 16:24:59]

Roll back

[vkuzkokov, 2014/06/25 12:17:39]

Done.

             else if (event.type === "click")
                 node.reveal();
         }
     },
 
     /**
      * @param {?Event} event
      */
     _handleKeyEvent: function(event)
     {
@@ skipping 192 matching lines @@
         default:
         }
     },
 
     /**
      * @param {?Event} event
      * @return {!{x: number, y: number}}
      */
     _zoomIntoScreenSpace: function(event)
     {
-        var zoom = this._canvasElement.offsetWidth / this._viewport.width / this._pageScaleFactor;
+        var zoom = this._canvasElement.offsetWidth / this._viewport.width;
         var position  = {};
         position.x = Math.round(event.offsetX / zoom);
         position.y = Math.round(event.offsetY / zoom);
         return position;
     },
 
     /**
      * @param {?Event} event
      * @return {!{x: number, y: number}}
      */
@@ skipping 53 matching lines @@
 
         this._node = node;
         node.boxModel(callback.bind(this));
 
         /**
          * @param {?DOMAgent.BoxModel} model
          * @this {WebInspector.ScreencastView}
          */
         function callback(model)
         {
-            if (!model) {
+            if (!model || !this._viewport) {
                 this._repaint();
                 return;
             }
             this._model = this._scaleModel(model);
             this._config = config;
             this._repaint();
         }
     },
 
     /**
@@ skipping 30 matching lines @@
 
         this._canvasElement.width = window.devicePixelRatio * this._canvasElement.offsetWidth;
         this._canvasElement.height = window.devicePixelRatio * this._canvasElement.offsetHeight;
 
         this._context.save();
         this._context.scale(window.devicePixelRatio, window.devicePixelRatio);
 
         // 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) {
             this._context.save();
             const transparentColor = "rgba(0, 0, 0, 0)";
             var hasContent = model.content && config.contentColor !== transparentColor;
             var hasPadding = model.padding && config.paddingColor !== transparentColor;
             var hasBorder = model.border && config.borderColor !== transparentColor;
             var hasMargin = model.margin && config.marginColor !== transparentColor;
 
@@ skipping 12 matching lines @@
             }
             if (hasContent)
                 this._drawOutlinedQuad(model.content, config.contentColor);
             this._context.restore();
 
             this._drawElementTitle();
 
             this._context.globalCompositeOperation = "destination-over";
         }
 
+        this._context.restore();
         this._context.drawImage(this._imageElement, 0, this._screenOffsetTop * this._screenZoom, this._imageElement.naturalWidth * this._imageZoom, this._imageElement.naturalHeight * this._imageZoom);
 
-        this._context.restore();
     },
 
 
     /**
      * @param {!DOMAgent.Quad} quad1
      * @param {!DOMAgent.Quad} quad2
      * @return {boolean}
      */
     _quadsAreEqual: function(quad1, quad2)
     {
@@ skipping 141 matching lines @@
         this._titleElement.style.left = (boxX + 3) + "px";
     },
 
     /**
      * @return {!{width: number, height: number}}
      */
     _viewportDimensions: function()
     {
         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 };
     },
 
     /**
      * @param {boolean} enabled
      * @param {boolean} inspectUAShadowDOM
      * @param {!DOMAgent.HighlightConfig} config
      * @param {function(?Protocol.Error)=} callback
      */
     setInspectModeEnabled: function(enabled, inspectUAShadowDOM, config, callback)
     {
@@ skipping 182 matching lines @@
           return;
         this._maxDisplayedProgress = progress;
         this._displayProgress(progress);
     },
 
     _displayProgress: function(progress)
     {
         this._element.style.width = (100 * progress) + "%";
     }
 };