[DevTools] UI for network conditions emulation.

Source/devtools/front_end/sdk/OverridesSupport.js

Index: Source/devtools/front_end/sdk/OverridesSupport.js
diff --git a/Source/devtools/front_end/sdk/OverridesSupport.js b/Source/devtools/front_end/sdk/OverridesSupport.js
index 8d46a0cde1002f1fbfdd9dbd296d0cb6e27801e9..d787ca3e4ce6a91f39350c2bd9ecfe5cf0f4e48b 100644
--- a/Source/devtools/front_end/sdk/OverridesSupport.js
+++ b/Source/devtools/front_end/sdk/OverridesSupport.js
@@ -260,6 +260,7 @@ WebInspector.OverridesSupport.DeviceOrientation.clearDeviceOrientationOverride =
 
 /**
  * @param {string} value
+ * @return {!string}
  */
 WebInspector.OverridesSupport.integerInputValidator = function(value)
 {
@@ -270,6 +271,7 @@ WebInspector.OverridesSupport.integerInputValidator = function(value)
 
 /**
  * @param {string} value
+ * @return {!string}
  */
 WebInspector.OverridesSupport.doubleInputValidator = function(value)
 {
@@ -278,6 +280,22 @@ WebInspector.OverridesSupport.doubleInputValidator = function(value)
     return WebInspector.UIString("Value must be non-negative float");
 }
 
+/**
+ * @param {string} value
+ * @return {!string}
+ */
+WebInspector.OverridesSupport.networkDomainsValidator = function(value)
+{
+    function test(s)
+    {
+        return /^[\w\-]+(\.[\w\-]+)*$/.test(s.trim());
+    }
+
+    if (!value.trim())
+        return "";
+    return value.split(",").every(test) ? "" : WebInspector.UIString("Value must be a comma-separated list of domains");
+}
+
 // Third element lists device metrics separated by 'x':
 // - screen width,
 // - screen height,
@@ -444,6 +462,20 @@ WebInspector.OverridesSupport._userAgents = [
     ["Silk \u2014 Kindle Fire (Mobile view)", "Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Mobile Safari/535.19 Silk-Accelerated=true"],
 ];
 
+WebInspector.OverridesSupport._networkThroughputPresets = [
+    ["Offline", 0],
+    ["5 Kbps", 5 * 1024 / 8],
+    ["10 Kbps (GSM)", 10 * 1024 / 8],
+    ["20 Kbps", 20 * 1024 / 8],
+    ["40 Kbps (GPRS)", 40 * 1024 / 8],
+    ["80 Kbps", 80 * 1024 / 8],
+    ["160 Kbps (EDGE)", 160 * 1024 / 8],
+    ["320 Kbps", 320 * 1024 / 8],
+    ["640 Kbps (3G)", 640 * 1024 / 8],
+    ["1 Mbps", 1024 * 1024 / 8],
+    ["2 Mbps (802.11b)", 2048 * 1024 / 8]

[vsevik, 2014/06/11 14:53:20]

AFAIK 802.11b actually supports up to 5.5 / 11 Mbps

[dgozman, 2014/06/11 14:59:02]

As discussed offline, this is a real throughput estimation.

+];
+
 WebInspector.OverridesSupport.prototype = {
     /**
      * @return {boolean}
@@ -558,6 +590,10 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
         this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
 
+        this.settings.emulateNetworkConditions.addChangeListener(this._networkConditionsChanged, this);
+        this.settings.networkConditionsDomains.addChangeListener(this._networkConditionsChanged, this);
+        this.settings.networkConditionsThroughput.addChangeListener(this._networkConditionsChanged, this);
+
         WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
 
         if (this.settings.overrideDeviceOrientation.get())
@@ -578,6 +614,9 @@ WebInspector.OverridesSupport.prototype = {
         if (this.settings.overrideUserAgent.get())
             this._userAgentChanged();
 
+        if (this.settings.emulateNetworkConditions.get())
+            this._networkConditionsChanged();
+
         this._showRulersChanged();
     },
 
@@ -760,6 +799,20 @@ WebInspector.OverridesSupport.prototype = {
         this.maybeHasActiveOverridesChanged();
     },
 
+    _networkConditionsChanged: function()
+    {
+        if (!this.settings.emulateNetworkConditions.get()) {
+            NetworkAgent.emulateNetworkConditions([], 0, false);
+        } else {
+            var domainsString = this.settings.networkConditionsDomains.get().trim();
+            var domains = domainsString ? domainsString.split(",").map(function (s) { return s.trim(); }) : [];
+            var throughput = this.settings.networkConditionsThroughput.get();
+            var offline = !throughput;
+            NetworkAgent.emulateNetworkConditions(domains, throughput, offline);
+        }
+        this.maybeHasActiveOverridesChanged();
+    },
+
     /**
      * @return {boolean}
      */
@@ -864,6 +917,10 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.emulatedCSSMedia = WebInspector.settings.createSetting("emulatedCSSMedia", "print");
         this.settings.emulatedDevice = WebInspector.settings.createSetting("emulatedDevice", "Google Nexus 5");
 
+        this.settings.emulateNetworkConditions = WebInspector.settings.createSetting("emulateNetworkConditions", false);
+        this.settings.networkConditionsDomains = WebInspector.settings.createSetting("networkConditionsDomains", "");
+        this.settings.networkConditionsThroughput = WebInspector.settings.createSetting("networkConditionsThroughput", 0);
+
         this.maybeHasActiveOverridesChanged();
 
         if (this._applyInitialOverridesOnTargetAdded) {
@@ -1088,6 +1145,52 @@ WebInspector.OverridesSupport.prototype = {
         return { select: userAgentSelectElement, input: otherUserAgentElement };
     },
 
+    /**
+     * @param {!Document} document
+     * @return {!Element}
+     */
+    createNetworkThroughputSelect: function(document)
+    {
+        var throughputSetting = WebInspector.overridesSupport.settings.networkConditionsThroughput;
+        var emulateNetworkSetting = WebInspector.overridesSupport.settings.emulateNetworkConditions;
+        var throughputSelectElement = document.createElement("select");
+        var presets = WebInspector.OverridesSupport._networkThroughputPresets;
+        for (var i = 0; i < presets.length; ++i)
+            throughputSelectElement.add(new Option(presets[i][0], presets[i][1]));
+        throughputSelectElement.selectedIndex = 0;
+
+        settingChanged();
+        throughputSetting.addChangeListener(settingChanged);
+        throughputSelectElement.addEventListener("change", throughputSelected, false);
+
+        function throughputSelected()
+        {
+            var value = Number(throughputSelectElement.options[throughputSelectElement.selectedIndex].value);
+            throughputSetting.removeChangeListener(settingChanged);
+            throughputSetting.set(value);
+            throughputSetting.addChangeListener(settingChanged);
+            emulateNetworkSetting.set(true);
+        }
+
+        function settingChanged()
+        {
+            var value = String(throughputSetting.get());
+            var options = throughputSelectElement.options;
+            var selectionRestored = false;
+            for (var i = 0; i < options.length; ++i) {
+                if (options[i].value === value) {
+                    throughputSelectElement.selectedIndex = i;
+                    selectionRestored = true;
+                    break;
+                }
+            }
+            if (!selectionRestored)
+                throughputSelectElement.selectedIndex = options.length - 1;
+        }
+
+        return throughputSelectElement;
+    },
+
     __proto__: WebInspector.Object.prototype
 }