| 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 /** | 5 /** |
| 6 * @constructor | 6 * @constructor |
| 7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
| 8 * @param {number} rowHeight | 8 * @param {number} rowHeight |
| 9 * @param {number} headerHeight | 9 * @param {!WebInspector.NetworkTimeCalculator} calculator |
| 10 * @param {!WebInspector.NetworkTransferTimeCalculator} calculator | |
| 11 * @param {!Element} scrollContainer | 10 * @param {!Element} scrollContainer |
| 12 */ | 11 */ |
| 13 WebInspector.NetworkTimelineColumn = function(rowHeight, headerHeight, calculato
r, scrollContainer) | 12 WebInspector.NetworkTimelineColumn = function(rowHeight, calculator, scrollConta
iner) |
| 14 { | 13 { |
| 15 // TODO(allada) Make this a shadowDOM when the NetworkTimelineColumn gets mo
ved into NetworkLogViewColumns. | 14 // TODO(allada) Make this a shadowDOM when the NetworkTimelineColumn gets mo
ved into NetworkLogViewColumns. |
| 16 WebInspector.VBox.call(this, false); | 15 WebInspector.VBox.call(this, false); |
| 17 this.registerRequiredCSS("network/networkTimelineColumn.css"); | 16 this.registerRequiredCSS("network/networkTimelineColumn.css"); |
| 18 | 17 |
| 19 this._canvas = this.contentElement.createChild("canvas"); | 18 this._canvas = this.contentElement.createChild("canvas"); |
| 20 this._canvas.tabIndex = 1; | 19 this._canvas.tabIndex = 1; |
| 21 this.setDefaultFocusedElement(this._canvas); | 20 this.setDefaultFocusedElement(this._canvas); |
| 22 | 21 |
| 23 /** @const */ | 22 /** @const */ |
| 24 this._leftPadding = 5; | 23 this._leftPadding = 5; |
| 25 /** @const */ | 24 /** @const */ |
| 26 this._rightPadding = 5; | 25 this._rightPadding = 5; |
| 27 /** @const */ | 26 /** @const */ |
| 28 this._fontSize = 10; | 27 this._fontSize = 10; |
| 29 | 28 |
| 30 this._rowHeight = rowHeight; | 29 this._rowHeight = rowHeight; |
| 31 this._headerHeight = headerHeight; | 30 this._headerHeight = 0; |
| 32 this._calculator = calculator; | 31 this._calculator = calculator; |
| 33 | 32 |
| 34 this._popoverHelper = new WebInspector.PopoverHelper(this.element); | 33 this._popoverHelper = new WebInspector.PopoverHelper(this.element); |
| 35 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)); |
| 36 this._popoverHelper.setTimeout(300, 300); | 35 this._popoverHelper.setTimeout(300, 300); |
| 37 | 36 |
| 38 this._vScrollElement = this.contentElement.createChild("div", "network-timel
ine-v-scroll"); | 37 this._vScrollElement = this.contentElement.createChild("div", "network-timel
ine-v-scroll"); |
| 39 this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), {
passive: true }); | 38 this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), {
passive: true }); |
| 40 this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(
this), { passive: true }); | 39 this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(
this), { passive: true }); |
| 41 this._vScrollContent = this._vScrollElement.createChild("div", "network-time
line-v-scroll-content"); | 40 this._vScrollContent = this._vScrollElement.createChild("div", "network-time
line-v-scroll-content"); |
| 42 | 41 |
| 43 this.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), {
passive: true }); | 42 this.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), {
passive: true }); |
| 44 this.element.addEventListener("mousemove", this._onMouseMove.bind(this), tru
e); | 43 this.element.addEventListener("mousemove", this._onMouseMove.bind(this), tru
e); |
| 45 this.element.addEventListener("mouseleave", this.setHoveredRequest.bind(this
, null), true); | 44 this.element.addEventListener("mouseleave", this.dispatchEventToListeners.bi
nd(this, WebInspector.NetworkTimelineColumn.Events.RequestHovered, null), true); |
| 46 | 45 |
| 47 this._boundScrollContainer = scrollContainer; | 46 this._boundScrollContainer = scrollContainer; |
| 48 this._boundScrollContainer.addEventListener("mousewheel", event => { | 47 this._boundScrollContainer.addEventListener("mousewheel", event => { |
| 49 event.consume(true); | 48 event.consume(true); |
| 50 this._onMouseWheel(event); | 49 this._onMouseWheel(event); |
| 51 }, true); | 50 }, true); |
| 52 | 51 |
| 53 // TODO(allada) When timeline canvas moves out of experiment move this to st
ylesheet. | 52 // TODO(allada) When timeline canvas moves out of experiment move this to st
ylesheet. |
| 54 this._boundScrollContainer.style.overflow = "hidden"; | 53 this._boundScrollContainer.style.overflow = "hidden"; |
| 55 | 54 |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 155 { | 154 { |
| 156 return this._vScrollElement; | 155 return this._vScrollElement; |
| 157 }, | 156 }, |
| 158 | 157 |
| 159 /** | 158 /** |
| 160 * @param {?WebInspector.NetworkRequest} request | 159 * @param {?WebInspector.NetworkRequest} request |
| 161 */ | 160 */ |
| 162 setHoveredRequest: function(request) | 161 setHoveredRequest: function(request) |
| 163 { | 162 { |
| 164 this._hoveredRequest = request; | 163 this._hoveredRequest = request; |
| 165 this.scheduleDraw(); | 164 this.update(); |
| 166 }, | 165 }, |
| 167 | 166 |
| 168 /** | 167 /** |
| 169 * @param {number} height | 168 * @param {number} height |
| 170 */ | 169 */ |
| 171 setRowHeight: function(height) | 170 setRowHeight: function(height) |
| 172 { | 171 { |
| 173 this._rowHeight = height; | 172 this._rowHeight = height; |
| 174 }, | 173 }, |
| 175 | 174 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 188 setCalculator: function(calculator) | 187 setCalculator: function(calculator) |
| 189 { | 188 { |
| 190 this._calculator = calculator; | 189 this._calculator = calculator; |
| 191 }, | 190 }, |
| 192 | 191 |
| 193 /** | 192 /** |
| 194 * @param {!Event} event | 193 * @param {!Event} event |
| 195 */ | 194 */ |
| 196 _onMouseMove: function(event) | 195 _onMouseMove: function(event) |
| 197 { | 196 { |
| 198 var request = this._getRequestFromPoint(event.offsetX, event.offsetY); | 197 var request = this._getRequestFromPoint(event.offsetX, event.offsetY + e
vent.target.offsetTop); |
| 199 this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.
RequestHovered, request); | 198 this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.
RequestHovered, request); |
| 200 }, | 199 }, |
| 201 | 200 |
| 202 /** | 201 /** |
| 203 * @param {!Event} event | 202 * @param {!Event} event |
| 204 */ | 203 */ |
| 205 _onMouseWheel: function(event) | 204 _onMouseWheel: function(event) |
| 206 { | 205 { |
| 207 this._vScrollElement.scrollTop -= event.wheelDeltaY; | 206 this._vScrollElement.scrollTop -= event.wheelDeltaY; |
| 208 this._boundScrollContainer.scrollTop = this._vScrollElement.scrollTop; | 207 this._boundScrollContainer.scrollTop = this._vScrollElement.scrollTop; |
| (...skipping 432 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 641 color = this._rowNavigationRequestColor; | 640 color = this._rowNavigationRequestColor; |
| 642 | 641 |
| 643 context.fillStyle = color; | 642 context.fillStyle = color; |
| 644 context.rect(0, y, this._offsetWidth, this._rowHeight); | 643 context.rect(0, y, this._offsetWidth, this._rowHeight); |
| 645 context.fill(); | 644 context.fill(); |
| 646 context.restore(); | 645 context.restore(); |
| 647 }, | 646 }, |
| 648 | 647 |
| 649 __proto__: WebInspector.VBox.prototype | 648 __proto__: WebInspector.VBox.prototype |
| 650 }; | 649 }; |
| OLD | NEW |