DevTools: Make functions on timeline tree view point to the right source location

Source/devtools/front_end/timeline/TimelineTreeView.js

Index: Source/devtools/front_end/timeline/TimelineTreeView.js
diff --git a/Source/devtools/front_end/timeline/TimelineTreeView.js b/Source/devtools/front_end/timeline/TimelineTreeView.js
index 06a890b25317f4b6f03e5d4e9a2c6ce1ee9228a1..33936886a8abd9f4c8350fc460da1463594caf37 100644
--- a/Source/devtools/front_end/timeline/TimelineTreeView.js
+++ b/Source/devtools/front_end/timeline/TimelineTreeView.js
@@ -13,6 +13,7 @@ WebInspector.TimelineTreeView = function(model)
     this.element.classList.add("timeline-tree-view");
 
     this._model = model;
+    this._linkifier = new WebInspector.Linkifier();

[pfeldman, 2015/08/29 00:40:45]

You need to reset the linkifier upon dispose.

[alph, 2015/09/01 21:38:55]

The tree view is never disposed. Added reset on tree view updates data.

     var columns = [];
     columns.push({id: "self", title: WebInspector.UIString("Self Time"), width: "120px", sort: WebInspector.DataGrid.Order.Descending, sortable: true});
     columns.push({id: "total", title: WebInspector.UIString("Total Time"), width: "120px", sortable: true});
@@ -98,6 +99,18 @@ WebInspector.TimelineTreeView.prototype = {
         panelToolbar.appendToolbarItem(this._groupByCombobox);
     },
 
+    /**
+     * @param {?string} scriptId
+     * @param {string} url
+     * @param {number} lineNumber
+     * @param {number=} columnNumber
+     * @return {!Element}
+     */
+    linkifyLocation: function(scriptId, url, lineNumber, columnNumber)
+    {
+        return this._linkifier.linkifyScriptLocation(this._model.target(), scriptId, url, lineNumber, columnNumber);
+    },
+
     _onTreeModeChanged: function()
     {
         this._refreshTree();
@@ -125,7 +138,7 @@ WebInspector.TimelineTreeView.prototype = {
         }
         for (var child of tree.children.values()) {
             // Exclude the idle time off the total calculation.
-            var gridNode = new WebInspector.TimelineTreeView.GridNode(child, topDown.totalTime, maxSelfTime, maxTotalTime);
+            var gridNode = new WebInspector.TimelineTreeView.GridNode(child, topDown.totalTime, maxSelfTime, maxTotalTime, this);
             this.dataGrid.insertChild(gridNode);
         }
         this._sortingChanged();
@@ -285,21 +298,28 @@ WebInspector.TimelineTreeView.eventId = function(event)
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
- * @return {?string}
+ * @return {?Object}
  */
-WebInspector.TimelineTreeView.eventURL = function(event)
+WebInspector.TimelineTreeView.eventStackFrame = function(event)
 {
     var data = event.args["data"] || event.args["beginData"];
-    var url = data && data["url"];
-    if (url)
-        return url;
+    if (data)
+        return data;
     var topFrame = event.stackTrace && event.stackTrace[0];
-    url = topFrame && topFrame["url"];
-    if (url)
-        return url;
+    if (topFrame)
+        return topFrame;
     var initiator = event.initiator;
-    var initiatorTopFrame = initiator && initiator.stackTrace && initiator.stackTrace[0];
-    return initiatorTopFrame && initiatorTopFrame["url"] || null;
+    return initiator && initiator.stackTrace && initiator.stackTrace[0] || null;
+}
+
+/**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @return {?string}
+ */
+WebInspector.TimelineTreeView.eventURL = function(event)
+{
+    var frame = WebInspector.TimelineTreeView.eventStackFrame(event);
+    return frame && frame["url"] || null;
 }
 
 /**
@@ -309,8 +329,9 @@ WebInspector.TimelineTreeView.eventURL = function(event)
  * @param {number} grandTotalTime
  * @param {number} maxSelfTime
  * @param {number} maxTotalTime
+ * @param {!WebInspector.TimelineTreeView} treeView
  */
-WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime, maxSelfTime, maxTotalTime)
+WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView)
 {
     /**
      * @param {number} time
@@ -331,6 +352,7 @@ WebInspector.TimelineTreeView.GridNode = function(profileNode, grandTotalTime, m
 
     this._populated = false;
     this._profileNode = profileNode;
+    this._treeView = treeView;
     this._totalTime = grandTotalTime;
     this._maxTimes = { self: maxSelfTime, total: maxTotalTime };
     var selfTime = profileNode.selfTime;
@@ -377,9 +399,13 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
             name.textContent = event.name === WebInspector.TimelineModel.RecordType.JSFrame
                 ? WebInspector.beautifyFunctionName(event.args["data"]["functionName"])
                 : WebInspector.TimelineUIUtils.eventTitle(event);
-            var url = WebInspector.TimelineTreeView.eventURL(event);
+            var frame = WebInspector.TimelineTreeView.eventStackFrame(event);
+            var scriptId = frame && frame["scriptId"];
+            var url = frame && frame["url"];
+            var lineNumber = frame && frame["lineNumber"] || 0;

[yurys, 2015/08/29 00:44:18]

Don't we start line numbering from 1 in the UI?

[alph, 2015/09/01 21:38:55]

Done.

+            var columnNumber = frame && frame["columnNumber"];
             if (url)
-                link.appendChild(WebInspector.linkifyResourceAsNode(url));
+                link.appendChild(this._treeView.linkifyLocation(scriptId, url, lineNumber, columnNumber));

[yurys, 2015/08/29 00:44:18]

When do you clear the linkifier?

[alph, 2015/09/01 21:38:55]

Added reset on tree repopulate.

             var category = WebInspector.TimelineUIUtils.eventStyle(event).category;
             icon.style.backgroundColor = category.fillColorStop1;
         } else {
@@ -421,7 +447,7 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
         if (!this._profileNode.children)
             return;
         for (var node of this._profileNode.children.values()) {
-            var gridNode = new WebInspector.TimelineTreeView.GridNode(node, this._totalTime, this._maxTimes.self, this._maxTimes.total);
+            var gridNode = new WebInspector.TimelineTreeView.GridNode(node, this._totalTime, this._maxTimes.self, this._maxTimes.total, this._treeView);
             this.insertChildOrdered(gridNode);
         }
     },