[DevTools] UI for network conditions emulation.

Source/devtools/front_end/ResponsiveDesignView.js

Index: Source/devtools/front_end/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/ResponsiveDesignView.js b/Source/devtools/front_end/ResponsiveDesignView.js
index ba6d29acb081b1a999280d942ddb54b3bfe6193a..3d92619979296a7ca240004a2fa23634425ca6a7 100644
--- a/Source/devtools/front_end/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/ResponsiveDesignView.js
@@ -391,6 +391,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         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);
@@ -466,6 +467,30 @@ WebInspector.ResponsiveDesignView.prototype = {
         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");
@@ -497,16 +522,22 @@ WebInspector.ResponsiveDesignView.prototype = {
             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();