[Devtools] New structure and colorize rows for network products

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

 // Copyright 2016 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
  */
 Network.NetworkLogViewColumns = class {
   /**
    * @param {!Network.NetworkLogView} networkLogView
    * @param {!Network.NetworkTransferTimeCalculator} timeCalculator
@@ skipping 11 matching lines @@
 
     /** @type {!Map<string, !Array<number>>} */
     this._eventDividers = new Map();
     this._eventDividersShown = false;
 
     this._gridMode = true;
 
     /** @type {!Array.<!Network.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
-    /** @type {!Map<string, ?Network.NetworkColumnExtensionInterface>} */
-    this._columnExtensions = new Map();
-
     this._waterfallRequestsAreStale = false;
     this._waterfallScrollerWidthIsStale = true;
 
+    /** @type {?ProductRegistry.Registry} */
+    this._productRegistryInstance = null;
+
     /** @type {!Components.Linkifier} */
     this._popupLinkifier = new Components.Linkifier();
 
     /** @type {!Map<string, !Network.NetworkTimeCalculator>} */
     this._calculatorsMap = new Map();
     this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Time, timeCalculator);
     this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
     this._setupWaterfall();
@@ skipping 23 matching lines @@
   }
 
   reset() {
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
     this._eventDividers.clear();
   }
 
   _setupDataGrid() {
     var defaultColumns = Network.NetworkLogViewColumns._defaultColumns;
+
+    if (Runtime.experiments.isEnabled('networkGroupingRequests')) {
+      defaultColumns.splice(1, 0, /** @type {!Network.NetworkLogViewColumns.Descriptor} */ ({
+                              id: 'product',
+                              title: Common.UIString('Product'),
+                              visible: true
+                            }));
+    }
+
     var defaultColumnConfig = Network.NetworkLogViewColumns._defaultColumnConfig;
 
     this._columns = /** @type {!Array<!Network.NetworkLogViewColumns.Descriptor>} */ ([]);
     for (var currentConfigColumn of defaultColumns) {
       var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ (
           Object.assign({}, defaultColumnConfig, currentConfigColumn));
       columnConfig.id = columnConfig.id;
       if (columnConfig.subtitle)
         columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
       this._columns.push(columnConfig);
     }
-    this._loadColumnExtensions();
     this._loadCustomColumnsAndSettings();
 
     this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element, this._getPopoverRequest.bind(this));
     this._popoverHelper.setHasPadding(true);
 
     /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */
     this._dataGrid =
         new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewColumns._convertToDataGridDescriptor));
     this._dataGrid.element.addEventListener('mousedown', event => {
       if (!this._dataGrid.selectedNode && event.button)
@@ skipping 169 matching lines @@
     if (columnId === 'waterfall') {
       if (this._dataGrid.sortOrder() === DataGrid.DataGrid.Order.Ascending)
         this._waterfallColumnSortIcon.setIconType('smallicon-triangle-up');
       else
         this._waterfallColumnSortIcon.setIconType('smallicon-triangle-down');
 
       var sortFunction = Network.NetworkRequestNode.RequestPropertyComparator.bind(null, this._activeWaterfallSortId);
       this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
       this._networkLogView.dataGridSorted();
       return;
+    } else if (columnId === 'product' && !this._productRegistryInstance) {
+      ProductRegistry.instance().then(productRegistry => {
+        this._productRegistryInstance = productRegistry;
+        var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
+        if (!columnConfig)
+          return;
+        columnConfig.sortingFunction = Network.NetworkRequestNode.ProductComparator.bind(null, productRegistry);
+        if (this._dataGrid.sortColumnId() === 'product')
+          this._sortHandler();
+      });
+      return;
     }
     this._waterfallColumnSortIcon.setIconType('');
 
     var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
     if (!columnConfig || !columnConfig.sortingFunction)
       return;
 
     this._dataGrid.sortNodes(columnConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
     this._networkLogView.dataGridSorted();
   }
@@ skipping 30 matching lines @@
       this._networkLogView.removeAllNodeHighlights();
       this._splitWidget.hideSidebar();
       this._activeScroller = this._dataGridScroller;
       this._dataGrid.setScrollContainer(this._dataGridScroller);
     }
     this._networkLogView.element.classList.toggle('brief-mode', !gridMode);
     this._updateColumns();
   }
 
   /**
-   * @return {!Map<string, ?Network.NetworkColumnExtensionInterface>}
-   */
-  columnExtensions() {
-    return this._columnExtensions;
-  }
-
-  /**
    * @param {!Network.NetworkLogViewColumns.Descriptor} columnConfig
    */
   _toggleColumnVisibility(columnConfig) {
     this._loadCustomColumnsAndSettings();
     columnConfig.visible = !columnConfig.visible;
     this._saveColumnsSettings();
     this._updateColumns();
   }
 
   _saveColumnsSettings() {
     var saveableSettings = {};
     for (var columnConfig of this._columns)
       saveableSettings[columnConfig.id] = {visible: columnConfig.visible, title: columnConfig.title};
 
     this._persistantSettings.set(saveableSettings);
   }
 
-  _loadColumnExtensions() {
-    var extensions = self.runtime.extensions(Network.NetworkColumnExtensionInterface);
-    for (var i = 0; i < extensions.length; i++) {
-      var extension = extensions[i];
-      var title = extension.title();
-      var columnId = title.toLowerCase() + '-extension';
-
-      this._columnExtensions.set(columnId, null);
-      extension.instance().then(extensionInstanceResolved.bind(this, columnId));
-
-      var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ (
-          Object.assign({}, Network.NetworkLogViewColumns._defaultColumnConfig, {
-            id: columnId,
-            title: title,
-            isResponseHeader: false,
-            isCustomHeader: false,
-            visible: true,
-            sortingFunction:
-                Network.NetworkRequestNode.ExtensionColumnComparator.bind(null, this._columnExtensions, columnId)
-          }));
-      const columnIndex = i + 1;
-      this._columns.splice(columnIndex, 0, columnConfig);
-      if (this._dataGrid)
-        this._dataGrid.addColumn(Network.NetworkLogViewColumns._convertToDataGridDescriptor(columnConfig), columnIndex);
-    }
-
-    /**
-     * @param {string} columnId
-     * @param {!Network.NetworkColumnExtensionInterface} instance
-     * @this {Network.NetworkLogViewColumns}
-     */
-    function extensionInstanceResolved(columnId, instance) {
-      this._columnExtensions.set(columnId, instance);
-      this._networkLogView.columnExtensionResolved();
-    }
-  }
-
   _loadCustomColumnsAndSettings() {
     var savedSettings = this._persistantSettings.get();
     var columnIds = Object.keys(savedSettings);
     for (var columnId of columnIds) {
       var setting = savedSettings[columnId];
       var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
       if (!columnConfig)
         columnConfig = this._addCustomHeader(setting.title, columnId);
       if (columnConfig.hideable && typeof setting.visible === 'boolean')
         columnConfig.visible = !!setting.visible;
@@ skipping 232 matching lines @@
     this._redrawWaterfallColumn();
   }
 
   clearFilmStripFrame() {
     this._eventDividers.delete(Network.NetworkLogViewColumns._filmStripDividerColor);
     this._redrawWaterfallColumn();
   }
 };
 
 Network.NetworkLogViewColumns._initialSortColumn = 'waterfall';
+/** @type {?ProductRegistry.Registry} */
+Network.NetworkRequestNode._productRegistryInstance = null;
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
  *     weight: number,
  *     hideable: boolean,
@@ skipping 192 matching lines @@
 /**
  * @enum {string}
  */
 Network.NetworkLogViewColumns.WaterfallSortIds = {
   StartTime: 'startTime',
   ResponseTime: 'responseReceivedTime',
   EndTime: 'endTime',
   Duration: 'duration',
   Latency: 'latency'
 };
-
-/**
- * @interface
- */
-Network.NetworkColumnExtensionInterface = function() {};
-
-Network.NetworkColumnExtensionInterface.prototype = {
-  /**
-   * @param {!SDK.NetworkRequest} request
-   * @return {string}
-   */
-  lookupColumnValue(request) {},
-
-  /**
-   * @param {!SDK.NetworkRequest} aRequest
-   * @param {!SDK.NetworkRequest} bRequest
-   * @return {number}
-   */
-  requestComparator(aRequest, bRequest) {}
-};