[Devtools] Flaten colors for network waterfall's resource colors view

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 38 matching lines @@
     this._eventDividers = new Map();
 
     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);
 
-    /** @type {!Map<!Common.ResourceType, string>} */
-    this._borderColorsForResourceTypeCache = new Map();
-    /** @type {!Map<string, !CanvasGradient>} */
-    this._colorsForResourceTypeCache = new Map();
-
     this.element.addEventListener('mousemove', this._onMouseMove.bind(this), true);
     this.element.addEventListener('mouseleave', event => this._setHoveredNode(null, false), true);
   }
 
   /**
+   * @param {string} color

[allada, 2017/03/02 00:24:30]

I moved these above because I am going to be adding more code in this area to
setup colors in a few paths, and I thought it'd be easier to see diffs in this
place from here on out.

+   * @return {string}
+   */
+  _waitingColorForBaseColor(color) {
+    var parsedColor = Common.Color.parse(color);
+    var hsla = parsedColor.hsla();
+    hsla[2] *= 1.1;
+    return /** @type {string} */ (parsedColor.asString(null));
+  }
+
+  /**
+   * @param {string} color
+   * @return {string}
+   */
+  _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));
+  }
+
+  /**
+   * @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 298 matching lines @@
       case types.Push:
       case types.Queueing:
         return 7;
       default:
         return 13;
     }
   }
 
   /**
    * @param {!SDK.NetworkRequest} request
-   * @return {string}
-   */
-  _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 {!SDK.NetworkRequest} request
-   * @return {string|!CanvasGradient}
-   */
-  _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 {!SDK.NetworkRequest} request
    * @param {number} borderOffset
    * @return {!{start: number, mid: number, end: number}}
    */
   _getSimplifiedBarRange(request, borderOffset) {
     var drawWidth = this._offsetWidth - this._leftPadding;
     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
@@ skipping 11 matching lines @@
       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);
-    context.fillStyle = this._colorForResourceType(context, request);
-    context.strokeStyle = this._borderColorForResourceType(request);
+    var fillColor = this._colorForResourceType(request);
+    context.strokeStyle = this._borderColorForBaseColor(fillColor);
     context.lineWidth = borderWidth;
 
     context.beginPath();
-    context.globalAlpha = 0.5;
+    context.fillStyle = this._waitingColorForBaseColor(fillColor);
     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.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);
@@ skipping 33 matching lines @@
    * @param {number} endX
    */
   _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) {
     /** @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('#444', UI.ThemeSupport.ColorUsage.Foreground);
-    context.strokeStyle = UI.themeSupport.patchColor('#444', UI.ThemeSupport.ColorUsage.Foreground);
+    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);
     } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) {
       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;
@@ skipping 107 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%)'
 };