DevTools: Support color by Product on timeline flamechart.

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 881917cff72caf61151232489b30fe92a47fdc40..61b91ace803427090f12caa9085983b5a6d4bf7b 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js
@@ -79,6 +79,61 @@ Timeline.TimelineFlameChartView = class extends UI.VBox {
     this._nextExtensionIndex = 0;
 
     this._boundRefresh = this._refresh.bind(this);
+
+    this._mainDataProvider.setEntryColorMapping(Timeline.TimelineUIUtils.eventColor);
+    ProductRegistry.instance().then(registry => this._productRegistry = registry);

[caseq, 2017/05/08 18:20:35]

Let's make this conditional on experiment.

[alph, 2017/05/08 19:00:20]

Done.

+  }
+
+  /**
+   * @param {!UI.Toolbar} toolbar
+   */
+  populateToolbar(toolbar) {
+    if (!Runtime.experiments.isEnabled('timelineColorByProduct'))
+      return;
+    toolbar.appendSeparator();
+    var colorBySetting = Common.settings.createSetting('timelineColorBy', Timeline.TimelineFlameChartView._ColorBy.URL);
+    colorBySetting.addChangeListener(this._onColorByChanged, this);
+    var options = [
+      {value: Timeline.TimelineFlameChartView._ColorBy.URL, label: Common.UIString('Color by URL')},
+      {value: Timeline.TimelineFlameChartView._ColorBy.Product, label: Common.UIString('Color by Product')}
+    ];
+    this._colorByCombobox = new UI.ToolbarSettingComboBox(options, colorBySetting);
+    toolbar.appendToolbarItem(this._colorByCombobox);
+    this._onColorByChanged();
+  }
+
+  _onColorByChanged() {
+    /** @type {!Map<string, string>} */
+    this._urlToColorCache = new Map();
+    this._mainDataProvider.setEntryColorMapping(
+        this._colorByCombobox.selectedOption().value === Timeline.TimelineFlameChartView._ColorBy.Product ?
+            colorByProduct.bind(this) :
+            Timeline.TimelineUIUtils.eventColor);
+
+    /**
+     * @param {!SDK.TracingModel.Event} event
+     * @this {Timeline.TimelineFlameChartView}
+     * @return {string}
+     */
+    function colorByProduct(event) {
+      if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame) {

[caseq, 2017/05/08 18:20:35]

if (event.name !== ...)
 return Timeline.TimelineUIUtils.eventStyle(event).category.color;

[alph, 2017/05/08 19:00:20]

Done.

+        var frame = event.args['data'];
+        if (Timeline.TimelineUIUtils.isUserFrame(frame)) {
+          var color = this._urlToColorCache.get(frame.url);
+          if (!color) {
+            var defaultColor = '#f2ecdc';
+            if (!this._productRegistry)
+              return defaultColor;
+            var parsedURL = frame.url.asParsedURL();
+            var name = parsedURL && this._productRegistry.nameForUrl(parsedURL);
+            color = name ? Timeline.TimelineUIUtils.colorForId(name) : defaultColor;
+            this._urlToColorCache.set(frame.url, color);
+          }
+          return color;
+        }
+      }
+      return Timeline.TimelineUIUtils.eventStyle(event).category.color;
+    }
   }
 
   /**
@@ -533,3 +588,9 @@ Timeline.TimelineFlameChartMarker = class {
     context.restore();
   }
 };
+
+/** @enum {string} */
+Timeline.TimelineFlameChartView._ColorBy = {
+  URL: 'URL',
+  Product: 'Product'
+};