DevTools: extract NetworkConditionsSelector into its own module

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

Index: third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSelector.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js b/third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSelector.js
similarity index 44%
copy from third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
copy to third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSelector.js
index 030c044df7f16a140f64d9ccfe70f4449e5aa7b8..4afdb61e624c753d2c4bfe598f936735c0083763 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/NetworkConditionsSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSelector.js
@@ -4,9 +4,9 @@
 /**
  * @unrestricted
  */
-Components.NetworkConditionsSelector = class {
+NetworkConditions.NetworkConditionsSelector = class {
   /**
-   * @param {function(!Array<!Components.NetworkConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
+   * @param {function(!Array<!NetworkConditions.NetworkConditionsGroup>):!Array<?SDK.NetworkManager.Conditions>} populateCallback
    * @param {function(number)} selectCallback
    */
   constructor(populateCallback, selectCallback) {
@@ -25,7 +25,7 @@ Components.NetworkConditionsSelector = class {
    * @param {boolean=} plainText
    * @return {string}
    */
-  static _throughputText(throughput, plainText) {
+  static throughputText(throughput, plainText) {
     if (throughput < 0)
       return '';
     var throughputInKbps = throughput / (1024 / 8);
@@ -50,8 +50,8 @@ Components.NetworkConditionsSelector = class {
     if (!isThrottling)
       return {text: conditionTitle, title: conditionTitle};
 
-    var downloadText = Components.NetworkConditionsSelector._throughputText(conditions.download, plainText);
-    var uploadText = Components.NetworkConditionsSelector._throughputText(conditions.upload, plainText);
+    var downloadText = NetworkConditions.NetworkConditionsSelector.throughputText(conditions.download, plainText);
+    var uploadText = NetworkConditions.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 {
@@ -67,11 +67,11 @@ Components.NetworkConditionsSelector = class {
    */
   static decorateSelect(selectElement) {
     var options = [];
-    var selector = new Components.NetworkConditionsSelector(populate, select);
+    var selector = new NetworkConditions.NetworkConditionsSelector(populate, select);
     selectElement.addEventListener('change', optionSelected, false);
 
     /**
-     * @param {!Array.<!Components.NetworkConditionsGroup>} groups
+     * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups
      * @return {!Array<?SDK.NetworkManager.Conditions>}
      */
     function populate(groups) {
@@ -82,7 +82,7 @@ Components.NetworkConditionsSelector = class {
         var groupElement = selectElement.createChild('optgroup');
         groupElement.label = group.title;
         for (var conditions of group.items) {
-          var title = Components.NetworkConditionsSelector._conditionsTitle(conditions, true);
+          var title = NetworkConditions.NetworkConditionsSelector._conditionsTitle(conditions, true);
           var option = new Option(title.text, title.text);
           option.title = title.title;
           groupElement.appendChild(option);
@@ -123,7 +123,7 @@ Components.NetworkConditionsSelector = class {
     /** @type {!Array<?SDK.NetworkManager.Conditions>} */
     var options = [];
     var selectedIndex = -1;
-    var selector = new Components.NetworkConditionsSelector(populate, select);
+    var selector = new NetworkConditions.NetworkConditionsSelector(populate, select);
     return button;
 
     /**
@@ -136,7 +136,7 @@ Components.NetworkConditionsSelector = class {
           contextMenu.appendSeparator();
         } else {
           contextMenu.appendCheckboxItem(
-              Components.NetworkConditionsSelector._conditionsTitle(conditions, true).text,
+              NetworkConditions.NetworkConditionsSelector._conditionsTitle(conditions, true).text,
               selector.optionSelected.bind(selector, conditions), selectedIndex === index);
         }
       }
@@ -144,7 +144,7 @@ Components.NetworkConditionsSelector = class {
     }
 
     /**
-     * @param {!Array.<!Components.NetworkConditionsGroup>} groups
+     * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups
      * @return {!Array<?SDK.NetworkManager.Conditions>}
      */
     function populate(groups) {
@@ -198,7 +198,7 @@ Components.NetworkConditionsSelector = class {
 
   _populateOptions() {
     var customGroup = {title: Common.UIString('Custom'), items: this._customSetting.get()};
-    var presetsGroup = {title: Common.UIString('Presets'), items: Components.NetworkConditionsSelector._presets};
+    var presetsGroup = {title: Common.UIString('Presets'), items: NetworkConditions.NetworkConditionsSelector.presets};
     var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.NetworkManager.NoThrottlingConditions]};
     this._options = this._populateCallback([disabledGroup, presetsGroup, customGroup]);
     if (!this._conditionsChanged()) {
@@ -241,11 +241,11 @@ Components.NetworkConditionsSelector = class {
 };
 
 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} */
-Components.NetworkConditionsGroup;
+NetworkConditions.NetworkConditionsGroup;
 
 
 /** @type {!Array.<!SDK.NetworkManager.Conditions>} */
-Components.NetworkConditionsSelector._presets = [
+NetworkConditions.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},
@@ -256,214 +256,11 @@ Components.NetworkConditionsSelector._presets = [
   {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 {
-  constructor() {
-    super(true);
-    this.registerRequiredCSS('components/networkConditionsSettingsTab.css');
-
-    this.contentElement.createChild('div', 'header').textContent = Common.UIString('Network Throttling Profiles');
-
-    var addButton = UI.createTextButton(
-        Common.UIString('Add custom profile...'), this._addButtonClicked.bind(this), 'add-conditions-button');
-    this.contentElement.appendChild(addButton);
-
-    this._list = new UI.ListWidget(this);
-    this._list.element.classList.add('conditions-list');
-    this._list.registerRequiredCSS('components/networkConditionsSettingsTab.css');
-    this._list.show(this.contentElement);
-
-    this._customSetting = Common.moduleSetting('customNetworkConditions');
-    this._customSetting.addChangeListener(this._conditionsUpdated, this);
-
-    this.setDefaultFocusedElement(addButton);
-    this.contentElement.tabIndex = 0;
-  }
-
-  /**
-   * @override
-   */
-  wasShown() {
-    super.wasShown();
-    this._conditionsUpdated();
-  }
-
-  _conditionsUpdated() {
-    this._list.clear();
-
-    var conditions = this._customSetting.get();
-    for (var i = 0; i < conditions.length; ++i)
-      this._list.appendItem(conditions[i], true);
-
-    this._list.appendSeparator();
-
-    conditions = Components.NetworkConditionsSelector._presets;
-    for (var i = 0; i < conditions.length; ++i)
-      this._list.appendItem(conditions[i], false);
-  }
-
-  _addButtonClicked() {
-    this._list.addNewItem(this._customSetting.get().length, {title: '', download: -1, upload: -1, latency: 0});
-  }
-
-  /**
-   * @override
-   * @param {*} item
-   * @param {boolean} editable
-   * @return {!Element}
-   */
-  renderItem(item, editable) {
-    var conditions = /** @type {!SDK.NetworkManager.Conditions} */ (item);
-    var element = createElementWithClass('div', 'conditions-list-item');
-    var title = element.createChild('div', 'conditions-list-text conditions-list-title');
-    var titleText = title.createChild('div', 'conditions-list-title-text');
-    titleText.textContent = conditions.title;
-    titleText.title = conditions.title;
-    element.createChild('div', 'conditions-list-separator');
-    element.createChild('div', 'conditions-list-text').textContent =
-        Components.NetworkConditionsSelector._throughputText(conditions.download);
-    element.createChild('div', 'conditions-list-separator');
-    element.createChild('div', 'conditions-list-text').textContent =
-        Components.NetworkConditionsSelector._throughputText(conditions.upload);
-    element.createChild('div', 'conditions-list-separator');
-    element.createChild('div', 'conditions-list-text').textContent = Common.UIString('%dms', conditions.latency);
-    return element;
-  }
-
-  /**
-   * @override
-   * @param {*} item
-   * @param {number} index
-   */
-  removeItemRequested(item, index) {
-    var list = this._customSetting.get();
-    list.splice(index, 1);
-    this._customSetting.set(list);
-  }
-
-  /**
-   * @override
-   * @param {*} item
-   * @param {!UI.ListWidget.Editor} editor
-   * @param {boolean} isNew
-   */
-  commitEdit(item, editor, isNew) {
-    var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item);
-    conditions.title = editor.control('title').value.trim();
-    var download = editor.control('download').value.trim();
-    conditions.download = download ? parseInt(download, 10) * (1024 / 8) : -1;
-    var upload = editor.control('upload').value.trim();
-    conditions.upload = upload ? parseInt(upload, 10) * (1024 / 8) : -1;
-    var latency = editor.control('latency').value.trim();
-    conditions.latency = latency ? parseInt(latency, 10) : 0;
-
-    var list = this._customSetting.get();
-    if (isNew)
-      list.push(conditions);
-    this._customSetting.set(list);
-  }
-
-  /**
-   * @override
-   * @param {*} item
-   * @return {!UI.ListWidget.Editor}
-   */
-  beginEdit(item) {
-    var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item);
-    var editor = this._createEditor();
-    editor.control('title').value = conditions.title;
-    editor.control('download').value = conditions.download <= 0 ? '' : String(conditions.download / (1024 / 8));
-    editor.control('upload').value = conditions.upload <= 0 ? '' : String(conditions.upload / (1024 / 8));
-    editor.control('latency').value = conditions.latency ? String(conditions.latency) : '';
-    return editor;
-  }
-
-  /**
-   * @return {!UI.ListWidget.Editor}
-   */
-  _createEditor() {
-    if (this._editor)
-      return this._editor;
-
-    var editor = new UI.ListWidget.Editor();
-    this._editor = editor;
-    var content = editor.contentElement();
-
-    var titles = content.createChild('div', 'conditions-edit-row');
-    titles.createChild('div', 'conditions-list-text conditions-list-title').textContent =
-        Common.UIString('Profile Name');
-    titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-    titles.createChild('div', 'conditions-list-text').textContent = Common.UIString('Download');
-    titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-    titles.createChild('div', 'conditions-list-text').textContent = Common.UIString('Upload');
-    titles.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-    titles.createChild('div', 'conditions-list-text').textContent = Common.UIString('Latency');
-
-    var fields = content.createChild('div', 'conditions-edit-row');
-    fields.createChild('div', 'conditions-list-text conditions-list-title')
-        .appendChild(editor.createInput('title', 'text', '', titleValidator));
-    fields.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-
-    var cell = fields.createChild('div', 'conditions-list-text');
-    cell.appendChild(editor.createInput('download', 'text', Common.UIString('kb/s'), throughputValidator));
-    cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIString('optional');
-    fields.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-
-    cell = fields.createChild('div', 'conditions-list-text');
-    cell.appendChild(editor.createInput('upload', 'text', Common.UIString('kb/s'), throughputValidator));
-    cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIString('optional');
-    fields.createChild('div', 'conditions-list-separator conditions-list-separator-invisible');
-
-    cell = fields.createChild('div', 'conditions-list-text');
-    cell.appendChild(editor.createInput('latency', 'text', Common.UIString('ms'), latencyValidator));
-    cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIString('optional');
-
-    return editor;
-
-    /**
-     * @param {*} item
-     * @param {number} index
-     * @param {!HTMLInputElement|!HTMLSelectElement} input
-     * @return {boolean}
-     */
-    function titleValidator(item, index, input) {
-      var value = input.value.trim();
-      return value.length > 0 && value.length < 50;
-    }
-
-    /**
-     * @param {*} item
-     * @param {number} index
-     * @param {!HTMLInputElement|!HTMLSelectElement} input
-     * @return {boolean}
-     */
-    function throughputValidator(item, index, input) {
-      var value = input.value.trim();
-      return !value || (/^[\d]+(\.\d+)?|\.\d+$/.test(value) && value >= 0 && value <= 10000000);
-    }
-
-    /**
-     * @param {*} item
-     * @param {number} index
-     * @param {!HTMLInputElement|!HTMLSelectElement} input
-     * @return {boolean}
-     */
-    function latencyValidator(item, index, input) {
-      var value = input.value.trim();
-      return !value || (/^[\d]+$/.test(value) && value >= 0 && value <= 1000000);
-    }
-  }
-};
-
 /**
  * @implements {UI.ActionDelegate}
  * @unrestricted
  */
-Components.NetworkConditionsActionDelegate = class {
+NetworkConditions.NetworkConditionsActionDelegate = class {
   /**
    * @override
    * @param {!UI.Context} context
@@ -471,82 +268,14 @@ Components.NetworkConditionsActionDelegate = class {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    if (actionId === 'components.network-online') {
+    if (actionId === 'network-conditions.network-online') {
       SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoThrottlingConditions);
       return true;
     }
-    if (actionId === 'components.network-offline') {
+    if (actionId === 'network-conditions.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;
-};