[Devtools] Move canvas timeline out of experiments and remove old code

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
index 59b3a7814baaf12076723bbe80d3bd4b235e8194..6035d31a7ec863ffcc3a1041329a9c784ef6a1a6 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js
@@ -12,29 +12,16 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {!WebInspector.Setting} networkLogLargeRowsSetting
    */
   constructor(networkLogView, timeCalculator, durationCalculator, networkLogLargeRowsSetting) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      var timelineColumn =
-          WebInspector.NetworkLogViewColumns._defaultColumns.find(columnConfig => columnConfig.id === 'timeline');
-      timelineColumn.visible = false;
-      timelineColumn.hideable = false;
-    }
-
     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);
 
-    /** @type {!Array<{time: number, element: !Element}>} */
-    this._eventDividers = [];
-
     /** @type {!Map<string, !Array<number>>} */
-    this._shownEventDividers = new Map();
+    this._eventDividers = new Map();
     this._eventDividersShown = false;
 
     this._gridMode = true;
@@ -42,9 +29,6 @@ WebInspector.NetworkLogViewColumns = class {
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
-    /** @type {?WebInspector.TimelineGrid} */
-    this._timelineGrid = null;
-    this._timelineHeaderElement = null;
     this._timelineRequestsAreStale = false;
     this._timelineScrollerWidthIsStale = true;
 
@@ -57,8 +41,7 @@ WebInspector.NetworkLogViewColumns = class {
     this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._setupTimeline();
+    this._setupTimeline();
   }
 
   /**
@@ -87,9 +70,7 @@ WebInspector.NetworkLogViewColumns = class {
   reset() {
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
-    this._timelineGrid.removeEventDividers();
-    this._shownEventDividers.clear();
-    this.updateDividersIfNeeded();
+    this._eventDividers.clear();
   }
 
   _setupDataGrid() {
@@ -122,26 +103,16 @@ WebInspector.NetworkLogViewColumns = class {
 
     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._activeTimelineSortId = WebInspector.NetworkLogViewColumns.TimelineSortIds.StartTime;
     this._dataGrid.markColumnAsSortedBy(
         WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending);
 
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewTimeline', 200);
-      var widget = this._dataGrid.asWidget();
-      widget.setMinimumSize(150, 0);
-      this._splitWidget.setMainWidget(widget);
-    }
+    this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewTimeline', 200);
+    var widget = this._dataGrid.asWidget();
+    widget.setMinimumSize(150, 0);
+    this._splitWidget.setMainWidget(widget);
   }
 
   _setupTimeline() {
@@ -227,7 +198,7 @@ WebInspector.NetworkLogViewColumns = class {
     if (!this._timelineRequestsAreStale) {
       this._updateScrollerWidthIfNeeded();
       this._timelineColumn.update(
-          this._activeScroller.scrollTop, this._eventDividersShown ? this._shownEventDividers : undefined);
+          this._activeScroller.scrollTop, this._eventDividersShown ? this._eventDividers : undefined);
       return;
     }
     var currentNode = this._dataGrid.rootNode();
@@ -238,7 +209,7 @@ WebInspector.NetworkLogViewColumns = class {
         requestData.navigationRequest = currentNode.request();
       requestData.requests.push(currentNode.request());
     }
-    this._timelineColumn.update(this._activeScroller.scrollTop, this._shownEventDividers, requestData);
+    this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividers, requestData);
   }
 
   /**
@@ -246,8 +217,7 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredRequest(request, highlightInitiatorChain) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain);
+    this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain);
   }
 
   _createTimelineHeader() {
@@ -258,7 +228,7 @@ WebInspector.NetworkLogViewColumns = class {
     var innerElement = this._timelineHeaderElement.createChild('div');
     innerElement.textContent = WebInspector.UIString('Waterfall');
     this._timelineColumnSortIcon = this._timelineHeaderElement.createChild('div', 'sort-order-icon-container')
-                                       .createChild('div', 'sort-order-icon');
+        .createChild('div', 'sort-order-icon');
 
     /**
      * @this {WebInspector.NetworkLogViewColumns}
@@ -276,13 +246,11 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {!WebInspector.NetworkTimeCalculator} x
    */
   setCalculator(x) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._timelineColumn.setCalculator(x);
+    this._timelineColumn.setCalculator(x);
   }
 
   dataChanged() {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._timelineRequestsAreStale = true;
+    this._timelineRequestsAreStale = true;
   }
 
   _updateRowsSize() {
@@ -290,13 +258,10 @@ WebInspector.NetworkLogViewColumns = class {
     this._dataGrid.element.classList.toggle('small', !largeRows);
     this._dataGrid.scheduleUpdate();
 
-    if (!Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      return;
     this._timelineScrollerWidthIsStale = true;
     this._timelineColumn.setRowHeight(this._networkLogView.rowHeight());
     this._timelineScroller.classList.toggle('small', !largeRows);
     this._timelineHeaderElement.classList.toggle('small', !largeRows);
-    this._timelineGrid.element.classList.toggle('small', !this._networkLogLargeRowsSetting.get());
     this._timelineColumn.setHeaderHeight(this._timelineScroller.offsetTop);
   }
 
@@ -304,10 +269,7 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {!Element} element
    */
   show(element) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._splitWidget.show(element);
-    else
-      this._dataGrid.asWidget().show(element);
+    this._splitWidget.show(element);
   }
 
   /**
@@ -317,28 +279,6 @@ WebInspector.NetworkLogViewColumns = class {
     return this._dataGrid;
   }
 
-  _setupDropdownColumns() {
-    for (var columnConfig of this._columns) {
-      if (!columnConfig.sortConfig || !columnConfig.sortConfig.entries)
-        continue;
-      var select = createElement('select');
-      var placeHolderOption = select.createChild('option');
-      placeHolderOption.classList.add('hidden');
-      for (var entry of columnConfig.sortConfig.entries) {
-        var option = select.createChild('option');
-        option.value = entry.id;
-        option.label = entry.title;
-        select.appendChild(option);
-      }
-      var header = this._dataGrid.headerTableHeader(columnConfig.id);
-      header.replaceChild(select, header.firstChild);
-      header.createChild('div', 'sort-order-icon-container').createChild('div', 'sort-order-icon');
-      columnConfig.selectBox = select;
-      select.addEventListener('change', this._sortByDropdownItem.bind(this, columnConfig), false);
-      this._dropDownColumnSelectors.push(select);
-    }
-  }
-
   sortByCurrentColumn() {
     this._sortHandler();
   }
@@ -346,7 +286,7 @@ WebInspector.NetworkLogViewColumns = class {
   _sortHandler() {
     var columnId = this._dataGrid.sortColumnId();
     this._networkLogView.removeAllNodeHighlights();
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline') && columnId === 'timeline') {
+    if (columnId === 'timeline') {
       this._timelineColumnSortIcon.classList.remove('sort-ascending', 'sort-descending');
 
       if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
@@ -362,38 +302,10 @@ WebInspector.NetworkLogViewColumns = class {
     }
 
     var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
-    if (!columnConfig)
-      return;
-    if (columnConfig.sortConfig && columnConfig.sortConfig.entries) {
-      this._sortByDropdownItem(columnConfig);
-      return;
-    }
-    if (!columnConfig.sortConfig.sortingFunction)
+    if (!columnConfig || !columnConfig.sortingFunction)
       return;
 
-    this._dataGrid.sortNodes(columnConfig.sortConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
-    this._networkLogView.dataGridSorted();
-  }
-
-  /**
-   * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
-   */
-  _sortByDropdownItem(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._dataGrid.sortNodes(columnConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
     this._networkLogView.dataGridSorted();
   }
 
@@ -421,29 +333,18 @@ WebInspector.NetworkLogViewColumns = class {
     if (gridMode) {
       if (this._dataGrid.selectedNode)
         this._dataGrid.selectedNode.selected = false;
-    } else {
-      this._networkLogView.removeAllNodeHighlights();
-      this._popoverHelper.hidePopover();
-    }
-
-    this._networkLogView.element.classList.toggle('brief-mode', !gridMode);
-    this._updateColumns();
-
-    if (!Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      return;
-    // TODO(allada) Move this code into the code above.
-    if (gridMode) {
       this._splitWidget.showBoth();
       this._activeScroller = this._timelineScroller;
       this._timelineScroller.scrollTop = this._dataGridScroller.scrollTop;
-      this._dataGridScroller.style.overflow = 'hidden';
       this._dataGrid.setScrollContainer(this._timelineScroller);
     } else {
+      this._networkLogView.removeAllNodeHighlights();
       this._splitWidget.hideSidebar();
       this._activeScroller = this._dataGridScroller;
-      this._dataGridScroller.style.overflow = 'overlay';
       this._dataGrid.setScrollContainer(this._dataGridScroller);
     }
+    this._networkLogView.element.classList.toggle('brief-mode', !gridMode);
+    this._updateColumns();
   }
 
   /**
@@ -498,42 +399,43 @@ WebInspector.NetworkLogViewColumns = class {
   _innerHeaderContextMenu(contextMenu) {
     var columnConfigs = this._columns.filter(columnConfig => columnConfig.hideable);
     var nonResponseHeaders = columnConfigs.filter(columnConfig => !columnConfig.isResponseHeader);
-    for (var columnConfig of nonResponseHeaders)
+    for (var columnConfig of nonResponseHeaders) {
       contextMenu.appendCheckboxItem(
           columnConfig.title, this._toggleColumnVisibility.bind(this, columnConfig), columnConfig.visible);
+    }
 
     contextMenu.appendSeparator();
 
     var responseSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Response Headers'));
     var responseHeaders = columnConfigs.filter(columnConfig => columnConfig.isResponseHeader);
-    for (var columnConfig of responseHeaders)
+    for (var columnConfig of responseHeaders) {
       responseSubMenu.appendCheckboxItem(
           columnConfig.title, this._toggleColumnVisibility.bind(this, columnConfig), columnConfig.visible);
+    }
 
     responseSubMenu.appendSeparator();
     responseSubMenu.appendItem(
         WebInspector.UIString('Manage Header Columns\u2026'), this._manageCustomHeaderDialog.bind(this));
 
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      contextMenu.appendSeparator();
-      var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
-      var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall'));
-      timelineSubMenu.appendCheckboxItem(
-          WebInspector.UIString('Start Time'), setTimelineMode.bind(this, timelineSortIds.StartTime),
-          this._activeTimelineSortId === timelineSortIds.StartTime);
-      timelineSubMenu.appendCheckboxItem(
-          WebInspector.UIString('Response Time'), setTimelineMode.bind(this, timelineSortIds.ResponseTime),
-          this._activeTimelineSortId === timelineSortIds.ResponseTime);
-      timelineSubMenu.appendCheckboxItem(
-          WebInspector.UIString('End Time'), setTimelineMode.bind(this, timelineSortIds.EndTime),
-          this._activeTimelineSortId === timelineSortIds.EndTime);
-      timelineSubMenu.appendCheckboxItem(
-          WebInspector.UIString('Total Duration'), setTimelineMode.bind(this, timelineSortIds.Duration),
-          this._activeTimelineSortId === timelineSortIds.Duration);
-      timelineSubMenu.appendCheckboxItem(
-          WebInspector.UIString('Latency'), setTimelineMode.bind(this, timelineSortIds.Latency),
-          this._activeTimelineSortId === timelineSortIds.Latency);
-    }
+    contextMenu.appendSeparator();
+
+    var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
+    var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall'));
+    timelineSubMenu.appendCheckboxItem(
+        WebInspector.UIString('Start Time'), setTimelineMode.bind(this, timelineSortIds.StartTime),
+        this._activeTimelineSortId === timelineSortIds.StartTime);
+    timelineSubMenu.appendCheckboxItem(
+        WebInspector.UIString('Response Time'), setTimelineMode.bind(this, timelineSortIds.ResponseTime),
+        this._activeTimelineSortId === timelineSortIds.ResponseTime);
+    timelineSubMenu.appendCheckboxItem(
+        WebInspector.UIString('End Time'), setTimelineMode.bind(this, timelineSortIds.EndTime),
+        this._activeTimelineSortId === timelineSortIds.EndTime);
+    timelineSubMenu.appendCheckboxItem(
+        WebInspector.UIString('Total Duration'), setTimelineMode.bind(this, timelineSortIds.Duration),
+        this._activeTimelineSortId === timelineSortIds.Duration);
+    timelineSubMenu.appendCheckboxItem(
+        WebInspector.UIString('Latency'), setTimelineMode.bind(this, timelineSortIds.Latency),
+        this._activeTimelineSortId === timelineSortIds.Latency);
 
     contextMenu.show();
 
@@ -608,9 +510,7 @@ WebInspector.NetworkLogViewColumns = class {
           isResponseHeader: true,
           isCustomHeader: true,
           visible: true,
-          sortConfig: {
-            sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, headerId)
-          }
+          sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, headerId)
         }));
     this._columns.splice(index, 0, columnConfig);
     if (this._dataGrid)
@@ -642,34 +542,6 @@ WebInspector.NetworkLogViewColumns = class {
     return true;
   }
 
-  updateDividersIfNeeded() {
-    // TODO(allada) Remove this code out when timeline canvas experiment is over.
-    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';
-
-    var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time);
-    calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWidth);
-    this._timelineGrid.updateDividers(calculator, 75);
-
-    if (calculator.startAtZero) {
-      // If our current sorting method starts at zero, that means it shows all
-      // requests starting at the same point, and so onLoad event and DOMContent
-      // event lines really wouldn't make much sense here, so don't render them.
-      return;
-    }
-
-    this._updateEventDividers();
-  }
-
   /**
    * @param {!Element} element
    * @param {!Event} event
@@ -678,11 +550,7 @@ WebInspector.NetworkLogViewColumns = class {
   _getPopoverAnchor(element, event) {
     if (!this._gridMode)
       return;
-    var anchor = element.enclosingNodeOrSelfWithClass('network-graph-bar') ||
-        element.enclosingNodeOrSelfWithClass('network-graph-label');
-    if (anchor && anchor.parentElement.request && anchor.parentElement.request.timing)
-      return anchor;
-    anchor = element.enclosingNodeOrSelfWithClass('network-script-initiated');
+    var anchor = element.enclosingNodeOrSelfWithClass('network-script-initiated');
     if (anchor && anchor.request) {
       var initiator = /** @type {!WebInspector.NetworkRequest} */ (anchor.request).initiator();
       if (initiator && initiator.stack)
@@ -695,18 +563,11 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {!WebInspector.Popover} popover
    */
   _showPopover(anchor, popover) {
-    var content;
-    if (anchor.classList.contains('network-script-initiated')) {
-      var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request);
-      var initiator = /** @type {!Protocol.Network.Initiator} */ (request.initiator());
-      content = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(
-          request.target(), this._popupLinkifier, initiator.stack);
-      popover.setCanShrink(true);
-    } else {
-      content = WebInspector.RequestTimingView.createTimingTable(
-          anchor.parentElement.request, this._networkLogView.timeCalculator().minimumBoundary());
-      popover.setCanShrink(false);
-    }
+    var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request);
+    var initiator = /** @type {!Protocol.Network.Initiator} */ (request.initiator());
+    var content = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(
+        request.target(), this._popupLinkifier, initiator.stack);
+    popover.setCanShrink(true);
     popover.showForAnchor(content, anchor);
   }
 
@@ -719,87 +580,44 @@ WebInspector.NetworkLogViewColumns = class {
    * @param {string} className
    */
   addEventDividers(times, className) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      // TODO(allada) When we remove old timeline remove this and pass in the color.
-      var color = 'transparent';
-      switch (className) {
-        case 'network-blue-divider':
-          color = 'hsla(240, 100%, 80%, 0.7)';
-          break;
-        case 'network-red-divider':
-          color = 'rgba(255, 0, 0, 0.5)';
-          break;
-        default:
-          return;
-      }
-      var currentTimes = this._shownEventDividers.get(color) || [];
-      this._shownEventDividers.set(color, currentTimes.concat(times));
-
-      this._networkLogView.scheduleRefresh();
-      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});
+    // TODO(allada) Remove this and pass in the color.
+    var color = 'transparent';
+    switch (className) {
+      case 'network-blue-divider':
+        color = 'hsla(240, 100%, 80%, 0.7)';
+        break;
+      case 'network-red-divider':
+        color = 'rgba(255, 0, 0, 0.5)';
+        break;
+      default:
+        return;
     }
-    // Update event dividers immediately
-    this._updateEventDividers();
-    // Schedule refresh in case dividers change the calculator span.
+    var currentTimes = this._eventDividers.get(color) || [];
+    this._eventDividers.set(color, currentTimes.concat(times));
     this._networkLogView.scheduleRefresh();
   }
 
-  _updateEventDividers() {
-    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() {
     this._eventDividersShown = true;
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      this._redrawTimelineColumn();
-      return;
-    }
-    this._timelineGrid.hideEventDividers();
+    this._redrawTimelineColumn();
   }
 
   showEventDividers() {
     this._eventDividersShown = false;
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      this._redrawTimelineColumn();
-      return;
-    }
-    this._timelineGrid.showEventDividers();
+    this._redrawTimelineColumn();
   }
 
   /**
    * @param {number} time
    */
   selectFilmStripFrame(time) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      this._shownEventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]);
-      this._redrawTimelineColumn();
-      return;
-    }
-    for (var divider of this._eventDividers)
-      divider.element.classList.toggle('network-frame-divider-selected', divider.time === time);
+    this._eventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]);
+    this._redrawTimelineColumn();
   }
 
   clearFilmStripFrame() {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) {
-      this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor);
-      this._redrawTimelineColumn();
-      return;
-    }
-    for (var divider of this._eventDividers)
-      divider.element.classList.toggle('network-frame-divider-selected', false);
+    this._eventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor);
+    this._redrawTimelineColumn();
   }
 };
 
@@ -818,20 +636,12 @@ WebInspector.NetworkLogViewColumns._initialSortColumn = 'timeline';
  *     sortable: boolean,
  *     align: (?WebInspector.DataGrid.Align|undefined),
  *     isResponseHeader: boolean,
- *     sortConfig: !WebInspector.NetworkLogViewColumns.SortConfig,
+ *     sortingFunction: (!function(!WebInspector.NetworkDataGridNode, !WebInspector.NetworkDataGridNode):number|undefined),
  *     isCustomHeader: boolean
  * }}
  */
 WebInspector.NetworkLogViewColumns.Descriptor;
 
-/**
- * @typedef {{
- *     sortingFunction: (!function(!WebInspector.NetworkDataGridNode, !WebInspector.NetworkDataGridNode):number|undefined),
- *     entries: (!Array.<!WebInspector.DataGrid.ColumnDescriptor>|undefined)
- * }}
- */
-WebInspector.NetworkLogViewColumns.SortConfig;
-
 /** @enum {string} */
 WebInspector.NetworkLogViewColumns._calculatorTypes = {
   Duration: 'Duration',
@@ -866,67 +676,66 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [
     hideable: false,
     nonSelectable: false,
     alwaysVisible: true,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.NameComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.NameComparator
   },
   {
     id: 'method',
     title: WebInspector.UIString('Method'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'requestMethod')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'requestMethod')
   },
   {
     id: 'status',
     title: WebInspector.UIString('Status'),
     visible: true,
     subtitle: WebInspector.UIString('Text'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'statusCode')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'statusCode')
   },
   {
     id: 'protocol',
     title: WebInspector.UIString('Protocol'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'protocol')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'protocol')
   },
   {
     id: 'scheme',
     title: WebInspector.UIString('Scheme'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'scheme')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'scheme')
   },
   {
     id: 'domain',
     title: WebInspector.UIString('Domain'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'domain')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'domain')
   },
   {
     id: 'remoteaddress',
     title: WebInspector.UIString('Remote Address'),
     weight: 10,
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RemoteAddressComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.RemoteAddressComparator
   },
   {
     id: 'type',
     title: WebInspector.UIString('Type'),
     visible: true,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.TypeComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.TypeComparator
   },
   {
     id: 'initiator',
     title: WebInspector.UIString('Initiator'),
     visible: true,
     weight: 10,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.InitiatorComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.InitiatorComparator
   },
   {
     id: 'cookies',
     title: WebInspector.UIString('Cookies'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestCookiesCountComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestCookiesCountComparator
   },
   {
     id: 'setcookies',
     title: WebInspector.UIString('Set Cookies'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator
   },
   {
     id: 'size',
@@ -934,7 +743,7 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [
     visible: true,
     subtitle: WebInspector.UIString('Content'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator
   },
   {
     id: 'time',
@@ -942,131 +751,75 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [
     visible: true,
     subtitle: WebInspector.UIString('Latency'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration')
   },
   {
     id: 'priority',
     title: WebInspector.UIString('Priority'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.InitialPriorityComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.InitialPriorityComparator
   },
   {
     id: 'connectionid',
     title: WebInspector.UIString('Connection ID'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'connectionId')}
+    sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'connectionId')
   },
   {
     id: 'cache-control',
     isResponseHeader: true,
     title: WebInspector.UIString('Cache-Control'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'cache-control')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'cache-control')
   },
   {
     id: 'connection',
     isResponseHeader: true,
     title: WebInspector.UIString('Connection'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'connection')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'connection')
   },
   {
     id: 'content-encoding',
     isResponseHeader: true,
     title: WebInspector.UIString('Content-Encoding'),
-    sortConfig: {
-      sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'content-encoding')
-    }
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'content-encoding')
   },
   {
     id: 'content-length',
     isResponseHeader: true,
     title: WebInspector.UIString('Content-Length'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {
-      sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderNumberComparator.bind(null, 'content-length')
-    }
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderNumberComparator.bind(null, 'content-length')
   },
   {
     id: 'etag',
     isResponseHeader: true,
     title: WebInspector.UIString('ETag'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'etag')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'etag')
   },
   {
     id: 'keep-alive',
     isResponseHeader: true,
     title: WebInspector.UIString('Keep-Alive'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'keep-alive')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'keep-alive')
   },
   {
     id: 'last-modified',
     isResponseHeader: true,
     title: WebInspector.UIString('Last-Modified'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderDateComparator.bind(null, 'last-modified')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderDateComparator.bind(null, 'last-modified')
   },
   {
     id: 'server',
     isResponseHeader: true,
     title: WebInspector.UIString('Server'),
-    sortConfig:
-        {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'server')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'server')
   },
   {
     id: 'vary',
     isResponseHeader: true,
     title: WebInspector.UIString('Vary'),
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary')}
+    sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary')
   },
-  {
-    id: 'timeline',
-    title: WebInspector.UIString('Waterfall'),
-    visible: true,
-    weight: 40,
-    sortable: false,
-    hideable: false,
-    sortConfig: {
-      entries: [
-        {
-          id: 'starttime',
-          title: WebInspector.UIString('Waterfall \u2013 Start Time'),
-          sort: WebInspector.DataGrid.Order.Ascending,
-          sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'startTime'),
-          calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time
-        },
-        {
-          id: 'responsetime',
-          title: WebInspector.UIString('Waterfall \u2013 Response Time'),
-          sort: WebInspector.DataGrid.Order.Ascending,
-          sortingFunction:
-              WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'responseReceivedTime'),
-          calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time
-        },
-        {
-          id: 'endtime',
-          title: WebInspector.UIString('Waterfall \u2013 End Time'),
-          sort: WebInspector.DataGrid.Order.Ascending,
-          sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'endTime'),
-          calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time
-        },
-        {
-          id: 'duration',
-          title: WebInspector.UIString('Waterfall \u2013 Total Duration'),
-          sort: WebInspector.DataGrid.Order.Descending,
-          sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration'),
-          calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration
-        },
-        {
-          id: 'latency',
-          title: WebInspector.UIString('Waterfall \u2013 Latency'),
-          sort: WebInspector.DataGrid.Order.Descending,
-          sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'latency'),
-          calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration
-        }
-      ]
-    }
-  }
+  // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
+  {id: 'timeline', title: '', visible: false, hideable: false}
 ];
 
 WebInspector.NetworkLogViewColumns._filmStripDividerColor = '#fccc49';