DevTools: Use badges to render products in timeline details.

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

 // Copyright 2017 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
  */
 Timeline.EventsTimelineTreeView = class extends Timeline.TimelineTreeView {
   /**
    * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
    * @param {!Timeline.TimelineModeViewDelegate} delegate
    */
   constructor(filters, delegate) {
     super();
     this._filtersControl = new Timeline.EventsTimelineTreeView.Filters();
     this._filtersControl.addEventListener(
         Timeline.EventsTimelineTreeView.Filters.Events.FilterChanged, this._onFilterChanged, this);
     this.init(filters);
     this._delegate = delegate;
+    this._badgePool = new ProductRegistry.BadgePool();
     this._filters.push.apply(this._filters, this._filtersControl.filters());
     this._dataGrid.markColumnAsSortedBy('startTime', DataGrid.DataGrid.Order.Ascending);
     this._splitWidget.showBoth();
   }
 
   /**
    * @override
    * @param {!Timeline.TimelineSelection} selection
    */
   updateContents(selection) {
+    this._badgePool.reset();
     super.updateContents(selection);
     if (selection.type() === Timeline.TimelineSelection.Type.TraceEvent) {
       var event = /** @type {!SDK.TracingModel.Event} */ (selection.object());
       this._selectEvent(event, true);
     }
   }
 
   /**
    * @override
    * @return {!TimelineModel.TimelineProfileTree.Node}
@@ skipping 66 matching lines @@
 
   /**
    * @override
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    * @return {boolean}
    */
   _showDetailsForNode(node) {
     var traceEvent = node.event;
     if (!traceEvent)
       return false;
-    Timeline.TimelineUIUtils.buildTraceEventDetails(traceEvent, this.model().timelineModel(), this._linkifier, false)
-      .then(fragment => this._detailsView.element.appendChild(fragment));
+    Timeline.TimelineUIUtils
+        .buildTraceEventDetails(traceEvent, this.model().timelineModel(), this._linkifier, this._badgePool, false)
+        .then(fragment => this._detailsView.element.appendChild(fragment));
     return true;
   }
 
   /**
    * @override
    * @param {?TimelineModel.TimelineProfileTree.Node} node
    */
   _onHover(node) {
     this._delegate.highlightEvent(node && node.event);
   }
@@ skipping 70 matching lines @@
     this.dispatchEventToListeners(Timeline.EventsTimelineTreeView.Filters.Events.FilterChanged);
   }
 };
 
 Timeline.EventsTimelineTreeView.Filters._durationFilterPresetsMs = [0, 1, 15];
 
 /** @enum {symbol} */
 Timeline.EventsTimelineTreeView.Filters.Events = {
   FilterChanged: Symbol('FilterChanged')
 };