[Devtools] Add experiment for network group support

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
index fa0e5087dbfb94984fe92cd724584dcfdb16cd2b..b434cc3f396501236d5879149d077476fd49796c 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
+++ b/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.NetworkDataGridNodeInterface>} */
     this._nodes = [];
 
-    /** @type {?Network.NetworkDataGridNode} */
+    /** @type {?Network.NetworkDataGridNodeInterface} */
     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.NetworkDataGridNodeInterface} 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.NetworkDataGridNodeInterface}
    */
   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.NetworkDataGridNodeInterface>=} nodes
    */
   update(scrollTop, eventDividers, nodes) {
     if (scrollTop !== undefined)
@@ -291,10 +296,13 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
       var rowOffset = this._rowHeight * i;
       var node = nodes[i];
       this._decorateRow(context, node, i, rowOffset - this._scrollTop);
+      var dataGridNode = node.asDataNode();

[dgozman, 2016/12/15 03:04:41]

asRequestNode, asGroupNode

[allada, 2016/12/19 22:44:29]

Done.

+      if (!dataGridNode)
+        continue;
       if (useTimingBars)
-        this._drawTimingBars(context, node, rowOffset - this._scrollTop);
+        this._drawTimingBars(context, dataGridNode, rowOffset - this._scrollTop);
       else
-        this._drawSimplifiedBars(context, node, rowOffset - this._scrollTop);
+        this._drawSimplifiedBars(context, dataGridNode, rowOffset - this._scrollTop);
     }
     this._drawEventDividers(context);
     context.restore();
@@ -398,13 +406,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,
@@ -422,7 +430,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5;
 
     context.save();
-    var ranges = this._getSimplifiedBarRange(node, borderOffset);
+    var ranges = this._getSimplifiedBarRange(node.request(), borderOffset);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
@@ -567,7 +575,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkDataGridNode} node
+   * @param {!Network.NetworkDataGridNodeInterface} node
    * @param {number} rowNumber
    * @param {number} y
    */
@@ -594,7 +602,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))