DevTools: Support color by Product on timeline flamechart.

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 61 matching lines @@
     this._detailsSplitWidget.show(this.element);
 
     this._onMainEntrySelected = this._onEntrySelected.bind(this, this._mainDataProvider);
     this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networkDataProvider);
     this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
     this._networkFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
     this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryHighlighted, this._onEntryHighlighted, this);
     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;
+    }
+  }
+
+  /**
    * @override
    * @return {?Element}
    */
   resizerElement() {
     return null;
   }
 
   /**
    * @override
    * @param {number} windowStartTime
@@ skipping 431 matching lines @@
       context.translate(this._style.lineWidth < 1 || (this._style.lineWidth & 1) ? 0.5 : 0, 0.5);
       context.beginPath();
       context.moveTo(x, height);
       context.setLineDash(this._style.dashStyle);
       context.lineTo(x, context.canvas.height);
       context.stroke();
     }
     context.restore();
   }
 };
+
+/** @enum {string} */
+Timeline.TimelineFlameChartView._ColorBy = {
+  URL: 'URL',
+  Product: 'Product'
+};