| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 Network.NetworkOverview = class extends UI.TimelineOverviewBase { | 7 Network.NetworkOverview = class extends UI.TimelineOverviewBase { |
| 8 constructor() { | 8 constructor() { |
| 9 super(); | 9 super(); |
| 10 this.element.classList.add('network-overview'); | 10 this.element.classList.add('network-overview'); |
| 11 | 11 |
| 12 /** @type {number} */ | 12 /** @type {number} */ |
| 13 this._numBands = 1; | 13 this._numBands = 1; |
| 14 /** @type {number} */ | 14 /** @type {number} */ |
| 15 this._windowStart = 0; | 15 this._windowStart = 0; |
| 16 /** @type {number} */ | 16 /** @type {number} */ |
| 17 this._windowEnd = 0; | 17 this._windowEnd = 0; |
| 18 /** @type {boolean} */ | 18 /** @type {boolean} */ |
| 19 this._restoringWindow = false; | 19 this._restoringWindow = false; |
| 20 /** @type {boolean} */ | 20 /** @type {boolean} */ |
| 21 this._updateScheduled = false; | 21 this._updateScheduled = false; |
| 22 /** @type {number} */ | |
| 23 this._canvasWidth = 0; | |
| 24 /** @type {number} */ | |
| 25 this._canvasHeight = 0; | |
| 26 | 22 |
| 27 SDK.targetManager.addModelListener( | 23 SDK.targetManager.addModelListener( |
| 28 SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this._loadEven
tFired, this); | 24 SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.Load, this._loadEven
tFired, this); |
| 29 SDK.targetManager.addModelListener( | 25 SDK.targetManager.addModelListener( |
| 30 SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.DOMContentLoaded, th
is._domContentLoadedEventFired, this); | 26 SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.DOMContentLoaded, th
is._domContentLoadedEventFired, this); |
| 31 | 27 |
| 32 this.reset(); | 28 this.reset(); |
| 33 } | 29 } |
| 34 | 30 |
| 35 /** | 31 /** |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 104 wasShown() { | 100 wasShown() { |
| 105 this.onResize(); | 101 this.onResize(); |
| 106 } | 102 } |
| 107 | 103 |
| 108 /** | 104 /** |
| 109 * @override | 105 * @override |
| 110 */ | 106 */ |
| 111 onResize() { | 107 onResize() { |
| 112 var width = this.element.offsetWidth; | 108 var width = this.element.offsetWidth; |
| 113 var height = this.element.offsetHeight; | 109 var height = this.element.offsetHeight; |
| 114 this._calculator.setDisplayWindow(width); | 110 this.calculator().setDisplayWindow(width); |
| 115 this.resetCanvas(); | 111 this.resetCanvas(); |
| 116 var numBands = (((height - 1) / Network.NetworkOverview._bandHeight) - 1) |
0; | 112 var numBands = (((height - 1) / Network.NetworkOverview._bandHeight) - 1) |
0; |
| 117 this._numBands = (numBands > 0) ? numBands : 1; | 113 this._numBands = (numBands > 0) ? numBands : 1; |
| 118 this.scheduleUpdate(); | 114 this.scheduleUpdate(); |
| 119 } | 115 } |
| 120 | 116 |
| 121 /** | 117 /** |
| 122 * @override | 118 * @override |
| 123 */ | 119 */ |
| 124 reset() { | 120 reset() { |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 157 this._updateScheduled = true; | 153 this._updateScheduled = true; |
| 158 this.element.window().requestAnimationFrame(this.update.bind(this)); | 154 this.element.window().requestAnimationFrame(this.update.bind(this)); |
| 159 } | 155 } |
| 160 | 156 |
| 161 /** | 157 /** |
| 162 * @override | 158 * @override |
| 163 */ | 159 */ |
| 164 update() { | 160 update() { |
| 165 this._updateScheduled = false; | 161 this._updateScheduled = false; |
| 166 | 162 |
| 167 var newBoundary = | 163 var calculator = this.calculator(); |
| 168 new Network.NetworkTimeBoundary(this._calculator.minimumBoundary(), this
._calculator.maximumBoundary()); | 164 |
| 165 var newBoundary = new Network.NetworkTimeBoundary(calculator.minimumBoundary
(), calculator.maximumBoundary()); |
| 169 if (!this._lastBoundary || !newBoundary.equals(this._lastBoundary)) { | 166 if (!this._lastBoundary || !newBoundary.equals(this._lastBoundary)) { |
| 170 var span = this._calculator.boundarySpan(); | 167 var span = calculator.boundarySpan(); |
| 171 while (this._span < span) | 168 while (this._span < span) |
| 172 this._span *= 1.25; | 169 this._span *= 1.25; |
| 173 this._calculator.setBounds(this._calculator.minimumBoundary(), this._calcu
lator.minimumBoundary() + this._span); | 170 calculator.setBounds(calculator.minimumBoundary(), calculator.minimumBound
ary() + this._span); |
| 174 this._lastBoundary = | 171 this._lastBoundary = new Network.NetworkTimeBoundary(calculator.minimumBou
ndary(), calculator.maximumBoundary()); |
| 175 new Network.NetworkTimeBoundary(this._calculator.minimumBoundary(), th
is._calculator.maximumBoundary()); | |
| 176 if (this._windowStart || this._windowEnd) { | 172 if (this._windowStart || this._windowEnd) { |
| 177 this._restoringWindow = true; | 173 this._restoringWindow = true; |
| 178 var startTime = this._calculator.minimumBoundary(); | 174 var startTime = calculator.minimumBoundary(); |
| 179 var totalTime = this._calculator.boundarySpan(); | 175 var totalTime = calculator.boundarySpan(); |
| 180 var left = (this._windowStart - startTime) / totalTime; | 176 var left = (this._windowStart - startTime) / totalTime; |
| 181 var right = (this._windowEnd - startTime) / totalTime; | 177 var right = (this._windowEnd - startTime) / totalTime; |
| 182 this._restoringWindow = false; | 178 this._restoringWindow = false; |
| 183 } | 179 } |
| 184 } | 180 } |
| 185 | 181 |
| 186 var context = this._canvas.getContext('2d'); | 182 var context = this.context(); |
| 187 var calculator = this._calculator; | |
| 188 var linesByType = {}; | 183 var linesByType = {}; |
| 189 var paddingTop = 2; | 184 var paddingTop = 2; |
| 190 | 185 |
| 191 /** | 186 /** |
| 192 * @param {string} type | 187 * @param {string} type |
| 193 * @param {string} strokeStyle | 188 * @param {string} strokeStyle |
| 194 */ | 189 */ |
| 195 function drawLines(type, strokeStyle) { | 190 function drawLines(type, strokeStyle) { |
| 196 var lines = linesByType[type]; | 191 var lines = linesByType[type]; |
| 197 if (!lines) | 192 if (!lines) |
| (...skipping 28 matching lines...) Expand all Loading... |
| 226 lines.push(y, start, end); | 221 lines.push(y, start, end); |
| 227 } | 222 } |
| 228 | 223 |
| 229 var requests = this._requestsList; | 224 var requests = this._requestsList; |
| 230 var n = requests.length; | 225 var n = requests.length; |
| 231 for (var i = 0; i < n; ++i) { | 226 for (var i = 0; i < n; ++i) { |
| 232 var request = requests[i]; | 227 var request = requests[i]; |
| 233 var band = this._bandId(request.connectionId); | 228 var band = this._bandId(request.connectionId); |
| 234 var y = (band === -1) ? 0 : (band % this._numBands + 1); | 229 var y = (band === -1) ? 0 : (band % this._numBands + 1); |
| 235 var timeRanges = | 230 var timeRanges = |
| 236 Network.RequestTimingView.calculateRequestTimeRanges(request, this._ca
lculator.minimumBoundary()); | 231 Network.RequestTimingView.calculateRequestTimeRanges(request, this.cal
culator().minimumBoundary()); |
| 237 for (var j = 0; j < timeRanges.length; ++j) { | 232 for (var j = 0; j < timeRanges.length; ++j) { |
| 238 var type = timeRanges[j].name; | 233 var type = timeRanges[j].name; |
| 239 if (band !== -1 || type === Network.RequestTimeRangeNames.Total) | 234 if (band !== -1 || type === Network.RequestTimeRangeNames.Total) |
| 240 addLine(type, y, timeRanges[j].start * 1000, timeRanges[j].end * 1000)
; | 235 addLine(type, y, timeRanges[j].start * 1000, timeRanges[j].end * 1000)
; |
| 241 } | 236 } |
| 242 } | 237 } |
| 243 | 238 |
| 244 context.clearRect(0, 0, this._canvas.width, this._canvas.height); | 239 context.clearRect(0, 0, this.width(), this.height()); |
| 245 context.save(); | 240 context.save(); |
| 246 context.scale(window.devicePixelRatio, window.devicePixelRatio); | 241 context.scale(window.devicePixelRatio, window.devicePixelRatio); |
| 247 context.lineWidth = 2; | 242 context.lineWidth = 2; |
| 248 drawLines(Network.RequestTimeRangeNames.Total, '#CCCCCC'); | 243 drawLines(Network.RequestTimeRangeNames.Total, '#CCCCCC'); |
| 249 drawLines(Network.RequestTimeRangeNames.Blocking, '#AAAAAA'); | 244 drawLines(Network.RequestTimeRangeNames.Blocking, '#AAAAAA'); |
| 250 drawLines(Network.RequestTimeRangeNames.Connecting, '#FF9800'); | 245 drawLines(Network.RequestTimeRangeNames.Connecting, '#FF9800'); |
| 251 drawLines(Network.RequestTimeRangeNames.ServiceWorker, '#FF9800'); | 246 drawLines(Network.RequestTimeRangeNames.ServiceWorker, '#FF9800'); |
| 252 drawLines(Network.RequestTimeRangeNames.ServiceWorkerPreparation, '#FF9800')
; | 247 drawLines(Network.RequestTimeRangeNames.ServiceWorkerPreparation, '#FF9800')
; |
| 253 drawLines(Network.RequestTimeRangeNames.Push, '#8CDBff'); | 248 drawLines(Network.RequestTimeRangeNames.Push, '#8CDBff'); |
| 254 drawLines(Network.RequestTimeRangeNames.Proxy, '#A1887F'); | 249 drawLines(Network.RequestTimeRangeNames.Proxy, '#A1887F'); |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 289 } | 284 } |
| 290 context.restore(); | 285 context.restore(); |
| 291 } | 286 } |
| 292 }; | 287 }; |
| 293 | 288 |
| 294 /** @type {number} */ | 289 /** @type {number} */ |
| 295 Network.NetworkOverview._bandHeight = 3; | 290 Network.NetworkOverview._bandHeight = 3; |
| 296 | 291 |
| 297 /** @typedef {{start: number, end: number}} */ | 292 /** @typedef {{start: number, end: number}} */ |
| 298 Network.NetworkOverview.Window; | 293 Network.NetworkOverview.Window; |
| OLD | NEW |