DevTools: Show product name when available in group by [sub]domain mode.

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 676 matching lines @@
         name = this._executionContextNamesByOrigin.get(name) || name;
       return name;
     }
     switch (this._groupBySetting.get()) {
       case Timeline.AggregatedTimelineTreeView.GroupBy.Category:
         var category = categories[node.id] || categories['other'];
         return {name: category.title, color: category.color};
 
       case Timeline.AggregatedTimelineTreeView.GroupBy.Domain:
       case Timeline.AggregatedTimelineTreeView.GroupBy.Subdomain:
-        return {name: beautifyDomainName.call(this, node.id) || unattributed, color: color};
+        var domainName = beautifyDomainName.call(this, node.id);
+        if (domainName) {
+          var productName = this._productByEvent(/** @type {!SDK.TracingModel.Event} */ (node.event));
+          if (productName)
+            domainName += ' \u2014 ' + productName;
+        }
+        return {name: domainName || unattributed, color: color};
 
       case Timeline.AggregatedTimelineTreeView.GroupBy.EventName:
         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 productName = this._productByEvent(/** @type {!SDK.TracingModel.Event} */ (node.event));
         color = productName ? Timeline.TimelineUIUtils.colorForId(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 aggregation type');
+        console.assert(false, 'Unexpected grouping type');
     }
     return {name: node.id || unattributed, color: color};
   }
 
   /**
    * @override
    * @param {!UI.Toolbar} toolbar
    */
   populateToolbar(toolbar) {
     super.populateToolbar(toolbar);
@@ skipping 271 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };