Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js

Issue 2596023002: DevTools: remove ruler bar from the main flamechart (Closed)
Patch Set: rebaseline Created 3 years, 12 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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
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
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 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698