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..82fdd044059e93748bd6401e66bae0ae116f4a67 100644
--- a/Source/devtools/front_end/TimelinePowerGraph.js
+++ b/Source/devtools/front_end/TimelinePowerGraph.js
@@ -13,7 +13,15 @@ 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");

[alph, 2014/04/02 08:19:57]

You probably want to hide this guy when the power graph is turned off.

+    this._energy.style.color = color;
+    this._counter = this.createCounter(WebInspector.UIString("Power"), WebInspector.UIString("Power: %.2f\u2009watts"), color);

[alph, 2014/04/02 08:19:57]

Will it be clear to the user that this value represent the energy for the
currently selected window?
There's a power value next to it that changes as user moves the mouse. So it
seems to be a bit inconsistent to me.

[Pan, 2014/04/03 13:58:39]

I think Energy:xxJoules, Power:xxWatts, is ok.
or can we draw a a little bigger xxjoules just on the canvas of power graph?

[alph, 2014/04/03 14:08:16]

Showing energy on the values bar seems inconsistent as I wrote above. Moreover
the values bar disappears when the user moves mouse off the chart. The energy
value should not be affected by the mouse movements, as it is defined by the
current window and not the mouse position.

Btw, wouldn't a separate chart for energy solve the problem?

+    this._calculator = new WebInspector.TimelineCalculator(model);
+
+    this._times = [];

[alph, 2014/04/02 08:19:57]

there's no real need for this array.

+    this._energies = [];
+
     WebInspector.powerProfiler.addEventListener(WebInspector.PowerProfiler.EventTypes.PowerEventRecorded, this._onRecordAdded, this);
 }
 
@@ -28,7 +36,12 @@ WebInspector.TimelinePowerGraph.prototype = {
 
         // "value" of original PowerEvent means the average power between previous sampling to current one.
         // Here, it is converted to average power between current sampling to next one.
-        this._counter.appendSample(this._previousRecord.timestamp, record.value);
+        var previousTime = this._previousRecord.timestamp;
+        this._counter.appendSample(previousTime, record.value);
+
+        this._times.push(previousTime);
+        this._energies.push((record.timestamp - previousTime) * record.value);

[alph, 2014/04/02 08:19:57]

If you store integral values of energy here, you don't need to loop over it in
graphDrawn.

+
         this._previousRecord = record;
         this.scheduleRefresh();
     },
@@ -40,5 +53,38 @@ WebInspector.TimelinePowerGraph.prototype = {
     {
     },
 
+    graphDrawn: function()
+    {
+        var times = this._times;
+
+        if (!times.length)
+            return;
+
+        var minTime = this._calculator.minimumBoundary();
+        var maxTime = this._calculator.maximumBoundary();
+
+
+        // Maximum index of element whose time <= minTime.
+        var start = Number.constrain(times.upperBound(minTime) - 1, 0, times.length - 1);
+
+        // Minimum index of element whose time >= maxTime.
+        var end = Number.constrain(times.lowerBound(maxTime), 0, times.length - 1);
+        var totalEnergy = 0;
+        var energies = this._energies;
+
+        for (var i = start + 1; i < end - 1; i++) {

[alph, 2014/04/02 08:19:57]

style: drop {}

+            totalEnergy += energies[i];
+        }
+
+        if (start + 1 === end) {
+           totalEnergy += (maxTime - minTime) / (times[end] - times[start]) * energies[start];
+        } else {

[alph, 2014/04/02 08:19:57]

There are not handled corner cases, e.g.:
minTime < times[0]
maxTime > times[len-1]
times.length === 1
times.length === 0

+           totalEnergy += (times[start + 1] - minTime) / (times[start + 1] - times[start]) * energies[start];
+           totalEnergy += (maxTime - times[end - 1]) / (times[end] - times[end - 1]) * energies[end - 1];
+        }
+
+        this._energy.textContent = WebInspector.UIString("Energy: %.2f\u2009joules", totalEnergy / 1000);

[alph, 2014/04/02 08:19:57]

How about changing it to "Energy [J]: %.2f" ?

+    },
+
     __proto__: WebInspector.CountersGraph.prototype
 }