DevTools: Render third-party badges in timeline tree view

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 495 matching lines @@
     if (columnId === 'activity')
       return this._createNameCell(columnId);
     return this._createValueCell(columnId) || super.createCell(columnId);
   }
 
   /**
    * @param {string} columnId
    * @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)
+        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);
     }
     return cell;
   }
 
   /**
    * @param {string} columnId
    * @return {?Element}
@@ skipping 85 matching lines @@
    */
   constructor(filters) {
     super();
     this._groupBySetting =
         Common.settings.createSetting('timelineTreeGroupBy', Timeline.AggregatedTimelineTreeView.GroupBy.None);
     this._groupBySetting.addChangeListener(this.refreshTree.bind(this));
     this.init(filters);
     this._stackView = new Timeline.TimelineStackView(this);
     this._stackView.addEventListener(
         Timeline.TimelineStackView.Events.SelectionChanged, this._onStackViewSelectionChanged, this);
+    this._badgePool = new ProductRegistry.BadgePool();

[pfeldman, 2017/05/23 19:19:27]

You should reset it once it is no longer needed.

[alph, 2017/05/24 00:53:44]

Done.

     /** @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();
     });
   }
 
   /**
    * @override
    * @param {!Timeline.TimelineSelection} selection
    */
   updateContents(selection) {
     this._updateExtensionResolver();
     super.updateContents(selection);
     var rootNode = this._dataGrid.rootNode();
     if (rootNode.children.length)
       rootNode.children[0].revealAndSelect();
   }
 
   _updateExtensionResolver() {
     this._executionContextNamesByOrigin = new Map();
     for (var runtimeModel of SDK.targetManager.models(SDK.RuntimeModel)) {
       for (var context of runtimeModel.executionContexts())
         this._executionContextNamesByOrigin.set(context.origin, context.name);
     }
   }
 
   /**
+   * @param {string} name
+   * @return {string}
+   * @this {Timeline.AggregatedTimelineTreeView}
+   */
+  _beautifyDomainName(name) {
+    if (Timeline.AggregatedTimelineTreeView._isExtensionInternalURL(name))
+      name = Common.UIString('[Chrome extensions overhead]');
+    else if (Timeline.AggregatedTimelineTreeView._isV8NativeURL(name))
+      name = Common.UIString('[V8 Runtime]');
+    else if (name.startsWith('chrome-extension'))
+      name = this._executionContextNamesByOrigin.get(name) || name;
+    return name;
+  }
+
+  /**
    * @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();
     var color = node.id ? Timeline.TimelineUIUtils.eventColor(/** @type {!SDK.TracingModel.Event} */ (node.event)) :
                           categories['other'].color;
     var unattributed = Common.UIString('[unattributed]');
-    /**
-     * @param {string} name
-     * @return {string}
-     * @this {Timeline.AggregatedTimelineTreeView}
-     */
-    function beautifyDomainName(name) {
-      if (Timeline.AggregatedTimelineTreeView._isExtensionInternalURL(name))
-        name = Common.UIString('[Chrome extensions overhead]');
-      else if (Timeline.AggregatedTimelineTreeView._isV8NativeURL(name))
-        name = Common.UIString('[V8 Runtime]');
-      else if (name.startsWith('chrome-extension'))
-        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:
-        var domainName = beautifyDomainName.call(this, node.id);
+        var domainName = this._beautifyDomainName(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 ? 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 info = this._productAndBadgeByEvent(event);
+        var name = info && info.name || unattributed;
+        color = Timeline.TimelineUIUtils.eventColorByProduct(
+            this._productRegistry, this._model.timelineModel(), this._colorByURLCache, event);
+        return {name: name, color: color, icon: info && info.badge || undefined};
 
       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:
@@ skipping 80 matching lines @@
         return null;
       case GroupBy.EventName:
         return event => Timeline.TimelineUIUtils.eventStyle(event).title;
       case GroupBy.Category:
         return event => Timeline.TimelineUIUtils.eventStyle(event).category.name;
       case GroupBy.Subdomain:
         return this._domainByEvent.bind(this, false);
       case GroupBy.Domain:
         return this._domainByEvent.bind(this, true);
       case GroupBy.Product:
-        return event => this._productByEvent(event) || this._domainByEvent(true, event);
+        return event => this._productByEvent(event) || this._domainByEvent(true, event) || '';
       case GroupBy.URL:
         return event => TimelineModel.TimelineProfileTree.eventURL(event) || '';
       case GroupBy.Frame:
         return event => TimelineModel.TimelineData.forEvent(event).frameId;
       default:
         console.assert(false, `Unexpected aggregation setting: ${groupBy}`);
         return null;
     }
   }
 
   /**
    * @param {boolean} groupSubdomains
    * @param {!SDK.TracingModel.Event} event
    * @return {string}
    */
   _domainByEvent(groupSubdomains, event) {
-    var url = TimelineModel.TimelineProfileTree.eventURL(event) || '';
+    var url = TimelineModel.TimelineProfileTree.eventURL(event);
+    if (!url)
+      return '';
     if (Timeline.AggregatedTimelineTreeView._isExtensionInternalURL(url))
       return Timeline.AggregatedTimelineTreeView._extensionInternalPrefix;
     if (Timeline.AggregatedTimelineTreeView._isV8NativeURL(url))
       return Timeline.AggregatedTimelineTreeView._v8NativePrefix;
     var parsedURL = url.asParsedURL();
     if (!parsedURL)
       return '';
     if (parsedURL.scheme === 'chrome-extension')
       return parsedURL.scheme + '://' + parsedURL.host;
     if (!groupSubdomains)
@@ skipping 16 matching lines @@
       return this._productByURLCache.get(url);
     if (!this._productRegistry)
       return '';
     var parsedURL = url.asParsedURL();
     var name = parsedURL && this._productRegistry.nameForUrl(parsedURL) || '';
     this._productByURLCache.set(url, name);
     return name;
   }
 
   /**
+   * @param {!SDK.TracingModel.Event} event
+   * @return {?{name: string, badge: ?Element}}
+   */
+  _productAndBadgeByEvent(event) {
+    var url = TimelineModel.TimelineProfileTree.eventURL(event);
+    if (!url || !this._productRegistry)
+      return null;
+    var parsedURL = url.asParsedURL();
+    var name = parsedURL && this._productRegistry.nameForUrl(parsedURL) || this._domainByEvent(true, event) || '';
+    var icon = parsedURL && this._badgePool.badgeForURL(parsedURL, false, true);
+    return name ? {name: this._beautifyDomainName(name), badge: icon} : null;

[pfeldman, 2017/05/23 19:19:28]

Why do you need name?

[alph, 2017/05/24 00:53:44]

We show the name in the tree next to the badge or swatch if no badge

+  }
+
+  /**
    * @override
    * @param {!UI.ContextMenu} contextMenu
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    */
   _appendContextMenuItems(contextMenu, node) {
     if (this._groupBySetting.get() !== Timeline.AggregatedTimelineTreeView.GroupBy.Frame)
       return;
     if (!node.isGroupNode())
       return;
     var frame = this._model.timelineModel().pageFrameById(node.id);
@@ skipping 128 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };