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

Source/devtools/front_end/timeline/TimelineTreeView.js

 // Copyright 2015 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
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineTreeView = function(model)
 {
     WebInspector.VBox.call(this);
     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});
     columns.push({id: "activity", title: WebInspector.UIString("Activity"), disclosure: true, sortable: true});
 
     var nonessentialEvents = [
         WebInspector.TimelineModel.RecordType.EventDispatch,
         WebInspector.TimelineModel.RecordType.FunctionCall,
         WebInspector.TimelineModel.RecordType.TimerFire
     ];
@@ skipping 65 matching lines @@
             if (id === this._groupBySetting.get())
                 this._groupByCombobox.select(option);
         }
         addGroupingOption.call(this, WebInspector.UIString("No Grouping"), WebInspector.TimelineTreeView.GroupBy.None);
         addGroupingOption.call(this, WebInspector.UIString("Group by Domain"), WebInspector.TimelineTreeView.GroupBy.Domain);
         addGroupingOption.call(this, WebInspector.UIString("Group by Subdomain"), WebInspector.TimelineTreeView.GroupBy.Subdomain);
         addGroupingOption.call(this, WebInspector.UIString("Group by URL"), WebInspector.TimelineTreeView.GroupBy.URL);
         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();
     },
 
     _onGroupByChanged: function()
     {
         this._groupBySetting.set(this._groupByCombobox.selectedOption().value);
         this._refreshTree();
     },
 
     _refreshTree: function()
     {
         this.dataGrid.rootNode().removeChildren();
         var topDown = WebInspector.TimelineModel.buildTopDownTree(
             this._model.mainThreadEvents(), this._startTime, this._endTime, this._filters, WebInspector.TimelineTreeView.eventId);
         var isTopDown = this._modeCombobox.selectedOption().value === WebInspector.TimelineTreeView.Mode.TopDown;
         var tree = isTopDown ? this._preformTopDownTreeGrouping(topDown) : this._buildBottomUpTree(topDown);
         this.dataGrid.markColumnAsSortedBy(isTopDown ? "total" : "self", WebInspector.DataGrid.Order.Descending);
         var maxSelfTime = 0;
         var maxTotalTime = 0;
         for (var child of tree.children.values()) {
             maxSelfTime = Math.max(maxSelfTime, child.selfTime);
             maxTotalTime = Math.max(maxTotalTime, child.totalTime);
         }
         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();
     },
 
     /**
      * @param {!WebInspector.TimelineModel.ProfileTreeNode} topDownTree
      * @return {!WebInspector.TimelineModel.ProfileTreeNode}
      */
     _preformTopDownTreeGrouping: function(topDownTree)
@@ skipping 139 matching lines @@
 {
     if (event.name === WebInspector.TimelineModel.RecordType.JSFrame) {
         var data = event.args["data"];
         return "f:" + data["functionName"] + "@" + (data["scriptId"] || data["url"] || "");
     }
     return event.name + ":@" + WebInspector.TimelineTreeView.eventURL(event);
 }
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
+ * @return {?Object}
+ */
+WebInspector.TimelineTreeView.eventStackFrame = function(event)
+{
+    var data = event.args["data"] || event.args["beginData"];
+    if (data)
+        return data;
+    var topFrame = event.stackTrace && event.stackTrace[0];
+    if (topFrame)
+        return topFrame;
+    var initiator = event.initiator;
+    return initiator && initiator.stackTrace && initiator.stackTrace[0] || null;
+}
+
+/**
+ * @param {!WebInspector.TracingModel.Event} event
  * @return {?string}
  */
 WebInspector.TimelineTreeView.eventURL = function(event)
 {
-    var data = event.args["data"] || event.args["beginData"];
-    var url = data && data["url"];
-    if (url)
-        return url;
-    var topFrame = event.stackTrace && event.stackTrace[0];
-    url = topFrame && topFrame["url"];
-    if (url)
-        return url;
-    var initiator = event.initiator;
-    var initiatorTopFrame = initiator && initiator.stackTrace && initiator.stackTrace[0];
-    return initiatorTopFrame && initiatorTopFrame["url"] || null;
+    var frame = WebInspector.TimelineTreeView.eventStackFrame(event);
+    return frame && frame["url"] || null;
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SortableDataGridNode}
  * @param {!WebInspector.TimelineModel.ProfileTreeNode} profileNode
  * @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
      * @return {string}
      */
     function formatMilliseconds(time)
     {
         return WebInspector.UIString("%.1f\u2009ms", time);
     }
     /**
      * @param {number} value
      * @return {string}
      */
     function formatPercent(value)
     {
         return WebInspector.UIString("%.2f\u2009%%", value);
     }
 
     this._populated = false;
     this._profileNode = profileNode;
+    this._treeView = treeView;
     this._totalTime = grandTotalTime;
     this._maxTimes = { self: maxSelfTime, total: maxTotalTime };
     var selfTime = profileNode.selfTime;
     var selfPercent = selfTime / grandTotalTime * 100;
     var totalTime = profileNode.totalTime;
     var totalPercent = totalTime / grandTotalTime * 100;
     var data = {
         "activity": profileNode.name,
         "self-percent": formatPercent(selfPercent),
         "self": formatMilliseconds(selfTime),
@@ skipping 26 matching lines @@
         var cell = this.createTD(columnIdentifier);
         var container = cell.createChild("div", "name-container");
         var icon = container.createChild("div", "activity-icon");
         var name = container.createChild("div", "activity-name");
         var link = container.createChild("div", "activity-link");
         var event = this._profileNode.event;
         if (event) {
             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 {
             name.textContent = this._profileNode.name;
             icon.style.backgroundColor = WebInspector.TimelineUIUtils.colorForURL(this._profileNode.name);
         }
         return cell;
     },
 
     /**
@@ skipping 21 matching lines @@
      * @override
      */
     populate: function()
     {
         if (this._populated)
             return;
         this._populated = true;
         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);
         }
     },
 
     __proto__: WebInspector.SortableDataGridNode.prototype
 }