[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()
+    /**
+     * @return {!Element}
+     */
+    getScrollContainer: 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());
+        return this._vScrollElement;
     },
 
     /**
+     * @param {!Array<!WebInspector.NetworkRequest>} requests
+     */
+    setRequests: function(requests)
+    {
+        this._requestData = requests;

[dgozman, 2016/10/20 20:52:00]

Don't we have to update() here? If not, should we instead pass requests to
update() call? Having these two being separate looks strange.

[allada, 2016/10/20 21:08:31]

At first I was doing an update here, however I changed it because the places
where this is being called are deciding to do an update or not. This gives the
ability where something may call an event in data grid that calls an update() to
the canvas multiple times but may only need to send the requests in once.

In short, I agree it looks strange, but there may be something that removes
items one at a time (like filter or sort) but only do a paint/layout once. This
helps keep the data up to date, but let the draw part manage when to show it.

+    },
+
+    /**
      * @param {?WebInspector.NetworkRequest} request
      */
     setHoveredRequest: function(request)
     {
         this._hoveredRequest = request;
         this.scheduleUpdate();
     },
 
     /**
+     * @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()
     {
         if (this._updateRequestID)
             return;
-        this._updateRequestID = this.element.window().requestAnimationFrame(this._update.bind(this));
+        this._updateRequestID = this.element.window().requestAnimationFrame(this.update.bind(this));
     },
 
-    _update: function()
+    update: function()

[dgozman, 2016/10/20 20:52:00]

If we don't pass any data, I feel like this is "redraw", not "update".

[allada, 2016/10/20 22:35:05]

Done.

     {
         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";
     },
@@ skipping 49 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
 }