[Devtools] Setup network groupping to show bars for collapsed nodes

third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.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.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
@@ skipping 290 matching lines @@
     context.scale(window.devicePixelRatio, window.devicePixelRatio);
     context.translate(0, this._headerHeight);
     context.rect(0, 0, this._offsetWidth, this._offsetHeight);
     context.clip();
     var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight);
     var lastRequestIndex = Math.min(nodes.length, firstRequestIndex + Math.ceil(this._offsetHeight / this._rowHeight));
     for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
       var rowOffset = this._rowHeight * i;
       var node = nodes[i];
       this._decorateRow(context, node, i, rowOffset - this._scrollTop);
-      if (useTimingBars)
-        this._drawTimingBars(context, node, rowOffset - this._scrollTop);
-      else
-        this._drawSimplifiedBars(context, node, rowOffset - this._scrollTop);
+      var drawNodes = [];
+      if (node.hasChildren() && !node.expanded)
+        drawNodes = /** @type {!Array<!Network.NetworkNode>} */ (node.flatChildren());
+      drawNodes.push(node);
+      for (var drawNode of drawNodes) {
+        if (useTimingBars)
+          this._drawTimingBars(context, drawNode, rowOffset - this._scrollTop);
+        else
+          this._drawSimplifiedBars(context, drawNode, rowOffset - this._scrollTop);
+      }
     }
     this._drawEventDividers(context);
     context.restore();
 
     const freeZoneAtLeft = 75;
     const freeZoneAtRight = 18;
     UI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, this._headerHeight, freeZoneAtLeft);
     context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, this._headerHeight);
     this._didDrawForTest();
   }
@@ skipping 102 matching lines @@
       end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset
     };
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @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(request, borderOffset);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
@@ skipping 98 matching lines @@
     }
     context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @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(request, 0);
     for (var range of ranges) {
       if (range.name === Network.RequestTimeRangeNames.Total || range.name === Network.RequestTimeRangeNames.Sending ||
           range.end - range.start === 0)
         continue;
       context.beginPath();
@@ skipping 69 matching lines @@
   font: 'hsl(8, 100%, 80%)',
   media: 'hsl(90, 50%, 80%)',
   image: 'hsl(90, 50%, 80%)',
   script: 'hsl(31, 100%, 80%)',
   stylesheet: 'hsl(272, 64%, 80%)',
   texttrack: 'hsl(8, 100%, 80%)',
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };