[DevTools] Option to show device frames in emulation mode

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

 // Copyright 2016 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.
 
 /**
  * @param {!WebInspector.DeviceModeModel} model
  * @param {!WebInspector.Setting} showMediaInspectorSetting
  * @param {!WebInspector.Setting} showRulersSetting
  * @constructor
  */
 WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, showRulersSetting)
 {
     this._model = model;
     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);
 
     this._showUserAgentTypeSetting = WebInspector.settings.createSetting("emulation.showUserAgentType", false);
     this._showUserAgentTypeSetting.addChangeListener(this._updateUserAgentTypeVisibility, this);
 
     this._showNetworkConditionsSetting = WebInspector.settings.createSetting("emulation.showNetworkConditions", false);
     this._showNetworkConditionsSetting.addChangeListener(this._updateNetworkConditionsVisibility, this);
 
     /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
@@ skipping 236 matching lines @@
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendOptionsMenuItems: function(contextMenu)
     {
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show device pixel ratio"), this._toggleDeviceScaleFactor.bind(this), this._showDeviceScaleFactorSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         contextMenu.appendCheckboxItem(WebInspector.UIString("Show device type"), this._toggleUserAgentType.bind(this), this._showUserAgentTypeSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         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._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));
     },
 
     _toggleDeviceScaleFactor: function()
     {
         this._showDeviceScaleFactorSetting.set(!this._showDeviceScaleFactorSetting.get());
     },
 
+    _toggleDeviceFrames: function()
+    {
+        this._deviceOutlineSetting.set(!this._deviceOutlineSetting.get());
+    },
+
     _toggleUserAgentType: function()
     {
         this._showUserAgentTypeSetting.set(!this._showUserAgentTypeSetting.get());
     },
 
     _toggleMediaInspector: function()
     {
         this._showMediaInspectorSetting.set(!this._showMediaInspectorSetting.get());
     },
 
@@ skipping 278 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }