DevTools: Add energy value under Timeline pie chart

Source/devtools/front_end/TimelinePowerGraph.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.CountersGraph}
  * @implements {WebInspector.TimelineModeView}
  * @param {!WebInspector.TimelineModeViewDelegate} delegate
  * @param {!WebInspector.TimelineModel} model
  */
 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);
 }
 
 WebInspector.TimelinePowerGraph.prototype = {
     _onRecordAdded: function(event)
     {
         var record = event.data;
         if (!this._previousRecord) {
             this._previousRecord = record;
             return;
         }
 
         // "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();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     addRecord: function(record)
     {
     },
 
+    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
 }