src/third_party/WebKit/Source/devtools/front_end/timeline/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.VBox}
  34  * @param {!WebInspector.TimelineModel} model
  35  */
  36 WebInspector.TimelineOverviewPane = function(model)
  37 {
  38     WebInspector.VBox.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.RecordsCleared, this._reset, this);
  51     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
  52     this._overviewControls = [];
  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 {!Array.<!WebInspector.TimelineOverview>} overviewControls
  72      */
  73     setOverviewControls: function(overviewControls)
  74     {
  75         for (var i = 0; i < this._overviewControls.length; ++i) {
  76             var overviewControl = this._overviewControls[i];
  77             overviewControl.detach();
  78             overviewControl.dispose();
  79         }
  80
  81         for (var i = 0; i < overviewControls.length; ++i) {
  82             overviewControls[i].setOverviewGrid(this._overviewGrid);
  83             overviewControls[i].show(this._overviewGrid.element);
  84         }
  85         this._overviewControls = overviewControls;
  86         this.update();
  87     },
  88
  89     update: function()
  90     {
  91         delete this._refreshTimeout;
  92
  93         this._overviewCalculator._setWindow(this._model.minimumRecordTime(), this._model.maximumRecordTime());
  94         this._overviewCalculator._setDisplayWindow(0, this._overviewGrid.clientWidth());
  95         for (var i = 0; i < this._overviewControls.length; ++i)
  96             this._overviewControls[i].update();
  97         this._overviewGrid.updateDividers(this._overviewCalculator);
  98         this._updateEventDividers();
  99         this._updateWindow();
 100     },
 101
 102     _updateEventDividers: function()
 103     {
 104         var records = this._eventDividers;
 105         this._overviewGrid.removeEventDividers();
 106         var dividers = [];
 107         for (var i = 0; i < records.length; ++i) {
 108             var record = records[i];
 109             var positions = this._overviewCalculator.computeBarGraphPercentages(record);
 110             var dividerPosition = Math.round(positions.start * 10);
 111             if (dividers[dividerPosition])
 112                 continue;
 113             var divider = WebInspector.TimelineUIUtils.createEventDivider(record.type());
 114             divider.style.left = positions.start + "%";
 115             dividers[dividerPosition] = divider;
 116         }
 117         this._overviewGrid.addEventDividers(dividers);
 118     },
 119
 120     /**
 121      * @param {!WebInspector.TimelineModel.Record} record
 122      */
 123     addRecord: function(record)
 124     {
 125         var eventDividers = this._eventDividers;
 126         function addEventDividers(record)
 127         {
 128             if (WebInspector.TimelineUIUtils.isEventDivider(record))
 129                 eventDividers.push(record);
 130         }
 131         WebInspector.TimelineModel.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         for (var i = 0; i < this._overviewControls.length; ++i)
 143             this._overviewControls[i].reset();
 144         this.update();
 145     },
 146
 147     /**
 148      * @param {!WebInspector.Event} event
 149      */
 150     _onWindowChanged: function(event)
 151     {
 152         if (this._muteOnWindowChanged)
 153             return;
 154         // Always use first control as a time converter.
 155         if (!this._overviewControls.length)
 156             return;
 157         var windowTimes = this._overviewControls[0].windowTimes(this._overviewGrid.windowLeft(), this._overviewGrid.windowRight());
 158         this._windowStartTime = windowTimes.startTime;
 159         this._windowEndTime = windowTimes.endTime;
 160         this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.WindowChanged, windowTimes);
 161     },
 162
 163     /**
 164      * @param {number} startTime
 165      * @param {number} endTime
 166      */
 167     requestWindowTimes: function(startTime, endTime)
 168     {
 169         if (startTime === this._windowStartTime && endTime === this._windowEndTime)
 170             return;
 171         this._windowStartTime = startTime;
 172         this._windowEndTime = endTime;
 173         this._updateWindow();
 174         this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.WindowChanged, { startTime: startTime, endTime: endTime });
 175     },
 176
 177     _updateWindow: function()
 178     {
 179         if (!this._overviewControls.length)
 180             return;
 181         var windowBoundaries = this._overviewControls[0].windowBoundaries(this._windowStartTime, this._windowEndTime);
 182         this._muteOnWindowChanged = true;
 183         this._overviewGrid.setWindow(windowBoundaries.left, windowBoundaries.right);
 184         this._overviewGrid.setResizeEnabled(!!this._model.records().length);
 185         this._muteOnWindowChanged = false;
 186     },
 187
 188     _scheduleRefresh: function()
 189     {
 190         if (this._refreshTimeout)
 191             return;
 192         if (!this.isShowing())
 193             return;
 194         this._refreshTimeout = setTimeout(this.update.bind(this), 300);
 195     },
 196
 197     __proto__: WebInspector.VBox.prototype
 198 }
 199
 200 /**
 201  * @constructor
 202  * @implements {WebInspector.TimelineGrid.Calculator}
 203  */
 204 WebInspector.TimelineOverviewCalculator = function()
 205 {
 206 }
 207
 208 WebInspector.TimelineOverviewCalculator.prototype = {
 209     /**
 210      * @return {number}
 211      */
 212     paddingLeft: function()
 213     {
 214         return this._paddingLeft;
 215     },
 216
 217     /**
 218      * @param {number} time
 219      * @return {number}
 220      */
 221     computePosition: function(time)
 222     {
 223         return (time - this._minimumBoundary) / this.boundarySpan() * this._workingArea + this._paddingLeft;
 224     },
 225
 226     /**
 227      * @return {!{start: number, end: number}}
 228      */
 229     computeBarGraphPercentages: function(record)
 230     {
 231         var start = (record.startTime() - this._minimumBoundary) / this.boundarySpan() * 100;
 232         var end = (record.endTime() - this._minimumBoundary) / this.boundarySpan() * 100;
 233         return {start: start, end: end};
 234     },
 235
 236     /**
 237      * @param {number=} minimumRecordTime
 238      * @param {number=} maximumRecordTime
 239      */
 240     _setWindow: function(minimumRecordTime, maximumRecordTime)
 241     {
 242         this._minimumBoundary = minimumRecordTime;
 243         this._maximumBoundary = maximumRecordTime;
 244     },
 245
 246     /**
 247      * @param {number} paddingLeft
 248      * @param {number} clientWidth
 249      */
 250     _setDisplayWindow: function(paddingLeft, clientWidth)
 251     {
 252         this._workingArea = clientWidth - paddingLeft;
 253         this._paddingLeft = paddingLeft;
 254     },
 255
 256     reset: function()
 257     {
 258         this._setWindow(0, 1000);
 259     },
 260
 261     /**
 262      * @param {number} value
 263      * @param {number=} precision
 264      * @return {string}
 265      */
 266     formatTime: function(value, precision)
 267     {
 268         return Number.preciseMillisToString(value - this.zeroTime(), precision);
 269     },
 270
 271     /**
 272      * @return {number}
 273      */
 274     maximumBoundary: function()
 275     {
 276         return this._maximumBoundary;
 277     },
 278
 279     /**
 280      * @return {number}
 281      */
 282     minimumBoundary: function()
 283     {
 284         return this._minimumBoundary;
 285     },
 286
 287     /**
 288      * @return {number}
 289      */
 290     zeroTime: function()
 291     {
 292         return this._minimumBoundary;
 293     },
 294
 295     /**
 296      * @return {number}
 297      */
 298     boundarySpan: function()
 299     {
 300         return this._maximumBoundary - this._minimumBoundary;
 301     }
 302 }
 303
 304 /**
 305  * @interface
 306  */
 307 WebInspector.TimelineOverview = function(model)
 308 {
 309 }
 310
 311 WebInspector.TimelineOverview.prototype = {
 312     /**
 313      * @param {?Element} parentElement
 314      * @param {!Element=} insertBefore
 315      */
 316     show: function(parentElement, insertBefore) { },
 317
 318     /**
 319      * @param {!WebInspector.OverviewGrid} grid
 320      */
 321     setOverviewGrid: function(grid) { },
 322
 323     update: function() { },
 324
 325     dispose: function() { },
 326
 327     reset: function() { },
 328
 329     /**
 330      * @param {number} windowLeft
 331      * @param {number} windowRight
 332      * @return {!{startTime: number, endTime: number}}
 333      */
 334     windowTimes: function(windowLeft, windowRight) { },
 335
 336     /**
 337      * @param {number} startTime
 338      * @param {number} endTime
 339      * @return {!{left: number, right: number}}
 340      */
 341     windowBoundaries: function(startTime, endTime) { },
 342 }
 343
 344 /**
 345  * @constructor
 346  * @extends {WebInspector.VBox}
 347  * @implements {WebInspector.TimelineOverview}
 348  * @param {!WebInspector.TimelineModel} model
 349  */
 350 WebInspector.TimelineOverviewBase = function(model)
 351 {
 352     WebInspector.VBox.call(this);
 353
 354     this._model = model;
 355     this._canvas = this.element.createChild("canvas", "fill");
 356     this._context = this._canvas.getContext("2d");
 357 }
 358
 359 WebInspector.TimelineOverviewBase.prototype = {
 360     /**
 361      * @param {!WebInspector.OverviewGrid} grid
 362      */
 363     setOverviewGrid: function(grid)
 364     {
 365     },
 366
 367     update: function()
 368     {
 369         this.resetCanvas();
 370     },
 371
 372     dispose: function()
 373     {
 374     },
 375
 376     reset: function()
 377     {
 378     },
 379
 380     timelineStarted: function()
 381     {
 382     },
 383
 384     timelineStopped: function()
 385     {
 386     },
 387
 388     /**
 389      * @param {number} windowLeft
 390      * @param {number} windowRight
 391      * @return {!{startTime: number, endTime: number}}
 392      */
 393     windowTimes: function(windowLeft, windowRight)
 394     {
 395         var absoluteMin = this._model.minimumRecordTime();
 396         var timeSpan = this._model.maximumRecordTime() - absoluteMin;
 397         return {
 398             startTime: absoluteMin + timeSpan * windowLeft,
 399             endTime: absoluteMin + timeSpan * windowRight
 400         };
 401     },
 402
 403     /**
 404      * @param {number} startTime
 405      * @param {number} endTime
 406      * @return {!{left: number, right: number}}
 407      */
 408     windowBoundaries: function(startTime, endTime)
 409     {
 410         var absoluteMin = this._model.minimumRecordTime();
 411         var timeSpan = this._model.maximumRecordTime() - absoluteMin;
 412         var haveRecords = absoluteMin >= 0;
 413         return {
 414             left: haveRecords && startTime ? Math.min((startTime - absoluteMin) / timeSpan, 1) : 0,
 415             right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) / timeSpan : 1
 416         }
 417     },
 418
 419     resetCanvas: function()
 420     {
 421         this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
 422         this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
 423     },
 424
 425     __proto__: WebInspector.VBox.prototype
 426 }