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 13 matching lines...) Expand all Loading... |
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, | 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY | 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
29 */ | 29 */ |
30 | 30 |
31 /** | 31 /** |
32 * @interface | 32 * @interface |
33 */ | 33 */ |
34 WebInspector.FlameChartDelegate = function() { } | 34 WebInspector.FlameChartDelegate = function() { }; |
35 | 35 |
36 WebInspector.FlameChartDelegate.prototype = { | 36 WebInspector.FlameChartDelegate.prototype = { |
37 /** | 37 /** |
38 * @param {number} startTime | 38 * @param {number} startTime |
39 * @param {number} endTime | 39 * @param {number} endTime |
40 */ | 40 */ |
41 requestWindowTimes: function(startTime, endTime) { }, | 41 requestWindowTimes: function(startTime, endTime) { }, |
42 | 42 |
43 /** | 43 /** |
44 * @param {number} startTime | 44 * @param {number} startTime |
45 * @param {number} endTime | 45 * @param {number} endTime |
46 */ | 46 */ |
47 updateRangeSelection: function(startTime, endTime) { }, | 47 updateRangeSelection: function(startTime, endTime) { }, |
48 } | 48 }; |
49 | 49 |
50 /** | 50 /** |
51 * @constructor | 51 * @constructor |
52 * @extends {WebInspector.ChartViewport} | 52 * @extends {WebInspector.ChartViewport} |
53 * @param {!WebInspector.FlameChartDataProvider} dataProvider | 53 * @param {!WebInspector.FlameChartDataProvider} dataProvider |
54 * @param {!WebInspector.FlameChartDelegate} flameChartDelegate | 54 * @param {!WebInspector.FlameChartDelegate} flameChartDelegate |
55 * @param {!WebInspector.Setting=} groupExpansionSetting | 55 * @param {!WebInspector.Setting=} groupExpansionSetting |
56 */ | 56 */ |
57 WebInspector.FlameChart = function(dataProvider, flameChartDelegate, groupExpans
ionSetting) | 57 WebInspector.FlameChart = function(dataProvider, flameChartDelegate, groupExpans
ionSetting) |
58 { | 58 { |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
102 this._headerLabelYPadding = 2; | 102 this._headerLabelYPadding = 2; |
103 | 103 |
104 this._highlightedMarkerIndex = -1; | 104 this._highlightedMarkerIndex = -1; |
105 this._highlightedEntryIndex = -1; | 105 this._highlightedEntryIndex = -1; |
106 this._selectedEntryIndex = -1; | 106 this._selectedEntryIndex = -1; |
107 this._rawTimelineDataLength = 0; | 107 this._rawTimelineDataLength = 0; |
108 /** @type {!Map<string,!Map<string,number>>} */ | 108 /** @type {!Map<string,!Map<string,number>>} */ |
109 this._textWidth = new Map(); | 109 this._textWidth = new Map(); |
110 | 110 |
111 this._lastMouseOffsetX = 0; | 111 this._lastMouseOffsetX = 0; |
112 } | 112 }; |
113 | 113 |
114 WebInspector.FlameChart.DividersBarHeight = 18; | 114 WebInspector.FlameChart.DividersBarHeight = 18; |
115 | 115 |
116 WebInspector.FlameChart.MinimalTimeWindowMs = 0.5; | 116 WebInspector.FlameChart.MinimalTimeWindowMs = 0.5; |
117 | 117 |
118 /** | 118 /** |
119 * @interface | 119 * @interface |
120 */ | 120 */ |
121 WebInspector.FlameChartDataProvider = function() | 121 WebInspector.FlameChartDataProvider = function() |
122 { | 122 { |
123 } | 123 }; |
124 | 124 |
125 /** | 125 /** |
126 * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined),
style: !WebInspector.FlameChart.GroupStyle}} | 126 * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined),
style: !WebInspector.FlameChart.GroupStyle}} |
127 */ | 127 */ |
128 WebInspector.FlameChart.Group; | 128 WebInspector.FlameChart.Group; |
129 | 129 |
130 /** | 130 /** |
131 * @typedef {!{ | 131 * @typedef {!{ |
132 * height: number, | 132 * height: number, |
133 * padding: number, | 133 * padding: number, |
(...skipping 20 matching lines...) Expand all Loading... |
154 this.entryLevels = entryLevels; | 154 this.entryLevels = entryLevels; |
155 this.entryTotalTimes = entryTotalTimes; | 155 this.entryTotalTimes = entryTotalTimes; |
156 this.entryStartTimes = entryStartTimes; | 156 this.entryStartTimes = entryStartTimes; |
157 this.groups = groups; | 157 this.groups = groups; |
158 /** @type {!Array.<!WebInspector.FlameChartMarker>} */ | 158 /** @type {!Array.<!WebInspector.FlameChartMarker>} */ |
159 this.markers = []; | 159 this.markers = []; |
160 this.flowStartTimes = []; | 160 this.flowStartTimes = []; |
161 this.flowStartLevels = []; | 161 this.flowStartLevels = []; |
162 this.flowEndTimes = []; | 162 this.flowEndTimes = []; |
163 this.flowEndLevels = []; | 163 this.flowEndLevels = []; |
164 } | 164 }; |
165 | 165 |
166 WebInspector.FlameChartDataProvider.prototype = { | 166 WebInspector.FlameChartDataProvider.prototype = { |
167 /** | 167 /** |
168 * @return {number} | 168 * @return {number} |
169 */ | 169 */ |
170 barHeight: function() { }, | 170 barHeight: function() { }, |
171 | 171 |
172 /** | 172 /** |
173 * @return {number} | 173 * @return {number} |
174 */ | 174 */ |
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
264 | 264 |
265 /** | 265 /** |
266 * @return {?{startTime: number, endTime: number}} | 266 * @return {?{startTime: number, endTime: number}} |
267 */ | 267 */ |
268 highlightTimeRange: function(entryIndex) { }, | 268 highlightTimeRange: function(entryIndex) { }, |
269 | 269 |
270 /** | 270 /** |
271 * @return {number} | 271 * @return {number} |
272 */ | 272 */ |
273 paddingLeft: function() { }, | 273 paddingLeft: function() { }, |
274 } | 274 }; |
275 | 275 |
276 /** | 276 /** |
277 * @interface | 277 * @interface |
278 */ | 278 */ |
279 WebInspector.FlameChartMarker = function() | 279 WebInspector.FlameChartMarker = function() |
280 { | 280 { |
281 } | 281 }; |
282 | 282 |
283 WebInspector.FlameChartMarker.prototype = { | 283 WebInspector.FlameChartMarker.prototype = { |
284 /** | 284 /** |
285 * @return {number} | 285 * @return {number} |
286 */ | 286 */ |
287 startTime: function() { }, | 287 startTime: function() { }, |
288 | 288 |
289 /** | 289 /** |
290 * @return {string} | 290 * @return {string} |
291 */ | 291 */ |
292 color: function() { }, | 292 color: function() { }, |
293 | 293 |
294 /** | 294 /** |
295 * @return {string} | 295 * @return {string} |
296 */ | 296 */ |
297 title: function() { }, | 297 title: function() { }, |
298 | 298 |
299 /** | 299 /** |
300 * @param {!CanvasRenderingContext2D} context | 300 * @param {!CanvasRenderingContext2D} context |
301 * @param {number} x | 301 * @param {number} x |
302 * @param {number} height | 302 * @param {number} height |
303 * @param {number} pixelsPerMillisecond | 303 * @param {number} pixelsPerMillisecond |
304 */ | 304 */ |
305 draw: function(context, x, height, pixelsPerMillisecond) { }, | 305 draw: function(context, x, height, pixelsPerMillisecond) { }, |
306 } | 306 }; |
307 | 307 |
308 /** @enum {symbol} */ | 308 /** @enum {symbol} */ |
309 WebInspector.FlameChart.Events = { | 309 WebInspector.FlameChart.Events = { |
310 EntrySelected: Symbol("EntrySelected") | 310 EntrySelected: Symbol("EntrySelected") |
311 } | 311 }; |
312 | 312 |
313 | 313 |
314 /** | 314 /** |
315 * @constructor | 315 * @constructor |
316 * @param {!{min: number, max: number}|number=} hueSpace | 316 * @param {!{min: number, max: number}|number=} hueSpace |
317 * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSp
ace | 317 * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSp
ace |
318 * @param {!{min: number, max: number, count: (number|undefined)}|number=} light
nessSpace | 318 * @param {!{min: number, max: number, count: (number|undefined)}|number=} light
nessSpace |
319 * @param {!{min: number, max: number, count: (number|undefined)}|number=} alpha
Space | 319 * @param {!{min: number, max: number, count: (number|undefined)}|number=} alpha
Space |
320 */ | 320 */ |
321 WebInspector.FlameChart.ColorGenerator = function(hueSpace, satSpace, lightnessS
pace, alphaSpace) | 321 WebInspector.FlameChart.ColorGenerator = function(hueSpace, satSpace, lightnessS
pace, alphaSpace) |
322 { | 322 { |
323 this._hueSpace = hueSpace || { min: 0, max: 360 }; | 323 this._hueSpace = hueSpace || { min: 0, max: 360 }; |
324 this._satSpace = satSpace || 67; | 324 this._satSpace = satSpace || 67; |
325 this._lightnessSpace = lightnessSpace || 80; | 325 this._lightnessSpace = lightnessSpace || 80; |
326 this._alphaSpace = alphaSpace || 1; | 326 this._alphaSpace = alphaSpace || 1; |
327 /** @type {!Map<string, string>} */ | 327 /** @type {!Map<string, string>} */ |
328 this._colors = new Map(); | 328 this._colors = new Map(); |
329 } | 329 }; |
330 | 330 |
331 WebInspector.FlameChart.ColorGenerator.prototype = { | 331 WebInspector.FlameChart.ColorGenerator.prototype = { |
332 /** | 332 /** |
333 * @param {string} id | 333 * @param {string} id |
334 * @param {string} color | 334 * @param {string} color |
335 */ | 335 */ |
336 setColorForID: function(id, color) | 336 setColorForID: function(id, color) |
337 { | 337 { |
338 this._colors.set(id, color); | 338 this._colors.set(id, color); |
339 }, | 339 }, |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
372 * @return {number} | 372 * @return {number} |
373 */ | 373 */ |
374 _indexToValueInSpace: function(index, space) | 374 _indexToValueInSpace: function(index, space) |
375 { | 375 { |
376 if (typeof space === "number") | 376 if (typeof space === "number") |
377 return space; | 377 return space; |
378 var count = space.count || space.max - space.min; | 378 var count = space.count || space.max - space.min; |
379 index %= count; | 379 index %= count; |
380 return space.min + Math.floor(index / (count - 1) * (space.max - space.m
in)); | 380 return space.min + Math.floor(index / (count - 1) * (space.max - space.m
in)); |
381 } | 381 } |
382 } | 382 }; |
383 | 383 |
384 | 384 |
385 /** | 385 /** |
386 * @constructor | 386 * @constructor |
387 * @implements {WebInspector.TimelineGrid.Calculator} | 387 * @implements {WebInspector.TimelineGrid.Calculator} |
388 * @param {!WebInspector.FlameChartDataProvider} dataProvider | 388 * @param {!WebInspector.FlameChartDataProvider} dataProvider |
389 */ | 389 */ |
390 WebInspector.FlameChart.Calculator = function(dataProvider) | 390 WebInspector.FlameChart.Calculator = function(dataProvider) |
391 { | 391 { |
392 this._dataProvider = dataProvider; | 392 this._dataProvider = dataProvider; |
393 this._paddingLeft = 0; | 393 this._paddingLeft = 0; |
394 } | 394 }; |
395 | 395 |
396 WebInspector.FlameChart.Calculator.prototype = { | 396 WebInspector.FlameChart.Calculator.prototype = { |
397 /** | 397 /** |
398 * @override | 398 * @override |
399 * @return {number} | 399 * @return {number} |
400 */ | 400 */ |
401 paddingLeft: function() | 401 paddingLeft: function() |
402 { | 402 { |
403 return this._paddingLeft; | 403 return this._paddingLeft; |
404 }, | 404 }, |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
466 }, | 466 }, |
467 | 467 |
468 /** | 468 /** |
469 * @override | 469 * @override |
470 * @return {number} | 470 * @return {number} |
471 */ | 471 */ |
472 boundarySpan: function() | 472 boundarySpan: function() |
473 { | 473 { |
474 return this._maximumBoundaries - this._minimumBoundaries; | 474 return this._maximumBoundaries - this._minimumBoundaries; |
475 } | 475 } |
476 } | 476 }; |
477 | 477 |
478 WebInspector.FlameChart.prototype = { | 478 WebInspector.FlameChart.prototype = { |
479 /** | 479 /** |
480 * @override | 480 * @override |
481 */ | 481 */ |
482 willHide: function() | 482 willHide: function() |
483 { | 483 { |
484 this.hideHighlight(); | 484 this.hideHighlight(); |
485 }, | 485 }, |
486 | 486 |
(...skipping 593 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1080 context.translate(0, -top); | 1080 context.translate(0, -top); |
1081 | 1081 |
1082 context.fillStyle = WebInspector.themeSupport.patchColor("#eee", colorUs
age.Background); | 1082 context.fillStyle = WebInspector.themeSupport.patchColor("#eee", colorUs
age.Background); |
1083 forEachGroup.call(this, (offset, index, group) => { | 1083 forEachGroup.call(this, (offset, index, group) => { |
1084 var paddingHeight = group.style.padding; | 1084 var paddingHeight = group.style.padding; |
1085 if (paddingHeight < 5) | 1085 if (paddingHeight < 5) |
1086 return; | 1086 return; |
1087 context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight
- 4); | 1087 context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight
- 4); |
1088 }); | 1088 }); |
1089 if (groups.length && lastGroupOffset < top + height) | 1089 if (groups.length && lastGroupOffset < top + height) |
1090 context.fillRect(0, lastGroupOffset + 2, width, top + height - lastG
roupOffset) | 1090 context.fillRect(0, lastGroupOffset + 2, width, top + height - lastG
roupOffset); |
1091 | 1091 |
1092 context.strokeStyle = WebInspector.themeSupport.patchColor("#bbb", color
Usage.Background); | 1092 context.strokeStyle = WebInspector.themeSupport.patchColor("#bbb", color
Usage.Background); |
1093 context.beginPath(); | 1093 context.beginPath(); |
1094 forEachGroup.call(this, (offset, index, group, isFirst) => { | 1094 forEachGroup.call(this, (offset, index, group, isFirst) => { |
1095 if (isFirst || group.style.padding < 4) | 1095 if (isFirst || group.style.padding < 4) |
1096 return; | 1096 return; |
1097 hLine(offset - 2.5); | 1097 hLine(offset - 2.5); |
1098 }); | 1098 }); |
1099 hLine(lastGroupOffset + 0.5); | 1099 hLine(lastGroupOffset + 0.5); |
1100 context.stroke(); | 1100 context.stroke(); |
(...skipping 25 matching lines...) Expand all Loading... |
1126 } | 1126 } |
1127 context.fillStyle = group.style.color; | 1127 context.fillStyle = group.style.color; |
1128 context.fillText(group.name, Math.floor(this._expansionArrowIndent *
(group.style.nestingLevel + 1) + this._arrowSide), offset + textBaseHeight); | 1128 context.fillText(group.name, Math.floor(this._expansionArrowIndent *
(group.style.nestingLevel + 1) + this._arrowSide), offset + textBaseHeight); |
1129 }); | 1129 }); |
1130 context.restore(); | 1130 context.restore(); |
1131 | 1131 |
1132 context.fillStyle = WebInspector.themeSupport.patchColor("#6e6e6e", colo
rUsage.Foreground); | 1132 context.fillStyle = WebInspector.themeSupport.patchColor("#6e6e6e", colo
rUsage.Foreground); |
1133 context.beginPath(); | 1133 context.beginPath(); |
1134 forEachGroup.call(this, (offset, index, group) => { | 1134 forEachGroup.call(this, (offset, index, group) => { |
1135 if (this._isGroupCollapsible(index)) | 1135 if (this._isGroupCollapsible(index)) |
1136 drawExpansionArrow.call(this, this._expansionArrowIndent * (grou
p.style.nestingLevel + 1), offset + textBaseHeight - this._arrowSide / 2, !!grou
p.expanded) | 1136 drawExpansionArrow.call(this, this._expansionArrowIndent * (grou
p.style.nestingLevel + 1), offset + textBaseHeight - this._arrowSide / 2, !!grou
p.expanded); |
1137 }); | 1137 }); |
1138 context.fill(); | 1138 context.fill(); |
1139 | 1139 |
1140 context.strokeStyle = WebInspector.themeSupport.patchColor("#ddd", color
Usage.Background); | 1140 context.strokeStyle = WebInspector.themeSupport.patchColor("#ddd", color
Usage.Background); |
1141 context.beginPath(); | 1141 context.beginPath(); |
1142 context.stroke(); | 1142 context.stroke(); |
1143 | 1143 |
1144 context.restore(); | 1144 context.restore(); |
1145 | 1145 |
1146 /** | 1146 /** |
(...skipping 514 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1661 this._textWidth = new Map(); | 1661 this._textWidth = new Map(); |
1662 this.update(); | 1662 this.update(); |
1663 }, | 1663 }, |
1664 | 1664 |
1665 _enabled: function() | 1665 _enabled: function() |
1666 { | 1666 { |
1667 return this._rawTimelineDataLength !== 0; | 1667 return this._rawTimelineDataLength !== 0; |
1668 }, | 1668 }, |
1669 | 1669 |
1670 __proto__: WebInspector.ChartViewport.prototype | 1670 __proto__: WebInspector.ChartViewport.prototype |
1671 } | 1671 }; |
OLD | NEW |