[Devtools] Prepare network log view for grouping 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 7afccc71b088b766d2304b84f163b3448053d4f7..1d200c2af5df73d2549b3fda71b1308a9f4d7ce5 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
@@ -79,16 +79,17 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    * @return {!AnchorBox|undefined}
    */
   _getPopoverAnchor(element, event) {
-    if (!this._hoveredLogEntry)
+    var request = this._hoveredLogEntry ? this._hoveredLogEntry.firstRequest() : null;
+    if (!this._hoveredLogEntry || !request || this._hoveredLogEntry.isGroup())
       return;
     var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
     if (useTimingBars) {
-      var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hoveredLogEntry.request(), 0)
+      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._hoveredLogEntry, 0);
+      var range = this._getSimplifiedBarRange(request, 0);
       var start = range.start;
       var end = range.end;
     }
@@ -122,10 +123,10 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    * @param {!UI.Popover} popover
    */
   _showPopover(anchor, popover) {
-    if (!this._hoveredLogEntry)
+    var request = this._hoveredLogEntry.firstRequest();
+    if (!this._hoveredLogEntry || !request || this._hoveredLogEntry.isGroup())
       return;
-    var content = Network.RequestTimingView.createTimingTable(
-        this._hoveredLogEntry.request(), this._calculator.minimumBoundary());
+    var content = Network.RequestTimingView.createTimingTable(request, this._calculator.minimumBoundary());
     popover.showForAnchor(content, anchor);
   }
 
@@ -135,7 +136,11 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    */
   setHoveredLogEntry(logEntry, highlightInitiatorChain) {
     this._hoveredLogEntry = logEntry;
-    this._initiatorGraph = (highlightInitiatorChain && logEntry) ? logEntry.request().initiatorGraph() : null;
+    this._initiatorGraph = null;
+    if (highlightInitiatorChain && logEntry && !logEntry.isGroup()) {
+      var request = /** @type {!SDK.NetworkRequest} */ (logEntry.firstRequest());

[dgozman, 2016/11/23 01:57:30]

Why do you cast to non-nullable here and check for null everywhere else?

[allada, 2016/11/23 22:39:14]

Done.

+      this._initiatorGraph = request.initiatorGraph();
+    }
     this.update();
   }
 
@@ -352,11 +357,12 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkLogEntry} logEntry
+   * @param {!SDK.NetworkRequest} request
    * @return {string}
    */
-  _borderColorForResourceType(logEntry) {
-    var resourceType = logEntry.request().resourceType();
+  _borderColorForResourceType(request) {
+    // TODO(allada) Move this into NetworkLogEntry.

[dgozman, 2016/11/23 01:57:30]

Not sure this is a good idea.

[allada, 2016/11/23 22:39:14]

Done.

+    var resourceType = request.resourceType();
     if (this._borderColorsForResourceTypeCache.has(resourceType))
       return this._borderColorsForResourceTypeCache.get(resourceType);
     var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourceType;
@@ -372,11 +378,11 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!Network.NetworkLogEntry} logEntry
+   * @param {!SDK.NetworkRequest} request
    * @return {string|!CanvasGradient}
    */
-  _colorForResourceType(context, logEntry) {
-    var request = logEntry.request();
+  _colorForResourceType(context, request) {
+    // TODO(allada) Move this into NetworkLogEntry.

[dgozman, 2016/11/23 01:57:30]

Ditto.

[allada, 2016/11/23 22:39:15]

Done.

     var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourceType;
     var resourceType = request.resourceType();
     var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
@@ -397,13 +403,13 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
   }
 
   /**
-   * @param {!Network.NetworkLogEntry} logEntry
+   * @param {!SDK.NetworkRequest} request
    * @param {number} borderOffset
    * @return {!{start: number, mid: number, end: number}}
    */
-  _getSimplifiedBarRange(logEntry, borderOffset) {
+  _getSimplifiedBarRange(request, borderOffset) {
     var drawWidth = this._offsetWidth - this._leftPadding;
-    var percentages = this._calculator.computeBarGraphPercentages(logEntry.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,
@@ -421,55 +427,57 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5;
 
     context.save();
-    var ranges = this._getSimplifiedBarRange(logEntry, borderOffset);
-    var height = this._getBarHeight();
-    y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
+    for (var request of logEntry.requests()) {
+      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, logEntry);
-    context.strokeStyle = this._borderColorForResourceType(logEntry);
-    context.lineWidth = borderWidth;
+      context.translate(0, y);
+      context.fillStyle = this._colorForResourceType(context, request);
+      context.strokeStyle = this._borderColorForResourceType(request);
+      context.lineWidth = borderWidth;
 
-    context.beginPath();
-    context.globalAlpha = 0.5;
-    context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidth);
-    context.fill();
-    context.stroke();
+      context.beginPath();
+      context.globalAlpha = 0.5;
+      context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidth);
+      context.fill();
+      context.stroke();
 
-    var barWidth = Math.max(2, ranges.end - ranges.mid);
-    context.beginPath();
-    context.globalAlpha = 1;
-    context.rect(ranges.mid, 0, barWidth, height - borderWidth);
-    context.fill();
-    context.stroke();
-
-    /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
-    var labels = null;
-    if (logEntry === this._hoveredLogEntry) {
-      labels = this._calculator.computeBarGraphLabels(logEntry.request());
-      this._drawSimplifiedBarDetails(
-          context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset);
-    }
+      var barWidth = Math.max(2, ranges.end - ranges.mid);
+      context.beginPath();
+      context.globalAlpha = 1;
+      context.rect(ranges.mid, 0, barWidth, height - borderWidth);
+      context.fill();
+      context.stroke();
 
-    if (!this._calculator.startAtZero) {
-      var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(logEntry.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;
-      const wiskerTextPadding = 13;
-      var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiskerTextPadding : 0;
-      var queueingStart = this._timeToPosition(queueingRange.start);
-      if (ranges.start - textOffset > queueingStart) {
-        context.beginPath();
-        context.globalAlpha = 1;
-        context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
-        context.moveTo(queueingStart, Math.floor(height / 2));
-        context.lineTo(ranges.start - textOffset, Math.floor(height / 2));
-
-        const wiskerHeight = height / 2;
-        context.moveTo(queueingStart + borderOffset, wiskerHeight / 2);
-        context.lineTo(queueingStart + borderOffset, height - wiskerHeight / 2 - 1);
-        context.stroke();
+      /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
+      var labels = null;
+      if (!logEntry.isGroup() && logEntry === this._hoveredLogEntry) {

[dgozman, 2016/11/23 01:57:30]

Why checking for group?

[allada, 2016/11/23 22:39:14]

Because this will cause all child grouped items to gain numbers and it'd clutter
everything.

+        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(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;
+        const wiskerTextPadding = 13;
+        var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiskerTextPadding : 0;
+        var queueingStart = this._timeToPosition(queueingRange.start);
+        if (ranges.start - textOffset > queueingStart) {
+          context.beginPath();
+          context.globalAlpha = 1;
+          context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
+          context.moveTo(queueingStart, Math.floor(height / 2));
+          context.lineTo(ranges.start - textOffset, Math.floor(height / 2));
+
+          const wiskerHeight = height / 2;
+          context.moveTo(queueingStart + borderOffset, wiskerHeight / 2);
+          context.lineTo(queueingStart + borderOffset, height - wiskerHeight / 2 - 1);
+          context.stroke();
+        }
       }
     }
 
@@ -533,33 +541,35 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    */
   _drawTimingBars(context, logEntry, y) {
     context.save();
-    var ranges = Network.RequestTimingView.calculateRequestTimeRanges(logEntry.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();
-      var lineWidth = 0;
-      var color = this._colorForType(range.name);
-      var borderColor = color;
-      if (range.name === Network.RequestTimeRangeNames.Queueing) {
-        borderColor = 'lightgrey';
-        lineWidth = 2;
-      }
-      if (range.name === Network.RequestTimeRangeNames.Receiving)
-        lineWidth = 2;
-      context.fillStyle = color;
-      var height = this._getBarHeight(range.name);
-      var middleBarY = y + Math.floor(this._rowHeight / 2 - height / 2) + lineWidth / 2;
-      var start = this._timeToPosition(range.start);
-      var end = this._timeToPosition(range.end);
-      context.rect(start, middleBarY, end - start, height - lineWidth);
-      if (lineWidth) {
-        context.lineWidth = lineWidth;
-        context.strokeStyle = borderColor;
-        context.stroke();
+    for (var request of logEntry.requests()) {
+      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();
+        var lineWidth = 0;
+        var color = this._colorForType(range.name);
+        var borderColor = color;
+        if (range.name === Network.RequestTimeRangeNames.Queueing) {
+          borderColor = 'lightgrey';
+          lineWidth = 2;
+        }
+        if (range.name === Network.RequestTimeRangeNames.Receiving)
+          lineWidth = 2;
+        context.fillStyle = color;
+        var height = this._getBarHeight(range.name);
+        var middleBarY = y + Math.floor(this._rowHeight / 2 - height / 2) + lineWidth / 2;
+        var start = this._timeToPosition(range.start);
+        var end = this._timeToPosition(range.end);
+        context.rect(start, middleBarY, end - start, height - lineWidth);
+        if (lineWidth) {
+          context.lineWidth = lineWidth;
+          context.strokeStyle = borderColor;
+          context.stroke();
+        }
+        context.fill();
       }
-      context.fill();
     }
     context.restore();
   }
@@ -572,7 +582,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    */
   _decorateRow(context, logEntry, rowNumber, y) {
     var isOddRow = rowNumber % 2 === 1;
-    if (isOddRow && this._hoveredLogEntry !== logEntry && !logEntry.isNavigationRequest() && !this._initiatorGraph)
+    if (isOddRow && this._hoveredLogEntry !== logEntry && !logEntry.hasNavigationRequest() && !this._initiatorGraph)
       return;
 
     var color = getRowColor.call(this);
@@ -590,16 +600,17 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
      * @this {Network.NetworkWaterfallColumn}
      */
     function getRowColor() {
-      var request = logEntry.request();
+      // TODO(allada) Move this into NetworkLogEntry.
       if (this._hoveredLogEntry === logEntry)
         return this._rowHoverColor;
-      if (this._initiatorGraph) {
+      var request = logEntry.firstRequest();
+      if (request && this._initiatorGraph) {
         if (this._initiatorGraph.initiators.has(request))
           return this._parentInitiatorColor;
         if (this._initiatorGraph.initiated.has(request))
           return this._initiatedColor;
       }
-      if (logEntry.isNavigationRequest())
+      if (logEntry.hasNavigationRequest())
         return this._rowNavigationRequestColor;
       if (rowNumber % 2 === 1)
         return 'transparent';