[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 88cd2f9d59ab9acfd4795afe6fec93ca51ff1771..0fc1f3ddc5491be2e77c3b4a2a9327c4a15acb03 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");
@@ -47,6 +49,11 @@ WebInspector.DeviceModeView.prototype = {
         this._screenImage.addEventListener("load", this._onScreenImageLoaded.bind(this, true), false);
         this._screenImage.addEventListener("error", this._onScreenImageLoaded.bind(this, false), false);
 
+        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._cornerResizerElement = this._screenArea.createChild("div", "device-mode-resizer device-mode-corner-resizer");
         this._cornerResizerElement.createChild("div", "");
         this._createResizer(this._cornerResizerElement, true, true);
@@ -182,6 +189,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;
         var contentAreaResized = false;
         var updateRulers = false;
 
@@ -192,6 +200,12 @@ 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();
+            var outlineInsets = this._model.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";
+            this._outlineArea.style.height = outlineImageDimensions.height + "px";
             updateRulers = true;
             callDoResize = true;
             this._cachedCssScreenRect = cssScreenRect;
@@ -240,6 +254,16 @@ WebInspector.DeviceModeView.prototype = {
             this._cachedShowRulers = showRulers;
         }
 
+        if (showOutline !== this._cachedShowOutline) {
+            this._contentClip.classList.toggle("device-mode-frame-visible", showOutline);
+            if (showOutline) {
+                this._positionOutline();

[dgozman, 2016/02/01 17:18:27]

I think should have been handled in lines 203-208.

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

Removed!

+            } else {
+                // TODO(mmccoy): Hide device frame
+            }
+            this._cachedShowOutline = showOutline;
+        }
+
         if (this._model.scale() !== this._cachedScale) {
             updateRulers = true;
             callDoResize = true;
@@ -250,6 +274,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();
@@ -281,6 +306,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();
@@ -301,6 +346,10 @@ WebInspector.DeviceModeView.prototype = {
         this._heightResizerElement.classList.toggle("hidden", hidden);
     },
 
+    _positionOutline: function()
+    {
+    },
+
     _zoomChanged: function()
     {
         delete this._handleWidth;