[Devtools] New structure and colorize rows for network products

third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 22 matching lines @@
  * @unrestricted
  */
 Network.NetworkPanel = class extends UI.Panel {
   constructor() {
     super('network');
     this.registerRequiredCSS('network/networkPanel.css');
 
     this._networkLogShowOverviewSetting = Common.settings.createSetting('networkLogShowOverview', true);
     this._networkLogLargeRowsSetting = Common.settings.createSetting('networkLogLargeRows', false);
     this._networkRecordFilmStripSetting = Common.settings.createSetting('networkRecordFilmStripSetting', false);
-    this._toggleRecordAction =
-        /** @type {!UI.Action }*/ (UI.actionRegistry.action('network.toggle-recording'));
+    this._toggleRecordAction = /** @type {!UI.Action }*/ (UI.actionRegistry.action('network.toggle-recording'));
 
     /** @type {?PerfUI.FilmStripView} */
     this._filmStripView = null;
     /** @type {?Network.NetworkPanel.FilmStripRecorder} */
     this._filmStripRecorder = null;
 
     this._panelToolbar = new UI.Toolbar('', this.element);
     this._filterBar = new UI.FilterBar('networkPanel', true);
     this._filterBar.show(this.element);
 
@@ skipping 27 matching lines @@
     this._detailsWidget.element.classList.add('network-details-view');
     this._splitWidget.setMainWidget(this._detailsWidget);
 
     this._closeButtonElement = createElement('div', 'dt-close-button');
     this._closeButtonElement.addEventListener('click', this._showRequest.bind(this, null), false);
 
     this._networkLogShowOverviewSetting.addChangeListener(this._toggleShowOverview, this);
     this._networkLogLargeRowsSetting.addChangeListener(this._toggleLargerRequests, this);
     this._networkRecordFilmStripSetting.addChangeListener(this._toggleRecordFilmStrip, this);
 
-    /** @type {!Map<string, !Runtime.Extension>} */
-    this._groupingExtensions = new Map();
     this._createToolbarButtons();
 
     this._toggleRecord(true);
     this._toggleShowOverview();
     this._toggleLargerRequests();
     this._toggleRecordFilmStrip();
     this._updateUI();
 
     SDK.targetManager.addModelListener(
         SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.WillReloadPage, this._willReloadPage, this);
@@ skipping 77 matching lines @@
     this._panelToolbar.appendSeparator();
     this._panelToolbar.appendToolbarItem(NetworkConditions.NetworkConditionsSelector.createOfflineToolbarCheckbox());
     this._panelToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
 
     this._setupGroupingCombo();
 
     this._panelToolbar.appendToolbarItem(new UI.ToolbarItem(this._progressBarContainer));
   }
 
   _setupGroupingCombo() {
-    var extensions = self.runtime.extensions(Network.NetworkGroupLookupInterface);
-    if (!extensions.length)
+    if (!Runtime.experiments.isEnabled('networkGroupingRequests'))
       return;
+    /** @type {!Array<!{value: string, label: string, title: string}>} */
+    var options = [{value: '', label: Common.UIString('No grouping'), title: Common.UIString('No grouping')}];
+    for (var name of this._networkLogView.groupLookups().keys())
+      options.push({value: name, label: Common.UIString(name), title: Common.UIString(name)});
 
     var setting = Common.settings.createSetting('networkGrouping', '');
-    /** @type {!Array<!{value: string, label: string, title: string}>} */
-    var options = [{value: '', label: Common.UIString('No grouping'), title: Common.UIString('No grouping')}];
-
-    extensions.forEach(extension => {
-      var identifier = extension.descriptor()['id'];
-      this._groupingExtensions.set(identifier, extension);
-      options.push({value: identifier, label: extension.title(), title: extension.title()});
-    });
     this._panelToolbar.appendToolbarItem(new UI.ToolbarSettingComboBox(options, setting, Common.UIString('Group by')));
-    setting.addChangeListener(event => this._groupingChanged(/** @type {string} */ (event.data)));
-    this._groupingChanged(setting.get());
+    setting.addChangeListener(event => this._networkLogView.setGrouping(/** @type {string} */ (event.data)));
   }
 
   /**
-   * @param {string} identifier
-   */
-  _groupingChanged(identifier) {
-    var extension = this._groupingExtensions.get(identifier);
-    if (extension) {
-      extension.instance().then(
-          grouping => this._networkLogView.setGrouping(/** @type {?Network.NetworkGroupLookupInterface} */ (grouping)));
-    } else {
-      this._networkLogView.setGrouping(null);
-    }
-  }
-
-  /**
    * @return {!UI.ToolbarComboBox}
    */
   _createNetworkConditionsSelect() {
     var toolbarItem = new UI.ToolbarComboBox(null);
     toolbarItem.setMaxWidth(140);
     NetworkConditions.NetworkConditionsSelector.decorateSelect(toolbarItem.selectElement());
     return toolbarItem;
   }
 
   _toggleRecording() {
@@ skipping 514 matching lines @@
    * @param {string} actionId
    * @return {boolean}
    */
   handleAction(context, actionId) {
     var panel = UI.context.flavor(Network.NetworkPanel);
     console.assert(panel && panel instanceof Network.NetworkPanel);
     panel._toggleRecording();
     return true;
   }
 };