DevTools: Support grouping by Product in performance tree views.

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 107 matching lines @@
      * @return {string}
      */
     function colorByProduct(event) {
       if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame)
         return Timeline.TimelineUIUtils.eventStyle(event).category.color;
       var frame = event.args['data'];
       if (!Timeline.TimelineUIUtils.isUserFrame(frame))
         return Timeline.TimelineUIUtils.eventStyle(event).category.color;
       var color = this._urlToColorCache.get(frame.url);
       if (!color) {
-        var defaultColor = '#f2ecdc';
         if (!this._productRegistry)
-          return defaultColor;
+          return Timeline.TimelineUIUtils.colorForId('');
         var parsedURL = frame.url.asParsedURL();
-        var name = parsedURL && this._productRegistry.nameForUrl(parsedURL);
-        color = name ? Timeline.TimelineUIUtils.colorForId(name) : defaultColor;
+        var name = parsedURL && this._productRegistry.nameForUrl(parsedURL) || '';
+        color = Timeline.TimelineUIUtils.colorForId(name);
         this._urlToColorCache.set(frame.url, color);
       }
       return color;
     }
   }
 
   /**
    * @override
    * @return {?Element}
    */
@@ skipping 444 matching lines @@
     }
     context.restore();
   }
 };
 
 /** @enum {string} */
 Timeline.TimelineFlameChartView._ColorBy = {
   URL: 'URL',
   Product: 'Product'
 };