[DevTools] Option to show device frames in emulation mode

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js
index 79c6098ad465a667674c1ff917d3029fc22e1146..54b8f73286e2bca108cbd89d085c0c315ebb5ede 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js
@@ -14,6 +14,7 @@ WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, show
     this._showMediaInspectorSetting = showMediaInspectorSetting;
     this._showRulersSetting = showRulersSetting;
 
+    this._deviceOutlineSetting = this._model.deviceOutlineSetting();
     this._showDeviceScaleFactorSetting = WebInspector.settings.createSetting("emulation.showDeviceScaleFactor", false);
     this._showDeviceScaleFactorSetting.addChangeListener(this._updateDeviceScaleFactorVisibility, this);
 
@@ -270,7 +271,10 @@ WebInspector.DeviceModeToolbar.prototype = {
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show throttling"), this._toggleNetworkConditions.bind(this), this._showNetworkConditionsSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show media queries"), this._toggleMediaInspector.bind(this), this._showMediaInspectorSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show rulers"), this._toggleRulers.bind(this), this._showRulersSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
-        contextMenu.appendSeparator();
+        if (Runtime.experiments.isEnabled("deviceFrames")) {
+            // contextMenu.appendCheckboxItem(WebInspector.UIString("Show device frame"), this._deviceOutlineSetting.set.bind(this._deviceOutlineSetting, !this._deviceOutlineSetting.get()), this._deviceOutlineSetting.get() && this._model.outlineImage() !== "", (this._model.type() === WebInspector.DeviceModeModel.Type.None || this._model.outlineImage() === ""));

[dgozman, 2016/04/13 22:52:06]

nit: remove commented code

[mmccoy, 2016/04/19 14:42:19]

Done.

+            contextMenu.appendCheckboxItem(WebInspector.UIString("Show device frame"), this._toggleDeviceFrames.bind(this), this._deviceOutlineSetting.get() && this._model.outlineImage() !== "", (this._model.type() === WebInspector.DeviceModeModel.Type.None || this._model.outlineImage() === ""));
+        }
         contextMenu.appendItemsAtLocation("deviceModeMenu");
         contextMenu.appendSeparator();
         contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._reset.bind(this));
@@ -281,6 +285,14 @@ WebInspector.DeviceModeToolbar.prototype = {
         this._showDeviceScaleFactorSetting.set(!this._showDeviceScaleFactorSetting.get());
     },
 
+    _toggleDeviceFrames: function()
+    {
+        if (this._showRulersSetting.get()) {
+          this._toggleRulers();

[dgozman, 2016/04/13 22:52:06]

We should instead do this in DeviceModeView and avoid toggling settings on
users' behalf.

[mmccoy, 2016/04/19 14:42:19]

Ack.

+        }
+        this._deviceOutlineSetting.set(!this._deviceOutlineSetting.get());
+    },
+
     _toggleUserAgentType: function()
     {
         this._showUserAgentTypeSetting.set(!this._showUserAgentTypeSetting.get());
@@ -293,6 +305,9 @@ WebInspector.DeviceModeToolbar.prototype = {
 
     _toggleRulers: function()
     {
+        if (this._deviceOutlineSetting.get()) {
+          this._toggleDeviceFrames();

[dgozman, 2016/04/13 22:52:06]

ditto

[mmccoy, 2016/04/19 14:42:19]

Ack.

+        }
         this._showRulersSetting.set(!this._showRulersSetting.get());
     },