| OLD | NEW |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 | 5 |
| 6 /** | 6 /** |
| 7 * @fileoverview Renders an array of slices into the provided div, | 7 * @fileoverview Renders an array of slices into the provided div, |
| 8 * using a child canvas element. Uses a FastRectRenderer to draw only | 8 * using a child canvas element. Uses a FastRectRenderer to draw only |
| 9 * the visible slices. | 9 * the visible slices. |
| 10 */ | 10 */ |
| (...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 125 this.textContent = ''; | 125 this.textContent = ''; |
| 126 this.tracks_ = []; | 126 this.tracks_ = []; |
| 127 if (this.thread_) { | 127 if (this.thread_) { |
| 128 for (var srI = 0; srI < this.thread_.nonNestedSubRows.length; ++srI) { | 128 for (var srI = 0; srI < this.thread_.nonNestedSubRows.length; ++srI) { |
| 129 addTrack(this, this.thread_.nonNestedSubRows[srI]); | 129 addTrack(this, this.thread_.nonNestedSubRows[srI]); |
| 130 } | 130 } |
| 131 for (var srI = 0; srI < this.thread_.subRows.length; ++srI) { | 131 for (var srI = 0; srI < this.thread_.subRows.length; ++srI) { |
| 132 addTrack(this, this.thread_.subRows[srI]); | 132 addTrack(this, this.thread_.subRows[srI]); |
| 133 } | 133 } |
| 134 if (this.tracks_.length > 0) { | 134 if (this.tracks_.length > 0) { |
| 135 var tname = this.thread_.name || this.thread_.tid; |
| 135 this.tracks_[0].heading = this.thread_.parent.pid + ': ' + | 136 this.tracks_[0].heading = this.thread_.parent.pid + ': ' + |
| 136 this.thread_.tid + ': '; | 137 tname + ':'; |
| 138 this.tracks_[0].tooltip = 'pid: ' + this.thread_.parent.pid + |
| 139 ', tid: ' + this.thread_.tid + |
| 140 (this.thread_.name ? ', name: ' + this.thread_.name : ''); |
| 137 } | 141 } |
| 138 } | 142 } |
| 139 }, | 143 }, |
| 140 | 144 |
| 141 /** | 145 /** |
| 142 * Picks a slice, if any, at a given location. | 146 * Picks a slice, if any, at a given location. |
| 143 * @param {number} wX X location to search at, in worldspace. | 147 * @param {number} wX X location to search at, in worldspace. |
| 144 * @param {number} wY Y location to search at, in offset space. | 148 * @param {number} wY Y location to search at, in offset space. |
| 145 * offset space. | 149 * offset space. |
| 146 * @param {function():*} onHitCallback Callback to call with the slice, | 150 * @param {function():*} onHitCallback Callback to call with the slice, |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 187 */ | 191 */ |
| 188 TimelineSliceTrack = cr.ui.define('div'); | 192 TimelineSliceTrack = cr.ui.define('div'); |
| 189 | 193 |
| 190 TimelineSliceTrack.prototype = { | 194 TimelineSliceTrack.prototype = { |
| 191 __proto__: HTMLDivElement.prototype, | 195 __proto__: HTMLDivElement.prototype, |
| 192 | 196 |
| 193 decorate: function() { | 197 decorate: function() { |
| 194 this.className = 'timeline-slice-track'; | 198 this.className = 'timeline-slice-track'; |
| 195 this.slices_ = null; | 199 this.slices_ = null; |
| 196 | 200 |
| 197 this.titleDiv_ = document.createElement('div'); | 201 this.headingDiv_ = document.createElement('div'); |
| 198 this.titleDiv_.className = 'timeline-slice-track-title'; | 202 this.headingDiv_.className = 'timeline-slice-track-title'; |
| 199 this.appendChild(this.titleDiv_); | 203 this.appendChild(this.headingDiv_); |
| 200 | 204 |
| 201 this.canvasContainer_ = document.createElement('div'); | 205 this.canvasContainer_ = document.createElement('div'); |
| 202 this.canvasContainer_.className = 'timeline-slice-track-canvas-container'; | 206 this.canvasContainer_.className = 'timeline-slice-track-canvas-container'; |
| 203 this.appendChild(this.canvasContainer_); | 207 this.appendChild(this.canvasContainer_); |
| 204 this.canvas_ = document.createElement('canvas'); | 208 this.canvas_ = document.createElement('canvas'); |
| 205 this.canvas_.className = 'timeline-slice-track-canvas'; | 209 this.canvas_.className = 'timeline-slice-track-canvas'; |
| 206 this.canvasContainer_.appendChild(this.canvas_); | 210 this.canvasContainer_.appendChild(this.canvas_); |
| 207 | 211 |
| 208 this.ctx_ = this.canvas_.getContext('2d'); | 212 this.ctx_ = this.canvas_.getContext('2d'); |
| 209 }, | 213 }, |
| 210 | 214 |
| 211 set heading(text) { | 215 set heading(text) { |
| 212 this.titleDiv_.textContent = text; | 216 this.headingDiv_.textContent = text; |
| 217 }, |
| 218 |
| 219 set tooltip(text) { |
| 220 this.headingDiv_.title = text; |
| 213 }, | 221 }, |
| 214 | 222 |
| 215 set slices(slices) { | 223 set slices(slices) { |
| 216 this.slices_ = slices; | 224 this.slices_ = slices; |
| 217 this.invalidate(); | 225 this.invalidate(); |
| 218 }, | 226 }, |
| 219 | 227 |
| 220 set viewport(v) { | 228 set viewport(v) { |
| 221 this.viewport_ = v; | 229 this.viewport_ = v; |
| 222 this.invalidate(); | 230 this.invalidate(); |
| (...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 318 ctx.textBaseline = 'top'; | 326 ctx.textBaseline = 'top'; |
| 319 ctx.font = '10px sans-serif'; | 327 ctx.font = '10px sans-serif'; |
| 320 ctx.strokeStyle = 'rgb(0,0,0)'; | 328 ctx.strokeStyle = 'rgb(0,0,0)'; |
| 321 ctx.fillStyle = 'rgb(0,0,0)'; | 329 ctx.fillStyle = 'rgb(0,0,0)'; |
| 322 var quickDiscardThresshold = pixWidth * 20; // dont render until 20px wide | 330 var quickDiscardThresshold = pixWidth * 20; // dont render until 20px wide |
| 323 for (var i = 0; i < slices.length; ++i) { | 331 for (var i = 0; i < slices.length; ++i) { |
| 324 var slice = slices[i]; | 332 var slice = slices[i]; |
| 325 if (slice.duration > quickDiscardThresshold) { | 333 if (slice.duration > quickDiscardThresshold) { |
| 326 var title = slice.title; | 334 var title = slice.title; |
| 327 if (slice.didNotFinish) { | 335 if (slice.didNotFinish) { |
| 328 title += " (Did Not Finish)"; | 336 title += ' (Did Not Finish)'; |
| 329 } | 337 } |
| 330 function labelWidth() { | 338 function labelWidth() { |
| 331 return quickMeasureText(ctx, title) + 2; | 339 return quickMeasureText(ctx, title) + 2; |
| 332 } | 340 } |
| 333 function labelWidthWorld() { | 341 function labelWidthWorld() { |
| 334 return pixWidth * labelWidth(); | 342 return pixWidth * labelWidth(); |
| 335 } | 343 } |
| 336 var elided = false; | 344 var elided = false; |
| 337 while (labelWidthWorld() > slice.duration) { | 345 while (labelWidthWorld() > slice.duration) { |
| 338 title = title.substring(0, title.length * 0.75); | 346 title = title.substring(0, title.length * 0.75); |
| (...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 449 return index != undefined ? this.slices_[index] : undefined; | 457 return index != undefined ? this.slices_[index] : undefined; |
| 450 }, | 458 }, |
| 451 | 459 |
| 452 }; | 460 }; |
| 453 | 461 |
| 454 return { | 462 return { |
| 455 TimelineSliceTrack: TimelineSliceTrack, | 463 TimelineSliceTrack: TimelineSliceTrack, |
| 456 TimelineThreadTrack: TimelineThreadTrack | 464 TimelineThreadTrack: TimelineThreadTrack |
| 457 }; | 465 }; |
| 458 }); | 466 }); |
| OLD | NEW |