DevTools: Show JS callstacks on tracing-based timeline

Source/devtools/front_end/timeline/TimelineFlameChart.js

Index: Source/devtools/front_end/timeline/TimelineFlameChart.js
diff --git a/Source/devtools/front_end/timeline/TimelineFlameChart.js b/Source/devtools/front_end/timeline/TimelineFlameChart.js
index bd2a2acd061aa5d2df5f86e1851c25b9c16b137f..54893cf6dd39670c9ace3e24b5d06355b60246be 100644
--- a/Source/devtools/front_end/timeline/TimelineFlameChart.js
+++ b/Source/devtools/front_end/timeline/TimelineFlameChart.js
@@ -461,6 +461,8 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider = function(model, frameM
     this.addFilter(new WebInspector.TracingTimelineModel.ExclusiveEventNameFilter([WebInspector.TracingTimelineModel.RecordType.Program]));
 }
 
+WebInspector.TracingBasedTimelineFlameChartDataProvider.InstantEventVisibleDuration = 0.01;

[yurys, 2014/07/17 14:32:40]

InstantEventVisibleDurationMs

[alph, 2014/07/17 15:48:43]

Done.

+
 WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
     /**
      * @return {number}
@@ -506,6 +508,8 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
             var name = WebInspector.TracingTimelineUIUtils.styleForTraceEvent(event.name).title;
             // TODO(yurys): support event dividers
             var details = WebInspector.TracingTimelineUIUtils.buildDetailsNodeForTraceEvent(event, this._linkifier, false, this._target);
+            if (event.name === WebInspector.TracingTimelineModel.RecordType.JSFrame && details)
+                return details.textContent;
             return details ? WebInspector.UIString("%s (%s)", name, details.textContent) : name;
         }
         var title = this._entryIndexToTitle[entryIndex];
@@ -660,6 +664,8 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
         var event = this._entryEvents[entryIndex];
         if (!event)
             return "#555";
+        if (event.name === WebInspector.TracingTimelineModel.RecordType.JSFrame)
+            return WebInspector.TimelineFlameChartDataProvider.jsFrameColorGenerator().colorForID(event.args.data["functionName"]);
         var style = WebInspector.TracingTimelineUIUtils.styleForTraceEvent(event.name);
         return style.category.fillColorStop1;
     },
@@ -737,7 +743,7 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
             return null;
         return {
             startTime: event.startTime,
-            endTime: event.endTime
+            endTime: event.endTime || event.startTime + WebInspector.TracingBasedTimelineFlameChartDataProvider.InstantEventVisibleDuration
         }
     },
 
@@ -781,7 +787,7 @@ WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
         var index = this._entryEvents.length;
         this._entryEvents.push(event);
         this._timelineData.entryLevels[index] = level;
-        this._timelineData.entryTotalTimes[index] = event.duration || 1;
+        this._timelineData.entryTotalTimes[index] = event.duration || WebInspector.TracingBasedTimelineFlameChartDataProvider.InstantEventVisibleDuration;
         this._timelineData.entryStartTimes[index] = event.startTime;
     },