[Devtools] New network timeline experiment Part 1

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
index 8d576b0eec37e776ec93973919840d8c56c18db7..465c0eb5d21b2f8bce180de64d4417030c105435 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
@@ -81,6 +81,10 @@ WebInspector.NetworkLogView = function(filterBar, progressBarContainer, networkL
     /** @type {number} */
     this._rowHeight = 0;
 
+    this._headerHeight = 0;
+    this._timelineHeaderElement = null;
+
+
     this._addFilters();
     this._resetSuggestionBuilder();
     this._initializeView();
@@ -144,6 +148,14 @@ WebInspector.NetworkLogView._searchKeys = Object.keys(WebInspector.NetworkLogVie
 
 WebInspector.NetworkLogView.prototype = {
     /**
+     * @return {number}
+     */
+    headerHeight: function()
+    {
+        return this._headerHeight;
+    },
+
+    /**
      * @param {boolean} recording
      */
     setRecording: function(recording)
@@ -259,6 +271,16 @@ WebInspector.NetworkLogView.prototype = {
         this._filterRequests();
     },
 
+    show: function(element)

[dgozman, 2016/10/07 21:39:57]

We are not supposed to override show(). It should be resolved in
constructor/wasShown instead.

[allada, 2016/10/08 00:13:32]

Done.

+    {
+        if (Runtime.experiments.isEnabled("networkCanvasTimeline")) {
+            WebInspector.VBox.prototype.show.call(this, this._splitWidget.element);
+            this._outerWidget.show(element);
+        } else {
+            WebInspector.VBox.prototype.show.call(this, element);
+        }
+    },
+
     _initializeView: function()
     {
         this.element.id = "network-container";
@@ -269,8 +291,17 @@ WebInspector.NetworkLogView.prototype = {
         this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
         this._calculator = this._timeCalculator;
 
-        this._createTable();
-        this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
+        if (Runtime.experiments.isEnabled("networkCanvasTimeline")) {
+            this._outerWidget = new WebInspector.VBox();

[dgozman, 2016/10/07 21:39:57]

Not very descriptive name.

[allada, 2016/10/08 00:13:32]

Done.

+            this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewTimeline");
+            this._splitWidget.setSidebarWidget(this);
+            this._splitWidget.show(this._outerWidget.element);
+            this._createTable();
+            this._summaryBarElement = this._outerWidget.element.createChild("div", "network-summary-bar");
+        } else {
+            this._createTable();
+            this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
+        }
 
         this._updateRowsSize();
     },
@@ -324,6 +355,14 @@ WebInspector.NetworkLogView.prototype = {
         this._dataGrid.element.addEventListener("mousedown", this._dataGridMouseDown.bind(this), true);
         this._dataGrid.element.addEventListener("mousemove", this._dataGridMouseMove.bind(this), true);
         this._dataGrid.element.addEventListener("mouseleave", this._highlightInitiatorChain.bind(this, null), true);
+
+        if (Runtime.experiments.isEnabled("networkCanvasTimeline")) {
+            this._timelineWidget = new WebInspector.VBox();
+            this._createTimelineHeader();
+            this._timelineWidget.element.classList.add("network-timeline-view");
+            this._splitWidget.setMainWidget(this._timelineWidget);
+        }
+
         this._columns.sortByCurrentColumn();
     },
 
@@ -810,12 +849,47 @@ WebInspector.NetworkLogView.prototype = {
         }
     },
 
+    _createTimelineHeader: function()
+    {
+        this._timelineHeaderElement = this._timelineWidget.element.createChild("div", "timelineHeader");
+        this._timelineHeaderElement.addEventListener("click", timelineHeaderClicked.bind(this));
+        this._timelineHeaderElement.addEventListener("contextmenu", this._contextMenu.bind(this));
+        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);
+        if (!Runtime.experiments.isEnabled("networkCanvasTimeline"))
+            return;
+
+        if (this._networkTimelineView) {
+            this._networkTimelineView.detach();
+            this._networkTimelineView = null;
+        }
+        if (gridMode && this._nodesByRequestId.size) {
+            this._networkTimelineView = new WebInspector.NetworkTimelineColumn(this, this._dataGrid);

[dgozman, 2016/10/07 21:39:57]

Can we avoid recreating it all the time?

[allada, 2016/10/08 00:13:32]

Done.

+            this._networkTimelineView.show(this._timelineWidget.element);
+            this._splitWidget.showBoth();
+        } else {
+            this._splitWidget.hideMain();
+        }
     },
 
     /**
@@ -830,7 +904,10 @@ WebInspector.NetworkLogView.prototype = {
     {
         var largeRows = !!this._networkLogLargeRowsSetting.get();
         this._rowHeight = largeRows ? 41 : 21;
+        this._headerHeight = largeRows ? 31 : 27;
         this._dataGrid.element.classList.toggle("small", !largeRows);
+        if (Runtime.experiments.isEnabled("networkCanvasTimeline"))
+            this._timelineHeaderElement.classList.toggle("small", !largeRows);
         this._dataGrid.scheduleUpdate();
     },
 
@@ -1058,6 +1135,18 @@ WebInspector.NetworkLogView.prototype = {
     dataGridSorted: function()
     {
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
+
+        if (!Runtime.experiments.isEnabled("networkCanvasTimeline"))
+            return;
+
+        this._timelineColumnSortIcon.classList.remove("sort-ascending");
+        this._timelineColumnSortIcon.classList.remove("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");
+        }
     },
 
     /**