[Devtools] New structure and colorize rows for network products

third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.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 39 matching lines @@
     this._progressBarContainer = progressBarContainer;
     this._networkLogLargeRowsSetting = networkLogLargeRowsSetting;
     this._networkLogLargeRowsSetting.addChangeListener(updateRowHeight.bind(this), this);
 
     /** @type {!Network.NetworkTransferTimeCalculator} */
     this._timeCalculator = new Network.NetworkTransferTimeCalculator();
     /** @type {!Network.NetworkTransferDurationCalculator} */
     this._durationCalculator = new Network.NetworkTransferDurationCalculator();
     this._calculator = this._timeCalculator;
 
-    /** @type {?Network.NetworkGroupLookupInterface} */
-    this._activeGroupLookup = null;
-
     /**
      * @this {Network.NetworkLogView}
      */
     function updateRowHeight() {
       /** @type {number} */
       this._rowHeight = !!this._networkLogLargeRowsSetting.get() ? 41 : 21;
     }
     updateRowHeight.call(this);
 
     this._columns = new Network.NetworkLogViewColumns(
         this, this._timeCalculator, this._durationCalculator, networkLogLargeRowsSetting);
 
     /** @type {!Map.<string, !Network.NetworkRequestNode>} */
     this._nodesByRequestId = new Map();
     /** @type {!Map<*, !Network.NetworkGroupNode>} */
     this._nodeGroups = new Map();
-    /** @type {!Set<!Network.NetworkRowDecorator>} */
-    this._rowDecorators = new Set();
-
     /** @type {!Object.<string, boolean>} */
     this._staleRequestIds = {};
     /** @type {number} */
     this._mainRequestLoadTime = -1;
     /** @type {number} */
     this._mainRequestDOMContentLoadedTime = -1;
     this._matchedRequestCount = 0;
     this._highlightedSubstringChanges = [];
 
     /** @type {!Array.<!Network.NetworkLogView.Filter>} */
     this._filters = [];
     /** @type {?Network.NetworkLogView.Filter} */
     this._timeFilter = null;
     /** @type {?Network.NetworkNode} */
     this._hoveredNode = null;
 
     this._currentMatchedRequestNode = null;
     this._currentMatchedRequestIndex = -1;
 
     /** @type {!Components.Linkifier} */
     this.linkifier = new Components.Linkifier();
 
     this._recording = false;
     this._preserveLog = false;
 
     this._headerHeight = 0;
 
+    /** @type {!Map<string, !Network.GroupLookupInterface>} */
+    this._groupLookups = new Map();
+    this._groupLookups.set('Product', new Network.ProductGrouper());
+    this._groupLookups.set('Frame', new Network.FrameGrouper());
+
+    /** @type {?Network.GroupLookupInterface} */
+    this._activeGroupLookup = null;
+
     this._addFilters();
     this._resetSuggestionBuilder();
     this._initializeView();
 
     Common.moduleSetting('networkColorCodeResourceTypes')
         .addChangeListener(this._invalidateAllItems.bind(this, false), this);
 
     SDK.targetManager.observeModels(SDK.NetworkManager, this);
     SDK.targetManager.addModelListener(
         SDK.NetworkManager, SDK.NetworkManager.Events.RequestStarted, this._onRequestStarted, this);
@@ skipping 226 matching lines @@
    */
   static _requestTimeFilter(windowStart, windowEnd, request) {
     if (request.issueTime() > windowEnd)
       return false;
     if (request.endTime !== -1 && request.endTime < windowStart)
       return false;
     return true;
   }
 
   /**
-   * @param {?Network.NetworkGroupLookupInterface} grouping
+   * @return {!Map<string, !Network.GroupLookupInterface>}
    */
-  setGrouping(grouping) {
-    this._activeGroupLookup = grouping;
-    this._nodeGroups.clear();
-    this._invalidateAllItems();
+  groupLookups() {
+    return this._groupLookups;
   }
 
   /**
-   * @return {!Set<!Network.NetworkRowDecorator>}
+   * @param {string} groupKey
    */
-  rowDecorators() {
-    return this._rowDecorators;
+  setGrouping(groupKey) {
+    var groupLookup = this._groupLookups.get(groupKey) || null;
+    this._activeGroupLookup = groupLookup;
+    if (!groupLookup) {
+      this._nodeGroups.clear();
+      this._invalidateAllItems();
+      return;
+    }
+    groupLookup.initialize().then(() => {
+      if (this._activeGroupLookup !== groupLookup)
+        return;
+      this._nodeGroups.clear();
+      this._invalidateAllItems();
+    });
   }
 
   /**
    * @param {!SDK.NetworkRequest} request
    * @return {?Network.NetworkRequestNode}
    */
   nodeForRequest(request) {
     return this._nodesByRequestId.get(request.requestId());
   }
 
@@ skipping 113 matching lines @@
   _filterChanged(event) {
     this.removeAllNodeHighlights();
     this._parseFilterQuery(this._textFilterUI.value());
     this._filterRequests();
   }
 
   _initializeView() {
     this.element.id = 'network-container';
     this._setupDataGrid();
 
-    self.runtime.allInstances(Network.NetworkRowDecorator).then(instances => {
-      for (var instance of instances)
-        this._rowDecorators.add(instance);
-      this._invalidateAllItems(true);
-    });
-
     this._columns.show(this.element);
 
     this._summaryBarElement = this.element.createChild('div', 'network-summary-bar');
 
     this._columns.sortByCurrentColumn();
   }
 
   _showRecordingHint() {
     this._hideRecordingHint();
     this._recordingHint = this.element.createChild('div', 'network-status-pane fill');
@@ skipping 376 matching lines @@
       return this._dataGrid.rootNode();
 
     var groupKey = this._activeGroupLookup.groupForRequest(node.request());
     if (!groupKey)
       return this._dataGrid.rootNode();
 
     var group = this._nodeGroups.get(groupKey);
     if (group)
       return group;
     group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName(groupKey));
-    group.setColumnExtensions(this._columns.columnExtensions());
     this._nodeGroups.set(groupKey, group);
     return group;
   }
 
   reset() {
     this._requestWithHighlightedInitiators = null;
     this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null);
 
     this._clearSearchMatchedList();
 
@@ skipping 41 matching lines @@
       return;
     var request = /** @type {!SDK.NetworkRequest} */ (event.data);
     this._appendRequest(request);
   }
 
   /**
    * @param {!SDK.NetworkRequest} request
    */
   _appendRequest(request) {
     var node = new Network.NetworkRequestNode(this, request);
-    node.setColumnExtensions(this._columns.columnExtensions());
     node[Network.NetworkLogView._isFilteredOutSymbol] = true;
     node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false;
 
     // In case of redirect request id is reassigned to a redirected
     // request and we need to update _nodesByRequestId and search results.
     var originalRequestNode = this._nodesByRequestId.get(request.requestId());
     if (originalRequestNode)
       this._nodesByRequestId.set(originalRequestNode.request().requestId(), originalRequestNode);
     this._nodesByRequestId.set(request.requestId(), node);
 
@@ skipping 836 matching lines @@
 /** @type {!Array<string>} */
 Network.NetworkLogView._searchKeys =
     Object.keys(Network.NetworkLogView.FilterType).map(key => Network.NetworkLogView.FilterType[key]);
 
 /** @typedef {function(!SDK.NetworkRequest): boolean} */
 Network.NetworkLogView.Filter;
 
 /**
  * @interface
  */
-Network.NetworkGroupLookupInterface = function() {};
+Network.GroupLookupInterface = function() {};
 
-Network.NetworkGroupLookupInterface.prototype = {
+Network.GroupLookupInterface.prototype = {
+  /**
+   * @return {!Promise}
+   */
+  initialize: function() {},
+
   /**
    * @param {!SDK.NetworkRequest} request
    * @return {?*}
    */
-  groupForRequest(request) {},
+  groupForRequest: function(request) {},
 
   /**
    * @param {!*} key
    * @return {string}
    */
-  groupName(key) {}
+  groupName: function(key) {}
 };
-
-/**
- * @interface
- */
-Network.NetworkRowDecorator = function() {};
-
-Network.NetworkRowDecorator.prototype = {
-  /**
-   * @param {!Network.NetworkNode} node
-   */
-  decorate(node) {}
-};