DevTools: Add energy value under Timeline pie chart

Source/devtools/front_end/TimelineUIUtils.js

Index: Source/devtools/front_end/TimelineUIUtils.js
diff --git a/Source/devtools/front_end/TimelineUIUtils.js b/Source/devtools/front_end/TimelineUIUtils.js
index b7c73e81f7d4aaae5f6aa1da63562c13a02eff34..a52e556c933957f22bffce89332c52e806a5a757 100644
--- a/Source/devtools/front_end/TimelineUIUtils.js
+++ b/Source/devtools/front_end/TimelineUIUtils.js
@@ -43,7 +43,8 @@ WebInspector.TimelineUIUtils.categories = function()
         rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), 2, "hsl(256, 50%, 60%)", "hsl(256, 67%, 90%)", "hsl(256, 67%, 76%)", "hsl(256, 67%, 70%)"),
         painting: new WebInspector.TimelineCategory("painting", WebInspector.UIString("Painting"), 2, "hsl(109, 33%, 47%)", "hsl(109, 33%, 90%)", "hsl(109, 33%, 64%)", "hsl(109, 33%, 55%)"),
         other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), -1, "hsl(0, 0%, 73%)", "hsl(0, 0%, 90%)", "hsl(0, 0%, 87%)", "hsl(0, 0%, 79%)"),
-        idle: new WebInspector.TimelineCategory("idle", WebInspector.UIString("Idle"), -1, "hsl(0, 0%, 87%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)")
+        idle: new WebInspector.TimelineCategory("idle", WebInspector.UIString("Idle"), -1, "hsl(0, 0%, 87%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)", "hsl(0, 100%, 100%)"),
+        power: new WebInspector.TimelineCategory("power", WebInspector.UIString("Power"), -1, "hsl(16, 100%, 50%)", "hsl(16, 100%, 70%)", "hsl(16, 100%, 60%)", "hsl(16, 100%, 60%)")
     };
     return WebInspector.TimelineUIUtils._categories;
 };
@@ -295,9 +296,10 @@ WebInspector.TimelineUIUtils._generateAggregatedInfo = function(aggregatedStats)
  * @param {!Object} aggregatedStats
  * @param {!WebInspector.TimelineCategory=} selfCategory
  * @param {number=} selfTime
+ * @param {number=} energy
  * @return {!Element}
  */
-WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCategory, selfTime)
+WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCategory, selfTime, energy)
 {
     var element = document.createElement("div");
     element.className = "timeline-aggregated-info";
@@ -346,6 +348,12 @@ WebInspector.TimelineUIUtils.generatePieChart = function(aggregatedStats, selfCa
          rowElement.createChild("div", "timeline-aggregated-category timeline-" + category.name);
          rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(value), category.title));
     }
+
+    if (energy) {
+        var rowElement = footerElement.createChild("div");
+        rowElement.createChild("div", "timeline-aggregated-category timeline-" + "power");

[alph, 2014/04/10 15:38:55]

nit: concatenate "timeline-" and "power"
I still don't understand why do you need an empty div?

[Pan, 2014/04/11 00:54:18]

Thanks a lot! this empty div is a colored rectangle, I intend to keep consistent
to other categories(Scripting, Idle, Paint etc).

+        rowElement.createTextChild(WebInspector.UIString("Energy: %.2f Joules", energy));
+    }
     return element;
 }