src/third_party/WebKit/Source/devtools/front_end/TimelinePowerOverview.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @constructor
   7  * @extends {WebInspector.Object}
   8  */
   9 WebInspector.TimelinePowerOverviewDataProvider = function()
  10 {
  11     this._records = [];
  12     if (Capabilities.canProfilePower)
  13         WebInspector.powerProfiler.addEventListener(WebInspector.PowerProfiler.EventTypes.PowerEventRecorded, this._onRecordAdded, this);
  14 }
  15
  16 WebInspector.TimelinePowerOverviewDataProvider.prototype = {
  17     /**
  18      * @return {!Array.<!PowerAgent.PowerEvent>}
  19      */
  20     records : function()
  21     {
  22         // The last record is not used, as its "value" is not set.
  23         return this._records.slice(0, this._records.length - 1);
  24     },
  25
  26     _onRecordAdded: function(event)
  27     {
  28         // "value" of original PowerEvent means the average power between previous sampling to current one.
  29         // Here, it is converted to average power between current sampling to next one.
  30         var record = event.data;
  31         var length = this._records.length;
  32         if (length)
  33             this._records[length - 1].value = record.value;
  34         this._records.push(record);
  35     },
  36
  37     __proto__: WebInspector.Object.prototype
  38 }
  39
  40 /**
  41  * @constructor
  42  * @extends {WebInspector.TimelineOverviewBase}
  43  * @param {!WebInspector.TimelineModel} model
  44  */
  45 WebInspector.TimelinePowerOverview = function(model)
  46 {
  47     WebInspector.TimelineOverviewBase.call(this, model);
  48     this.element.id = "timeline-overview-power";
  49     this._dataProvider = new WebInspector.TimelinePowerOverviewDataProvider();
  50
  51     this._maxPowerLabel = this.element.createChild("div", "max memory-graph-label");
  52     this._minPowerLabel = this.element.createChild("div", "min memory-graph-label");
  53 }
  54
  55 WebInspector.TimelinePowerOverview.prototype = {
  56     timelineStarted: function()
  57     {
  58         if (Capabilities.canProfilePower)
  59             WebInspector.powerProfiler.startProfile();
  60     },
  61
  62     timelineStopped: function()
  63     {
  64         if (Capabilities.canProfilePower)
  65             WebInspector.powerProfiler.stopProfile();
  66     },
  67
  68     _resetPowerLabels: function()
  69     {
  70         this._maxPowerLabel.textContent = "";
  71         this._minPowerLabel.textContent = "";
  72     },
  73
  74     update: function()
  75     {
  76         this.resetCanvas();
  77
  78         var records = this._dataProvider.records();
  79         if (!records.length) {
  80             this._resetPowerLabels();
  81             return;
  82         }
  83
  84         const lowerOffset = 3;
  85         var maxPower = 0;
  86         var minPower = 100000000000;
  87         var minTime = this._model.minimumRecordTime();
  88         var maxTime = this._model.maximumRecordTime();
  89         for (var i = 0; i < records.length; i++) {
  90             var record = records[i];
  91             if (record.timestamp < minTime || record.timestamp > maxTime)
  92                 continue;
  93             maxPower = Math.max(maxPower, record.value);
  94             minPower = Math.min(minPower, record.value);
  95         }
  96         minPower = Math.min(minPower, maxPower);
  97
  98
  99         var width = this._canvas.width;
 100         var height = this._canvas.height - lowerOffset;
 101         var xFactor = width / (maxTime - minTime);
 102         var yFactor = height / Math.max(maxPower - minPower, 1);
 103
 104         var histogram = new Array(width);
 105         for (var i = 0; i < records.length - 1; i++) {
 106             var record = records[i];
 107             if (record.timestamp < minTime || record.timestamp > maxTime)
 108                 continue;
 109             var x = Math.round((record.timestamp - minTime) * xFactor);
 110             var y = Math.round((record.value- minPower ) * yFactor);
 111             histogram[x] = Math.max(histogram[x] || 0, y);
 112         }
 113
 114         var y = 0;
 115         var isFirstPoint = true;
 116         var ctx = this._context;
 117         ctx.save();
 118         ctx.translate(0.5, 0.5);
 119         ctx.beginPath();
 120         ctx.moveTo(-1, this._canvas.height);
 121         for (var x = 0; x < histogram.length; x++) {
 122             if (typeof histogram[x] === "undefined")
 123                 continue;
 124             if (isFirstPoint) {
 125                 isFirstPoint = false;
 126                 y = histogram[x];
 127                 ctx.lineTo(-1, height - y);
 128             }
 129             ctx.lineTo(x, height - y);
 130             y = histogram[x];
 131             ctx.lineTo(x, height - y);
 132         }
 133
 134         ctx.lineTo(width, height - y);
 135         ctx.lineTo(width, this._canvas.height);
 136         ctx.lineTo(-1, this._canvas.height);
 137         ctx.closePath();
 138
 139         ctx.fillStyle = "rgba(255,192,0, 0.8);";
 140         ctx.fill();
 141
 142         ctx.lineWidth = 0.5;
 143         ctx.strokeStyle = "rgba(20,0,0,0.8)";
 144         ctx.stroke();
 145         ctx.restore();
 146
 147         this._maxPowerLabel.textContent = WebInspector.UIString("%.2f\u2009watts", maxPower);
 148         this._minPowerLabel.textContent = WebInspector.UIString("%.2f\u2009watts", minPower);;
 149     },
 150
 151     __proto__: WebInspector.TimelineOverviewBase.prototype
 152 }
 153
 154