[DevTools] Simplify getting back to default network order.

Source/devtools/front_end/network/NetworkLogView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 74 matching lines @@
     this._popupLinkifier = new WebInspector.Linkifier();
     /** @type {!WebInspector.Linkifier} */
     this.linkifier = new WebInspector.Linkifier();
 
     this._gridMode = true;
     this._recording = false;
     this._preserveLog = false;
 
     /** @type {number} */
     this._rowHeight = 0;
+    /** @type {!WebInspector.NetworkTimeCalculator} */
+    this._calculator = new WebInspector.NetworkTimeCalculator();
 
     this._addFilters();
     this._resetSuggestionBuilder();
     this._initializeView();
 
     this._overview.addEventListener(WebInspector.NetworkOverview.Events.WindowChanged, this._onWindowChanged, this);
 
     WebInspector.moduleSetting("networkColorCodeResourceTypes").addChangeListener(this._invalidateAllItems, this);
     this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, this);
 
@@ skipping 110 matching lines @@
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onWindowChanged: function(event)
     {
         var start = /** @type {number} */ (event.data.start);
         var end = /** @type {number} */ (event.data.end);
         if (!start && !end) {
             this._timeFilter = null;
-            this._timeCalculator.setWindow(null);
+            this._calculator.setWindow(null);
         } else {
             this._timeFilter = WebInspector.NetworkLogView._requestTimeFilter.bind(null, start, end);
-            this._timeCalculator.setWindow(new WebInspector.NetworkTimeBoundary(start, end));
+            this._calculator.setWindow(new WebInspector.NetworkTimeBoundary(start, end));
         }
         this._updateDividersIfNeeded();
         this._filterRequests();
     },
 
     clearSelection: function()
     {
         if (this._dataGrid.selectedNode)
             this._dataGrid.selectedNode.deselect();
     },
@@ skipping 39 matching lines @@
         this._removeAllNodeHighlights();
         this._parseFilterQuery(this._textFilterUI.value());
         this._filterRequests();
     },
 
     _initializeView: function()
     {
         this.element.id = "network-container";
 
         this._createSortingFunctions();
-        this._createCalculators();
         this._createTable();
         this._createTimelineGrid();
         this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 
         this._updateRowsSize();
 
         this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover.bind(this));
         // Enable faster hint.
         this._popoverHelper.setTimeout(250, 250);
 
@@ skipping 141 matching lines @@
                 weight: 6
             };
             if (headerName === "Content-Length")
                 descriptor.align = WebInspector.DataGrid.Align.Right;
             columns.push(descriptor);
         }
 
         columns.push({
             id: "timeline",
             title: WebInspector.NetworkLogView._columnTitles["timeline"],
-            sortable: false,
+            sortable: true,
             weight: 40,
             sort: WebInspector.DataGrid.Order.Ascending
         });
 
         this._dataGrid = new WebInspector.SortableDataGrid(columns);
         this._dataGrid.setStickToBottom(true);
         this._updateColumns();
         this._dataGrid.setName("networkLog");
         this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last);
         this._dataGrid.element.classList.add("network-log-grid");
         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
         this._dataGrid.element.addEventListener("mousedown", this._dataGridMouseDown.bind(this), true);
         this._dataGrid.show(this.element);
 
         // Event listeners need to be added _after_ we attach to the document, so that owner document is properly update.
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
         this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this._updateDividersIfNeeded, this);
 
-        this._patchTimelineHeader();
-        this._dataGrid.sortNodes(this._sortingFunctions.startTime, false);
+        this._sortItems();
     },
 
     /**
      * @param {!Event} event
      */
     _dataGridMouseDown: function(event)
     {
         if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
             event.consume();
     },
 
     /**
      * @param {string} title
      * @param {string} subtitle
      * @return {!DocumentFragment}
      */
     _makeHeaderFragment: function(title, subtitle)
     {
         var fragment = createDocumentFragment();
         fragment.createTextChild(title);
         var subtitleDiv = fragment.createChild("div", "network-header-subtitle");
         subtitleDiv.createTextChild(subtitle);
         return fragment;
     },
 
-    _patchTimelineHeader: function()
-    {
-        var timelineSorting = createElement("select");
-
-        var option = createElement("option");
-        option.value = "startTime";
-        option.label = WebInspector.UIString("Timeline");
-        timelineSorting.appendChild(option);
-
-        option = createElement("option");
-        option.value = "startTime";
-        option.label = WebInspector.UIString("Start Time");
-        timelineSorting.appendChild(option);
-
-        option = createElement("option");
-        option.value = "responseTime";
-        option.label = WebInspector.UIString("Response Time");
-        timelineSorting.appendChild(option);
-
-        option = createElement("option");
-        option.value = "endTime";
-        option.label = WebInspector.UIString("End Time");
-        timelineSorting.appendChild(option);
-
-        option = createElement("option");
-        option.value = "duration";
-        option.label = WebInspector.UIString("Duration");
-        timelineSorting.appendChild(option);
-
-        option = createElement("option");
-        option.value = "latency";
-        option.label = WebInspector.UIString("Latency");
-        timelineSorting.appendChild(option);
-
-        var header = this._dataGrid.headerTableHeader("timeline");
-        header.replaceChild(timelineSorting, header.firstChild);
-
-        timelineSorting.addEventListener("click", function(event) { event.consume(); }, false);
-        timelineSorting.addEventListener("change", this._sortByTimeline.bind(this), false);
-        this._timelineSortSelector = timelineSorting;
-    },
-
     _createSortingFunctions: function()
     {
         this._sortingFunctions = {};
         this._sortingFunctions.name = WebInspector.NetworkDataGridNode.NameComparator;
         this._sortingFunctions.method = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "method", false);
         this._sortingFunctions.status = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "statusCode", false);
         this._sortingFunctions.protocol = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "protocol", false);
         this._sortingFunctions.scheme = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "scheme", false);
         this._sortingFunctions.domain = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "domain", false);
         this._sortingFunctions.remoteAddress = WebInspector.NetworkDataGridNode.RemoteAddressComparator;
         this._sortingFunctions.type = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "mimeType", false);
         this._sortingFunctions.initiator = WebInspector.NetworkDataGridNode.InitiatorComparator;
         this._sortingFunctions.cookies = WebInspector.NetworkDataGridNode.RequestCookiesCountComparator;
         this._sortingFunctions.setCookies = WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator;
         this._sortingFunctions.size = WebInspector.NetworkDataGridNode.SizeComparator;
         this._sortingFunctions.time = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", false);
         this._sortingFunctions.connectionId = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "connectionId", false);
         this._sortingFunctions.timeline = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
-        this._sortingFunctions.startTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "startTime", false);
-        this._sortingFunctions.endTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "endTime", false);
-        this._sortingFunctions.responseTime = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "responseReceivedTime", false);
-        this._sortingFunctions.duration = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "duration", true);
-        this._sortingFunctions.latency = WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "latency", true);
-    },
-
-    _createCalculators: function()
-    {
-        /** @type {!WebInspector.NetworkTransferTimeCalculator} */
-        this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator();
-        /** @type {!WebInspector.NetworkTransferDurationCalculator} */
-        this._durationCalculator = new WebInspector.NetworkTransferDurationCalculator();
-
-        /** @type {!Object.<string, !WebInspector.NetworkTimeCalculator>} */
-        this._calculators = {};
-        this._calculators.timeline = this._timeCalculator;
-        this._calculators.startTime = this._timeCalculator;
-        this._calculators.endTime = this._timeCalculator;
-        this._calculators.responseTime = this._timeCalculator;
-        this._calculators.duration = this._durationCalculator;
-        this._calculators.latency = this._durationCalculator;
-
-        this._calculator = this._timeCalculator;
     },
 
     _sortItems: function()
     {
         this._removeAllNodeHighlights();
         var columnIdentifier = this._dataGrid.sortColumnIdentifier();
-        if (columnIdentifier === "timeline") {
-            this._sortByTimeline();
-            return;
-        }
         var sortingFunction = this._sortingFunctions[columnIdentifier];
         if (!sortingFunction)
             return;
 
         this._dataGrid.sortNodes(sortingFunction, !this._dataGrid.isSortOrderAscending());
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
-        this._timelineSortSelector.selectedIndex = 0;
-    },
-
-    _sortByTimeline: function()
-    {
-        this._removeAllNodeHighlights();
-        var selectedIndex = this._timelineSortSelector.selectedIndex;
-        if (!selectedIndex)
-            selectedIndex = 1; // Sort by start time by default.
-        var selectedOption = this._timelineSortSelector[selectedIndex];
-        var value = selectedOption.value;
-
-        this._setCalculator(this._calculators[value]);
-        var sortingFunction = this._sortingFunctions[value];
-        this._dataGrid.sortNodes(sortingFunction);
-        this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
-        this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
     },
 
     _updateSummaryBar: function()
     {
         var requestsNumber = this._nodesByRequestId.size;
 
         if (!requestsNumber) {
             if (this._summaryBarElement._isDisplayingWarning)
                 return;
             this._summaryBarElement._isDisplayingWarning = true;
@@ skipping 88 matching lines @@
 
         var timelineOffset = this._dataGrid.columnOffset("timeline");
         // Position timline grid location.
         if (timelineOffset)
             this._timelineGrid.element.style.left = timelineOffset + "px";
 
         var calculator = this.calculator();
         calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWidth);
         this._timelineGrid.updateDividers(calculator, 50);
 
-        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();
     },
 
     _updateEventDividers: function()
     {
         var calculator = this.calculator();
 
         var loadTimePercent = calculator.computePercentageFromEventTime(this._mainRequestLoadTime);
         this._loadDivider.classList.toggle("invisible", this._mainRequestLoadTime === -1 || loadTimePercent < 0);
         this._loadDivider.style.left = loadTimePercent + "%";
@@ skipping 13 matching lines @@
     {
         var requestIds = this._nodesByRequestId.keysArray();
         for (var i = 0; i < requestIds.length; ++i)
             this._staleRequestIds[requestIds[i]] = true;
         this.refresh();
     },
 
     /**
      * @return {!WebInspector.NetworkTimeCalculator}
      */
-    timeCalculator: function()
-    {
-        return this._timeCalculator;
-    },
-
-    /**
-     * @return {!WebInspector.NetworkTimeCalculator}
-     */
     calculator: function()
     {
         return this._calculator;
     },
 
     /**
-     * @param {!WebInspector.NetworkTimeCalculator} x
-     */
-    _setCalculator: function(x)
-    {
-        if (!x || this._calculator === x)
-            return;
-
-        this._calculator = x;
-        this._calculator.reset();
-
-        if (this._calculator.startAtZero)
-            this._timelineGrid.hideEventDividers();
-        else
-            this._timelineGrid.showEventDividers();
-
-        this._invalidateAllItems();
-    },
-
-    /**
      * @param {!WebInspector.Event} event
      */
     _loadEventFired: function(event)
     {
         if (!this._recording)
             return;
 
         var data = /** @type {number} */ (event.data);
         this._mainRequestLoadTime = data || -1;
         // Schedule refresh to update boundaries and draw the new line.
@@ skipping 27 matching lines @@
     {
         this._needsRefresh = false;
         if (this._refreshTimeout) {
             clearTimeout(this._refreshTimeout);
             delete this._refreshTimeout;
         }
 
         this._removeAllNodeHighlights();
 
         var oldBoundary = this.calculator().boundary();
-        this._timeCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
-        this._durationCalculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
-        this._timeCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
-        this._durationCalculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
+        this._calculator.updateBoundariesForEventTime(this._mainRequestLoadTime);
+        this._calculator.updateBoundariesForEventTime(this._mainRequestDOMContentLoadedTime);
 
         var dataGrid = this._dataGrid;
         var rootNode = dataGrid.rootNode();
         var nodesToInsert = [];
         for (var requestId in this._staleRequestIds) {
             var node = this._nodesByRequestId.get(requestId);
             if (!node)
                 continue;
             if (!node[WebInspector.NetworkLogView._isFilteredOutSymbol])
                 rootNode.removeChild(node);
             node[WebInspector.NetworkLogView._isFilteredOutSymbol] = !this._applyFilter(node);
             if (!node[WebInspector.NetworkLogView._isFilteredOutSymbol])
                 nodesToInsert.push(node);
             var request = node.request();
-            this._timeCalculator.updateBoundaries(request);
-            this._durationCalculator.updateBoundaries(request);
+            this._calculator.updateBoundaries(request);
         }
 
         for (var i = 0; i < nodesToInsert.length; ++i) {
             var node = nodesToInsert[i];
             var request = node.request();
             node.refresh();
             dataGrid.insertChild(node);
             node[WebInspector.NetworkLogView._isMatchingSearchQuerySymbol] = this._matchRequest(request);
         }
 
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
 
         if (this._shouldSetWaterfallWindow && this._mainRequestLoadTime !== -1) {
             var waterfallWindow = this.calculator().boundary();
             var overtime = this._mainRequestLoadTime - waterfallWindow.minimum;
             overtime = Number.constrain(overtime, WebInspector.NetworkLogView._waterfallMinOvertime, WebInspector.NetworkLogView._waterfallMaxOvertime)
             var waterfallEnd = this._mainRequestLoadTime + overtime;
             if (waterfallEnd <= waterfallWindow.maximum) {
                 waterfallWindow.maximum = waterfallEnd;
                 this._shouldSetWaterfallWindow = false;
-                this._timeCalculator.setWindow(waterfallWindow);
+                this._calculator.setWindow(waterfallWindow);
             }
         }
 
         if (!this.calculator().boundary().equals(oldBoundary)) {
             // The boundaries changed, so all item graphs are stale.
             this._updateDividersIfNeeded();
             var nodes = this._nodesByRequestId.valuesArray();
             for (var i = 0; i < nodes.length; ++i)
                 nodes[i].refreshGraph();
         }
@@ skipping 10 matching lines @@
         this._shouldSetWaterfallWindow = Runtime.experiments.isEnabled("showPrimaryLoadWaterfallInNetworkTimeline") && this._networkShowPrimaryLoadWaterfallSetting.get();
 
         this._clearSearchMatchedList();
         if (this._popoverHelper)
             this._popoverHelper.hidePopover();
 
         this._overview.reset();
         this._timeFilter = null;
         this._calculator.reset();
 
-        this._timeCalculator.setWindow(null);
+        this._calculator.setWindow(null);
 
         var nodes = this._nodesByRequestId.valuesArray();
         for (var i = 0; i < nodes.length; ++i)
             nodes[i].dispose();
 
         this._nodesByRequestId.clear();
         this._staleRequestIds = {};
         this._resetSuggestionBuilder();
 
         this._mainRequestLoadTime = -1;
@@ skipping 186 matching lines @@
      */
     _showPopover: function(anchor, popover)
     {
         var content;
         if (anchor.classList.contains("network-script-initiated")) {
             var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request);
             var initiator = /** @type {!NetworkAgent.Initiator} */ (request.initiator());
             content = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(request.target(), this._popupLinkifier, initiator.stackTrace, initiator.asyncStackTrace);
             popover.setCanShrink(true);
         } else {
-            content = WebInspector.RequestTimingView.createTimingTable(anchor.parentElement.request, this._timeCalculator.minimumBoundary());
+            content = WebInspector.RequestTimingView.createTimingTable(anchor.parentElement.request, this._calculator.minimumBoundary());
             popover.setCanShrink(false);
         }
         popover.showForAnchor(content, anchor);
     },
 
     _onHidePopover: function()
     {
         this._popupLinkifier.reset();
     },
 
@@ skipping 855 matching lines @@
     if (request.endTime !== -1 && request.endTime < windowStart)
         return false;
     return true;
 }
 
 WebInspector.NetworkLogView.EventTypes = {
     RequestSelected: "RequestSelected",
     SearchCountUpdated: "SearchCountUpdated",
     SearchIndexUpdated: "SearchIndexUpdated"
 };