DevTools: Use badges to render products in timeline details.

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 680 matching lines @@
     function linkifyTopCallFrame() {
       var frame = TimelineModel.TimelineData.forEvent(event).topFrame();
       return frame ? linkifier.maybeLinkifyConsoleCallFrame(target, frame, 'timeline-details') : null;
     }
   }
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @param {!TimelineModel.TimelineModel} model
    * @param {!Components.Linkifier} linkifier
+   * @param {!ProductRegistry.BadgePool} badgePool
    * @param {boolean} detailed
    * @return {!Promise<!DocumentFragment>}
    */
-  static async buildTraceEventDetails(event, model, linkifier, detailed) {
+  static async buildTraceEventDetails(event, model, linkifier, badgePool, detailed) {
     var maybeTarget = model.targetByEvent(event);
     /** @type {?Map<number, ?SDK.DOMNode>} */
     var relatedNodesMap = null;
     if (maybeTarget) {
       var target = /** @type {!SDK.Target} */ (maybeTarget);
       if (typeof event[Timeline.TimelineUIUtils._previewElementSymbol] === 'undefined') {
         var previewElement = null;
         var url = TimelineModel.TimelineData.forEvent(event).url;
         if (url)
           previewElement = await Components.DOMPresentationUtils.buildImagePreviewContents(target, url, false);
@@ skipping 187 matching lines @@
         break;
 
       default:
         var detailsNode =
             Timeline.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.targetByEvent(event), linkifier);
         if (detailsNode)
           contentHelper.appendElementRow(Common.UIString('Details'), detailsNode);
         break;
     }
 
-    await Timeline.TimelineUIUtils._maybeAppendProductToDetails(contentHelper, url || eventData && eventData['url']);
+    Timeline.TimelineUIUtils._maybeAppendProductToDetails(
+        contentHelper, badgePool, url || eventData && eventData['url']);
 
     if (timelineData.timeWaitingForMainThread) {
       contentHelper.appendTextRow(
           Common.UIString('Time Waiting for Main Thread'),
           Number.millisToString(timelineData.timeWaitingForMainThread, true));
     }
 
     var relatedNode = relatedNodesMap && relatedNodesMap.get(timelineData.backendNodeId);
     if (relatedNode) {
       contentHelper.appendElementRow(
@@ skipping 17 matching lines @@
       var pieChart = Timeline.TimelineUIUtils.generatePieChart(
           stats, Timeline.TimelineUIUtils.eventStyle(event).category, event.selfTime);
       contentHelper.appendElementRow('', pieChart);
     }
 
     return contentHelper.fragment;
   }
 
   /**
    * @param {!Timeline.TimelineDetailsContentHelper} contentHelper
+   * @param {!ProductRegistry.BadgePool} badgePool
    * @param {?string} url
-   * @return {!Promise}
    */
-  static async _maybeAppendProductToDetails(contentHelper, url) {
-    var parsedURL = url && url.asParsedURL();
-    if (!parsedURL)
-      return;
-    var registry = await ProductRegistry.instance();
-    var name = registry.nameForUrl(parsedURL);
-    if (name)
-      contentHelper.appendTextRow(Common.UIString('Product'), name);
+  static _maybeAppendProductToDetails(contentHelper, badgePool, url) {
+    var parsedURL = url ? url.asParsedURL() : null;
+    if (parsedURL)
+      contentHelper.appendElementRow('', badgePool.badgeForURL(parsedURL, true));
   }
 
   /**
    * @param {!TimelineModel.TimelineModel} model
    * @param {number} startTime
    * @param {number} endTime
    * @return {!DocumentFragment}
    */
   static buildRangeStats(model, startTime, endTime) {
     var aggregatedStats = Timeline.TimelineUIUtils.statsForTimeRange(model, startTime, endTime);
@@ skipping 119 matching lines @@
       aggregatedStats[category] = (aggregatedStats[category] || 0) + ownTimes.pop();
       if (!ownTimes.length)
         e[Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol] = Object.assign({}, aggregatedStats);
     }
   }
 
   /**
    * @param {!TimelineModel.TimelineModel.NetworkRequest} request
    * @param {!TimelineModel.TimelineModel} model
    * @param {!Components.Linkifier} linkifier
+   * @param {!ProductRegistry.BadgePool} badgePool
    * @return {!Promise<!DocumentFragment>}
    */
-  static async buildNetworkRequestDetails(request, model, linkifier) {
+  static async buildNetworkRequestDetails(request, model, linkifier, badgePool) {
     const target = model.targetByEvent(request.children[0]);
     const contentHelper = new Timeline.TimelineDetailsContentHelper(target, linkifier);
     const category = Timeline.TimelineUIUtils.networkRequestCategory(request);
     const color = Timeline.TimelineUIUtils.networkCategoryColor(category);
     contentHelper.addSection(Common.UIString('Network request'), color);
 
     const duration = request.endTime - (request.startTime || -Infinity);
     if (request.url)
       contentHelper.appendElementRow(Common.UIString('URL'), Components.Linkifier.linkifyURL(request.url));
-    await Timeline.TimelineUIUtils._maybeAppendProductToDetails(contentHelper, request.url);
+    Timeline.TimelineUIUtils._maybeAppendProductToDetails(contentHelper, badgePool, request.url);
     if (isFinite(duration))
       contentHelper.appendTextRow(Common.UIString('Duration'), Number.millisToString(duration, true));
     if (request.requestMethod)
       contentHelper.appendTextRow(Common.UIString('Request Method'), request.requestMethod);
     if (typeof request.priority === 'string') {
       const priority =
           NetworkConditions.uiLabelForPriority(/** @type {!Protocol.Network.ResourcePriority} */ (request.priority));
       contentHelper.appendTextRow(Common.UIString('Priority'), priority);
     }
     if (request.mimeType)
@@ skipping 1162 matching lines @@
    * @param {string=} warningType
    */
   appendWarningRow(event, warningType) {
     var warning = Timeline.TimelineUIUtils.eventWarning(event, warningType);
     if (warning)
       this.appendElementRow(Common.UIString('Warning'), warning, true);
   }
 };
 
 Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache');