[DevTools] Option to show device frames in emulation 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..1bc509a7f29790a0edb7b20b2e4fa49ff5f3f7d7 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js
@@ -21,6 +21,8 @@ WebInspector.DeviceModeView = function()
     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");
@@ -33,7 +35,7 @@ WebInspector.DeviceModeView = function()
 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");
@@ -42,6 +44,11 @@ WebInspector.DeviceModeView.prototype = {
         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);
@@ -195,6 +202,7 @@ WebInspector.DeviceModeView.prototype = {
         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;
 
@@ -205,6 +213,14 @@ WebInspector.DeviceModeView.prototype = {
             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;
@@ -255,6 +271,13 @@ WebInspector.DeviceModeView.prototype = {
             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;
@@ -265,6 +288,7 @@ WebInspector.DeviceModeView.prototype = {
 
         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();
@@ -296,6 +320,26 @@ WebInspector.DeviceModeView.prototype = {
         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();