DevTools: unify Network & CPU throttling

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

 // 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(
         SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditionsChanged, this);
     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);
   }
 
   /**
    * @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();
       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);
@@ skipping 26 matching lines @@
   }
 
   /**
    * @return {!UI.ToolbarMenuButton}
    */
   static createToolbarMenuButton() {
     var button = new UI.ToolbarMenuButton(appendItems);
     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;
 
     /**
      * @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>}
+     * @param {!Array.<!MobileThrottling.ThrottlingConditionsGroup>} groups
+     * @return {!Array<?SDK.MobileThrottling.Conditions>}
      */
     function populate(groups) {
       options = [];
       for (var group of groups) {
         for (var conditions of group.items)
           options.push(conditions);
         options.push(null);
       }
       return options;
     }
 
     /**
      * @param {number} index
      */
     function select(index) {
       selectedIndex = index;
       button.setText(options[index].title);
     }
   }
 
   /**
    * @return {!UI.ToolbarCheckbox}
    */
   static createOfflineToolbarCheckbox() {
     var checkbox = new UI.ToolbarCheckbox(
         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;
         }
       }
     }
   }
 
   revealAndUpdate() {
     Common.Revealer.reveal(this._customSetting);
     this._conditionsChanged();
   }
 
   /**
-   * @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);
+  }
+
+  /**
    * @return {boolean}
    */
   _conditionsChanged() {
     var value = this._manager.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) {
+          option.latency === value.latency && option.title === value.title &&
+          option.cpuThrottlingRate === value.cpuThrottlingRate) {
         this._selectCallback(index);
         return true;
       }
     }
     return false;
   }
 };
 
-/** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-MobileThrottling.NetworkConditionsGroup;
+/** @typedef {!{title: string, items: !Array<!SDK.MobileThrottling.Conditions>}} */
+MobileThrottling.ThrottlingConditionsGroup;
 
 
-/** @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}
+/** @enum {number} */
+MobileThrottling.CPUSlowdownMultiplier = {
+  MidTier: 4,
+  LowTier: 6,
+};
+
+/** @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
  */
 MobileThrottling.NetworkConditionsActionDelegate = class {
   /**
    * @override
    * @param {!UI.Context} context
    * @param {string} actionId
    * @return {boolean}
    */
   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;
   }
 };