[DevTools] Option to show device frames in emulation mode

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 23 matching lines @@
     {
         this._toolbar = new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);
         this.contentElement.appendChild(this._toolbar.element());
 
         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._onScreenImageLoaded.bind(this, true), false);
-        this._screenImage.addEventListener("error", this._onScreenImageLoaded.bind(this, false), false);
+        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);
 
         this._bottomLeftResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-bottom-left-resizer");
         this._bottomLeftResizerElement.createChild("div", "");
         this._createResizer(this._bottomLeftResizerElement, -2, 1);
 
         this._rightResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-right-resizer");
@@ skipping 123 matching lines @@
      * @param {!WebInspector.Event} event
      */
     _onResizeEnd: function(event)
     {
         delete this._resizeStart;
         WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action.ResizedViewInResponsiveMode);
     },
 
     _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;
 
         var zoomFactor = WebInspector.zoomManager.zoomFactor();
         var callDoResize = false;
         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)) {
-            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;
             this._cachedCssScreenRect = cssScreenRect;
         }
 
         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, outlineRect);
+            callDoResize = true;
+            this._cachedOutlineRect = outlineRect;
+        }
+        this._outlineImage.classList.toggle("device-frame-visible", (this._model.deviceOutlineSetting().get() && 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;
         }
 
         var mediaInspectorVisible = this._showMediaInspectorSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;
         if (mediaInspectorVisible !== this._cachedMediaInspectorVisible) {
             if (mediaInspectorVisible)
                 this._mediaInspector.show(this._mediaInspectorContainer);
             else
                 this._mediaInspector.detach();
             contentAreaResized = true;
             callDoResize = true;
             this._cachedMediaInspectorVisible = mediaInspectorVisible;
         }
 
         if (showRulers !== this._cachedShowRulers) {
             this._contentClip.classList.toggle("device-mode-rulers-visible", showRulers);
             if (showRulers) {
                 this._topRuler.show(this._contentClip, this._contentArea);
+                this._topRuler.show(this._contentArea);

[dgozman, 2016/04/11 17:24:52]

You show topRuler twice. Let's revert.

[mmccoy, 2016/04/13 22:36:01]

Done.

                 this._leftRuler.show(this._contentArea);
             } else {
                 this._topRuler.detach();
                 this._leftRuler.detach();
             }
             contentAreaResized = true;
             callDoResize = true;
             this._cachedShowRulers = showRulers;
         }
 
         if (this._model.scale() !== this._cachedScale) {
             updateRulers = true;
             callDoResize = true;
             for (var block of this._presetBlocks)
                 block.style.width = block.__width * this._model.scale() + "px";
             this._cachedScale = this._model.scale();
         }
 
         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(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)
+    _onImageLoaded: function(element, success)
     {
-        this._screenImage.classList.toggle("hidden", !success);
+        element.classList.toggle("hidden", !success);
     },
 
     _contentAreaResized: function()
     {
         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 preferredSize = new Size(Math.max((rect.width - 2 * this._handleWidth) * zoomFactor, 1), Math.max((rect.height - this._handleHeight) * zoomFactor, 1));
         this._model.setAvailableSize(availableSize, preferredSize);
     },
@@ skipping 109 matching lines @@
     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
+     * @param {number} maxLength
      */
-    render: function(offset, scale)
+    render: function(offset, scale, maxLength)

[dgozman, 2016/04/11 17:24:52]

Thanks for screenshot, now it's clear. I still don't like how rulers and outline
play together. Let's just hide rulers when outline is visible and remove
maxLength handling.

     {
         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));
+        this._maxLength = maxLength;
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         this._throttler.schedule(this._update.bind(this));
     },
 
     /**
      * @return {!Promise.<?>}
      */
     _update: function()
     {
         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();
             this._count = 0;
             this._renderedScale = this._scale;
             this._renderedZoomFactor = zoomFactor;
         }
 
         var dipSize = size * zoomFactor / this._scale;
         var count = Math.ceil(dipSize / 5);
@@ skipping 38 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }