DevTools: customize text baseline and style in flame chard.

Source/devtools/front_end/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 163 matching lines @@
      * @param {number} entryIndex
      * @return {?string}
      */
     entryFont: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {!string}
      */
     entryColor: function(entryIndex) { },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!string}
+     */
+    textColor: function(entryIndex) { },
+
+    /**
+     * @return {number}
+     */
+    textBaseline: function() { },
+
+    /**
+     * @return {number}
+     */
+    textPadding: function() { }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.FlameChart.Calculator = function()
 {
     this._paddingLeft = 0;
 }
@@ skipping 618 matching lines @@
         var pixelWindowLeft = this._pixelWindowLeft;
         var paddingLeft = this._paddingLeft;
         var minWidth = this._minWidth;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryOffsets = timelineData.entryOffsets;
         var entryLevels = timelineData.entryLevels;
 
         var titleIndexes = new Uint32Array(timelineData.entryTotalTimes);
         var lastTitleIndex = 0;
         var dotsWidth = context.measureText("\u2026").width;
-        var textPaddingLeft = 2;
-        this._minTextWidth = context.measureText("\u2026").width + textPaddingLeft;
+        var textPadding = this._dataProvider.textPadding();
+        this._minTextWidth = context.measureText("\u2026").width + 2 * textPadding;
         var minTextWidth = this._minTextWidth;
 
         var lastDrawOffset = new Int32Array(this._dataProvider.maxStackDepth());
         for (var i = 0; i < lastDrawOffset.length; ++i)
             lastDrawOffset[i] = -1;
 
         var barX = 0;
         var barY = 0;
         var barWidth = 0;
         var barRight = 0;
         var barLevel = 0;
         var barHeight = this._barHeight;
         this._baseHeight = this._isTopDown ? WebInspector.FlameChart.DividersBarHeight : height - this._barHeight;
         context.strokeStyle = "black";
         var color;
         var entryIndex = 0;
         var entryOffset = 0;
 
         var colorBuckets = {};
         var colors = [];
         var bucket = [];
 
-        var textBaseHeight = this._baseHeight + this._barHeight - 4;
+        var textBaseHeight = this._baseHeight + this._barHeight - this._dataProvider.textBaseline();
         var lastUsedFont = "";
         var font;
+        var textColor;
+        var lastTextColor = "";
         var text = "";
         var xText = 0;
         var textWidth = 0;
         var title = "";
         var i = 0;
         var c = 0;
 
         var entryOffsetRight = 0;
         var maxBarLevel = height / this._barHeight;
         for (entryIndex = 0; entryIndex < entryOffsets.length; ++entryIndex) {
@@ skipping 53 matching lines @@
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
 
         for (i = 0; i < lastTitleIndex; ++i) {
             entryIndex = titleIndexes[i];
             text = this._dataProvider.entryTitle(entryIndex);
             if (!text || !text.length)
                 continue;
             font = this._dataProvider.entryFont(entryIndex);
-            if (font !== lastUsedFont)
-                context.font = font;
-
             entryOffset = entryOffsets[entryIndex];
             barX = this._offsetToPosition(entryOffset);
             barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
             barWidth = Math.max(barRight - barX, minWidth);
             xText = Math.max(0, barX);
-            textWidth = barWidth - textPaddingLeft + barX - xText;
+            textWidth = barWidth - 2 * textPadding + barX - xText;
             title = this._prepareText(context, text, textWidth);
-            if (title)
-                context.fillText(title, xText + textPaddingLeft, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
+            if (!title)
+                continue;
+            if (font !== lastUsedFont) {
+                context.font = font;
+                lastUsedFont = font;
+            }
+            textColor = this._dataProvider.textColor(entryIndex);
+            if (textColor !== lastTextColor) {
+                context.fillStyle = textColor;
+                lastTextColor = textColor;
+            }
+            context.fillText(title, xText + textPadding, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
         }
         this._updateHighlightElement();
     },
 
     _updateHighlightElement: function()
     {
         if (this._highlightElement.parentElement)
             this._highlightElement.remove();
         var entryIndex = this._highlightedEntryIndex;
         if (entryIndex === -1)
@@ skipping 129 matching lines @@
             this._timelineGrid.hideDividers();
         this.draw(this.element.clientWidth, this.element.clientHeight);
         this._calculator._updateBoundaries(this);
         this._timelineGrid.element.style.width = this.element.clientWidth;
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         this._timelineGrid.updateDividers(this._calculator, offsets, true);
     },
 
     __proto__: WebInspector.View.prototype
 }