DevTools: Make flamechart coloring depend on group by selector.

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 699 matching lines @@
             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 productName = this._productByEvent(/** @type {!SDK.TracingModel.Event} */ (node.event));
-        color = productName ? Timeline.TimelineUIUtils.colorForId(productName) : '#eee';
+        color = productName ? ProductRegistry.BadgePool.colorForEntryName(productName) : '#eee';
         var name = productName || this._domainByEvent(true, /** @type {!SDK.TracingModel.Event} */ (node.event)) || '';
         return {name: beautifyDomainName.call(this, name) || unattributed, color: color};
 
       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 grouping type');
     }
     return {name: node.id || unattributed, color: color};
   }
 
   /**
    * @override
    * @param {!UI.Toolbar} toolbar
    */
   populateToolbar(toolbar) {
     super.populateToolbar(toolbar);
     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 Frame'), value: groupBy.Frame},
+      {label: Common.UIString('Group by Product'), value: groupBy.Product},
       {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
@@ skipping 253 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };