[Devtools] Add experiment for network group support

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 51 matching lines @@
      */
     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.NetworkDataGridNode>} */
+    /** @type {!Map.<string, !Network.NetworkRequestNode>} */
     this._nodesByRequestId = new Map();
+    /** @type {!Map.<string, !Network.NetworkGroupNode>} */
+    this._nodeGroups = new Map();
     /** @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;
@@ skipping 415 matching lines @@
     this._dataGrid.element.classList.add('network-log-grid');
     this._dataGrid.element.addEventListener('mousedown', this._dataGridMouseDown.bind(this), true);
     this._dataGrid.element.addEventListener('mousemove', this._dataGridMouseMove.bind(this), true);
     this._dataGrid.element.addEventListener('mouseleave', this._dataGridMouseLeave.bind(this), true);
   }
 
   /**
    * @param {!Event} event
    */
   _dataGridMouseMove(event) {
-    var node = /** @type {?Network.NetworkDataGridNode} */ (
-        this._dataGrid.dataGridNodeFromNode(/** @type {!Node} */ (event.target)));
+    var node =
+        /** @type {?Network.NetworkNode} */ (this._dataGrid.dataGridNodeFromNode(/** @type {!Node} */ (event.target)));
     var highlightInitiatorChain = event.shiftKey;
     this._setHoveredNode(node, highlightInitiatorChain);
     this._highlightInitiatorChain((highlightInitiatorChain && node) ? node.request() : null);
   }
 
   _dataGridMouseLeave() {
     this._setHoveredNode(null);
     this._highlightInitiatorChain(null);
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredNode(node, highlightInitiatorChain) {
     this._setHoveredNode(node, highlightInitiatorChain);
     this._highlightInitiatorChain((node && highlightInitiatorChain) ? node.request() : null);
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean=} highlightInitiatorChain
    */
   _setHoveredNode(node, highlightInitiatorChain) {
     if (this._hoveredNode)
       this._hoveredNode.element().classList.remove('hover');
     this._hoveredNode = node;
     if (this._hoveredNode)
       this._hoveredNode.element().classList.add('hover');
     this._columns.setHoveredNode(this._hoveredNode, !!highlightInitiatorChain);
   }
@@ skipping 218 matching lines @@
   }
 
   /**
    * @override
    */
   willHide() {
     this._columns.willHide();
   }
 
   /**
-   * @return {!Array<!Network.NetworkDataGridNode>}
+   * @return {!Array<!Network.NetworkNode>}
    */
   flatNodesList() {
     return this._dataGrid.rootNode().flatChildren();
   }
 
   _refresh() {
     this._needsRefresh = false;
 
     if (this._refreshRequestId) {
       this.element.window().cancelAnimationFrame(this._refreshRequestId);
       delete this._refreshRequestId;
     }
 
     this.removeAllNodeHighlights();
 
     this._timeCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
     this._durationCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
     this._timeCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
     this._durationCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
 
-    var dataGrid = this._dataGrid;
-    var rootNode = dataGrid.rootNode();
-    /** @type {!Array<!Network.NetworkDataGridNode> } */
+    /** @type {!Array<!Network.NetworkRequestNode> } */
     var nodesToInsert = [];
-    /** @type {!Array<!Network.NetworkDataGridNode> } */
+    /** @type {!Array<!Network.NetworkRequestNode> } */
     var nodesToRefresh = [];
     for (var requestId in this._staleRequestIds) {
       var node = this._nodesByRequestId.get(requestId);
       if (!node)
         continue;
       var isFilteredOut = !this._applyFilter(node);
       if (isFilteredOut && node === this._hoveredNode)
         this._setHoveredNode(null);
       if (node[Network.NetworkLogView._isFilteredOutSymbol] !== isFilteredOut) {
         if (!node[Network.NetworkLogView._isFilteredOutSymbol])
-          rootNode.removeChild(node);
+          node.parent.removeChild(node);
 
         node[Network.NetworkLogView._isFilteredOutSymbol] = isFilteredOut;
 
         if (!node[Network.NetworkLogView._isFilteredOutSymbol])
           nodesToInsert.push(node);
       }
       if (!isFilteredOut)
         nodesToRefresh.push(node);
       var request = node.request();
       this._timeCalculator.updateBoundaries(request);
       this._durationCalculator.updateBoundaries(request);
     }
 
     for (var i = 0; i < nodesToInsert.length; ++i) {
       var node = nodesToInsert[i];
       var request = node.request();
-      dataGrid.insertChild(node);
       node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = this._matchRequest(request);
+      var parent = this._parentNodeForInsert(node);
+      parent.appendChild(node);
     }
 
     for (var node of nodesToRefresh)
       node.refresh();
 
     this._highlightNthMatchedRequestForSearch(
         this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
 
     this._staleRequestIds = {};
     this._updateSummaryBar();
 
     this._columns.dataChanged();
   }
 
+  /**
+   * @param {!Network.NetworkRequestNode} node
+   * @return {!Network.NetworkNode}
+   */
+  _parentNodeForInsert(node) {
+    if (!Runtime.experiments.isEnabled('networkGroupingRequests'))
+      return /** @type {!Network.NetworkNode} */ (this._dataGrid.rootNode());
+
+    var request = node.request();
+    // TODO(allada) Make this dynamic and allow multiple grouping types.
+    var groupKey = request.domain;
+    var group = this._nodeGroups.get(groupKey);
+    if (group)
+      return group;
+    group = new Network.NetworkGroupNode(this, groupKey);
+    this._nodeGroups.set(groupKey, group);
+    this._dataGrid.rootNode().appendChild(group);
+    return group;
+  }
+
   reset() {
     this._requestWithHighlightedInitiators = null;
     this.dispatchEventToListeners(Network.NetworkLogView.Events.RequestSelected, null);
 
     this._clearSearchMatchedList();
 
     this._setHoveredNode(null);
     this._columns.reset();
 
     this._timeFilter = null;
     this._calculator.reset();
 
     this._timeCalculator.setWindow(null);
 
     var nodes = this._nodesByRequestId.valuesArray();
     for (var i = 0; i < nodes.length; ++i)
       nodes[i].dispose();
 
+    this._nodeGroups.clear();
     this._nodesByRequestId.clear();
     this._staleRequestIds = {};
     this._resetSuggestionBuilder();
 
     this._mainRequestLoadTime = -1;
     this._mainRequestDOMContentLoadedTime = -1;
 
     if (this._dataGrid) {
       this._dataGrid.rootNode().removeChildren();
       this._updateSummaryBar();
@@ skipping 17 matching lines @@
     if (!this._recording)
       return;
     var request = /** @type {!SDK.NetworkRequest} */ (event.data);
     this._appendRequest(request);
   }
 
   /**
    * @param {!SDK.NetworkRequest} request
    */
   _appendRequest(request) {
-    var node = new Network.NetworkDataGridNode(this, request);
+    var node = new Network.NetworkRequestNode(this, request);
     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 309 matching lines @@
         this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
   }
 
   /**
    * @param {number} n
    * @param {boolean} reveal
    */
   _highlightNthMatchedRequestForSearch(n, reveal) {
     this._removeAllHighlights();
 
-    /** @type {!Array.<!Network.NetworkDataGridNode>} */
+    /** @type {!Array.<!Network.NetworkRequestNode>} */
     var nodes = this._dataGrid.rootNode().children;
     var matchCount = 0;
     var node = null;
     for (var i = 0; i < nodes.length; ++i) {
       if (nodes[i][Network.NetworkLogView._isMatchingSearchQuerySymbol]) {
         if (matchCount === n) {
           node = nodes[i];
           break;
         }
         matchCount++;
@@ skipping 20 matching lines @@
    * @param {!UI.SearchableView.SearchConfig} searchConfig
    * @param {boolean} shouldJump
    * @param {boolean=} jumpBackwards
    */
   performSearch(searchConfig, shouldJump, jumpBackwards) {
     var query = searchConfig.query;
     var currentMatchedRequestNode = this._currentMatchedRequestNode;
     this._clearSearchMatchedList();
     this._searchRegex = createPlainTextSearchRegex(query, 'i');
 
-    /** @type {!Array.<!Network.NetworkDataGridNode>} */
+    /** @type {!Array.<!Network.NetworkRequestNode>} */
     var nodes = this._dataGrid.rootNode().children;
     for (var i = 0; i < nodes.length; ++i)
       nodes[i][Network.NetworkLogView._isMatchingSearchQuerySymbol] = this._matchRequest(nodes[i].request());
     var newMatchedRequestIndex = this._updateMatchCountAndFindMatchIndex(currentMatchedRequestNode);
     if (!newMatchedRequestIndex && jumpBackwards)
       newMatchedRequestIndex = this._matchedRequestCount - 1;
     this._highlightNthMatchedRequestForSearch(newMatchedRequestIndex, shouldJump);
   }
 
   /**
    * @override
    * @return {boolean}
    */
   supportsCaseSensitiveSearch() {
     return false;
   }
 
   /**
    * @override
    * @return {boolean}
    */
   supportsRegexSearch() {
     return true;
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkRequestNode} node
    * @return {number}
    */
   _updateMatchCountAndFindMatchIndex(node) {
-    /** @type {!Array.<!Network.NetworkDataGridNode>} */
+    /** @type {!Array.<!Network.NetworkRequestNode>} */
     var nodes = this._dataGrid.rootNode().children;
     var matchCount = 0;
     var matchIndex = 0;
     for (var i = 0; i < nodes.length; ++i) {
       if (!nodes[i][Network.NetworkLogView._isMatchingSearchQuerySymbol])
         continue;
       if (node === nodes[i])
         matchIndex = matchCount;
       matchCount++;
     }
     if (this._matchedRequestCount !== matchCount) {
       this._matchedRequestCount = matchCount;
       this.dispatchEventToListeners(Network.NetworkLogView.Events.SearchCountUpdated, matchCount);
     }
     return matchIndex;
   }
 
   /**
    * @param {number} index
    * @return {number}
    */
   _normalizeSearchResultIndex(index) {
     return (index + this._matchedRequestCount) % this._matchedRequestCount;
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkRequestNode} node
    * @return {boolean}
    */
   _applyFilter(node) {
     var request = node.request();
     if (this._timeFilter && !this._timeFilter(request))
       return false;
     var categoryName = request.resourceType().category().title;
     if (!this._resourceCategoryFilterUI.accept(categoryName))
       return false;
     if (this._dataURLFilterUI.checked() && request.parsedURL.isDataURL())
@@ skipping 182 matching lines @@
   }
 
   removeAllNodeHighlights() {
     if (this._highlightedNode) {
       this._highlightedNode.element().classList.remove('highlighted-row');
       delete this._highlightedNode;
     }
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkRequestNode} node
    */
   _highlightNode(node) {
     UI.runCSSAnimationOnce(node.element(), 'highlighted-row');
     this._highlightedNode = node;
   }
 
   /**
    * @param {!SDK.NetworkRequest} request
    * @param {string} platform
    * @return {string}
@@ skipping 159 matching lines @@
   Running: 'running',
   FromCache: 'from-cache'
 };
 
 /** @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;