[Devtools] New network timeline experiment Part 1

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.Setting} networkLogLargeRowsSetting
  */
 WebInspector.NetworkLogViewColumns = function(networkLogView, networkLogLargeRowsSetting)
 {
+    if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+        var timelineColumn = WebInspector.NetworkLogViewColumns._defaultColumns.find(columnConfig => columnConfig.id === "timeline");
+        timelineColumn.visible = false;
+        timelineColumn.hideable = true;
+        timelineColumn.sortConfig = {
+            sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime")
+        };
+    }
+
     this._networkLogView = networkLogView;
 
     /** @type {!WebInspector.Setting} */
     this._persistantSettings = WebInspector.settings.createSetting("networkLogColumns", {});
 
     /** @type {!Array<!Element>} */
     this._dropDownColumnSelectors = [];
 
     this._networkLogLargeRowsSetting = networkLogLargeRowsSetting;
     this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, this);
@@ skipping 306 matching lines @@
                 },
                 {
                     id: "latency",
                     title: WebInspector.UIString("Timeline \u2013 Latency"),
                     sort: WebInspector.DataGrid.Order.Descending,
                     sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "latency"),
                     calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration
                 }
             ]
         }
-    },
+    }
 ];
 
 /**
  * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
  * @return {!WebInspector.DataGrid.ColumnDescriptor}
  */
 WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor = function(columnConfig)
 {
     return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({
         id: columnConfig.id,
@@ skipping 41 matching lines @@
 
         /** @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._popoverHelper = new WebInspector.PopoverHelper(this._networkLogView.element, 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.asWidget().show(this._networkLogView.element);
-
         this._updateColumns();
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortHandler, this);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this.updateDividersIfNeeded, this);
 
         this._timelineGrid = new WebInspector.TimelineGrid();
         this._timelineGrid.element.classList.add("network-timeline-grid");
-        this._dataGrid.element.appendChild(this._timelineGrid.element);
+        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();
 
         return this._dataGrid;
     },
 
     _setupDropdownColumns: function()
@@ skipping 265 matching lines @@
         if (!oldColumnConfig || (currentColumnConfig && oldHeaderId !== newHeaderId))
             return false;
 
         this._removeCustomHeader(oldHeaderId);
         this._addCustomHeader(newHeaderTitle, newHeaderId, oldIndex);
         return true;
     },
 
     updateDividersIfNeeded: function()
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         if (!this._networkLogView.isShowing()) {
             this._networkLogView.scheduleRefresh();
             return;
         }
 
         var timelineOffset = this._dataGrid.columnOffset("timeline");
         // Position timline grid location.
         if (timelineOffset)
             this._timelineGrid.element.style.left = timelineOffset + "px";
 
@@ skipping 54 matching lines @@
     {
         this._popupLinkifier.reset();
     },
 
     /**
      * @param {!Array<number>} times
      * @param {string} className
      */
     addEventDividers: function(times, className)
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         for (var i = 0; i < times.length; ++i) {
             var element = createElementWithClass("div", "network-event-divider " + className);
             this._timelineGrid.addEventDivider(element);
             this._eventDividers.push({time: times[i], element: element});
         }
         // Update event dividers immediately
         this._updateEventDividers();
         // Schedule refresh in case dividers change the calculator span.
         this._networkLogView.scheduleRefresh();
     },
 
     _updateEventDividers: function()
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time);
         for (var divider of this._eventDividers) {
             var timePercent = calculator.computePercentageFromEventTime(divider.time);
             divider.element.classList.toggle("invisible", timePercent < 0);
             divider.element.style.left = timePercent + "%";
         }
     },
 
     hideEventDividers: function()
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         this._timelineGrid.hideEventDividers();
     },
 
     showEventDividers: function()
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         this._timelineGrid.showEventDividers();
     },
 
     _updateRowsSize: function()
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            return;
         this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
     }
 }