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");
+    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);
 }
 
 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);
         this._previousRecord = record;
         this.scheduleRefresh();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     addRecord: function(record)
     {
     },
 
+     /**
+     * @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
 }