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 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
49 this._eventDividers = new Map(); | 49 this._eventDividers = new Map(); |
50 | 50 |
51 var colorUsage = UI.ThemeSupport.ColorUsage; | 51 var colorUsage = UI.ThemeSupport.ColorUsage; |
52 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs age.Background); | 52 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs age.Background); |
53 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back ground); | 53 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back ground); |
54 this._rowHoverColor = UI.themeSupport.patchColor( | 54 this._rowHoverColor = UI.themeSupport.patchColor( |
55 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr ound | colorUsage.Selection)); | 55 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr ound | colorUsage.Selection)); |
56 this._parentInitiatorColor = UI.themeSupport.patchColor('hsla(120, 68%, 54%, 0.2)', colorUsage.Background); | 56 this._parentInitiatorColor = UI.themeSupport.patchColor('hsla(120, 68%, 54%, 0.2)', colorUsage.Background); |
57 this._initiatedColor = UI.themeSupport.patchColor('hsla(0, 68%, 54%, 0.2)', colorUsage.Background); | 57 this._initiatedColor = UI.themeSupport.patchColor('hsla(0, 68%, 54%, 0.2)', colorUsage.Background); |
58 | 58 |
59 /** @type {!Map<!Common.ResourceType, string>} */ | |
60 this._borderColorsForResourceTypeCache = new Map(); | |
61 /** @type {!Map<string, !CanvasGradient>} */ | |
62 this._colorsForResourceTypeCache = new Map(); | |
63 | |
64 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru e); | 59 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru e); |
65 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu ll, false), true); | 60 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu ll, false), true); |
66 } | 61 } |
67 | 62 |
68 /** | 63 /** |
64 * @param {string} color | |
allada
2017/03/02 00:24:30
I moved these above because I am going to be addin
| |
65 * @return {string} | |
66 */ | |
67 _waitingColorForBaseColor(color) { | |
68 var parsedColor = Common.Color.parse(color); | |
69 var hsla = parsedColor.hsla(); | |
70 hsla[2] *= 1.1; | |
71 return /** @type {string} */ (parsedColor.asString(null)); | |
72 } | |
73 | |
74 /** | |
75 * @param {string} color | |
76 * @return {string} | |
77 */ | |
78 _borderColorForBaseColor(color) { | |
79 var parsedColor = Common.Color.parse(color); | |
80 var hsla = parsedColor.hsla(); | |
81 hsla[1] /= 2; | |
82 hsla[2] -= Math.min(hsla[2], 0.2); | |
83 return /** @type {string} */ (parsedColor.asString(null)); | |
84 } | |
85 | |
86 /** | |
87 * @param {!SDK.NetworkRequest} request | |
88 * @return {string} | |
89 */ | |
90 _colorForResourceType(request) { | |
91 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType; | |
92 return colorsForResourceType[request.resourceType()] || colorsForResourceTyp e.other; | |
93 } | |
94 | |
95 /** | |
69 * @override | 96 * @override |
70 */ | 97 */ |
71 willHide() { | 98 willHide() { |
72 this._popoverHelper.hidePopover(); | 99 this._popoverHelper.hidePopover(); |
73 } | 100 } |
74 | 101 |
75 /** | 102 /** |
76 * @override | 103 * @override |
77 */ | 104 */ |
78 wasShown() { | 105 wasShown() { |
(...skipping 298 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
377 case types.Push: | 404 case types.Push: |
378 case types.Queueing: | 405 case types.Queueing: |
379 return 7; | 406 return 7; |
380 default: | 407 default: |
381 return 13; | 408 return 13; |
382 } | 409 } |
383 } | 410 } |
384 | 411 |
385 /** | 412 /** |
386 * @param {!SDK.NetworkRequest} request | 413 * @param {!SDK.NetworkRequest} request |
387 * @return {string} | |
388 */ | |
389 _borderColorForResourceType(request) { | |
390 var resourceType = request.resourceType(); | |
391 if (this._borderColorsForResourceTypeCache.has(resourceType)) | |
392 return this._borderColorsForResourceTypeCache.get(resourceType); | |
393 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType; | |
394 var color = colorsForResourceType[resourceType] || colorsForResourceType.oth er; | |
395 var parsedColor = Common.Color.parse(color); | |
396 var hsla = parsedColor.hsla(); | |
397 hsla[1] /= 2; | |
398 hsla[2] -= Math.min(hsla[2], 0.2); | |
399 var resultColor = /** @type {string} */ (parsedColor.asString(null)); | |
400 this._borderColorsForResourceTypeCache.set(resourceType, resultColor); | |
401 return resultColor; | |
402 } | |
403 | |
404 /** | |
405 * @param {!CanvasRenderingContext2D} context | |
406 * @param {!SDK.NetworkRequest} request | |
407 * @return {string|!CanvasGradient} | |
408 */ | |
409 _colorForResourceType(context, request) { | |
410 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType; | |
411 var resourceType = request.resourceType(); | |
412 var color = colorsForResourceType[resourceType] || colorsForResourceType.oth er; | |
413 if (request.cached()) | |
414 return color; | |
415 | |
416 if (this._colorsForResourceTypeCache.has(color)) | |
417 return this._colorsForResourceTypeCache.get(color); | |
418 var parsedColor = Common.Color.parse(color); | |
419 var hsla = parsedColor.hsla(); | |
420 hsla[1] -= Math.min(hsla[1], 0.28); | |
421 hsla[2] -= Math.min(hsla[2], 0.15); | |
422 var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight()); | |
423 gradient.addColorStop(0, color); | |
424 gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null))) ; | |
425 this._colorsForResourceTypeCache.set(color, gradient); | |
426 return gradient; | |
427 } | |
428 | |
429 /** | |
430 * @param {!SDK.NetworkRequest} request | |
431 * @param {number} borderOffset | 414 * @param {number} borderOffset |
432 * @return {!{start: number, mid: number, end: number}} | 415 * @return {!{start: number, mid: number, end: number}} |
433 */ | 416 */ |
434 _getSimplifiedBarRange(request, borderOffset) { | 417 _getSimplifiedBarRange(request, borderOffset) { |
435 var drawWidth = this._offsetWidth - this._leftPadding; | 418 var drawWidth = this._offsetWidth - this._leftPadding; |
436 var percentages = this._calculator.computeBarGraphPercentages(request); | 419 var percentages = this._calculator.computeBarGraphPercentages(request); |
437 return { | 420 return { |
438 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt h) + borderOffset, | 421 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt h) + borderOffset, |
439 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth ) + borderOffset, | 422 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth ) + borderOffset, |
440 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset | 423 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset |
(...skipping 11 matching lines...) Expand all Loading... | |
452 return; | 435 return; |
453 const borderWidth = 1; | 436 const borderWidth = 1; |
454 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5; | 437 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5; |
455 | 438 |
456 context.save(); | 439 context.save(); |
457 var ranges = this._getSimplifiedBarRange(request, borderOffset); | 440 var ranges = this._getSimplifiedBarRange(request, borderOffset); |
458 var height = this._getBarHeight(); | 441 var height = this._getBarHeight(); |
459 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt h / 2; | 442 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt h / 2; |
460 | 443 |
461 context.translate(0, y); | 444 context.translate(0, y); |
462 context.fillStyle = this._colorForResourceType(context, request); | 445 var fillColor = this._colorForResourceType(request); |
463 context.strokeStyle = this._borderColorForResourceType(request); | 446 context.strokeStyle = this._borderColorForBaseColor(fillColor); |
464 context.lineWidth = borderWidth; | 447 context.lineWidth = borderWidth; |
465 | 448 |
466 context.beginPath(); | 449 context.beginPath(); |
467 context.globalAlpha = 0.5; | 450 context.fillStyle = this._waitingColorForBaseColor(fillColor); |
468 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt h); | 451 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt h); |
469 context.fill(); | 452 context.fill(); |
470 context.stroke(); | 453 context.stroke(); |
471 | 454 |
472 var barWidth = Math.max(2, ranges.end - ranges.mid); | 455 var barWidth = Math.max(2, ranges.end - ranges.mid); |
473 context.beginPath(); | 456 context.beginPath(); |
474 context.globalAlpha = 1; | 457 context.fillStyle = fillColor; |
475 context.rect(ranges.mid, 0, barWidth, height - borderWidth); | 458 context.rect(ranges.mid, 0, barWidth, height - borderWidth); |
476 context.fill(); | 459 context.fill(); |
477 context.stroke(); | 460 context.stroke(); |
478 | 461 |
479 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ | 462 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ |
480 var labels = null; | 463 var labels = null; |
481 if (node.hovered()) { | 464 if (node.hovered()) { |
482 labels = this._calculator.computeBarGraphLabels(request); | 465 labels = this._calculator.computeBarGraphLabels(request); |
483 this._drawSimplifiedBarDetails( | 466 this._drawSimplifiedBarDetails( |
484 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m id + barWidth + borderOffset); | 467 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m id + barWidth + borderOffset); |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
518 * @param {number} endX | 501 * @param {number} endX |
519 */ | 502 */ |
520 _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) { | 503 _drawSimplifiedBarDetails(context, leftText, rightText, startX, midX, endX) { |
521 /** @const */ | 504 /** @const */ |
522 var barDotLineLength = 10; | 505 var barDotLineLength = 10; |
523 | 506 |
524 context.save(); | 507 context.save(); |
525 var height = this._getBarHeight(); | 508 var height = this._getBarHeight(); |
526 var leftLabelWidth = context.measureText(leftText).width; | 509 var leftLabelWidth = context.measureText(leftText).width; |
527 var rightLabelWidth = context.measureText(rightText).width; | 510 var rightLabelWidth = context.measureText(rightText).width; |
528 context.fillStyle = UI.themeSupport.patchColor('#444', UI.ThemeSupport.Color Usage.Foreground); | 511 context.fillStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Color Usage.Foreground); |
529 context.strokeStyle = UI.themeSupport.patchColor('#444', UI.ThemeSupport.Col orUsage.Foreground); | 512 context.strokeStyle = UI.themeSupport.patchColor('#888', UI.ThemeSupport.Col orUsage.Foreground); |
530 if (leftLabelWidth < midX - startX) { | 513 if (leftLabelWidth < midX - startX) { |
531 var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2; | 514 var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2; |
532 context.fillText(leftText, midBarX, this._fontSize); | 515 context.fillText(leftText, midBarX, this._fontSize); |
533 } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) { | 516 } else if (barDotLineLength + leftLabelWidth + this._leftPadding < startX) { |
534 context.beginPath(); | 517 context.beginPath(); |
535 context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI); | 518 context.arc(startX, Math.floor(height / 2), 2, 0, 2 * Math.PI); |
536 context.fill(); | 519 context.fill(); |
537 context.fillText(leftText, startX - leftLabelWidth - barDotLineLength - 1, this._fontSize); | 520 context.fillText(leftText, startX - leftLabelWidth - barDotLineLength - 1, this._fontSize); |
538 context.beginPath(); | 521 context.beginPath(); |
539 context.lineWidth = 1; | 522 context.lineWidth = 1; |
(...skipping 107 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
647 font: 'hsl(8, 100%, 80%)', | 630 font: 'hsl(8, 100%, 80%)', |
648 media: 'hsl(90, 50%, 80%)', | 631 media: 'hsl(90, 50%, 80%)', |
649 image: 'hsl(90, 50%, 80%)', | 632 image: 'hsl(90, 50%, 80%)', |
650 script: 'hsl(31, 100%, 80%)', | 633 script: 'hsl(31, 100%, 80%)', |
651 stylesheet: 'hsl(272, 64%, 80%)', | 634 stylesheet: 'hsl(272, 64%, 80%)', |
652 texttrack: 'hsl(8, 100%, 80%)', | 635 texttrack: 'hsl(8, 100%, 80%)', |
653 websocket: 'hsl(0, 0%, 95%)', | 636 websocket: 'hsl(0, 0%, 95%)', |
654 xhr: 'hsl(53, 100%, 80%)', | 637 xhr: 'hsl(53, 100%, 80%)', |
655 other: 'hsl(0, 0%, 95%)' | 638 other: 'hsl(0, 0%, 95%)' |
656 }; | 639 }; |
OLD | NEW |