DevTools: Show JS callstacks on tracing-based timeline

Source/devtools/front_end/timeline/TimelineFlameChart.js

 /*
  * Copyright (C) 2014 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 443 matching lines @@
     this._target = target;
     this._font = "12px " + WebInspector.fontFamily();
     this._linkifier = new WebInspector.Linkifier();
     this._palette = new WebInspector.TraceViewPalette();
     this._entryIndexToTitle = {};
     this._filters = [];
     this.addFilter(WebInspector.TracingTimelineUIUtils.hiddenEventsFilter());
     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}
      */
     barHeight: function()
     {
         return 20;
     },
 
     /**
@@ skipping 25 matching lines @@
      * @param {number} entryIndex
      * @return {?string}
      */
     entryTitle: function(entryIndex)
     {
         var event = this._entryEvents[entryIndex];
         if (event) {
             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];
         if (!title) {
             title = WebInspector.UIString("Unexpected entryIndex %d", entryIndex);
             console.error(title);
         }
         return title;
     },
 
@@ skipping 134 matching lines @@
 
     /**
      * @param {number} entryIndex
      * @return {string}
      */
     entryColor: function(entryIndex)
     {
         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;
     },
 
     /**
      * @param {number} entryIndex
      * @param {!CanvasRenderingContext2D} context
      * @param {?string} text
      * @param {number} barX
      * @param {number} barY
@@ skipping 57 matching lines @@
      * @param {number} entryIndex
      * @return {?{startTime: number, endTime: number}}
      */
     highlightTimeRange: function(entryIndex)
     {
         var event = this._entryEvents[entryIndex];
         if (!event)
             return null;
         return {
             startTime: event.startTime,
-            endTime: event.endTime
+            endTime: event.endTime || event.startTime + WebInspector.TracingBasedTimelineFlameChartDataProvider.InstantEventVisibleDuration
         }
     },
 
     /**
      * @return {number}
      */
     paddingLeft: function()
     {
         return 0;
     },
@@ skipping 23 matching lines @@
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      * @param {number} level
      */
     _appendEvent: function(event, level)
     {
         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;
     },
 
     /**
      * @param {number} entryIndex
      * @return {?WebInspector.TimelineSelection}
      */
     createSelection: function(entryIndex)
     {
         var event = this._entryEvents[entryIndex];
@@ skipping 217 matching lines @@
      * @param {number} entryIndex
      * @return {?WebInspector.TimelineSelection}
      */
     createSelection: function(entryIndex) { },
     /**
      * @param {?WebInspector.TimelineSelection} selection
      * @return {number}
      */
     entryIndexForSelection: function(selection) { }
 }