DevTools: Add energy value under Timeline pie chart

Source/devtools/front_end/TimelinePowerGraph.js

Index: Source/devtools/front_end/TimelinePowerGraph.js
diff --git a/Source/devtools/front_end/TimelinePowerGraph.js b/Source/devtools/front_end/TimelinePowerGraph.js
index 952011d2a0e6b070291bf6ac41e14fe7d72c53ff..ab0a391c0ab2b26f31a09eb060272db139150ad6 100644
--- a/Source/devtools/front_end/TimelinePowerGraph.js
+++ b/Source/devtools/front_end/TimelinePowerGraph.js
@@ -13,7 +13,11 @@ WebInspector.TimelinePowerGraph = function(delegate, model)
 {
     WebInspector.CountersGraph.call(this, delegate, model);
 
-    this._counter = this.createCounter(WebInspector.UIString("Power"), WebInspector.UIString("Power: %.2f\u2009watts"), "#d00");
+    var color = "#d00";
+    this._energy = this._currentValuesBar.createChild("span", "memory-counter-value");
+    this._energy.style.color = color;
+    this._counter = this.createCounter(WebInspector.UIString("Power"), WebInspector.UIString("Power: %.2f\u2009watts"), color);
+
     WebInspector.powerProfiler.addEventListener(WebInspector.PowerProfiler.EventTypes.PowerEventRecorded, this._onRecordAdded, this);
 }
 
@@ -40,5 +44,36 @@ WebInspector.TimelinePowerGraph.prototype = {
     {
     },
 
+     /**
+     * @param {!WebInspector.CountersGraph.CounterUI} counterUI
+     */
+    _drawGraph: function(counterUI)

[pfeldman, 2014/04/01 14:21:10]

You can't override _drawGraph from another file - it is file-private. You need
to make CountersGraph do what you want.

+    {
+        WebInspector.CountersGraph.prototype._drawGraph.call(this, counterUI);
+        var counter = this._counter;
+        var values = counter.values;
+
+        if (!values.length)
+            return;
+
+        var energy = 0;
+        var start = counter.minimumIndex;
+        var end = counter.maximumIndex;
+        var times = counter.times;
+
+        for (var i = start + 1; i < end - 1; i++) {
+            energy += (times[i + 1] - times[i]) * values[i];
+        }
+
+        if (start + 1 === end) {
+           energy += (counter.maxTime - counter.minTime) * values[start];
+        } else {
+           energy += (times[start + 1] - counter.minTime) * values[start];
+           energy += (counter.maxTime - times[end - 1]) * values[end - 1];
+        }
+
+        this._energy.textContent = WebInspector.UIString("Energy: %.2f\u2009joules", energy / 1000);
+    },
+
     __proto__: WebInspector.CountersGraph.prototype
 }