[Devtools] Added contextmenu item to allow different timeline styles for exp

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, 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")
-        };
+        timelineColumn.hideable = false;
     }
 
     this._networkLogView = networkLogView;
 
     /** @type {!WebInspector.Setting} */
     this._persistantSettings = WebInspector.settings.createSetting("networkLogColumns", {});
 
     /** @type {!Array<!Element>} */
     this._dropDownColumnSelectors = [];
 
@@ skipping 329 matching lines @@
                     calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration
                 }
             ]
         }
     }
 ];
 
 WebInspector.NetworkLogViewColumns._filmStripDividerColor = "#fccc49";
 
 /**
+ * @enum {string}
+ */
+WebInspector.NetworkLogViewColumns.TimelineSortIds = {
+    StartTime: "startTime",
+    ResponseTime: "responseReceivedTime",
+    EndTime: "endTime",
+    Duration: "duration",
+    Latency: "latency"
+};
+
+/**
  * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
  * @return {!WebInspector.DataGrid.ColumnDescriptor}
  */
 WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor = function(columnConfig)
 {
     return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({
         id: columnConfig.id,
         title: columnConfig.title,
         sortable: columnConfig.sortable,
         align: columnConfig.align,
@@ skipping 53 matching lines @@
         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, false, "networkPanelSplitViewTimeline");
             this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
         }
     },
 
     _setupTimeline: function()
     {
@@ skipping 178 matching lines @@
     },
 
     sortByCurrentColumn: function()
     {
         this._sortHandler();
     },
 
     _sortHandler: function()
     {
         var columnId = this._dataGrid.sortColumnId();
+        this._networkLogView.removeAllNodeHighlights();
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline") && 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)
             return;
 
-        this._networkLogView.removeAllNodeHighlights();
         this._dataGrid.sortNodes(columnConfig.sortConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
         this._networkLogView.dataGridSorted();
-
-        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            return;
-
-        this._timelineColumnSortIcon.classList.remove("sort-ascending", "sort-descending");
-
-        if (this._dataGrid.sortColumnId() === "timeline") {
-            if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
-                this._timelineColumnSortIcon.classList.add("sort-ascending");
-            else
-                this._timelineColumnSortIcon.classList.add("sort-descending");
-        }
-
-        this._timelineRequestsAreStale = true;
-
     },
 
     /**
      * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
      */
     _sortByDropdownItem: function(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();
-
-        // TODO(allada) This entire function will be removed when the timeline comes out of exp, so copying code above for now.
-        if (!Runtime.experiments.isEnabled("canvasNetworkTimeline"))
-            return;
-
-        this._timelineColumnSortIcon.classList.remove("sort-ascending", "sort-descending");
-
-        if (this._dataGrid.sortColumnId() === "timeline") {
-            if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending)
-                this._timelineColumnSortIcon.classList.add("sort-ascending");
-            else
-                this._timelineColumnSortIcon.classList.add("sort-descending");
-        }
-
-        this._timelineRequestsAreStale = true;
     },
 
     _updateColumns: function()
     {
         if (!this._dataGrid)
             return;
         var visibleColumns = /** @type {!Object.<string, boolean>} */ ({});
         if (this._gridMode) {
             for (var columnConfig of this._columns)
-                visibleColumns[columnConfig.id] = (columnConfig.visible || !columnConfig.hideable);
+                visibleColumns[columnConfig.id] = columnConfig.visible;
         } else {
             visibleColumns.name = true;
         }
         this._dataGrid.setColumnsVisiblity(visibleColumns);
     },
 
     /**
      * @param {boolean} gridMode
      */
     switchViewMode: function(gridMode)
@@ skipping 82 matching lines @@
         var subtitleDiv = fragment.createChild("div", "network-header-subtitle");
         subtitleDiv.createTextChild(subtitle);
         return fragment;
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _innerHeaderContextMenu: function(contextMenu)
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds;
+            var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Timeline"));
+            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 columnConfigs = this._columns.filter(columnConfig => columnConfig.hideable);
         var nonResponseHeaders = columnConfigs.filter(columnConfig => !columnConfig.isResponseHeader);
         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)
             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));
 
         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;
+            if (sortId === timelineSortIds.Duration || sortId === timelineSortIds.Latency)
+                calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration);
+            this._networkLogView.setCalculator(calculator);
+
+            this._activeTimelineSortId = sortId;
+            this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
+            this._sortHandler();
+        }
     },
 
     _manageCustomHeaderDialog: function()
     {
         var customHeaders = [];
         for (var columnConfig of this._columns) {
             if (columnConfig.isResponseHeader)
                 customHeaders.push({title: columnConfig.title, editable: columnConfig.isCustomHeader});
         }
         var manageCustomHeaders = new WebInspector.NetworkManageCustomHeadersView(customHeaders, headerTitle => !!this._addCustomHeader(headerTitle), this._changeCustomHeader.bind(this), this._removeCustomHeader.bind(this));
@@ skipping 238 matching lines @@
     {
         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);
     }
 };