DevTools: account for client devicePixelRatio while capturing screenshots.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js

 // Copyright 2015 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}
  */
 WebInspector.DeviceModeView = function()
 {
@@ skipping 378 matching lines @@
          */
         function screenshotCaptured(error, content)
         {
             if (error)
                 return;
 
             // Create a canvas to splice the images together.
             var canvas = createElement("canvas");
             var ctx = canvas.getContext("2d");
             var screenRect = this._model.screenRect();
-            canvas.width = screenRect.width;
-            canvas.height = screenRect.height;
+            var dpr = window.devicePixelRatio;
+            canvas.width = screenRect.width * dpr;

[dgozman, 2016/04/27 18:34:23]

I think we'd better get scale from the
pageImage.naturalWidth / visiblePageRect.width

[pfeldman, 2016/04/27 21:11:47]

I thought about it, but it produces wrong results if the viewport is clipped.

+            canvas.height = screenRect.height * dpr;
             // Add any available screen images.
             if (this._model.screenImage()) {
                 var screenImage = new Image();
                 screenImage.crossOrigin = "Anonymous";
                 screenImage.srcset = this._model.screenImage();
-                ctx.drawImage(screenImage, 0, 0, screenRect.width, screenRect.height);
+                screenImage.onload = onImageLoad.bind(this);
+                screenImage.onerror = paintScreenshot.bind(this);
+            } else {
+                paintScreenshot.call(this);
             }
-            var pageImage = new Image();
-            pageImage.src = "data:image/png;base64," + content;
-            var visiblePageRect = this._model.visiblePageRect();
-            ctx.drawImage(pageImage, visiblePageRect.left, visiblePageRect.top, visiblePageRect.width, visiblePageRect.height);
-            var mainFrame = mainTarget.resourceTreeModel.mainFrame;
-            var fileName = mainFrame ? mainFrame.url.trimURL().removeURLFragment() : "";
-            if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
-                fileName += WebInspector.UIString("(%s)", this._model.device().title);
-            // Trigger download.
-            var link = createElement("a");
-            link.download = fileName + ".png";
-            link.href = canvas.toDataURL("image/png");
-            link.click();
+
+            /**
+             * @this {WebInspector.DeviceModeView}
+             */
+            function onImageLoad()
+            {
+                ctx.drawImage(screenImage, 0, 0, screenRect.width * dpr, screenRect.height * dpr);
+                paintScreenshot.call(this);
+            }
+
+            /**
+             * @this {WebInspector.DeviceModeView}
+             */
+            function paintScreenshot()
+            {
+                var pageImage = new Image();
+                pageImage.src = "data:image/png;base64," + content;
+                var visiblePageRect = this._model.visiblePageRect();

[dgozman, 2016/04/27 18:34:23]

.scale(dpr)

[pfeldman, 2016/04/27 21:11:47]

Done.

+                ctx.drawImage(pageImage,
+                              visiblePageRect.left * dpr,
+                              visiblePageRect.top * dpr,
+                              visiblePageRect.width * dpr,
+                              visiblePageRect.height * dpr);
+                var mainFrame = mainTarget.resourceTreeModel.mainFrame;
+                var fileName = mainFrame ? mainFrame.url.trimURL().removeURLFragment() : "";
+                if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
+                    fileName += WebInspector.UIString("(%s)", this._model.device().title);
+                // Trigger download.
+                var link = createElement("a");
+                link.download = fileName + ".png";
+                link.href = canvas.toDataURL("image/png");
+                link.click();
+            }
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {boolean} horizontal
@@ skipping 93 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }