src/third_party/WebKit/Source/devtools/front_end/TimelineOverviewPane.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.View}
  34  * @param {!WebInspector.TimelineModel} model
  35  */
  36 WebInspector.TimelineOverviewPane = function(model)
  37 {
  38     WebInspector.View.call(this);
  39     this.element.id = "timeline-overview-pane";
  40
  41     this._eventDividers = [];
  42
  43     this._model = model;
  44
  45     this._overviewGrid = new WebInspector.OverviewGrid("timeline");
  46     this.element.appendChild(this._overviewGrid.element);
  47
  48     this._overviewCalculator = new WebInspector.TimelineOverviewCalculator();
  49
  50     model.addEventListener(WebInspector.TimelineModel.Events.RecordAdded, this._onRecordAdded, this);
  51     model.addEventListener(WebInspector.TimelineModel.Events.RecordsCleared, this._reset, this);
  52     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
  53 }
  54
  55 WebInspector.TimelineOverviewPane.Events = {
  56     WindowChanged: "WindowChanged"
  57 };
  58
  59 WebInspector.TimelineOverviewPane.prototype = {
  60     wasShown: function()
  61     {
  62         this._update();
  63     },
  64
  65     onResize: function()
  66     {
  67         this._update();
  68     },
  69
  70     /**
  71      * @param {!WebInspector.TimelineOverviewBase} overviewControl
  72      */
  73     setOverviewControl: function(overviewControl)
  74     {
  75         if (this._overviewControl === overviewControl)
  76             return;
  77
  78         var windowTimes = null;
  79
  80         if (this._overviewControl) {
  81             windowTimes = this._overviewControl.windowTimes(this._overviewGrid.windowLeft(), this._overviewGrid.windowRight());
  82             this._overviewControl.detach();
  83         }
  84         this._overviewControl = overviewControl;
  85         this._overviewControl.show(this._overviewGrid.element);
  86         this._update();
  87         if (windowTimes)
  88             this.setWindowTimes(windowTimes.startTime, windowTimes.endTime);
  89     },
  90
  91     _update: function()
  92     {
  93         delete this._refreshTimeout;
  94
  95         this._overviewCalculator.setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
  96         this._overviewCalculator.setDisplayWindow(0, this._overviewGrid.clientWidth());
  97         this._updateWindow();
  98         if (this._overviewControl)
  99             this._overviewControl.update();
 100         this._overviewGrid.updateDividers(this._overviewCalculator);
 101         this._updateEventDividers();
 102     },
 103
 104     _updateEventDividers: function()
 105     {
 106         var records = this._eventDividers;
 107         this._overviewGrid.removeEventDividers();
 108         var dividers = [];
 109         for (var i = 0; i < records.length; ++i) {
 110             var record = records[i];
 111             var positions = this._overviewCalculator.computeBarGraphPercentages(record);
 112             var dividerPosition = Math.round(positions.start * 10);
 113             if (dividers[dividerPosition])
 114                 continue;
 115             var divider = WebInspector.TimelinePresentationModel.createEventDivider(record.type);
 116             divider.style.left = positions.start + "%";
 117             dividers[dividerPosition] = divider;
 118         }
 119         this._overviewGrid.addEventDividers(dividers);
 120     },
 121
 122     _onRecordAdded: function(event)
 123     {
 124         var record = event.data;
 125         var eventDividers = this._eventDividers;
 126         function addEventDividers(record)
 127         {
 128             if (WebInspector.TimelinePresentationModel.isEventDivider(record))
 129                 eventDividers.push(record);
 130         }
 131         WebInspector.TimelinePresentationModel.forAllRecords([record], addEventDividers);
 132         this._scheduleRefresh();
 133     },
 134
 135     _reset: function()
 136     {
 137         this._overviewCalculator.reset();
 138         this._overviewGrid.reset();
 139         this._overviewGrid.setResizeEnabled(false);
 140         this._eventDividers = [];
 141         this._overviewGrid.updateDividers(this._overviewCalculator);
 142         if (this._overviewControl)
 143             this._overviewControl.reset();
 144         this._update();
 145     },
 146
 147     /**
 148      * @param {!WebInspector.Event} event
 149      */
 150     _onWindowChanged: function(event)
 151     {
 152         if (this._ignoreWindowChangedEvent)
 153             return;
 154         var windowTimes = this._overviewControl.windowTimes(this._overviewGrid.windowLeft(), this._overviewGrid.windowRight());
 155         this._windowStartTime = windowTimes.startTime;
 156         this._windowEndTime = windowTimes.endTime;
 157         this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.WindowChanged, windowTimes);
 158     },
 159
 160     /**
 161      * @param {number} startTime
 162      * @param {number} endTime
 163      */
 164     setWindowTimes: function(startTime, endTime)
 165     {
 166         this._windowStartTime = startTime;
 167         this._windowEndTime = endTime;
 168         this._updateWindow();
 169     },
 170
 171     _updateWindow: function()
 172     {
 173         var windowBoundaries = this._overviewControl.windowBoundaries(this._windowStartTime, this._windowEndTime);
 174         this._ignoreWindowChangedEvent = true;
 175         this._overviewGrid.setWindow(windowBoundaries.left, windowBoundaries.right);
 176         this._overviewGrid.setResizeEnabled(this._model.records.length);
 177         this._ignoreWindowChangedEvent = false;
 178     },
 179
 180     _scheduleRefresh: function()
 181     {
 182         if (this._refreshTimeout)
 183             return;
 184         if (!this.isShowing())
 185             return;
 186         this._refreshTimeout = setTimeout(this._update.bind(this), 300);
 187     },
 188
 189     __proto__: WebInspector.View.prototype
 190 }
 191
 192 /**
 193  * @constructor
 194  * @implements {WebInspector.TimelineGrid.Calculator}
 195  */
 196 WebInspector.TimelineOverviewCalculator = function()
 197 {
 198 }
 199
 200 WebInspector.TimelineOverviewCalculator.prototype = {
 201     /**
 202      * @param {number} time
 203      * @return {number}
 204      */
 205     computePosition: function(time)
 206     {
 207         return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea + this.paddingLeft;
 208     },
 209
 210     /**
 211      * @return {!{start: number, end: number}}
 212      */
 213     computeBarGraphPercentages: function(record)
 214     {
 215         var start = (WebInspector.TimelineModel.startTimeInSeconds(record) - this._minimumBoundary) / this.boundarySpan() * 100;
 216         var end = (WebInspector.TimelineModel.endTimeInSeconds(record) - this._minimumBoundary) / this.boundarySpan() * 100;
 217         return {start: start, end: end};
 218     },
 219
 220     /**
 221      * @param {number=} minimum
 222      * @param {number=} maximum
 223      */
 224     setWindow: function(minimum, maximum)
 225     {
 226         this._minimumBoundary = minimum >= 0 ? minimum : undefined;
 227         this._maximumBoundary = maximum >= 0 ? maximum : undefined;
 228     },
 229
 230     /**
 231      * @param {number} paddingLeft
 232      * @param {number} clientWidth
 233      */
 234     setDisplayWindow: function(paddingLeft, clientWidth)
 235     {
 236         this._workingArea = clientWidth - paddingLeft;
 237         this.paddingLeft = paddingLeft;
 238     },
 239
 240     reset: function()
 241     {
 242         this.setWindow();
 243     },
 244
 245     /**
 246      * @param {number} value
 247      * @param {boolean=} hires
 248      * @return {string}
 249      */
 250     formatTime: function(value, hires)
 251     {
 252         return Number.secondsToString(value, hires);
 253     },
 254
 255     /**
 256      * @return {number}
 257      */
 258     maximumBoundary: function()
 259     {
 260         return this._maximumBoundary;
 261     },
 262
 263     /**
 264      * @return {number}
 265      */
 266     minimumBoundary: function()
 267     {
 268         return this._minimumBoundary;
 269     },
 270
 271     /**
 272      * @return {number}
 273      */
 274     zeroTime: function()
 275     {
 276         return this._minimumBoundary;
 277     },
 278
 279     /**
 280      * @return {number}
 281      */
 282     boundarySpan: function()
 283     {
 284         return this._maximumBoundary - this._minimumBoundary;
 285     }
 286 }
 287
 288 /**
 289  * @constructor
 290  * @extends {WebInspector.View}
 291  * @param {!WebInspector.TimelineModel} model
 292  */
 293 WebInspector.TimelineOverviewBase = function(model)
 294 {
 295     WebInspector.View.call(this);
 296
 297     this._model = model;
 298     this._canvas = this.element.createChild("canvas", "fill");
 299     this._context = this._canvas.getContext("2d");
 300 }
 301
 302 WebInspector.TimelineOverviewBase.prototype = {
 303     update: function() { },
 304     reset: function() { },
 305
 306     /**
 307      * @param {number} windowLeft
 308      * @param {number} windowRight
 309      * @return {!{startTime: number, endTime: number}}
 310      */
 311     windowTimes: function(windowLeft, windowRight)
 312     {
 313         var absoluteMin = this._model.minimumRecordTime();
 314         var timeSpan = this._model.maximumRecordTime() - absoluteMin;
 315         return {
 316             startTime: absoluteMin + timeSpan * windowLeft,
 317             endTime: absoluteMin + timeSpan * windowRight
 318         };
 319     },
 320
 321     /**
 322      * @param {number} startTime
 323      * @param {number} endTime
 324      * @return {!{left: number, right: number}}
 325      */
 326     windowBoundaries: function(startTime, endTime)
 327     {
 328         var absoluteMin = this._model.minimumRecordTime();
 329         var timeSpan = this._model.maximumRecordTime() - absoluteMin;
 330         var haveRecords = absoluteMin >= 0;
 331         return {
 332             left: haveRecords && startTime ? Math.min((startTime - absoluteMin) / timeSpan, 1) : 0,
 333             right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) / timeSpan : 1
 334         }
 335     },
 336
 337     resetCanvas: function()
 338     {
 339         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
 340         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
 341     },
 342
 343     __proto__: WebInspector.View.prototype
 344 }