DevTools: Render third-party badges in timeline tree view

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js
index 3e673ba711589210e6af3928482be6f6d81185da..8441756f91f823b1db49a36676da551d1b102da8 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineTreeView.js
@@ -513,24 +513,29 @@ Timeline.TimelineTreeView.GridNode = class extends DataGrid.SortableDataGridNode
    * @return {!Element}
    */
   _createNameCell(columnId) {
-    const cell = this.createTD(columnId);
-    const container = cell.createChild('div', 'name-container');
-    const icon = container.createChild('div', 'activity-icon');
-    const name = container.createChild('div', 'activity-name');
-    const event = this._profileNode.event;
+    var cell = this.createTD(columnId);
+    var container = cell.createChild('div', 'name-container');
+    var iconContainer = container.createChild('div', 'activity-icon-container');
+    var icon = iconContainer.createChild('div', 'activity-icon');
+    var name = container.createChild('div', 'activity-name');
+    var event = this._profileNode.event;
     if (this._profileNode.isGroupNode()) {
-      const treeView = /** @type {!Timeline.AggregatedTimelineTreeView} */ (this._treeView);
-      const info = treeView._displayInfoForGroupNode(this._profileNode);
+      var treeView = /** @type {!Timeline.AggregatedTimelineTreeView} */ (this._treeView);
+      var info = treeView._displayInfoForGroupNode(this._profileNode);
       name.textContent = info.name;
       icon.style.backgroundColor = info.color;
+      if (info.icon) {
+        info.icon.classList.add('activity-badge');
+        iconContainer.insertBefore(info.icon, icon);
+      }
     } else if (event) {
-      const data = event.args['data'];
-      const deoptReason = data && data['deoptReason'];
+      var data = event.args['data'];
+      var deoptReason = data && data['deoptReason'];
       if (deoptReason)
         container.createChild('div', 'activity-warning').title = Common.UIString('Not optimized: %s', deoptReason);
 
       name.textContent = Timeline.TimelineUIUtils.eventTitle(event);
-      const link = this._treeView._linkifyLocation(event);
+      var link = this._treeView._linkifyLocation(event);
       if (link)
         container.createChild('div', 'activity-link').appendChild(link);
       icon.style.backgroundColor = Timeline.TimelineUIUtils.eventColor(event);
@@ -636,8 +641,11 @@ Timeline.AggregatedTimelineTreeView = class extends Timeline.TimelineTreeView {
     this._stackView = new Timeline.TimelineStackView(this);
     this._stackView.addEventListener(
         Timeline.TimelineStackView.Events.SelectionChanged, this._onStackViewSelectionChanged, this);
+    this._badgePool = new ProductRegistry.BadgePool();
     /** @type {!Map<string, string>} */
     this._productByURLCache = new Map();
+    /** @type {!Map<string, string>} */
+    this._colorByURLCache = new Map();
     ProductRegistry.instance().then(registry => {
       this._productRegistry = registry;
       this.refreshTree();
@@ -666,7 +674,7 @@ Timeline.AggregatedTimelineTreeView = class extends Timeline.TimelineTreeView {
 
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} node
-   * @return {!{name: string, color: string}}
+   * @return {!{name: string, color: string, icon: (!Element|undefined)}}
    */
   _displayInfoForGroupNode(node) {
     var categories = Timeline.TimelineUIUtils.categories();
@@ -714,10 +722,15 @@ Timeline.AggregatedTimelineTreeView = class extends Timeline.TimelineTreeView {
         };
 
       case Timeline.AggregatedTimelineTreeView.GroupBy.Product:
-        var productName = this._productByEvent(/** @type {!SDK.TracingModel.Event} */ (node.event));
-        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};
+        var event = /** @type {!SDK.TracingModel.Event} */ (node.event);
+        var productName = this._productByEvent(event);
+        color = Timeline.TimelineUIUtils.eventColorByProduct(
+            this._productRegistry, this._model.timelineModel(), this._colorByURLCache, event);
+        var url = TimelineModel.TimelineProfileTree.eventURL(event);
+        var parsedURL = url ? url.asParsedURL() : null;
+        var icon = parsedURL ? this._badgePool.badgeForURL(parsedURL, false, true) : undefined;

[caseq, 2017/05/22 18:43:49]

Can we encapsulate this logic into productByEvent() to assure the URL we're
using for the product resolution is exactly the same as the one for the badge?

[alph, 2017/05/22 22:53:26]

Done.

+        var name = productName || this._domainByEvent(true, event) || '';
+        return {name: beautifyDomainName.call(this, name) || unattributed, color: color, icon: icon};
 
       case Timeline.AggregatedTimelineTreeView.GroupBy.URL:
         break;