DevTools: brush up color blending and theming APIs.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartNetworkDataProvider.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.
 
 /**
  * @implements {PerfUI.FlameChartDataProvider}
  * @unrestricted
  */
 Timeline.TimelineFlameChartNetworkDataProvider = class {
   constructor() {
     this._font = '11px ' + Host.fontFamily();
     this.setModel(null);
     this._style = {
       padding: 4,
       height: 17,
       collapsible: true,
-      color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
+      color: UI.themeSupport.patchColorText('#222', UI.ThemeSupport.ColorUsage.Foreground),
       font: this._font,
-      backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
+      backgroundColor: UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0,
       useFirstLineForOverview: false,
       useDecoratorsForOverview: true,
       shareHeaderLine: false
     };
     this._group = {startLevel: 0, name: Common.UIString('Network'), expanded: false, style: this._style};
   }
 
   /**
    * @param {?Timeline.PerformanceModel} performanceModel
@@ skipping 168 matching lines @@
     var startTime = request.startTime;
     var endTime = request.endTime;
     var requestTime = request.timing.requestTime * 1000;
     var sendStart = Math.max(timeToPixel(requestTime + request.timing.sendStart), unclippedBarX);
     var headersEnd = Math.max(timeToPixel(requestTime + request.timing.receiveHeadersEnd), sendStart);
     var finish = Math.max(timeToPixel(request.finishTime || endTime), headersEnd + minBarWidthPx);
     var end = Math.max(timeToPixel(endTime), finish);
 
     context.fillStyle = 'hsla(0, 100%, 100%, 0.8)';
     context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2);
-    context.fillStyle = UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background);
+    context.fillStyle = UI.themeSupport.patchColorText('white', UI.ThemeSupport.ColorUsage.Background);
     context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight);
     context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight);
 
     /**
      * @param {number} begin
      * @param {number} end
      * @param {number} y
      */
     function drawTick(begin, end, y) {
       var /** @const */ tickHeightPx = 6;
@@ skipping 167 matching lines @@
 
   /**
    * @override
    * @param {number} entryIndex
    * @return {boolean}
    */
   canJumpToEntry(entryIndex) {
     return false;
   }
 };