| // 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. |
| |
| 'use strict'; |
| |
| base.requireStylesheet('tracks.slice_track'); |
| |
| base.require('tracks.canvas_based_track'); |
| base.require('sorted_array_utils'); |
| base.require('fast_rect_renderer'); |
| base.require('color_scheme'); |
| base.require('ui'); |
| |
| base.exportTo('tracing.tracks', function() { |
| |
| var palette = tracing.getColorPalette(); |
| |
| /** |
| * A track that displays an array of Slice objects. |
| * @constructor |
| * @extends {CanvasBasedTrack} |
| */ |
| |
| var SliceTrack = tracing.ui.define(tracing.tracks.CanvasBasedTrack); |
| |
| SliceTrack.prototype = { |
| |
| __proto__: tracing.tracks.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('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 || []; |
| if (!slices) |
| this.visible = false; |
| 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); |
| |
| // Give the viewport a chance to draw onto this canvas. |
| vp.drawUnderContent(ctx, viewLWorld, viewRWorld, canvasH); |
| |
| // Begin rendering in world space. |
| ctx.save(); |
| vp.applyTransformToCanvas(ctx); |
| |
| // Slices. |
| if (this.asyncStyle_) |
| ctx.globalAlpha = 0.25; |
| var tr = new tracing.FastRectRenderer(ctx, 2 * pixWidth, 2 * pixWidth, |
| palette); |
| tr.setYandH(0, canvasH); |
| var slices = this.slices_; |
| var lowSlice = tracing.findLowIndexInSortedArray(slices, |
| function(slice) { |
| return slice.start + |
| slice.duration; |
| }, |
| viewLWorld); |
| for (var i = lowSlice; i < slices.length; ++i) { |
| var slice = slices[i]; |
| var x = slice.start; |
| if (x > viewRWorld) { |
| break; |
| } |
| // 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 = palette[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. |
| var pixelRatio = window.devicePixelRatio || 1; |
| if (canvasH > 8) { |
| ctx.textAlign = 'center'; |
| ctx.textBaseline = 'top'; |
| ctx.font = (10 * pixelRatio) + 'px 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 = lowSlice; i < slices.length; ++i) { |
| var slice = slices[i]; |
| if (slice.start > viewRWorld) { |
| break; |
| } |
| 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 * pixelRatio, drawnWidth); |
| } |
| } |
| } |
| } |
| |
| // Give the viewport a chance to draw over this canvas. |
| vp.drawOverContent(ctx, viewLWorld, viewRWorld, canvasH); |
| }, |
| |
| /** |
| * Finds slices intersecting the given interval. |
| * @param {number} vX X location to search at, in viewspace. |
| * @param {number} vY Y location to search at, in viewspace. |
| * @param {Selection} selection Selection to which to add hits. |
| * @return {boolean} true if a slice was found, otherwise false. |
| */ |
| addIntersectingItemsToSelection: function(vX, vY, selection) { |
| var clientRect = this.getBoundingClientRect(); |
| if (vY < clientRect.top || vY >= clientRect.bottom) |
| return false; |
| var pixelRatio = window.devicePixelRatio || 1; |
| var wX = this.viewport_.xViewVectorToWorld(vX * devicePixelRatio); |
| 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} loVX Lower X bound of the interval to search, in |
| * viewspace. |
| * @param {number} hiVX Upper X bound of the interval to search, in |
| * viewspace. |
| * @param {number} loVY Lower Y bound of the interval to search, in |
| * viewspace. |
| * @param {number} hiVY Upper Y bound of the interval to search, in |
| * viewspace. |
| * @param {Selection} selection Selection to which to add hits. |
| */ |
| addIntersectingItemsInRangeToSelection: function( |
| loVX, hiVX, loVY, hiVY, selection) { |
| |
| var pixelRatio = window.devicePixelRatio || 1; |
| var loWX = this.viewport_.xViewToWorld(loVX * pixelRatio); |
| var hiWX = this.viewport_.xViewToWorld(hiVX * pixelRatio); |
| |
| var clientRect = this.getBoundingClientRect(); |
| var a = Math.max(loVY, clientRect.top); |
| var b = Math.min(hiVY, 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 {Selection} 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); |
| } |
| } |
| } |
| }; |
| |
| var highlightIdBoost = tracing.getColorPaletteHighlightIdBoost(); |
| |
| // 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 cache for elided strings. |
| * @constructor |
| */ |
| function ElidedTitleCache() { |
| } |
| |
| ElidedTitleCache.prototype = { |
| /** |
| * Return elided text. |
| * @param {track} A 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 pair representing an elided string and world-coordinate width |
| * to draw it. |
| * @constructor |
| */ |
| function ElidedStringWidthPair(string, width) { |
| this.string = string; |
| this.width = width; |
| } |
| |
| return { |
| SliceTrack: SliceTrack |
| }; |
| }); |
