[DevTools] Draw screen border below screen image when taking screenshot.

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 392 matching lines @@
             screenRect.top -= outlineRect.top;
             var visiblePageRect = this._model.visiblePageRect().scale(dpr);
             visiblePageRect.left += screenRect.left;
             visiblePageRect.top += screenRect.top;
             outlineRect.left = 0;
             outlineRect.top = 0;
 
             WebInspector.DOMModel.unmuteHighlight();
             WebInspector.inspectorView.restore();
 
             if (error)

[lushnikov, 2016/05/25 18:16:58]

let's do console.error here - ignoring errors silently makes future debugging
harder.

[dgozman, 2016/05/25 20:23:26]

Done.

                 return;
 
             // Create a canvas to splice the images together.
             var canvas = createElement("canvas");
             var ctx = canvas.getContext("2d");
             canvas.width = outlineRect.width;
             canvas.height = outlineRect.height;
 
             var promise = Promise.resolve();
             if (this._model.outlineImage())
                 promise = promise.then(paintImage.bind(null, this._model.outlineImage(), outlineRect));
+            promise = promise.then(drawBorder);
             if (this._model.screenImage())
                 promise = promise.then(paintImage.bind(null, this._model.screenImage(), screenRect));
             promise.then(paintScreenshot.bind(this));
 
             /**
              * @param {string} src
              * @param {!WebInspector.Rect} rect
              * @return {!Promise<undefined>}
              */
             function paintImage(src, rect)
             {
                 var callback;
                 var promise = new Promise(fulfill => callback = fulfill);
                 var image = new Image();
                 image.crossOrigin = "Anonymous";
                 image.srcset = src;
                 image.onload = onImageLoad;
                 image.onerror = callback;
                 return promise;
 
                 function onImageLoad()
                 {
                     ctx.drawImage(image, rect.left, rect.top, rect.width, rect.height);
                     callback();
                 }
             }
 
+            function drawBorder()
+            {
+                ctx.strokeStyle = "hsla(0, 0%, 98%, 0.5)";
+                ctx.lineWidth = 1;
+                ctx.setLineDash([10, 10]);
+                ctx.strokeRect(screenRect.left + 1, screenRect.top + 1, screenRect.width - 2, screenRect.height - 2);
+            }
+
             /**
              * @this {WebInspector.DeviceModeView}
              */
             function paintScreenshot()
             {
-                ctx.strokeStyle = "hsla(0, 0%, 98%, 0.5)";
-                ctx.lineWidth = 1;
-                ctx.setLineDash([10, 10]);
-                ctx.strokeRect(screenRect.left + 1, screenRect.top + 1, screenRect.width - 2, screenRect.height - 2);
                 var pageImage = new Image();
                 pageImage.src = "data:image/png;base64," + content;
                 ctx.drawImage(pageImage,
                               visiblePageRect.left,
                               visiblePageRect.top,
                               Math.min(pageImage.naturalWidth, screenRect.width),
                               Math.min(pageImage.naturalHeight, screenRect.height));
                 var mainFrame = mainTarget.resourceTreeModel.mainFrame;
                 var fileName = mainFrame ? mainFrame.url.trimURL().removeURLFragment() : "";
                 if (this._model.type() === WebInspector.DeviceModeModel.Type.Device)
@@ skipping 104 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }