DevTools: account for client devicePixelRatio while capturing screenshots.

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

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
index 37f2b43e33b611a8f0f1f7ebf607df4cbf25948b..ced726fae0bb62245896f169caa4aed220eeacc3 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
@@ -396,28 +396,52 @@ WebInspector.DeviceModeView.prototype = {
             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);
+            }
+
+            /**
+             * @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();
             }
-            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();
         }
     },