DevTools: brush up color blending and theming APIs.

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 32 matching lines @@
     /** @type {?Network.NetworkNode} */
     this._hoveredNode = null;
 
     /** @type {!Map<string, !Array<number>>} */
     this._eventDividers = new Map();
 
     /** @type {(number|undefined)} */
     this._updateRequestID;
 
     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(
+    this._rowNavigationRequestColor = UI.themeSupport.patchColorText('#def', colorUsage.Background);
+    this._rowStripeColor = UI.themeSupport.patchColorText('#f5f5f5', colorUsage.Background);
+    this._rowHoverColor = UI.themeSupport.patchColorText(
         '#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._parentInitiatorColor = UI.themeSupport.patchColorText('hsla(120, 68%, 54%, 0.2)', colorUsage.Background);
+    this._initiatedColor = UI.themeSupport.patchColorText('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);
 
     this._styleForTimeRangeName = Network.NetworkWaterfallColumn._buildRequestTimeRangeStyle();
 
     var resourceStyleTuple = Network.NetworkWaterfallColumn._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);
+    var baseLineColor = UI.themeSupport.patchColorText('#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 = [];
   }
@@ skipping 302 matching lines @@
       for (var drawNode of drawNodes) {
         if (useTimingBars)
           this._buildTimingBarLayers(drawNode, rowOffset - this._scrollTop);
         else
           this._buildSimplifiedBarLayers(context, drawNode, rowOffset - this._scrollTop);
       }
     }
     this._drawLayers(context);
 
     context.save();
-    context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.ColorUsage.Foreground);
+    context.fillStyle = UI.themeSupport.patchColorText('#888', UI.ThemeSupport.ColorUsage.Foreground);
     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);
@@ skipping 221 matching lines @@
       return this._rowStripeColor;
     }
   }
 };
 
 /** @typedef {!{fillStyle: (string|undefined), lineWidth: (number|undefined), borderColor: (string|undefined)}} */
 Network.NetworkWaterfallColumn._LayerStyle;
 
 /** @typedef {!{x: number, y: number, text: string}} */
 Network.NetworkWaterfallColumn._TextLayer;