DevTools: extract NetworkConditionsSelector into its own module

third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSettingsTab.js

Index: third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSettingsTab.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js b/third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSettingsTab.js
similarity index 36%
rename from third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
rename to third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSettingsTab.js
index 030c044df7f16a140f64d9ccfe70f4449e5aa7b8..931e04ba8e81525d088dd0dead9c0eafd0418aad 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSettingsTab.js
@@ -1,270 +1,15 @@
-// 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
- */
-Components.NetworkConditionsSelector = class {
-  /**
-   * @param {function(!Array<!Components.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();
-  }
-
-  /**
-   * @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 {!SDK.NetworkManager.Conditions} conditions
-   * @param {boolean=} plainText
-   * @return {!{text: string, title: string}}
-   */
-  static _conditionsTitle(conditions, plainText) {
-    var downloadInKbps = conditions.download / (1024 / 8);
-    var uploadInKbps = conditions.upload / (1024 / 8);
-    var isThrottling = (downloadInKbps >= 0) || (uploadInKbps >= 0) || (conditions.latency > 0);
-    var conditionTitle = Common.UIString(conditions.title);
-    if (!isThrottling)
-      return {text: conditionTitle, title: conditionTitle};
-
-    var downloadText = Components.NetworkConditionsSelector._throughputText(conditions.download, plainText);
-    var uploadText = Components.NetworkConditionsSelector._throughputText(conditions.upload, plainText);
-    var pattern = plainText ? '%s (%dms, %s, %s)' : '%s (%dms RTT, %s\u2b07, %s\u2b06)';
-    var title = Common.UIString(pattern, conditionTitle, conditions.latency, downloadText, uploadText);
-    return {
-      text: title,
-      title: Common.UIString(
-          'Maximum download throughput: %s.\r\nMaximum upload throughput: %s.\r\nMinimum round-trip time: %dms.',
-          downloadText, uploadText, conditions.latency)
-    };
-  }
-
-  /**
-   * @param {!HTMLSelectElement} selectElement
-   */
-  static decorateSelect(selectElement) {
-    var options = [];
-    var selector = new Components.NetworkConditionsSelector(populate, select);
-    selectElement.addEventListener('change', optionSelected, false);
-
-    /**
-     * @param {!Array.<!Components.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 = Components.NetworkConditionsSelector._conditionsTitle(conditions, true);
-          var option = new Option(title.text, title.text);
-          option.title = 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.ToolbarMenuButton}
-   */
-  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 Components.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(
-              Components.NetworkConditionsSelector._conditionsTitle(conditions, true).text,
-              selector.optionSelected.bind(selector, conditions), selectedIndex === index);
-        }
-      }
-      contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUpdate.bind(selector));
-    }
-
-    /**
-     * @param {!Array.<!Components.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);
-      }
-      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'), undefined, forceOffline);
-    SDK.multitargetNetworkManager.addEventListener(
-        SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkConditionsChanged);
-    checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager.OfflineConditions);
-
-    var lastNetworkConditions;
-
-    function forceOffline() {
-      if (checkbox.checked()) {
-        lastNetworkConditions = SDK.multitargetNetworkManager.networkConditions();
-        SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
-      } else {
-        SDK.multitargetNetworkManager.setNetworkConditions(lastNetworkConditions);
-      }
-    }
-
-    function networkConditionsChanged() {
-      var conditions = SDK.multitargetNetworkManager.networkConditions();
-      if (conditions !== SDK.NetworkManager.OfflineConditions)
-        lastNetworkConditions = conditions;
-      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: Components.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();
-  }
-
-  /**
-   * @param {!SDK.NetworkManager.Conditions} conditions
-   */
-  optionSelected(conditions) {
-    this._manager.setNetworkConditions(conditions);
-  }
-
-  /**
-   * @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) {
-        this._selectCallback(index);
-        return true;
-      }
-    }
-    return false;
-  }
-};
-
-/** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-Components.NetworkConditionsGroup;
-
-
-/** @type {!Array.<!SDK.NetworkManager.Conditions>} */
-Components.NetworkConditionsSelector._presets = [
-  SDK.NetworkManager.OfflineConditions, {title: 'GPRS', download: 50 * 1024 / 8, upload: 20 * 1024 / 8, latency: 500},
-  {title: 'Regular 2G', download: 250 * 1024 / 8, upload: 50 * 1024 / 8, latency: 300},
-  {title: 'Good 2G', download: 450 * 1024 / 8, upload: 150 * 1024 / 8, latency: 150},
-  {title: 'Regular 3G', download: 750 * 1024 / 8, upload: 250 * 1024 / 8, latency: 100},
-  {title: 'Good 3G', download: 1.5 * 1024 * 1024 / 8, upload: 750 * 1024 / 8, latency: 40},
-  {title: 'Regular 4G', download: 4 * 1024 * 1024 / 8, upload: 3 * 1024 * 1024 / 8, latency: 20},
-  {title: 'DSL', download: 2 * 1024 * 1024 / 8, upload: 1 * 1024 * 1024 / 8, latency: 5},
-  {title: 'WiFi', download: 30 * 1024 * 1024 / 8, upload: 15 * 1024 * 1024 / 8, latency: 2}
-];
-
 
 /**
  * @implements {UI.ListWidget.Delegate}
  * @unrestricted
  */
-Components.NetworkConditionsSettingsTab = class extends UI.VBox {
+NetworkConditions.NetworkConditionsSettingsTab = class extends UI.VBox {
   constructor() {
     super(true);
-    this.registerRequiredCSS('components/networkConditionsSettingsTab.css');
+    this.registerRequiredCSS('network_conditions/networkConditionsSettingsTab.css');
 
     this.contentElement.createChild('div', 'header').textContent = Common.UIString('Network Throttling Profiles');
 
@@ -274,7 +19,7 @@ Components.NetworkConditionsSettingsTab = class extends UI.VBox {
 
     this._list = new UI.ListWidget(this);
     this._list.element.classList.add('conditions-list');
-    this._list.registerRequiredCSS('components/networkConditionsSettingsTab.css');
+    this._list.registerRequiredCSS('network_conditions/networkConditionsSettingsTab.css');
     this._list.show(this.contentElement);
 
     this._customSetting = Common.moduleSetting('customNetworkConditions');
@@ -301,7 +46,7 @@ Components.NetworkConditionsSettingsTab = class extends UI.VBox {
 
     this._list.appendSeparator();
 
-    conditions = Components.NetworkConditionsSelector._presets;
+    conditions = NetworkConditions.NetworkConditionsSelector.presets;
     for (var i = 0; i < conditions.length; ++i)
       this._list.appendItem(conditions[i], false);
   }
@@ -325,10 +70,10 @@ Components.NetworkConditionsSettingsTab = class extends UI.VBox {
     titleText.title = conditions.title;
     element.createChild('div', 'conditions-list-separator');
     element.createChild('div', 'conditions-list-text').textContent =
-        Components.NetworkConditionsSelector._throughputText(conditions.download);
+        NetworkConditions.NetworkConditionsSelector.throughputText(conditions.download);
     element.createChild('div', 'conditions-list-separator');
     element.createChild('div', 'conditions-list-text').textContent =
-        Components.NetworkConditionsSelector._throughputText(conditions.upload);
+        NetworkConditions.NetworkConditionsSelector.throughputText(conditions.upload);
     element.createChild('div', 'conditions-list-separator');
     element.createChild('div', 'conditions-list-text').textContent = Common.UIString('%dms', conditions.latency);
     return element;
@@ -458,95 +203,3 @@ Components.NetworkConditionsSettingsTab = class extends UI.VBox {
     }
   }
 };
-
-/**
- * @implements {UI.ActionDelegate}
- * @unrestricted
- */
-Components.NetworkConditionsActionDelegate = class {
-  /**
-   * @override
-   * @param {!UI.Context} context
-   * @param {string} actionId
-   * @return {boolean}
-   */
-  handleAction(context, actionId) {
-    if (actionId === 'components.network-online') {
-      SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoThrottlingConditions);
-      return true;
-    }
-    if (actionId === 'components.network-offline') {
-      SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.OfflineConditions);
-      return true;
-    }
-    return false;
-  }
-};
-
-/**
- * @param {!Protocol.Network.ResourcePriority} priority
- * @return {string}
- */
-Components.uiLabelForPriority = function(priority) {
-  var map = Components.priorityUiLabelMap();
-  return map.get(priority) || '';
-};
-
-/**
- * @param {string} priorityLabel
- * @return {string}
- */
-Components.uiLabelToPriority = function(priorityLabel) {
-  /** @type {!Map<string, !Protocol.Network.ResourcePriority>} */
-  var labelToPriorityMap = Components.uiLabelToPriority._uiLabelToPriorityMap;
-
-  if (labelToPriorityMap)
-    return labelToPriorityMap.get(priorityLabel);
-
-  labelToPriorityMap = new Map();
-  Components.priorityUiLabelMap().forEach((value, key) => labelToPriorityMap.set(value, key));
-  Components.uiLabelToPriority._uiLabelToPriorityMap = labelToPriorityMap;
-  return labelToPriorityMap.get(priorityLabel) || '';
-};
-
-/**
- * @return {!Map<!Protocol.Network.ResourcePriority, string>}
- */
-Components.priorityUiLabelMap = function() {
-  /** @type {!Map<!Protocol.Network.ResourcePriority, string>} */
-  var map = Components.priorityUiLabelMap._priorityUiLabelMap;
-
-  if (map)
-    return map;
-
-  map = new Map();
-  map.set(Protocol.Network.ResourcePriority.VeryLow, Common.UIString('Lowest'));
-  map.set(Protocol.Network.ResourcePriority.Low, Common.UIString('Low'));
-  map.set(Protocol.Network.ResourcePriority.Medium, Common.UIString('Medium'));
-  map.set(Protocol.Network.ResourcePriority.High, Common.UIString('High'));
-  map.set(Protocol.Network.ResourcePriority.VeryHigh, Common.UIString('Highest'));
-  Components.priorityUiLabelMap._priorityUiLabelMap = map;
-
-  return map;
-};
-
-/**
- * @return {!Map<!Protocol.Network.ResourcePriority, number>}
- */
-Components.prioritySymbolToNumericMap = function() {
-  /** @type {!Map<!Protocol.Network.ResourcePriority, number>} */
-  var priorityMap = Components.prioritySymbolToNumericMap._symbolicToNumericPriorityMap;
-
-  if (priorityMap)
-    return priorityMap;
-
-  priorityMap = new Map();
-  priorityMap.set(Protocol.Network.ResourcePriority.VeryLow, 1);
-  priorityMap.set(Protocol.Network.ResourcePriority.Low, 2);
-  priorityMap.set(Protocol.Network.ResourcePriority.Medium, 3);
-  priorityMap.set(Protocol.Network.ResourcePriority.High, 4);
-  priorityMap.set(Protocol.Network.ResourcePriority.VeryHigh, 5);
-  Components.prioritySymbolToNumericMap._symbolicToNumericPriorityMap = priorityMap;
-
-  return priorityMap;
-};