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 Network.NetworkWaterfallColumn = class extends UI.VBox { | 4 Network.NetworkWaterfallColumn = class extends UI.VBox { |
5 /** | 5 /** |
6 * @param {number} rowHeight | 6 * @param {number} rowHeight |
7 * @param {!Network.NetworkTimeCalculator} calculator | 7 * @param {!Network.NetworkTimeCalculator} calculator |
8 */ | 8 */ |
9 constructor(rowHeight, calculator) { | 9 constructor(rowHeight, calculator) { |
10 // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets m
oved into NetworkLogViewColumns. | 10 // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets m
oved into NetworkLogViewColumns. |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
52 var colorUsage = UI.ThemeSupport.ColorUsage; | 52 var colorUsage = UI.ThemeSupport.ColorUsage; |
53 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); | 53 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); |
54 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); | 54 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); |
55 this._rowHoverColor = UI.themeSupport.patchColor( | 55 this._rowHoverColor = UI.themeSupport.patchColor( |
56 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr
ound | colorUsage.Selection)); | 56 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr
ound | colorUsage.Selection)); |
57 this._parentInitiatorColor = UI.themeSupport.patchColor('hsla(120, 68%, 54%,
0.2)', colorUsage.Background); | 57 this._parentInitiatorColor = UI.themeSupport.patchColor('hsla(120, 68%, 54%,
0.2)', colorUsage.Background); |
58 this._initiatedColor = UI.themeSupport.patchColor('hsla(0, 68%, 54%, 0.2)',
colorUsage.Background); | 58 this._initiatedColor = UI.themeSupport.patchColor('hsla(0, 68%, 54%, 0.2)',
colorUsage.Background); |
59 | 59 |
60 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru
e); | 60 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru
e); |
61 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu
ll, false), true); | 61 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu
ll, false), true); |
| 62 |
| 63 /** @type {!Array<!Network.NetworkWaterfallColumn._TextLayer>} */ |
| 64 this._textLayers = []; |
62 } | 65 } |
63 | 66 |
64 /** | 67 /** |
65 * @param {string} color | 68 * @param {string} color |
66 * @return {string} | 69 * @return {string} |
67 */ | 70 */ |
68 _waitingColorForBaseColor(color) { | 71 _waitingColorForBaseColor(color) { |
69 var parsedColor = Common.Color.parse(color); | 72 var parsedColor = Common.Color.parse(color); |
70 var hsla = parsedColor.hsla(); | 73 var hsla = parsedColor.hsla(); |
71 hsla[2] *= 1.1; | 74 hsla[2] *= 1.1; |
(...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
248 if (eventDividers !== undefined) | 251 if (eventDividers !== undefined) |
249 this._eventDividers = eventDividers; | 252 this._eventDividers = eventDividers; |
250 if (this._updateRequestID) { | 253 if (this._updateRequestID) { |
251 this.element.window().cancelAnimationFrame(this._updateRequestID); | 254 this.element.window().cancelAnimationFrame(this._updateRequestID); |
252 delete this._updateRequestID; | 255 delete this._updateRequestID; |
253 } | 256 } |
254 | 257 |
255 this._startTime = this._calculator.minimumBoundary(); | 258 this._startTime = this._calculator.minimumBoundary(); |
256 this._endTime = this._calculator.maximumBoundary(); | 259 this._endTime = this._calculator.maximumBoundary(); |
257 this._resetCanvas(); | 260 this._resetCanvas(); |
| 261 this._textLayers = []; |
258 this._draw(); | 262 this._draw(); |
259 } | 263 } |
260 | 264 |
261 _resetCanvas() { | 265 _resetCanvas() { |
262 var ratio = window.devicePixelRatio; | 266 var ratio = window.devicePixelRatio; |
263 this._canvas.width = this._offsetWidth * ratio; | 267 this._canvas.width = this._offsetWidth * ratio; |
264 this._canvas.height = this._offsetHeight * ratio; | 268 this._canvas.height = this._offsetHeight * ratio; |
265 this._canvas.style.width = this._offsetWidth + 'px'; | 269 this._canvas.style.width = this._offsetWidth + 'px'; |
266 this._canvas.style.height = this._offsetHeight + 'px'; | 270 this._canvas.style.height = this._offsetHeight + 'px'; |
267 } | 271 } |
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
347 if (node.hasChildren() && !node.expanded) | 351 if (node.hasChildren() && !node.expanded) |
348 drawNodes = /** @type {!Array<!Network.NetworkNode>} */ (node.flatChildr
en()); | 352 drawNodes = /** @type {!Array<!Network.NetworkNode>} */ (node.flatChildr
en()); |
349 drawNodes.push(node); | 353 drawNodes.push(node); |
350 for (var drawNode of drawNodes) { | 354 for (var drawNode of drawNodes) { |
351 if (useTimingBars) | 355 if (useTimingBars) |
352 this._drawTimingBars(context, drawNode, rowOffset - this._scrollTop); | 356 this._drawTimingBars(context, drawNode, rowOffset - this._scrollTop); |
353 else | 357 else |
354 this._drawSimplifiedBars(context, drawNode, rowOffset - this._scrollTo
p); | 358 this._drawSimplifiedBars(context, drawNode, rowOffset - this._scrollTo
p); |
355 } | 359 } |
356 } | 360 } |
| 361 |
| 362 context.save(); |
| 363 context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Color
Usage.Foreground); |
| 364 for (var textData of this._textLayers) |
| 365 context.fillText(textData.text, textData.x, textData.y); |
| 366 context.restore(); |
| 367 |
357 this._drawEventDividers(context); | 368 this._drawEventDividers(context); |
358 context.restore(); | 369 context.restore(); |
359 | 370 |
360 const freeZoneAtLeft = 75; | 371 const freeZoneAtLeft = 75; |
361 const freeZoneAtRight = 18; | 372 const freeZoneAtRight = 18; |
362 PerfUI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize
, this._headerHeight, freeZoneAtLeft); | 373 PerfUI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize
, this._headerHeight, freeZoneAtLeft); |
363 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t
his._headerHeight); | 374 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t
his._headerHeight); |
364 this._didDrawForTest(); | 375 this._didDrawForTest(); |
365 } | 376 } |
366 | 377 |
(...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
458 context.fillStyle = fillColor; | 469 context.fillStyle = fillColor; |
459 context.rect(ranges.mid, 0, barWidth, height - borderWidth); | 470 context.rect(ranges.mid, 0, barWidth, height - borderWidth); |
460 context.fill(); | 471 context.fill(); |
461 context.stroke(); | 472 context.stroke(); |
462 | 473 |
463 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ | 474 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ |
464 var labels = null; | 475 var labels = null; |
465 if (node.hovered()) { | 476 if (node.hovered()) { |
466 labels = this._calculator.computeBarGraphLabels(request); | 477 labels = this._calculator.computeBarGraphLabels(request); |
467 this._drawSimplifiedBarDetails( | 478 this._drawSimplifiedBarDetails( |
468 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m
id + barWidth + borderOffset); | 479 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m
id + barWidth + borderOffset, y); |
469 } | 480 } |
470 | 481 |
471 if (!this._calculator.startAtZero) { | 482 if (!this._calculator.startAtZero) { |
472 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(r
equest, 0) | 483 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(r
equest, 0) |
473 .find(data => data.name === Network.RequestTimeRan
geNames.Total); | 484 .find(data => data.name === Network.RequestTimeRan
geNames.Total); |
474 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0; | 485 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0; |
475 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start; | 486 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start; |
476 const wiskerTextPadding = 13; | 487 const wiskerTextPadding = 13; |
477 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske
rTextPadding : 0; | 488 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske
rTextPadding : 0; |
478 var queueingStart = this._timeToPosition(queueingRange.start); | 489 var queueingStart = this._timeToPosition(queueingRange.start); |
(...skipping 14 matching lines...) Expand all Loading... |
493 context.restore(); | 504 context.restore(); |
494 } | 505 } |
495 | 506 |
496 /** | 507 /** |
497 * @param {!CanvasRenderingContext2D} context | 508 * @param {!CanvasRenderingContext2D} context |
498 * @param {string} leftText | 509 * @param {string} leftText |
499 * @param {string} rightText | 510 * @param {string} rightText |
500 * @param {number} startX | 511 * @param {number} startX |
501 * @param {number} midX | 512 * @param {number} midX |
502 * @param {number} endX | 513 * @param {number} endX |
| 514 * @param {number} currentY |
503 */ | 515 */ |
504 _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) { | 516 _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX, cu
rrentY) { |
505 /** @const */ | 517 /** @const */ |
506 var barDotLineLength = 10; | 518 var barDotLineLength = 10; |
507 | 519 |
508 context.save(); | 520 context.save(); |
509 var height = this._getBarHeight(); | 521 var height = this._getBarHeight(); |
510 var leftLabelWidth = context.measureText(leftText).width; | 522 var leftLabelWidth = context.measureText(leftText).width; |
511 var rightLabelWidth = context.measureText(rightText).width; | 523 var rightLabelWidth = context.measureText(rightText).width; |
512 context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Color
Usage.Foreground); | 524 context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Color
Usage.Foreground); |
513 context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Col
orUsage.Foreground); | 525 context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Col
orUsage.Foreground); |
514 if (leftLabelWidth < midX - startX) { | 526 if (leftLabelWidth < midX - startX) { |
515 var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2; | 527 var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2; |
516 context.fillText(leftText, midBarX, this._fontSize); | 528 this._textLayers.push({text: leftText, x: midBarX, y: currentY + this._fon
tSize}); |
517 } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) { | 529 } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) { |
| 530 this._textLayers.push( |
| 531 {text: leftText, x: startX - leftLabelWidth - barDotLineLength - 1, y:
currentY + this._fontSize}); |
518 context.beginPath(); | 532 context.beginPath(); |
519 context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI); | 533 context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI); |
520 context.fill(); | 534 context.fill(); |
521 context.fillText(leftText, startX - leftLabelWidth - barDotLineLength - 1,
this._fontSize); | |
522 context.beginPath(); | 535 context.beginPath(); |
523 context.lineWidth = 1; | 536 context.lineWidth = 1; |
524 context.moveTo(startX - barDotLineLength, Math.floor(height / 2)); | 537 context.moveTo(startX - barDotLineLength, Math.floor(height / 2)); |
525 context.lineTo(startX, Math.floor(height / 2)); | 538 context.lineTo(startX, Math.floor(height / 2)); |
526 context.stroke(); | 539 context.stroke(); |
527 } | 540 } |
528 | 541 |
529 if (rightLabelWidth < endX - midX) { | 542 if (rightLabelWidth < endX - midX) { |
530 var midBarX = midX + (endX - midX) / 2 - rightLabelWidth / 2; | 543 var midBarX = midX + (endX - midX) / 2 - rightLabelWidth / 2; |
531 context.fillText(rightText, midBarX, this._fontSize); | 544 this._textLayers.push({text: rightText, x: midBarX, y: currentY + this._fo
ntSize}); |
532 } else if (endX + barDotLineLength + rightLabelWidth < this._offsetWidth - t
his._leftPadding) { | 545 } else if (endX + barDotLineLength + rightLabelWidth < this._offsetWidth - t
his._leftPadding) { |
| 546 this._textLayers.push({text: rightText, x: endX + barDotLineLength + 1, y:
currentY + this._fontSize}); |
533 context.beginPath(); | 547 context.beginPath(); |
534 context.arc(endX, Math.floor(height / 2), 2, 0, 2 * Math.PI); | 548 context.arc(endX, Math.floor(height / 2), 2, 0, 2 * Math.PI); |
535 context.fill(); | 549 context.fill(); |
536 context.fillText(rightText, endX + barDotLineLength + 1, this._fontSize); | |
537 context.beginPath(); | 550 context.beginPath(); |
538 context.lineWidth = 1; | 551 context.lineWidth = 1; |
539 context.moveTo(endX, Math.floor(height / 2)); | 552 context.moveTo(endX, Math.floor(height / 2)); |
540 context.lineTo(endX + barDotLineLength, Math.floor(height / 2)); | 553 context.lineTo(endX + barDotLineLength, Math.floor(height / 2)); |
541 context.stroke(); | 554 context.stroke(); |
542 } | 555 } |
543 context.restore(); | 556 context.restore(); |
544 } | 557 } |
545 | 558 |
546 /** | 559 /** |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
631 font: 'hsl(8, 100%, 80%)', | 644 font: 'hsl(8, 100%, 80%)', |
632 media: 'hsl(90, 50%, 80%)', | 645 media: 'hsl(90, 50%, 80%)', |
633 image: 'hsl(90, 50%, 80%)', | 646 image: 'hsl(90, 50%, 80%)', |
634 script: 'hsl(31, 100%, 80%)', | 647 script: 'hsl(31, 100%, 80%)', |
635 stylesheet: 'hsl(272, 64%, 80%)', | 648 stylesheet: 'hsl(272, 64%, 80%)', |
636 texttrack: 'hsl(8, 100%, 80%)', | 649 texttrack: 'hsl(8, 100%, 80%)', |
637 websocket: 'hsl(0, 0%, 95%)', | 650 websocket: 'hsl(0, 0%, 95%)', |
638 xhr: 'hsl(53, 100%, 80%)', | 651 xhr: 'hsl(53, 100%, 80%)', |
639 other: 'hsl(0, 0%, 95%)' | 652 other: 'hsl(0, 0%, 95%)' |
640 }; | 653 }; |
| 654 |
| 655 /** @typedef {!{x: number, y: number, text: string}} */ |
| 656 Network.NetworkWaterfallColumn._TextLayer; |
OLD | NEW |