[Devtools] Network waterfall to use Path2D to draw in layers

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.
 Network.NetworkWaterfallColumn = class extends UI.VBox {
   /**
    * @param {number} rowHeight
    * @param {!Network.NetworkTimeCalculator} calculator
    */
   constructor(rowHeight, calculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
@@ skipping 42 matching lines @@
     this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUsage.Background);
     this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Background);
     this._rowHoverColor = UI.themeSupport.patchColor(
         '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Background | colorUsage.Selection));
     this._parentInitiatorColor = UI.themeSupport.patchColor('hsla(120, 68%, 54%, 0.2)', colorUsage.Background);
     this._initiatedColor = UI.themeSupport.patchColor('hsla(0, 68%, 54%, 0.2)', colorUsage.Background);
 
     this.element.addEventListener('mousemove', this._onMouseMove.bind(this), true);
     this.element.addEventListener('mouseleave', event => this._setHoveredNode(null, false), true);
 
+    /** @type {!Map<!Network.NetworkWaterfallColumn._LayerStyles, !Path2D>} */
+    this._pathForStyle = new Map();

[caseq, 2017/03/09 00:44:12]

Is there any reason for this to be a map? Why not just an array of pairs?

[allada, 2017/03/09 01:29:53]

Because in a follow up patch it'll lookup the Path2D based on which style it is
going to use and append data to the Path2D.

     /** @type {!Array<!Network.NetworkWaterfallColumn._TextLayer>} */
     this._textLayers = [];
   }
 
   /**
    * @param {string} color
    * @return {string}
    */
   _waitingColorForBaseColor(color) {
     var parsedColor = Common.Color.parse(color);
@@ skipping 178 matching lines @@
     if (eventDividers !== undefined)
       this._eventDividers = eventDividers;
     if (this._updateRequestID) {
       this.element.window().cancelAnimationFrame(this._updateRequestID);
       delete this._updateRequestID;
     }
 
     this._startTime = this._calculator.minimumBoundary();
     this._endTime = this._calculator.maximumBoundary();
     this._resetCanvas();
+    this._pathForStyle.clear();
     this._textLayers = [];
     this._draw();
   }
 
   _resetCanvas() {
     var ratio = window.devicePixelRatio;
     this._canvas.width = this._offsetWidth * ratio;
     this._canvas.height = this._offsetHeight * ratio;
     this._canvas.style.width = this._offsetWidth + 'px';
     this._canvas.style.height = this._offsetHeight + 'px';
@@ skipping 75 matching lines @@
     for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
       var rowOffset = this._rowHeight * i;
       var node = nodes[i];
       this._decorateRow(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);
+          this._buildTimingBarLayers(drawNode, rowOffset - this._scrollTop);
         else
-          this._drawSimplifiedBars(context, drawNode, rowOffset - this._scrollTop);
+          this._buildSimplifiedBarLayers(context, drawNode, rowOffset - this._scrollTop);
       }
     }
+    this._drawLayers(context);
 
     context.save();
     var colorUsage = UI.ThemeSupport.ColorUsage;
     context.fillStyle = UI.themeSupport.patchColor(
         '#888', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Background | colorUsage.Selection));
     for (var textData of this._textLayers)
       context.fillText(textData.text, textData.x, textData.y);
     context.restore();
 
     this._drawEventDividers(context);
     context.restore();
 
     const freeZoneAtLeft = 75;
     const freeZoneAtRight = 18;
     PerfUI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, this._headerHeight, freeZoneAtLeft);
     context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, this._headerHeight);
     this._didDrawForTest();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    */
+  _drawLayers(context) {
+    for (var style of this._pathForStyle.keys()) {
+      var path = /** @type {!Path2D} */ (this._pathForStyle.get(style));
+      context.save();
+      context.beginPath();
+      if (style.lineWidth) {
+        context.lineWidth = style.lineWidth;
+        context.strokeStyle = style.borderColor;
+        context.stroke(path);
+      }
+      if (style.fillStyle) {
+        context.fillStyle = style.fillStyle;
+        context.fill(path);
+      }
+      context.restore();
+    }
+  }
+
+  /**
+   * @param {!CanvasRenderingContext2D} context
+   */
   _drawEventDividers(context) {
     context.save();
     context.lineWidth = 1;
     for (var color of this._eventDividers.keys()) {
       context.strokeStyle = color;
       for (var time of this._eventDividers.get(color)) {
         context.beginPath();
         var x = this._timeToPosition(time);
         context.moveTo(x, 0);
         context.lineTo(x, this._offsetHeight);
       }
       context.stroke();
     }
     context.restore();
   }
 
   /**
-   * @return {number}

[allada, 2017/03/03 01:45:14]

Unused function.

-   */
-  _waterfallDuration() {
-    return this._calculator.maximumBoundary() - this._calculator.minimumBoundary();
-  }
-
-  /**
    * @param {!Network.RequestTimeRangeNames=} type
    * @return {number}
    */
   _getBarHeight(type) {
     var types = Network.RequestTimeRangeNames;
     switch (type) {
       case types.Connecting:
       case types.SSL:
       case types.DNS:
       case types.Proxy:
@@ skipping 19 matching lines @@
       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.NetworkNode} node
    * @param {number} y
    */
-  _drawSimplifiedBars(context, node, y) {
+  _buildSimplifiedBarLayers(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(request, borderOffset);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
-    context.translate(0, y);

[allada, 2017/03/03 01:45:14]

Important to remember that we are no longer offsetting anything with transform
so "y" is added inline a lot.

     var fillColor = this._colorForResourceType(request);
-    context.strokeStyle = this._borderColorForBaseColor(fillColor);
-    context.lineWidth = borderWidth;
-
-    context.beginPath();
-    context.fillStyle = this._waitingColorForBaseColor(fillColor);
-    context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidth);
-    context.fill();
-    context.stroke();
+    var waitingPath = new Path2D();
+    waitingPath.rect(ranges.start, y, ranges.mid - ranges.start, height - borderWidth);
+    /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
+    var waitingStyle = {
+      fillStyle: this._waitingColorForBaseColor(fillColor),
+      lineWidth: borderWidth,
+      borderColor: this._borderColorForBaseColor(fillColor)
+    };
+    this._pathForStyle.set(waitingStyle, waitingPath);
 
     var barWidth = Math.max(2, ranges.end - ranges.mid);
-    context.beginPath();
-    context.fillStyle = fillColor;
-    context.rect(ranges.mid, 0, barWidth, height - borderWidth);
-    context.fill();
-    context.stroke();
+    var downloadingPath = new Path2D();
+    downloadingPath.rect(ranges.mid, y, barWidth, height - borderWidth);
+    /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
+    var downloadingStyle = {
+      fillStyle: fillColor,
+      lineWidth: borderWidth,
+      borderColor: this._borderColorForBaseColor(fillColor)
+    };
+    this._pathForStyle.set(downloadingStyle, downloadingPath);
 
     /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
     var labels = null;
     if (node.hovered()) {
       labels = this._calculator.computeBarGraphLabels(request);
 
       const barDotLineLength = 10;
-      context.save();
       var leftLabelWidth = context.measureText(labels.left).width;
       var rightLabelWidth = context.measureText(labels.right).width;
-      context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
-      context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
+
+      var hoverLinePath = new Path2D();
+      var hoverLineColor = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
+      /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
+      var hoverLineStyles = {fillStyle: hoverLineColor, lineWidth: 1, borderColor: hoverLineColor};
+      this._pathForStyle.set(hoverLineStyles, hoverLinePath);
+
       if (leftLabelWidth < ranges.mid - ranges.start) {
         const midBarX = ranges.start + (ranges.mid - ranges.start) / 2 - leftLabelWidth / 2;
         this._textLayers.push({text: labels.left, x: midBarX, y: y + this._fontSize});
       } else if (barDotLineLength + leftLabelWidth + this._leftPadding < ranges.start) {
         this._textLayers.push(
             {text: labels.left, x: ranges.start - leftLabelWidth - barDotLineLength - 1, y: y + this._fontSize});
-        context.beginPath();
-        context.arc(ranges.start, Math.floor(height / 2), 2, 0, 2 * Math.PI);
-        context.fill();
-        context.beginPath();
-        context.lineWidth = 1;
-        context.moveTo(ranges.start - barDotLineLength, Math.floor(height / 2));
-        context.lineTo(ranges.start, Math.floor(height / 2));
-        context.stroke();
+        hoverLinePath.moveTo(ranges.start - barDotLineLength, y + Math.floor(height / 2));

[allada, 2017/03/03 01:45:14]

This is needed because arc will try and connect the previous path to it unless
it's moved.

+        hoverLinePath.arc(ranges.start, y + Math.floor(height / 2), 2, 0, 2 * Math.PI);
+        hoverLinePath.moveTo(ranges.start - barDotLineLength, y + Math.floor(height / 2));
+        hoverLinePath.lineTo(ranges.start, y + Math.floor(height / 2));
       }
 
       const endX = ranges.mid + barWidth + borderOffset;
       if (rightLabelWidth < endX - ranges.mid) {
         var midBarX = ranges.mid + (endX - ranges.mid) / 2 - rightLabelWidth / 2;
         this._textLayers.push({text: labels.right, x: midBarX, y: y + this._fontSize});
       } else if (endX + barDotLineLength + rightLabelWidth < this._offsetWidth - this._leftPadding) {
         this._textLayers.push({text: labels.right, x: endX + barDotLineLength + 1, y: y + this._fontSize});
-        context.beginPath();
-        context.arc(endX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
-        context.fill();
-        context.beginPath();
-        context.lineWidth = 1;
-        context.moveTo(endX, Math.floor(height / 2));
-        context.lineTo(endX + barDotLineLength, Math.floor(height / 2));
-        context.stroke();
+        hoverLinePath.moveTo(endX, y + Math.floor(height / 2));

[allada, 2017/03/03 01:45:14]

Same as above.

+        hoverLinePath.arc(endX, y + Math.floor(height / 2), 2, 0, 2 * Math.PI);
+        hoverLinePath.moveTo(endX, y + Math.floor(height / 2));
+        hoverLinePath.lineTo(endX + barDotLineLength, y + Math.floor(height / 2));
       }
-      context.restore();
     }
 
     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));
+        var wiskerPath = new Path2D();
+        var wiskerColor = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
+        /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
+        var wiskerStyles = {lineWidth: 1, borderColor: wiskerColor};
+        this._pathForStyle.set(wiskerStyles, wiskerPath);
 
+        wiskerPath.moveTo(queueingStart, y + Math.floor(height / 2));
+        wiskerPath.lineTo(ranges.start - textOffset, y + Math.floor(height / 2));
+
+        // TODO(allada) This needs to be floored.
         const wiskerHeight = height / 2;
-        context.moveTo(queueingStart + borderOffset, wiskerHeight / 2);
-        context.lineTo(queueingStart + borderOffset, height - wiskerHeight / 2 - 1);
-        context.stroke();
+        wiskerPath.moveTo(queueingStart + borderOffset, y + wiskerHeight / 2);
+        wiskerPath.lineTo(queueingStart + borderOffset, y + height - wiskerHeight / 2 - 1);
       }
     }
-
-    context.restore();
   }
 
   /**
-   * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkNode} node
    * @param {number} y
    */
-  _drawTimingBars(context, node, y) {
+  _buildTimingBarLayers(node, y) {
     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();
       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 path = new Path2D();
+      /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
+      var style = {fillStyle: color, lineWidth: lineWidth, borderColor: borderColor};
+      this._pathForStyle.set(style, path);
       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();
+      path.rect(start, middleBarY, end - start, height - lineWidth);
     }
-    context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {!Network.NetworkNode} node
    * @param {number} y
    */
   _decorateRow(context, node, y) {
     var isStriped = node.isStriped();
     if (!isStriped && !node.hovered() && !node.isNavigationRequest() && !node.isOnInitiatorPath() &&
@@ skipping 37 matching lines @@
   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%)'
 };
 
+/** @typedef {!{fillStyle: (string|undefined), lineWidth: (number|undefined), borderColor: (string|undefined)}} */
+Network.NetworkWaterfallColumn._LayerStyles;
+
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;