Devtools: Add screenshot button to device mode toolbar.

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 333 matching lines @@
     },
 
     /**
      * @override
      */
     willHide: function()
     {
         this._model.emulate(WebInspector.DeviceModeModel.Type.None, null, null);
     },
 
+    captureScreenshot: function()
+    {
+        var mainTarget = WebInspector.targetManager.mainTarget();
+        if (!mainTarget)
+            return;
+        mainTarget.pageAgent().captureScreenshot(screenshotCaptured.bind(this));
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {string} content
+         * @this {WebInspector.DeviceModeView}
+         */
+        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;
+            // Add any available screen images.
+            if (this._model.screenImage()) {
+                var screenImage = new Image();
+                screenImage.srcset = this._model.screenImage();
+                ctx.drawImage(screenImage, 0, 0, screenRect.width, screenRect.height);
+            }
+            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();
+        }
+    },
+
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {boolean} horizontal
  * @param {function(number)} applyCallback
  */
 WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)
@@ skipping 90 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }