[DevTools] Polish device mode UI, include outline into 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 26 matching lines @@
 
         this._contentClip = this.contentElement.createChild("div", "device-mode-content-clip vbox");
         this._responsivePresetsContainer = this._contentClip.createChild("div", "device-mode-presets-container");
         this._populatePresetsContainer();
         this._mediaInspectorContainer = this._contentClip.createChild("div", "device-mode-media-container");
         this._contentArea = this._contentClip.createChild("div", "device-mode-content-area");
 
         this._outlineImage = this._contentArea.createChild("img", "device-mode-outline-image hidden fill");
         this._outlineImage.addEventListener("load", this._onImageLoaded.bind(this, this._outlineImage, true), false);
         this._outlineImage.addEventListener("error", this._onImageLoaded.bind(this, this._outlineImage, false), false);
-        this._outlineImage.classList.toggle("device-frame-visible", this._model.deviceOutlineSetting().get());
 
         this._screenArea = this._contentArea.createChild("div", "device-mode-screen-area");
         this._screenImage = this._screenArea.createChild("img", "device-mode-screen-image hidden");
         this._screenImage.addEventListener("load", this._onImageLoaded.bind(this, this._screenImage, true), false);
         this._screenImage.addEventListener("error", this._onImageLoaded.bind(this, this._screenImage, false), false);
 
         this._bottomRightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-right-resizer");
         this._bottomRightResizerElement.createChild("div", "");
         this._createResizer(this._bottomRightResizerElement, 2, 1);
 
@@ skipping 21 matching lines @@
 
     _populatePresetsContainer: function()
     {
         var sizes = [320, 375, 425, 768, 1024, 1440, 2560];
         var titles = [WebInspector.UIString("Mobile S"),
                       WebInspector.UIString("Mobile M"),
                       WebInspector.UIString("Mobile L"),
                       WebInspector.UIString("Tablet"),
                       WebInspector.UIString("Laptop"),
                       WebInspector.UIString("Laptop L"),
-                      WebInspector.UIString("4K")]
+                      WebInspector.UIString("4K")];
         this._presetBlocks = [];
-        var inner = this._responsivePresetsContainer.createChild("div", "device-mode-presets-container-inner")
+        var inner = this._responsivePresetsContainer.createChild("div", "device-mode-presets-container-inner");
         for (var i = sizes.length - 1; i >= 0; --i) {
             var outer = inner.createChild("div", "fill device-mode-preset-bar-outer");
             var block = outer.createChild("div", "device-mode-preset-bar");
             block.createChild("span").textContent = titles[i] + " \u2013 " + sizes[i] + "px";
             block.addEventListener("click", applySize.bind(this, sizes[i]), false);
             block.__width = sizes[i];
             this._presetBlocks.push(block);
         }
 
         /**
          * @param {number} width
          * @param {!Event} e
          * @this {WebInspector.DeviceModeView}
          */
         function applySize(width, e)
         {
             this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
             this._model.setSizeAndScaleToFit(width, 0);
             e.consume();
         }
     },
 
-    toggleDeviceMode: function()
-    {
-        this._toolbar.toggleDeviceMode();
-    },
-
     /**
      * @param {!Element} element
      * @param {number} widthFactor
      * @param {number} heightFactor
      * @return {!WebInspector.ResizerWidget}
      */
     _createResizer: function(element, widthFactor, heightFactor)
     {
         var resizer = new WebInspector.ResizerWidget();
         resizer.addElement(element);
@@ skipping 74 matching lines @@
             element.style.top = rect.top + "px";
             element.style.width = rect.width + "px";
             element.style.height = rect.height + "px";
         }
 
         if (!this.isShowing())
             return;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var callDoResize = false;
-        var showRulers = this._showRulersSetting.get() && !this._model.deviceOutlineSetting().get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;
+        var showRulers = this._showRulersSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;
         var contentAreaResized = false;
         var updateRulers = false;
 
         var cssScreenRect = this._model.screenRect().scale(1 / zoomFactor);
         if (!cssScreenRect.isEqual(this._cachedCssScreenRect)) {
             applyRect(this._screenArea, cssScreenRect);
-            this._leftRuler.element.style.left = cssScreenRect.left + "px";
             updateRulers = true;
             callDoResize = true;
             this._cachedCssScreenRect = cssScreenRect;
         }
 
         var cssVisiblePageRect = this._model.visiblePageRect().scale(1 / zoomFactor);
         if (!cssVisiblePageRect.isEqual(this._cachedCssVisiblePageRect)) {
             applyRect(this._pageArea, cssVisiblePageRect);
             callDoResize = true;
             this._cachedCssVisiblePageRect = cssVisiblePageRect;
         }
 
         var outlineRect = this._model.outlineRect().scale(1 / zoomFactor);
         if (!outlineRect.isEqual(this._cachedOutlineRect)) {
             applyRect(this._outlineImage, outlineRect);
             callDoResize = true;
             this._cachedOutlineRect = outlineRect;
         }
-        this._outlineImage.classList.toggle("device-frame-visible", (this._model.deviceOutlineSetting().get() && this._model.outlineImage()));
+        this._contentClip.classList.toggle("device-mode-outline-visible", !!this._model.outlineImage());
 
         var resizable = this._model.type() === WebInspector.DeviceModeModel.Type.Responsive;
         if (resizable !== this._cachedResizable) {
             this._rightResizerElement.classList.toggle("hidden", !resizable);
             this._leftResizerElement.classList.toggle("hidden", !resizable);
             this._bottomResizerElement.classList.toggle("hidden", !resizable);
             this._bottomRightResizerElement.classList.toggle("hidden", !resizable);
             this._bottomLeftResizerElement.classList.toggle("hidden", !resizable);
             this._cachedResizable = resizable;
         }
@@ skipping 31 matching lines @@
             this._cachedScale = this._model.scale();
         }
 
         this._toolbar.update();
         this._loadImage(this._screenImage, this._model.screenImage());
         this._loadImage(this._outlineImage, this._model.outlineImage());
         this._mediaInspector.setAxisTransform(this._model.scale());
         if (callDoResize)
             this.doResize();
         if (updateRulers) {
-            this._topRuler.render(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._model.scale());
-            this._leftRuler.render(0, this._model.scale());
-            this._topRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : "0";
-            this._leftRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : "0";
+            this._topRuler.render(this._model.scale());
+            this._leftRuler.render(this._model.scale());
+            this._topRuler.element.positionAt(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._cachedCssScreenRect ? this._cachedCssScreenRect.top : 0);
+            this._leftRuler.element.positionAt(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._cachedCssScreenRect ? this._cachedCssScreenRect.top : 0);
         }
         if (contentAreaResized)
             this._contentAreaResized();
     },
 
     /**
      * @param {!Element} element
      * @param {string} srcset
      */
     _loadImage: function(element, srcset)
@@ skipping 73 matching lines @@
     captureScreenshot: function()
     {
         var mainTarget = WebInspector.targetManager.mainTarget();
         if (!mainTarget)
             return;
         WebInspector.DOMModel.muteHighlight();
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var rect = this._contentArea.getBoundingClientRect();
         var availableSize = new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+        var outlineVisible = this._model.deviceOutlineSetting().get();
 
         if (availableSize.width < this._model.screenRect().width ||
             availableSize.height < this._model.screenRect().height) {
             WebInspector.inspectorView.minimize();
+            this._model.deviceOutlineSetting().set(false);
         }
 
         mainTarget.pageAgent().captureScreenshot(screenshotCaptured.bind(this));
 
         /**
          * @param {?Protocol.Error} error
          * @param {string} content
          * @this {WebInspector.DeviceModeView}
          */
         function screenshotCaptured(error, content)
         {
-            if (error) {
-                WebInspector.DOMModel.unmuteHighlight();
-                WebInspector.inspectorView.restore();
+            this._model.deviceOutlineSetting().set(outlineVisible);
+            var dpr = window.devicePixelRatio;
+            var outlineRect = this._model.outlineRect().scale(dpr);
+            var screenRect = this._model.screenRect().scale(dpr);
+            screenRect.left -= outlineRect.left;
+            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)
                 return;
-            }
 
             // Create a canvas to splice the images together.
             var canvas = createElement("canvas");
             var ctx = canvas.getContext("2d");
-            var screenRect = this._model.screenRect();
-            var dpr = window.devicePixelRatio;
-            canvas.width = screenRect.width * dpr;
-            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();
-                screenImage.onload = onImageLoad.bind(this);
-                screenImage.onerror = paintScreenshot.bind(this);
-            } else {
-                paintScreenshot.call(this);
+            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));
+            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();
+                }
             }
 
             /**
-             * @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().scale(dpr);
                 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();
-                WebInspector.DOMModel.unmuteHighlight();
-                WebInspector.inspectorView.restore();
             }
         }
     },
 
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {boolean} horizontal
  * @param {function(number)} applyCallback
  */
 WebInspector.DeviceModeView.Ruler = function(horizontal, applyCallback)
 {
     WebInspector.VBox.call(this);
-    this._contentElement = this.element.createChild("div", "device-mode-ruler flex-auto");
+    this.element.classList.add("device-mode-ruler");
+    this._contentElement = this.element.createChild("div", "device-mode-ruler-content").createChild("div", "device-mode-ruler-inner");
     this._horizontal = horizontal;
     this._scale = 1;
-    this._offset = 0;
     this._count = 0;
     this._throttler = new WebInspector.Throttler(0);
     this._applyCallback = applyCallback;
 }
 
 WebInspector.DeviceModeView.Ruler.prototype = {
     /**
-     * @param {number} offset
      * @param {number} scale
      */
-    render: function(offset, scale)
+    render: function(scale)
     {
         this._scale = scale;
-        this._offset = offset;
-        if (this._horizontal)
-            this.element.style.paddingLeft = this._offset + "px";
-        else
-            this.element.style.paddingTop = this._offset + "px";
         this._throttler.schedule(this._update.bind(this));
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         this._throttler.schedule(this._update.bind(this));
     },
@@ skipping 56 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }