DevTools: unify Network & CPU throttling

third_party/WebKit/Source/devtools/front_end/mobile_throttling/ThrottlingSelector.js

Index: third_party/WebKit/Source/devtools/front_end/mobile_throttling/ThrottlingSelector.js
diff --git a/third_party/WebKit/Source/devtools/front_end/mobile_throttling/NetworkConditionsSelector.js b/third_party/WebKit/Source/devtools/front_end/mobile_throttling/ThrottlingSelector.js
similarity index 31%
rename from third_party/WebKit/Source/devtools/front_end/mobile_throttling/NetworkConditionsSelector.js
rename to third_party/WebKit/Source/devtools/front_end/mobile_throttling/ThrottlingSelector.js
index 3c25698f2f5b31d4725727810b52dbf167745678..ccd4e0ab8bbf10a9abf576a91eaa87e2e8bbd1de 100644
--- a/third_party/WebKit/Source/devtools/front_end/mobile_throttling/NetworkConditionsSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/mobile_throttling/ThrottlingSelector.js
@@ -1,226 +1,210 @@
 // Copyright 2015 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.
-/**
- * @unrestricted
- */
-MobileThrottling.NetworkConditionsSelector = class {
+
+MobileThrottling.NetworkThrottlingSelector = class {
   /**
-   * @param {function(!Array<!MobileThrottling.NetworkConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
+   * @param {function(!Array<!MobileThrottling.NetworkThrottlingConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
    * @param {function(number)} selectCallback
+   * @param {!Common.Setting<!Array<!SDK.NetworkManager.Conditions>>} customNetworkConditionsSetting
    */
-  constructor(populateCallback, selectCallback) {
+  constructor(populateCallback, selectCallback, customNetworkConditionsSetting) {
     this._populateCallback = populateCallback;
     this._selectCallback = selectCallback;
-    this._customSetting = Common.moduleSetting('customNetworkConditions');
-    this._customSetting.addChangeListener(this._populateOptions, this);
-    this._manager = SDK.multitargetNetworkManager;
-    this._manager.addEventListener(
-        SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditionsChanged, this);
+    this._customNetworkConditionsSetting = customNetworkConditionsSetting;
+    this._customNetworkConditionsSetting.addChangeListener(this._populateOptions, this);
+    SDK.multitargetNetworkManager.addEventListener(
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._networkConditionsChanged, this);
+    /** @type {!Array<?SDK.NetworkManager.Conditions>} */
+    this._options;
     this._populateOptions();
   }
 
-  /**
-   * @param {number} throughput
-   * @param {boolean=} plainText
-   * @return {string}
-   */
-  static throughputText(throughput, plainText) {
-    if (throughput < 0)
-      return '';
-    var throughputInKbps = throughput / (1024 / 8);
-    var delimiter = plainText ? '' : ' ';
-    if (throughputInKbps < 1024)
-      return Common.UIString('%d%skb/s', throughputInKbps, delimiter);
-    if (throughputInKbps < 1024 * 10)
-      return Common.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimiter);
-    return Common.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, delimiter);
+  revealAndUpdate() {
+    Common.Revealer.reveal(this._customNetworkConditionsSetting);
+    this._networkConditionsChanged();
   }
 
   /**
-   * @param {!HTMLSelectElement} selectElement
+   * @param {!SDK.NetworkManager.Conditions} conditions
    */
-  static decorateSelect(selectElement) {
-    var options = [];
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
-    selectElement.addEventListener('change', optionSelected, false);
-
-    /**
-     * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
-     * @return {!Array<?SDK.NetworkManager.Conditions>}
-     */
-    function populate(groups) {
-      selectElement.removeChildren();
-      options = [];
-      for (var i = 0; i < groups.length; ++i) {
-        var group = groups[i];
-        var groupElement = selectElement.createChild('optgroup');
-        groupElement.label = group.title;
-        for (var conditions of group.items) {
-          var title = Common.UIString(conditions.title);
-          var option = new Option(title, title);
-          groupElement.appendChild(option);
-          options.push(conditions);
-        }
-        if (i === groups.length - 1) {
-          groupElement.appendChild(new Option(Common.UIString('Add\u2026'), Common.UIString('Add\u2026')));
-          options.push(null);
+  optionSelected(conditions) {
+    SDK.multitargetNetworkManager.setNetworkConditions(conditions);
+  }
+
+  _populateOptions() {
+    var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.NetworkManager.NoThrottlingConditions]};
+    var presetsGroup = {title: Common.UIString('Common'), items: MobileThrottling.networkPresets};
+    var advancedGroup = {title: Common.UIString('Advanced'), items: MobileThrottling.advancedNetworkPresets};
+    var customGroup = {title: Common.UIString('Custom'), items: this._customNetworkConditionsSetting.get()};
+    this._options = this._populateCallback([disabledGroup, presetsGroup, advancedGroup, customGroup]);
+    if (!this._networkConditionsChanged()) {
+      for (var i = this._options.length - 1; i >= 0; i--) {
+        if (this._options[i]) {
+          this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (this._options[i]));
+          break;
         }
       }
-      return options;
-    }
-
-    function optionSelected() {
-      if (selectElement.selectedIndex === selectElement.options.length - 1)
-        selector.revealAndUpdate();
-      else
-        selector.optionSelected(options[selectElement.selectedIndex]);
-    }
-
-    /**
-     * @param {number} index
-     */
-    function select(index) {
-      if (selectElement.selectedIndex !== index)
-        selectElement.selectedIndex = index;
     }
   }
 
   /**
-   * @return {!UI.ToolbarMenuButton}
+   * @return {boolean} returns false if selected condition no longer exists
    */
-  static createToolbarMenuButton() {
-    var button = new UI.ToolbarMenuButton(appendItems);
-    button.setGlyph('');
-    button.turnIntoSelect();
-
-    /** @type {!Array<?SDK.NetworkManager.Conditions>} */
-    var options = [];
-    var selectedIndex = -1;
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
-    return button;
-
-    /**
-     * @param {!UI.ContextMenu} contextMenu
-     */
-    function appendItems(contextMenu) {
-      for (var index = 0; index < options.length; ++index) {
-        var conditions = options[index];
-        if (!conditions) {
-          contextMenu.appendSeparator();
-        } else {
-          contextMenu.appendCheckboxItem(
-              Common.UIString(conditions.title), selector.optionSelected.bind(selector, conditions),
-              selectedIndex === index);
-        }
-      }
-      contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUpdate.bind(selector));
-    }
-
-    /**
-     * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
-     * @return {!Array<?SDK.NetworkManager.Conditions>}
-     */
-    function populate(groups) {
-      options = [];
-      for (var group of groups) {
-        for (var conditions of group.items)
-          options.push(conditions);
-        options.push(null);
+  _networkConditionsChanged() {
+    var value = SDK.multitargetNetworkManager.networkConditions();
+    for (var index = 0; index < this._options.length; ++index) {
+      var option = this._options[index];
+      if (option && option.download === value.download && option.upload === value.upload &&
+          option.latency === value.latency && option.title === value.title) {
+        this._selectCallback(index);
+        return true;
       }
-      return options;
-    }
-
-    /**
-     * @param {number} index
-     */
-    function select(index) {
-      selectedIndex = index;
-      button.setText(options[index].title);
     }
+    return false;
   }
+};
 
+MobileThrottling.MobileThrottlingSelector = class {
   /**
-   * @return {!UI.ToolbarCheckbox}
+   * @param {function(!Array<!MobileThrottling.MobileThrottlingConditionsGroup>):!MobileThrottling.ConditionsList} populateCallback
+   * @param {function(number)} selectCallback
    */
-  static createOfflineToolbarCheckbox() {
-    var checkbox = new UI.ToolbarCheckbox(
-        Common.UIString('Offline'), Common.UIString('Force disconnected from network'), forceOffline);
+  constructor(populateCallback, selectCallback) {
+    this._populateCallback = populateCallback;
+    this._selectCallback = selectCallback;
+    MobileThrottling.throttlingManager().addEventListener(
+        MobileThrottling.ThrottlingManager.Events.RateChanged, this._conditionsChanged, this);
     SDK.multitargetNetworkManager.addEventListener(
-        SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkConditionsChanged);
-    checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager.OfflineConditions);
-
-    function forceOffline() {
-      if (checkbox.checked()) {
-        MobileThrottling.NetworkConditionsSelector._lastNetworkConditions =
-            SDK.multitargetNetworkManager.networkConditions();
-        SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
-      } else {
-        SDK.multitargetNetworkManager.setNetworkConditions(
-            MobileThrottling.NetworkConditionsSelector._lastNetworkConditions);
-      }
-    }
-
-    function networkConditionsChanged() {
-      var conditions = SDK.multitargetNetworkManager.networkConditions();
-      checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions);
-    }
-    return checkbox;
-  }
-
-  _populateOptions() {
-    var customGroup = {title: Common.UIString('Custom'), items: this._customSetting.get()};
-    var presetsGroup = {title: Common.UIString('Presets'), items: MobileThrottling.NetworkConditionsSelector.presets};
-    var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.NetworkManager.NoThrottlingConditions]};
-    this._options = this._populateCallback([disabledGroup, presetsGroup, customGroup]);
-    if (!this._conditionsChanged()) {
-      for (var i = this._options.length - 1; i >= 0; i--) {
-        if (this._options[i]) {
-          this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (this._options[i]));
-          break;
-        }
-      }
-    }
-  }
-
-  revealAndUpdate() {
-    Common.Revealer.reveal(this._customSetting);
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditionsChanged, this);
+    /** @type {!MobileThrottling.ConditionsList} */
+    this._options = this._populateOptions();
     this._conditionsChanged();
   }
 
   /**
-   * @param {!SDK.NetworkManager.Conditions} conditions
+   * @param {!MobileThrottling.Conditions} conditions
    */
   optionSelected(conditions) {
-    this._manager.setNetworkConditions(conditions);
+    SDK.multitargetNetworkManager.setNetworkConditions(conditions.network);
+    MobileThrottling.throttlingManager().setCPUThrottlingRate(conditions.cpuThrottlingRate);
   }
 
   /**
-   * @return {boolean}
+   * @return {!MobileThrottling.ConditionsList}
    */
+  _populateOptions() {
+    var disabledGroup = {title: Common.UIString('Disabled'), items: [MobileThrottling.NoThrottlingConditions]};
+    var presetsGroup = {title: Common.UIString('Presets'), items: MobileThrottling.mobilePresets};
+    var advancedGroup = {title: Common.UIString('Advanced'), items: MobileThrottling.advancedMobilePresets};
+    return this._populateCallback([disabledGroup, presetsGroup, advancedGroup]);
+  }
+
   _conditionsChanged() {
-    var value = this._manager.networkConditions();
+    var networkConditions = SDK.multitargetNetworkManager.networkConditions();
+    var cpuThrottlingRate = MobileThrottling.throttlingManager().cpuThrottlingRate();
     for (var index = 0; index < this._options.length; ++index) {
       var option = this._options[index];
-      if (option && option.download === value.download && option.upload === value.upload &&
-          option.latency === value.latency && option.title === value.title) {
+      if (option && option.network === networkConditions && option.cpuThrottlingRate === cpuThrottlingRate) {
         this._selectCallback(index);
-        return true;
+        return;
       }
     }
-    return false;
+    this._selectCallback(this._options.indexOf(MobileThrottling.CustomConditions));
   }
 };
 
+/**
+ * @typedef {{
+ *   title: string,
+ *   description: string,
+ *   network: SDK.NetworkManager.Conditions,
+ *   cpuThrottlingRate: number
+ * }}
+ **/
+MobileThrottling.Conditions;
+
+/** @enum {number} */
+MobileThrottling.CPUThrottlingRates = {
+  NoThrottling: 1,
+  MidTierMobile: 4,
+  LowEndMobile: 6,
+};
+
+/** @type {!MobileThrottling.Conditions} */
+MobileThrottling.NoThrottlingConditions = {
+  title: SDK.NetworkManager.NoThrottlingConditions.title,
+  description: Common.UIString('No throttling'),
+  network: SDK.NetworkManager.NoThrottlingConditions,
+  cpuThrottlingRate: MobileThrottling.CPUThrottlingRates.NoThrottling,
+};
+
+/** @type {!MobileThrottling.Conditions} */
+MobileThrottling.OfflineConditions = {
+  title: SDK.NetworkManager.OfflineConditions.title,
+  description: Common.UIString('No internet connectivity'),
+  network: SDK.NetworkManager.OfflineConditions,
+  cpuThrottlingRate: MobileThrottling.CPUThrottlingRates.NoThrottling,
+};
+
+/** @type {!MobileThrottling.Conditions} */
+MobileThrottling.LowEndMobileConditions = {
+  title: Common.UIString('Low-end mobile'),
+  description: Common.UIString('Slow 3G & 6x CPU slowdown'),
+  network: SDK.NetworkManager.Slow3GConditions,
+  cpuThrottlingRate: MobileThrottling.CPUThrottlingRates.LowEndMobile,
+};
+
+/** @type {!MobileThrottling.Conditions} */
+MobileThrottling.MidTierMobileConditions = {
+  title: Common.UIString('Mid-tier mobile'),
+  description: Common.UIString('Fast 3G & 4x CPU slowdown'),
+  network: SDK.NetworkManager.Fast3GConditions,
+  cpuThrottlingRate: MobileThrottling.CPUThrottlingRates.MidTierMobile,
+};
+
+/**
+ * @typedef {{
+ *   title: string,
+ *   description: string
+ * }}
+ **/
+MobileThrottling.PlaceholderConditions;
+
+/** @type {!MobileThrottling.PlaceholderConditions} */
+MobileThrottling.CustomConditions = {
+  title: Common.UIString('Custom'),
+  description: Common.UIString('Check Network and Performance panels'),
+};
+
 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-MobileThrottling.NetworkConditionsGroup;
+MobileThrottling.NetworkThrottlingConditionsGroup;
+
+/** @typedef {!{title: string, items: !Array<!MobileThrottling.Conditions|!MobileThrottling.PlaceholderConditions>}} */
+MobileThrottling.MobileThrottlingConditionsGroup;
+
+/** @typedef {!Array<?MobileThrottling.Conditions|!MobileThrottling.PlaceholderConditions>} */
+MobileThrottling.ConditionsList;
 
+/** @type {!Array.<!MobileThrottling.Conditions>} */
+MobileThrottling.mobilePresets = [
+  MobileThrottling.MidTierMobileConditions, MobileThrottling.LowEndMobileConditions, MobileThrottling.CustomConditions
+];
+
+/** @type {!Array.<!MobileThrottling.Conditions>} */
+MobileThrottling.advancedMobilePresets = [
+  MobileThrottling.OfflineConditions,
+];
+
+/** @type {!Array<!SDK.NetworkManager.Conditions>} */
+MobileThrottling.networkPresets = [
+  SDK.NetworkManager.Fast3GConditions,
+  SDK.NetworkManager.Slow3GConditions,
+];
 
-/** @type {!Array.<!SDK.NetworkManager.Conditions>} */
-MobileThrottling.NetworkConditionsSelector.presets = [
+/** @type {!Array<!SDK.NetworkManager.Conditions>} */
+MobileThrottling.advancedNetworkPresets = [
   SDK.NetworkManager.OfflineConditions,
-  {title: 'Slow 3G', download: 500 * 1024 / 8 * .8, upload: 500 * 1024 / 8 * .8, latency: 400 * 5},
-  {title: 'Fast 3G', download: 1.6 * 1024 * 1024 / 8 * .9, upload: 750 * 1024 / 8 * .9, latency: 150 * 3.75}
 ];
 
 /**