Timeline: add experiment to show events from subframes in the frames of their own

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

 // Copyright 2015 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.
 /**
  * @unrestricted
  */
 WebInspector.TimelineTreeView = class extends WebInspector.VBox {
   constructor() {
     super();
     this.element.classList.add('timeline-tree-view');
@@ skipping 492 matching lines @@
           name: name,
           color: node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
               WebInspector.TimelineUIUtils.eventStyle(node.event).category.color :
               color
         };
 
       case WebInspector.AggregatedTimelineTreeView.GroupBy.URL:
         break;
       case WebInspector.AggregatedTimelineTreeView.GroupBy.Frame:
         var frame = this._model.pageFrameById(node.id);
-        var frameName;
-        if (frame && frame.url)
-          frameName = frame.url.startsWith('about:') && frame.name ? `"${frame.name}"` : frame.url;
-        else
-          frameName = WebInspector.UIString('Page');
+        var frameName = frame ? WebInspector.TimelineUIUtils.displayNameForFrame(frame, 80) : WebInspector.UIString('Page');
         return {
           name: frameName,
           color: color
         };
         break;
 
       default:
         console.assert(false, 'Unexpected aggregation type');
     }
     return {name: node.id || WebInspector.UIString('unattributed'), color: color};
@@ skipping 396 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(WebInspector.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 WebInspector.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };