DevTools: brush up color blending and theming APIs.

third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 722 matching lines @@
     var groupOffsets = this._groupOffsets;
     var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
     var colorUsage = UI.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
     context.translate(0, -top);
     var defaultFont = '11px ' + Host.fontFamily();
     context.font = defaultFont;
 
-    context.fillStyle = UI.themeSupport.patchColor('#fff', colorUsage.Background);
+    context.fillStyle = UI.themeSupport.patchColorText('#fff', colorUsage.Background);
     forEachGroup.call(this, (offset, index, group) => {
       var paddingHeight = group.style.padding;
       if (paddingHeight < 5)
         return;
       context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight - 4);
     });
     if (groups.length && lastGroupOffset < top + height)
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
 
-    context.strokeStyle = UI.themeSupport.patchColor('#eee', colorUsage.Background);
+    context.strokeStyle = UI.themeSupport.patchColorText('#eee', colorUsage.Background);
     context.beginPath();
     forEachGroup.call(this, (offset, index, group, isFirst) => {
       if (isFirst || group.style.padding < 4)
         return;
       hLine(offset - 2.5);
     });
     hLine(lastGroupOffset + 1.5);
     context.stroke();
 
     forEachGroup.call(this, (offset, index, group) => {
@@ skipping 23 matching lines @@
             this._headerLeftPadding - this._headerLabelXPadding, offset + this._headerLabelYPadding, width,
             barHeight - 2 * this._headerLabelYPadding);
       }
       context.fillStyle = group.style.color;
       context.fillText(
           group.name, Math.floor(this._expansionArrowIndent * (group.style.nestingLevel + 1) + this._arrowSide),
           offset + textBaseHeight);
     });
     context.restore();
 
-    context.fillStyle = UI.themeSupport.patchColor('#6e6e6e', colorUsage.Foreground);
+    context.fillStyle = UI.themeSupport.patchColorText('#6e6e6e', colorUsage.Foreground);
     context.beginPath();
     forEachGroup.call(this, (offset, index, group) => {
       if (this._isGroupCollapsible(index)) {
         drawExpansionArrow.call(
             this, this._expansionArrowIndent * (group.style.nestingLevel + 1),
             offset + textBaseHeight - this._arrowSide / 2, !!group.expanded);
       }
     });
     context.fill();
 
-    context.strokeStyle = UI.themeSupport.patchColor('#ddd', colorUsage.Background);
+    context.strokeStyle = UI.themeSupport.patchColorText('#ddd', colorUsage.Background);
     context.beginPath();
     context.stroke();
 
     context.restore();
 
     /**
      * @param {number} y
      */
     function hLine(y) {
       context.moveTo(0, y);
@@ skipping 781 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };