DevTools: Render third-party badges in timeline tree view

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

 // Copyright 2016 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.
 
 /**
  * @implements {Timeline.TimelineModeView}
  * @implements {PerfUI.FlameChartDelegate}
  * @implements {UI.Searchable}
  * @unrestricted
  */
@@ skipping 67 matching lines @@
     this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryHighlighted, this._onEntryHighlighted, this);
     this._nextExtensionIndex = 0;
 
     this._boundRefresh = this._refresh.bind(this);
 
     this._mainDataProvider.setEventColorMapping(Timeline.TimelineUIUtils.eventColor);
     if (!Runtime.experiments.isEnabled('timelineColorByProduct'))
       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);
+  }
+
+  /**
    * @override
    * @return {?Element}
    */
   resizerElement() {
     return null;
   }
 
   /**
    * @override
    * @param {number} windowStartTime
@@ skipping 20 matching lines @@
     var extensionDataAdded = Timeline.PerformanceModel.Events.ExtensionDataAdded;
     if (this._model)
       this._model.removeEventListener(extensionDataAdded, this._appendExtensionData, this);
     this._model = model;
     if (this._model)
       this._model.addEventListener(extensionDataAdded, this._appendExtensionData, this);
     this._mainDataProvider.setModel(this._model);
     this._networkDataProvider.setModel(this._model);
     this._countersView.setModel(this._model);
     this._detailsView.setModel(this._model);
+    this._updateColorMapper();
 
     this._nextExtensionIndex = 0;
     this._appendExtensionData();
 
     this._updateSearchHighlight(false, true);
     this._refresh();
   }
 
   _refresh() {
     if (this._networkDataProvider.isEmpty()) {
@@ skipping 387 matching lines @@
     }
     context.restore();
   }
 };
 
 /** @enum {string} */
 Timeline.TimelineFlameChartView._ColorBy = {
   URL: 'URL',
   Product: 'Product'
 };