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 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 this._canvas.addEventListener('mousemove', this._onMouseMove.bind(this), fal
se); | 72 this._canvas.addEventListener('mousemove', this._onMouseMove.bind(this), fal
se); |
73 this._canvas.addEventListener('mouseout', this._onMouseOut.bind(this), false
); | 73 this._canvas.addEventListener('mouseout', this._onMouseOut.bind(this), false
); |
74 this._canvas.addEventListener('click', this._onClick.bind(this), false); | 74 this._canvas.addEventListener('click', this._onClick.bind(this), false); |
75 this._canvas.addEventListener('keydown', this._onKeyDown.bind(this), false); | 75 this._canvas.addEventListener('keydown', this._onKeyDown.bind(this), false); |
76 | 76 |
77 this._entryInfo = this.viewportElement.createChild('div', 'flame-chart-entry
-info'); | 77 this._entryInfo = this.viewportElement.createChild('div', 'flame-chart-entry
-info'); |
78 this._markerHighlighElement = this.viewportElement.createChild('div', 'flame
-chart-marker-highlight-element'); | 78 this._markerHighlighElement = this.viewportElement.createChild('div', 'flame
-chart-marker-highlight-element'); |
79 this._highlightElement = this.viewportElement.createChild('div', 'flame-char
t-highlight-element'); | 79 this._highlightElement = this.viewportElement.createChild('div', 'flame-char
t-highlight-element'); |
80 this._selectedElement = this.viewportElement.createChild('div', 'flame-chart
-selected-element'); | 80 this._selectedElement = this.viewportElement.createChild('div', 'flame-chart
-selected-element'); |
81 | 81 |
| 82 this._rulerEnabled = true; |
82 this._windowLeft = 0.0; | 83 this._windowLeft = 0.0; |
83 this._windowRight = 1.0; | 84 this._windowRight = 1.0; |
84 this._timeWindowLeft = 0; | 85 this._timeWindowLeft = 0; |
85 this._timeWindowRight = Infinity; | 86 this._timeWindowRight = Infinity; |
86 this._rangeSelectionStart = 0; | 87 this._rangeSelectionStart = 0; |
87 this._rangeSelectionEnd = 0; | 88 this._rangeSelectionEnd = 0; |
88 this._barHeight = dataProvider.barHeight(); | 89 this._barHeight = dataProvider.barHeight(); |
89 this._paddingLeft = this._dataProvider.paddingLeft(); | 90 this._paddingLeft = this._dataProvider.paddingLeft(); |
90 var markerPadding = 2; | 91 var markerPadding = 2; |
91 this._markerRadius = this._barHeight / 2 - markerPadding; | 92 this._markerRadius = this._barHeight / 2 - markerPadding; |
(...skipping 20 matching lines...) Expand all Loading... |
112 } | 113 } |
113 | 114 |
114 /** | 115 /** |
115 * @override | 116 * @override |
116 */ | 117 */ |
117 willHide() { | 118 willHide() { |
118 this.hideHighlight(); | 119 this.hideHighlight(); |
119 } | 120 } |
120 | 121 |
121 /** | 122 /** |
| 123 * @param {boolean} enable |
| 124 */ |
| 125 enableRuler(enable) { |
| 126 this._rulerEnabled = enable; |
| 127 } |
| 128 |
| 129 /** |
122 * @param {number} entryIndex | 130 * @param {number} entryIndex |
123 */ | 131 */ |
124 highlightEntry(entryIndex) { | 132 highlightEntry(entryIndex) { |
125 if (this._highlightedEntryIndex === entryIndex) | 133 if (this._highlightedEntryIndex === entryIndex) |
126 return; | 134 return; |
127 this._highlightedEntryIndex = entryIndex; | 135 this._highlightedEntryIndex = entryIndex; |
128 this._updateElementPosition(this._highlightElement, this._highlightedEntryIn
dex); | 136 this._updateElementPosition(this._highlightElement, this._highlightedEntryIn
dex); |
129 } | 137 } |
130 | 138 |
131 hideHighlight() { | 139 hideHighlight() { |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
203 return; | 211 return; |
204 if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) { | 212 if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) { |
205 this.hideHighlight(); | 213 this.hideHighlight(); |
206 this.viewportElement.style.cursor = 'pointer'; | 214 this.viewportElement.style.cursor = 'pointer'; |
207 return; | 215 return; |
208 } | 216 } |
209 this._updateHighlight(); | 217 this._updateHighlight(); |
210 } | 218 } |
211 | 219 |
212 _updateHighlight() { | 220 _updateHighlight() { |
213 var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.DividersBarHeight
; | 221 var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.HeaderHeight; |
214 this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(t
his._lastMouseOffsetX) : -1; | 222 this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(t
his._lastMouseOffsetX) : -1; |
215 this._updateMarkerHighlight(); | 223 this._updateMarkerHighlight(); |
216 | 224 |
217 var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this.
_lastMouseOffsetY); | 225 var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this.
_lastMouseOffsetY); |
218 if (entryIndex === -1) { | 226 if (entryIndex === -1) { |
219 this.hideHighlight(); | 227 this.hideHighlight(); |
220 return; | 228 return; |
221 } | 229 } |
222 if (this.isDragging()) | 230 if (this.isDragging()) |
223 return; | 231 return; |
(...skipping 431 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
655 if (!text || !text.length) | 663 if (!text || !text.length) |
656 continue; | 664 continue; |
657 context.fillStyle = this._dataProvider.textColor(entryIndex); | 665 context.fillStyle = this._dataProvider.textColor(entryIndex); |
658 context.fillText(text, barX + textPadding, barY + textBaseHeight); | 666 context.fillText(text, barX + textPadding, barY + textBaseHeight); |
659 } | 667 } |
660 | 668 |
661 context.restore(); | 669 context.restore(); |
662 | 670 |
663 this._drawGroupHeaders(width, height); | 671 this._drawGroupHeaders(width, height); |
664 this._drawMarkers(); | 672 this._drawMarkers(); |
665 const headerHeight = 15; | 673 const headerHeight = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 0; |
666 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight); | 674 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight); |
667 | 675 |
668 this._updateElementPosition(this._highlightElement, this._highlightedEntryIn
dex); | 676 this._updateElementPosition(this._highlightElement, this._highlightedEntryIn
dex); |
669 this._updateElementPosition(this._selectedElement, this._selectedEntryIndex)
; | 677 this._updateElementPosition(this._selectedElement, this._selectedEntryIndex)
; |
670 this._updateMarkerHighlight(); | 678 this._updateMarkerHighlight(); |
671 } | 679 } |
672 | 680 |
673 /** | 681 /** |
674 * @param {number} width | 682 * @param {number} width |
675 * @param {number} height | 683 * @param {number} height |
(...skipping 212 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
888 | 896 |
889 _drawMarkers() { | 897 _drawMarkers() { |
890 var markers = this._timelineData().markers; | 898 var markers = this._timelineData().markers; |
891 var left = this._markerIndexBeforeTime(this._calculator.minimumBoundary()); | 899 var left = this._markerIndexBeforeTime(this._calculator.minimumBoundary()); |
892 var rightBoundary = this._calculator.maximumBoundary(); | 900 var rightBoundary = this._calculator.maximumBoundary(); |
893 | 901 |
894 var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getCont
ext('2d')); | 902 var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getCont
ext('2d')); |
895 context.save(); | 903 context.save(); |
896 var ratio = window.devicePixelRatio; | 904 var ratio = window.devicePixelRatio; |
897 context.scale(ratio, ratio); | 905 context.scale(ratio, ratio); |
898 var height = UI.FlameChart.DividersBarHeight - 1; | 906 context.translate(0, 3); |
| 907 var height = UI.FlameChart.HeaderHeight - 1; |
899 for (var i = left; i < markers.length; i++) { | 908 for (var i = left; i < markers.length; i++) { |
900 var timestamp = markers[i].startTime(); | 909 var timestamp = markers[i].startTime(); |
901 if (timestamp > rightBoundary) | 910 if (timestamp > rightBoundary) |
902 break; | 911 break; |
903 markers[i].draw(context, this._calculator.computePosition(timestamp), heig
ht, this._timeToPixel); | 912 markers[i].draw(context, this._calculator.computePosition(timestamp), heig
ht, this._timeToPixel); |
904 } | 913 } |
905 context.restore(); | 914 context.restore(); |
906 } | 915 } |
907 | 916 |
908 _updateMarkerHighlight() { | 917 _updateMarkerHighlight() { |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
962 } | 971 } |
963 | 972 |
964 _updateLevelPositions() { | 973 _updateLevelPositions() { |
965 var levelCount = this._dataProvider.maxStackDepth(); | 974 var levelCount = this._dataProvider.maxStackDepth(); |
966 var groups = this._rawTimelineData.groups || []; | 975 var groups = this._rawTimelineData.groups || []; |
967 this._visibleLevelOffsets = new Uint32Array(levelCount + 1); | 976 this._visibleLevelOffsets = new Uint32Array(levelCount + 1); |
968 this._visibleLevels = new Uint16Array(levelCount); | 977 this._visibleLevels = new Uint16Array(levelCount); |
969 this._groupOffsets = new Uint32Array(groups.length + 1); | 978 this._groupOffsets = new Uint32Array(groups.length + 1); |
970 | 979 |
971 var groupIndex = -1; | 980 var groupIndex = -1; |
972 var currentOffset = UI.FlameChart.DividersBarHeight; | 981 var currentOffset = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 2; |
973 var visible = true; | 982 var visible = true; |
974 /** @type !Array<{nestingLevel: number, visible: boolean}> */ | 983 /** @type !Array<{nestingLevel: number, visible: boolean}> */ |
975 var groupStack = [{nestingLevel: -1, visible: true}]; | 984 var groupStack = [{nestingLevel: -1, visible: true}]; |
976 for (var level = 0; level < levelCount; ++level) { | 985 for (var level = 0; level < levelCount; ++level) { |
977 while (groupIndex < groups.length - 1 && level === groups[groupIndex + 1].
startLevel) { | 986 while (groupIndex < groups.length - 1 && level === groups[groupIndex + 1].
startLevel) { |
978 ++groupIndex; | 987 ++groupIndex; |
979 var style = groups[groupIndex].style; | 988 var style = groups[groupIndex].style; |
980 var nextLevel = true; | 989 var nextLevel = true; |
981 while (groupStack.peekLast().nestingLevel >= style.nestingLevel) { | 990 while (groupStack.peekLast().nestingLevel >= style.nestingLevel) { |
982 groupStack.pop(); | 991 groupStack.pop(); |
(...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1151 /** @type {!Map<string,!Map<string,number>>} */ | 1160 /** @type {!Map<string,!Map<string,number>>} */ |
1152 this._textWidth = new Map(); | 1161 this._textWidth = new Map(); |
1153 this.update(); | 1162 this.update(); |
1154 } | 1163 } |
1155 | 1164 |
1156 _enabled() { | 1165 _enabled() { |
1157 return this._rawTimelineDataLength !== 0; | 1166 return this._rawTimelineDataLength !== 0; |
1158 } | 1167 } |
1159 }; | 1168 }; |
1160 | 1169 |
1161 UI.FlameChart.DividersBarHeight = 18; | 1170 UI.FlameChart.HeaderHeight = 15; |
1162 | 1171 |
1163 UI.FlameChart.MinimalTimeWindowMs = 0.5; | 1172 UI.FlameChart.MinimalTimeWindowMs = 0.5; |
1164 | 1173 |
1165 /** | 1174 /** |
1166 * @interface | 1175 * @interface |
1167 */ | 1176 */ |
1168 UI.FlameChartDataProvider = function() {}; | 1177 UI.FlameChartDataProvider = function() {}; |
1169 | 1178 |
1170 /** | 1179 /** |
1171 * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined),
style: !UI.FlameChart.GroupStyle}} | 1180 * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined),
style: !UI.FlameChart.GroupStyle}} |
(...skipping 320 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1492 } | 1501 } |
1493 | 1502 |
1494 /** | 1503 /** |
1495 * @override | 1504 * @override |
1496 * @return {number} | 1505 * @return {number} |
1497 */ | 1506 */ |
1498 boundarySpan() { | 1507 boundarySpan() { |
1499 return this._maximumBoundaries - this._minimumBoundaries; | 1508 return this._maximumBoundaries - this._minimumBoundaries; |
1500 } | 1509 } |
1501 }; | 1510 }; |
OLD | NEW |