DevTools: customize text baseline and style in flame chard.

Source/devtools/front_end/TimelineFlameChart.js

Index: Source/devtools/front_end/TimelineFlameChart.js
diff --git a/Source/devtools/front_end/TimelineFlameChart.js b/Source/devtools/front_end/TimelineFlameChart.js
index ac9a638ce47295edb096d5d23e05d7a7f72633f9..cba43a9cd830c610a0bdcec4a8bd882128993df5 100644
--- a/Source/devtools/front_end/TimelineFlameChart.js
+++ b/Source/devtools/front_end/TimelineFlameChart.js
@@ -41,7 +41,7 @@ WebInspector.TimelineFlameChartDataProvider = function(model, frameModel, mainTh
     this._model = model;
     this._frameModel = frameModel;
     this._mainThread = mainThread;
-    this._font = (this.barHeight() - 4) + "px " + WebInspector.fontFamily();
+    this._font = "bold 12px " + WebInspector.fontFamily();
 
     this._colorGenerator = new WebInspector.FlameChart.ColorGenerator();
     var categories = WebInspector.TimelineUIUtils.categories();
@@ -55,7 +55,23 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
      */
     barHeight: function()
     {
-        return 15;
+        return 20;
+    },
+
+    /**
+     * @return {number}
+     */
+    textBaseline: function()
+    {
+        return 6;
+    },
+
+    /**
+     * @return {number}
+     */
+    textPadding: function()
+    {
+        return 5;
     },
 
     /**
@@ -240,6 +256,15 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
     entryColor: function(entryIndex)
     {
         return this._entryColors[entryIndex];
+    },
+
+    /**
+     * @param {number} entryIndex
+     * @return {!string}
+     */
+    textColor: function(entryIndex)
+    {
+        return "white";
     }
 }