DevTools: Support grouping by Product in performance tree views.

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.
 
 /**
  * @unrestricted
  * @implements {UI.Searchable}
  */
 Timeline.TimelineTreeView = class extends UI.VBox {
   constructor() {
@@ skipping 613 matching lines @@
  * @unrestricted
  */
 Timeline.AggregatedTimelineTreeView = class extends Timeline.TimelineTreeView {
   /**
    * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
    */
   constructor(filters) {
     super();
     this._groupBySetting =
         Common.settings.createSetting('timelineTreeGroupBy', Timeline.AggregatedTimelineTreeView.GroupBy.None);
-    this._groupByCombobox = new UI.ToolbarComboBox(this._onGroupByChanged.bind(this));
+    this._groupBySetting.addChangeListener(this.refreshTree.bind(this));
     this.init(filters);
     this._stackView = new Timeline.TimelineStackView(this);
     this._stackView.addEventListener(
         Timeline.TimelineStackView.Events.SelectionChanged, this._onStackViewSelectionChanged, this);
+    if (!Runtime.experiments.isEnabled('timelineColorByProduct'))
+      return;
+    /** @type {!Map<string, string>} */
+    this._productByURLCache = new Map();
+    ProductRegistry.instance().then(registry => {
+      this._productRegistry = registry;
+      this.refreshTree();
+    });
   }
 
   /**
-   * @override
-   */
-  wasShown() {
-    var groupById = this._groupBySetting.get();
-    var option = this._groupByCombobox.options().find(option => option.value === groupById);
-    if (option)
-      this._groupByCombobox.select(option);
-  }
-
-  /**
    * @override
    * @param {!Timeline.TimelineSelection} selection
    */
   updateContents(selection) {
     this._updateExtensionResolver();
     super.updateContents(selection);
     var rootNode = this._dataGrid.rootNode();
     if (rootNode.children.length)
       rootNode.children[0].revealAndSelect();
   }
@@ skipping 35 matching lines @@
         var name = node.event.name === TimelineModel.TimelineModel.RecordType.JSFrame ?
             Common.UIString('JavaScript') :
             Timeline.TimelineUIUtils.eventTitle(node.event);
         return {
           name: name,
           color: node.event.name === TimelineModel.TimelineModel.RecordType.JSFrame ?
               Timeline.TimelineUIUtils.eventStyle(node.event).category.color :
               color
         };
 
+      case Timeline.AggregatedTimelineTreeView.GroupBy.Product:
+        var name = node.event ? this._productByEvent(node.event) : '';
+        return {name: name || Common.UIString('unattributed'), color: Timeline.TimelineUIUtils.colorForId(name)};
+
       case Timeline.AggregatedTimelineTreeView.GroupBy.URL:
         break;
+
       case Timeline.AggregatedTimelineTreeView.GroupBy.Frame:
         var frame = this._model.timelineModel().pageFrameById(node.id);
         var frameName = frame ? Timeline.TimelineUIUtils.displayNameForFrame(frame, 80) : Common.UIString('Page');
         return {name: frameName, color: color};
 
       default:
         console.assert(false, 'Unexpected aggregation type');
     }
     return {name: node.id || Common.UIString('unattributed'), color: color};
   }
 
   /**
    * @override
    * @param {!UI.Toolbar} toolbar
    */
   populateToolbar(toolbar) {
     super.populateToolbar(toolbar);
-    /**
-     * @param {string} name
-     * @param {string} id
-     * @this {Timeline.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);
-    }
-    const groupBy = Timeline.AggregatedTimelineTreeView.GroupBy;
-    addGroupingOption.call(this, Common.UIString('No Grouping'), groupBy.None);
-    addGroupingOption.call(this, Common.UIString('Group by Activity'), groupBy.EventName);
-    addGroupingOption.call(this, Common.UIString('Group by Category'), groupBy.Category);
-    addGroupingOption.call(this, Common.UIString('Group by Domain'), groupBy.Domain);
-    addGroupingOption.call(this, Common.UIString('Group by Subdomain'), groupBy.Subdomain);
-    addGroupingOption.call(this, Common.UIString('Group by URL'), groupBy.URL);
-    addGroupingOption.call(this, Common.UIString('Group by Frame'), groupBy.Frame);
-    toolbar.appendToolbarItem(this._groupByCombobox);
+    var groupBy = Timeline.AggregatedTimelineTreeView.GroupBy;
+    var options = [
+      {label: Common.UIString('No Grouping'), value: groupBy.None},
+      {label: Common.UIString('Group by Activity'), value: groupBy.EventName},
+      {label: Common.UIString('Group by Category'), value: groupBy.Category},
+      {label: Common.UIString('Group by Domain'), value: groupBy.Domain},
+      {label: Common.UIString('Group by Subdomain'), value: groupBy.Subdomain},
+      {label: Common.UIString('Group by Product'), value: groupBy.Product},
+      {label: Common.UIString('Group by URL'), value: groupBy.URL},
+      {label: Common.UIString('Group by Frame'), value: groupBy.Frame},
+    ];
+    if (!Runtime.experiments.isEnabled('timelineColorByProduct'))
+      options = options.filter(option => option.value !== groupBy.Product);
+    toolbar.appendToolbarItem(new UI.ToolbarSettingComboBox(options, this._groupBySetting));
     toolbar.appendSpacer();
     toolbar.appendToolbarItem(this._splitWidget.createShowHideSidebarButton(Common.UIString('heaviest stack')));
   }
 
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} treeNode
    * @return {!Array<!TimelineModel.TimelineProfileTree.Node>}
    */
   _buildHeaviestStack(treeNode) {
     console.assert(!!treeNode.parent, 'Attempt to build stack for tree root');
@@ skipping 11 matching lines @@
   }
 
   /**
    * @override
    * @return {boolean}
    */
   _exposePercentages() {
     return true;
   }
 
-  _onGroupByChanged() {
-    this._groupBySetting.set(this._groupByCombobox.selectedOption().value);
-    this.refreshTree();
-  }
-
   _onStackViewSelectionChanged() {
     var treeNode = this._stackView.selectedTreeNode();
     if (treeNode)
       this.selectProfileNode(treeNode, true);
   }
 
   /**
    * @override
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    * @return {boolean}
@@ skipping 46 matching lines @@
       case Timeline.AggregatedTimelineTreeView.GroupBy.None:
         return null;
       case Timeline.AggregatedTimelineTreeView.GroupBy.EventName:
         return event => Timeline.TimelineUIUtils.eventStyle(event).title;
       case Timeline.AggregatedTimelineTreeView.GroupBy.Category:
         return event => Timeline.TimelineUIUtils.eventStyle(event).category.name;
       case Timeline.AggregatedTimelineTreeView.GroupBy.Subdomain:
         return groupByDomain.bind(null, false);
       case Timeline.AggregatedTimelineTreeView.GroupBy.Domain:
         return groupByDomain.bind(null, true);
+      case Timeline.AggregatedTimelineTreeView.GroupBy.Product:
+        return this._productByEvent.bind(this);
       case Timeline.AggregatedTimelineTreeView.GroupBy.URL:
         return groupByURL;
       case Timeline.AggregatedTimelineTreeView.GroupBy.Frame:
         return event => TimelineModel.TimelineData.forEvent(event).frameId;
       default:
         console.assert(false, `Unexpected aggregation setting: ${groupBy}`);
         return null;
     }
   }
 
   /**
+   * @param {!SDK.TracingModel.Event} event
+   * @return {string}
+   */
+  _productByEvent(event) {
+    if (!this._productRegistry)
+      return '';
+    var url = TimelineModel.TimelineProfileTree.eventURL(event) || '';
+    var name = this._productByURLCache.get(url);
+    if (name)
+      return name;
+    var parsedURL = url.asParsedURL();
+    name = parsedURL && this._productRegistry.nameForUrl(parsedURL) || '';
+    this._productByURLCache.set(url, name);
+    return name;
+  }
+
+  /**
    * @override
    * @param {!UI.ContextMenu} contextMenu
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    */
   _appendContextMenuItems(contextMenu, node) {
     if (this._groupBySetting.get() !== Timeline.AggregatedTimelineTreeView.GroupBy.Frame)
       return;
     if (!node.isGroupNode())
       return;
     var frame = this._model.timelineModel().pageFrameById(node.id);
@@ skipping 24 matching lines @@
 
 /**
  * @enum {string}
  */
 Timeline.AggregatedTimelineTreeView.GroupBy = {
   None: 'None',
   EventName: 'EventName',
   Category: 'Category',
   Domain: 'Domain',
   Subdomain: 'Subdomain',
+  Product: 'Product',
   URL: 'URL',
   Frame: 'Frame'
 };
 
 /**
  * @unrestricted
  */
 Timeline.CallTreeTimelineTreeView = class extends Timeline.AggregatedTimelineTreeView {
   /**
    * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
@@ skipping 83 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };