DevTools: Add grouping by Activity to Timeline treeview.

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

 // Copyright 2015 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.VBox}
  * @param {!WebInspector.TimelineModel} model
  * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
  */
@@ skipping 471 matching lines @@
         }
     },
 
     /**
      * @param {!WebInspector.TimelineProfileTree.Node} node
      * @return {!{name: string, color: string}}
      */
     _displayInfoForGroupNode: function(node)
     {
         var categories = WebInspector.TimelineUIUtils.categories();
+        var color = node.id ? WebInspector.TimelineUIUtils.eventColor(node.event) : categories["other"].color;
+
         switch (this._groupBySetting.get()) {
         case WebInspector.TimelineAggregator.GroupBy.Category:
             var category = categories[node.id] || categories["other"];
             return {name: category.title, color: category.color};
 
         case WebInspector.TimelineAggregator.GroupBy.Domain:
         case WebInspector.TimelineAggregator.GroupBy.Subdomain:
             var name = node.id;
             if (WebInspector.TimelineAggregator.isExtensionInternalURL(name))
                 name = WebInspector.UIString("[Chrome extensions overhead]");
             else if (name.startsWith("chrome-extension"))
                 name = this._executionContextNamesByOrigin.get(name) || name;
             return {
                 name: name || WebInspector.UIString("unattributed"),
-                color: node.id ? WebInspector.TimelineUIUtils.eventColor(node.event) : categories["other"].color
-            }
+                color: color
+            };
+
+        case WebInspector.TimelineAggregator.GroupBy.EventName:
+            var name = node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
+                WebInspector.UIString("JavaScript") : WebInspector.TimelineUIUtils.eventTitle(node.event);
+            return {
+                name: name,
+                color: node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
+                    WebInspector.TimelineUIUtils.eventStyle(node.event).category.color : color
+            };
 
         case WebInspector.TimelineAggregator.GroupBy.URL:
             break;
 
         default:
             console.assert(false, "Unexpected aggregation type");
         }
         return {
             name: node.id || WebInspector.UIString("unattributed"),
-            color: node.id ? WebInspector.TimelineUIUtils.eventColor(node.event) : categories["other"].color
-        }
+            color: color
+        };
     },
 
     /**
      * @override
      * @param {!Element} parent
      */
     _populateToolbar: function(parent)
     {
         var panelToolbar = new WebInspector.Toolbar("", parent);
         this._groupByCombobox = new WebInspector.ToolbarComboBox(this._onGroupByChanged.bind(this));
         /**
          * @param {string} name
          * @param {string} id
          * @this {WebInspector.TimelineTreeView}
          */
         function addGroupingOption(name, id)
         {
             var option = this._groupByCombobox.createOption(name, "", id);
             this._groupByCombobox.addOption(option);
             if (id === this._groupBySetting.get())
                 this._groupByCombobox.select(option);
         }
         addGroupingOption.call(this, WebInspector.UIString("No Grouping"), WebInspector.TimelineAggregator.GroupBy.None);
+        addGroupingOption.call(this, WebInspector.UIString("Group by Activity"), WebInspector.TimelineAggregator.GroupBy.EventName);
         addGroupingOption.call(this, WebInspector.UIString("Group by Category"), WebInspector.TimelineAggregator.GroupBy.Category);
         addGroupingOption.call(this, WebInspector.UIString("Group by Domain"), WebInspector.TimelineAggregator.GroupBy.Domain);
         addGroupingOption.call(this, WebInspector.UIString("Group by Subdomain"), WebInspector.TimelineAggregator.GroupBy.Subdomain);
         addGroupingOption.call(this, WebInspector.UIString("Group by URL"), WebInspector.TimelineAggregator.GroupBy.URL);
         panelToolbar.appendToolbarItem(this._groupByCombobox);
     },
 
     /**
      * @param {!WebInspector.TimelineProfileTree.Node} treeNode
      * @return {!Array<!WebInspector.TimelineProfileTree.Node>}
@@ skipping 65 matching lines @@
 }
 
 WebInspector.CallTreeTimelineTreeView.prototype = {
     /**
      * @override
      * @return {!WebInspector.TimelineProfileTree.Node}
      */
     _buildTree: function()
     {
         var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
-        var aggregator = new WebInspector.TimelineAggregator(event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+        var aggregator = new WebInspector.TimelineAggregator(event => WebInspector.TimelineUIUtils.eventStyle(event));
         return aggregator.performGrouping(topDown, this._groupBySetting.get());
     },
 
     __proto__: WebInspector.AggregatedTimelineTreeView.prototype,
 };
 
 /**
  * @constructor
  * @extends {WebInspector.AggregatedTimelineTreeView}
  * @param {!WebInspector.TimelineModel} model
  * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
  */
 WebInspector.BottomUpTimelineTreeView = function(model, filters)
 {
     WebInspector.AggregatedTimelineTreeView.call(this, model, filters);
     this._dataGrid.markColumnAsSortedBy("self", WebInspector.DataGrid.Order.Descending);
 }
 
 WebInspector.BottomUpTimelineTreeView.prototype = {
     /**
      * @override
      * @return {!WebInspector.TimelineProfileTree.Node}
      */
     _buildTree: function()
     {
         var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
-        var aggregator = new WebInspector.TimelineAggregator(event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+        var aggregator = new WebInspector.TimelineAggregator(event => WebInspector.TimelineUIUtils.eventStyle(event));
         return WebInspector.TimelineProfileTree.buildBottomUp(topDown, aggregator.groupFunction(this._groupBySetting.get()));
     },
 
     __proto__: WebInspector.AggregatedTimelineTreeView.prototype
 };
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineTreeView}
  * @param {!WebInspector.TimelineModel} model
@@ skipping 191 matching lines @@
         return selectedNode && /** @type {!WebInspector.TimelineTreeView.GridNode} */ (selectedNode)._profileNode;
     },
 
     _onSelectionChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.TimelineStackView.Events.SelectionChanged);
     },
 
     __proto__: WebInspector.VBox.prototype
 }