[DevTools] UI for network conditions emulation.

Source/devtools/front_end/ResponsiveDesignView.js

 // Copyright 2014 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.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
@@ skipping 373 matching lines @@
         this._updateUI();
     },
 
     _createToolbar: function()
     {
         var toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
         this._toolbarSection = toolbarElement.createChild("div", "responsive-design-composite-section hbox");
 
         this._expandedDeviceSection = document.createElementWithClass("div", "responsive-design-composite-section vbox");
         this._expandedScreenTouchSection = document.createElementWithClass("div", "responsive-design-composite-section hbox");
+        this._expandedNetworkSection = document.createElementWithClass("div", "responsive-design-composite-section vbox solid");
 
         this._expandSection = document.createElementWithClass("div", "responsive-design-section vbox");
         WebInspector.settings.responsiveDesign.toolbarExpanded = WebInspector.settings.createSetting("responsiveDesign.toolbarExpanded", false);
         this._expandButton = this._expandSection.createChild("div", "responsive-design-expand");
         this._expandButton.createChild("div", "responsive-design-icon responsive-design-icon-expand");
         this._expandButton.createChild("span");
         this._expandButton.addEventListener("click", this._toggleToolbarExpanded.bind(this));
         WebInspector.settings.responsiveDesign.toolbarExpanded.addChangeListener(this._toolbarExpandedChanged, this);
 
         // Device
@@ skipping 55 matching lines @@
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
 
         fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 2, "2em", WebInspector.OverridesSupport.inputValidator, true));
 
         // Touch and viewport
         this._touchSection = document.createElementWithClass("div", "responsive-design-section");
         this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
         this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
 
+        // Network.
+        this._networkSection = document.createElementWithClass("div", "responsive-design-section");
+        var networkCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Offline"), WebInspector.overridesSupport.settings.emulateNetworkConditions, true);
+        this._networkSection.appendChild(networkCheckbox);
+        updateNetworkCheckboxTitle();
+
+        this._networkDomainsSection = document.createElementWithClass("div", "responsive-design-section");
+        this._networkDomainsSection.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.networkDomains, false, 0, "200px", WebInspector.OverridesSupport.networkDomainsValidator, false));
+
+        WebInspector.overridesSupport.settings.networkDomains.addChangeListener(updateNetworkCheckboxTitle);
+
+        function updateNetworkCheckboxTitle()
+        {
+            var domains = WebInspector.overridesSupport.settings.networkDomains.get();
+            if (!domains.trim()) {
+                networkCheckbox.title = WebInspector.UIString("Offline for all domains");
+            } else {
+                var trimmed = domains.split(",").map(function(s) { return s.trim(); }).join(", ");
+                if (trimmed.length > 40)
+                    trimmed = trimmed.substring(0, 40) + "...";
+                networkCheckbox.title = WebInspector.UIString("Offline for ") + trimmed;
+            }
+        }
+
         // User agent.
         this._userAgentSection = document.createElementWithClass("div", "responsive-design-composite-section vbox solid");
         var userAgentRow = this._userAgentSection.createChild("div", "responsive-design-composite-section hbox solid");
         userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(WebInspector.SettingsUI.createSettingCheckbox("User Agent", WebInspector.overridesSupport.settings.overrideUserAgent, true));
         var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
         userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.select);
         this._userAgentSection.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.input);
 
         this._toolbarExpandedChanged();
     },
@@ skipping 11 matching lines @@
 
         if (expanded) {
             this._expandedScreenTouchSection.textContent = "";
             this._expandedScreenTouchSection.appendChild(this._screenSection);
             this._expandedScreenTouchSection.appendChild(this._touchSection);
 
             this._expandedDeviceSection.textContent = "";
             this._expandedDeviceSection.appendChild(this._deviceSection);
             this._expandedDeviceSection.appendChild(this._expandedScreenTouchSection);
 
+            this._expandedNetworkSection.textContent = "";
+            this._expandedNetworkSection.appendChild(this._networkSection);
+            this._expandedNetworkSection.appendChild(this._networkDomainsSection);
+
             this._toolbarSection.textContent = "";
             this._toolbarSection.appendChild(this._expandSection);
             this._toolbarSection.appendChild(this._expandedDeviceSection);
             this._toolbarSection.appendChild(this._userAgentSection);
+            this._toolbarSection.appendChild(this._expandedNetworkSection);
         } else {
             this._toolbarSection.textContent = "";
             this._toolbarSection.appendChild(this._expandSection);
             this._toolbarSection.appendChild(this._deviceSection);
             this._toolbarSection.appendChild(this._screenSection);
             this._toolbarSection.appendChild(this._touchSection);
+            this._toolbarSection.appendChild(this._networkSection);
         }
 
         this.onResize();
     },
 
     _overridesWarningUpdated: function()
     {
         var message = WebInspector.overridesSupport.warningMessage();
         if (this._warningMessage.textContent === message)
             return;
         this._warningMessage.classList.toggle("hidden", !message);
         this._warningMessage.textContent = message;
         this._responsiveDesignEnabledChanged();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };