[Devtools] Prepare network log view for grouping support

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 61 matching lines @@
   wasShown() {
     this.update();
   }
 
   /**
    * @param {!Element} element
    * @param {!Event} event
    * @return {!AnchorBox|undefined}
    */
   _getPopoverAnchor(element, event) {
-    if (!this._hoveredNode)
+    var request = this._hoveredNode ? this._hoveredNode.request() : null;
+    if (!request)
       return;
     var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').get() && !this._calculator.startAtZero;
     if (useTimingBars) {
-      var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hoveredNode.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._hoveredNode, 0);
+      var range = this._getSimplifiedBarRange(request, 0);
       var start = range.start;
       var end = range.end;
     }
 
     if (end - start < 50) {
       var halfWidth = (end - start) / 2;
       start = start + halfWidth - 25;
       end = end - halfWidth + 25;
     }
 
@@ skipping 13 matching lines @@
     anchorBox.width = end - start;
     anchorBox.height = barHeight;
     return anchorBox;
   }
 
   /**
    * @param {!Element|!AnchorBox} anchor
    * @param {!UI.Popover} popover
    */
   _showPopover(anchor, popover) {
-    if (!this._hoveredNode)
+    var request = this._hoveredNode ? this._hoveredNode.request() : null;
+    if (!request)
       return;
-    var content =
-        Network.RequestTimingView.createTimingTable(this._hoveredNode.request(), this._calculator.minimumBoundary());
+    var content = Network.RequestTimingView.createTimingTable(request, this._calculator.minimumBoundary());
     popover.showForAnchor(content, anchor);
   }
 
   /**
    * @param {?Network.NetworkDataGridNode} node
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredNode(node, highlightInitiatorChain) {
     this._hoveredNode = node;
-    this._initiatorGraph = (highlightInitiatorChain && node) ? node.request().initiatorGraph() : null;
+    this._initiatorGraph = null;
+    var request = node ? node.request() : null;
+    if (highlightInitiatorChain && request)
+      this._initiatorGraph = request.initiatorGraph();
     this.update();
   }
 
   /**
    * @param {number} height
    */
   setRowHeight(height) {
     this._rowHeight = height;
   }
 
@@ skipping 197 matching lines @@
       case types.Blocking:
       case types.Push:
       case types.Queueing:
         return 7;
       default:
         return 13;
     }
   }
 
   /**
-   * @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;
     var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
     var parsedColor = Common.Color.parse(color);
     var hsla = parsedColor.hsla();
     hsla[1] /= 2;
     hsla[2] -= Math.min(hsla[2], 0.2);
     var resultColor = /** @type {string} */ (parsedColor.asString(null));
     this._borderColorsForResourceTypeCache.set(resourceType, resultColor);
     return resultColor;
   }
 
   /**
    * @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;
     if (request.cached())
       return color;
 
     if (this._colorsForResourceTypeCache.has(color))
       return this._colorsForResourceTypeCache.get(color);
     var parsedColor = Common.Color.parse(color);
     var hsla = parsedColor.hsla();
     hsla[1] -= Math.min(hsla[1], 0.28);
     hsla[2] -= Math.min(hsla[2], 0.15);
     var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight());
     gradient.addColorStop(0, color);
     gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null)));
     this._colorsForResourceTypeCache.set(color, gradient);
     return gradient;
   }
 
   /**
-   * @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,
       end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset
     };
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkDataGridNode} node
    * @param {number} y
    */
   _drawSimplifiedBars(context, node, y) {
+    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();
     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 (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;
       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);
@@ skipping 59 matching lines @@
     }
     context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkDataGridNode} node
    * @param {number} y
    */
   _drawTimingBars(context, node, y) {
+    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)
         continue;
       context.beginPath();
       var lineWidth = 0;
       var color = this._colorForType(range.name);
       var borderColor = color;
       if (range.name === Network.RequestTimeRangeNames.Queueing) {
         borderColor = 'lightgrey';
@@ skipping 18 matching lines @@
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkDataGridNode} node
    * @param {number} rowNumber
    * @param {number} y
    */
   _decorateRow(context, node, rowNumber, y) {
     var isOddRow = rowNumber % 2 === 1;
-    if (isOddRow && this._hoveredNode !== node && !node.isNavigationRequest() && !this._initiatorGraph)
+    if (isOddRow && this._hoveredNode !== node && !node.hasNavigationRequest() && !this._initiatorGraph)
       return;
 
     var color = getRowColor.call(this);
     if (color === 'transparent')
       return;
     context.save();
     context.beginPath();
     context.fillStyle = color;
     context.rect(0, y, this._offsetWidth, this._rowHeight);
     context.fill();
     context.restore();
 
     /**
      * @return {string}
      * @this {Network.NetworkWaterfallColumn}
      */
     function getRowColor() {
-      var request = node.request();
       if (this._hoveredNode === node)
         return this._rowHoverColor;
-      if (this._initiatorGraph) {
+      var request = node.request();
+      if (request && this._initiatorGraph) {
         if (this._initiatorGraph.initiators.has(request))
           return this._parentInitiatorColor;
         if (this._initiatorGraph.initiated.has(request))
           return this._initiatedColor;
       }
-      if (node.isNavigationRequest())
+      if (node.hasNavigationRequest())
         return this._rowNavigationRequestColor;
       if (rowNumber % 2 === 1)
         return 'transparent';
       return this._rowStripeColor;
     }
   }
 };
 
 Network.NetworkWaterfallColumn._colorsForResourceType = {
   document: 'hsl(215, 100%, 80%)',
   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%)'
 };