| // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| |
| /** |
| * @fileoverview Renders an array of slices into the provided div, |
| * using a child canvas element. Uses a FastRectRenderer to draw only |
| * the visible slices. |
| */ |
| cr.define('tracing', function() { |
| |
| var pallette = tracing.getPallette(); |
| var highlightIdBoost = tracing.getPalletteHighlightIdBoost(); |
| |
| // TODO(jrg): possibly obsoleted with the elided string cache. |
| // Consider removing. |
| var textWidthMap = { }; |
| function quickMeasureText(ctx, text) { |
| var w = textWidthMap[text]; |
| if (!w) { |
| w = ctx.measureText(text).width; |
| textWidthMap[text] = w; |
| } |
| return w; |
| } |
| |
| /** |
| * Cache for elided strings. |
| * Moved from the ElidedTitleCache protoype to a "global" for speed |
| * (variable reference is 100x faster). |
| * key: String we wish to elide. |
| * value: Another dict whose key is width |
| * and value is an ElidedStringWidthPair. |
| */ |
| var elidedTitleCacheDict = {}; |
| |
| /** |
| * A generic track that contains other tracks as its children. |
| * @constructor |
| */ |
| var TimelineContainerTrack = cr.ui.define('div'); |
| TimelineContainerTrack.prototype = { |
| __proto__: HTMLDivElement.prototype, |
| |
| decorate: function() { |
| this.tracks_ = []; |
| }, |
| |
| detach: function() { |
| for (var i = 0; i < this.tracks_.length; i++) |
| this.tracks_[i].detach(); |
| }, |
| |
| get viewport() { |
| return this.viewport_; |
| }, |
| |
| set viewport(v) { |
| this.viewport_ = v; |
| for (var i = 0; i < this.tracks_.length; i++) |
| this.tracks_[i].viewport = v; |
| this.updateChildTracks_(); |
| }, |
| |
| get firstCanvas() { |
| if (this.tracks_.length) |
| return this.tracks_[0].firstCanvas; |
| return undefined; |
| }, |
| |
| /** |
| * Adds items intersecting a point to a selection. |
| * @param {number} wX X location to search at, in worldspace. |
| * @param {number} wY Y location to search at, in offset space. |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| * @return {boolean} true if a slice was found, otherwise false. |
| */ |
| addIntersectingItemsToSelection: function(wX, wY, selection) { |
| for (var i = 0; i < this.tracks_.length; i++) { |
| var trackClientRect = this.tracks_[i].getBoundingClientRect(); |
| if (wY >= trackClientRect.top && wY < trackClientRect.bottom) |
| this.tracks_[i].addIntersectingItemsToSelection(wX, wY, selection); |
| } |
| return false; |
| }, |
| |
| /** |
| * Adds items intersecting the given range to a selection. |
| * @param {number} loWX Lower X bound of the interval to search, in |
| * worldspace. |
| * @param {number} hiWX Upper X bound of the interval to search, in |
| * worldspace. |
| * @param {number} loY Lower Y bound of the interval to search, in |
| * offset space. |
| * @param {number} hiY Upper Y bound of the interval to search, in |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| */ |
| addIntersectingItemsInRangeToSelection: function( |
| loWX, hiWX, loY, hiY, selection) { |
| for (var i = 0; i < this.tracks_.length; i++) { |
| var trackClientRect = this.tracks_[i].getBoundingClientRect(); |
| var a = Math.max(loY, trackClientRect.top); |
| var b = Math.min(hiY, trackClientRect.bottom); |
| if (a <= b) |
| this.tracks_[i].addIntersectingItemsInRangeToSelection( |
| loWX, hiWX, loY, hiY, selection); |
| } |
| }, |
| |
| addAllObjectsMatchingFilterToSelection: function(filter, selection) { |
| for (var i = 0; i < this.tracks_.length; i++) |
| this.tracks_[i].addAllObjectsMatchingFilterToSelection( |
| filter, selection); |
| } |
| }; |
| |
| function addControlButtonElements(el, canCollapse) { |
| var closeEl = document.createElement('div'); |
| closeEl.classList.add('timeline-track-button'); |
| closeEl.classList.add('timeline-track-close-button'); |
| closeEl.textContent = String.fromCharCode(215); // × |
| closeEl.addEventListener('click', function() { |
| el.style.display = 'None'; |
| }); |
| el.appendChild(closeEl); |
| |
| if (canCollapse) { |
| var collapseEl = document.createElement('div'); |
| collapseEl.classList.add('timeline-track-button'); |
| collapseEl.classList.add('timeline-track-collapse-button'); |
| var minus = '\u2212'; // minus sign; |
| var plus = '\u002b'; // plus sign; |
| collapseEl.textContent = minus; |
| var collapsed = false; |
| collapseEl.addEventListener('click', function() { |
| collapsed = !collapsed; |
| el.collapsedDidChange(collapsed); |
| collapseEl.textContent = collapsed ? plus : minus; |
| }); |
| el.appendChild(collapseEl); |
| } |
| } |
| |
| /** |
| * Visualizes a TimelineThread using a series of of TimelineSliceTracks. |
| * @constructor |
| */ |
| var TimelineThreadTrack = cr.ui.define(TimelineContainerTrack); |
| TimelineThreadTrack.prototype = { |
| __proto__: TimelineContainerTrack.prototype, |
| |
| decorate: function() { |
| this.classList.add('timeline-thread-track'); |
| }, |
| |
| get thread() { |
| return this.thread_; |
| }, |
| |
| set thread(thread) { |
| this.thread_ = thread; |
| this.updateChildTracks_(); |
| }, |
| |
| get tooltip() { |
| return this.tooltip_; |
| }, |
| |
| set tooltip(value) { |
| this.tooltip_ = value; |
| this.updateChildTracks_(); |
| }, |
| |
| get heading() { |
| return this.heading_; |
| }, |
| |
| set heading(h) { |
| this.heading_ = h; |
| this.updateChildTracks_(); |
| }, |
| |
| get headingWidth() { |
| return this.headingWidth_; |
| }, |
| |
| set headingWidth(width) { |
| this.headingWidth_ = width; |
| this.updateChildTracks_(); |
| }, |
| |
| addTrack_: function(slices) { |
| var track = new TimelineSliceTrack(); |
| track.heading = ''; |
| track.slices = slices; |
| track.headingWidth = this.headingWidth_; |
| track.viewport = this.viewport_; |
| |
| this.tracks_.push(track); |
| this.appendChild(track); |
| return track; |
| }, |
| |
| updateChildTracks_: function() { |
| this.detach(); |
| this.textContent = ''; |
| this.tracks_ = []; |
| if (this.thread_) { |
| if (this.thread_.cpuSlices) { |
| var track = this.addTrack_(this.thread_.cpuSlices); |
| track.height = '4px'; |
| track.decorateHit = function(hit) { |
| hit.thread = this.thread_; |
| } |
| } |
| |
| if (this.thread_.asyncSlices.length) { |
| var subRows = this.thread_.asyncSlices.subRows; |
| for (var srI = 0; srI < subRows.length; srI++) { |
| var track = this.addTrack_(subRows[srI]); |
| track.decorateHit = function(hit) { |
| // TODO(simonjam): figure out how to associate subSlice hits back |
| // to their parent slice. |
| } |
| track.asyncStyle = true; |
| } |
| } |
| |
| for (var srI = 0; srI < this.thread_.subRows.length; srI++) { |
| var track = this.addTrack_(this.thread_.subRows[srI]); |
| track.decorateHit = function(hit) { |
| hit.thread = this.thread_; |
| } |
| } |
| |
| if (this.tracks_.length > 0) { |
| if (this.thread_.cpuSlices) { |
| this.tracks_[1].heading = this.heading_; |
| this.tracks_[1].tooltip = this.tooltip_; |
| } else { |
| this.tracks_[0].heading = this.heading_; |
| this.tracks_[0].tooltip = this.tooltip_; |
| } |
| } |
| } |
| addControlButtonElements(this, this.tracks_.length >= 4); |
| }, |
| |
| collapsedDidChange: function(collapsed) { |
| if (collapsed) { |
| var h = parseInt(this.tracks_[0].height); |
| for (var i = 0; i < this.tracks_.length; ++i) { |
| if (h > 2) { |
| this.tracks_[i].height = Math.floor(h) + 'px'; |
| } else { |
| this.tracks_[i].style.display = 'None'; |
| } |
| h = h * 0.5; |
| } |
| } else { |
| for (var i = 0; i < this.tracks_.length; ++i) { |
| this.tracks_[i].height = this.tracks_[0].height; |
| this.tracks_[i].style.display = ''; |
| } |
| } |
| } |
| }; |
| |
| /** |
| * Visualizes a TimelineCpu using a series of of TimelineSliceTracks. |
| * @constructor |
| */ |
| var TimelineCpuTrack = cr.ui.define(TimelineContainerTrack); |
| TimelineCpuTrack.prototype = { |
| __proto__: TimelineContainerTrack.prototype, |
| |
| decorate: function() { |
| this.classList.add('timeline-thread-track'); |
| }, |
| |
| get cpu() { |
| return this.cpu_; |
| }, |
| |
| set cpu(cpu) { |
| this.cpu_ = cpu; |
| this.updateChildTracks_(); |
| }, |
| |
| get tooltip() { |
| return this.tooltip_; |
| }, |
| |
| set tooltip(value) { |
| this.tooltip_ = value; |
| this.updateChildTracks_(); |
| }, |
| |
| get heading() { |
| return this.heading_; |
| }, |
| |
| set heading(h) { |
| this.heading_ = h; |
| this.updateChildTracks_(); |
| }, |
| |
| get headingWidth() { |
| return this.headingWidth_; |
| }, |
| |
| set headingWidth(width) { |
| this.headingWidth_ = width; |
| this.updateChildTracks_(); |
| }, |
| |
| updateChildTracks_: function() { |
| this.detach(); |
| this.textContent = ''; |
| this.tracks_ = []; |
| if (this.cpu_) { |
| var track = new TimelineSliceTrack(); |
| track.slices = this.cpu_.slices; |
| track.headingWidth = this.headingWidth_; |
| track.viewport = this.viewport_; |
| |
| this.tracks_.push(track); |
| this.appendChild(track); |
| |
| this.tracks_[0].heading = this.heading_; |
| this.tracks_[0].tooltip = this.tooltip_; |
| } |
| addControlButtonElements(this, false); |
| } |
| }; |
| |
| /** |
| * A canvas-based track constructed. Provides the basic heading and |
| * invalidation-managment infrastructure. Subclasses must implement drawing |
| * and picking code. |
| * @constructor |
| * @extends {HTMLDivElement} |
| */ |
| var CanvasBasedTrack = cr.ui.define('div'); |
| |
| CanvasBasedTrack.prototype = { |
| __proto__: HTMLDivElement.prototype, |
| |
| decorate: function() { |
| this.className = 'timeline-canvas-based-track'; |
| this.slices_ = null; |
| |
| this.headingDiv_ = document.createElement('div'); |
| this.headingDiv_.className = 'timeline-canvas-based-track-title'; |
| this.headingDiv_.onselectstart = function() { return false; }; |
| this.appendChild(this.headingDiv_); |
| |
| this.canvasContainer_ = document.createElement('div'); |
| this.canvasContainer_.className = |
| 'timeline-canvas-based-track-canvas-container'; |
| this.appendChild(this.canvasContainer_); |
| this.canvas_ = document.createElement('canvas'); |
| this.canvas_.className = 'timeline-canvas-based-track-canvas'; |
| this.canvasContainer_.appendChild(this.canvas_); |
| |
| this.ctx_ = this.canvas_.getContext('2d'); |
| }, |
| |
| detach: function() { |
| if (this.viewport_) |
| this.viewport_.removeEventListener('change', |
| this.viewportChangeBoundToThis_); |
| }, |
| |
| set headingWidth(width) { |
| this.headingDiv_.style.width = width; |
| }, |
| |
| get heading() { |
| return this.headingDiv_.textContent; |
| }, |
| |
| set heading(text) { |
| this.headingDiv_.textContent = text; |
| }, |
| |
| set tooltip(text) { |
| this.headingDiv_.title = text; |
| }, |
| |
| get viewport() { |
| return this.viewport_; |
| }, |
| |
| set viewport(v) { |
| this.viewport_ = v; |
| if (this.viewport_) |
| this.viewport_.removeEventListener('change', |
| this.viewportChangeBoundToThis_); |
| this.viewport_ = v; |
| if (this.viewport_) { |
| this.viewportChangeBoundToThis_ = this.viewportChange_.bind(this); |
| this.viewport_.addEventListener('change', |
| this.viewportChangeBoundToThis_); |
| } |
| this.invalidate(); |
| }, |
| |
| viewportChange_: function() { |
| this.invalidate(); |
| }, |
| |
| invalidate: function() { |
| if (this.rafPending_) |
| return; |
| webkitRequestAnimationFrame(function() { |
| this.rafPending_ = false; |
| if (!this.viewport_) |
| return; |
| |
| var style = window.getComputedStyle(this.canvasContainer_); |
| var style_width = parseInt(style.width); |
| var style_height = parseInt(style.height); |
| if (this.canvas_.width != style_width) |
| this.canvas_.width = style_width; |
| if (this.canvas_.height != style_height) |
| this.canvas_.height = style_height; |
| |
| this.redraw(); |
| }.bind(this), this); |
| this.rafPending_ = true; |
| }, |
| |
| get firstCanvas() { |
| return this.canvas_; |
| } |
| |
| }; |
| |
| /** |
| * A pair representing an elided string and world-coordinate width |
| * to draw it. |
| * @constructor |
| */ |
| function ElidedStringWidthPair(string, width) { |
| this.string = string; |
| this.width = width; |
| } |
| |
| /** |
| * A cache for elided strings. |
| * @constructor |
| */ |
| function ElidedTitleCache() { |
| } |
| |
| ElidedTitleCache.prototype = { |
| /** |
| * Return elided text. |
| * @param {track} A timeline slice track or other object that defines |
| * functions labelWidth() and labelWidthWorld(). |
| * @param {pixWidth} Pixel width. |
| * @param {title} Original title text. |
| * @param {width} Drawn width in world coords. |
| * @param {sliceDuration} Where the title must fit (in world coords). |
| * @return {ElidedStringWidthPair} Elided string and width. |
| */ |
| get: function(track, pixWidth, title, width, sliceDuration) { |
| var elidedDict = elidedTitleCacheDict[title]; |
| if (!elidedDict) { |
| elidedDict = {}; |
| elidedTitleCacheDict[title] = elidedDict; |
| } |
| var elidedDictForPixWidth = elidedDict[pixWidth]; |
| if (!elidedDictForPixWidth) { |
| elidedDict[pixWidth] = {}; |
| elidedDictForPixWidth = elidedDict[pixWidth]; |
| } |
| var stringWidthPair = elidedDictForPixWidth[sliceDuration]; |
| if (stringWidthPair === undefined) { |
| var newtitle = title; |
| var elided = false; |
| while (track.labelWidthWorld(newtitle, pixWidth) > sliceDuration) { |
| newtitle = newtitle.substring(0, newtitle.length * 0.75); |
| elided = true; |
| } |
| if (elided && newtitle.length > 3) |
| newtitle = newtitle.substring(0, newtitle.length - 3) + '...'; |
| stringWidthPair = new ElidedStringWidthPair( |
| newtitle, |
| track.labelWidth(newtitle)); |
| elidedDictForPixWidth[sliceDuration] = stringWidthPair; |
| } |
| return stringWidthPair; |
| } |
| }; |
| |
| /** |
| * A track that displays an array of TimelineSlice objects. |
| * @constructor |
| * @extends {CanvasBasedTrack} |
| */ |
| |
| var TimelineSliceTrack = cr.ui.define(CanvasBasedTrack); |
| |
| TimelineSliceTrack.prototype = { |
| |
| __proto__: CanvasBasedTrack.prototype, |
| |
| /** |
| * Should we elide text on trace labels? |
| * Without eliding, text that is too wide isn't drawn at all. |
| * Disable if you feel this causes a performance problem. |
| * This is a default value that can be overridden in tracks for testing. |
| * @const |
| */ |
| SHOULD_ELIDE_TEXT: true, |
| |
| decorate: function() { |
| this.classList.add('timeline-slice-track'); |
| this.elidedTitleCache = new ElidedTitleCache(); |
| this.asyncStyle_ = false; |
| }, |
| |
| /** |
| * Called by all the addToSelection functions on the created selection |
| * hit objects. Override this function on parent classes to add |
| * context-specific information to the hit. |
| */ |
| decorateHit: function(hit) { |
| }, |
| |
| get asyncStyle() { |
| return this.asyncStyle_; |
| }, |
| |
| set asyncStyle(v) { |
| this.asyncStyle_ = !!v; |
| this.invalidate(); |
| }, |
| |
| get slices() { |
| return this.slices_; |
| }, |
| |
| set slices(slices) { |
| this.slices_ = slices; |
| this.invalidate(); |
| }, |
| |
| get height() { |
| return window.getComputedStyle(this).height; |
| }, |
| |
| set height(height) { |
| this.style.height = height; |
| this.invalidate(); |
| }, |
| |
| labelWidth: function(title) { |
| return quickMeasureText(this.ctx_, title) + 2; |
| }, |
| |
| labelWidthWorld: function(title, pixWidth) { |
| return this.labelWidth(title) * pixWidth; |
| }, |
| |
| redraw: function() { |
| var ctx = this.ctx_; |
| var canvasW = this.canvas_.width; |
| var canvasH = this.canvas_.height; |
| |
| ctx.clearRect(0, 0, canvasW, canvasH); |
| |
| // Culling parameters. |
| var vp = this.viewport_; |
| var pixWidth = vp.xViewVectorToWorld(1); |
| var viewLWorld = vp.xViewToWorld(0); |
| var viewRWorld = vp.xViewToWorld(canvasW); |
| |
| // Draw grid without a transform because the scale |
| // affects line width. |
| if (vp.gridEnabled) { |
| var x = vp.gridTimebase; |
| ctx.beginPath(); |
| while (x < viewRWorld) { |
| if (x >= viewLWorld) { |
| // Do conversion to viewspace here rather than on |
| // x to avoid precision issues. |
| var vx = vp.xWorldToView(x); |
| ctx.moveTo(vx, 0); |
| ctx.lineTo(vx, canvasH); |
| } |
| x += vp.gridStep; |
| } |
| ctx.strokeStyle = 'rgba(255,0,0,0.25)'; |
| ctx.stroke(); |
| } |
| |
| // Begin rendering in world space. |
| ctx.save(); |
| vp.applyTransformToCanavs(ctx); |
| |
| // Slices. |
| if (this.asyncStyle_) |
| ctx.globalAlpha = 0.25; |
| var tr = new tracing.FastRectRenderer(ctx, viewLWorld, 2 * pixWidth, |
| 2 * pixWidth, viewRWorld, pallette); |
| tr.setYandH(0, canvasH); |
| var slices = this.slices_; |
| for (var i = 0; i < slices.length; ++i) { |
| var slice = slices[i]; |
| var x = slice.start; |
| // Less than 0.001 causes short events to disappear when zoomed in. |
| var w = Math.max(slice.duration, 0.001); |
| var colorId = slice.selected ? |
| slice.colorId + highlightIdBoost : |
| slice.colorId; |
| |
| if (w < pixWidth) |
| w = pixWidth; |
| if (slice.duration > 0) { |
| tr.fillRect(x, w, colorId); |
| } else { |
| // Instant: draw a triangle. If zoomed too far, collapse |
| // into the FastRectRenderer. |
| if (pixWidth > 0.001) { |
| tr.fillRect(x, pixWidth, colorId); |
| } else { |
| ctx.fillStyle = pallette[colorId]; |
| ctx.beginPath(); |
| ctx.moveTo(x - (4 * pixWidth), canvasH); |
| ctx.lineTo(x, 0); |
| ctx.lineTo(x + (4 * pixWidth), canvasH); |
| ctx.closePath(); |
| ctx.fill(); |
| } |
| } |
| } |
| tr.flush(); |
| ctx.restore(); |
| |
| // Labels. |
| if (canvasH > 8) { |
| ctx.textAlign = 'center'; |
| ctx.textBaseline = 'top'; |
| ctx.font = '10px sans-serif'; |
| ctx.strokeStyle = 'rgb(0,0,0)'; |
| ctx.fillStyle = 'rgb(0,0,0)'; |
| // Don't render text until until it is 20px wide |
| var quickDiscardThresshold = pixWidth * 20; |
| var shouldElide = this.SHOULD_ELIDE_TEXT; |
| for (var i = 0; i < slices.length; ++i) { |
| var slice = slices[i]; |
| if (slice.duration > quickDiscardThresshold) { |
| var title = slice.title; |
| if (slice.didNotFinish) { |
| title += ' (Did Not Finish)'; |
| } |
| var drawnTitle = title; |
| var drawnWidth = this.labelWidth(drawnTitle); |
| if (shouldElide && |
| this.labelWidthWorld(drawnTitle, pixWidth) > slice.duration) { |
| var elidedValues = this.elidedTitleCache.get( |
| this, pixWidth, |
| drawnTitle, drawnWidth, |
| slice.duration); |
| drawnTitle = elidedValues.string; |
| drawnWidth = elidedValues.width; |
| } |
| if (drawnWidth * pixWidth < slice.duration) { |
| var cX = vp.xWorldToView(slice.start + 0.5 * slice.duration); |
| ctx.fillText(drawnTitle, cX, 2.5, drawnWidth); |
| } |
| } |
| } |
| } |
| }, |
| |
| /** |
| * Finds slices intersecting the given interval. |
| * @param {number} wX X location to search at, in worldspace. |
| * @param {number} wY Y location to search at, in offset space. |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| * @return {boolean} true if a slice was found, otherwise false. |
| */ |
| addIntersectingItemsToSelection: function(wX, wY, selection) { |
| var clientRect = this.getBoundingClientRect(); |
| if (wY < clientRect.top || wY >= clientRect.bottom) |
| return false; |
| var x = tracing.findLowIndexInSortedIntervals(this.slices_, |
| function(x) { return x.start; }, |
| function(x) { return x.duration; }, |
| wX); |
| if (x >= 0 && x < this.slices_.length) { |
| var hit = selection.addSlice(this, this.slices_[x]); |
| this.decorateHit(hit); |
| return true; |
| } |
| return false; |
| }, |
| |
| /** |
| * Adds items intersecting the given range to a selection. |
| * @param {number} loWX Lower X bound of the interval to search, in |
| * worldspace. |
| * @param {number} hiWX Upper X bound of the interval to search, in |
| * worldspace. |
| * @param {number} loY Lower Y bound of the interval to search, in |
| * offset space. |
| * @param {number} hiY Upper Y bound of the interval to search, in |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| */ |
| addIntersectingItemsInRangeToSelection: function( |
| loWX, hiWX, loY, hiY, selection) { |
| var clientRect = this.getBoundingClientRect(); |
| var a = Math.max(loY, clientRect.top); |
| var b = Math.min(hiY, clientRect.bottom); |
| if (a > b) |
| return; |
| |
| var that = this; |
| function onPickHit(slice) { |
| var hit = selection.addSlice(that, slice); |
| that.decorateHit(hit); |
| } |
| tracing.iterateOverIntersectingIntervals(this.slices_, |
| function(x) { return x.start; }, |
| function(x) { return x.duration; }, |
| loWX, hiWX, |
| onPickHit); |
| }, |
| |
| /** |
| * Find the index for the given slice. |
| * @return {index} Index of the given slice, or undefined. |
| * @private |
| */ |
| indexOfSlice_: function(slice) { |
| var index = tracing.findLowIndexInSortedArray(this.slices_, |
| function(x) { return x.start; }, |
| slice.start); |
| while (index < this.slices_.length && |
| slice.start == this.slices_[index].start && |
| slice.colorId != this.slices_[index].colorId) { |
| index++; |
| } |
| return index < this.slices_.length ? index : undefined; |
| }, |
| |
| /** |
| * Add the item to the left or right of the provided hit, if any, to the |
| * selection. |
| * @param {slice} The current slice. |
| * @param {Number} offset Number of slices away from the hit to look. |
| * @param {TimelineSelection} selection The selection to add a hit to, |
| * if found. |
| * @return {boolean} Whether a hit was found. |
| * @private |
| */ |
| addItemNearToProvidedHitToSelection: function(hit, offset, selection) { |
| if (!hit.slice) |
| return false; |
| |
| var index = this.indexOfSlice_(hit.slice); |
| if (index === undefined) |
| return false; |
| |
| var newIndex = index + offset; |
| if (newIndex < 0 || newIndex >= this.slices_.length) |
| return false; |
| |
| var hit = selection.addSlice(this, this.slices_[newIndex]); |
| this.decorateHit(hit); |
| return true; |
| }, |
| |
| addAllObjectsMatchingFilterToSelection: function(filter, selection) { |
| for (var i = 0; i < this.slices_.length; ++i) { |
| if (filter.matchSlice(this.slices_[i])) { |
| var hit = selection.addSlice(this, this.slices_[i]); |
| this.decorateHit(hit); |
| } |
| } |
| } |
| }; |
| |
| /** |
| * A track that displays the viewport size and scale. |
| * @constructor |
| * @extends {CanvasBasedTrack} |
| */ |
| |
| var TimelineViewportTrack = cr.ui.define(CanvasBasedTrack); |
| |
| var logOf10 = Math.log(10); |
| function log10(x) { |
| return Math.log(x) / logOf10; |
| } |
| |
| TimelineViewportTrack.prototype = { |
| |
| __proto__: CanvasBasedTrack.prototype, |
| |
| decorate: function() { |
| this.classList.add('timeline-viewport-track'); |
| this.strings_secs_ = []; |
| this.strings_msecs_ = []; |
| }, |
| |
| redraw: function() { |
| var ctx = this.ctx_; |
| var canvasW = this.canvas_.width; |
| var canvasH = this.canvas_.height; |
| |
| ctx.clearRect(0, 0, canvasW, canvasH); |
| |
| // Culling parametrs. |
| var vp = this.viewport_; |
| var pixWidth = vp.xViewVectorToWorld(1); |
| var viewLWorld = vp.xViewToWorld(0); |
| var viewRWorld = vp.xViewToWorld(canvasW); |
| |
| var idealMajorMarkDistancePix = 150; |
| var idealMajorMarkDistanceWorld = |
| vp.xViewVectorToWorld(idealMajorMarkDistancePix); |
| |
| // The conservative guess is the nearest enclosing 0.1, 1, 10, 100, etc |
| var conservativeGuess = |
| Math.pow(10, Math.ceil(log10(idealMajorMarkDistanceWorld))); |
| |
| // Once we have a conservative guess, consider things that evenly add up |
| // to the conservative guess, e.g. 0.5, 0.2, 0.1 Pick the one that still |
| // exceeds the ideal mark distance. |
| var divisors = [10, 5, 2, 1]; |
| for (var i = 0; i < divisors.length; ++i) { |
| var tightenedGuess = conservativeGuess / divisors[i]; |
| if (vp.xWorldVectorToView(tightenedGuess) < idealMajorMarkDistancePix) |
| continue; |
| majorMarkDistanceWorld = conservativeGuess / divisors[i - 1]; |
| break; |
| } |
| var tickLabels = undefined; |
| if (majorMarkDistanceWorld < 100) { |
| unit = 'ms'; |
| unitDivisor = 1; |
| tickLabels = this.strings_msecs_; |
| } else { |
| unit = 's'; |
| unitDivisor = 1000; |
| tickLabels = this.strings_secs_; |
| } |
| |
| var numTicksPerMajor = 5; |
| var minorMarkDistanceWorld = majorMarkDistanceWorld / numTicksPerMajor; |
| var minorMarkDistancePx = vp.xWorldVectorToView(minorMarkDistanceWorld); |
| |
| var firstMajorMark = |
| Math.floor(viewLWorld / majorMarkDistanceWorld) * |
| majorMarkDistanceWorld; |
| |
| var minorTickH = Math.floor(canvasH * 0.25); |
| |
| ctx.fillStyle = 'rgb(0, 0, 0)'; |
| ctx.strokeStyle = 'rgb(0, 0, 0)'; |
| ctx.textAlign = 'left'; |
| ctx.textBaseline = 'top'; |
| ctx.font = '9px sans-serif'; |
| |
| // Each iteration of this loop draws one major mark |
| // and numTicksPerMajor minor ticks. |
| // |
| // Rendering can't be done in world space because canvas transforms |
| // affect line width. So, do the conversions manually. |
| for (var curX = firstMajorMark; |
| curX < viewRWorld; |
| curX += majorMarkDistanceWorld) { |
| |
| var curXView = Math.floor(vp.xWorldToView(curX)); |
| |
| var unitValue = curX / unitDivisor; |
| var roundedUnitValue = Math.floor(unitValue * 100000) / 100000; |
| if (!tickLabels[roundedUnitValue]) |
| tickLabels[roundedUnitValue] = roundedUnitValue + ' ' + unit; |
| ctx.fillText(tickLabels[roundedUnitValue], curXView + 2, 0); |
| ctx.beginPath(); |
| |
| // Major mark |
| ctx.moveTo(curXView, 0); |
| ctx.lineTo(curXView, canvasW); |
| |
| // Minor marks |
| for (var i = 1; i < numTicksPerMajor; ++i) { |
| var xView = Math.floor(curXView + minorMarkDistancePx * i); |
| ctx.moveTo(xView, canvasH - minorTickH); |
| ctx.lineTo(xView, canvasH); |
| } |
| |
| ctx.stroke(); |
| } |
| }, |
| |
| /** |
| * Adds items intersecting a point to a selection. |
| * @param {number} wX X location to search at, in worldspace. |
| * @param {number} wY Y location to search at, in offset space. |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| * @return {boolean} true if a slice was found, otherwise false. |
| */ |
| addIntersectingItemsToSelection: function(wX, wY, selection) { |
| // Does nothing. There's nothing interesting to pick on the viewport |
| // track. |
| }, |
| |
| /** |
| * Adds items intersecting the given range to a selection. |
| * @param {number} loWX Lower X bound of the interval to search, in |
| * worldspace. |
| * @param {number} hiWX Upper X bound of the interval to search, in |
| * worldspace. |
| * @param {number} loY Lower Y bound of the interval to search, in |
| * offset space. |
| * @param {number} hiY Upper Y bound of the interval to search, in |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| */ |
| addIntersectingItemsInRangeToSelection: function( |
| loWX, hiWX, loY, hiY, selection) { |
| // Does nothing. There's nothing interesting to pick on the viewport |
| // track. |
| }, |
| |
| addAllObjectsMatchingFilterToSelection: function(filter, selection) { |
| } |
| |
| }; |
| |
| /** |
| * A track that displays a TimelineCounter object. |
| * @constructor |
| * @extends {CanvasBasedTrack} |
| */ |
| |
| var TimelineCounterTrack = cr.ui.define(CanvasBasedTrack); |
| |
| TimelineCounterTrack.prototype = { |
| |
| __proto__: CanvasBasedTrack.prototype, |
| |
| decorate: function() { |
| this.classList.add('timeline-counter-track'); |
| addControlButtonElements(this, false); |
| this.selectedSamples_ = {}; |
| }, |
| |
| /** |
| * Called by all the addToSelection functions on the created selection |
| * hit objects. Override this function on parent classes to add |
| * context-specific information to the hit. |
| */ |
| decorateHit: function(hit) { |
| }, |
| |
| get counter() { |
| return this.counter_; |
| }, |
| |
| set counter(counter) { |
| this.counter_ = counter; |
| this.invalidate(); |
| }, |
| |
| /** |
| * @return {Object} A sparce, mutable map from sample index to bool. Samples |
| * indices the map that are true are drawn as selected. Callers that mutate |
| * the map must manually call invalidate on the track to trigger a redraw. |
| */ |
| get selectedSamples() { |
| return this.selectedSamples_; |
| }, |
| |
| redraw: function() { |
| var ctr = this.counter_; |
| var ctx = this.ctx_; |
| var canvasW = this.canvas_.width; |
| var canvasH = this.canvas_.height; |
| |
| ctx.clearRect(0, 0, canvasW, canvasH); |
| |
| // Culling parametrs. |
| var vp = this.viewport_; |
| var pixWidth = vp.xViewVectorToWorld(1); |
| var viewLWorld = vp.xViewToWorld(0); |
| var viewRWorld = vp.xViewToWorld(canvasW); |
| |
| // Drop sampels that are less than skipDistancePix apart. |
| var skipDistancePix = 1; |
| var skipDistanceWorld = vp.xViewVectorToWorld(skipDistancePix); |
| |
| // Begin rendering in world space. |
| ctx.save(); |
| vp.applyTransformToCanavs(ctx); |
| |
| // Figure out where drawing should begin. |
| var numSeries = ctr.numSeries; |
| var numSamples = ctr.numSamples; |
| var startIndex = tracing.findLowIndexInSortedArray(ctr.timestamps, |
| function() { |
| }, |
| viewLWorld); |
| |
| // Draw indices one by one until we fall off the viewRWorld. |
| var yScale = canvasH / ctr.maxTotal; |
| for (var seriesIndex = ctr.numSeries - 1; |
| seriesIndex >= 0; seriesIndex--) { |
| var colorId = ctr.seriesColors[seriesIndex]; |
| ctx.fillStyle = pallette[colorId]; |
| ctx.beginPath(); |
| |
| // Set iLast and xLast such that the first sample we draw is the |
| // startIndex sample. |
| var iLast = startIndex - 1; |
| var xLast = iLast >= 0 ? ctr.timestamps[iLast] - skipDistanceWorld : -1; |
| var yLastView = canvasH; |
| |
| // Iterate over samples from iLast onward until we either fall off the |
| // viewRWorld or we run out of samples. To avoid drawing too much, after |
| // drawing a sample at xLast, skip subsequent samples that are less than |
| // skipDistanceWorld from xLast. |
| var hasMoved = false; |
| while (true) { |
| var i = iLast + 1; |
| if (i >= numSamples) { |
| ctx.lineTo(xLast, yLastView); |
| ctx.lineTo(xLast + 8 * pixWidth, yLastView); |
| ctx.lineTo(xLast + 8 * pixWidth, canvasH); |
| break; |
| } |
| |
| var x = ctr.timestamps[i]; |
| |
| var y = ctr.totals[i * numSeries + seriesIndex]; |
| var yView = canvasH - (yScale * y); |
| |
| if (x > viewRWorld) { |
| ctx.lineTo(x, yLastView); |
| ctx.lineTo(x, canvasH); |
| break; |
| } |
| |
| if (x - xLast < skipDistanceWorld) { |
| iLast = i; |
| continue; |
| } |
| |
| if (!hasMoved) { |
| ctx.moveTo(viewLWorld, canvasH); |
| hasMoved = true; |
| } |
| ctx.lineTo(x, yLastView); |
| ctx.lineTo(x, yView); |
| iLast = i; |
| xLast = x; |
| yLastView = yView; |
| } |
| ctx.closePath(); |
| ctx.fill(); |
| } |
| ctx.fillStyle = 'rgba(255, 0, 0, 1)'; |
| for (var i in this.selectedSamples_) { |
| if (!this.selectedSamples_[i]) |
| continue; |
| |
| var x = ctr.timestamps[i]; |
| for (var seriesIndex = ctr.numSeries - 1; |
| seriesIndex >= 0; seriesIndex--) { |
| var y = ctr.totals[i * numSeries + seriesIndex]; |
| var yView = canvasH - (yScale * y); |
| ctx.fillRect(x - pixWidth, yView - 1, 3 * pixWidth, 3); |
| } |
| } |
| ctx.restore(); |
| }, |
| |
| /** |
| * Adds items intersecting a point to a selection. |
| * @param {number} wX X location to search at, in worldspace. |
| * @param {number} wY Y location to search at, in offset space. |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| * @return {boolean} true if a slice was found, otherwise false. |
| */ |
| addIntersectingItemsToSelection: function(wX, wY, selection) { |
| var clientRect = this.getBoundingClientRect(); |
| if (wY < clientRect.top || wY >= clientRect.bottom) |
| return false; |
| var ctr = this.counter_; |
| if (wX < this.counter_.timestamps[0]) |
| return false; |
| var i = tracing.findLowIndexInSortedArray(ctr.timestamps, |
| function(x) { return x; }, |
| wX); |
| if (i < 0 || i >= ctr.timestamps.length) |
| return false; |
| |
| // Sample i is going to either be exactly at wX or slightly above it, |
| // E.g. asking for 7.5 in [7,8] gives i=1. So bump i back by 1 if needed. |
| if (i > 0 && wX > this.counter_.timestamps[i - 1]) |
| i--; |
| |
| // Some preliminaries. |
| var canvasH = this.getBoundingClientRect().height; |
| var yScale = canvasH / ctr.maxTotal; |
| |
| /* |
| // Figure out which sample we hit |
| var seriesIndexHit; |
| for (var seriesIndex = 0; seriesIndex < ctr.numSeries; seriesIndex++) { |
| var y = ctr.totals[i * ctr.numSeries + seriesIndex]; |
| var yView = canvasH - (yScale * y) + clientRect.top; |
| if (wY >= yView) { |
| seriesIndexHit = seriesIndex; |
| break; |
| } |
| } |
| if (seriesIndexHit === undefined) |
| return false; |
| */ |
| var hit = selection.addCounterSample(this, this.counter, i); |
| this.decorateHit(hit); |
| return true; |
| }, |
| |
| /** |
| * Adds items intersecting the given range to a selection. |
| * @param {number} loWX Lower X bound of the interval to search, in |
| * worldspace. |
| * @param {number} hiWX Upper X bound of the interval to search, in |
| * worldspace. |
| * @param {number} loY Lower Y bound of the interval to search, in |
| * offset space. |
| * @param {number} hiY Upper Y bound of the interval to search, in |
| * offset space. |
| * @param {TimelineSelection} selection Selection to which to add hits. |
| */ |
| addIntersectingItemsInRangeToSelection: function( |
| loWX, hiWX, loY, hiY, selection) { |
| |
| var clientRect = this.getBoundingClientRect(); |
| var a = Math.max(loY, clientRect.top); |
| var b = Math.min(hiY, clientRect.bottom); |
| if (a > b) |
| return; |
| |
| var ctr = this.counter_; |
| |
| var iLo = tracing.findLowIndexInSortedArray(ctr.timestamps, |
| function(x) { return x; }, |
| loWX); |
| var iHi = tracing.findLowIndexInSortedArray(ctr.timestamps, |
| function(x) { return x; }, |
| hiWX); |
| |
| // Sample i is going to either be exactly at wX or slightly above it, |
| // E.g. asking for 7.5 in [7,8] gives i=1. So bump i back by 1 if needed. |
| if (iLo > 0 && loWX > ctr.timestamps[iLo - 1]) |
| iLo--; |
| if (iHi > 0 && hiWX > ctr.timestamps[iHi - 1]) |
| iHi--; |
| |
| // Iterate over every sample intersecting.. |
| for (var i = iLo; i <= iHi; i++) { |
| if (i >= ctr.timestamps.length) |
| continue; |
| |
| // TODO(nduca): Pick the seriesIndexHit based on the loY - hiY values. |
| var hit = selection.addCounterSample(this, this.counter, i); |
| this.decorateHit(hit); |
| } |
| }, |
| |
| addAllObjectsMatchingFilterToSelection: function(filter, selection) { |
| } |
| |
| }; |
| |
| return { |
| TimelineCounterTrack: TimelineCounterTrack, |
| TimelineSliceTrack: TimelineSliceTrack, |
| TimelineThreadTrack: TimelineThreadTrack, |
| TimelineViewportTrack: TimelineViewportTrack, |
| TimelineCpuTrack: TimelineCpuTrack |
| }; |
| }); |
