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

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 0a54b1e49674082e46417a49b68150d023a27c30..b7ff2e6f05623bb3c985be28eb1af4e1d60f9d47 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js
@@ -59,6 +59,9 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
     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 = [];
   }
 
   /**
@@ -255,6 +258,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     this._startTime = this._calculator.minimumBoundary();
     this._endTime = this._calculator.maximumBoundary();
     this._resetCanvas();
+    this._textLayers = [];
     this._draw();
   }
 
@@ -354,6 +358,15 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
           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();
 
@@ -465,7 +478,7 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     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) {
@@ -500,8 +513,9 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
    * @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;
 
@@ -512,13 +526,14 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
     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));
@@ -528,12 +543,12 @@ Network.NetworkWaterfallColumn = class extends UI.VBox {
 
     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));
@@ -638,3 +653,6 @@ Network.NetworkWaterfallColumn._colorsForResourceType = {
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };
+
+/** @typedef {!{x: number, y: number, text: string}} */
+Network.NetworkWaterfallColumn._TextLayer;