| 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 |