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

   1 /*
   2  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
   4  * Copyright (C) 2009 Google Inc. All rights reserved.
   5  *
   6  * Redistribution and use in source and binary forms, with or without
   7  * modification, are permitted provided that the following conditions
   8  * are met:
   9  *
  10  * 1.  Redistributions of source code must retain the above copyright
  11  *     notice, this list of conditions and the following disclaimer.
  12  * 2.  Redistributions in binary form must reproduce the above copyright
  13  *     notice, this list of conditions and the following disclaimer in the
  14  *     documentation and/or other materials provided with the distribution.
  15  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  16  *     its contributors may be used to endorse or promote products derived
  17  *     from this software without specific prior written permission.
  18  *
  19  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  20  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  21  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  22  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  23  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  24  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  25  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  26  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  28  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  */
  34 WebInspector.TimelineGrid = function()
  35 {
  36     this.element = document.createElement("div");
  37
  38     this._dividersElement = this.element.createChild("div", "resources-dividers");
  39
  40     this._gridHeaderElement = document.createElement("div");
  41     this._gridHeaderElement.id = "timeline-grid-header";
  42     this._eventDividersElement = this._gridHeaderElement.createChild("div", "resources-event-dividers");
  43     this._dividersLabelBarElement = this._gridHeaderElement.createChild("div", "resources-dividers-label-bar");
  44     this.element.appendChild(this._gridHeaderElement);
  45
  46     this._leftCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-left");
  47     this._rightCurtainElement = this.element.createChild("div", "timeline-cpu-curtain-right");
  48 }
  49
  50 /**
  51  * @param {!WebInspector.TimelineGrid.Calculator} calculator
  52  * @param {number} clientWidth
  53  * @return {!{offsets: !Array.<number>, precision: number}}
  54  */
  55 WebInspector.TimelineGrid.calculateDividerOffsets = function(calculator, clientWidth)
  56 {
  57     const minGridSlicePx = 64; // minimal distance between grid lines.
  58     const gridFreeZoneAtLeftPx = 50;
  59
  60     var dividersCount = clientWidth / minGridSlicePx;
  61     var gridSliceTime = calculator.boundarySpan() / dividersCount;
  62     var pixelsPerTime = clientWidth / calculator.boundarySpan();
  63
  64     // Align gridSliceTime to a nearest round value.
  65     // We allow spans that fit into the formula: span = (1|2|5)x10^n,
  66     // e.g.: ...  .1  .2  .5  1  2  5  10  20  50  ...
  67     // After a span has been chosen make grid lines at multiples of the span.
  68
  69     var logGridSliceTime = Math.ceil(Math.log(gridSliceTime) / Math.LN10);
  70     gridSliceTime = Math.pow(10, logGridSliceTime);
  71     if (gridSliceTime * pixelsPerTime >= 5 * minGridSlicePx)
  72         gridSliceTime = gridSliceTime / 5;
  73     if (gridSliceTime * pixelsPerTime >= 2 * minGridSlicePx)
  74         gridSliceTime = gridSliceTime / 2;
  75
  76     var firstDividerTime = Math.ceil((calculator.minimumBoundary() - calculator.zeroTime()) / gridSliceTime) * gridSliceTime + calculator.zeroTime();
  77     var lastDividerTime = calculator.maximumBoundary();
  78     // Add some extra space past the right boundary as the rightmost divider label text
  79     // may be partially shown rather than just pop up when a new rightmost divider gets into the view.
  80     if (calculator.paddingLeft() > 0)
  81         lastDividerTime = lastDividerTime + minGridSlicePx / pixelsPerTime;
  82     dividersCount = Math.ceil((lastDividerTime - firstDividerTime) / gridSliceTime);
  83
  84     var skipLeftmostDividers = calculator.paddingLeft() === 0;
  85
  86     if (!gridSliceTime)
  87         dividersCount = 0;
  88
  89     var offsets = [];
  90     for (var i = 0; i < dividersCount; ++i) {
  91         var left = calculator.computePosition(firstDividerTime + gridSliceTime * i);
  92         if (skipLeftmostDividers && left < gridFreeZoneAtLeftPx)
  93             continue;
  94         offsets.push(firstDividerTime + gridSliceTime * i);
  95     }
  96
  97     return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSliceTime * 1.01) / Math.LN10))};
  98 }
  99
 100 /**
 101  * @param {!Object} canvas
 102  * @param {!WebInspector.TimelineGrid.Calculator} calculator
 103  * @param {?Array.<number>=} dividerOffsets
 104  */
 105 WebInspector.TimelineGrid.drawCanvasGrid = function(canvas, calculator, dividerOffsets)
 106 {
 107     var context = canvas.getContext("2d");
 108     context.save();
 109     var ratio = window.devicePixelRatio;
 110     context.scale(ratio, ratio);
 111     context.translate(0.5, 0.5);
 112     var printDeltas = !!dividerOffsets;
 113     var width = canvas.width / window.devicePixelRatio;
 114     var height = canvas.height / window.devicePixelRatio;
 115     var precision = 0;
 116     if (!dividerOffsets) {
 117         var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calculator, width);
 118         dividerOffsets = dividersData.offsets;
 119         precision = dividersData.precision;
 120     }
 121
 122     context.fillStyle = "#333";
 123     context.strokeStyle = "rgba(0, 0, 0, 0.1)";
 124     context.textBaseline = "hanging";
 125     context.font = (printDeltas ? "italic bold 11px " : " 11px ") + WebInspector.fontFamily();
 126     context.lineWidth = 1;
 127
 128     const minWidthForTitle = 60;
 129     var lastPosition = 0;
 130     var time = 0;
 131     var lastTime = 0;
 132     var paddingRight = 4;
 133     var paddingTop = 3;
 134     for (var i = 0; i < dividerOffsets.length; ++i) {
 135         time = dividerOffsets[i];
 136         var position = calculator.computePosition(time);
 137         context.beginPath();
 138         if (position - lastPosition > minWidthForTitle) {
 139             if (!printDeltas || i !== 0) {
 140                 var text = printDeltas ? calculator.formatTime(calculator.zeroTime() + time - lastTime) : calculator.formatTime(time, precision);
 141                 var textWidth = context.measureText(text).width;
 142                 var textPosition = printDeltas ? (position + lastPosition - textWidth) / 2 : position - textWidth - paddingRight;
 143                 context.fillText(text, textPosition, paddingTop);
 144             }
 145         }
 146         context.moveTo(position, 0);
 147         context.lineTo(position, height);
 148         context.stroke();
 149         lastTime = time;
 150         lastPosition = position;
 151     }
 152     context.restore();
 153 },
 154
 155 WebInspector.TimelineGrid.prototype = {
 156     get dividersElement()
 157     {
 158         return this._dividersElement;
 159     },
 160
 161     get dividersLabelBarElement()
 162     {
 163         return this._dividersLabelBarElement;
 164     },
 165
 166     removeDividers: function()
 167     {
 168         this._dividersElement.removeChildren();
 169         this._dividersLabelBarElement.removeChildren();
 170     },
 171
 172     /**
 173      * @param {!WebInspector.TimelineGrid.Calculator} calculator
 174      * @param {?Array.<number>=} dividerOffsets
 175      * @param {boolean=} printDeltas
 176      * @return {boolean}
 177      */
 178     updateDividers: function(calculator, dividerOffsets, printDeltas)
 179     {
 180         var precision = 0;
 181         if (!dividerOffsets) {
 182             var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calculator, this._dividersElement.clientWidth);
 183             dividerOffsets = dividersData.offsets;
 184             precision = dividersData.precision;
 185             printDeltas = false;
 186         }
 187
 188         var dividersElementClientWidth = this._dividersElement.clientWidth;
 189
 190         // Reuse divider elements and labels.
 191         var divider = this._dividersElement.firstChild;
 192         var dividerLabelBar = this._dividersLabelBarElement.firstChild;
 193
 194         const minWidthForTitle = 60;
 195         var lastPosition = 0;
 196         var lastTime = 0;
 197         for (var i = 0; i < dividerOffsets.length; ++i) {
 198             if (!divider) {
 199                 divider = document.createElement("div");
 200                 divider.className = "resources-divider";
 201                 this._dividersElement.appendChild(divider);
 202
 203                 dividerLabelBar = document.createElement("div");
 204                 dividerLabelBar.className = "resources-divider";
 205                 var label = document.createElement("div");
 206                 label.className = "resources-divider-label";
 207                 dividerLabelBar._labelElement = label;
 208                 dividerLabelBar.appendChild(label);
 209                 this._dividersLabelBarElement.appendChild(dividerLabelBar);
 210             }
 211
 212             var time = dividerOffsets[i];
 213             var position = calculator.computePosition(time);
 214             if (position - lastPosition > minWidthForTitle)
 215                 dividerLabelBar._labelElement.textContent = printDeltas ? calculator.formatTime(time - lastTime) : calculator.formatTime(time, precision);
 216             else
 217                 dividerLabelBar._labelElement.textContent = "";
 218
 219             if (printDeltas)
 220                 dividerLabelBar._labelElement.style.width = Math.ceil(position - lastPosition) + "px";
 221             else
 222                 dividerLabelBar._labelElement.style.removeProperty("width");
 223
 224             lastPosition = position;
 225             lastTime = time;
 226             var percentLeft = 100 * position / dividersElementClientWidth;
 227             divider.style.left = percentLeft + "%";
 228             dividerLabelBar.style.left = percentLeft + "%";
 229
 230             divider = divider.nextSibling;
 231             dividerLabelBar = dividerLabelBar.nextSibling;
 232         }
 233
 234         // Remove extras.
 235         while (divider) {
 236             var nextDivider = divider.nextSibling;
 237             this._dividersElement.removeChild(divider);
 238             divider = nextDivider;
 239         }
 240         while (dividerLabelBar) {
 241             var nextDivider = dividerLabelBar.nextSibling;
 242             this._dividersLabelBarElement.removeChild(dividerLabelBar);
 243             dividerLabelBar = nextDivider;
 244         }
 245         return true;
 246     },
 247
 248     addEventDivider: function(divider)
 249     {
 250         this._eventDividersElement.appendChild(divider);
 251     },
 252
 253     addEventDividers: function(dividers)
 254     {
 255         this._gridHeaderElement.removeChild(this._eventDividersElement);
 256         for (var i = 0; i < dividers.length; ++i) {
 257             if (dividers[i])
 258                 this._eventDividersElement.appendChild(dividers[i]);
 259         }
 260         this._gridHeaderElement.appendChild(this._eventDividersElement);
 261     },
 262
 263     removeEventDividers: function()
 264     {
 265         this._eventDividersElement.removeChildren();
 266     },
 267
 268     hideEventDividers: function()
 269     {
 270         this._eventDividersElement.classList.add("hidden");
 271     },
 272
 273     showEventDividers: function()
 274     {
 275         this._eventDividersElement.classList.remove("hidden");
 276     },
 277
 278     hideDividers: function()
 279     {
 280         this._dividersElement.classList.add("hidden");
 281     },
 282
 283     showDividers: function()
 284     {
 285         this._dividersElement.classList.remove("hidden");
 286     },
 287
 288     hideCurtains: function()
 289     {
 290         this._leftCurtainElement.classList.add("hidden");
 291         this._rightCurtainElement.classList.add("hidden");
 292     },
 293
 294     /**
 295      * @param {number} gapOffset
 296      * @param {number} gapWidth
 297      */
 298     showCurtains: function(gapOffset, gapWidth)
 299     {
 300         this._leftCurtainElement.style.width = gapOffset + "px";
 301         this._leftCurtainElement.classList.remove("hidden");
 302         this._rightCurtainElement.style.left = (gapOffset + gapWidth) + "px";
 303         this._rightCurtainElement.classList.remove("hidden");
 304     },
 305
 306     setScrollAndDividerTop: function(scrollTop, dividersTop)
 307     {
 308         this._dividersLabelBarElement.style.top = scrollTop + "px";
 309         this._eventDividersElement.style.top = scrollTop + "px";
 310         this._leftCurtainElement.style.top = scrollTop + "px";
 311         this._rightCurtainElement.style.top = scrollTop + "px";
 312     }
 313 }
 314
 315 /**
 316  * @interface
 317  */
 318 WebInspector.TimelineGrid.Calculator = function() { }
 319
 320 WebInspector.TimelineGrid.Calculator.prototype = {
 321     /**
 322      * @return {number}
 323      */
 324     paddingLeft: function() { },
 325
 326     /**
 327      * @param {number} time
 328      * @return {number}
 329      */
 330     computePosition: function(time) { },
 331
 332     /**
 333      * @param {number} time
 334      * @param {number=} precision
 335      * @return {string}
 336      */
 337     formatTime: function(time, precision) { },
 338
 339     /** @return {number} */
 340     minimumBoundary: function() { },
 341
 342     /** @return {number} */
 343     zeroTime: function() { },
 344
 345     /** @return {number} */
 346     maximumBoundary: function() { },
 347
 348     /** @return {number} */
 349     boundarySpan: function() { }
 350 }