DevTools: unify Network & CPU throttling

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

-// Copyright 2015 The Chromium Authors. All rights reserved.
+// Copyright 2017 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 {
-  /**
-   * @param {function(!Array<!MobileThrottling.NetworkConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
-   * @param {function(number)} selectCallback
-   */
-  constructor(populateCallback, selectCallback) {
-    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._populateOptions();
+MobileThrottling.ThrottlingManager = class extends Common.Object {
+  constructor() {
+    super();
+    this._cpuThrottlingRate = MobileThrottling.CPUThrottlingRates.NoThrottling;
+    /** @type {!Set<!UI.ToolbarComboBox>} */
+    this._cpuThrottlingControls = new Set();
+    this._cpuThrottlingRates = [

[dgozman, 2017/06/30 23:21:49]

Place next to other presets.

[chenwilliam, 2017/07/05 22:35:31]

Done.

+      MobileThrottling.CPUThrottlingRates.NoThrottling,
+      MobileThrottling.CPUThrottlingRates.MidTierMobile,
+      MobileThrottling.CPUThrottlingRates.LowEndMobile,
+    ];
+    SDK.targetManager.observeModels(SDK.EmulationModel, this);

[dgozman, 2017/06/30 23:21:49]

Do this in a last line.

[chenwilliam, 2017/07/05 22:35:32]

Done.

+    /** @type {!Common.Setting<!Array<!SDK.NetworkManager.Conditions>>} */
+    this._customNetworkConditionsSetting = Common.moduleSetting('customNetworkConditions');
+    /** @type {!SDK.NetworkManager.Conditions} */
+    this._currentNetworkThrottlingConditions = SDK.NetworkManager.NoThrottlingConditions;
+    /** @type {!SDK.NetworkManager.Conditions} */
+    this._lastNetworkThrottlingConditions;
+    this._trackNetworkConditions();
   }
 
-  /**
-   * @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.NetworkThrottlingSelector}
    */
-  static decorateSelect(selectElement) {
+  decorateSelectWithNetworkThrottling(selectElement) {
     var options = [];
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
+    var selector =
+        new MobileThrottling.NetworkThrottlingSelector(populate, select, this._customNetworkConditionsSetting);
     selectElement.addEventListener('change', optionSelected, false);
+    return selector;
 
     /**
-     * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
+     * @param {!Array.<!MobileThrottling.NetworkThrottlingConditionsGroup>} 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 title = 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);
         }
       }
       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.ToolbarCheckbox}
+   */
+  createOfflineToolbarCheckbox() {
+    var checkbox = new UI.ToolbarCheckbox(
+        Common.UIString('Offline'), Common.UIString('Force disconnected from network'), forceOffline.bind(this));
+    SDK.multitargetNetworkManager.addEventListener(
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkConditionsChanged);
+    checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager.OfflineConditions);
+
+    /**
+     * @this {!MobileThrottling.ThrottlingManager}
+     */
+    function forceOffline() {
+      if (checkbox.checked())
+        SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
+      else
+        SDK.multitargetNetworkManager.setNetworkConditions(this._lastNetworkThrottlingConditions);
+    }
+
+    function networkConditionsChanged() {
+      checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager.OfflineConditions);
+    }
+
+    return checkbox;
+  }
+
+
+  /**
    * @return {!UI.ToolbarMenuButton}
    */
-  static createToolbarMenuButton() {
+  createMobileThrottlingButton() {
     var button = new UI.ToolbarMenuButton(appendItems);
+    button.setTitle(Common.UIString('Throttling'));
     button.setGlyph('');
     button.turnIntoSelect();
 
-    /** @type {!Array<?SDK.NetworkManager.Conditions>} */
+    /** @type {!MobileThrottling.ConditionsList} */
     var options = [];
     var selectedIndex = -1;
-    var selector = new MobileThrottling.NetworkConditionsSelector(populate, select);
+    var selector = new MobileThrottling.MobileThrottlingSelector(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);
+          continue;
         }
+        if (conditions.title === MobileThrottling.CustomConditions.title &&
+            conditions.description === MobileThrottling.CustomConditions.description)
+          continue;
+        contextMenu.appendCheckboxItem(
+            Common.UIString(conditions.title),
+            selector.optionSelected.bind(selector, /** @type {!MobileThrottling.Conditions} */ (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.MobileThrottlingConditionsGroup>} groups
+     * @return {!MobileThrottling.ConditionsList}
      */
     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);
+      button.setTitle(options[index].description);
     }
   }
 
   /**
-   * @return {!UI.ToolbarCheckbox}
+   * @return {number}
    */
-  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);
-
-    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);
-    this._conditionsChanged();
+  cpuThrottlingRate() {
+    return this._cpuThrottlingRate;
   }
 
   /**
-   * @param {!SDK.NetworkManager.Conditions} conditions
+   * @param {number} rate
    */
-  optionSelected(conditions) {
-    this._manager.setNetworkConditions(conditions);
+  setCPUThrottlingRate(rate) {
+    this._cpuThrottlingRate = rate;
+    for (var emulationModel of SDK.targetManager.models(SDK.EmulationModel))
+      emulationModel.setCPUThrottlingRate(this._cpuThrottlingRate);
+    var icon = null;
+    if (this._cpuThrottlingRate !== MobileThrottling.CPUThrottlingRates.NoThrottling) {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
+      icon = UI.Icon.create('smallicon-warning');
+      icon.title = Common.UIString('CPU throttling is enabled');
+    }
+    var index = this._cpuThrottlingRates.indexOf(this._cpuThrottlingRate);
+    for (var control of this._cpuThrottlingControls)
+      control.setSelectedIndex(index);
+    UI.inspectorView.setPanelIcon('timeline', icon);
+    this.dispatchEventToListeners(MobileThrottling.ThrottlingManager.Events.RateChanged, this._cpuThrottlingRate);
   }
 
   /**
-   * @return {boolean}
+   * @override
+   * @param {!SDK.EmulationModel} emulationModel
    */
-  _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) {
-        this._selectCallback(index);
-        return true;
-      }
+  modelAdded(emulationModel) {
+    if (this._cpuThrottlingRate !== MobileThrottling.CPUThrottlingRates.NoThrottling)
+      emulationModel.setCPUThrottlingRate(this._cpuThrottlingRate);
+  }
+
+  /**
+   * @override
+   * @param {!SDK.EmulationModel} emulationModel
+   */
+  modelRemoved(emulationModel) {
+  }
+
+  /**
+   * @return {!UI.ToolbarComboBox}
+   */
+  createControl() {

[dgozman, 2017/06/30 23:21:49]

createCPUThrottlingSelector

[chenwilliam, 2017/07/05 22:35:31]

Done.

+    var control = new UI.ToolbarComboBox(
+        event => this.setCPUThrottlingRate(this._cpuThrottlingRates[event.target.selectedIndex]));
+    this._cpuThrottlingControls.add(control);
+    var currentRate = this._cpuThrottlingRate;
+
+    for (var i = 0; i < this._cpuThrottlingRates.length; ++i) {
+      var rate = this._cpuThrottlingRates[i];
+      var title = rate === 1 ? Common.UIString('No throttling') : Common.UIString('%d\xD7 slowdown', rate);
+      var option = control.createOption(title);
+      control.addOption(option);
+      if (currentRate === rate)
+        control.setSelectedIndex(i);
     }
-    return false;
+    return control;
+  }
+
+  _trackNetworkConditions() {

[dgozman, 2017/06/30 23:21:49]

Let's inline it.

[chenwilliam, 2017/07/05 22:35:32]

Done.

+    SDK.multitargetNetworkManager.addEventListener(
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkConditionsChanged.bind(this));
+
+    /**
+     * @this {!MobileThrottling.ThrottlingManager}
+     */
+    function networkConditionsChanged() {

[dgozman, 2017/06/30 23:21:49]

arrow function ftw!

[chenwilliam, 2017/07/05 22:35:31]

Done.

+      this._lastNetworkThrottlingConditions = this._currentNetworkThrottlingConditions;
+      this._currentNetworkThrottlingConditions = SDK.multitargetNetworkManager.networkConditions();
+    }
   }
 };
 
-/** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-MobileThrottling.NetworkConditionsGroup;
-
-
-/** @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 {symbol} */
+MobileThrottling.ThrottlingManager.Events = {
+  RateChanged: Symbol('RateChanged')
+};
 
 /**
- * @implements {UI.ActionDelegate}
- * @unrestricted
+ * @return {!MobileThrottling.ThrottlingManager}
  */
-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);
-      return true;
-    }
-    if (actionId === 'network-conditions.network-offline') {
-      SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
-      return true;
-    }
-    return false;
+MobileThrottling.throttlingManager = function() {

[dgozman, 2017/06/30 23:21:49]

return self.singleton(MobileThrottling.ThrottlingManager);

[chenwilliam, 2017/07/05 22:35:31]

Done.

+  if (!MobileThrottling._throttlingManager) {
+    /** @type {!MobileThrottling.ThrottlingManager} */
+    MobileThrottling._throttlingManager = new MobileThrottling.ThrottlingManager();
   }
+  return MobileThrottling._throttlingManager;
 };