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 61%
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..aae6e30f24200c9fbe4b560f9b23683f24f1a4fe 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,18 +1,23 @@
 // 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
+ * @implements {SDK.SDKModelObserver<!SDK.EmulationModel>}
  */
-MobileThrottling.NetworkConditionsSelector = class {
+MobileThrottling.ThrottlingSelector = class extends Common.Object {
   /**
-   * @param {function(!Array<!MobileThrottling.NetworkConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
+   * @param {function(!Array<!MobileThrottling.ThrottlingConditionsGroup>):!Array<?SDK.MobileThrottling.Conditions>} populateCallback
    * @param {function(number)} selectCallback
    */
   constructor(populateCallback, selectCallback) {
+    super();
+    this._cpuThrottlingRate = 1;
+    SDK.targetManager.observeModels(SDK.EmulationModel, this);
     this._populateCallback = populateCallback;
     this._selectCallback = selectCallback;
-    this._customSetting = Common.moduleSetting('customNetworkConditions');
+    this._customSetting = Common.moduleSetting('customThrottlingConditions');
     this._customSetting.addChangeListener(this._populateOptions, this);
     this._manager = SDK.multitargetNetworkManager;
     this._manager.addEventListener(
@@ -39,15 +44,17 @@ MobileThrottling.NetworkConditionsSelector = class {
 
   /**
    * @param {!HTMLSelectElement} selectElement
+   * @return {!MobileThrottling.ThrottlingSelector}
    */
   static decorateSelect(selectElement) {
     var options = [];
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
+    var selector = new MobileThrottling.ThrottlingSelector(populate, select);
     selectElement.addEventListener('change', optionSelected, false);
+    return selector;
 
     /**
-     * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
-     * @return {!Array<?SDK.NetworkManager.Conditions>}
+     * @param {!Array.<!MobileThrottling.ThrottlingConditionsGroup>} groups
+     * @return {!Array<?SDK.MobileThrottling.Conditions>}
      */
     function populate(groups) {
       selectElement.removeChildren();
@@ -94,10 +101,10 @@ MobileThrottling.NetworkConditionsSelector = class {
     button.setGlyph('');
     button.turnIntoSelect();
 
-    /** @type {!Array<?SDK.NetworkManager.Conditions>} */
+    /** @type {!Array<?SDK.MobileThrottling.Conditions>} */
     var options = [];
     var selectedIndex = -1;
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
+    var selector = new MobileThrottling.ThrottlingSelector(populate, select);
     return button;
 
     /**
@@ -118,8 +125,8 @@ MobileThrottling.NetworkConditionsSelector = class {
     }
 
     /**
-     * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
-     * @return {!Array<?SDK.NetworkManager.Conditions>}
+     * @param {!Array.<!MobileThrottling.ThrottlingConditionsGroup>} groups
+     * @return {!Array<?SDK.MobileThrottling.Conditions>}
      */
     function populate(groups) {
       options = [];
@@ -148,35 +155,53 @@ MobileThrottling.NetworkConditionsSelector = class {
         Common.UIString('Offline'), Common.UIString('Force disconnected from network'), forceOffline);
     SDK.multitargetNetworkManager.addEventListener(
         SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkConditionsChanged);
-    checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager.OfflineConditions);
+    checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.MobileThrottling.OfflineConditions);
 
     function forceOffline() {
       if (checkbox.checked()) {
-        MobileThrottling.NetworkConditionsSelector._lastNetworkConditions =
+        MobileThrottling.ThrottlingSelector._lastThrottlingConditions =
             SDK.multitargetNetworkManager.networkConditions();
-        SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
+        SDK.multitargetNetworkManager.setNetworkConditions(SDK.MobileThrottling.OfflineConditions);
       } else {
         SDK.multitargetNetworkManager.setNetworkConditions(
-            MobileThrottling.NetworkConditionsSelector._lastNetworkConditions);
+            MobileThrottling.ThrottlingSelector._lastThrottlingConditions);
       }
     }
 
     function networkConditionsChanged() {
       var conditions = SDK.multitargetNetworkManager.networkConditions();
-      checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions);
+      checkbox.setChecked(conditions === SDK.MobileThrottling.OfflineConditions);
     }
     return checkbox;
   }
 
+
+  /**
+   * @override
+   * @param {!SDK.EmulationModel} emulationModel
+   */
+  modelAdded(emulationModel) {
+    if (this._cpuThrottlingRate !== 1)
+      emulationModel.setCPUThrottlingRate(this._cpuThrottlingRate);
+  }
+
+  /**
+   * @override
+   * @param {!SDK.EmulationModel} emulationModel
+   */
+  modelRemoved(emulationModel) {
+  }
+
+
   _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]};
+    var presetsGroup = {title: Common.UIString('Presets'), items: MobileThrottling.ThrottlingSelector.presets};
+    var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.MobileThrottling.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]));
+          this.optionSelected(/** @type {!SDK.MobileThrottling.Conditions} */ (this._options[i]));
           break;
         }
       }
@@ -189,10 +214,35 @@ MobileThrottling.NetworkConditionsSelector = class {
   }
 
   /**
-   * @param {!SDK.NetworkManager.Conditions} conditions
+   * @param {!SDK.MobileThrottling.Conditions} conditions
    */
   optionSelected(conditions) {
     this._manager.setNetworkConditions(conditions);
+    this._setCPUThrottling(conditions);
+  }
+
+  /**
+   * @return {number}
+   */
+  cpuThrottlingRate() {
+    return this._cpuThrottlingRate;
+  }
+
+  /**
+   * @param {!SDK.MobileThrottling.Conditions} conditions
+   */
+  _setCPUThrottling(conditions) {
+    this._cpuThrottlingRate = conditions.cpuThrottlingRate;
+    for (var emulationModel of SDK.targetManager.models(SDK.EmulationModel))
+      emulationModel.setCPUThrottlingRate(this._cpuThrottlingRate);
+    var icon = null;
+    if (this._cpuThrottlingRate !== 1) {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
+      icon = UI.Icon.create('smallicon-warning');
+      icon.title = Common.UIString('CPU throttling is enabled');
+    }
+    UI.inspectorView.setPanelIcon('timeline', icon);

[dgozman, 2017/06/13 01:47:08]

Where did this come from? Why only timeline, if I can enable it on network as
well? Let's maybe show a single indicator somewhere?

[chenwilliam, 2017/06/13 21:54:51]

This is basically:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

It's a fair point on why only timeline. Today, if you flip on network throttling
in Performance panel, it only shows the icon on Network panel (it also has the
red Setting icon with the tooltip hint).

Personally, I'd like to see this be turned into a "device mode" style icon. My
semi-serious idea is a turtle icon:

1) Black turtle - not throttled
2) Hare / rabbit - Fast 3G - mid-tier phone
3) Blue turtle - Slow 3G - low-tier phone
4) Upside down blue turtle - offline.

For now though, I'd like to not block this on a significant UI change so we can
get user feedback. I'm open to suggestions on quick UI changes to make this more
clear for users.

[dgozman, 2017/06/13 23:18:39]

Let's work on good UI. This feature is all about good UI.

+    this.dispatchEventToListeners(MobileThrottling.Events.CPURateChanged);
   }
 
   /**
@@ -203,7 +253,8 @@ MobileThrottling.NetworkConditionsSelector = class {
     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) {
+          option.latency === value.latency && option.title === value.title &&
+          option.cpuThrottlingRate === value.cpuThrottlingRate) {
         this._selectCallback(index);
         return true;
       }
@@ -212,17 +263,41 @@ MobileThrottling.NetworkConditionsSelector = class {
   }
 };
 
-/** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-MobileThrottling.NetworkConditionsGroup;
+/** @typedef {!{title: string, items: !Array<!SDK.MobileThrottling.Conditions>}} */
+MobileThrottling.ThrottlingConditionsGroup;
+
 
+/** @enum {number} */
+MobileThrottling.CPUSlowdownMultiplier = {
+  MidTier: 4,
+  LowTier: 6,
+};
 
-/** @type {!Array.<!SDK.NetworkManager.Conditions>} */
-MobileThrottling.NetworkConditionsSelector.presets = [
-  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}
+/** @type {!Array.<!SDK.MobileThrottling.Conditions>} */
+MobileThrottling.ThrottlingSelector.presets = [
+  SDK.MobileThrottling.OfflineConditions,
+  {
+    title: 'Low-tier phone (Slow 3G)',
+    download: 500 * 1024 / 8 * .8,
+    upload: 500 * 1024 / 8 * .8,
+    latency: 400 * 5,
+    cpuThrottlingRate: MobileThrottling.CPUSlowdownMultiplier.LowTier
+  },
+  {
+    title: 'Mid-tier phone (Fast 3G)',
+    download: 1.6 * 1024 * 1024 / 8 * .9,
+    upload: 750 * 1024 / 8 * .9,
+    latency: 150 * 3.75,
+    cpuThrottlingRate: MobileThrottling.CPUSlowdownMultiplier.MidTier
+  },
 ];
 
+/** @enum {symbol} */
+MobileThrottling.Events = {

[dgozman, 2017/06/13 01:47:08]

MobileThrottling.ThrottlingSelector.Events

[chenwilliam, 2017/06/13 21:54:51]

Done.

+  CPURateChanged: Symbol('CPURateChanged')
+};
+
+
 /**
  * @implements {UI.ActionDelegate}
  * @unrestricted
@@ -236,11 +311,11 @@ MobileThrottling.NetworkConditionsActionDelegate = class {
    */
   handleAction(context, actionId) {
     if (actionId === 'network-conditions.network-online') {
-      SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoThrottlingConditions);
+      SDK.multitargetNetworkManager.setNetworkConditions(SDK.MobileThrottling.NoThrottlingConditions);
       return true;
     }
     if (actionId === 'network-conditions.network-offline') {
-      SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
+      SDK.multitargetNetworkManager.setNetworkConditions(SDK.MobileThrottling.OfflineConditions);
       return true;
     }
     return false;