[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
+ * @param {!WebInspector.Setting} showOutlineSetting
  * @constructor
  */
-WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, showRulersSetting)
+WebInspector.DeviceModeToolbar = function(model, showMediaInspectorSetting, showRulersSetting, showOutlineSetting)
 {
     this._model = model;
     this._showMediaInspectorSetting = showMediaInspectorSetting;
     this._showRulersSetting = showRulersSetting;
+    this._showOutlineSetting = showOutlineSetting;
     /** @type {!Map<!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode>} */
     this._lastMode = new Map();
 
     this._element = createElementWithClass("div", "device-mode-toolbar");
 
     var leftContainer = this._element.createChild("div", "device-mode-toolbar-spacer");
     leftContainer.createChild("div", "device-mode-toolbar-spacer");
     var leftToolbar = new WebInspector.Toolbar("", leftContainer);
     leftToolbar.makeWrappable();
     this._fillLeftToolbar(leftToolbar);
@@ skipping 209 matching lines @@
         function appendDeviceScaleFactorItem(title, value)
         {
             deviceScaleFactorSubmenu.appendCheckboxItem(title, deviceScaleFactorSetting.set.bind(deviceScaleFactorSetting, value), deviceScaleFactorValue === value, deviceScaleFactorDisabled);
         }
 
         contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._model.reset.bind(this._model), this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive);
         contextMenu.appendSeparator();
 
         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.appendCheckboxItem(WebInspector.UIString("Show device frame"), this._toggleOutline.bind(this), (this._showOutlineSetting.get() && this._model.outlineImage() !== ""), !this._model.outlineImage());
         contextMenu.appendItem(WebInspector.UIString("Configure network\u2026"), this._openNetworkConfig.bind(this), false);
         contextMenu.appendItemsAtLocation("deviceModeMenu");
     },
 
     _toggleMediaInspector: function()
     {
         this._showMediaInspectorSetting.set(!this._showMediaInspectorSetting.get());
     },
 
     _toggleRulers: function()
     {
         this._showRulersSetting.set(!this._showRulersSetting.get());
     },
 
+    _toggleOutline: function()
+    {
+        this._showOutlineSetting.set(!this._showOutlineSetting.get());
+    },
+
     _openNetworkConfig: function()
     {
         InspectorFrontendHost.bringToFront();
         // TODO(dgozman): make it explicit.
         WebInspector.actionRegistry.action("network.show-config").execute();
     },
 
     /**
      * @param {!Element} element
      * @return {!WebInspector.ToolbarItem}
@@ skipping 240 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }