[DevTools] Improve UX of timeline column sort in Network panel.

Source/devtools/front_end/network/NetworkLogView.js

Index: Source/devtools/front_end/network/NetworkLogView.js
diff --git a/Source/devtools/front_end/network/NetworkLogView.js b/Source/devtools/front_end/network/NetworkLogView.js
index df44004fc3b9e1a79ce2d02d5d811f2c744d3cf0..4ea83ec63d09c9241b63d9db5632db6f82a51a53 100644
--- a/Source/devtools/front_end/network/NetworkLogView.js
+++ b/Source/devtools/front_end/network/NetworkLogView.js
@@ -498,36 +498,44 @@ WebInspector.NetworkLogView.prototype = {
         var option = createElement("option");
         option.value = "startTime";
         option.label = WebInspector.UIString("Timeline");
+        option.disabled = true;
         timelineSorting.appendChild(option);
 
         option = createElement("option");
         option.value = "startTime";
-        option.label = WebInspector.UIString("Start Time");
+        option.label = WebInspector.UIString("Timeline \u2013 Start Time");
+        option.sortOrder = WebInspector.DataGrid.Order.Ascending;
         timelineSorting.appendChild(option);
 
         option = createElement("option");
         option.value = "responseTime";
-        option.label = WebInspector.UIString("Response Time");
+        option.label = WebInspector.UIString("Timeline \u2013 Response Time");

[paulirish, 2015/05/27 15:54:29]

Response Start Time

[dgozman, 2015/05/29 12:58:31]

This one is too similar to Start Time. I'd rather leave as is.

+        option.sortOrder = WebInspector.DataGrid.Order.Ascending;
         timelineSorting.appendChild(option);
 
         option = createElement("option");
         option.value = "endTime";
-        option.label = WebInspector.UIString("End Time");
+        option.label = WebInspector.UIString("Timeline \u2013 End Time");
+        option.sortOrder = WebInspector.DataGrid.Order.Ascending;
         timelineSorting.appendChild(option);
 
         option = createElement("option");
         option.value = "duration";
-        option.label = WebInspector.UIString("Duration");
+        option.label = WebInspector.UIString("Timeline \u2013 Duration");

[paulirish, 2015/05/27 15:54:29]

Total Duration

[dgozman, 2015/05/29 12:58:32]

Done.

+        option.sortOrder = WebInspector.DataGrid.Order.Descending;
         timelineSorting.appendChild(option);
 
         option = createElement("option");
         option.value = "latency";
-        option.label = WebInspector.UIString("Latency");
+        option.label = WebInspector.UIString("Timeline \u2013 Latency");
+        option.sortOrder = WebInspector.DataGrid.Order.Descending;
         timelineSorting.appendChild(option);
 
         var header = this._dataGrid.headerTableHeader("timeline");
         header.replaceChild(timelineSorting, header.firstChild);
+        header.createChild("div", "sort-order-icon-container").createChild("div", "sort-order-icon");
 
+        timelineSorting.selectedIndex = 1;
         timelineSorting.addEventListener("click", function(event) { event.consume(); }, false);
         timelineSorting.addEventListener("change", this._sortByTimeline.bind(this), false);
         this._timelineSortSelector = timelineSorting;
@@ -607,7 +615,7 @@ WebInspector.NetworkLogView.prototype = {
         var sortingFunction = this._sortingFunctions[value];
         this._dataGrid.sortNodes(sortingFunction);
         this._highlightNthMatchedRequestForSearch(this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false);
-        this._dataGrid.markColumnAsSortedBy("timeline", WebInspector.DataGrid.Order.Ascending);
+        this._dataGrid.markColumnAsSortedBy("timeline", selectedOption.sortOrder);
     },
 
     _updateSummaryBar: function()