[DevTools] Polish device mode UI, include outline into screenshot.

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
  */
@@ skipping 249 matching lines @@
             contextMenu.appendCheckboxItem(title, uaSetting.set.bind(uaSetting, value), uaSetting.get() === value);
         }
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendOptionsMenuItems: function(contextMenu)
     {
         var submenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Show"));
+        if (Runtime.experiments.isEnabled("deviceFrames"))
+            submenu.appendCheckboxItem(WebInspector.UIString("Device frame"), this._toggleDeviceFrames.bind(this), this._deviceOutlineSetting.get(), this._model.type() !== WebInspector.DeviceModeModel.Type.Device);
         submenu.appendCheckboxItem(WebInspector.UIString("Device pixel ratio"), this._toggleDeviceScaleFactor.bind(this), this._showDeviceScaleFactorSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         submenu.appendCheckboxItem(WebInspector.UIString("Device type"), this._toggleUserAgentType.bind(this), this._showUserAgentTypeSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         submenu.appendCheckboxItem(WebInspector.UIString("Network throttling"), this._toggleNetworkConditions.bind(this), this._showNetworkConditionsSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         submenu.appendCheckboxItem(WebInspector.UIString("Media queries"), this._toggleMediaInspector.bind(this), this._showMediaInspectorSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
         submenu.appendCheckboxItem(WebInspector.UIString("Rulers"), this._toggleRulers.bind(this), this._showRulersSetting.get(), this._model.type() === WebInspector.DeviceModeModel.Type.None);
-        if (Runtime.experiments.isEnabled("deviceFrames")) {
-            submenu.appendCheckboxItem(WebInspector.UIString("Device frame"), this._toggleDeviceFrames.bind(this), this._deviceOutlineSetting.get() && this._model.outlineImage() !== "", (this._model.type() === WebInspector.DeviceModeModel.Type.None || this._model.outlineImage() === ""));
-        }
         contextMenu.appendSeparator();
         contextMenu.appendItemsAtLocation("deviceModeMenu");
         contextMenu.appendSeparator();
         contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._reset.bind(this));
     },
 
     _toggleDeviceScaleFactor: function()
     {
         this._showDeviceScaleFactorSetting.set(!this._showDeviceScaleFactorSetting.get());
     },
@@ skipping 294 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }