[Devtools] New network timeline experiment Part 1

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 63 matching lines @@
 
     /** @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._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);
@@ skipping 43 matching lines @@
 /** @enum {string} */
 WebInspector.NetworkLogView.IsFilterType = {
     Running: "running"
 };
 
 /** @type {!Array<string>} */
 WebInspector.NetworkLogView._searchKeys = Object.keys(WebInspector.NetworkLogView.FilterType).map(key => WebInspector.NetworkLogView.FilterType[key]);
 
 WebInspector.NetworkLogView.prototype = {
     /**
+     * @return {number}
+     */
+    headerHeight: function()
+    {
+        return this._headerHeight;
+    },
+
+    /**
      * @param {boolean} recording
      */
     setRecording: function(recording)
     {
         this._recording = recording;
         this._updateSummaryBar();
     },
 
     /**
      * @param {boolean} preserveLog
@@ skipping 105 matching lines @@
     _initializeView: function()
     {
         this.element.id = "network-container";
 
         /** @type {!WebInspector.NetworkTransferTimeCalculator} */
         this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
         /** @type {!WebInspector.NetworkTransferDurationCalculator} */
         this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
         this._calculator = this._timeCalculator;
 
-        this._createTable();
-        this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewTimeline");
+            this._splitWidget.show(this.element);
+            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);
+
+            var networkTimelineView = new WebInspector.NetworkTimelineColumn(this, this._dataGrid);
+            networkTimelineView.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();
     },
 
     _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 32 matching lines @@
     {
         this._dataGrid = this._columns.createGrid(this._timeCalculator, this._durationCalculator);
         this._dataGrid.setStickToBottom(true);
         this._dataGrid.setName("networkLog");
         this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last);
         this._dataGrid.element.classList.add("network-log-grid");
         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
         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);
-        this._columns.sortByCurrentColumn();
     },
 
     /**
      * @param {!Event} event
      */
     _dataGridMouseDown: function(event)
     {
         if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
             event.consume();
     },
@@ skipping 465 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._timelineWidget.element.createChild("div", "timelineHeader");

[alph, 2016/10/08 01:35:09]

we use dash-style for classes.

[allada, 2016/10/08 02:06:33]

Done.

+        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;

[alph, 2016/10/08 01:35:09]

s/g  /g /

[allada, 2016/10/08 02:06:33]

Done.

+            this._dataGrid.markColumnAsSortedBy("timeline", sortOrder);
+            this._columns.sortByCurrentColumn();
+        }
+    },
+
     /**
      * @param {boolean} gridMode
      */
     switchViewMode: function(gridMode)
     {
         this._columns.switchViewMode(gridMode);
+        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
+
+        if (gridMode && this._nodesByRequestId.size)
+            this._splitWidget.showBoth();
+        else
+            this._splitWidget.hideMain();
     },
 
     /**
      * @return {number}
      */
     rowHeight: function()
     {
         return this._rowHeight;
     },
 
     _updateRowsSize: function()
     {
         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("canvasNetworkTimeline"))
+            this._timelineHeaderElement.classList.toggle("small", !largeRows);
         this._dataGrid.scheduleUpdate();
     },
 
     /**
      * @param {!Event} event
      */
     _contextMenu: function(event)
     {
         // TODO(allada) Fix datagrid's contextmenu so NetworkLogViewColumns can attach it's own contextmenu event
         if (this._columns.contextMenu(event))
@@ skipping 207 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");

[alph, 2016/10/08 01:35:09]

nit: you can pass several classes in a single call to remove.

[allada, 2016/10/08 02:06:33]

Done.

+        this._timelineColumnSortIcon.classList.remove("sort-descending");
+        if (this._dataGrid.sortColumnIdentifier() === "timeline") {

[alph, 2016/10/08 01:35:09]

nit: we prefer early returns i.e. if (!...) return;

[allada, 2016/10/08 02:06:33]

Done.

+            if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
+                this._timelineColumnSortIcon.classList.add("sort-ascending");
+            else
+                this._timelineColumnSortIcon.classList.add("sort-descending");
+        }
     },
 
     /**
      * @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;
 }