[Devtools] Removed dependency of networkLogView and dataGrid

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
- * @param {!WebInspector.NetworkLogView} networkLogView
- * @param {!WebInspector.SortableDataGrid} dataGrid
+ * @param {number} rowHeight
+ * @param {number} headerHeight
+ * @param {!WebInspector.NetworkTransferTimeCalculator} calculator
+ * @param {!Element} scrollContainer
  */
-WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
+WebInspector.NetworkTimelineColumn = function(rowHeight, headerHeight, calculator, scrollContainer)
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("network/networkTimelineColumn.css");
 
     this._canvas = this.contentElement.createChild("canvas");
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
 
     /** @const */
     this._leftPadding = 5;
     /** @const */
     this._rightPadding = 5;
     /** @const */
     this._fontSize = 10;
 
-    this._dataGrid = dataGrid;
-    this._networkLogView = networkLogView;
+    this._rowHeight = rowHeight;
+    this._headerHeight = headerHeight;
+    this._calculator = calculator;
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(300, 300);
 
     this._vScrollElement = this.contentElement.createChild("div", "network-timeline-v-scroll");
     this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), { passive: true });
     this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
     this._vScrollContent = this._vScrollElement.createChild("div");
 
     this.element.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
     this.element.addEventListener("mousemove", this._onMouseMove.bind(this), true);
     this.element.addEventListener("mouseleave", this.setHoveredRequest.bind(this, null), true);
 
-    this._dataGridScrollContainer = this._dataGrid.scrollContainer;
-    this._dataGridScrollContainer.addEventListener("mousewheel", event => {
+    this._boundScrollContainer = scrollContainer;
+    this._boundScrollContainer.addEventListener("mousewheel", event => {
         event.consume(true);
         this._onMouseWheel(event);
     }, true);
 
     // TODO(allada) When timeline canvas moves out of experiment move this to stylesheet.
-    this._dataGridScrollContainer.style.overflow = "hidden";
-    this._dataGrid.setScrollContainer(this._vScrollElement);
-
-    this._dataGrid.addEventListener(WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._update.bind(this));
-    this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, this._updateHeight.bind(this));
+    this._boundScrollContainer.style.overflow = "hidden";
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 
     /** @type {?WebInspector.NetworkRequest} */
     this._hoveredRequest = null;
 
     this._rowStripeColor = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
     this._rowHoverColor = WebInspector.themeSupport.patchColor("#ebf2fc", WebInspector.ThemeSupport.ColorUsage.Background);
 
@@ skipping 32 matching lines @@
     /**
      * @param {!Element} element
      * @param {!Event} event
      * @return {!AnchorBox|undefined}
      */
     _getPopoverAnchor: function(element, event)
     {
         if (!this._hoveredRequest)
             return;
 
-        var rowHeight = this._networkLogView.rowHeight();
         var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0).find(data => data.name === "total");
         var start = this._timeToPosition(range.start);
         var end = this._timeToPosition(range.end);
 
         if (event.offsetX < start || event.offsetX > end)
             return;
 
         var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
         var barHeight = this._getBarHeight(range.name);
-        var y = this._networkLogView.headerHeight() + (rowHeight * rowIndex - this._vScrollElement.scrollTop) + ((rowHeight - barHeight) / 2);
+        var y = this._headerHeight + (this._rowHeight * rowIndex - this._vScrollElement.scrollTop) + ((this._rowHeight - barHeight) / 2);
 
         if (event.offsetY < y || event.offsetY > y + barHeight)
             return;
 
         var anchorBox = this.element.boxInWindow();
         anchorBox.x += start;
         anchorBox.y += y;
         anchorBox.width = end - start;
         anchorBox.height = barHeight;
         return anchorBox;
     },
 
     /**
      * @param {!Element|!AnchorBox} anchor
      * @param {!WebInspector.Popover} popover
      */
     _showPopover: function(anchor, popover)
     {
         if (!this._hoveredRequest)
             return;
-        var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._networkLogView.calculator().minimumBoundary());
+        var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._calculator.minimumBoundary());
         popover.showForAnchor(content, anchor);
     },
 
     wasShown: function()
     {
-        this.scheduleUpdate();
-    },
-
-    scheduleRefreshData: function()
-    {
-        this._needsRefreshData = true;
-    },
-
-    _refreshDataIfNeeded: function()
-    {
-        if (!this._needsRefreshData)
-            return;
-        this._needsRefreshData = false;
-        var currentNode = this._dataGrid.rootNode();
-        this._requestData = [];
-        while (currentNode = currentNode.traverseNextNode(true))
-            this._requestData.push(currentNode.request());
+        this.scheduleDraw();
     },
 
     /**
+     * @return {!Element}
+     */
+    getScrollContainer: function()
+    {
+        return this._vScrollElement;
+    },
+
+    /**
      * @param {?WebInspector.NetworkRequest} request
      */
     setHoveredRequest: function(request)
     {
         this._hoveredRequest = request;
-        this.scheduleUpdate();
+        this.scheduleDraw();
     },
 
     /**
+     * @param {number} height
+     */
+    setRowHeight: function(height)
+    {
+        this._rowHeight = height;
+    },
+
+    /**
+     * @param {number} height
+     */
+    setHeaderHeight: function(height)
+    {
+        this._headerHeight = height;
+    },
+
+    /**
+     * @param {!WebInspector.NetworkTimeCalculator} calculator
+     */
+    setCalculator: function(calculator)
+    {
+        this._calculator = calculator;
+    },
+
+    /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         var request = this._getRequestFromPoint(event.offsetX, event.offsetY);
         this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.RequestHovered, request);
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseWheel: function(event)
     {
         this._vScrollElement.scrollTop -= event.wheelDeltaY;
-        this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+        this._boundScrollContainer.scrollTop = this._vScrollElement.scrollTop;
         this._popoverHelper.hidePopover();
 
         var request = this._getRequestFromPoint(event.offsetX, event.offsetY);
         this.dispatchEventToListeners(WebInspector.NetworkTimelineColumn.Events.RequestHovered, request);
     },
 
     /**
      * @param {!Event} event
      */
     _onScroll: function(event)
     {
-        this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
+        this._boundScrollContainer.scrollTop = this._vScrollElement.scrollTop;
         this._popoverHelper.hidePopover();
     },
 
     /**
      * @param {number} x
      * @param {number} y
      * @return {?WebInspector.NetworkRequest}
      */
     _getRequestFromPoint: function(x, y)
     {
-        var rowHeight = this._networkLogView.rowHeight();
         var scrollTop = this._vScrollElement.scrollTop;
-        return this._requestData[Math.floor((scrollTop + y - this._networkLogView.headerHeight()) / rowHeight)] || null;
+        return this._requestData[Math.floor((scrollTop + y - this._headerHeight) / this._rowHeight)] || null;
     },
 
-    scheduleUpdate: function()
+    scheduleDraw: function()
     {
         if (this._updateRequestID)
             return;
-        this._updateRequestID = this.element.window().requestAnimationFrame(this._update.bind(this));
+        this._updateRequestID = this.element.window().requestAnimationFrame(this.update.bind(this, undefined));
     },
 
-    _update: function()
+    /**
+     * @param {!Array<!WebInspector.NetworkRequest>=} requests
+     */
+    update: function(requests)
     {
+        if (requests)
+            this._requestData = requests;
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
-        this._refreshDataIfNeeded();
-
-        this._startTime = this._networkLogView.calculator().minimumBoundary();
-        this._endTime = this._networkLogView.calculator().maximumBoundary();
+        this._startTime = this._calculator.minimumBoundary();
+        this._endTime = this._calculator.maximumBoundary();
         this._resetCanvas();
         this._draw();
     },
 
-    _updateHeight: function()
+    /**
+     * @param {number} height
+     */
+    setScrollHeight: function(height)
     {
-        var totalHeight = this._dataGridScrollContainer.scrollHeight;
-        this._vScrollContent.style.height = totalHeight + "px";
+        this._vScrollContent.style.height = height + "px";
     },
 
     _resetCanvas: function()
     {
         var ratio = window.devicePixelRatio;
         this._canvas.width = this._offsetWidth * ratio;
         this._canvas.height = this._offsetHeight * ratio;
         this._canvas.style.width = this._offsetWidth + "px";
         this._canvas.style.height = this._offsetHeight + "px";
     },
 
     /**
      * @override
      */
     onResize: function()
     {
         WebInspector.VBox.prototype.onResize.call(this);
         this._offsetWidth = this.contentElement.offsetWidth;
         this._offsetHeight = this.contentElement.offsetHeight;
-        this.scheduleUpdate();
+        this.scheduleDraw();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames} type
      * @return {string}
      */
     _colorForType: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
         switch (type) {
@@ skipping 29 matching lines @@
      */
     _timeToPosition: function(time)
     {
         var availableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
         var timeToPixel = availableWidth / (this._endTime - this._startTime);
         return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
     },
 
     _draw: function()
     {
-        var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._networkLogView.calculator().startAtZero;
+        var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._calculator.startAtZero;
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
         context.save();
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
-        context.translate(0, this._networkLogView.headerHeight());
+        context.translate(0, this._headerHeight);
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
-        var rowHeight = this._networkLogView.rowHeight();
         var scrollTop = this._vScrollElement.scrollTop;
-        var firstRequestIndex = Math.floor(scrollTop / rowHeight);
-        var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / rowHeight));
+        var firstRequestIndex = Math.floor(scrollTop / this._rowHeight);
+        var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / this._rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
-            var rowOffset = rowHeight * i;
+            var rowOffset = this._rowHeight * i;
             var request = requests[i];
-            this._decorateRow(context, request, i, rowOffset - scrollTop, rowHeight);
+            this._decorateRow(context, request, i, rowOffset - scrollTop);
             if (useTimingBars)
                 this._drawTimingBars(context, request, rowOffset - scrollTop);
             else
                 this._drawSimplifiedBars(context, request, rowOffset - scrollTop);
         }
         context.restore();
         this._drawDividers(context);
     },
 
     _drawDividers: function(context)
@@ skipping 28 matching lines @@
         for (var position = gridSliceTime * pixelsPerTime; position < drawableWidth; position += gridSliceTime * pixelsPerTime) {
             // Added .5 because canvas drawing points are between pixels.
             var drawPosition = Math.floor(position) + this._leftPadding + .5;
             context.beginPath();
             context.moveTo(drawPosition, 0);
             context.lineTo(drawPosition, this._offsetHeight);
             context.stroke();
             if (position <= gridSliceTime * pixelsPerTime)
                 continue;
             var textData = Number.secondsToString(position / pixelsPerTime);
-            context.fillText(textData, drawPosition - context.measureText(textData).width - 2, Math.floor(this._networkLogView.headerHeight() - this._fontSize / 2));
+            context.fillText(textData, drawPosition - context.measureText(textData).width - 2, Math.floor(this._headerHeight - this._fontSize / 2));
         }
         context.restore();
     },
 
     /**
      * @return {number}
      */
     _timelineDuration: function()
     {
-        return this._networkLogView.calculator().maximumBoundary() - this._networkLogView.calculator().minimumBoundary();
+        return this._calculator.maximumBoundary() - this._calculator.minimumBoundary();
     },
 
     /**
      * @param {!WebInspector.RequestTimeRangeNames=} type
      * @return {number}
      */
     _getBarHeight: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
         switch (type) {
@@ skipping 60 matching lines @@
      * @param {!CanvasRenderingContext2D} context
      * @param {!WebInspector.NetworkRequest} request
      * @param {number} y
      */
     _drawSimplifiedBars: function(context, request, y)
     {
         /** @const */
         var borderWidth = 1;
 
         context.save();
-        var calculator = this._networkLogView.calculator();
-        var percentages = calculator.computeBarGraphPercentages(request);
+        var percentages = this._calculator.computeBarGraphPercentages(request);
         var drawWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
         var borderOffset = borderWidth % 2 === 0 ? 0 : .5;
         var start = this._leftPadding + Math.floor((percentages.start / 100) * drawWidth) + borderOffset;
         var mid = this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth) + borderOffset;
         var end = this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset;
         var height = this._getBarHeight();
-        y += Math.floor(this._networkLogView.rowHeight() / 2 - height / 2 + borderWidth) - borderWidth / 2;
+        y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidth / 2;
 
         context.translate(0, y);
         context.fillStyle = this._colorForResourceType(context, request);
         context.strokeStyle = this._borderColorForResourceType(request);
         context.lineWidth = borderWidth;
 
         context.beginPath();
         context.globalAlpha = .5;
         context.rect(start, 0, mid - start, height - borderWidth);
         context.fill();
         context.stroke();
 
         var barWidth = Math.max(2, end - mid);
         context.beginPath();
         context.globalAlpha = 1;
         context.rect(mid, 0, barWidth, height - borderWidth);
         context.fill();
         context.stroke();
 
         if (request === this._hoveredRequest) {
-            var labels = calculator.computeBarGraphLabels(request);
+            var labels = this._calculator.computeBarGraphLabels(request);
             this._drawSimplifiedBarDetails(context, labels.left, labels.right, start, mid, mid + barWidth + borderOffset);
         }
 
         context.restore();
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
      * @param {string} leftText
      * @param {string} rightText
@@ skipping 63 matching lines @@
             var color = this._colorForType(range.name);
             var borderColor = color;
             if (range.name === WebInspector.RequestTimeRangeNames.Queueing) {
                 borderColor = "lightgrey";
                 lineWidth = 2;
             }
             if (range.name === WebInspector.RequestTimeRangeNames.Receiving)
                 lineWidth = 2;
             context.fillStyle = color;
             var height = this._getBarHeight(range.name);
-            var middleBarY = y + Math.floor(this._networkLogView.rowHeight() / 2 - height / 2) + lineWidth / 2;
+            var middleBarY = y + Math.floor(this._rowHeight / 2 - height / 2) + lineWidth / 2;
             var start = this._timeToPosition(range.start);
             var end = this._timeToPosition(range.end);
             context.rect(start, middleBarY, end - start, height - lineWidth);
             if (lineWidth) {
                 context.lineWidth = lineWidth;
                 context.strokeStyle = borderColor;
                 context.stroke();
             }
             context.fill();
         }
         context.restore();
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
      * @param {!WebInspector.NetworkRequest} request
      * @param {number} rowNumber
      * @param {number} y
-     * @param {number} rowHeight
      */
-    _decorateRow: function(context, request, rowNumber, y, rowHeight)
+    _decorateRow: function(context, request, rowNumber, y)
     {
         if (rowNumber % 2 === 1 && this._hoveredRequest !== request)
             return;
         context.save();
         context.beginPath();
         var color = this._rowStripeColor;
         if (this._hoveredRequest === request)
             color = this._rowHoverColor;
 
         context.fillStyle = color;
-        context.rect(0, y, this._offsetWidth, rowHeight);
+        context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }