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

   1 /*
   2  * Copyright (C) 2013 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @extends {WebInspector.MemoryStatistics}
  34  * @param {!WebInspector.TimelineView} timelineView
  35  * @param {!WebInspector.TimelineModel} model
  36  */
  37 WebInspector.CountersGraph = function(timelineView, model)
  38 {
  39     WebInspector.MemoryStatistics.call(this, timelineView, model);
  40 }
  41
  42 /**
  43  * @constructor
  44  * @extends {WebInspector.CounterUIBase}
  45  * @param {!WebInspector.CountersGraph} memoryCountersPane
  46  * @param {string} title
  47  * @param {string} currentValueLabel
  48  * @param {!string} color
  49  * @param {!WebInspector.MemoryStatistics.Counter} counter
  50  */
  51 WebInspector.CounterUI = function(memoryCountersPane, title, currentValueLabel, color, counter)
  52 {
  53     WebInspector.CounterUIBase.call(this, memoryCountersPane, title, color, counter)
  54     this._range = this._swatch.element.createChild("span");
  55
  56     this._value = memoryCountersPane._currentValuesBar.createChild("span", "memory-counter-value");
  57     this._value.style.color = color;
  58     this._currentValueLabel = currentValueLabel;
  59     this._marker = memoryCountersPane._canvasContainer.createChild("div", "memory-counter-marker");
  60     this._marker.style.backgroundColor = color;
  61     this.clearCurrentValueAndMarker();
  62
  63     this.graphColor = color;
  64     this.graphYValues = [];
  65 }
  66
  67 WebInspector.CounterUI.prototype = {
  68     reset: function()
  69     {
  70         this._range.textContent = "";
  71     },
  72
  73     /**
  74      * @param {number} minValue
  75      * @param {number} maxValue
  76      */
  77     setRange: function(minValue, maxValue)
  78     {
  79         this._range.textContent = WebInspector.UIString("[%d:%d]", minValue, maxValue);
  80     },
  81
  82     __proto__: WebInspector.CounterUIBase.prototype
  83 }
  84
  85
  86 WebInspector.CountersGraph.prototype = {
  87     _createCurrentValuesBar: function()
  88     {
  89         this._currentValuesBar = this._graphsContainer.createChild("div");
  90         this._currentValuesBar.id = "counter-values-bar";
  91         this._graphsContainer.classList.add("dom-counters");
  92     },
  93
  94     _createAllCounters: function()
  95     {
  96         this._counters = [];
  97         this._counterUI = [];
  98         this._createCounter(WebInspector.UIString("Documents"), WebInspector.UIString("Documents: %d"), "#d00", "documents");
  99         this._createCounter(WebInspector.UIString("Nodes"), WebInspector.UIString("Nodes: %d"), "#0a0", "nodes");
 100         this._createCounter(WebInspector.UIString("Listeners"), WebInspector.UIString("Listeners: %d"), "#00d", "jsEventListeners");
 101         if (WebInspector.experimentsSettings.gpuTimeline.isEnabled())
 102             this._createCounter(WebInspector.UIString("GPU Memory"), WebInspector.UIString("GPU Memory [KB]: %d"), "#c0c", "gpuMemoryUsedKB");
 103     },
 104
 105     /**
 106      * @param {string} uiName
 107      * @param {string} uiValueTemplate
 108      * @param {string} color
 109      * @param {string} protocolName
 110      */
 111     _createCounter: function(uiName, uiValueTemplate, color, protocolName)
 112     {
 113         var counter = new WebInspector.MemoryStatistics.Counter(protocolName);
 114         this._counters.push(counter);
 115         this._counterUI.push(new WebInspector.CounterUI(this, uiName, uiValueTemplate, color, counter));
 116     },
 117
 118     /**
 119      * @param {!WebInspector.Event} event
 120      */
 121     _onRecordAdded: function(event)
 122     {
 123         /**
 124          * @this {!WebInspector.CountersGraph}
 125          */
 126         function addStatistics(record)
 127         {
 128             var counters = record.counters;
 129             if (!counters)
 130                 return;
 131             var time = record.endTime || record.startTime;
 132             for (var i = 0; i < this._counters.length; ++i)
 133                 this._counters[i].appendSample(time, counters);
 134         }
 135         WebInspector.TimelinePresentationModel.forAllRecords([/** @type {!TimelineAgent.TimelineEvent} */ (event.data)], null, addStatistics.bind(this));
 136         this.scheduleRefresh();
 137     },
 138
 139     draw: function()
 140     {
 141         WebInspector.MemoryStatistics.prototype.draw.call(this);
 142         for (var i = 0; i < this._counterUI.length; i++)
 143             this._drawGraph(this._counterUI[i]);
 144     },
 145
 146     /**
 147      * @param {!WebInspector.CounterUIBase} counterUI
 148      */
 149     _drawGraph: function(counterUI)
 150     {
 151         var canvas = this._canvas;
 152         var ctx = canvas.getContext("2d");
 153         var width = canvas.width;
 154         var height = this._clippedHeight;
 155         var originY = this._originY;
 156         var counter = counterUI.counter;
 157         var values = counter.values;
 158
 159         if (!values.length)
 160             return;
 161
 162         var maxValue;
 163         var minValue;
 164         for (var i = counter._minimumIndex; i <= counter._maximumIndex; i++) {
 165             var value = values[i];
 166             if (minValue === undefined || value < minValue)
 167                 minValue = value;
 168             if (maxValue === undefined || value > maxValue)
 169                 maxValue = value;
 170         }
 171         minValue = minValue || 0;
 172         maxValue = maxValue || 1;
 173
 174         counterUI.setRange(minValue, maxValue);
 175
 176         if (!counterUI.visible)
 177             return;
 178
 179         var yValues = counterUI.graphYValues;
 180         yValues.length = this._counters.length;
 181
 182         var maxYRange = maxValue - minValue;
 183         var yFactor = maxYRange ? height / (maxYRange) : 1;
 184
 185         ctx.save();
 186         ctx.translate(0.5, 0.5);
 187         ctx.beginPath();
 188         var value = values[counter._minimumIndex];
 189         var currentY = Math.round(originY + height - (value - minValue) * yFactor);
 190         ctx.moveTo(0, currentY);
 191         for (var i = counter._minimumIndex; i <= counter._maximumIndex; i++) {
 192              var x = Math.round(counter.x[i]);
 193              ctx.lineTo(x, currentY);
 194              var currentValue = values[i];
 195              if (typeof currentValue !== "undefined")
 196                 value = currentValue;
 197              currentY = Math.round(originY + height - (value - minValue) * yFactor);
 198              ctx.lineTo(x, currentY);
 199              yValues[i] = currentY;
 200         }
 201         ctx.lineTo(width, currentY);
 202         ctx.lineWidth = 1;
 203         ctx.strokeStyle = counterUI.graphColor;
 204         ctx.stroke();
 205         ctx.closePath();
 206         ctx.restore();
 207     },
 208
 209     __proto__: WebInspector.MemoryStatistics.prototype
 210 }
 211