DevTools: add per-frame grouping into aggregated timeline details

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 138 matching lines @@
   }
 
   /**
    * @return {!WebInspector.TimelineProfileTree.Node}
    */
   _buildTree() {
     throw new Error('Not Implemented');
   }
 
   /**
-   * @param {function(!WebInspector.TracingModel.Event):(string|symbol)=} eventIdCallback
+   * @param {function(!WebInspector.TracingModel.Event, string):(string|symbol)=} eventIdCallback
    * @return {!WebInspector.TimelineProfileTree.Node}
    */
   _buildTopDownTree(eventIdCallback) {
     return WebInspector.TimelineProfileTree.buildTopDown(
         this._model.mainThreadEvents(), this._filters, this._startTime, this._endTime, eventIdCallback);
   }
 
   /**
    * @param {!Array<!WebInspector.DataGrid.ColumnDescriptor>} columns
    */
@@ skipping 264 matching lines @@
  * @unrestricted
  */
 WebInspector.AggregatedTimelineTreeView = class extends WebInspector.TimelineTreeView {
   /**
    * @param {!WebInspector.TimelineModel} model
    * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
    */
   constructor(model, filters) {
     super();
     this._groupBySetting =
-        WebInspector.settings.createSetting('timelineTreeGroupBy', WebInspector.TimelineAggregator.GroupBy.Category);
+        WebInspector.settings.createSetting('timelineTreeGroupBy', WebInspector.AggregatedTimelineTreeView.GroupBy.Category);
     this._init(model, filters);
     var nonessentialEvents = [
       WebInspector.TimelineModel.RecordType.EventDispatch, WebInspector.TimelineModel.RecordType.FunctionCall,
       WebInspector.TimelineModel.RecordType.TimerFire
     ];
     this._filters.push(new WebInspector.ExclusiveNameFilter(nonessentialEvents));
     this._stackView = new WebInspector.TimelineStackView(this);
     this._stackView.addEventListener(
         WebInspector.TimelineStackView.Events.SelectionChanged, this._onStackViewSelectionChanged, this);
   }
@@ skipping 20 matching lines @@
 
   /**
    * @param {!WebInspector.TimelineProfileTree.Node} node
    * @return {!{name: string, color: string}}
    */
   _displayInfoForGroupNode(node) {
     var categories = WebInspector.TimelineUIUtils.categories();
     var color = node.id ? WebInspector.TimelineUIUtils.eventColor(node.event) : categories['other'].color;
 
     switch (this._groupBySetting.get()) {
-      case WebInspector.TimelineAggregator.GroupBy.Category:
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Category:
         var category = categories[node.id] || categories['other'];
         return {name: category.title, color: category.color};
 
-      case WebInspector.TimelineAggregator.GroupBy.Domain:
-      case WebInspector.TimelineAggregator.GroupBy.Subdomain:
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Domain:
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain:
         var name = node.id;
-        if (WebInspector.TimelineAggregator.isExtensionInternalURL(name))
+        if (WebInspector.AggregatedTimelineTreeView._isExtensionInternalURL(name))
           name = WebInspector.UIString('[Chrome extensions overhead]');
         else if (name.startsWith('chrome-extension'))
           name = this._executionContextNamesByOrigin.get(name) || name;
         return {name: name || WebInspector.UIString('unattributed'), color: color};
 
-      case WebInspector.TimelineAggregator.GroupBy.EventName:
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.EventName:
         var name = node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
             WebInspector.UIString('JavaScript') :
             WebInspector.TimelineUIUtils.eventTitle(node.event);
         return {
           name: name,
           color: node.event.name === WebInspector.TimelineModel.RecordType.JSFrame ?
               WebInspector.TimelineUIUtils.eventStyle(node.event).category.color :
               color
         };
 
-      case WebInspector.TimelineAggregator.GroupBy.URL:
+      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');
+        return {
+          name: frameName,
+          color: color
+        };
         break;
 
       default:
         console.assert(false, 'Unexpected aggregation type');
     }
     return {name: node.id || WebInspector.UIString('unattributed'), color: color};
   }
 
   /**
    * @override
    * @param {!Element} parent
    */
   _populateToolbar(parent) {
     var panelToolbar = new WebInspector.Toolbar('', parent);
     this._groupByCombobox = new WebInspector.ToolbarComboBox(this._onGroupByChanged.bind(this));
     /**
      * @param {string} name
      * @param {string} id
      * @this {WebInspector.TimelineTreeView}
      */
     function addGroupingOption(name, id) {
       var option = this._groupByCombobox.createOption(name, '', id);
       this._groupByCombobox.addOption(option);
       if (id === this._groupBySetting.get())
         this._groupByCombobox.select(option);
     }
-    addGroupingOption.call(this, WebInspector.UIString('No Grouping'), WebInspector.TimelineAggregator.GroupBy.None);
+    addGroupingOption.call(this, WebInspector.UIString('No Grouping'), WebInspector.AggregatedTimelineTreeView.GroupBy.None);
     addGroupingOption.call(
-        this, WebInspector.UIString('Group by Activity'), WebInspector.TimelineAggregator.GroupBy.EventName);
+        this, WebInspector.UIString('Group by Activity'), WebInspector.AggregatedTimelineTreeView.GroupBy.EventName);
     addGroupingOption.call(
-        this, WebInspector.UIString('Group by Category'), WebInspector.TimelineAggregator.GroupBy.Category);
+        this, WebInspector.UIString('Group by Category'), WebInspector.AggregatedTimelineTreeView.GroupBy.Category);
     addGroupingOption.call(
-        this, WebInspector.UIString('Group by Domain'), WebInspector.TimelineAggregator.GroupBy.Domain);
+        this, WebInspector.UIString('Group by Domain'), WebInspector.AggregatedTimelineTreeView.GroupBy.Domain);
     addGroupingOption.call(
-        this, WebInspector.UIString('Group by Subdomain'), WebInspector.TimelineAggregator.GroupBy.Subdomain);
-    addGroupingOption.call(this, WebInspector.UIString('Group by URL'), WebInspector.TimelineAggregator.GroupBy.URL);
+        this, WebInspector.UIString('Group by Subdomain'), WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain);
+    addGroupingOption.call(this, WebInspector.UIString('Group by URL'), WebInspector.AggregatedTimelineTreeView.GroupBy.URL);
+    addGroupingOption.call(this, WebInspector.UIString('Group by Frame'), WebInspector.AggregatedTimelineTreeView.GroupBy.Frame);
     panelToolbar.appendToolbarItem(this._groupByCombobox);
   }
 
   /**
    * @param {!WebInspector.TimelineProfileTree.Node} treeNode
    * @return {!Array<!WebInspector.TimelineProfileTree.Node>}
    */
   _buildHeaviestStack(treeNode) {
     console.assert(!!treeNode.parent, 'Attempt to build stack for tree root');
     var result = [];
@@ skipping 34 matching lines @@
    * @return {boolean}
    */
   _showDetailsForNode(node) {
     var stack = this._buildHeaviestStack(node);
     this._stackView.setStack(stack, node);
     this._stackView.show(this._detailsView.element);
     return true;
   }
 
   /**
-   * @return {!WebInspector.TimelineAggregator}
+   * @param {!WebInspector.AggregatedTimelineTreeView.GroupBy} groupBy
+   * @return {function(!WebInspector.TracingModel.Event, string):string}
    */
-  _createAggregator() {
-    return new WebInspector.TimelineAggregator(
-        event => WebInspector.TimelineUIUtils.eventStyle(event).title,
-        event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+  _groupingFunction(groupBy) {
+    /**
+     * @param {!WebInspector.TracingModel.Event} event
+     * @return {string}
+     */
+    function groupByURL(event) {

[dgozman, 2016/11/07 17:43:16]

This function does not take second string parameter, but is used as such. How
does this compile?

[alph, 2016/11/07 19:10:02]

It is opposite. The function does not need the second parameter, so it the
caller provides one it's not used. This is ok.

+      return WebInspector.TimelineProfileTree.eventURL(event) || '';
+    }
+
+    /**
+     * @param {boolean} groupSubdomains
+     * @param {!WebInspector.TracingModel.Event} event
+     * @return {string}
+     */
+    function groupByDomain(groupSubdomains, event) {
+      var url = WebInspector.TimelineProfileTree.eventURL(event) || '';
+      if (WebInspector.AggregatedTimelineTreeView._isExtensionInternalURL(url))
+        return WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix;
+      var parsedURL = url.asParsedURL();
+      if (!parsedURL)
+        return '';
+      if (parsedURL.scheme === 'chrome-extension')
+        return parsedURL.scheme + '://' + parsedURL.host;
+      if (!groupSubdomains)
+        return parsedURL.host;
+      if (/^[.0-9]+$/.test(parsedURL.host))
+        return parsedURL.host;
+      var domainMatch = /([^.]*\.)?[^.]*$/.exec(parsedURL.host);
+      return domainMatch && domainMatch[0] || '';
+    }
+
+    switch (groupBy) {
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.None:
+        return () => Symbol('uniqueGroupId');
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.EventName:
+        return event => WebInspector.TimelineUIUtils.eventStyle(event).title;
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Category:
+        return event => WebInspector.TimelineUIUtils.eventStyle(event).category.name;
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Subdomain:
+        return groupByDomain.bind(null, false);
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Domain:
+        return groupByDomain.bind(null, true);
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.URL:
+        return groupByURL;
+      case WebInspector.AggregatedTimelineTreeView.GroupBy.Frame:
+        return (event, pageFrameId) => pageFrameId;

[alph, 2016/11/07 19:10:02]

Adding an extra argument for a single grouping mode looks bad. Can we somehow
infer it from the event?

+      default:
+        console.assert(false, `Unexpected aggregation setting: ${groupBy}`);
+        return () => Symbol('uniqueGroupId');
+    }
   }
+
+  /**
+   * @param {string} url
+   * @return {boolean}
+   */
+  static _isExtensionInternalURL(url) {
+    return url.startsWith(WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix);
+  }
+};
+
+WebInspector.AggregatedTimelineTreeView._extensionInternalPrefix = 'extensions::';
+
+/**
+ * @enum {string}
+ */
+WebInspector.AggregatedTimelineTreeView.GroupBy = {
+  None: 'None',
+  EventName: 'EventName',
+  Category: 'Category',
+  Domain: 'Domain',
+  Subdomain: 'Subdomain',
+  URL: 'URL',
+  Frame: 'Frame'
 };
 
 /**
  * @unrestricted
  */
 WebInspector.CallTreeTimelineTreeView = class extends WebInspector.AggregatedTimelineTreeView {
   /**
    * @param {!WebInspector.TimelineModel} model
    * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
    */
   constructor(model, filters) {
     super(model, filters);
     this._dataGrid.markColumnAsSortedBy('total', WebInspector.DataGrid.Order.Descending);
   }
 
   /**
    * @override
    * @return {!WebInspector.TimelineProfileTree.Node}
    */
   _buildTree() {
-    var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
-    return this._createAggregator().performGrouping(topDown, this._groupBySetting.get());
+    var grouping = this._groupBySetting.get();
+    var topDown = this._buildTopDownTree(this._groupingFunction(grouping));
+    if (grouping === WebInspector.AggregatedTimelineTreeView.GroupBy.None)
+      return topDown;
+    return new WebInspector.TimelineAggregator().performGrouping(topDown);
   }
 };
 
 /**
  * @unrestricted
  */
 WebInspector.BottomUpTimelineTreeView = class extends WebInspector.AggregatedTimelineTreeView {
   /**
    * @param {!WebInspector.TimelineModel} model
    * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
    */
   constructor(model, filters) {
     super(model, filters);
     this._dataGrid.markColumnAsSortedBy('self', WebInspector.DataGrid.Order.Descending);
   }
 
   /**
    * @override
    * @return {!WebInspector.TimelineProfileTree.Node}
    */
   _buildTree() {
-    var topDown = this._buildTopDownTree(WebInspector.TimelineAggregator.eventId);
-    return WebInspector.TimelineProfileTree.buildBottomUp(
-        topDown, this._createAggregator().groupFunction(this._groupBySetting.get()));
+    var topDown = this._buildTopDownTree(this._groupingFunction(this._groupBySetting.get()));
+    return WebInspector.TimelineProfileTree.buildBottomUp(topDown);
   }
 };
 
 /**
  * @unrestricted
  */
 WebInspector.EventsTimelineTreeView = class extends WebInspector.TimelineTreeView {
   /**
    * @param {!WebInspector.TimelineModel} model
    * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
@@ skipping 176 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(WebInspector.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 WebInspector.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };