[Devtools] Removed dependency of networkLogView and dataGrid

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 65 matching lines @@
     this.linkifier = new WebInspector.Linkifier();
 
     this._recording = false;
     this._preserveLog = false;
 
     /** @type {number} */
     this._rowHeight = 0;
 
     this._headerHeight = 0;
     this._timelineHeaderElement = null;
+    this._timelineRequestsAreStale = false;
 
     this._addFilters();
     this._resetSuggestionBuilder();
     this._initializeView();
 
     WebInspector.moduleSetting("networkColorCodeResourceTypes").addChangeListener(this._invalidateAllItems, this);
     this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, this);
 
     WebInspector.targetManager.observeTargets(this);
     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.Events.RequestStarted, this._onRequestStarted, this);
@@ skipping 190 matching lines @@
             this._createTable();
             this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
 
             this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 
             this._timelineWidget = new WebInspector.VBox();
             this._createTimelineHeader();
             this._timelineWidget.element.classList.add("network-timeline-view");
             this._splitWidget.setMainWidget(this._timelineWidget);
 
-            this._timelineColumn = new WebInspector.NetworkTimelineColumn(this, this._dataGrid);
+            this._timelineColumn = new WebInspector.NetworkTimelineColumn(this._rowHeight, this._headerHeight, this._calculator, this._dataGrid.scrollContainer);
+
+            var dataGridScroller = this._dataGrid.scrollContainer;
+            this._dataGrid.setScrollContainer(this._timelineColumn.getScrollContainer());
+            this._dataGrid.addEventListener(WebInspector.DataGrid.Events.PaddingChanged, () => {
+                this._timelineColumn.setScrollHeight(dataGridScroller.scrollHeight)
+            });
+            this._dataGrid.addEventListener(WebInspector.ViewportDataGrid.Events.ViewportCalculated, this._redrawTimelineColumn.bind(this));
+
             this._timelineColumn.addEventListener(WebInspector.NetworkTimelineColumn.Events.RequestHovered, requestHovered.bind(this));
             this._timelineColumn.show(this._timelineWidget.element);
             this.switchViewMode(false);
         } else {
             this._createTable();
             this._dataGrid.asWidget().show(this.element);
             this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
         }
 
         this._columns.sortByCurrentColumn();
         this._updateRowsSize();
 
         /**
          * @param {!WebInspector.Event} event
          * @this {WebInspector.NetworkLogView}
          */
         function requestHovered(event)
         {
             var request = /** @type {?WebInspector.NetworkRequest} */ (event.data);
             var node = request ? this._nodesByRequestId.get(request.requestId) : null;
             this._setHoveredNode(node || null);
         }
     },
 
+    _redrawTimelineColumn: function()
+    {
+        /** @type {!Array<!WebInspector.NetworkRequest>|undefined} */
+        var requests;
+        if (this._timelineRequestsAreStale)
+            requests = this._getOrderedRequests();
+        this._timelineColumn.update(requests);
+    },
+
     _showRecordingHint: function()
     {
         this._hideRecordingHint();
         this._recordingHint = this.element.createChild("div", "network-status-pane fill");
         var hintText = this._recordingHint.createChild("div", "recording-hint");
         var reloadShortcutNode = this._recordingHint.createChild("b");
         reloadShortcutNode.textContent = WebInspector.shortcutRegistry.shortcutDescriptorsForAction("main.reload")[0].name;
 
         if (this._recording) {
             var recordingText = hintText.createChild("span");
@@ skipping 248 matching lines @@
     },
 
     /**
      * @param {!WebInspector.NetworkTimeCalculator} x
      */
     setCalculator: function(x)
     {
         if (!x || this._calculator === x)
             return;
 
-        this._calculator = x;
+        if (this._calculator !== x) {
+            this._calculator = x;
+            if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+                this._timelineColumn.setCalculator(this._calculator);
+        }
         this._calculator.reset();
 
         if (this._calculator.startAtZero)
             this._columns.hideEventDividers();
         else
             this._columns.showEventDividers();
 
         this._invalidateAllItems();
     },
 
@@ skipping 97 matching lines @@
         if (!this.calculator().boundary().equals(oldBoundary)) {
             // The boundaries changed, so all item graphs are stale.
             this._columns.updateDividersIfNeeded();
             var nodes = this._nodesByRequestId.valuesArray();
             for (var i = 0; i < nodes.length; ++i)
                 nodes[i].refreshGraph();
         }
 
         this._staleRequestIds = {};
         this._updateSummaryBar();
+
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            this._timelineColumn.scheduleRefreshData();
+            this._timelineRequestsAreStale = true;
+    },
+
+    _getOrderedRequests: function()
+    {
+        var currentNode = this._dataGrid.rootNode();
+        var requestData = [];
+        while (currentNode = currentNode.traverseNextNode(true))
+            requestData.push(currentNode.request());
+        return requestData;
     },
 
     reset: function()
     {
         this._requestWithHighlightedInitiators = null;
         this.dispatchEventToListeners(WebInspector.NetworkLogView.Events.RequestSelected, null);
 
         this._clearSearchMatchedList();
 
         this._columns.reset();
@@ skipping 198 matching lines @@
      */
     rowHeight: function()
     {
         return this._rowHeight;
     },
 
     _updateRowsSize: function()
     {
         var largeRows = !!this._networkLogLargeRowsSetting.get();
         // TODO(allada) Make these non-magic numbers.
-        this._rowHeight = largeRows ? 41 : 21;
-        this._headerHeight = largeRows ? 31 : 27;
+        var rowHeight = largeRows ? 41 : 21;
+        var headerHeight = largeRows ? 31 : 27;
+        if (this._rowHeight !== rowHeight) {
+            this._rowHeight = rowHeight;
+            if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+                this._timelineColumn.setRowHeight(this._rowHeight);
+        }
+        if (this._headerHeight !== headerHeight) {
+            this._headerHeight = headerHeight;
+            if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+                this._timelineColumn.setHeaderHeight(this._headerHeight);
+        }
+
         this._dataGrid.element.classList.toggle("small", !largeRows);
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._timelineHeaderElement.classList.toggle("small", !largeRows);
         this._dataGrid.scheduleUpdate();
     },
 
     /**
      * @param {!Event} event
      */
     _contextMenu: function(event)
@@ skipping 223 matching lines @@
 
         this._timelineColumnSortIcon.classList.remove("sort-ascending", "sort-descending");
 
         if (this._dataGrid.sortColumnIdentifier() === "timeline") {
             if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
                 this._timelineColumnSortIcon.classList.add("sort-ascending");
             else
                 this._timelineColumnSortIcon.classList.add("sort-descending");
         }
 
-        this._timelineColumn.scheduleRefreshData();
+        this._timelineRequestsAreStale = true;
     },
 
     /**
      * @param {number} n
      * @param {boolean} reveal
      */
     _highlightNthMatchedRequestForSearch: function(n, reveal)
     {
         this._removeAllHighlights();
 
@@ skipping 668 matching lines @@
  * @return {boolean}
  */
 WebInspector.NetworkLogView._requestTimeFilter = function(windowStart, windowEnd, request)
 {
     if (request.issueTime() > windowEnd)
         return false;
     if (request.endTime !== -1 && request.endTime < windowStart)
         return false;
     return true;
 }