[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()
 {
     WebInspector.VBox.call(this, true);
     this.setMinimumSize(150, 150);
     this.element.classList.add("device-mode-view");
     this.registerRequiredCSS("emulation/deviceModeView.css");
     WebInspector.Tooltip.addNativeOverrideContainer(this.contentElement);
 
     this._model = new WebInspector.DeviceModeModel(this._updateUI.bind(this));
     this._mediaInspector = new WebInspector.MediaQueryInspector(() => this._model.appliedDeviceSize().width, this._model.setWidth.bind(this._model));
     // TODO(dgozman): remove CountUpdated event.
     this._showMediaInspectorSetting = WebInspector.settings.createSetting("showMediaQueryInspector", false);
     this._showMediaInspectorSetting.addChangeListener(this._updateUI, this);
     this._showRulersSetting = WebInspector.settings.createSetting("emulation.showRulers", false);
     this._showRulersSetting.addChangeListener(this._updateUI, this);
+    this._showOutlineSetting = WebInspector.settings.createSetting("emulation.showOutline", false);
+    this._showOutlineSetting.addChangeListener(this._updateUI, this);
 
     this._topRuler = new WebInspector.DeviceModeView.Ruler(true, this._model.setWidthAndScaleToFit.bind(this._model));
     this._topRuler.element.classList.add("device-mode-ruler-top");
     this._leftRuler = new WebInspector.DeviceModeView.Ruler(false, this._model.setHeightAndScaleToFit.bind(this._model));
     this._leftRuler.element.classList.add("device-mode-ruler-left");
     this._createUI();
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._zoomChanged, this);
 };
 
 WebInspector.DeviceModeView.prototype = {
     _createUI: function()
     {
-        this._toolbar = new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting);
+        this._toolbar = new WebInspector.DeviceModeToolbar(this._model, this._showMediaInspectorSetting, this._showRulersSetting, this._showOutlineSetting);
         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._outlineArea = this._contentArea.createChild("div", "device-mode-outline-area");
+        this._outlineImage = this._outlineArea.createChild("img", "device-mode-outline-image hidden");
+        this._outlineImage.addEventListener("load", this._onOutlineImageLoaded.bind(this, true), false);
+        this._outlineImage.addEventListener("error", this._onOutlineImageLoaded.bind(this, 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._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");
@@ skipping 133 matching lines @@
     },
 
     _updateUI: function()
     {
         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 showOutline = this._showOutlineSetting.get() && this._model.type() !== WebInspector.DeviceModeModel.Type.None;

[dgozman, 2016/02/09 21:15:10]

type === Device, as you don't have an outline for responsive mode.

[mmccoy, 2016/02/10 20:06:34]

Done.

         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";
             this._leftRuler.element.style.left = cssScreenRect.left + "px";
+            var outlineImageDimensions = this._model.outlineDimensions();

[dgozman, 2016/02/09 21:15:10]

I believe you don't need this.

[mmccoy, 2016/02/10 20:06:34]

Ah yes, removed throughout.

+            var outlineInsets = this._model.outlineInsets();
+            if (outlineInsets) {
+                this._outlineArea.style.left = (cssScreenRect.left - outlineInsets.left) + "px";
+                this._outlineArea.style.top = (cssScreenRect.top - outlineInsets.top) + "px";
+                this._outlineArea.style.width = outlineImageDimensions.width + "px";

[dgozman, 2016/02/09 21:15:10]

What about |style.right = outlineInsets.right + "px"| and positioning
outlineArea relative to screenArea?

[mmccoy, 2016/02/10 20:06:34]

Hrm, can you elaborate a little.  outlineArea should be a child of screenArea? 
That doesn't seem right.

+                this._outlineArea.style.height = outlineImageDimensions.height + "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";
@@ skipping 30 matching lines @@
                 this._leftRuler.show(this._contentArea);
             } else {
                 this._topRuler.detach();
                 this._leftRuler.detach();
             }
             contentAreaResized = true;
             callDoResize = true;
             this._cachedShowRulers = showRulers;
         }
 
+        if (showOutline !== this._cachedShowOutline) {
+            this._contentClip.classList.toggle("device-mode-frame-visible", showOutline);
+            contentAreaResized = true;
+            callDoResize = true;
+            this._cachedShowOutline = showOutline;
+        }
+
         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._loadOutlineImage(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());
         }
         if (contentAreaResized)
             this._contentAreaResized();
     },
@@ skipping 11 matching lines @@
     },
 
     /**
      * @param {boolean} success
      */
     _onScreenImageLoaded: function(success)
     {
         this._screenImage.classList.toggle("hidden", !success);
     },
 
+    /**
+     * @param {string} srcset
+     */
+    _loadOutlineImage: function(srcset)
+    {
+        if (this._outlineImage.getAttribute("srcset") === srcset)
+            return;
+        this._outlineImage.setAttribute("srcset", srcset);
+        if (!srcset)
+            this._outlineImage.classList.toggle("hidden", true);
+    },
+
+    /**
+     * @param {boolean} success
+     */
+    _onOutlineImageLoaded: function(success)
+    {
+        this._outlineImage.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);
     },
 
     _measureHandles: function()
@@ skipping 146 matching lines @@
     /**
      * @param {number} size
      */
     _onMarkerClick: function(size)
     {
         this._applyCallback.call(null, size);
     },
 
     __proto__: WebInspector.VBox.prototype
 }