DevTools: Render third-party badges in timeline tree view

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
index c6c6950941aab79bf9ba8352922aec4119f1f52c..47a5fded8d00604fa8e565aa917132d8383c3c0b 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
@@ -85,47 +85,30 @@ Timeline.TimelineFlameChartView = class extends UI.VBox {
       return;
     this._groupBySetting =
         Common.settings.createSetting('timelineTreeGroupBy', Timeline.AggregatedTimelineTreeView.GroupBy.None);
-    this._groupBySetting.addChangeListener(this._onGroupByChanged, this);
-    this._onGroupByChanged();
+    this._groupBySetting.addChangeListener(this._updateColorMapper, this);
+    this._updateColorMapper();
     ProductRegistry.instance().then(registry => this._productRegistry = registry);
   }
 
-  _onGroupByChanged() {
+  _updateColorMapper() {
     /** @type {!Map<string, string>} */
     this._urlToColorCache = new Map();
+    if (!this._model)
+      return;
     var colorByProduct = Runtime.experiments.isEnabled('timelineColorByProduct') &&
         this._groupBySetting.get() === Timeline.AggregatedTimelineTreeView.GroupBy.Product;
     this._mainDataProvider.setEventColorMapping(
-        colorByProduct ? eventToColorByProduct.bind(this) : Timeline.TimelineUIUtils.eventColor);
+        colorByProduct ? this._colorByProductForEvent.bind(this) : Timeline.TimelineUIUtils.eventColor);
     this._mainFlameChart.update();
+  }
 
-    /**
-     * @param {!SDK.TracingModel.Event} event
-     * @this {Timeline.TimelineFlameChartView}
-     * @return {string}
-     */
-    function eventToColorByProduct(event) {
-      var url = Timeline.TimelineUIUtils.eventURL(event) || '';
-      var color = this._urlToColorCache.get(url);
-      if (!color) {
-        var defaultColor = '#f2ecdc';
-        if (!this._productRegistry)
-          return defaultColor;
-        var parsedURL = url.asParsedURL();
-        if (!parsedURL)
-          return defaultColor;
-        var name = this._productRegistry.nameForUrl(parsedURL);
-        if (!name) {
-          name = parsedURL.host;
-          var rootFrames = this._model.timelineModel().rootFrames();
-          if (rootFrames.some(pageFrame => new Common.ParsedURL(pageFrame.url).host === name))
-            return defaultColor;
-        }
-        color = name ? ProductRegistry.BadgePool.colorForEntryName(name) : defaultColor;
-        this._urlToColorCache.set(url, color);
-      }
-      return color;
-    }
+  /**
+   * @param {!SDK.TracingModel.Event} event
+   * @return {string}
+   */
+  _colorByProductForEvent(event) {
+    return Timeline.TimelineUIUtils.eventColorByProduct(
+        this._productRegistry, this._model.timelineModel(), this._urlToColorCache, event);
   }
 
   /**
@@ -169,6 +152,7 @@ Timeline.TimelineFlameChartView = class extends UI.VBox {
     this._networkDataProvider.setModel(this._model);
     this._countersView.setModel(this._model);
     this._detailsView.setModel(this._model);
+    this._updateColorMapper();
 
     this._nextExtensionIndex = 0;
     this._appendExtensionData();