[Devtools] Moved network waterfall to draw all text as a layer

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 41 matching lines @@
     var colorUsage = UI.ThemeSupport.ColorUsage;
     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 {!Array<!Network.NetworkWaterfallColumn._TextLayer>} */
+    this._textLayers = [];
   }
 
   /**
    * @param {string} color
    * @return {string}
    */
   _waitingColorForBaseColor(color) {
     var parsedColor = Common.Color.parse(color);
     var hsla = parsedColor.hsla();
     hsla[2] *= 1.1;
@@ skipping 176 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._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 79 matching lines @@
       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);
       }
     }
+
+    context.save();
+    var colorUsage = UI.ThemeSupport.ColorUsage;
+    context.fillStyle = UI.themeSupport.patchColor(
+        '#888', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Background | colorUsage.Selection));

[caseq, 2017/03/02 23:15:20]

Why? It seems neither background nor selection.

[allada, 2017/03/03 03:49:05]

It only appears when a user hovers over it. It's a complement to line 55 above.
This is also going to be moving to a style map toward the end of the cl chain.

[caseq, 2017/03/03 17:23:24]

Right, but this is still a foreground color, not background or selection
background.

[allada, 2017/03/03 19:31:49]

Done.

+    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();
   }
 
@@ skipping 91 matching lines @@
     context.fillStyle = fillColor;
     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.hovered()) {
       labels = this._calculator.computeBarGraphLabels(request);
       this._drawSimplifiedBarDetails(
-          context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset);
+          context, labels.left, labels.right, ranges.start, ranges.mid, ranges.mid + barWidth + borderOffset, y);
     }
 
     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);
@@ skipping 14 matching lines @@
     context.restore();
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {string} leftText
    * @param {string} rightText
    * @param {number} startX
    * @param {number} midX
    * @param {number} endX
+   * @param {number} currentY
    */
-  _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) {
+  _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX, currentY) {

[allada, 2017/03/02 02:21:26]

This entire function will be inlined in an upcoming patch, in the mean time I am
passing currentY, but it will know about it when it's inlined.

     /** @const */
     var barDotLineLength = 10;
 
     context.save();
     var height = this._getBarHeight();
     var leftLabelWidth = context.measureText(leftText).width;
     var rightLabelWidth = context.measureText(rightText).width;
     context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
     context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
     if (leftLabelWidth < midX - startX) {
-      var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2;
-      context.fillText(leftText, midBarX, this._fontSize);
+      const midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2;

[caseq, 2017/03/02 23:15:20]

please keep it a var, we decided on not using consts for the time being.

[allada, 2017/03/03 03:49:05]

Done.

+      this._textLayers.push({text: leftText, x: midBarX, y: currentY + this._fontSize});
     } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) {
+      this._textLayers.push(
+          {text: leftText, x: startX - leftLabelWidth - barDotLineLength - 1, y: currentY + this._fontSize});
       context.beginPath();
       context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
       context.fill();
-      context.fillText(leftText, startX - leftLabelWidth - barDotLineLength - 1, this._fontSize);
       context.beginPath();
       context.lineWidth = 1;
       context.moveTo(startX - barDotLineLength, Math.floor(height / 2));
       context.lineTo(startX, Math.floor(height / 2));
       context.stroke();
     }
 
     if (rightLabelWidth < endX - midX) {
       var midBarX = midX + (endX - midX) / 2 - rightLabelWidth / 2;
-      context.fillText(rightText, midBarX, this._fontSize);
+      this._textLayers.push({text: rightText, x: midBarX, y: currentY + this._fontSize});
     } else if (endX + barDotLineLength + rightLabelWidth < this._offsetWidth - this._leftPadding) {
+      this._textLayers.push({text: rightText, x: endX + barDotLineLength + 1, y: currentY + this._fontSize});
       context.beginPath();
       context.arc(endX, Math.floor(height / 2), 2, 0, 2 * Math.PI);
       context.fill();
-      context.fillText(rightText, endX + barDotLineLength + 1, this._fontSize);
       context.beginPath();
       context.lineWidth = 1;
       context.moveTo(endX, Math.floor(height / 2));
       context.lineTo(endX + barDotLineLength, Math.floor(height / 2));
       context.stroke();
     }
     context.restore();
   }
 
   /**
@@ skipping 84 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%)'
 };
+
+/** @typedef {!{x: number, y: number, text: string}} */
+Network.NetworkWaterfallColumn._TextLayer;