DevTools: fix aggegated pie chart for JSFrame events on Timeline

Source/devtools/front_end/timeline/TracingTimelineUIUtils.js

Index: Source/devtools/front_end/timeline/TracingTimelineUIUtils.js
diff --git a/Source/devtools/front_end/timeline/TracingTimelineUIUtils.js b/Source/devtools/front_end/timeline/TracingTimelineUIUtils.js
index 4e853e8528979a5c59fa52829d7b5c68656a904d..9756e2d32e67cb25e28e3f19fd54d1e2457be166 100644
--- a/Source/devtools/front_end/timeline/TracingTimelineUIUtils.js
+++ b/Source/devtools/front_end/timeline/TracingTimelineUIUtils.js
@@ -531,8 +531,19 @@ WebInspector.TracingTimelineUIUtils._buildTraceEventDetailsSynchronously = funct
     var fragment = document.createDocumentFragment();
     var stats = {};
     var hasChildren = WebInspector.TracingTimelineUIUtils._aggregatedStatsForTraceEvent(stats, model, event);
+
+    var selfTime = event.selfTime;
+    var selfCategory = WebInspector.TracingTimelineUIUtils.eventStyle(event).category;
+    // JSFrame events have 0 selfTime so we need to work around this below and add the event's time to scripting category.
+    if (event.name === WebInspector.TracingTimelineModel.RecordType.JSFrame && !event.selfTime && event.duration) {
+        selfTime = event.duration;
+        for (var categoryName in stats)
+            selfTime -= stats[categoryName];
+        stats[selfCategory.name] = selfTime + (stats[selfCategory.name] || 0);
+    }
+
     var pieChart = hasChildren ?
-        WebInspector.TimelineUIUtils.generatePieChart(stats, WebInspector.TracingTimelineUIUtils.eventStyle(event).category, event.selfTime) :
+        WebInspector.TimelineUIUtils.generatePieChart(stats, selfCategory, selfTime) :
         WebInspector.TimelineUIUtils.generatePieChart(stats);
     fragment.appendChild(pieChart);