[DevTools] Add "show throttling" to device mode instead of "configure network".

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._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>} */
     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 96 matching lines @@
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillRightToolbar: function(toolbar)
     {
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
         this._scaleItem.setTitle(WebInspector.UIString("Zoom"));
         this._scaleItem.setGlyph("");
         this._scaleItem.turnIntoSelect();
         toolbar.appendToolbarItem(this._scaleItem);
-    },
 
-    /**
-     * @param {!WebInspector.Toolbar} toolbar
-     */
-    _fillModeToolbar: function(toolbar)
-    {
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._deviceScaleItem = new WebInspector.ToolbarMenuButton(this._appendDeviceScaleMenuItems.bind(this));
         this._deviceScaleItem.setVisible(this._showDeviceScaleFactorSetting.get());
         this._deviceScaleItem.setTitle(WebInspector.UIString("Device pixel ratio"));
         this._deviceScaleItem.setGlyph("");
         this._deviceScaleItem.turnIntoSelect();
         this._deviceScaleItem.element.style.padding = "0 5px";
         toolbar.appendToolbarItem(this._deviceScaleItem);
 
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._uaItem = new WebInspector.ToolbarMenuButton(this._appendUserAgentMenuItems.bind(this));
         this._uaItem.setVisible(this._showUserAgentTypeSetting.get());
         this._uaItem.setTitle(WebInspector.UIString("Device type"));
         this._uaItem.setGlyph("");
         this._uaItem.turnIntoSelect();
         this._uaItem.element.style.padding = "0 5px";
         toolbar.appendToolbarItem(this._uaItem);
+    },
 
+    /**
+     * @param {!WebInspector.Toolbar} toolbar
+     */
+    _fillModeToolbar: function(toolbar)
+    {
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._modeButton = new WebInspector.ToolbarButton("", "rotate-screen-toolbar-item");
         this._modeButton.addEventListener("click", this._modeMenuClicked, this);
         toolbar.appendToolbarItem(this._modeButton);
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillOptionsToolbar: function(toolbar)
     {
+        this._networkConditionsItem = WebInspector.NetworkConditionsSelector.createToolbarMenuButton();
+        this._networkConditionsItem.setVisible(this._showNetworkConditionsSetting.get());
+        this._networkConditionsItem.setTitle(WebInspector.UIString("Network throttling"));
+        this._networkConditionsItem.element.style.padding = "0 5px";
+        this._networkConditionsItem.element.style.maxWidth = "140px";
+        toolbar.appendToolbarItem(this._networkConditionsItem);
+
         var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendOptionsMenuItems.bind(this));
         moreOptionsButton.setTitle(WebInspector.UIString("More options"));
         toolbar.appendToolbarItem(moreOptionsButton);
 
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
     },
 
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
@@ skipping 65 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();
-        contextMenu.appendItem(WebInspector.UIString("Configure network\u2026"), this._openNetworkConfig.bind(this), false);
         contextMenu.appendItemsAtLocation("deviceModeMenu");
         contextMenu.appendSeparator();
         contextMenu.appendItem(WebInspector.UIString("Reset to defaults"), this._reset.bind(this));
     },
 
     _toggleDeviceScaleFactor: function()
     {
         this._showDeviceScaleFactorSetting.set(!this._showDeviceScaleFactorSetting.get());
     },
 
     _toggleUserAgentType: function()
     {
         this._showUserAgentTypeSetting.set(!this._showUserAgentTypeSetting.get());
     },
 
     _toggleMediaInspector: function()
     {
         this._showMediaInspectorSetting.set(!this._showMediaInspectorSetting.get());
     },
 
     _toggleRulers: function()
     {
         this._showRulersSetting.set(!this._showRulersSetting.get());
     },
 
-    _openNetworkConfig: function()
+    _toggleNetworkConditions: function()
     {
-        InspectorFrontendHost.bringToFront();
-        // TODO(dgozman): make it explicit.
-        WebInspector.actionRegistry.action("network.show-config").execute();
+        this._showNetworkConditionsSetting.set(!this._showNetworkConditionsSetting.get());
     },
 
     _reset: function()
     {
         this._showDeviceScaleFactorSetting.set(false);
         this._showUserAgentTypeSetting.set(false);
         this._showMediaInspectorSetting.set(false);
         this._showRulersSetting.set(false);
+        this._showNetworkConditionsSetting.set(false);
         this._model.reset();
     },
 
     /**
      * @param {!Element} element
      * @return {!WebInspector.ToolbarItem}
      */
     _wrapToolbarItem: function(element)
     {
         var container = createElement("div");
@@ skipping 95 matching lines @@
     _updateDeviceScaleFactorVisibility: function()
     {
         this._deviceScaleItem.setVisible(this._showDeviceScaleFactorSetting.get());
     },
 
     _updateUserAgentTypeVisibility: function()
     {
         this._uaItem.setVisible(this._showUserAgentTypeSetting.get());
     },
 
+    _updateNetworkConditionsVisibility: function()
+    {
+        this._networkConditionsItem.setVisible(this._showNetworkConditionsSetting.get());
+    },
+
     /**
      * @param {!WebInspector.Event} event
      */
     _modeMenuClicked: function(event)
     {
         var device = this._model.device();
         var model = this._model;
 
         if (device.modes.length === 2 && device.modes[0].orientation !== device.modes[1].orientation) {
             model.emulate(model.type(), model.device(), model.mode() === device.modes[0] ? device.modes[1] : device.modes[0]);
@@ skipping 137 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }