DevTools: Add energy value under Timeline pie chart

Source/devtools/front_end/TimelinePowerOverview.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.Object}
  */
 WebInspector.TimelinePowerOverviewDataProvider = function()
 {
     this._records = [];
+    this._energies = [];
+    this._times = [];
     if (Capabilities.canProfilePower)
         WebInspector.powerProfiler.addEventListener(WebInspector.PowerProfiler.EventTypes.PowerEventRecorded, this._onRecordAdded, this);
 }
 
 WebInspector.TimelinePowerOverviewDataProvider.prototype = {
     /**
      * @return {!Array.<!PowerAgent.PowerEvent>}
      */
     records : function()
     {
         // The last record is not used, as its "value" is not set.
         return this._records.slice(0, this._records.length - 1);
     },
 
+    /**
+     * @param {number} minTime
+     * @param {number} maxTime
+     */
+    _calculateEnergy : function(minTime, maxTime)
+    {
+        var times = this._times;
+        var energies = this._energies;
+
+        if (times.length < 2)
+            return 0;
+
+        // Maximum index of element whose time <= minTime.
+        var start = minTime >= times[0] ? Number.constrain(times.upperBound(minTime) - 1, 0, times.length - 1) : 0;

[alph, 2014/04/09 16:02:27]

no need for "minTime >= times[0]" check as constrain return 0 anyway for that
case.

[Pan, 2014/04/10 13:38:57]

Done.

+
+        // Minimum index of element whose time >= maxTime.
+        var end = maxTime <= times[times.length - 1] ? Number.constrain(times.lowerBound(maxTime), 0, times.length - 1) : times.length - 1;

[alph, 2014/04/09 16:02:27]

ditto for maxTime <= times[...] check.

[Pan, 2014/04/10 13:38:57]

Done.

+
+        if (start + 1 === end)

[alph, 2014/04/09 16:02:27]

There seems to be another case when start === end, e.g. when maxTime < times[0]

[Pan, 2014/04/10 13:38:57]

thanks, I'd like to return 0 when window is out of times[] :)

+           return (maxTime - minTime) / (times[end] - times[start]) * (energies[end] - energies[start]) / 1000;

[alph, 2014/04/09 16:02:27]

seems to be incorrect if minTime < times[0].
same for maxTime > times[last]

[Pan, 2014/04/10 13:38:57]

thanks, if window's range is bigger than times[], I think we have to just return
power consumption during times[]. so I'd like to adjust the window time to
times[] boundary.

+
+        var totalEnergy = 0;
+        totalEnergy += energies[end - 1] - energies[start + 1];
+        totalEnergy += (times[start + 1] - minTime) / (times[start + 1] - times[start]) * (energies[start + 1] - energies[start]);

[alph, 2014/04/09 16:02:27]

A case of minTime < times[0] and the same at the other end are not handled.

[Pan, 2014/04/10 13:38:57]

Done.

+        totalEnergy += (maxTime - times[end - 1]) / (times[end] - times[end - 1]) * (energies[end] - energies[end - 1]);
+        return totalEnergy / 1000;
+    },
+
     _onRecordAdded: function(event)
     {
         // "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.
         var record = event.data;
+        var curTime = record.timestamp;
         var length = this._records.length;
-        if (length)
+        var accumulatedEnergy = 0;
+        if (length) {
             this._records[length - 1].value = record.value;
+
+            var prevTime = this._records[length - 1].timestamp;
+            accumulatedEnergy = this._energies[length - 1];
+            accumulatedEnergy += (curTime - prevTime) * record.value;
+        }
+        this._energies.push(accumulatedEnergy);
         this._records.push(record);
+        this._times.push(curTime);
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineOverviewBase}
  * @param {!WebInspector.TimelineModel} model
  */
@@ skipping 93 matching lines @@
 
         ctx.fillStyle = "rgba(255,192,0, 0.8);";
         ctx.fill();
 
         ctx.lineWidth = 0.5;
         ctx.strokeStyle = "rgba(20,0,0,0.8)";
         ctx.stroke();
         ctx.restore();
 
         this._maxPowerLabel.textContent = WebInspector.UIString("%.2f\u2009watts", maxPower);
-        this._minPowerLabel.textContent = WebInspector.UIString("%.2f\u2009watts", minPower);;
+        this._minPowerLabel.textContent = WebInspector.UIString("%.2f\u2009watts", minPower);
+    },
+
+    /**
+     * @param {number} minTime
+     * @param {number} maxTime
+     */
+    calculateEnergy: function(minTime, maxTime)
+    {
+        return this._dataProvider._calculateEnergy(minTime, maxTime);
     },
 
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }