[Devtools] Move NetworkTimelineColumn into NetworkLogViewColumns P1

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.NetworkTransferTimeCalculator} timeCalculator
+ * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
  * @param {!WebInspector.Setting} networkLogLargeRowsSetting
  */
-WebInspector.NetworkLogViewColumns = function(networkLogView, networkLogLargeRowsSetting)
+WebInspector.NetworkLogViewColumns = function(networkLogView, timeCalculator, durationCalculator, 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);
 
     /** @type {!Array<{time: number, element: !Element}>} */
     this._eventDividers = [];
 
     this._gridMode = true;
 
-    /** @type {?WebInspector.DataGrid} */
-    this._dataGrid = null;
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
     /** @type {?WebInspector.TimelineGrid} */
     this._timelineGrid = null;
 
     /** @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();
 };
 WebInspector.NetworkLogViewColumns._initialSortColumn = "timeline";
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
@@ skipping 313 matching lines @@
     },
 
     reset: function()
     {
         if (this._popoverHelper)
             this._popoverHelper.hidePopover();
         this._timelineGrid.removeEventDividers();
         this.updateDividersIfNeeded();
     },
 
-    /**
-     * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator
-     * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
-     * @return {!WebInspector.SortableDataGrid} dataGrid
-     */
-    createGrid: function(timeCalculator, durationCalculator)
+    _setupDataGrid: function()
     {
         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));
             columnConfig.id = columnConfig.id;
             if (columnConfig.subtitle)
                 columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
             this._columns.push(columnConfig);
         }
         this._loadColumns();
 
-        /** @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._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
+
         this._dataGrid = new WebInspector.SortableDataGrid(this._columns.map(WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor));
 
         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._dataGrid.markColumnAsSortedBy(WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending);
 
         this._updateRowsSize();
 
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            this._splitWidget = new WebInspector.SplitWidget(true, false, "networkPanelSplitViewTimeline");
+            this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
+        }
+    },
+
+    /**
+     * @param {!Element} element
+     */
+    show: function(element)
+    {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+            this._splitWidget.show(element);
+        else
+            this._dataGrid.asWidget().show(element);
+    },
+
+    /**
+     * @return {!WebInspector.SplitWidget}
+     */
+    splitWidget: function()
+    {
+        // This is a temporary function used until the move of timelinecolumn into NetworkLogViewColumns is done.
+        return this._splitWidget;
+    },
+
+    /**
+     * @return {!WebInspector.SortableDataGrid} dataGrid
+     */
+    dataGrid: function()
+    {
         return this._dataGrid;
     },
 
     _setupDropdownColumns: function()
     {
         for (var columnConfig of this._columns) {
             if (!columnConfig.sortConfig || !columnConfig.sortConfig.entries)
                 continue;
             var select = createElement("select");
             var placeHolderOption = select.createChild("option");
@@ skipping 84 matching lines @@
         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();
+        else
+            this._splitWidget.hideMain();
     },
 
     /**
      * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
      */
     _toggleColumnVisibility: function(columnConfig)
     {
         this._loadColumns();
         columnConfig.visible = !columnConfig.visible;
         this._saveColumns();
@@ skipping 295 matching lines @@
         for (var divider of this._eventDividers)
             divider.element.classList.toggle("network-frame-divider-selected", false);
     },
 
     _updateRowsSize: function()
     {
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             return;
         this._timelineGrid.element.classList.toggle("small", !this._networkLogLargeRowsSetting.get());
     }
-};
+};