DevTools: Show JS callstacks on tracing-based timeline

Source/devtools/front_end/timeline/TracingTimelineUIUtils.js

 // Copyright 2014 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.TimelineUIUtils}
  */
 WebInspector.TracingTimelineUIUtils = function()
 {
@@ skipping 334 matching lines @@
     case recordType.GCEvent:
         var delta = event.args["usedHeapSizeBefore"] - event.args["usedHeapSizeAfter"];
         detailsText = WebInspector.UIString("%s collected", Number.bytesToString(delta));
         break;
     case recordType.TimerFire:
         detailsText = eventData["timerId"];
         break;
     case recordType.FunctionCall:
         details = linkifyLocation(eventData["scriptId"], eventData["scriptName"], eventData["scriptLine"], 0);
         break;
+    case recordType.JSFrame:
+        details = linkifyLocation(eventData["scriptId"], eventData["url"], eventData["lineNumber"], eventData["columnNumber"]);
+        detailsText = eventData["functionName"];
+        break;
     case recordType.FireAnimationFrame:
         detailsText = eventData["id"];
         break;
     case recordType.EventDispatch:
         detailsText = eventData ? eventData["type"] : null;
         break;
     case recordType.Paint:
         var width = WebInspector.TimelineUIUtils.quadWidth(eventData.clip);
         var height = WebInspector.TimelineUIUtils.quadHeight(eventData.clip);
         if (width && height)
@@ skipping 49 matching lines @@
             var url = event.imageURL;
             if (url)
                 detailsText = WebInspector.displayNameForURL(url);
         break;
 
     default:
         details = linkifyTopCallFrame();
         break;
     }
 
-    if (!details && detailsText)
-        details = document.createTextNode(detailsText);
+    if (detailsText) {
+        if (details)
+            details.textContent = detailsText;
+        else
+            details = document.createTextNode(detailsText);
+    }
     return details;
 
     /**
      * @param {string} scriptId
      * @param {string} url
      * @param {number} lineNumber
      * @param {number=} columnNumber
      */
     function linkifyLocation(scriptId, url, lineNumber, columnNumber)
     {
@@ skipping 367 matching lines @@
     return result;
 }
 
 /**
  * @return {!WebInspector.TracingTimelineModel.Filter}
  */
 WebInspector.TracingTimelineUIUtils.hiddenEventsFilter = function()
 {
     return new WebInspector.TracingTimelineModel.InclusiveEventNameFilter(WebInspector.TracingTimelineUIUtils._visibleTypes());
 }