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 /** | |
5 * @unrestricted | |
6 */ | |
7 Network.NetworkWaterfallColumn = class extends UI.VBox { | 4 Network.NetworkWaterfallColumn = class extends UI.VBox { |
8 /** | 5 /** |
9 * @param {number} rowHeight | 6 * @param {number} rowHeight |
10 * @param {!Network.NetworkTimeCalculator} calculator | 7 * @param {!Network.NetworkTimeCalculator} calculator |
11 */ | 8 */ |
12 constructor(rowHeight, calculator) { | 9 constructor(rowHeight, calculator) { |
13 // 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. |
14 super(false); | 11 super(false); |
15 this.registerRequiredCSS('network/networkWaterfallColumn.css'); | 12 this.registerRequiredCSS('network/networkWaterfallColumn.css'); |
16 | 13 |
17 this._canvas = this.contentElement.createChild('canvas'); | 14 this._canvas = this.contentElement.createChild('canvas'); |
18 this._canvas.tabIndex = 1; | 15 this._canvas.tabIndex = 1; |
19 this.setDefaultFocusedElement(this._canvas); | 16 this.setDefaultFocusedElement(this._canvas); |
20 this._canvasPosition = this._canvas.getBoundingClientRect(); | 17 this._canvasPosition = this._canvas.getBoundingClientRect(); |
21 | 18 |
22 /** @const */ | 19 /** @const */ |
23 this._leftPadding = 5; | 20 this._leftPadding = 5; |
24 /** @const */ | 21 /** @const */ |
25 this._fontSize = 10; | 22 this._fontSize = 10; |
26 | 23 |
27 this._rightPadding = 0; | 24 this._rightPadding = 0; |
| 25 this._scrollTop = 0; |
28 | 26 |
29 this._rowHeight = rowHeight; | 27 this._rowHeight = rowHeight; |
30 this._headerHeight = 0; | 28 this._headerHeight = 0; |
31 this._calculator = calculator; | 29 this._calculator = calculator; |
32 | 30 |
33 this._offsetWidth = 0; | 31 this._offsetWidth = 0; |
34 this._offsetHeight = 0; | 32 this._offsetHeight = 0; |
35 this._startTime = this._calculator.minimumBoundary(); | 33 this._startTime = this._calculator.minimumBoundary(); |
36 this._endTime = this._calculator.maximumBoundary(); | 34 this._endTime = this._calculator.maximumBoundary(); |
37 | 35 |
38 this._popoverHelper = new UI.PopoverHelper(this.element); | 36 this._popoverHelper = new UI.PopoverHelper(this.element); |
39 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t
his._showPopover.bind(this)); | 37 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t
his._showPopover.bind(this)); |
40 this._popoverHelper.setTimeout(300, 300); | 38 this._popoverHelper.setTimeout(300, 300); |
41 | 39 |
42 /** @type {!Array<!Network.NetworkNode>} */ | 40 /** @type {!Array<!Network.NetworkNode>} */ |
43 this._nodes = []; | 41 this._nodes = []; |
44 | 42 |
45 /** @type {?Network.NetworkNode} */ | 43 /** @type {?Network.NetworkNode} */ |
46 this._hoveredNode = null; | 44 this._hoveredNode = null; |
47 | 45 |
48 /** @type {!Map<string, !Array<number>>} */ | 46 /** @type {!Map<string, !Array<number>>} */ |
49 this._eventDividers = new Map(); | 47 this._eventDividers = new Map(); |
50 | 48 |
| 49 /** @type {(number|undefined)} */ |
| 50 this._updateRequestID; |
| 51 |
51 var colorUsage = UI.ThemeSupport.ColorUsage; | 52 var colorUsage = UI.ThemeSupport.ColorUsage; |
52 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); | 53 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs
age.Background); |
53 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); | 54 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back
ground); |
54 this._rowHoverColor = UI.themeSupport.patchColor( | 55 this._rowHoverColor = UI.themeSupport.patchColor( |
55 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr
ound | colorUsage.Selection)); | 56 '#ebf2fc', /** @type {!UI.ThemeSupport.ColorUsage} */ (colorUsage.Backgr
ound | colorUsage.Selection)); |
56 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); |
57 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); |
58 | 59 |
59 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru
e); | 60 this.element.addEventListener('mousemove', this._onMouseMove.bind(this), tru
e); |
60 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu
ll, false), true); | 61 this.element.addEventListener('mouseleave', event => this._setHoveredNode(nu
ll, false), true); |
(...skipping 569 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
630 font: 'hsl(8, 100%, 80%)', | 631 font: 'hsl(8, 100%, 80%)', |
631 media: 'hsl(90, 50%, 80%)', | 632 media: 'hsl(90, 50%, 80%)', |
632 image: 'hsl(90, 50%, 80%)', | 633 image: 'hsl(90, 50%, 80%)', |
633 script: 'hsl(31, 100%, 80%)', | 634 script: 'hsl(31, 100%, 80%)', |
634 stylesheet: 'hsl(272, 64%, 80%)', | 635 stylesheet: 'hsl(272, 64%, 80%)', |
635 texttrack: 'hsl(8, 100%, 80%)', | 636 texttrack: 'hsl(8, 100%, 80%)', |
636 websocket: 'hsl(0, 0%, 95%)', | 637 websocket: 'hsl(0, 0%, 95%)', |
637 xhr: 'hsl(53, 100%, 80%)', | 638 xhr: 'hsl(53, 100%, 80%)', |
638 other: 'hsl(0, 0%, 95%)' | 639 other: 'hsl(0, 0%, 95%)' |
639 }; | 640 }; |
OLD | NEW |