| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 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.NetworkWaterfallColumn = class extends UI.VBox { | 7 Network.NetworkWaterfallColumn = class extends UI.VBox { |
| 8 /** | 8 /** |
| 9 * @param {number} rowHeight | 9 * @param {number} rowHeight |
| 10 * @param {!Network.NetworkTimeCalculator} calculator | 10 * @param {!Network.NetworkTimeCalculator} calculator |
| (...skipping 16 matching lines...) Expand all Loading... |
| 27 this._rightPadding = 0; | 27 this._rightPadding = 0; |
| 28 | 28 |
| 29 this._rowHeight = rowHeight; | 29 this._rowHeight = rowHeight; |
| 30 this._headerHeight = 0; | 30 this._headerHeight = 0; |
| 31 this._calculator = calculator; | 31 this._calculator = calculator; |
| 32 | 32 |
| 33 this._popoverHelper = new UI.PopoverHelper(this.element); | 33 this._popoverHelper = new UI.PopoverHelper(this.element); |
| 34 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t
his._showPopover.bind(this)); | 34 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t
his._showPopover.bind(this)); |
| 35 this._popoverHelper.setTimeout(300, 300); | 35 this._popoverHelper.setTimeout(300, 300); |
| 36 | 36 |
| 37 /** @type {!Array<!Network.NetworkLogEntry>} */ | 37 /** @type {!Array<!Network.NetworkDataGridNode>} */ |
| 38 this._logEntries = []; | 38 this._nodes = []; |
| 39 | 39 |
| 40 /** @type {?Network.NetworkLogEntry} */ | 40 /** @type {?Network.NetworkDataGridNode} */ |
| 41 this._hoveredLogEntry = null; | 41 this._hoveredNode = null; |
| 42 /** @type {?SDK.NetworkRequest.InitiatorGraph} */ | 42 /** @type {?SDK.NetworkRequest.InitiatorGraph} */ |
| 43 this._initiatorGraph = null; | 43 this._initiatorGraph = null; |
| 44 | 44 |
| 45 /** @type {!Map<string, !Array<number>>} */ | 45 /** @type {!Map<string, !Array<number>>} */ |
| 46 this._eventDividers = new Map(); | 46 this._eventDividers = new Map(); |
| 47 | 47 |
| 48 var colorUsage = UI.ThemeSupport.ColorUsage; | 48 var colorUsage = UI.ThemeSupport.ColorUsage; |
| 49 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); | 49 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); |
| 50 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); | 50 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); |
| 51 this._rowHoverColor = UI.themeSupport.patchColor( | 51 this._rowHoverColor = UI.themeSupport.patchColor( |
| (...skipping 20 matching lines...) Expand all Loading... |
| 72 wasShown() { | 72 wasShown() { |
| 73 this.update(); | 73 this.update(); |
| 74 } | 74 } |
| 75 | 75 |
| 76 /** | 76 /** |
| 77 * @param {!Element} element | 77 * @param {!Element} element |
| 78 * @param {!Event} event | 78 * @param {!Event} event |
| 79 * @return {!AnchorBox|undefined} | 79 * @return {!AnchorBox|undefined} |
| 80 */ | 80 */ |
| 81 _getPopoverAnchor(element, event) { | 81 _getPopoverAnchor(element, event) { |
| 82 if (!this._hoveredLogEntry) | 82 if (!this._hoveredNode) |
| 83 return; | 83 return; |
| 84 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g
et() && !this._calculator.startAtZero; | 84 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g
et() && !this._calculator.startAtZero; |
| 85 if (useTimingBars) { | 85 if (useTimingBars) { |
| 86 var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hov
eredLogEntry.request(), 0) | 86 var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hov
eredNode.request(), 0) |
| 87 .find(data => data.name === Network.RequestTimeRangeNames.
Total); | 87 .find(data => data.name === Network.RequestTimeRangeNames.
Total); |
| 88 var start = this._timeToPosition(range.start); | 88 var start = this._timeToPosition(range.start); |
| 89 var end = this._timeToPosition(range.end); | 89 var end = this._timeToPosition(range.end); |
| 90 } else { | 90 } else { |
| 91 var range = this._getSimplifiedBarRange(this._hoveredLogEntry, 0); | 91 var range = this._getSimplifiedBarRange(this._hoveredNode, 0); |
| 92 var start = range.start; | 92 var start = range.start; |
| 93 var end = range.end; | 93 var end = range.end; |
| 94 } | 94 } |
| 95 | 95 |
| 96 if (end - start < 50) { | 96 if (end - start < 50) { |
| 97 var halfWidth = (end - start) / 2; | 97 var halfWidth = (end - start) / 2; |
| 98 start = start + halfWidth - 25; | 98 start = start + halfWidth - 25; |
| 99 end = end - halfWidth + 25; | 99 end = end - halfWidth + 25; |
| 100 } | 100 } |
| 101 | 101 |
| 102 if (event.clientX < this._canvasPosition.left + start || event.clientX > thi
s._canvasPosition.left + end) | 102 if (event.clientX < this._canvasPosition.left + start || event.clientX > thi
s._canvasPosition.left + end) |
| 103 return; | 103 return; |
| 104 | 104 |
| 105 var rowIndex = this._logEntries.findIndex(logEntry => this._hoveredLogEntry
=== logEntry); | 105 var rowIndex = this._nodes.findIndex(node => this._hoveredNode === node); |
| 106 var barHeight = this._getBarHeight(range.name); | 106 var barHeight = this._getBarHeight(range.name); |
| 107 var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop)
+ ((this._rowHeight - barHeight) / 2); | 107 var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop)
+ ((this._rowHeight - barHeight) / 2); |
| 108 | 108 |
| 109 if (event.clientY < this._canvasPosition.top + y || event.clientY > this._ca
nvasPosition.top + y + barHeight) | 109 if (event.clientY < this._canvasPosition.top + y || event.clientY > this._ca
nvasPosition.top + y + barHeight) |
| 110 return; | 110 return; |
| 111 | 111 |
| 112 var anchorBox = this.element.boxInWindow(); | 112 var anchorBox = this.element.boxInWindow(); |
| 113 anchorBox.x += start; | 113 anchorBox.x += start; |
| 114 anchorBox.y += y; | 114 anchorBox.y += y; |
| 115 anchorBox.width = end - start; | 115 anchorBox.width = end - start; |
| 116 anchorBox.height = barHeight; | 116 anchorBox.height = barHeight; |
| 117 return anchorBox; | 117 return anchorBox; |
| 118 } | 118 } |
| 119 | 119 |
| 120 /** | 120 /** |
| 121 * @param {!Element|!AnchorBox} anchor | 121 * @param {!Element|!AnchorBox} anchor |
| 122 * @param {!UI.Popover} popover | 122 * @param {!UI.Popover} popover |
| 123 */ | 123 */ |
| 124 _showPopover(anchor, popover) { | 124 _showPopover(anchor, popover) { |
| 125 if (!this._hoveredLogEntry) | 125 if (!this._hoveredNode) |
| 126 return; | 126 return; |
| 127 var content = Network.RequestTimingView.createTimingTable( | 127 var content = |
| 128 this._hoveredLogEntry.request(), this._calculator.minimumBoundary()); | 128 Network.RequestTimingView.createTimingTable(this._hoveredNode.request(),
this._calculator.minimumBoundary()); |
| 129 popover.showForAnchor(content, anchor); | 129 popover.showForAnchor(content, anchor); |
| 130 } | 130 } |
| 131 | 131 |
| 132 /** | 132 /** |
| 133 * @param {?Network.NetworkLogEntry} logEntry | 133 * @param {?Network.NetworkDataGridNode} node |
| 134 * @param {boolean} highlightInitiatorChain | 134 * @param {boolean} highlightInitiatorChain |
| 135 */ | 135 */ |
| 136 setHoveredLogEntry(logEntry, highlightInitiatorChain) { | 136 setHoveredNode(node, highlightInitiatorChain) { |
| 137 this._hoveredLogEntry = logEntry; | 137 this._hoveredNode = node; |
| 138 this._initiatorGraph = (highlightInitiatorChain && logEntry) ? logEntry.requ
est().initiatorGraph() : null; | 138 this._initiatorGraph = (highlightInitiatorChain && node) ? node.request().in
itiatorGraph() : null; |
| 139 this.update(); | 139 this.update(); |
| 140 } | 140 } |
| 141 | 141 |
| 142 /** | 142 /** |
| 143 * @param {number} height | 143 * @param {number} height |
| 144 */ | 144 */ |
| 145 setRowHeight(height) { | 145 setRowHeight(height) { |
| 146 this._rowHeight = height; | 146 this._rowHeight = height; |
| 147 } | 147 } |
| 148 | 148 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 164 /** | 164 /** |
| 165 * @param {!Network.NetworkTimeCalculator} calculator | 165 * @param {!Network.NetworkTimeCalculator} calculator |
| 166 */ | 166 */ |
| 167 setCalculator(calculator) { | 167 setCalculator(calculator) { |
| 168 this._calculator = calculator; | 168 this._calculator = calculator; |
| 169 } | 169 } |
| 170 | 170 |
| 171 /** | 171 /** |
| 172 * @param {number} x | 172 * @param {number} x |
| 173 * @param {number} y | 173 * @param {number} y |
| 174 * @return {?Network.NetworkLogEntry} | 174 * @return {?Network.NetworkDataGridNode} |
| 175 */ | 175 */ |
| 176 getLogEntryFromPoint(x, y) { | 176 getNodeFromPoint(x, y) { |
| 177 return this._logEntries[Math.floor((this._scrollTop + y - this._headerHeight
) / this._rowHeight)]; | 177 return this._nodes[Math.floor((this._scrollTop + y - this._headerHeight) / t
his._rowHeight)]; |
| 178 } | 178 } |
| 179 | 179 |
| 180 scheduleDraw() { | 180 scheduleDraw() { |
| 181 if (this._updateRequestID) | 181 if (this._updateRequestID) |
| 182 return; | 182 return; |
| 183 this._updateRequestID = this.element.window().requestAnimationFrame(() => th
is.update()); | 183 this._updateRequestID = this.element.window().requestAnimationFrame(() => th
is.update()); |
| 184 } | 184 } |
| 185 | 185 |
| 186 /** | 186 /** |
| 187 * @param {number=} scrollTop | 187 * @param {number=} scrollTop |
| 188 * @param {!Map<string, !Array<number>>=} eventDividers | 188 * @param {!Map<string, !Array<number>>=} eventDividers |
| 189 * @param {!Array<!Network.NetworkLogEntry>=} logEntries | 189 * @param {!Array<!Network.NetworkDataGridNode>=} nodes |
| 190 */ | 190 */ |
| 191 update(scrollTop, eventDividers, logEntries) { | 191 update(scrollTop, eventDividers, nodes) { |
| 192 if (scrollTop !== undefined) | 192 if (scrollTop !== undefined) |
| 193 this._scrollTop = scrollTop; | 193 this._scrollTop = scrollTop; |
| 194 if (logEntries) { | 194 if (nodes) { |
| 195 this._logEntries = logEntries; | 195 this._nodes = nodes; |
| 196 this._calculateCanvasSize(); | 196 this._calculateCanvasSize(); |
| 197 } | 197 } |
| 198 if (eventDividers !== undefined) | 198 if (eventDividers !== undefined) |
| 199 this._eventDividers = eventDividers; | 199 this._eventDividers = eventDividers; |
| 200 this.element.window().cancelAnimationFrame(this._updateRequestID); | 200 this.element.window().cancelAnimationFrame(this._updateRequestID); |
| 201 this._updateRequestID = null; | 201 this._updateRequestID = null; |
| 202 | 202 |
| 203 this._startTime = this._calculator.minimumBoundary(); | 203 this._startTime = this._calculator.minimumBoundary(); |
| 204 this._endTime = this._calculator.maximumBoundary(); | 204 this._endTime = this._calculator.maximumBoundary(); |
| 205 this._resetCanvas(); | 205 this._resetCanvas(); |
| (...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 271 var availableWidth = this._offsetWidth - this._leftPadding; | 271 var availableWidth = this._offsetWidth - this._leftPadding; |
| 272 var timeToPixel = availableWidth / (this._endTime - this._startTime); | 272 var timeToPixel = availableWidth / (this._endTime - this._startTime); |
| 273 return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel
); | 273 return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel
); |
| 274 } | 274 } |
| 275 | 275 |
| 276 _didDrawForTest() { | 276 _didDrawForTest() { |
| 277 } | 277 } |
| 278 | 278 |
| 279 _draw() { | 279 _draw() { |
| 280 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g
et() && !this._calculator.startAtZero; | 280 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g
et() && !this._calculator.startAtZero; |
| 281 var logEntries = this._logEntries; | 281 var nodes = this._nodes; |
| 282 var context = this._canvas.getContext('2d'); | 282 var context = this._canvas.getContext('2d'); |
| 283 context.save(); | 283 context.save(); |
| 284 context.scale(window.devicePixelRatio, window.devicePixelRatio); | 284 context.scale(window.devicePixelRatio, window.devicePixelRatio); |
| 285 context.translate(0, this._headerHeight); | 285 context.translate(0, this._headerHeight); |
| 286 context.rect(0, 0, this._offsetWidth, this._offsetHeight); | 286 context.rect(0, 0, this._offsetWidth, this._offsetHeight); |
| 287 context.clip(); | 287 context.clip(); |
| 288 var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight); | 288 var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight); |
| 289 var lastRequestIndex = | 289 var lastRequestIndex = Math.min(nodes.length, firstRequestIndex + Math.ceil(
this._offsetHeight / this._rowHeight)); |
| 290 Math.min(logEntries.length, firstRequestIndex + Math.ceil(this._offsetHe
ight / this._rowHeight)); | |
| 291 for (var i = firstRequestIndex; i < lastRequestIndex; i++) { | 290 for (var i = firstRequestIndex; i < lastRequestIndex; i++) { |
| 292 var rowOffset = this._rowHeight * i; | 291 var rowOffset = this._rowHeight * i; |
| 293 var logEntry = logEntries[i]; | 292 var node = nodes[i]; |
| 294 this._decorateRow(context, logEntry, i, rowOffset - this._scrollTop); | 293 this._decorateRow(context, node, i, rowOffset - this._scrollTop); |
| 295 if (useTimingBars) | 294 if (useTimingBars) |
| 296 this._drawTimingBars(context, logEntry, rowOffset - this._scrollTop); | 295 this._drawTimingBars(context, node, rowOffset - this._scrollTop); |
| 297 else | 296 else |
| 298 this._drawSimplifiedBars(context, logEntry, rowOffset - this._scrollTop)
; | 297 this._drawSimplifiedBars(context, node, rowOffset - this._scrollTop); |
| 299 } | 298 } |
| 300 this._drawEventDividers(context); | 299 this._drawEventDividers(context); |
| 301 context.restore(); | 300 context.restore(); |
| 302 | 301 |
| 303 const freeZoneAtLeft = 75; | 302 const freeZoneAtLeft = 75; |
| 304 const freeZoneAtRight = 18; | 303 const freeZoneAtRight = 18; |
| 305 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, th
is._headerHeight, freeZoneAtLeft); | 304 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, th
is._headerHeight, freeZoneAtLeft); |
| 306 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t
his._headerHeight); | 305 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t
his._headerHeight); |
| 307 this._didDrawForTest(); | 306 this._didDrawForTest(); |
| 308 } | 307 } |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 347 case types.Blocking: | 346 case types.Blocking: |
| 348 case types.Push: | 347 case types.Push: |
| 349 case types.Queueing: | 348 case types.Queueing: |
| 350 return 7; | 349 return 7; |
| 351 default: | 350 default: |
| 352 return 13; | 351 return 13; |
| 353 } | 352 } |
| 354 } | 353 } |
| 355 | 354 |
| 356 /** | 355 /** |
| 357 * @param {!Network.NetworkLogEntry} logEntry | 356 * @param {!Network.NetworkDataGridNode} node |
| 358 * @return {string} | 357 * @return {string} |
| 359 */ | 358 */ |
| 360 _borderColorForResourceType(logEntry) { | 359 _borderColorForResourceType(node) { |
| 361 var resourceType = logEntry.request().resourceType(); | 360 var resourceType = node.request().resourceType(); |
| 362 if (this._borderColorsForResourceTypeCache.has(resourceType)) | 361 if (this._borderColorsForResourceTypeCache.has(resourceType)) |
| 363 return this._borderColorsForResourceTypeCache.get(resourceType); | 362 return this._borderColorsForResourceTypeCache.get(resourceType); |
| 364 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc
eType; | 363 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc
eType; |
| 365 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth
er; | 364 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth
er; |
| 366 var parsedColor = Common.Color.parse(color); | 365 var parsedColor = Common.Color.parse(color); |
| 367 var hsla = parsedColor.hsla(); | 366 var hsla = parsedColor.hsla(); |
| 368 hsla[1] /= 2; | 367 hsla[1] /= 2; |
| 369 hsla[2] -= Math.min(hsla[2], 0.2); | 368 hsla[2] -= Math.min(hsla[2], 0.2); |
| 370 var resultColor = /** @type {string} */ (parsedColor.asString(null)); | 369 var resultColor = /** @type {string} */ (parsedColor.asString(null)); |
| 371 this._borderColorsForResourceTypeCache.set(resourceType, resultColor); | 370 this._borderColorsForResourceTypeCache.set(resourceType, resultColor); |
| 372 return resultColor; | 371 return resultColor; |
| 373 } | 372 } |
| 374 | 373 |
| 375 /** | 374 /** |
| 376 * @param {!CanvasRenderingContext2D} context | 375 * @param {!CanvasRenderingContext2D} context |
| 377 * @param {!Network.NetworkLogEntry} logEntry | 376 * @param {!Network.NetworkDataGridNode} node |
| 378 * @return {string|!CanvasGradient} | 377 * @return {string|!CanvasGradient} |
| 379 */ | 378 */ |
| 380 _colorForResourceType(context, logEntry) { | 379 _colorForResourceType(context, node) { |
| 381 var request = logEntry.request(); | 380 var request = node.request(); |
| 382 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc
eType; | 381 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc
eType; |
| 383 var resourceType = request.resourceType(); | 382 var resourceType = request.resourceType(); |
| 384 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth
er; | 383 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth
er; |
| 385 if (request.cached()) | 384 if (request.cached()) |
| 386 return color; | 385 return color; |
| 387 | 386 |
| 388 if (this._colorsForResourceTypeCache.has(color)) | 387 if (this._colorsForResourceTypeCache.has(color)) |
| 389 return this._colorsForResourceTypeCache.get(color); | 388 return this._colorsForResourceTypeCache.get(color); |
| 390 var parsedColor = Common.Color.parse(color); | 389 var parsedColor = Common.Color.parse(color); |
| 391 var hsla = parsedColor.hsla(); | 390 var hsla = parsedColor.hsla(); |
| 392 hsla[1] -= Math.min(hsla[1], 0.28); | 391 hsla[1] -= Math.min(hsla[1], 0.28); |
| 393 hsla[2] -= Math.min(hsla[2], 0.15); | 392 hsla[2] -= Math.min(hsla[2], 0.15); |
| 394 var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight()); | 393 var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight()); |
| 395 gradient.addColorStop(0, color); | 394 gradient.addColorStop(0, color); |
| 396 gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null)))
; | 395 gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null)))
; |
| 397 this._colorsForResourceTypeCache.set(color, gradient); | 396 this._colorsForResourceTypeCache.set(color, gradient); |
| 398 return gradient; | 397 return gradient; |
| 399 } | 398 } |
| 400 | 399 |
| 401 /** | 400 /** |
| 402 * @param {!Network.NetworkLogEntry} logEntry | 401 * @param {!Network.NetworkDataGridNode} node |
| 403 * @param {number} borderOffset | 402 * @param {number} borderOffset |
| 404 * @return {!{start: number, mid: number, end: number}} | 403 * @return {!{start: number, mid: number, end: number}} |
| 405 */ | 404 */ |
| 406 _getSimplifiedBarRange(logEntry, borderOffset) { | 405 _getSimplifiedBarRange(node, borderOffset) { |
| 407 var drawWidth = this._offsetWidth - this._leftPadding; | 406 var drawWidth = this._offsetWidth - this._leftPadding; |
| 408 var percentages = this._calculator.computeBarGraphPercentages(logEntry.reque
st()); | 407 var percentages = this._calculator.computeBarGraphPercentages(node.request()
); |
| 409 return { | 408 return { |
| 410 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt
h) + borderOffset, | 409 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt
h) + borderOffset, |
| 411 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth
) + borderOffset, | 410 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth
) + borderOffset, |
| 412 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) +
borderOffset | 411 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) +
borderOffset |
| 413 }; | 412 }; |
| 414 } | 413 } |
| 415 | 414 |
| 416 /** | 415 /** |
| 417 * @param {!CanvasRenderingContext2D} context | 416 * @param {!CanvasRenderingContext2D} context |
| 418 * @param {!Network.NetworkLogEntry} logEntry | 417 * @param {!Network.NetworkDataGridNode} node |
| 419 * @param {number} y | 418 * @param {number} y |
| 420 */ | 419 */ |
| 421 _drawSimplifiedBars(context, logEntry, y) { | 420 _drawSimplifiedBars(context, node, y) { |
| 422 const borderWidth = 1; | 421 const borderWidth = 1; |
| 423 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5; | 422 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5; |
| 424 | 423 |
| 425 context.save(); | 424 context.save(); |
| 426 var ranges = this._getSimplifiedBarRange(logEntry, borderOffset); | 425 var ranges = this._getSimplifiedBarRange(node, borderOffset); |
| 427 var height = this._getBarHeight(); | 426 var height = this._getBarHeight(); |
| 428 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt
h / 2; | 427 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt
h / 2; |
| 429 | 428 |
| 430 context.translate(0, y); | 429 context.translate(0, y); |
| 431 context.fillStyle = this._colorForResourceType(context, logEntry); | 430 context.fillStyle = this._colorForResourceType(context, node); |
| 432 context.strokeStyle = this._borderColorForResourceType(logEntry); | 431 context.strokeStyle = this._borderColorForResourceType(node); |
| 433 context.lineWidth = borderWidth; | 432 context.lineWidth = borderWidth; |
| 434 | 433 |
| 435 context.beginPath(); | 434 context.beginPath(); |
| 436 context.globalAlpha = 0.5; | 435 context.globalAlpha = 0.5; |
| 437 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt
h); | 436 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt
h); |
| 438 context.fill(); | 437 context.fill(); |
| 439 context.stroke(); | 438 context.stroke(); |
| 440 | 439 |
| 441 var barWidth = Math.max(2, ranges.end - ranges.mid); | 440 var barWidth = Math.max(2, ranges.end - ranges.mid); |
| 442 context.beginPath(); | 441 context.beginPath(); |
| 443 context.globalAlpha = 1; | 442 context.globalAlpha = 1; |
| 444 context.rect(ranges.mid, 0, barWidth, height - borderWidth); | 443 context.rect(ranges.mid, 0, barWidth, height - borderWidth); |
| 445 context.fill(); | 444 context.fill(); |
| 446 context.stroke(); | 445 context.stroke(); |
| 447 | 446 |
| 448 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ | 447 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ |
| 449 var labels = null; | 448 var labels = null; |
| 450 if (logEntry === this._hoveredLogEntry) { | 449 if (node === this._hoveredNode) { |
| 451 labels = this._calculator.computeBarGraphLabels(logEntry.request()); | 450 labels = this._calculator.computeBarGraphLabels(node.request()); |
| 452 this._drawSimplifiedBarDetails( | 451 this._drawSimplifiedBarDetails( |
| 453 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m
id + barWidth + borderOffset); | 452 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m
id + barWidth + borderOffset); |
| 454 } | 453 } |
| 455 | 454 |
| 456 if (!this._calculator.startAtZero) { | 455 if (!this._calculator.startAtZero) { |
| 457 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(l
ogEntry.request(), 0) | 456 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(n
ode.request(), 0) |
| 458 .find(data => data.name === Network.RequestTimeRan
geNames.Total); | 457 .find(data => data.name === Network.RequestTimeRan
geNames.Total); |
| 459 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0; | 458 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0; |
| 460 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start; | 459 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start; |
| 461 const wiskerTextPadding = 13; | 460 const wiskerTextPadding = 13; |
| 462 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske
rTextPadding : 0; | 461 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske
rTextPadding : 0; |
| 463 var queueingStart = this._timeToPosition(queueingRange.start); | 462 var queueingStart = this._timeToPosition(queueingRange.start); |
| 464 if (ranges.start - textOffset > queueingStart) { | 463 if (ranges.start - textOffset > queueingStart) { |
| 465 context.beginPath(); | 464 context.beginPath(); |
| 466 context.globalAlpha = 1; | 465 context.globalAlpha = 1; |
| 467 context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupp
ort.ColorUsage.Foreground); | 466 context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupp
ort.ColorUsage.Foreground); |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 523 context.lineWidth = 1; | 522 context.lineWidth = 1; |
| 524 context.moveTo(endX, Math.floor(height / 2)); | 523 context.moveTo(endX, Math.floor(height / 2)); |
| 525 context.lineTo(endX + barDotLineLength, Math.floor(height / 2)); | 524 context.lineTo(endX + barDotLineLength, Math.floor(height / 2)); |
| 526 context.stroke(); | 525 context.stroke(); |
| 527 } | 526 } |
| 528 context.restore(); | 527 context.restore(); |
| 529 } | 528 } |
| 530 | 529 |
| 531 /** | 530 /** |
| 532 * @param {!CanvasRenderingContext2D} context | 531 * @param {!CanvasRenderingContext2D} context |
| 533 * @param {!Network.NetworkLogEntry} logEntry | 532 * @param {!Network.NetworkDataGridNode} node |
| 534 * @param {number} y | 533 * @param {number} y |
| 535 */ | 534 */ |
| 536 _drawTimingBars(context, logEntry, y) { | 535 _drawTimingBars(context, node, y) { |
| 537 context.save(); | 536 context.save(); |
| 538 var ranges = Network.RequestTimingView.calculateRequestTimeRanges(logEntry.r
equest(), 0); | 537 var ranges = Network.RequestTimingView.calculateRequestTimeRanges(node.reque
st(), 0); |
| 539 for (var range of ranges) { | 538 for (var range of ranges) { |
| 540 if (range.name === Network.RequestTimeRangeNames.Total || range.name === N
etwork.RequestTimeRangeNames.Sending || | 539 if (range.name === Network.RequestTimeRangeNames.Total || range.name === N
etwork.RequestTimeRangeNames.Sending || |
| 541 range.end - range.start === 0) | 540 range.end - range.start === 0) |
| 542 continue; | 541 continue; |
| 543 context.beginPath(); | 542 context.beginPath(); |
| 544 var lineWidth = 0; | 543 var lineWidth = 0; |
| 545 var color = this._colorForType(range.name); | 544 var color = this._colorForType(range.name); |
| 546 var borderColor = color; | 545 var borderColor = color; |
| 547 if (range.name === Network.RequestTimeRangeNames.Queueing) { | 546 if (range.name === Network.RequestTimeRangeNames.Queueing) { |
| 548 borderColor = 'lightgrey'; | 547 borderColor = 'lightgrey'; |
| (...skipping 12 matching lines...) Expand all Loading... |
| 561 context.strokeStyle = borderColor; | 560 context.strokeStyle = borderColor; |
| 562 context.stroke(); | 561 context.stroke(); |
| 563 } | 562 } |
| 564 context.fill(); | 563 context.fill(); |
| 565 } | 564 } |
| 566 context.restore(); | 565 context.restore(); |
| 567 } | 566 } |
| 568 | 567 |
| 569 /** | 568 /** |
| 570 * @param {!CanvasRenderingContext2D} context | 569 * @param {!CanvasRenderingContext2D} context |
| 571 * @param {!Network.NetworkLogEntry} logEntry | 570 * @param {!Network.NetworkDataGridNode} node |
| 572 * @param {number} rowNumber | 571 * @param {number} rowNumber |
| 573 * @param {number} y | 572 * @param {number} y |
| 574 */ | 573 */ |
| 575 _decorateRow(context, logEntry, rowNumber, y) { | 574 _decorateRow(context, node, rowNumber, y) { |
| 576 var isOddRow = rowNumber % 2 === 1; | 575 var isOddRow = rowNumber % 2 === 1; |
| 577 if (isOddRow && this._hoveredLogEntry !== logEntry && !logEntry.isNavigation
Request() && !this._initiatorGraph) | 576 if (isOddRow && this._hoveredNode !== node && !node.isNavigationRequest() &&
!this._initiatorGraph) |
| 578 return; | 577 return; |
| 579 | 578 |
| 580 var color = getRowColor.call(this); | 579 var color = getRowColor.call(this); |
| 581 if (color === 'transparent') | 580 if (color === 'transparent') |
| 582 return; | 581 return; |
| 583 context.save(); | 582 context.save(); |
| 584 context.beginPath(); | 583 context.beginPath(); |
| 585 context.fillStyle = color; | 584 context.fillStyle = color; |
| 586 context.rect(0, y, this._offsetWidth, this._rowHeight); | 585 context.rect(0, y, this._offsetWidth, this._rowHeight); |
| 587 context.fill(); | 586 context.fill(); |
| 588 context.restore(); | 587 context.restore(); |
| 589 | 588 |
| 590 /** | 589 /** |
| 591 * @return {string} | 590 * @return {string} |
| 592 * @this {Network.NetworkWaterfallColumn} | 591 * @this {Network.NetworkWaterfallColumn} |
| 593 */ | 592 */ |
| 594 function getRowColor() { | 593 function getRowColor() { |
| 595 var request = logEntry.request(); | 594 var request = node.request(); |
| 596 if (this._hoveredLogEntry === logEntry) | 595 if (this._hoveredNode === node) |
| 597 return this._rowHoverColor; | 596 return this._rowHoverColor; |
| 598 if (this._initiatorGraph) { | 597 if (this._initiatorGraph) { |
| 599 if (this._initiatorGraph.initiators.has(request)) | 598 if (this._initiatorGraph.initiators.has(request)) |
| 600 return this._parentInitiatorColor; | 599 return this._parentInitiatorColor; |
| 601 if (this._initiatorGraph.initiated.has(request)) | 600 if (this._initiatorGraph.initiated.has(request)) |
| 602 return this._initiatedColor; | 601 return this._initiatedColor; |
| 603 } | 602 } |
| 604 if (logEntry.isNavigationRequest()) | 603 if (node.isNavigationRequest()) |
| 605 return this._rowNavigationRequestColor; | 604 return this._rowNavigationRequestColor; |
| 606 if (rowNumber % 2 === 1) | 605 if (rowNumber % 2 === 1) |
| 607 return 'transparent'; | 606 return 'transparent'; |
| 608 return this._rowStripeColor; | 607 return this._rowStripeColor; |
| 609 } | 608 } |
| 610 } | 609 } |
| 611 }; | 610 }; |
| 612 | 611 |
| 613 Network.NetworkWaterfallColumn._colorsForResourceType = { | 612 Network.NetworkWaterfallColumn._colorsForResourceType = { |
| 614 document: 'hsl(215, 100%, 80%)', | 613 document: 'hsl(215, 100%, 80%)', |
| 615 font: 'hsl(8, 100%, 80%)', | 614 font: 'hsl(8, 100%, 80%)', |
| 616 media: 'hsl(90, 50%, 80%)', | 615 media: 'hsl(90, 50%, 80%)', |
| 617 image: 'hsl(90, 50%, 80%)', | 616 image: 'hsl(90, 50%, 80%)', |
| 618 script: 'hsl(31, 100%, 80%)', | 617 script: 'hsl(31, 100%, 80%)', |
| 619 stylesheet: 'hsl(272, 64%, 80%)', | 618 stylesheet: 'hsl(272, 64%, 80%)', |
| 620 texttrack: 'hsl(8, 100%, 80%)', | 619 texttrack: 'hsl(8, 100%, 80%)', |
| 621 websocket: 'hsl(0, 0%, 95%)', | 620 websocket: 'hsl(0, 0%, 95%)', |
| 622 xhr: 'hsl(53, 100%, 80%)', | 621 xhr: 'hsl(53, 100%, 80%)', |
| 623 other: 'hsl(0, 0%, 95%)' | 622 other: 'hsl(0, 0%, 95%)' |
| 624 }; | 623 }; |
| OLD | NEW |