| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. | 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. |
| 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> | 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> |
| 4 * Copyright (C) 2009 Google Inc. All rights reserved. | 4 * Copyright (C) 2009 Google Inc. All rights reserved. |
| 5 * | 5 * |
| 6 * Redistribution and use in source and binary forms, with or without | 6 * Redistribution and use in source and binary forms, with or without |
| 7 * modification, are permitted provided that the following conditions | 7 * modification, are permitted provided that the following conditions |
| 8 * are met: | 8 * are met: |
| 9 * | 9 * |
| 10 * 1. Redistributions of source code must retain the above copyright | 10 * 1. Redistributions of source code must retain the above copyright |
| (...skipping 13 matching lines...) Expand all Loading... |
| 24 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; | 24 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
| 25 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND | 25 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND |
| 26 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | 26 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF | 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF |
| 28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | 28 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 29 */ | 29 */ |
| 30 | 30 |
| 31 /** | 31 /** |
| 32 * @unrestricted | 32 * @unrestricted |
| 33 */ | 33 */ |
| 34 WebInspector.TimelineGrid = class { | 34 UI.TimelineGrid = class { |
| 35 constructor() { | 35 constructor() { |
| 36 this.element = createElement('div'); | 36 this.element = createElement('div'); |
| 37 WebInspector.appendStyle(this.element, 'ui_lazy/timelineGrid.css'); | 37 UI.appendStyle(this.element, 'ui_lazy/timelineGrid.css'); |
| 38 | 38 |
| 39 this._dividersElement = this.element.createChild('div', 'resources-dividers'
); | 39 this._dividersElement = this.element.createChild('div', 'resources-dividers'
); |
| 40 | 40 |
| 41 this._gridHeaderElement = createElement('div'); | 41 this._gridHeaderElement = createElement('div'); |
| 42 this._gridHeaderElement.classList.add('timeline-grid-header'); | 42 this._gridHeaderElement.classList.add('timeline-grid-header'); |
| 43 this._eventDividersElement = this._gridHeaderElement.createChild('div', 'res
ources-event-dividers'); | 43 this._eventDividersElement = this._gridHeaderElement.createChild('div', 'res
ources-event-dividers'); |
| 44 this._dividersLabelBarElement = this._gridHeaderElement.createChild('div', '
resources-dividers-label-bar'); | 44 this._dividersLabelBarElement = this._gridHeaderElement.createChild('div', '
resources-dividers-label-bar'); |
| 45 this.element.appendChild(this._gridHeaderElement); | 45 this.element.appendChild(this._gridHeaderElement); |
| 46 } | 46 } |
| 47 | 47 |
| 48 /** | 48 /** |
| 49 * @param {!WebInspector.TimelineGrid.Calculator} calculator | 49 * @param {!UI.TimelineGrid.Calculator} calculator |
| 50 * @param {number=} freeZoneAtLeft | 50 * @param {number=} freeZoneAtLeft |
| 51 * @return {!{offsets: !Array.<number>, precision: number}} | 51 * @return {!{offsets: !Array.<number>, precision: number}} |
| 52 */ | 52 */ |
| 53 static calculateDividerOffsets(calculator, freeZoneAtLeft) { | 53 static calculateDividerOffsets(calculator, freeZoneAtLeft) { |
| 54 /** @const */ var minGridSlicePx = 64; // minimal distance between grid lin
es. | 54 /** @const */ var minGridSlicePx = 64; // minimal distance between grid lin
es. |
| 55 | 55 |
| 56 var clientWidth = calculator.computePosition(calculator.maximumBoundary()); | 56 var clientWidth = calculator.computePosition(calculator.maximumBoundary()); |
| 57 var dividersCount = clientWidth / minGridSlicePx; | 57 var dividersCount = clientWidth / minGridSlicePx; |
| 58 var gridSliceTime = calculator.boundarySpan() / dividersCount; | 58 var gridSliceTime = calculator.boundarySpan() / dividersCount; |
| 59 var pixelsPerTime = clientWidth / calculator.boundarySpan(); | 59 var pixelsPerTime = clientWidth / calculator.boundarySpan(); |
| (...skipping 28 matching lines...) Expand all Loading... |
| 88 if (calculator.computePosition(time) < freeZoneAtLeft) | 88 if (calculator.computePosition(time) < freeZoneAtLeft) |
| 89 continue; | 89 continue; |
| 90 offsets.push(time); | 90 offsets.push(time); |
| 91 } | 91 } |
| 92 | 92 |
| 93 return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSl
iceTime * 1.01) / Math.LN10))}; | 93 return {offsets: offsets, precision: Math.max(0, -Math.floor(Math.log(gridSl
iceTime * 1.01) / Math.LN10))}; |
| 94 } | 94 } |
| 95 | 95 |
| 96 /** | 96 /** |
| 97 * @param {!CanvasRenderingContext2D} context | 97 * @param {!CanvasRenderingContext2D} context |
| 98 * @param {!WebInspector.TimelineGrid.Calculator} calculator | 98 * @param {!UI.TimelineGrid.Calculator} calculator |
| 99 * @param {number} paddingTop | 99 * @param {number} paddingTop |
| 100 * @param {number=} freeZoneAtLeft | 100 * @param {number=} freeZoneAtLeft |
| 101 */ | 101 */ |
| 102 static drawCanvasGrid(context, calculator, paddingTop, freeZoneAtLeft) { | 102 static drawCanvasGrid(context, calculator, paddingTop, freeZoneAtLeft) { |
| 103 context.save(); | 103 context.save(); |
| 104 var ratio = window.devicePixelRatio; | 104 var ratio = window.devicePixelRatio; |
| 105 context.scale(ratio, ratio); | 105 context.scale(ratio, ratio); |
| 106 var width = context.canvas.width / window.devicePixelRatio; | 106 var width = context.canvas.width / window.devicePixelRatio; |
| 107 var height = context.canvas.height / window.devicePixelRatio; | 107 var height = context.canvas.height / window.devicePixelRatio; |
| 108 var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calcula
tor); | 108 var dividersData = UI.TimelineGrid.calculateDividerOffsets(calculator); |
| 109 var dividerOffsets = dividersData.offsets; | 109 var dividerOffsets = dividersData.offsets; |
| 110 var precision = dividersData.precision; | 110 var precision = dividersData.precision; |
| 111 | 111 |
| 112 context.fillStyle = 'rgba(255, 255, 255, 0.5)'; | 112 context.fillStyle = 'rgba(255, 255, 255, 0.5)'; |
| 113 context.fillRect(0, 0, width, 15); | 113 context.fillRect(0, 0, width, 15); |
| 114 | 114 |
| 115 context.fillStyle = '#333'; | 115 context.fillStyle = '#333'; |
| 116 context.strokeStyle = 'rgba(0, 0, 0, 0.1)'; | 116 context.strokeStyle = 'rgba(0, 0, 0, 0.1)'; |
| 117 context.textBaseline = 'hanging'; | 117 context.textBaseline = 'hanging'; |
| 118 context.font = '11px ' + WebInspector.fontFamily(); | 118 context.font = '11px ' + Host.fontFamily(); |
| 119 context.lineWidth = 1; | 119 context.lineWidth = 1; |
| 120 | 120 |
| 121 context.translate(0.5, 0.5); | 121 context.translate(0.5, 0.5); |
| 122 const paddingRight = 4; | 122 const paddingRight = 4; |
| 123 freeZoneAtLeft = freeZoneAtLeft || 0; | 123 freeZoneAtLeft = freeZoneAtLeft || 0; |
| 124 for (var i = 0; i < dividerOffsets.length; ++i) { | 124 for (var i = 0; i < dividerOffsets.length; ++i) { |
| 125 var time = dividerOffsets[i]; | 125 var time = dividerOffsets[i]; |
| 126 var position = calculator.computePosition(time); | 126 var position = calculator.computePosition(time); |
| 127 var text = calculator.formatValue(time, precision); | 127 var text = calculator.formatValue(time, precision); |
| 128 var textWidth = context.measureText(text).width; | 128 var textWidth = context.measureText(text).width; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 143 get dividersLabelBarElement() { | 143 get dividersLabelBarElement() { |
| 144 return this._dividersLabelBarElement; | 144 return this._dividersLabelBarElement; |
| 145 } | 145 } |
| 146 | 146 |
| 147 removeDividers() { | 147 removeDividers() { |
| 148 this._dividersElement.removeChildren(); | 148 this._dividersElement.removeChildren(); |
| 149 this._dividersLabelBarElement.removeChildren(); | 149 this._dividersLabelBarElement.removeChildren(); |
| 150 } | 150 } |
| 151 | 151 |
| 152 /** | 152 /** |
| 153 * @param {!WebInspector.TimelineGrid.Calculator} calculator | 153 * @param {!UI.TimelineGrid.Calculator} calculator |
| 154 * @param {number=} freeZoneAtLeft | 154 * @param {number=} freeZoneAtLeft |
| 155 * @return {boolean} | 155 * @return {boolean} |
| 156 */ | 156 */ |
| 157 updateDividers(calculator, freeZoneAtLeft) { | 157 updateDividers(calculator, freeZoneAtLeft) { |
| 158 var dividersData = WebInspector.TimelineGrid.calculateDividerOffsets(calcula
tor, freeZoneAtLeft); | 158 var dividersData = UI.TimelineGrid.calculateDividerOffsets(calculator, freeZ
oneAtLeft); |
| 159 var dividerOffsets = dividersData.offsets; | 159 var dividerOffsets = dividersData.offsets; |
| 160 var precision = dividersData.precision; | 160 var precision = dividersData.precision; |
| 161 | 161 |
| 162 var dividersElementClientWidth = this._dividersElement.clientWidth; | 162 var dividersElementClientWidth = this._dividersElement.clientWidth; |
| 163 | 163 |
| 164 // Reuse divider elements and labels. | 164 // Reuse divider elements and labels. |
| 165 var divider = /** @type {?Element} */ (this._dividersElement.firstChild); | 165 var divider = /** @type {?Element} */ (this._dividersElement.firstChild); |
| 166 var dividerLabelBar = /** @type {?Element} */ (this._dividersLabelBarElement
.firstChild); | 166 var dividerLabelBar = /** @type {?Element} */ (this._dividersLabelBarElement
.firstChild); |
| 167 | 167 |
| 168 for (var i = 0; i < dividerOffsets.length; ++i) { | 168 for (var i = 0; i < dividerOffsets.length; ++i) { |
| (...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 249 setScrollTop(scrollTop) { | 249 setScrollTop(scrollTop) { |
| 250 this._dividersLabelBarElement.style.top = scrollTop + 'px'; | 250 this._dividersLabelBarElement.style.top = scrollTop + 'px'; |
| 251 this._eventDividersElement.style.top = scrollTop + 'px'; | 251 this._eventDividersElement.style.top = scrollTop + 'px'; |
| 252 } | 252 } |
| 253 }; | 253 }; |
| 254 | 254 |
| 255 | 255 |
| 256 /** | 256 /** |
| 257 * @interface | 257 * @interface |
| 258 */ | 258 */ |
| 259 WebInspector.TimelineGrid.Calculator = function() {}; | 259 UI.TimelineGrid.Calculator = function() {}; |
| 260 | 260 |
| 261 WebInspector.TimelineGrid.Calculator.prototype = { | 261 UI.TimelineGrid.Calculator.prototype = { |
| 262 /** | 262 /** |
| 263 * @return {number} | 263 * @return {number} |
| 264 */ | 264 */ |
| 265 paddingLeft: function() {}, | 265 paddingLeft: function() {}, |
| 266 | 266 |
| 267 /** | 267 /** |
| 268 * @param {number} time | 268 * @param {number} time |
| 269 * @return {number} | 269 * @return {number} |
| 270 */ | 270 */ |
| 271 computePosition: function(time) {}, | 271 computePosition: function(time) {}, |
| (...skipping 10 matching lines...) Expand all Loading... |
| 282 | 282 |
| 283 /** @return {number} */ | 283 /** @return {number} */ |
| 284 zeroTime: function() {}, | 284 zeroTime: function() {}, |
| 285 | 285 |
| 286 /** @return {number} */ | 286 /** @return {number} */ |
| 287 maximumBoundary: function() {}, | 287 maximumBoundary: function() {}, |
| 288 | 288 |
| 289 /** @return {number} */ | 289 /** @return {number} */ |
| 290 boundarySpan: function() {} | 290 boundarySpan: function() {} |
| 291 }; | 291 }; |
| OLD | NEW |