[Devtools] Moved NetworkTimelineColumn to NetworkLogViewColumns P2

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 32 matching lines @@
     this.setMinimumSize(50, 64);
     this.registerRequiredCSS("network/networkLogView.css");
 
     this._networkHideDataURLSetting = WebInspector.settings.createSetting("networkHideDataURL", false);
     this._networkResourceTypeFiltersSetting = WebInspector.settings.createSetting("networkResourceTypeFilters", {});
     this._networkShowPrimaryLoadWaterfallSetting = WebInspector.settings.createSetting("networkShowPrimaryLoadWaterfall", false);
 
     this._filterBar = filterBar;
     this._progressBarContainer = progressBarContainer;
     this._networkLogLargeRowsSetting = networkLogLargeRowsSetting;
+    this._networkLogLargeRowsSetting.addChangeListener(updateRowHeight.bind(this), this);
 
     /** @type {!WebInspector.NetworkTransferTimeCalculator} */
     this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
     /** @type {!WebInspector.NetworkTransferDurationCalculator} */
     this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
     this._calculator = this._timeCalculator;
+
+    /**
+     * @this {WebInspector.NetworkLogView}
+     */
+    function updateRowHeight()
+    {
+        /** @type {number} */
+        this._rowHeight = !!this._networkLogLargeRowsSetting.get() ? 41 : 21;
+    }
+    updateRowHeight.call(this);
+
     this._columns = new WebInspector.NetworkLogViewColumns(this, this._timeCalculator, this._durationCalculator, networkLogLargeRowsSetting);
 
     /** @type {!Map.<string, !WebInspector.NetworkDataGridNode>} */
     this._nodesByRequestId = new Map();
     /** @type {!Object.<string, boolean>} */
     this._staleRequestIds = {};
     /** @type {number} */
     this._mainRequestLoadTime = -1;
     /** @type {number} */
     this._mainRequestDOMContentLoadedTime = -1;
     this._matchedRequestCount = 0;
     this._highlightedSubstringChanges = [];
 
     /** @type {!Array.<!WebInspector.NetworkLogView.Filter>} */
     this._filters = [];
     /** @type {?WebInspector.NetworkLogView.Filter} */
     this._timeFilter = null;
 
     this._currentMatchedRequestNode = null;
     this._currentMatchedRequestIndex = -1;
 
     /** @type {!WebInspector.Linkifier} */
     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);
     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.Events.RequestUpdated, this._onRequestUpdated, this);
     WebInspector.targetManager.addModelListener(WebInspector.NetworkManager, WebInspector.NetworkManager.Events.RequestFinished, this._onRequestUpdated, this);
 };
 
 WebInspector.NetworkLogView._isFilteredOutSymbol = Symbol("isFilteredOut");
 WebInspector.NetworkLogView._isMatchingSearchQuerySymbol = Symbol("isMatchingSearchQuery");
 
@@ skipping 164 matching lines @@
     {
         this.removeAllNodeHighlights();
         this._parseFilterQuery(this._textFilterUI.value());
         this._filterRequests();
     },
 
     _initializeView: function()
     {
         this.element.id = "network-container";
         this._setupDataGrid();
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
-            var dataGridScroller = this._dataGrid.scrollContainer;
-            this._timelineColumn = new WebInspector.NetworkTimelineColumn(this._rowHeight, this._headerHeight, this._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, requestHovered.bind(this));
+        this._columns.show(this.element);
 
-            // TODO(allada) This code needs to be moved into NetworkLogViewColumns.
-            this._createTimelineHeader();
-            this._timelineColumn.contentElement.classList.add("network-timeline-view");
-
-            this._splitWidget = this._columns.splitWidget();
-            this._splitWidget.setMainWidget(this._timelineColumn);
-
-            this._columns.show(this.element);
-            this.switchViewMode(false);
-        } else {
-            this._columns.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()
-    {
-        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);
     },
 
     _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;
 
@@ skipping 50 matching lines @@
         this._highlightInitiatorChain((event.shiftKey && node) ? node.request() : null);
     },
 
     _dataGridMouseLeave: function()
     {
         this._setHoveredNode(null);
         this._highlightInitiatorChain(null);
     },
 
     /**
+     * @param {?WebInspector.NetworkRequest} request
+     */
+    setHoveredRequest: function(request)
+    {
+        this._setHoveredNode(request ? this._nodesByRequestId.get(request.requestId) : null);
+    },
+
+    /**
      * @param {?WebInspector.NetworkDataGridNode} node
      */
     _setHoveredNode: function(node)
     {
         if (this._hoveredNode)
             this._hoveredNode.element().classList.remove("hover");
         this._hoveredNode = node;
         if (this._hoveredNode)
             this._hoveredNode.element().classList.add("hover");
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            this._timelineColumn.setHoveredRequest(this._hoveredNode ? this._hoveredNode.request() : null);
+        this._columns.setHoveredRequest(this._hoveredNode ? this._hoveredNode.request() : null);
     },
 
     /**
      * @param {!Event} event
      */
     _dataGridMouseDown: function(event)
     {
         if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
             event.consume();
     },
@@ skipping 107 matching lines @@
     },
 
     scheduleRefresh: function()
     {
         if (this._needsRefresh)
             return;
 
         this._needsRefresh = true;
 
         if (this.isShowing() && !this._refreshRequestId)
-            this._refreshRequestId = this.element.window().requestAnimationFrame(this.refresh.bind(this));
+            this._refreshRequestId = this.element.window().requestAnimationFrame(this._refresh.bind(this));
     },
 
     /**
      * @param {!Array<number>} times
      */
     addFilmStripFrames: function(times)
     {
         this._columns.addEventDividers(times, "network-frame-divider");
     },
 
     /**
      * @param {number} time
      */
     selectFilmStripFrame: function(time)
     {
         this._columns.selectFilmStripFrame(time);
     },
 
     clearFilmStripFrame: function()
     {
         this._columns.clearFilmStripFrame();
     },
 
     _refreshIfNeeded: function()
     {
         if (this._needsRefresh)
-            this.refresh();
+            this._refresh();
     },
 
     _invalidateAllItems: function()
     {
         var requestIds = this._nodesByRequestId.keysArray();
         for (var i = 0; i < requestIds.length; ++i)
             this._staleRequestIds[requestIds[i]] = true;
-        this.refresh();
+        this._refresh();
     },
 
     /**
      * @return {!WebInspector.NetworkTimeCalculator}
      */
     timeCalculator: function()
     {
         return this._timeCalculator;
     },
 
     /**
      * @return {!WebInspector.NetworkTimeCalculator}
      */
     calculator: function()
     {
         return this._calculator;
     },
 
     /**
      * @param {!WebInspector.NetworkTimeCalculator} x
      */
     setCalculator: function(x)
     {
         if (!x || this._calculator === x)
             return;
 
         if (this._calculator !== x) {
             this._calculator = x;
-            if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-                this._timelineColumn.setCalculator(this._calculator);
+            this._columns.setCalculator(this._calculator);
         }
         this._calculator.reset();
 
         if (this._calculator.startAtZero)
             this._columns.hideEventDividers();
         else
             this._columns.showEventDividers();
 
         this._invalidateAllItems();
     },
@@ skipping 30 matching lines @@
     wasShown: function()
     {
         this._refreshIfNeeded();
     },
 
     willHide: function()
     {
         this._columns.willHide();
     },
 
-    refresh: function()
+    _refresh: function()
     {
         this._needsRefresh = false;
 
         if (this._refreshRequestId) {
             this.element.window().cancelAnimationFrame(this._refreshRequestId);
             delete this._refreshRequestId;
         }
 
         this.removeAllNodeHighlights();
 
         var oldBoundary = this.calculator().boundary();
         this._timeCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
         this._durationCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
         this._timeCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
         this._durationCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
 
         var dataGrid = this._dataGrid;
         var rootNode = dataGrid.rootNode();
         /** @type {!Array<!WebInspector.NetworkDataGridNode> } */
         var nodesToInsert = [];
         /** @type {!Array<!WebInspector.NetworkDataGridNode> } */
         var nodesToRefresh = [];
         for (var requestId in this._staleRequestIds) {
             var node = this._nodesByRequestId.get(requestId);
             if (!node)
                 continue;
             var isFilteredOut = !this._applyFilter(node);
             if (isFilteredOut && node === this._hoveredNode)
-                this._hoveredNode = null;
+                this._setHoveredNode(null);
             if (node[WebInspector.NetworkLogView._isFilteredOutSymbol] !== isFilteredOut) {
                 if (!node[WebInspector.NetworkLogView._isFilteredOutSymbol])
                     rootNode.removeChild(node);
 
                 node[WebInspector.NetworkLogView._isFilteredOutSymbol] = isFilteredOut;
 
                 if (!node[WebInspector.NetworkLogView._isFilteredOutSymbol])
                     nodesToInsert.push(node);
             }
             if (!isFilteredOut)
@@ skipping 19 matching lines @@
             // 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._timelineRequestsAreStale = true;
+        this._columns.dataChanged();
     },
 
     reset: function()
     {
         this._requestWithHighlightedInitiators = null;
         this.dispatchEventToListeners(WebInspector.NetworkLogView.Events.RequestSelected, null);
 
         this._clearSearchMatchedList();
 
+        this._setHoveredNode(null);
         this._columns.reset();
 
-        this._hoveredNode = null;
-
         this._timeFilter = null;
         this._calculator.reset();
 
         this._timeCalculator.setWindow(null);
 
         var nodes = this._nodesByRequestId.valuesArray();
         for (var i = 0; i < nodes.length; ++i)
             nodes[i].dispose();
 
         this._nodesByRequestId.clear();
@@ skipping 137 matching lines @@
         for (var i = 0; i < requestsToPick.length; ++i) {
             var request = requestsToPick[i];
             var node = this._nodesByRequestId.get(request.requestId);
             if (node) {
                 node.markAsNavigationRequest();
                 break;
             }
         }
     },
 
-    _createTimelineHeader: function()
-    {
-        this._timelineHeaderElement = this._timelineColumn.contentElement.createChild("div", "network-timeline-header");
-        this._timelineHeaderElement.addEventListener("click", timelineHeaderClicked.bind(this));
-        this._timelineHeaderElement.addEventListener("contextmenu", this._columns.headerContextMenuEvent.bind(this._columns));
-        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.NetworkLogView}
-         */
-        function timelineHeaderClicked()
-        {
-            var sortOrders = WebInspector.DataGrid.Order;
-            var sortOrder = this._dataGrid.sortOrder() === sortOrders.Ascending ? sortOrders.Descending : sortOrders.Ascending;
-            this._dataGrid.markColumnAsSortedBy("timeline", sortOrder);
-            this._columns.sortByCurrentColumn();
-        }
-    },
-
-    /**
-     * @param {boolean} gridMode
-     */
-    switchViewMode: function(gridMode)
-    {
-        this._columns.switchViewMode(gridMode);
-    },
-
     /**
      * @return {number}
      */
     rowHeight: function()
     {
         return this._rowHeight;
     },
 
-    _updateRowsSize: function()
+    /**
+     * @param {boolean} gridMode
+     */
+    switchViewMode: function(gridMode)
     {
-        var largeRows = !!this._networkLogLargeRowsSetting.get();
-        // TODO(allada) Make these non-magic numbers.
-        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();
+        this._columns.switchViewMode(gridMode);
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {!WebInspector.DataGridNode} node
      */
     _onRowContextMenu: function(contextMenu, node)
     {
         var request = node.request();
 
@@ skipping 193 matching lines @@
     {
         this.removeAllNodeHighlights();
         for (var i = 0; i < this._highlightedSubstringChanges.length; ++i)
             WebInspector.revertDomChanges(this._highlightedSubstringChanges[i]);
         this._highlightedSubstringChanges = [];
     },
 
     dataGridSorted: function()
     {
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
-
-        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 {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;
 };