[Devtools] Add experiment for network group support

This patch adds a hidden experiment to support groups of requests in
network panel.

Right now the patch only adds group by domain, but we'll be tweaking that with time to add interface and get rid of non-supported aspects of groups.

See: http://imgur.com/a/FDmmt

R=dgozman
BUG=664704

Review-Url: https://codereview.chromium.org/2561683003
Cr-Commit-Position: refs/heads/master@{#439711}

third_party/WebKit/LayoutTests/http/tests/inspector/network/network-columns-visible.html

@@ -17,6 +17,8 @@ function test() {
 
     function onNodeInserted(node)
     {
+        if (node.dataGrid !== UI.panels.network._networkLogView._dataGrid)
+            return;
         if (node.request().name() !== "empty.html?xhr")
             return;
         xhrNode = node;
@@ -45,7 +47,7 @@ function test() {
 
     InspectorTest.recordNetwork();
     InspectorTest.networkManager.addEventListener(SDK.NetworkManager.Events.RequestFinished, onRequestFinished);
-    InspectorTest.addSniffer(UI.panels.network._networkLogView._dataGrid, "insertChild", onNodeInserted, true);
+    InspectorTest.addSniffer(UI.SortableDataGridNode.prototype, "insertChild", onNodeInserted, true);
     InspectorTest.NetworkAgent.setCacheDisabled(true, InspectorTest.evaluateInPage.bind(null, "sendXHRRequest()"));
 }
 </script>

third_party/WebKit/Source/devtools/front_end/main/Main.js

@@ -103,6 +103,7 @@ Main.Main = class {
     Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');
     Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);
     Runtime.experiments.register('liveSASS', 'Live SASS');
+    Runtime.experiments.register('networkGroupingRequests', 'Network request groups support', true);
     Runtime.experiments.register('nodeDebugging', 'Node debugging', true);
     Runtime.experiments.register('persistence2', 'Persistence 2.0');
     Runtime.experiments.register('persistenceValidation', 'Validate persistence bindings');

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

@@ -69,8 +69,10 @@ Network.NetworkLogView = class extends UI.VBox {
     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} */
@@ -84,6 +86,7 @@ Network.NetworkLogView = class extends UI.VBox {
     this._filters = [];
     /** @type {?Network.NetworkLogView.Filter} */
     this._timeFilter = null;
+    /** @type {?Network.NetworkNode} */
     this._hoveredNode = null;
 
     this._currentMatchedRequestNode = null;
@@ -519,8 +522,8 @@ Network.NetworkLogView = class extends UI.VBox {
    * @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);
@@ -532,7 +535,7 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredNode(node, highlightInitiatorChain) {
@@ -541,7 +544,7 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean=} highlightInitiatorChain
    */
   _setHoveredNode(node, highlightInitiatorChain) {
@@ -780,7 +783,7 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @return {!Array<!Network.NetworkDataGridNode>}
+   * @return {!Array<!Network.NetworkNode>}
    */
   flatNodesList() {
     return this._dataGrid.rootNode().flatChildren();
@@ -801,11 +804,9 @@ Network.NetworkLogView = class extends UI.VBox {
     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);
@@ -816,7 +817,7 @@ Network.NetworkLogView = class extends UI.VBox {
         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;
 
@@ -833,8 +834,9 @@ Network.NetworkLogView = class extends UI.VBox {
     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)
@@ -849,6 +851,26 @@ Network.NetworkLogView = class extends UI.VBox {
     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);
@@ -867,6 +889,7 @@ Network.NetworkLogView = class extends UI.VBox {
     for (var i = 0; i < nodes.length; ++i)
       nodes[i].dispose();
 
+    this._nodeGroups.clear();
     this._nodesByRequestId.clear();
     this._staleRequestIds = {};
     this._resetSuggestionBuilder();
@@ -904,7 +927,7 @@ Network.NetworkLogView = class extends UI.VBox {
    * @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;
 
@@ -1234,7 +1257,7 @@ Network.NetworkLogView = class extends UI.VBox {
   _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;
@@ -1275,7 +1298,7 @@ Network.NetworkLogView = class extends UI.VBox {
     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());
@@ -1302,11 +1325,11 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @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;
@@ -1333,7 +1356,7 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkRequestNode} node
    * @return {boolean}
    */
   _applyFilter(node) {
@@ -1536,7 +1559,7 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkRequestNode} node
    */
   _highlightNode(node) {
     UI.runCSSAnimationOnce(node.element(), 'highlighted-row');

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

@@ -203,7 +203,7 @@ Network.NetworkLogViewColumns = class {
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredNode(node, highlightInitiatorChain) {
@@ -285,7 +285,7 @@ Network.NetworkLogViewColumns = class {
         this._waterfallColumnSortIcon.classList.add('sort-descending');
 
       this._waterfallRequestsAreStale = true;
-      var sortFunction = Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, this._activeWaterfallSortId);
+      var sortFunction = Network.NetworkRequestNode.RequestPropertyComparator.bind(null, this._activeWaterfallSortId);
       this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
       this._networkLogView.dataGridSorted();
       return;
@@ -500,7 +500,7 @@ Network.NetworkLogViewColumns = class {
           isResponseHeader: true,
           isCustomHeader: true,
           visible: true,
-          sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, headerId)
+          sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, headerId)
         }));
     this._columns.splice(index, 0, columnConfig);
     if (this._dataGrid)
@@ -626,7 +626,7 @@ Network.NetworkLogViewColumns._initialSortColumn = 'waterfall';
  *     sortable: boolean,
  *     align: (?UI.DataGrid.Align|undefined),
  *     isResponseHeader: boolean,
- *     sortingFunction: (!function(!Network.NetworkDataGridNode, !Network.NetworkDataGridNode):number|undefined),
+ *     sortingFunction: (!function(!Network.NetworkRequestNode, !Network.NetworkRequestNode):number|undefined),
  *     isCustomHeader: boolean
  * }}
  */
@@ -666,66 +666,66 @@ Network.NetworkLogViewColumns._defaultColumns = [
     hideable: false,
     nonSelectable: false,
     alwaysVisible: true,
-    sortingFunction: Network.NetworkDataGridNode.NameComparator
+    sortingFunction: Network.NetworkRequestNode.NameComparator
   },
   {
     id: 'method',
     title: Common.UIString('Method'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'requestMethod')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'requestMethod')
   },
   {
     id: 'status',
     title: Common.UIString('Status'),
     visible: true,
     subtitle: Common.UIString('Text'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'statusCode')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'statusCode')
   },
   {
     id: 'protocol',
     title: Common.UIString('Protocol'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'protocol')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'protocol')
   },
   {
     id: 'scheme',
     title: Common.UIString('Scheme'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'scheme')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'scheme')
   },
   {
     id: 'domain',
     title: Common.UIString('Domain'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'domain')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'domain')
   },
   {
     id: 'remoteaddress',
     title: Common.UIString('Remote Address'),
     weight: 10,
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.RemoteAddressComparator
+    sortingFunction: Network.NetworkRequestNode.RemoteAddressComparator
   },
   {
     id: 'type',
     title: Common.UIString('Type'),
     visible: true,
-    sortingFunction: Network.NetworkDataGridNode.TypeComparator
+    sortingFunction: Network.NetworkRequestNode.TypeComparator
   },
   {
     id: 'initiator',
     title: Common.UIString('Initiator'),
     visible: true,
     weight: 10,
-    sortingFunction: Network.NetworkDataGridNode.InitiatorComparator
+    sortingFunction: Network.NetworkRequestNode.InitiatorComparator
   },
   {
     id: 'cookies',
     title: Common.UIString('Cookies'),
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.RequestCookiesCountComparator
+    sortingFunction: Network.NetworkRequestNode.RequestCookiesCountComparator
   },
   {
     id: 'setcookies',
     title: Common.UIString('Set Cookies'),
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.ResponseCookiesCountComparator
+    sortingFunction: Network.NetworkRequestNode.ResponseCookiesCountComparator
   },
   {
     id: 'size',
@@ -733,7 +733,7 @@ Network.NetworkLogViewColumns._defaultColumns = [
     visible: true,
     subtitle: Common.UIString('Content'),
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.SizeComparator
+    sortingFunction: Network.NetworkRequestNode.SizeComparator
   },
   {
     id: 'time',
@@ -741,72 +741,72 @@ Network.NetworkLogViewColumns._defaultColumns = [
     visible: true,
     subtitle: Common.UIString('Latency'),
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'duration')
   },
   {
     id: 'priority',
     title: Common.UIString('Priority'),
-    sortingFunction: Network.NetworkDataGridNode.InitialPriorityComparator
+    sortingFunction: Network.NetworkRequestNode.InitialPriorityComparator
   },
   {
     id: 'connectionid',
     title: Common.UIString('Connection ID'),
-    sortingFunction: Network.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'connectionId')
+    sortingFunction: Network.NetworkRequestNode.RequestPropertyComparator.bind(null, 'connectionId')
   },
   {
     id: 'cache-control',
     isResponseHeader: true,
     title: Common.UIString('Cache-Control'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'cache-control')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'cache-control')
   },
   {
     id: 'connection',
     isResponseHeader: true,
     title: Common.UIString('Connection'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'connection')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'connection')
   },
   {
     id: 'content-encoding',
     isResponseHeader: true,
     title: Common.UIString('Content-Encoding'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'content-encoding')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'content-encoding')
   },
   {
     id: 'content-length',
     isResponseHeader: true,
     title: Common.UIString('Content-Length'),
     align: UI.DataGrid.Align.Right,
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderNumberComparator.bind(null, 'content-length')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderNumberComparator.bind(null, 'content-length')
   },
   {
     id: 'etag',
     isResponseHeader: true,
     title: Common.UIString('ETag'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'etag')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'etag')
   },
   {
     id: 'keep-alive',
     isResponseHeader: true,
     title: Common.UIString('Keep-Alive'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'keep-alive')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'keep-alive')
   },
   {
     id: 'last-modified',
     isResponseHeader: true,
     title: Common.UIString('Last-Modified'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderDateComparator.bind(null, 'last-modified')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderDateComparator.bind(null, 'last-modified')
   },
   {
     id: 'server',
     isResponseHeader: true,
     title: Common.UIString('Server'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'server')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'server')
   },
   {
     id: 'vary',
     isResponseHeader: true,
     title: Common.UIString('Vary'),
-    sortingFunction: Network.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary')
+    sortingFunction: Network.NetworkRequestNode.ResponseHeaderStringComparator.bind(null, 'vary')
   },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {id: 'waterfall', title: '', visible: false, hideable: false}

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

@@ -34,10 +34,10 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(300, 300);
 
-    /** @type {!Array<!Network.NetworkDataGridNode>} */
+    /** @type {!Array<!Network.NetworkNode>} */
     this._nodes = [];
 
-    /** @type {?Network.NetworkDataGridNode} */
+    /** @type {?Network.NetworkNode} */
     this._hoveredNode = null;
     /** @type {?SDK.NetworkRequest.InitiatorGraph} */
     this._initiatorGraph = null;
@@ -83,12 +83,15 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
       return;
     var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
     if (useTimingBars) {
-      var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hoveredNode.request(), 0)
+      var request = this._hoveredNode.request();
+      if (!request)
+        return;
+      var range = Network.RequestTimingView.calculateRequestTimeRanges(request, 0)
                       .find(data => data.name === Network.RequestTimeRangeNames.Total);
       var start = this._timeToPosition(range.start);
       var end = this._timeToPosition(range.end);
     } else {
-      var range = this._getSimplifiedBarRange(this._hoveredNode, 0);
+      var range = this._getSimplifiedBarRange(this.request(), 0);
       var start = range.start;
       var end = range.end;
     }
@@ -124,18 +127,20 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   _showPopover(anchor, popover) {
     if (!this._hoveredNode)
       return;
-    var content =
-        Network.RequestTimingView.createTimingTable(this._hoveredNode.request(), this._calculator.minimumBoundary());
+    var request = this._hoveredNode.request();
+    if (!request)
+      return;
+    var content = Network.RequestTimingView.createTimingTable(request, this._calculator.minimumBoundary());
     popover.showForAnchor(content, anchor);
   }
 
   /**
-   * @param {?Network.NetworkDataGridNode} node
+   * @param {?Network.NetworkNode} node
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredNode(node, highlightInitiatorChain) {
     this._hoveredNode = node;
-    this._initiatorGraph = (highlightInitiatorChain && node) ? node.request().initiatorGraph() : null;
+    this._initiatorGraph = (highlightInitiatorChain && node && node.request()) ? node.request().initiatorGraph() : null;
     this.update();
   }
 
@@ -171,7 +176,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} x
    * @param {number} y
-   * @return {?Network.NetworkDataGridNode}
+   * @return {?Network.NetworkNode}
    */
   getNodeFromPoint(x, y) {
     return this._nodes[Math.floor((this._scrollTop + y - this._headerHeight) / this._rowHeight)];
@@ -186,7 +191,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number=} scrollTop
    * @param {!Map<string, !Array<number>>=} eventDividers
-   * @param {!Array<!Network.NetworkDataGridNode>=} nodes
+   * @param {!Array<!Network.NetworkNode>=} nodes
    */
   update(scrollTop, eventDividers, nodes) {
     if (scrollTop !== undefined)
@@ -353,11 +358,11 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!SDK.NetworkRequest} request
    * @return {string}
    */
-  _borderColorForResourceType(node) {
-    var resourceType = node.request().resourceType();
+  _borderColorForResourceType(request) {
+    var resourceType = request.resourceType();
     if (this._borderColorsForResourceTypeCache.has(resourceType))
       return this._borderColorsForResourceTypeCache.get(resourceType);
     var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourceType;
@@ -373,11 +378,10 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!SDK.NetworkRequest} request
    * @return {string|!CanvasGradient}
    */
-  _colorForResourceType(context, node) {
-    var request = node.request();
+  _colorForResourceType(context, request) {
     var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourceType;
     var resourceType = request.resourceType();
     var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
@@ -398,13 +402,13 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!SDK.NetworkRequest} request
    * @param {number} borderOffset
    * @return {!{start: number, mid: number, end: number}}
    */
-  _getSimplifiedBarRange(node, borderOffset) {
+  _getSimplifiedBarRange(request, borderOffset) {
     var drawWidth = this._offsetWidth - this._leftPadding;
-    var percentages = this._calculator.computeBarGraphPercentages(node.request());
+    var percentages = this._calculator.computeBarGraphPercentages(request);
     return {
       start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidth) + borderOffset,
       mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth) + borderOffset,
@@ -414,21 +418,25 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkNode} node
    * @param {number} y
    */
   _drawSimplifiedBars(context, node, y) {
+    // TODO(allada) This should draw bars for groupped requests.
+    var request = node.request();
+    if (!request)
+      return;
     const borderWidth = 1;
     var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5;
 
     context.save();
-    var ranges = this._getSimplifiedBarRange(node, borderOffset);
+    var ranges = this._getSimplifiedBarRange(request, borderOffset);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
     context.translate(0, y);
-    context.fillStyle = this._colorForResourceType(context, node);
-    context.strokeStyle = this._borderColorForResourceType(node);
+    context.fillStyle = this._colorForResourceType(context, request);
+    context.strokeStyle = this._borderColorForResourceType(request);
     context.lineWidth = borderWidth;
 
     context.beginPath();
@@ -447,13 +455,13 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
     var labels = null;
     if (node === this._hoveredNode) {
-      labels = this._calculator.computeBarGraphLabels(node.request());
+      labels = this._calculator.computeBarGraphLabels(request);
       this._drawSimplifiedBarDetails(
           context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset);
     }
 
     if (!this._calculator.startAtZero) {
-      var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(node.request(), 0)
+      var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(request, 0)
                               .find(data => data.name === Network.RequestTimeRangeNames.Total);
       var leftLabelWidth = labels ? context.measureText(labels.left).width : 0;
       var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start;
@@ -529,12 +537,16 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkNode} node
    * @param {number} y
    */
   _drawTimingBars(context, node, y) {
+    // TODO(allada) This should draw bars for groupped requests.
+    var request = node.request();
+    if (!request)
+      return;
     context.save();
-    var ranges = Network.RequestTimingView.calculateRequestTimeRanges(node.request(), 0);
+    var ranges = Network.RequestTimingView.calculateRequestTimeRanges(request, 0);
     for (var range of ranges) {
       if (range.name === Network.RequestTimeRangeNames.Total || range.name === Network.RequestTimeRangeNames.Sending ||
           range.end - range.start === 0)
@@ -567,7 +579,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkNode} node
    * @param {number} rowNumber
    * @param {number} y
    */
@@ -594,7 +606,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
       var request = node.request();
       if (this._hoveredNode === node)
         return this._rowHoverColor;
-      if (this._initiatorGraph) {
+      if (request && this._initiatorGraph) {
         if (this._initiatorGraph.initiators.has(request))
           return this._parentInitiatorColor;
         if (this._initiatorGraph.initiated.has(request))