OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 25 matching lines...) Expand all Loading... |
36 * @param {!WebInspector.TimelineModel} model | 36 * @param {!WebInspector.TimelineModel} model |
37 */ | 37 */ |
38 WebInspector.TimelineEventOverview = function(id, title, model) | 38 WebInspector.TimelineEventOverview = function(id, title, model) |
39 { | 39 { |
40 WebInspector.TimelineOverviewBase.call(this); | 40 WebInspector.TimelineOverviewBase.call(this); |
41 this.element.id = "timeline-overview-" + id; | 41 this.element.id = "timeline-overview-" + id; |
42 this.element.classList.add("overview-strip"); | 42 this.element.classList.add("overview-strip"); |
43 if (title) | 43 if (title) |
44 this.element.createChild("div", "timeline-overview-strip-title").textCon
tent = title; | 44 this.element.createChild("div", "timeline-overview-strip-title").textCon
tent = title; |
45 this._model = model; | 45 this._model = model; |
46 } | 46 }; |
47 | 47 |
48 WebInspector.TimelineEventOverview.prototype = { | 48 WebInspector.TimelineEventOverview.prototype = { |
49 /** | 49 /** |
50 * @param {number} begin | 50 * @param {number} begin |
51 * @param {number} end | 51 * @param {number} end |
52 * @param {number} position | 52 * @param {number} position |
53 * @param {number} height | 53 * @param {number} height |
54 * @param {string} color | 54 * @param {string} color |
55 */ | 55 */ |
56 _renderBar: function(begin, end, position, height, color) | 56 _renderBar: function(begin, end, position, height, color) |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
88 var absoluteMin = this._model.minimumRecordTime(); | 88 var absoluteMin = this._model.minimumRecordTime(); |
89 var timeSpan = this._model.maximumRecordTime() - absoluteMin; | 89 var timeSpan = this._model.maximumRecordTime() - absoluteMin; |
90 var haveRecords = absoluteMin > 0; | 90 var haveRecords = absoluteMin > 0; |
91 return { | 91 return { |
92 left: haveRecords && startTime ? Math.min((startTime - absoluteMin)
/ timeSpan, 1) : 0, | 92 left: haveRecords && startTime ? Math.min((startTime - absoluteMin)
/ timeSpan, 1) : 0, |
93 right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) /
timeSpan : 1 | 93 right: haveRecords && endTime < Infinity ? (endTime - absoluteMin) /
timeSpan : 1 |
94 }; | 94 }; |
95 }, | 95 }, |
96 | 96 |
97 __proto__: WebInspector.TimelineOverviewBase.prototype | 97 __proto__: WebInspector.TimelineOverviewBase.prototype |
98 } | 98 }; |
99 | 99 |
100 /** | 100 /** |
101 * @constructor | 101 * @constructor |
102 * @extends {WebInspector.TimelineEventOverview} | 102 * @extends {WebInspector.TimelineEventOverview} |
103 * @param {!WebInspector.TimelineModel} model | 103 * @param {!WebInspector.TimelineModel} model |
104 */ | 104 */ |
105 WebInspector.TimelineEventOverview.Input = function(model) | 105 WebInspector.TimelineEventOverview.Input = function(model) |
106 { | 106 { |
107 WebInspector.TimelineEventOverview.call(this, "input", null, model); | 107 WebInspector.TimelineEventOverview.call(this, "input", null, model); |
108 } | 108 }; |
109 | 109 |
110 WebInspector.TimelineEventOverview.Input.prototype = { | 110 WebInspector.TimelineEventOverview.Input.prototype = { |
111 /** | 111 /** |
112 * @override | 112 * @override |
113 */ | 113 */ |
114 update: function() | 114 update: function() |
115 { | 115 { |
116 WebInspector.TimelineEventOverview.prototype.update.call(this); | 116 WebInspector.TimelineEventOverview.prototype.update.call(this); |
117 var events = this._model.mainThreadEvents(); | 117 var events = this._model.mainThreadEvents(); |
118 var height = this._canvas.height; | 118 var height = this._canvas.height; |
(...skipping 23 matching lines...) Expand all Loading... |
142 continue; | 142 continue; |
143 var start = Number.constrain(Math.floor((event.startTime - timeO
ffset) * scale), 0, canvasWidth); | 143 var start = Number.constrain(Math.floor((event.startTime - timeO
ffset) * scale), 0, canvasWidth); |
144 var end = Number.constrain(Math.ceil((event.endTime - timeOffset
) * scale), 0, canvasWidth); | 144 var end = Number.constrain(Math.ceil((event.endTime - timeOffset
) * scale), 0, canvasWidth); |
145 var width = Math.max(end - start, minWidth); | 145 var width = Math.max(end - start, minWidth); |
146 this._renderBar(start, start + width, 0, height, descriptor.colo
r); | 146 this._renderBar(start, start + width, 0, height, descriptor.colo
r); |
147 } | 147 } |
148 } | 148 } |
149 }, | 149 }, |
150 | 150 |
151 __proto__: WebInspector.TimelineEventOverview.prototype | 151 __proto__: WebInspector.TimelineEventOverview.prototype |
152 } | 152 }; |
153 | 153 |
154 /** | 154 /** |
155 * @constructor | 155 * @constructor |
156 * @extends {WebInspector.TimelineEventOverview} | 156 * @extends {WebInspector.TimelineEventOverview} |
157 * @param {!WebInspector.TimelineModel} model | 157 * @param {!WebInspector.TimelineModel} model |
158 */ | 158 */ |
159 WebInspector.TimelineEventOverview.Network = function(model) | 159 WebInspector.TimelineEventOverview.Network = function(model) |
160 { | 160 { |
161 WebInspector.TimelineEventOverview.call(this, "network", WebInspector.UIStri
ng("NET"), model); | 161 WebInspector.TimelineEventOverview.call(this, "network", WebInspector.UIStri
ng("NET"), model); |
162 } | 162 }; |
163 | 163 |
164 WebInspector.TimelineEventOverview.Network.prototype = { | 164 WebInspector.TimelineEventOverview.Network.prototype = { |
165 /** | 165 /** |
166 * @override | 166 * @override |
167 */ | 167 */ |
168 update: function() | 168 update: function() |
169 { | 169 { |
170 WebInspector.TimelineEventOverview.prototype.update.call(this); | 170 WebInspector.TimelineEventOverview.prototype.update.call(this); |
171 var height = this._canvas.height; | 171 var height = this._canvas.height; |
172 var numBands = categoryBand(WebInspector.TimelineUIUtils.NetworkCategory
.Other) + 1; | 172 var numBands = categoryBand(WebInspector.TimelineUIUtils.NetworkCategory
.Other) + 1; |
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
225 path["waiting"].rect(s, y, e - s, bandHeight - 1); | 225 path["waiting"].rect(s, y, e - s, bandHeight - 1); |
226 path["transfer"].rect(e - tickWidth / 2, y, tickWidth, bandHeight -
1); | 226 path["transfer"].rect(e - tickWidth / 2, y, tickWidth, bandHeight -
1); |
227 if (!request.responseTime) | 227 if (!request.responseTime) |
228 return; | 228 return; |
229 var r = Math.ceil((request.responseTime - timeOffset) * scale); | 229 var r = Math.ceil((request.responseTime - timeOffset) * scale); |
230 path["transfer"].rect(r - tickWidth / 2, y, tickWidth, bandHeight -
1); | 230 path["transfer"].rect(r - tickWidth / 2, y, tickWidth, bandHeight -
1); |
231 } | 231 } |
232 }, | 232 }, |
233 | 233 |
234 __proto__: WebInspector.TimelineEventOverview.prototype | 234 __proto__: WebInspector.TimelineEventOverview.prototype |
235 } | 235 }; |
236 | 236 |
237 /** | 237 /** |
238 * @constructor | 238 * @constructor |
239 * @extends {WebInspector.TimelineEventOverview} | 239 * @extends {WebInspector.TimelineEventOverview} |
240 * @param {!WebInspector.TimelineModel} model | 240 * @param {!WebInspector.TimelineModel} model |
241 */ | 241 */ |
242 WebInspector.TimelineEventOverview.CPUActivity = function(model) | 242 WebInspector.TimelineEventOverview.CPUActivity = function(model) |
243 { | 243 { |
244 WebInspector.TimelineEventOverview.call(this, "cpu-activity", WebInspector.U
IString("CPU"), model); | 244 WebInspector.TimelineEventOverview.call(this, "cpu-activity", WebInspector.U
IString("CPU"), model); |
245 this._backgroundCanvas = this.element.createChild("canvas", "fill background
"); | 245 this._backgroundCanvas = this.element.createChild("canvas", "fill background
"); |
246 } | 246 }; |
247 | 247 |
248 WebInspector.TimelineEventOverview.CPUActivity.prototype = { | 248 WebInspector.TimelineEventOverview.CPUActivity.prototype = { |
249 /** | 249 /** |
250 * @override | 250 * @override |
251 */ | 251 */ |
252 resetCanvas: function() | 252 resetCanvas: function() |
253 { | 253 { |
254 WebInspector.TimelineEventOverview.prototype.resetCanvas.call(this); | 254 WebInspector.TimelineEventOverview.prototype.resetCanvas.call(this); |
255 this._backgroundCanvas.width = this.element.clientWidth * window.deviceP
ixelRatio; | 255 this._backgroundCanvas.width = this.element.clientWidth * window.deviceP
ixelRatio; |
256 this._backgroundCanvas.height = this.element.clientHeight * window.devic
ePixelRatio; | 256 this._backgroundCanvas.height = this.element.clientHeight * window.devic
ePixelRatio; |
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
355 ctx.moveTo(x, 0); | 355 ctx.moveTo(x, 0); |
356 ctx.lineTo(x - height, height); | 356 ctx.lineTo(x - height, height); |
357 } | 357 } |
358 ctx.globalCompositeOperation = "destination-out"; | 358 ctx.globalCompositeOperation = "destination-out"; |
359 ctx.stroke(); | 359 ctx.stroke(); |
360 ctx.restore(); | 360 ctx.restore(); |
361 } | 361 } |
362 }, | 362 }, |
363 | 363 |
364 __proto__: WebInspector.TimelineEventOverview.prototype | 364 __proto__: WebInspector.TimelineEventOverview.prototype |
365 } | 365 }; |
366 | 366 |
367 /** | 367 /** |
368 * @constructor | 368 * @constructor |
369 * @extends {WebInspector.TimelineEventOverview} | 369 * @extends {WebInspector.TimelineEventOverview} |
370 * @param {!WebInspector.TimelineModel} model | 370 * @param {!WebInspector.TimelineModel} model |
371 * @param {!WebInspector.TimelineFrameModel} frameModel | 371 * @param {!WebInspector.TimelineFrameModel} frameModel |
372 */ | 372 */ |
373 WebInspector.TimelineEventOverview.Responsiveness = function(model, frameModel) | 373 WebInspector.TimelineEventOverview.Responsiveness = function(model, frameModel) |
374 { | 374 { |
375 WebInspector.TimelineEventOverview.call(this, "responsiveness", null, model) | 375 WebInspector.TimelineEventOverview.call(this, "responsiveness", null, model)
; |
376 this._frameModel = frameModel; | 376 this._frameModel = frameModel; |
377 } | 377 }; |
378 | 378 |
379 WebInspector.TimelineEventOverview.Responsiveness.prototype = { | 379 WebInspector.TimelineEventOverview.Responsiveness.prototype = { |
380 /** | 380 /** |
381 * @override | 381 * @override |
382 */ | 382 */ |
383 update: function() | 383 update: function() |
384 { | 384 { |
385 WebInspector.TimelineEventOverview.prototype.update.call(this); | 385 WebInspector.TimelineEventOverview.prototype.update.call(this); |
386 var height = this._canvas.height; | 386 var height = this._canvas.height; |
387 var timeOffset = this._model.minimumRecordTime(); | 387 var timeOffset = this._model.minimumRecordTime(); |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
419 { | 419 { |
420 var x = Math.round(scale * (time - timeOffset)); | 420 var x = Math.round(scale * (time - timeOffset)); |
421 var w = Math.round(scale * duration); | 421 var w = Math.round(scale * duration); |
422 fillPath.rect(x, 0, w, height); | 422 fillPath.rect(x, 0, w, height); |
423 markersPath.moveTo(x + w, 0); | 423 markersPath.moveTo(x + w, 0); |
424 markersPath.lineTo(x + w, height); | 424 markersPath.lineTo(x + w, height); |
425 } | 425 } |
426 }, | 426 }, |
427 | 427 |
428 __proto__: WebInspector.TimelineEventOverview.prototype | 428 __proto__: WebInspector.TimelineEventOverview.prototype |
429 } | 429 }; |
430 | 430 |
431 /** | 431 /** |
432 * @constructor | 432 * @constructor |
433 * @extends {WebInspector.TimelineEventOverview} | 433 * @extends {WebInspector.TimelineEventOverview} |
434 * @param {!WebInspector.TimelineModel} model | 434 * @param {!WebInspector.TimelineModel} model |
435 * @param {!WebInspector.FilmStripModel} filmStripModel | 435 * @param {!WebInspector.FilmStripModel} filmStripModel |
436 */ | 436 */ |
437 WebInspector.TimelineFilmStripOverview = function(model, filmStripModel) | 437 WebInspector.TimelineFilmStripOverview = function(model, filmStripModel) |
438 { | 438 { |
439 WebInspector.TimelineEventOverview.call(this, "filmstrip", null, model); | 439 WebInspector.TimelineEventOverview.call(this, "filmstrip", null, model); |
440 this._filmStripModel = filmStripModel; | 440 this._filmStripModel = filmStripModel; |
441 this.reset(); | 441 this.reset(); |
442 } | 442 }; |
443 | 443 |
444 WebInspector.TimelineFilmStripOverview.Padding = 2; | 444 WebInspector.TimelineFilmStripOverview.Padding = 2; |
445 | 445 |
446 WebInspector.TimelineFilmStripOverview.prototype = { | 446 WebInspector.TimelineFilmStripOverview.prototype = { |
447 /** | 447 /** |
448 * @override | 448 * @override |
449 */ | 449 */ |
450 update: function() | 450 update: function() |
451 { | 451 { |
452 WebInspector.TimelineEventOverview.prototype.update.call(this); | 452 WebInspector.TimelineEventOverview.prototype.update.call(this); |
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
587 reset: function() | 587 reset: function() |
588 { | 588 { |
589 this._lastFrame = undefined; | 589 this._lastFrame = undefined; |
590 this._lastElement = null; | 590 this._lastElement = null; |
591 /** @type {!Map<!WebInspector.FilmStripModel.Frame,!Promise<!HTMLImageEl
ement>>} */ | 591 /** @type {!Map<!WebInspector.FilmStripModel.Frame,!Promise<!HTMLImageEl
ement>>} */ |
592 this._frameToImagePromise = new Map(); | 592 this._frameToImagePromise = new Map(); |
593 this._imageWidth = 0; | 593 this._imageWidth = 0; |
594 }, | 594 }, |
595 | 595 |
596 __proto__: WebInspector.TimelineEventOverview.prototype | 596 __proto__: WebInspector.TimelineEventOverview.prototype |
597 } | 597 }; |
598 | 598 |
599 /** | 599 /** |
600 * @constructor | 600 * @constructor |
601 * @extends {WebInspector.TimelineEventOverview} | 601 * @extends {WebInspector.TimelineEventOverview} |
602 * @param {!WebInspector.TimelineModel} model | 602 * @param {!WebInspector.TimelineModel} model |
603 * @param {!WebInspector.TimelineFrameModel} frameModel | 603 * @param {!WebInspector.TimelineFrameModel} frameModel |
604 */ | 604 */ |
605 WebInspector.TimelineEventOverview.Frames = function(model, frameModel) | 605 WebInspector.TimelineEventOverview.Frames = function(model, frameModel) |
606 { | 606 { |
607 WebInspector.TimelineEventOverview.call(this, "framerate", WebInspector.UISt
ring("FPS"), model); | 607 WebInspector.TimelineEventOverview.call(this, "framerate", WebInspector.UISt
ring("FPS"), model); |
608 this._frameModel = frameModel; | 608 this._frameModel = frameModel; |
609 } | 609 }; |
610 | 610 |
611 WebInspector.TimelineEventOverview.Frames.prototype = { | 611 WebInspector.TimelineEventOverview.Frames.prototype = { |
612 /** | 612 /** |
613 * @override | 613 * @override |
614 */ | 614 */ |
615 update: function() | 615 update: function() |
616 { | 616 { |
617 WebInspector.TimelineEventOverview.prototype.update.call(this); | 617 WebInspector.TimelineEventOverview.prototype.update.call(this); |
618 var height = this._canvas.height; | 618 var height = this._canvas.height; |
619 var /** @const */ padding = 1 * window.devicePixelRatio; | 619 var /** @const */ padding = 1 * window.devicePixelRatio; |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
651 } | 651 } |
652 ctx.lineTo(x, bottomY); | 652 ctx.lineTo(x, bottomY); |
653 ctx.fillStyle = "hsl(110, 50%, 88%)"; | 653 ctx.fillStyle = "hsl(110, 50%, 88%)"; |
654 ctx.strokeStyle = "hsl(110, 50%, 60%)"; | 654 ctx.strokeStyle = "hsl(110, 50%, 60%)"; |
655 ctx.lineWidth = lineWidth; | 655 ctx.lineWidth = lineWidth; |
656 ctx.fill(); | 656 ctx.fill(); |
657 ctx.stroke(); | 657 ctx.stroke(); |
658 }, | 658 }, |
659 | 659 |
660 __proto__: WebInspector.TimelineEventOverview.prototype | 660 __proto__: WebInspector.TimelineEventOverview.prototype |
661 } | 661 }; |
662 | 662 |
663 /** | 663 /** |
664 * @constructor | 664 * @constructor |
665 * @extends {WebInspector.TimelineEventOverview} | 665 * @extends {WebInspector.TimelineEventOverview} |
666 * @param {!WebInspector.TimelineModel} model | 666 * @param {!WebInspector.TimelineModel} model |
667 */ | 667 */ |
668 WebInspector.TimelineEventOverview.Memory = function(model) | 668 WebInspector.TimelineEventOverview.Memory = function(model) |
669 { | 669 { |
670 WebInspector.TimelineEventOverview.call(this, "memory", WebInspector.UIStrin
g("HEAP"), model); | 670 WebInspector.TimelineEventOverview.call(this, "memory", WebInspector.UIStrin
g("HEAP"), model); |
671 this._heapSizeLabel = this.element.createChild("div", "memory-graph-label"); | 671 this._heapSizeLabel = this.element.createChild("div", "memory-graph-label"); |
672 } | 672 }; |
673 | 673 |
674 WebInspector.TimelineEventOverview.Memory.prototype = { | 674 WebInspector.TimelineEventOverview.Memory.prototype = { |
675 resetHeapSizeLabels: function() | 675 resetHeapSizeLabels: function() |
676 { | 676 { |
677 this._heapSizeLabel.textContent = ""; | 677 this._heapSizeLabel.textContent = ""; |
678 }, | 678 }, |
679 | 679 |
680 /** | 680 /** |
681 * @override | 681 * @override |
682 */ | 682 */ |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
772 ctx.fillStyle = "hsla(220, 90%, 70%, 0.2)"; | 772 ctx.fillStyle = "hsla(220, 90%, 70%, 0.2)"; |
773 ctx.fill(); | 773 ctx.fill(); |
774 ctx.lineWidth = lineWidth; | 774 ctx.lineWidth = lineWidth; |
775 ctx.strokeStyle = "hsl(220, 90%, 70%)"; | 775 ctx.strokeStyle = "hsl(220, 90%, 70%)"; |
776 ctx.stroke(); | 776 ctx.stroke(); |
777 | 777 |
778 this._heapSizeLabel.textContent = WebInspector.UIString("%s \u2013 %s",
Number.bytesToString(minUsedHeapSize), Number.bytesToString(maxUsedHeapSize)); | 778 this._heapSizeLabel.textContent = WebInspector.UIString("%s \u2013 %s",
Number.bytesToString(minUsedHeapSize), Number.bytesToString(maxUsedHeapSize)); |
779 }, | 779 }, |
780 | 780 |
781 __proto__: WebInspector.TimelineEventOverview.prototype | 781 __proto__: WebInspector.TimelineEventOverview.prototype |
782 } | 782 }; |
783 | 783 |
784 /** | 784 /** |
785 * @constructor | 785 * @constructor |
786 * @param {number} startTime | 786 * @param {number} startTime |
787 * @param {number} quantDuration | 787 * @param {number} quantDuration |
788 * @param {function(!Array<number>)} callback | 788 * @param {function(!Array<number>)} callback |
789 */ | 789 */ |
790 WebInspector.Quantizer = function(startTime, quantDuration, callback) | 790 WebInspector.Quantizer = function(startTime, quantDuration, callback) |
791 { | 791 { |
792 this._lastTime = startTime; | 792 this._lastTime = startTime; |
793 this._quantDuration = quantDuration; | 793 this._quantDuration = quantDuration; |
794 this._callback = callback; | 794 this._callback = callback; |
795 this._counters = []; | 795 this._counters = []; |
796 this._remainder = quantDuration; | 796 this._remainder = quantDuration; |
797 } | 797 }; |
798 | 798 |
799 WebInspector.Quantizer.prototype = { | 799 WebInspector.Quantizer.prototype = { |
800 /** | 800 /** |
801 * @param {number} time | 801 * @param {number} time |
802 * @param {number} group | 802 * @param {number} group |
803 */ | 803 */ |
804 appendInterval: function(time, group) | 804 appendInterval: function(time, group) |
805 { | 805 { |
806 var interval = time - this._lastTime; | 806 var interval = time - this._lastTime; |
807 if (interval <= this._remainder) { | 807 if (interval <= this._remainder) { |
808 this._counters[group] = (this._counters[group] || 0) + interval; | 808 this._counters[group] = (this._counters[group] || 0) + interval; |
809 this._remainder -= interval; | 809 this._remainder -= interval; |
810 this._lastTime = time; | 810 this._lastTime = time; |
811 return; | 811 return; |
812 } | 812 } |
813 this._counters[group] = (this._counters[group] || 0) + this._remainder; | 813 this._counters[group] = (this._counters[group] || 0) + this._remainder; |
814 this._callback(this._counters); | 814 this._callback(this._counters); |
815 interval -= this._remainder; | 815 interval -= this._remainder; |
816 while (interval >= this._quantDuration) { | 816 while (interval >= this._quantDuration) { |
817 var counters = []; | 817 var counters = []; |
818 counters[group] = this._quantDuration; | 818 counters[group] = this._quantDuration; |
819 this._callback(counters); | 819 this._callback(counters); |
820 interval -= this._quantDuration; | 820 interval -= this._quantDuration; |
821 } | 821 } |
822 this._counters = []; | 822 this._counters = []; |
823 this._counters[group] = interval; | 823 this._counters[group] = interval; |
824 this._lastTime = time; | 824 this._lastTime = time; |
825 this._remainder = this._quantDuration - interval; | 825 this._remainder = this._quantDuration - interval; |
826 } | 826 } |
827 } | 827 }; |
OLD | NEW |