[Devtools] Make network waterfall 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 43 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._styleForTimeRangeName = this._buildRequestTimeRangeStyle();
+
+    var resourceStyleTuple = this._buildResourceTypeStyle();
+    /** @type {!Map<!Common.ResourceType, !Network.NetworkWaterfallColumn._LayerStyle>} */
+    this._styleForWaitingResourceType = resourceStyleTuple[0];
+    /** @type {!Map<!Common.ResourceType, !Network.NetworkWaterfallColumn._LayerStyle>} */
+    this._styleForDownloadingResourceType = resourceStyleTuple[1];
+
+    var baseLineColor = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupport.ColorUsage.Foreground);
+    /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */
+    this._wiskerStyle = {borderColor: baseLineColor, lineWidth: 1};
+    /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */
+    this._hoverDetailsStyle = {fillStyle: baseLineColor, lineWidth: 1, borderColor: baseLineColor};
+
+    /** @type {!Map<!Network.NetworkWaterfallColumn._LayerStyle, !Path2D>} */
     this._pathForStyle = new Map();
     /** @type {!Array<!Network.NetworkWaterfallColumn._TextLayer>} */
     this._textLayers = [];
   }
 
   /**
-   * @param {string} color
-   * @return {string}
+   * @return {!Map<!Network.RequestTimeRangeNames, !Network.NetworkWaterfallColumn._LayerStyle>}
    */
-  _waitingColorForBaseColor(color) {
-    var parsedColor = Common.Color.parse(color);
-    var hsla = parsedColor.hsla();
-    hsla[2] *= 1.1;
-    return /** @type {string} */ (parsedColor.asString(null));
+  _buildRequestTimeRangeStyle() {

[caseq, 2017/03/15 00:41:30]

let's make it static

[allada, 2017/03/15 01:28:40]

Done.

+    const types = Network.RequestTimeRangeNames;
+    var styleMap = new Map();
+    styleMap.set(types.Connecting, {fillStyle: '#FF9800'});
+    styleMap.set(types.SSL, {fillStyle: '#9C27B0'});
+    styleMap.set(types.DNS, {fillStyle: '#009688'});
+    styleMap.set(types.Proxy, {fillStyle: '#A1887F'});
+    styleMap.set(types.Blocking, {fillStyle: '#AAAAAA'});
+    styleMap.set(types.Push, {fillStyle: '#8CDBff'});
+    styleMap.set(types.Queueing, {fillStyle: 'white', lineWidth: 2, borderColor: 'lightgrey'});
+    // This ensures we always show at least 2 px for a request.
+    styleMap.set(types.Receiving, {fillStyle: '#03A9F4', lineWidth: 2, borderColor: '#03A9F4'});
+    styleMap.set(types.Waiting, {fillStyle: '#00C853'});
+    styleMap.set(types.ReceivingPush, {fillStyle: '#03A9F4'});
+    styleMap.set(types.ServiceWorker, {fillStyle: 'orange'});
+    styleMap.set(types.ServiceWorkerPreparation, {fillStyle: 'orange'});
+    return styleMap;
   }
 
   /**
-   * @param {string} color
-   * @return {string}
+   * @return {!Array<!Map<!Common.ResourceType, !Network.NetworkWaterfallColumn._LayerStyle>>}
    */
-  _borderColorForBaseColor(color) {
-    var parsedColor = Common.Color.parse(color);
-    var hsla = parsedColor.hsla();
-    hsla[1] /= 2;
-    hsla[2] -= Math.min(hsla[2], 0.2);
-    return /** @type {string} */ (parsedColor.asString(null));
+  _buildResourceTypeStyle() {

[caseq, 2017/03/15 00:41:29]

ditto.

[allada, 2017/03/15 01:28:40]

Done.

+    const baseResourceTypeColors = new Map([
+      ['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%)'],
+      ['fetch', 'hsl(53, 100%, 80%)'],
+      ['other', 'hsl(0, 0%, 95%)'],
+    ]);
+    var waitingStyleMap = new Map();
+    var downloadingStyleMap = new Map();
+
+    for (var resourceType of Object.values(Common.resourceTypes)) {
+      var color = baseResourceTypeColors.get(resourceType.name());
+      if (!color)

[caseq, 2017/03/15 00:41:29]

console.assert(color) before this?

[allada, 2017/03/15 01:28:40]

There are a quite a few that are not colored and default to "other". I can
assert it and add them to the list above, but I think defaulting to "other" is
easier for both readability and error checking.

+        color = baseResourceTypeColors.get('other');
+      var borderColor = toBorderColor(color);
+
+      waitingStyleMap.set(resourceType, {fillStyle: toWaitingColor(color), lineWidth: 1, borderColor: borderColor});
+      downloadingStyleMap.set(resourceType, {fillStyle: color, lineWidth: 1, borderColor: borderColor});
+    }
+    return [waitingStyleMap, downloadingStyleMap];
+
+    /**
+     * @param {string} color
+     */
+    function toBorderColor(color) {
+      var parsedColor = Common.Color.parse(color);
+      var hsla = parsedColor.hsla();
+      hsla[1] /= 2;
+      hsla[2] -= Math.min(hsla[2], 0.2);
+      return parsedColor.asString(null);
+    }
+
+    /**
+     * @param {string} color
+     */
+    function toWaitingColor(color) {
+      var parsedColor = Common.Color.parse(color);
+      var hsla = parsedColor.hsla();
+      hsla[2] *= 1.1;
+      return parsedColor.asString(null);
+    }
+  }
+
+  _setupPathDrawOrder() {

[caseq, 2017/03/15 00:41:29]

rename to something like _clearPaths() or _resetPaths() and move
this._pathForStyle.clear() here -- these make much more sense together.

[allada, 2017/03/15 01:28:40]

Done.

+    this._pathForStyle.set(this._wiskerStyle, new Path2D());
+    this._styleForTimeRangeName.forEach(style => this._pathForStyle.set(style, new Path2D()));
+    this._styleForWaitingResourceType.forEach(style => this._pathForStyle.set(style, new Path2D()));
+    this._styleForDownloadingResourceType.forEach(style => this._pathForStyle.set(style, new Path2D()));
+    this._pathForStyle.set(this._hoverDetailsStyle, new Path2D());
   }
 
   /**
-   * @param {!SDK.NetworkRequest} request
-   * @return {string}
-   */
-  _colorForResourceType(request) {
-    var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourceType;
-    return colorsForResourceType[request.resourceType()] || colorsForResourceType.other;
-  }
-
-  /**
    * @override
    */
   willHide() {
     this._popoverHelper.hidePopover();
   }
 
   /**
    * @override
    */
   wasShown() {
@@ skipping 144 matching lines @@
       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._setupPathDrawOrder();
     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';
   }
 
   /**
    * @override
    */
   onResize() {
     super.onResize();
     this._calculateCanvasSize();
     this.scheduleDraw();
   }
 
   _calculateCanvasSize() {
     this._offsetWidth = this.contentElement.offsetWidth - this._rightPadding;
     this._offsetHeight = this.contentElement.offsetHeight;
     this._calculator.setDisplayWidth(this._offsetWidth);
     this._canvasPosition = this._canvas.getBoundingClientRect();
   }
 
   /**
-   * @param {!Network.RequestTimeRangeNames} type
-   * @return {string}
-   */
-  _colorForType(type) {
-    var types = Network.RequestTimeRangeNames;
-    switch (type) {
-      case types.Receiving:
-      case types.ReceivingPush:
-        return '#03A9F4';
-      case types.Waiting:
-        return '#00C853';
-      case types.Connecting:
-        return '#FF9800';
-      case types.SSL:
-        return '#9C27B0';
-      case types.DNS:
-        return '#009688';
-      case types.Proxy:
-        return '#A1887F';
-      case types.Blocking:
-        return '#AAAAAA';
-      case types.Push:
-        return '#8CDBff';
-      case types.Queueing:
-        return 'white';
-      case types.ServiceWorker:
-      case types.ServiceWorkerPreparation:
-      default:
-        return 'orange';
-    }
-  }
-
-  /**
    * @param {number} time
    * @return {number}
    */
   _timeToPosition(time) {
     var availableWidth = this._offsetWidth - this._leftPadding;
     var timeToPixel = availableWidth / (this._endTime - this._startTime);
     return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
   }
 
   _didDrawForTest() {
@@ skipping 40 matching lines @@
     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));
+    for (var value of this._pathForStyle) {

[caseq, 2017/03/15 00:41:30]

s/value/entry/ -- entry is [key, value], so using value instead is a bit
confusing.

[allada, 2017/03/15 01:28:40]

Done.

+      var style = /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */ (value[0]);
+      var path = /** @type {!Path2D} */ (value[1]);
       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);
@@ skipping 65 matching lines @@
     var request = node.request();
     if (!request)
       return;
     const borderWidth = 1;
     var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5;
 
     var ranges = this._getSimplifiedBarRange(request, borderOffset);
     var height = this._getBarHeight();
     y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
-    var fillColor = this._colorForResourceType(request);
-    var waitingPath = new Path2D();
+    var waitingStyle = /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */ (

[caseq, 2017/03/15 00:41:30]

nit: if the case is here just to keep closure compiler from complaining, this
could as well be '... || {}' instead.

[allada, 2017/03/15 01:28:40]

Done.

+        this._styleForWaitingResourceType.get(request.resourceType()));
+    var waitingPath = /** @type {!Path2D} */ (this._pathForStyle.get(waitingStyle));
     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);
-    var downloadingPath = new Path2D();
+    var downloadingStyle = /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */ (

[caseq, 2017/03/15 00:41:30]

ditto.

[allada, 2017/03/15 01:28:40]

Done.

+        this._styleForDownloadingResourceType.get(request.resourceType()));
+    var downloadingPath = /** @type {!Path2D} */ (this._pathForStyle.get(downloadingStyle));
     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;
       var leftLabelWidth = context.measureText(labels.left).width;
       var rightLabelWidth = context.measureText(labels.right).width;
-
-      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);
+      var hoverLinePath = /** @type {!Path2D} */ (this._pathForStyle.get(this._hoverDetailsStyle));
 
       if (leftLabelWidth < ranges.mid - ranges.start) {
         var midBarX = ranges.start + (ranges.mid - ranges.start - 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});
         hoverLinePath.moveTo(ranges.start - barDotLineLength, y + Math.floor(height / 2));
         hoverLinePath.arc(ranges.start, y + Math.floor(height / 2), 2, 0, 2 * Math.PI);
         hoverLinePath.moveTo(ranges.start - barDotLineLength, y + Math.floor(height / 2));
@@ skipping 15 matching lines @@
 
     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) {
-        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);
-
+        var wiskerPath = /** @type {!Path2D} */ (this._pathForStyle.get(this._wiskerStyle));
         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;
         wiskerPath.moveTo(queueingStart + borderOffset, y + wiskerHeight / 2);
         wiskerPath.lineTo(queueingStart + borderOffset, y + height - wiskerHeight / 2 - 1);
       }
     }
   }
 
   /**
    * @param {!Network.NetworkNode} node
    * @param {number} y
    */
   _buildTimingBarLayers(node, y) {
     var request = node.request();
     if (!request)
       return;
     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;
-      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;
 
-      var path = new Path2D();
-      /** @type {!Network.NetworkWaterfallColumn._LayerStyles} */
-      var style = {fillStyle: color, lineWidth: lineWidth, borderColor: borderColor};
-      this._pathForStyle.set(style, path);
+      var style =
+          /** @type {!Network.NetworkWaterfallColumn._LayerStyle} */ (this._styleForTimeRangeName.get(range.name));
+      var path = /** @type {!Path2D} */ (this._pathForStyle.get(style));
+      var lineWidth = style.lineWidth || 0;
       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);
       path.rect(start, middleBarY, end - start, height - lineWidth);
     }
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
@@ skipping 29 matching lines @@
         return this._initiatedColor;
       if (node.isNavigationRequest())
         return this._rowNavigationRequestColor;
       if (!isStriped)
         return 'transparent';
       return this._rowStripeColor;
     }
   }
 };
 
-/** @enum {string} */
-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%)'
-};
-
 /** @typedef {!{fillStyle: (string|undefined), lineWidth: (number|undefined), borderColor: (string|undefined)}} */
-Network.NetworkWaterfallColumn._LayerStyles;
+Network.NetworkWaterfallColumn._LayerStyle;
 
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;