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

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.
 /**
  * @unrestricted
  */
 WebInspector.NetworkLogViewColumns = class {
   /**
    * @param {!WebInspector.NetworkLogView} networkLogView
    * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator
    * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
    * @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;
 
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
-    /** @type {?WebInspector.TimelineGrid} */
-    this._timelineGrid = null;
-    this._timelineHeaderElement = null;
     this._timelineRequestsAreStale = false;
     this._timelineScrollerWidthIsStale = true;
 
     /** @type {!WebInspector.Linkifier} */
     this._popupLinkifier = new WebInspector.Linkifier();
 
     /** @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._setupDataGrid();
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._setupTimeline();
+    this._setupTimeline();
   }
 
   /**
    * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
    * @return {!WebInspector.DataGrid.ColumnDescriptor}
    */
   static _convertToDataGridDescriptor(columnConfig) {
     return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({
       id: columnConfig.id,
       title: columnConfig.title,
       sortable: columnConfig.sortable,
       align: columnConfig.align,
       nonSelectable: columnConfig.nonSelectable,
       weight: columnConfig.weight
     });
   }
 
   wasShown() {
     this._updateRowsSize();
   }
 
-  willHide() {
-    this._popoverHelper.hidePopover();

[dgozman, 2016/11/07 18:22:56]

Why did you remove all hidePopover calls?

[allada, 2016/11/07 18:32:12]

Done.

-  }
-
   reset() {
-    if (this._popoverHelper)
-      this._popoverHelper.hidePopover();
-    this._timelineGrid.removeEventDividers();
-    this._shownEventDividers.clear();
-    this.updateDividersIfNeeded();
+    this._eventDividers.clear();
   }
 
   _setupDataGrid() {
     var defaultColumns = WebInspector.NetworkLogViewColumns._defaultColumns;
     var defaultColumnConfig = WebInspector.NetworkLogViewColumns._defaultColumnConfig;
 
     this._columns = /** @type {!Array<!WebInspector.NetworkLogViewColumns.Descriptor>} */ ([]);
     for (var currentConfigColumn of defaultColumns) {
       var columnConfig = /** @type {!WebInspector.NetworkLogViewColumns.Descriptor} */ (
           Object.assign(/** @type {!Object} */ ({}), defaultColumnConfig, currentConfigColumn));
@@ skipping 12 matching lines @@
         this._columns.map(WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor));
     this._dataGrid.element.addEventListener('mousedown', event => {
       if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName('a'))
         event.consume();
     }, true);
 
     this._dataGridScroller = this._dataGrid.scrollContainer;
 
     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() {
     this._timelineColumn =
         new WebInspector.NetworkTimelineColumn(this._networkLogView.rowHeight(), this._networkLogView.calculator());
 
     this._timelineColumn.element.addEventListener('contextmenu', handleContextMenu.bind(this));
     this._timelineColumn.element.addEventListener('mousewheel', this._onMouseWheel.bind(this, false), {passive: true});
     this._dataGridScroller.addEventListener('mousewheel', this._onMouseWheel.bind(this, true), true);
 
@@ skipping 65 matching lines @@
       this._timelineScrollerWidthIsStale = false;
       this._timelineColumn.setRightPadding(
           this._timelineScroller.offsetWidth - this._timelineScrollerContent.offsetWidth);
     }
   }
 
   _redrawTimelineColumn() {
     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();
     /** @type {!WebInspector.NetworkTimelineColumn.RequestData} */
     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(this._activeScroller.scrollTop, this._shownEventDividers, requestData);
+    this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividers, requestData);
   }
 
   /**
    * @param {?WebInspector.NetworkRequest} request
    * @param {boolean} highlightInitiatorChain
    */
   setHoveredRequest(request, highlightInitiatorChain) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain);
+    this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain);
   }
 
   _createTimelineHeader() {
     this._timelineHeaderElement = this._timelineColumn.contentElement.createChild('div', 'network-timeline-header');
     this._timelineHeaderElement.addEventListener('click', timelineHeaderClicked.bind(this));
     this._timelineHeaderElement.addEventListener(
         'contextmenu', event => this._innerHeaderContextMenu(new WebInspector.ContextMenu(event)));
     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}
      */
     function timelineHeaderClicked() {
       var sortOrders = WebInspector.DataGrid.Order;
       var sortOrder =
           this._dataGrid.sortOrder() === sortOrders.Ascending ? sortOrders.Descending : sortOrders.Ascending;
       this._dataGrid.markColumnAsSortedBy('timeline', sortOrder);
       this._sortHandler();
     }
   }
 
   /**
    * @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() {
     var largeRows = !!this._networkLogLargeRowsSetting.get();
     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);
   }
 
   /**
    * @param {!Element} element
    */
   show(element) {
-    if (Runtime.experiments.isEnabled('canvasNetworkTimeline'))
-      this._splitWidget.show(element);
-    else
-      this._dataGrid.asWidget().show(element);
+    this._splitWidget.show(element);
   }
 
   /**
    * @return {!WebInspector.SortableDataGrid} dataGrid
    */
   dataGrid() {
     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();
   }
 
   _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)
         this._timelineColumnSortIcon.classList.add('sort-ascending');
       else
         this._timelineColumnSortIcon.classList.add('sort-descending');
 
       this._timelineRequestsAreStale = true;
       var sortFunction =
           WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, this._activeTimelineSortId);
       this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
       return;
     }
 
     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._dataGrid.sortNodes(columnConfig.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._networkLogView.dataGridSorted();
-  }
-
   _updateColumns() {
     if (!this._dataGrid)
       return;
     var visibleColumns = /** @type {!Object.<string, boolean>} */ ({});
     if (this._gridMode) {
       for (var columnConfig of this._columns)
         visibleColumns[columnConfig.id] = columnConfig.visible;
     } else {
       visibleColumns.name = true;
     }
     this._dataGrid.setColumnsVisiblity(visibleColumns);
   }
 
   /**
    * @param {boolean} gridMode
    */
   switchViewMode(gridMode) {
     if (this._gridMode === gridMode)
       return;
     this._gridMode = gridMode;
 
     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();
   }
 
   /**
    * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
    */
   _toggleColumnVisibility(columnConfig) {
     this._loadColumns();
     columnConfig.visible = !columnConfig.visible;
     this._saveColumns();
     this._updateColumns();
@@ skipping 34 matching lines @@
     subtitleDiv.createTextChild(subtitle);
     return fragment;
   }
 
   /**
    * @param {!WebInspector.ContextMenu} contextMenu
    */
   _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();
 
     /**
      * @param {!WebInspector.NetworkLogViewColumns.TimelineSortIds} sortId
      * @this {WebInspector.NetworkLogViewColumns}
      */
     function setTimelineMode(sortId) {
       var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time);
       var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
@@ skipping 54 matching lines @@
     if (currentColumnConfig)
       return null;
 
     var columnConfig = /** @type {!WebInspector.NetworkLogViewColumns.Descriptor} */ (
         Object.assign(/** @type {!Object} */ ({}), WebInspector.NetworkLogViewColumns._defaultColumnConfig, {
           id: headerId,
           title: headerTitle,
           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)
       this._dataGrid.addColumn(WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor(columnConfig), index);
     this._saveColumns();
     this._updateColumns();
     return columnConfig;
   }
 
   /**
@@ skipping 11 matching lines @@
     var oldColumnConfig = this._columns[oldIndex];
     var currentColumnConfig = this._columns.find(columnConfig => columnConfig.id === newHeaderId);
     if (!oldColumnConfig || (currentColumnConfig && oldHeaderId !== newHeaderId))
       return false;
 
     this._removeCustomHeader(oldHeaderId);
     this._addCustomHeader(newHeaderTitle, newHeaderId, oldIndex);
     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
    * @return {!Element|!AnchorBox|undefined}
    */
   _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)
         return anchor;
     }
   }
 
   /**
    * @param {!Element} anchor
    * @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);
   }
 
   _onHidePopover() {
     this._popupLinkifier.reset();
   }
 
   /**
    * @param {!Array<number>} times
    * @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;
+    // 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;
     }
-
-    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.
+    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();
   }
 };
 
 WebInspector.NetworkLogViewColumns._initialSortColumn = 'timeline';
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
  *     weight: number,
  *     hideable: boolean,
  *     nonSelectable: boolean,
  *     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',
   Time: 'Time'
 };
 
 /**
  * @type {!Object} column
  */
 WebInspector.NetworkLogViewColumns._defaultColumnConfig = {
@@ skipping 14 matching lines @@
 WebInspector.NetworkLogViewColumns._defaultColumns = [
   {
     id: 'name',
     title: WebInspector.UIString('Name'),
     subtitle: WebInspector.UIString('Path'),
     visible: true,
     weight: 20,
     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',
     title: WebInspector.UIString('Size'),
     visible: true,
     subtitle: WebInspector.UIString('Content'),
     align: WebInspector.DataGrid.Align.Right,
-    sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator}
+    sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator
   },
   {
     id: 'time',
     title: WebInspector.UIString('Time'),
     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';
 
 /**
  * @enum {string}
  */
 WebInspector.NetworkLogViewColumns.TimelineSortIds = {
   StartTime: 'startTime',
   ResponseTime: 'responseReceivedTime',
   EndTime: 'endTime',
   Duration: 'duration',
   Latency: 'latency'
 };