Devtools: Add device frames to device mode

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 bea33bc6192b5876b6a625c34407513f279cb18c..a9a64689f6c41487f27de35a45800755c2b0243f 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
@@ -42,10 +42,14 @@ WebInspector.DeviceModeView.prototype = {
         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 fill hidden");
+        this._outlineImage.addEventListener("load", this._onScreenImageLoaded.bind(this, this._outlineImage, true), false);
+        this._outlineImage.addEventListener("error", this._onScreenImageLoaded.bind(this, this._outlineImage, false), false);
+
         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._onScreenImageLoaded.bind(this, true), false);
-        this._screenImage.addEventListener("error", this._onScreenImageLoaded.bind(this, false), false);
+        this._screenImage.addEventListener("load", this._onScreenImageLoaded.bind(this, this._screenImage, true), false);
+        this._screenImage.addEventListener("error", this._onScreenImageLoaded.bind(this, this._screenImage, false), false);
 
         this._bottomRightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-right-resizer");
         this._bottomRightResizerElement.createChild("div", "");
@@ -189,6 +193,18 @@ WebInspector.DeviceModeView.prototype = {
 
     _updateUI: function()
     {
+        /**
+         * @param {!Element} element
+         * @param {!WebInspector.Rect} rect
+         */
+        function applyRect(element, rect)
+        {
+            element.style.left = rect.left + "px";
+            element.style.top = rect.top + "px";
+            element.style.width = rect.width + "px";
+            element.style.height = rect.height + "px";
+        }
+
         if (!this.isShowing())
             return;
 
@@ -200,10 +216,7 @@ WebInspector.DeviceModeView.prototype = {
 
         var cssScreenRect = this._model.screenRect().scale(1 / zoomFactor);
         if (!cssScreenRect.isEqual(this._cachedCssScreenRect)) {
-            this._screenArea.style.left = cssScreenRect.left + "px";
-            this._screenArea.style.top = cssScreenRect.top + "px";
-            this._screenArea.style.width = cssScreenRect.width + "px";
-            this._screenArea.style.height = cssScreenRect.height + "px";
+            applyRect(this._screenArea, cssScreenRect);
             this._leftRuler.element.style.left = cssScreenRect.left + "px";
             updateRulers = true;
             callDoResize = true;
@@ -212,14 +225,18 @@ WebInspector.DeviceModeView.prototype = {
 
         var cssVisiblePageRect = this._model.visiblePageRect().scale(1 / zoomFactor);
         if (!cssVisiblePageRect.isEqual(this._cachedCssVisiblePageRect)) {
-            this._pageArea.style.left = cssVisiblePageRect.left + "px";
-            this._pageArea.style.top = cssVisiblePageRect.top + "px";
-            this._pageArea.style.width = cssVisiblePageRect.width + "px";
-            this._pageArea.style.height = cssVisiblePageRect.height + "px";
+            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, this._model.outlineRect().scale(1 / zoomFactor));
+            callDoResize = true;
+            this._cachedOutlineRect = outlineRect;
+        }
+
         var resizable = this._model.type() === WebInspector.DeviceModeModel.Type.Responsive;
         if (resizable !== this._cachedResizable) {
             this._rightResizerElement.classList.toggle("hidden", !resizable);
@@ -264,36 +281,43 @@ WebInspector.DeviceModeView.prototype = {
         }
 
         this._toolbar.update();
-        this._loadScreenImage(this._model.screenImage());
+        this._loadImage(this._screenImage, this._model.screenImage());
+        this._loadImage(this._outlineImage, this._model.outlineImage());
+
         this._mediaInspector.setAxisTransform(-cssScreenRect.left * zoomFactor / this._model.scale(), 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());
+            var showingDevice = this._model.type() === WebInspector.DeviceModeModel.Type.Device;
+            this._topRuler.render(this._cachedCssScreenRect ? this._cachedCssScreenRect.left : 0, this._model.scale(), showingDevice && this._cachedCssScreenRect ? this._cachedCssScreenRect.width : 0);
+            this._leftRuler.render(0, this._model.scale(), showingDevice && this._cachedCssScreenRect ? this._cachedCssScreenRect.height : 0);
+            this._topRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : 0;
+            this._leftRuler.element.style.top = this._cachedCssScreenRect ? this._cachedCssScreenRect.top + "px" : 0;
         }
         if (contentAreaResized)
             this._contentAreaResized();
     },
 
     /**
+     * @param {!Element} element
      * @param {string} srcset
      */
-    _loadScreenImage: function(srcset)
+    _loadImage: function(element, srcset)
     {
-        if (this._screenImage.getAttribute("srcset") === srcset)
+        if (element.getAttribute("srcset") === srcset)
             return;
-        this._screenImage.setAttribute("srcset", srcset);
+        element.setAttribute("srcset", srcset);
         if (!srcset)
-            this._screenImage.classList.toggle("hidden", true);
+            element.classList.toggle("hidden", true);
     },
 
     /**
+     * @param {!Element} element
      * @param {boolean} success
      */
-    _onScreenImageLoaded: function(success)
+    _onScreenImageLoaded: function(element, success)
     {
-        this._screenImage.classList.toggle("hidden", !success);
+        element.classList.toggle("hidden", !success);
     },
 
     _contentAreaResized: function()
@@ -377,8 +401,9 @@ WebInspector.DeviceModeView.Ruler.prototype = {
     /**
      * @param {number} offset
      * @param {number} scale
+     * @param {number} maxLength
      */
-    render: function(offset, scale)
+    render: function(offset, scale, maxLength)
     {
         this._scale = scale;
         this._offset = offset;
@@ -387,6 +412,7 @@ WebInspector.DeviceModeView.Ruler.prototype = {
         else
             this.element.style.paddingTop = this._offset + "px";
         this._throttler.schedule(this._update.bind(this));
+        this._maxLength = maxLength;
     },
 
     /**
@@ -404,6 +430,8 @@ WebInspector.DeviceModeView.Ruler.prototype = {
     {
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var size = this._horizontal ? this._contentElement.offsetWidth : this._contentElement.offsetHeight;
+        if (this._maxLength)
+            size = Math.min(size, this._maxLength);
 
         if (this._scale !== this._renderedScale || zoomFactor !== this._renderedZoomFactor) {
             this._contentElement.removeChildren();