[DevTools] Add power profiler and power overview in timeline panel.

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 = [];
+    if (WebInspector.experimentsSettings.powerProfiler.isEnabled() && Capabilities.canProfilePower)
+        WebInspector.powerProfiler.addEventListener(WebInspector.PowerProfiler.EventTypes.PowerEventRecorded, this._onRecordAdded, this);
+}
+
+WebInspector.TimelinePowerOverviewDataProvider.prototype = {
+    /**
+     * @return {Array.<PowerEvent>}
+     */
+    records : function()
+    {
+        return this._records;
+    },
+
+    _onRecordAdded: function(event)
+    {
+        this._records.push(event.data);
+    },
+
+    __proto__: WebInspector.Object.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.CounterUIBase}

[pfeldman, 2014/03/24 13:41:25]

We should figure out whether we want a) power overview, b) power section (like
the memory) or both. It seems like both would work best.

So we need to have:

1) TimelinePowerOverview (that would be a clone of TimelineMemoryOverview, feel
free to reuse code from there).

2) TimelinePowerGraph (that would be a clone of CountersGraph) for the bottom
part of the screen.

At this point, I don't understand how MemoryStatistics and CountersGraph are
separated. Let me try to improve their relationship.

[Pan, 2014/03/25 06:12:31]

Previously, I tried to reuse some code from a memory counters graph, while, to
draw TimelinePowerOverview, that's why I extracted a pure CounterUIBase without
left "swatch".

My original usage definition is:
a: A moving dot, and tell instant power value.
b: a selected time window, to tell energy consumption during that period.
both a and b are supported in the timelineOverviewPanel.

Do you mean we need both TimelinePowerOverview and TimelinePowerGraph?
If we have both of them, refer to memory mode, I guess you mean:
c: TimelinePowerOverview provides the power curves. without instant power value
and energy consumption value,
d: user choose a time window in TimelinePowerOverview, TimelinePowerGraph(at the
same place of memory graph) shows the zoomed in window, and provide energy
consumption value in that time window.
e: TimelinePowerGraph allows a moving dot to tell the instant power.

right? thanks!
Pan

+ * @param {!WebInspector.TimelinePowerOverview} powerOverView
+ * @param {string} graphColor
+ * @param {!WebInspector.Counter} counter
+ */
+WebInspector.PowerCounterUI = function(powerOverView, color, counter)
+{
+    WebInspector.CounterUIBase.call(this, color, counter);
+
+    this._value = powerOverView.element.createChild("span", "timeline-power-text");
+    this._value.style.color = color;
+    this._currentValueLabel = WebInspector.UIString("%.2f\u2009watts");
+    this._marker = powerOverView.element.createChild("div", "timeline-power-marker");
+    this._marker.style.backgroundColor = color;
+    this.clearCurrentValueAndMarker();
+}
+
+WebInspector.PowerCounterUI.prototype = {
+    __proto__: WebInspector.CounterUIBase.prototype
+}
+
+/**
+ * @constructor
+ * @param {!WebInspector.TimelineModel} model
+ */
+WebInspector.TimelinePowerOverviewCalculator = function(model)
+{
+    this._model = model;
+}
+
+WebInspector.TimelinePowerOverviewCalculator.prototype = {
+    /**
+     * @return {number}
+     */
+    minimumBoundary : function ()
+    {
+        return this._model.minimumRecordTime();
+    },
+
+    /**
+     * @return {number}
+     */
+    maximumBoundary : function ()
+    {
+        return this._model.maximumRecordTime();
+    },
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.TimelineOverviewBase}
+ * @param {!WebInspector.TimelineModel} model
+ */
+WebInspector.TimelinePowerOverview = function(model)
+{
+    WebInspector.TimelineOverviewBase.call(this, model);
+    this.element.id = "timeline-overview-power";
+    this._dataProvider = new WebInspector.TimelinePowerOverviewDataProvider();
+    this._counter = new WebInspector.Counter(WebInspector.UIString("value"));
+    this._counterUI = new WebInspector.PowerCounterUI(this, "rgba(20,0,0,0.8)", this._counter);
+    this._calculator = new WebInspector.TimelinePowerOverviewCalculator(this._model);
+
+    this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this));
+}
+
+WebInspector.TimelinePowerOverview.prototype = {
+    startTimeline: function()
+    {
+        if (WebInspector.experimentsSettings.powerProfiler.isEnabled() && Capabilities.canProfilePower)
+            WebInspector.powerProfiler.startProfile();
+    },
+
+    stopTimeline: function()
+    {
+        if (WebInspector.experimentsSettings.powerProfiler.isEnabled() && Capabilities.canProfilePower)
+            WebInspector.powerProfiler.stopProfile();
+    },
+
+    _onMouseMove: function(event)
+    {
+        this._counterUI.updateCurrentValue(event.offsetX);
+    },
+
+    update: function()
+    {
+        this.resetCanvas();
+
+        var records = this._dataProvider.records();
+        if (records.length < 2)
+            return;
+
+        this._counter.reset();
+
+        for(var i = 0; i < records.length - 1; i++)
+            this._counter.appendSample(records[i].timestamp, records[i + 1]);
+
+        this._counter._calculateVisibleIndexes(this._calculator);
+        this._counter._calculateXValues(this._canvas.offsetWidth);
+
+        var canvas = this._canvas;
+        var ctx = canvas.getContext("2d");
+        const lowerOffset = 3;
+        var width = canvas.width;
+        var counter = this._counterUI.counter;
+        var values = counter.values;
+
+        var maxValue;
+        var minValue;
+        for (var i = counter._minimumIndex; i <= counter._maximumIndex; i++) {
+            var value = values[i];
+            if (minValue === undefined || value < minValue)
+                minValue = value;
+            if (maxValue === undefined || value > maxValue)
+                maxValue = value;
+        }
+        minValue = minValue || 0;
+        maxValue = maxValue || 1;
+
+        var yValues = this._counterUI.graphYValues;
+
+        var maxYRange = maxValue - minValue;
+        var yFactor = maxYRange ? (this._canvas.height - lowerOffset) / (maxYRange) : 1;
+
+        ctx.save();
+        ctx.beginPath();
+        var currentX = 0;
+        var initialValue = values[counter._minimumIndex];
+        var currentY = Math.round(this._canvas.height - (initialValue - minValue) * yFactor);
+        ctx.moveTo(currentX, currentY);
+        for (var i = counter._minimumIndex; i <= counter._maximumIndex; i++) {
+             var x = Math.round(counter.x[i] * this._canvas.width / this._canvas.offsetWidth);
+             ctx.lineTo(x, currentY);
+             var currentValue = values[i];
+
+             currentY = Math.round(this._canvas.height - (currentValue - minValue) * yFactor);
+             ctx.lineTo(x, currentY);
+             yValues[i] = currentY * this._canvas.offsetHeight / this._canvas.height;
+        }
+        ctx.lineTo(width, currentY);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = this._counterUI.graphColor;
+        ctx.stroke();
+
+        ctx.lineTo(width, this._canvas.height);
+        ctx.lineTo(0, this._canvas.height);
+        ctx.fillStyle = "rgba(255,192,0, 0.8)";
+        ctx.fill();
+        ctx.closePath();
+
+        ctx.restore();
+    },
+
+    __proto__: WebInspector.TimelineOverviewBase.prototype
+}
+
+