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.InstantEventVisibleDurationMs = 0.01;
+
 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 45 matching lines @@
     },
 
     /**
      * @param {string} headerName
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      */
     _appendThreadTimelineData: function(headerName, events)
     {
         var maxStackDepth = 0;
         var openEvents = [];
+        var heights = [];
         var headerAppended = false;
+        var level = 0;
         for (var i = 0; i < events.length; ++i) {
             var e = events[i];
             if (!e.endTime && e.phase !== WebInspector.TracingModel.Phase.Instant)
                 continue;
             if (!this._isVisible(e))
                 continue;
-            while (openEvents.length && openEvents.peekLast().endTime <= e.startTime)
+            while (openEvents.length && openEvents.peekLast().endTime <= e.startTime) {
                 openEvents.pop();
+                level = heights.pop();
+            }
             if (!headerAppended) {
-                this._appendHeaderRecord(headerName, this._currentLevel++);
+                this._appendHeaderRecord(headerName, this._currentLevel);
+                ++level;
                 headerAppended = true;
             }
-            this._appendEvent(e, this._currentLevel + openEvents.length);
-            maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1);
-            if (e.endTime)
+            var height = this._processEvent(e, this._currentLevel + level);
+            if (e.endTime) {
                 openEvents.push(e);
+                heights.push(level)
+            }
+            level += height;
+            maxStackDepth = Math.max(maxStackDepth, level);
         }
-        this._currentLevel += maxStackDepth + (headerAppended ? 1 : 0);
+        this._currentLevel += maxStackDepth;
     },
 
     /**
+     * @param {!WebInspector.TracingModel.Event} event
+     * @param {number} baseLevel
+     * @return {number}
+     */
+    _processEvent: function(event, baseLevel)
+    {
+        var level = baseLevel;
+        if (event.stackTrace && WebInspector.experimentsSettings.timelineJSCPUProfile.isEnabled()) {
+            for (var i = event.stackTrace.length - 1; i >= 0; --i) {
+                var payload = /** @type {!WebInspector.TracingModel.EventPayload} */ ({
+                    ph: WebInspector.TracingModel.Phase.Complete,
+                    cat: WebInspector.TracingModel.DevToolsMetadataEventCategory,
+                    name: WebInspector.TracingTimelineModel.RecordType.JSFrame,
+                    ts: event.startTime * 1000,
+                    dur: event.duration * 1000,
+                    args: {
+                        data: event.stackTrace[i]
+                    }
+                });
+                var jsFrameEvent = new WebInspector.TracingModel.Event(payload, 0, event.thread);
+                this._appendEvent(jsFrameEvent, level++);
+            }
+        }
+        this._appendEvent(event, level++)
+        return level - baseLevel;
+    },
+
+    /**
      * @param {!WebInspector.TracingTimelineModel.Filter} filter
      */
     addFilter: function(filter)
     {
         this._filters.push(filter);
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      * @return {boolean}
@@ skipping 47 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.InstantEventVisibleDurationMs
         }
     },
 
     /**
      * @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.InstantEventVisibleDurationMs;
         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) { }
 }