[DevTools] UI for network conditions emulation.

Source/devtools/front_end/sdk/OverridesSupport.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 242 matching lines @@
     return new WebInspector.OverridesSupport.DeviceOrientation(alpha, beta, gamma);
 }
 
 WebInspector.OverridesSupport.DeviceOrientation.clearDeviceOrientationOverride = function()
 {
     PageAgent.clearDeviceOrientationOverride();
 }
 
 /**
  * @param {string} value
+ * @return {!string}
  */
 WebInspector.OverridesSupport.integerInputValidator = function(value)
 {
     if (/^[\d]+$/.test(value) && value >= 0 && value <= 10000)
         return "";
     return WebInspector.UIString("Value must be non-negative integer");
 }
 
 /**
  * @param {string} value
+ * @return {!string}
  */
 WebInspector.OverridesSupport.doubleInputValidator = function(value)
 {
     if (/^[\d]+(\.\d+)?|\.\d+$/.test(value) && value >= 0 && value <= 10000)
         return "";
     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,
 // - device scale factor,
 WebInspector.OverridesSupport._phones = [
     ["Apple iPhone 3GS",
      "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5",
      "320x480x1"],
     ["Apple iPhone 4",
      "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5",
@@ skipping 146 matching lines @@
     ["iPhone \u2014 iOS 6", "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25"],
     ["MeeGo \u2014 Nokia N9", "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13"],
     ["Opera 18 \u2014 Mac", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 OPR/18.0.1284.68"],
     ["Opera 18 \u2014 Windows", "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 OPR/18.0.1284.68"],
     ["Opera 12 \u2014 Mac", "Opera/9.80 (Macintosh; Intel Mac OS X 10.9.1) Presto/2.12.388 Version/12.16"],
     ["Opera 12 \u2014 Windows", "Opera/9.80 (Windows NT 6.1) Presto/2.12.388 Version/12.16"],
     ["Silk \u2014 Kindle Fire (Desktop view)", "Mozilla/5.0 (Linux; U; en-us; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true"],
     ["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}
      */
     responsiveDesignAvailable: function()
     {
         return this._responsiveDesignAvailable;
     },
 
     /**
@@ skipping 94 matching lines @@
         this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
 
         this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
         this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
 
         this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
 
         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())
             this._deviceOrientationChanged();
 
         if (this.settings.overrideGeolocation.get())
             this._geolocationPositionChanged();
 
         if (this.settings.emulateTouchEvents.get())
             this._emulateTouchEventsChanged();
 
         if (this.settings.overrideCSSMedia.get())
             this._cssMediaChanged();
 
         if (this.settings.overrideDeviceResolution.get() || this.settings.emulateViewport.get())
             this._deviceMetricsChanged();
 
         if (this.settings.overrideUserAgent.get())
             this._userAgentChanged();
 
+        if (this.settings.emulateNetworkConditions.get())
+            this._networkConditionsChanged();
+
         this._showRulersChanged();
     },
 
     _userAgentChanged: function()
     {
         if (this._userAgentChangedListenerMuted)
             return;
         var userAgent = this.settings.overrideUserAgent.get() ? this.settings.userAgent.get() : "";
         NetworkAgent.setUserAgentOverride(userAgent);
         if (this._userAgent !== userAgent)
@@ skipping 162 matching lines @@
         if (this.isInspectingDevice() && this.settings.overrideCSSMedia.get())
             return;
 
         PageAgent.setEmulatedMedia(this.settings.overrideCSSMedia.get() ? this.settings.emulatedCSSMedia.get() : "");
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].cssModel.mediaQueryResultChanged();
         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}
      */
     showMetricsRulers: function()
     {
         var rulersInPageResizer = this._pageResizer && this.settings.overrideDeviceResolution.get();
         return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer;
     },
 
     _showRulersChanged: function()
@@ skipping 84 matching lines @@
         this.settings.emulateViewport = WebInspector.settings.createSetting("emulateViewport", false);
         this.settings.emulateTouchEvents = WebInspector.settings.createSetting("emulateTouchEvents", false);
         this.settings.overrideGeolocation = WebInspector.settings.createSetting("overrideGeolocation", false);
         this.settings.geolocationOverride = WebInspector.settings.createSetting("geolocationOverride", "");
         this.settings.overrideDeviceOrientation = WebInspector.settings.createSetting("overrideDeviceOrientation", false);
         this.settings.deviceOrientationOverride = WebInspector.settings.createSetting("deviceOrientationOverride", "");
         this.settings.overrideCSSMedia = WebInspector.settings.createSetting("overrideCSSMedia", false);
         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) {
             delete this._applyInitialOverridesOnTargetAdded;
             this.applyInitialOverrides();
         }
     },
 
     swapDimensions: function()
     {
@@ skipping 204 matching lines @@
 
         overrideUserAgentSetting.addChangeListener(overrideUserAgentChanged);
         function overrideUserAgentChanged()
         {
             otherUserAgentElement.readOnly = !overrideUserAgentSetting.get() || (userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value !== "Other");
         }
 
         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
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;