[Devtools] Moved NetworkTimelineColumn to NetworkLogViewColumns P2

third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.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
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator
  * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
  * @param {!WebInspector.Setting} networkLogLargeRowsSetting
@@ skipping 23 matching lines @@
     /** @type {!Array<{time: number, element: !Element}>} */
     this._eventDividers = [];
 
     this._gridMode = true;
 
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
     /** @type {?WebInspector.TimelineGrid} */
     this._timelineGrid = null;
+    this._timelineHeaderElement = null;
+    this._timelineRequestsAreStale = false;
 
     /** @type {!WebInspector.Linkifier} */
     this._popupLinkifier = new WebInspector.Linkifier();
 
     /** @type {!Map<string, !WebInspector.NetworkTimeCalculator>} */
     this._calculatorsMap = new Map();
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Time, timeCalculator);
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
+    if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+        this._setupTimeline();
+
+    this._updateRowsSize();
 };
 WebInspector.NetworkLogViewColumns._initialSortColumn = "timeline";
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
@@ skipping 332 matching lines @@
             if (columnConfig.subtitle)
                 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
             this._columns.push(columnConfig);
         }
         this._loadColumns();
 
         this._popoverHelper = new WebInspector.PopoverHelper(this._networkLogView.element);
         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);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this.updateDividersIfNeeded, this);
         this._dataGrid.setHeaderContextMenuCallback(this._innerHeaderContextMenu.bind(this));
 
         this._timelineGrid = new WebInspector.TimelineGrid();
         this._timelineGrid.element.classList.add("network-timeline-grid");
         if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._dataGrid.element.appendChild(this._timelineGrid.element);
 
         this._setupDropdownColumns();
 
         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 {?WebInspector.NetworkRequest} request
+     */
+    setHoveredRequest: function(request)
+    {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            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();
+        }
+    },
+
+    /**
+     * @param {!WebInspector.NetworkTimeCalculator} x
+     */
+    setCalculator: function(x)
+    {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            this._timelineColumn.setCalculator(x);
+    },
+
+    dataChanged: function()
+    {
+        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);
     },
 
     /**
-     * @return {!WebInspector.SplitWidget}
-     */
-    splitWidget: function()
-    {
-        // This is a temporary function used until the move of timelinecolumn into NetworkLogViewColumns is done.
-        return this._splitWidget;
-    },
-
-    /**
      * @return {!WebInspector.SortableDataGrid} dataGrid
      */
     dataGrid: function()
     {
         return this._dataGrid;
     },
 
     _setupDropdownColumns: function()
     {
         for (var columnConfig of this._columns) {
@@ skipping 31 matching lines @@
         if (columnConfig.sortConfig && columnConfig.sortConfig.entries) {
             this._sortByDropdownItem(columnConfig);
             return;
         }
         if (!columnConfig.sortConfig.sortingFunction)
             return;
 
         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;
+
     },
 
     /**
      * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
      */
     _sortByDropdownItem: function(columnConfig)
     {
         this._networkLogView.removeAllNodeHighlights();
         var selectedIndex = columnConfig.selectBox.selectedIndex;
         if (!selectedIndex)
             selectedIndex = 1; // Sort by first item by default.
         var selectedItemConfig = columnConfig.sortConfig.entries[selectedIndex - 1]; // -1 because of placeholder.
         var selectedOption = columnConfig.selectBox[selectedIndex];
         var value = selectedOption.value;
 
         this._dataGrid.sortNodes(selectedItemConfig.sortingFunction);
         this._dataGrid.markColumnAsSortedBy(columnConfig.id, /** @type {!WebInspector.DataGrid.Order} */ (selectedItemConfig.sort));
         if (selectedItemConfig.calculator)
             this._networkLogView.setCalculator(this._calculatorsMap.get(selectedItemConfig.calculator));
         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()
     {
         if (!this._dataGrid)
             return;
         var visibleColumns = /** @type {!Object.<string, boolean>} */ ({});
         if (this._gridMode) {
             for (var columnConfig of this._columns)
                 visibleColumns[columnConfig.id] = (columnConfig.visible || !columnConfig.hideable);
@@ skipping 80 matching lines @@
     _makeHeaderFragment: function(title, subtitle)
     {
         var fragment = createDocumentFragment();
         fragment.createTextChild(title);
         var subtitleDiv = fragment.createChild("div", "network-header-subtitle");
         subtitleDiv.createTextChild(subtitle);
         return fragment;
     },
 
     /**
-     * @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)
     {
         var columnConfigs = this._columns.filter(columnConfig => columnConfig.hideable);
         var nonResponseHeaders = columnConfigs.filter(columnConfig => !columnConfig.isResponseHeader);
         for (var columnConfig of nonResponseHeaders)
             contextMenu.appendCheckboxItem(columnConfig.title, this._toggleColumnVisibility.bind(this, columnConfig), columnConfig.visible);
 
         contextMenu.appendSeparator();
@@ skipping 222 matching lines @@
     selectFilmStripFrame: function(time)
     {
         for (var divider of this._eventDividers)
             divider.element.classList.toggle("network-frame-divider-selected", divider.time === time);
     },
 
     clearFilmStripFrame: function()
     {
         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());
     }
 };