DevTools: Use better event titles on timeline tree view.

BUG=521215
R=caseq

Review URL: https://codereview.chromium.org/1293273002

git-svn-id: svn://svn.chromium.org/blink/trunk@200760 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/tracing/timeline-js-callstacks-expected.txt

@@ -23,7 +23,7 @@ JSFrame: 251.000 / 0.200 w
 JSFrame: 251.200 / 0.200 w
 
 Top-Down Chart: 0.000  40.000
-  FunctionCall: 22.305  40.000
+  Function Call: 22.305  40.000
     a: 0.000  8.380
       b: 7.125  8.380
         c: 0.351  0.351
@@ -35,47 +35,47 @@ Top-Down Chart: 0.000  40.000
           Layout: 0.100  0.100
     x: 0.000  8.482
       y: 0.482  8.482
-        FunctionCall: 7.600  8.000
+        Function Call: 7.600  8.000
           z: 0.000  0.200
             w: 0.200  0.200
           w: 0.200  0.200
 Bottom-Up Chart: 40.000  40.000
-  FunctionCall: 29.905  48.000
+  Function Call: 29.905  48.000
     y: 7.600  8.000
       x: 7.600  8.000
-        FunctionCall: 7.600  8.000
+        Function Call: 7.600  8.000
   b: 7.125  8.380
     a: 7.125  8.380
-      FunctionCall: 7.125  8.380
+      Function Call: 7.125  8.380
   c: 0.351  0.351
     b: 0.351  0.351
       a: 0.351  0.351
-        FunctionCall: 0.351  0.351
+        Function Call: 0.351  0.351
   g: 0.905  0.905
     e: 0.905  0.905
       b: 0.905  0.905
         a: 0.905  0.905
-          FunctionCall: 0.905  0.905
+          Function Call: 0.905  0.905
   a: 0.733  0.833
     l: 0.733  0.833
       f: 0.733  0.833
-        FunctionCall: 0.733  0.833
+        Function Call: 0.733  0.833
   Layout: 0.100  0.100
     a: 0.100  0.100
       l: 0.100  0.100
         f: 0.100  0.100
-          FunctionCall: 0.100  0.100
+          Function Call: 0.100  0.100
   y: 0.482  8.482
     x: 0.482  8.482
-      FunctionCall: 0.482  8.482
+      Function Call: 0.482  8.482
   w: 0.400  0.400
     z: 0.200  0.200
-      FunctionCall: 0.200  0.200
+      Function Call: 0.200  0.200
         y: 0.200  0.200
           x: 0.200  0.200
-            FunctionCall: 0.200  0.200
-    FunctionCall: 0.200  0.200
+            Function Call: 0.200  0.200
+    Function Call: 0.200  0.200
       y: 0.200  0.200
         x: 0.200  0.200
-          FunctionCall: 0.200  0.200
+          Function Call: 0.200  0.200
 

third_party/WebKit/LayoutTests/inspector/tracing/timeline-js-callstacks.html

@@ -444,7 +444,10 @@ function test()
 
     function printProfileTree(padding, node)
     {
-        InspectorTest.addResult("  ".repeat(padding) + node.name + ": " + [node.selfTime, node.totalTime].map(function (t) { return t.toFixed(3); }).join("  "));
+        var name = node.name || (node.event.name === WebInspector.TimelineModel.RecordType.JSFrame
+            ? WebInspector.beautifyFunctionName(node.event.args["data"]["functionName"])
+            : WebInspector.TimelineUIUtils.eventTitle(node.event));
+        InspectorTest.addResult("  ".repeat(padding) + name + ": " + [node.selfTime, node.totalTime].map(function (t) { return t.toFixed(3); }).join("  "));
         (node.children || new Map()).forEach(printProfileTree.bind(null, padding + 1));
     }
 

third_party/WebKit/Source/devtools/front_end/timeline/TimelineModel.js

@@ -1511,7 +1511,6 @@ WebInspector.TimelineModel.buildTopDownTree = function(events, startTime, endTim
             node.totalTime = time;
             node.selfTime = time;
             node.parent = parent;
-            node.name = eventName(e);
             node.id = id;
             node.event = e;
             parent.children.set(id, node);
@@ -1534,19 +1533,6 @@ WebInspector.TimelineModel.buildTopDownTree = function(events, startTime, endTim
         parent = parent.parent;
     }
 
-    /**
-     * @param {!WebInspector.TracingModel.Event} e
-     * @return {string}
-     */
-    function eventName(e)
-    {
-        if (e.name === "JSFrame")
-            return WebInspector.beautifyFunctionName(e.args.data.functionName);
-        if (e.name === "EventDispatch")
-            return WebInspector.UIString("Event%s", e.args.data ? " (" + e.args.data.type + ")" : "");
-        return e.name;
-    }
-
     WebInspector.TimelineModel.forEachEvent(events, onStartEvent, onEndEvent);
     root.totalTime -= root.selfTime;
     root.selfTime = 0;

third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js

@@ -352,19 +352,20 @@ WebInspector.TimelineTreeView.GridNode.prototype = {
         var icon = container.createChild("div", "activity-icon");
         var name = container.createChild("div", "activity-name");
         var link = container.createChild("div", "activity-link");
-        name.textContent = this._profileNode.name;
-        var color;
         var event = this._profileNode.event;
         if (event) {
+            name.textContent = event.name === WebInspector.TimelineModel.RecordType.JSFrame
+                ? WebInspector.beautifyFunctionName(event.args["data"]["functionName"])
+                : WebInspector.TimelineUIUtils.eventTitle(event);
             var url = WebInspector.TimelineTreeView.eventURL(event);
             if (url)
                 link.appendChild(WebInspector.linkifyResourceAsNode(url));
             var category = WebInspector.TimelineUIUtils.eventStyle(event).category;
-            color = category.fillColorStop1;
+            icon.style.backgroundColor = category.fillColorStop1;
         } else {
-            color = WebInspector.TimelineUIUtils.colorForURL(this._profileNode.name);
+            name.textContent = this._profileNode.name;
+            icon.style.backgroundColor = WebInspector.TimelineUIUtils.colorForURL(this._profileNode.name);
         }
-        icon.style.backgroundColor = color || "lightGrey";
         return cell;
     },