[Devtools] Moved NetworkTimelineColumn to NetworkLogViewColumns P2

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
index 44712bb1d6fde6808620a7eb28daf0fd247c927b..dc793b46acf2b3c6716e9c9ccbe9b622b9252c27 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
@@ -41,6 +41,8 @@ WebInspector.NetworkLogViewColumns = function(networkLogView, timeCalculator, du
 
     /** @type {?WebInspector.TimelineGrid} */
     this._timelineGrid = null;
+    this._timelineHeaderElement = null;
+    this._timelineRequestsAreStale = false;
 
     /** @type {!WebInspector.Linkifier} */
     this._popupLinkifier = new WebInspector.Linkifier();
@@ -51,6 +53,10 @@ WebInspector.NetworkLogViewColumns = function(networkLogView, timeCalculator, du
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
+    if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+        this._setupTimeline();
+
+    this._updateRowsSize();
 };
 WebInspector.NetworkLogViewColumns._initialSortColumn = "timeline";
 
@@ -403,6 +409,10 @@ WebInspector.NetworkLogViewColumns.prototype = {
         this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
 
         this._dataGrid = new WebInspector.SortableDataGrid(this._columns.map(WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor));
+        this._dataGrid.element.addEventListener("mousedown", event => {
+            if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
+                event.consume();
+        }, true);
 
         this._updateColumns();
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortHandler, this);
@@ -418,32 +428,118 @@ WebInspector.NetworkLogViewColumns.prototype = {
 
         this._dataGrid.markColumnAsSortedBy(WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending);
 
-        this._updateRowsSize();
-
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
             this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewTimeline");
             this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
         }
     },
 
+    _setupTimeline: function()
+    {
+        var dataGridScroller = this._dataGrid.scrollContainer;
+        this._timelineColumn = new WebInspector.NetworkTimelineColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator(), dataGridScroller);
+        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, event => this._networkLogView.setHoveredRequest(/** @type {?WebInspector.NetworkRequest} */ (event.data)));
+
+        this._createTimelineHeader();
+        this._timelineColumn.contentElement.classList.add("network-timeline-view");
+
+        this._splitWidget.setMainWidget(this._timelineColumn);
+
+        this.switchViewMode(false);
+    },
+
+    _redrawTimelineColumn: function()
+    {
+        if (!this._timelineRequestsAreStale) {
+            this._timelineColumn.update();
+            return;
+        }
+        var currentNode = this._dataGrid.rootNode();
+        var requestData = {
+            requests: [],
+            navigationRequest: null
+        };
+        while (currentNode = currentNode.traverseNextNode(true)) {
+            if (currentNode.isNavigationRequest())
+                requestData.navigationRequest = currentNode.request();
+            requestData.requests.push(currentNode.request());
+        }
+        this._timelineColumn.update(requestData);
+    },
+
     /**
-     * @param {!Element} element
+     * @param {?WebInspector.NetworkRequest} request
      */
-    show: function(element)
+    setHoveredRequest: function(request)
     {
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            this._splitWidget.show(element);
-        else
-            this._dataGrid.asWidget().show(element);
+            this._timelineColumn.setHoveredRequest(request);
+    },
+
+    _createTimelineHeader: function()
+    {
+        this._timelineHeaderElement = this._timelineColumn.contentElement.createChild("div", "network-timeline-header");
+        this._timelineHeaderElement.addEventListener("click", timelineHeaderClicked.bind(this));
+        this._timelineHeaderElement.addEventListener("contextmenu", event => this._innerHeaderContextMenu(new WebInspector.ContextMenu(event)));
+        var innerElement = this._timelineHeaderElement.createChild("div");
+        innerElement.textContent = WebInspector.UIString("Timeline");
+        this._timelineColumnSortIcon = this._timelineHeaderElement.createChild("div", "sort-order-icon-container").createChild("div", "sort-order-icon");
+
+        /**
+         * @this {WebInspector.NetworkLogViewColumns}
+         */
+        function timelineHeaderClicked()
+        {
+            var sortOrders = WebInspector.DataGrid.Order;
+            var sortOrder = this._dataGrid.sortOrder() === sortOrders.Ascending ? sortOrders.Descending : sortOrders.Ascending;
+            this._dataGrid.markColumnAsSortedBy("timeline", sortOrder);
+            this._sortHandler();
+        }
     },
 
     /**
-     * @return {!WebInspector.SplitWidget}
+     * @param {!WebInspector.NetworkTimeCalculator} x
      */
-    splitWidget: function()
+    setCalculator: function(x)
+    {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            this._timelineColumn.setCalculator(x);
+    },
+
+    dataChanged: function()
     {
-        // This is a temporary function used until the move of timelinecolumn into NetworkLogViewColumns is done.
-        return this._splitWidget;
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            this._timelineRequestsAreStale = true;
+    },
+
+    _updateRowsSize: function()
+    {
+        var largeRows = !!this._networkLogLargeRowsSetting.get();
+        this._dataGrid.element.classList.toggle("small", !largeRows);
+        this._dataGrid.scheduleUpdate();
+
+        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
+        this._timelineColumn.setRowHeight(this._networkLogView.rowHeight());
+        // TODO(allada) Make these non-magic numbers.
+        this._timelineColumn.setHeaderHeight(largeRows ? 31 : 27);
+        this._timelineHeaderElement.classList.toggle("small", !largeRows);
+        this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
+    },
+
+    /**
+     * @param {!Element} element
+     */
+    show: function(element)
+    {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            this._splitWidget.show(element);
+        else
+            this._dataGrid.asWidget().show(element);
     },
 
     /**
@@ -498,6 +594,21 @@ WebInspector.NetworkLogViewColumns.prototype = {
         this._networkLogView.removeAllNodeHighlights();
         this._dataGrid.sortNodes(columnConfig.sortConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
         this._networkLogView.dataGridSorted();
+
+        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
+
+        this._timelineColumnSortIcon.classList.remove("sort-ascending", "sort-descending");
+
+        if (this._dataGrid.sortColumnId() === "timeline") {
+            if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
+                this._timelineColumnSortIcon.classList.add("sort-ascending");
+            else
+                this._timelineColumnSortIcon.classList.add("sort-descending");
+        }
+
+        this._timelineRequestsAreStale = true;
+
     },
 
     /**
@@ -520,6 +631,21 @@ WebInspector.NetworkLogViewColumns.prototype = {
         columnConfig.selectBox.options[0].label = selectedItemConfig.title;
         columnConfig.selectBox.selectedIndex = 0;
         this._networkLogView.dataGridSorted();
+
+        // TODO(allada) This entire function will be removed when the timeline comes out of exp, so copying code above for now.
+        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
+
+        this._timelineColumnSortIcon.classList.remove("sort-ascending", "sort-descending");
+
+        if (this._dataGrid.sortColumnId() === "timeline") {
+            if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
+                this._timelineColumnSortIcon.classList.add("sort-ascending");
+            else
+                this._timelineColumnSortIcon.classList.add("sort-descending");
+        }
+
+        this._timelineRequestsAreStale = true;
     },
 
     _updateColumns: function()
@@ -620,15 +746,6 @@ WebInspector.NetworkLogViewColumns.prototype = {
     },
 
     /**
-     * @param {!MouseEvent} event
-     */
-    headerContextMenuEvent: function(event)
-    {
-        // TODO(allada) Remove this entire function when new timeline moves to this file.
-        this._innerHeaderContextMenu(new WebInspector.ContextMenu(event));
-    },
-
-    /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _innerHeaderContextMenu: function(contextMenu)
@@ -871,12 +988,5 @@ WebInspector.NetworkLogViewColumns.prototype = {
     {
         for (var divider of this._eventDividers)
             divider.element.classList.toggle("network-frame-divider-selected", false);
-    },
-
-    _updateRowsSize: function()
-    {
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            return;
-        this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
     }
 };