[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, 4, "2.5em", WebInspector.OverridesSupport.doubleInputValidator, 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 responsive-design-network");
+        var networkCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Network"), WebInspector.overridesSupport.settings.emulateNetworkConditions, true);
+        this._networkSection.appendChild(networkCheckbox);
+        this._networkSection.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
+
+        this._networkDomainsSection = document.createElementWithClass("div", "responsive-design-section");
+        fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateNetworkConditions);
+        var networkDomainsInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.networkConditionsDomains, false, 0, "190px", WebInspector.OverridesSupport.networkDomainsValidator, false);
+        networkDomainsInput.querySelector("input").placeholder = WebInspector.UIString("Leave empty to limit all domains");
+        fieldsetElement.appendChild(networkDomainsInput);
+        this._networkDomainsSection.appendChild(fieldsetElement);
+
+        updateNetworkCheckboxTitle();
+        WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);
+
+        function updateNetworkCheckboxTitle()
+        {
+            var domains = WebInspector.overridesSupport.settings.networkConditionsDomains.get();
+            if (!domains.trim()) {
+                networkCheckbox.title = WebInspector.UIString("Limit 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("Limit 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();
     },
 
     _toggleToolbarExpanded: function()
     {
         WebInspector.settings.responsiveDesign.toolbarExpanded.set(!WebInspector.settings.responsiveDesign.toolbarExpanded.get());
     },
 
     _toolbarExpandedChanged: function()
     {
         var expanded = WebInspector.settings.responsiveDesign.toolbarExpanded.get();
         this._expandButton.classList.toggle("expanded", expanded);
         this._expandButton.querySelector("span").textContent = WebInspector.UIString(expanded ? "Collapse" : "Expand");
 
         if (expanded) {
             this._expandedScreenTouchSection.setChildren([this._screenSection, this._touchSection]);
             this._expandedDeviceSection.setChildren([this._deviceSection, this._expandedScreenTouchSection]);
-            this._toolbarSection.setChildren([this._expandSection, this._expandedDeviceSection, this._userAgentSection]);
+            this._expandedNetworkSection.setChildren([this._networkSection, this._networkDomainsSection]);
+            this._toolbarSection.setChildren([this._expandSection, this._expandedDeviceSection, this._userAgentSection, this._expandedNetworkSection]);
         } else {
-            this._toolbarSection.setChildren([this._expandSection, this._deviceSection, this._screenSection, this._touchSection]);
+            this._toolbarSection.setChildren([this._expandSection, this._deviceSection, this._screenSection, this._touchSection, 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._invalidateCache();
         this.onResize();
     },
 
     __proto__: WebInspector.VBox.prototype
 };