DevTools: Use badges to render products in timeline details.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineDetailsView.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.TimelineDetailsView = class extends UI.VBox {
   /**
    * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
    * @param {!Timeline.TimelineModeViewDelegate} delegate
    */
   constructor(filters, delegate) {
     super();
     this.element.classList.add('timeline-details');
 
     this._detailsLinkifier = new Components.Linkifier();
+    this._badgePool = new ProductRegistry.BadgePool();
 
     this._tabbedPane = new UI.TabbedPane();
     this._tabbedPane.show(this.element);
 
     const tabIds = Timeline.TimelineDetailsView.Tab;
 
     this._defaultDetailsWidget = new UI.VBox();
     this._defaultDetailsWidget.element.classList.add('timeline-details-view');
     this._defaultDetailsContentElement =
         this._defaultDetailsWidget.element.createChild('div', 'timeline-details-view-body vbox');
@@ skipping 77 matching lines @@
    */
   setPreferredTab(tabId) {
     this._preferredTabId = tabId;
   }
 
   /**
    * @param {!Timeline.TimelineSelection} selection
    */
   setSelection(selection) {
     this._detailsLinkifier.reset();
+    this._badgePool.reset();
     this._selection = selection;
     switch (this._selection.type()) {
       case Timeline.TimelineSelection.Type.TraceEvent:
         var event = /** @type {!SDK.TracingModel.Event} */ (this._selection.object());
-        Timeline.TimelineUIUtils.buildTraceEventDetails(
-            event, this._model.timelineModel(), this._detailsLinkifier, true)
-                .then(fragment => this._appendDetailsTabsForTraceEventAndShowDetails(event, fragment));
+        Timeline.TimelineUIUtils
+            .buildTraceEventDetails(event, this._model.timelineModel(), this._detailsLinkifier, this._badgePool, true)
+            .then(fragment => this._appendDetailsTabsForTraceEventAndShowDetails(event, fragment));
         break;
       case Timeline.TimelineSelection.Type.Frame:
         var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection.object());
         var filmStripFrame = this._model.filmStripModelFrame(frame);
         this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame(frame, filmStripFrame));
         if (frame.layerTree) {
           var layersView = this._layersView();
           layersView.showLayerTree(frame.layerTree);
           if (!this._tabbedPane.hasTab(Timeline.TimelineDetailsView.Tab.LayerViewer))
             this._appendTab(Timeline.TimelineDetailsView.Tab.LayerViewer, Common.UIString('Layers'), layersView);
         }
         break;
       case Timeline.TimelineSelection.Type.NetworkRequest:
         var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._selection.object());
         Timeline.TimelineUIUtils
-            .buildNetworkRequestDetails(request, this._model.timelineModel(), this._detailsLinkifier)
+            .buildNetworkRequestDetails(request, this._model.timelineModel(), this._detailsLinkifier, this._badgePool)
             .then(this._setContent.bind(this));
         break;
       case Timeline.TimelineSelection.Type.Range:
         this._updateSelectedRangeStats(this._selection.startTime(), this._selection.endTime());
         break;
     }
 
     this._updateContents();
   }
 
@@ skipping 83 matching lines @@
  * @enum {string}
  */
 Timeline.TimelineDetailsView.Tab = {
   Details: 'Details',
   EventLog: 'EventLog',
   CallTree: 'CallTree',
   BottomUp: 'BottomUp',
   PaintProfiler: 'PaintProfiler',
   LayerViewer: 'LayerViewer'
 };