DevTools: Speed up timeline aggregated tree building.

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
  */
 Timeline.TimelineTreeView = class extends UI.VBox {
   constructor() {
     super();
     this.element.classList.add('timeline-tree-view');
   }
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @return {string}
    */
   static eventNameForSorting(event) {
     if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame) {
       var data = event.args['data'];
-      return data['functionName'] + '@' + (data['scriptId'] || data['url'] || '');
+      return `${data['functionName']}@${data['scriptId'] || data['url'] || ''}`;

[caseq, 2017/02/03 19:55:25]

let's revert this

[alph, 2017/02/03 20:06:01]

Done.

     }
     return event.name + ':@' + TimelineModel.TimelineProfileTree.eventURL(event);
   }
 
   /**
    * @protected
    * @param {!TimelineModel.TimelineModel} model
    * @param {!Array<!TimelineModel.TimelineModelFilter>} filters
    */
   init(model, filters) {
@@ skipping 113 matching lines @@
     }
   }
 
   /**
    * @protected
    */
   refreshTree() {
     this._linkifier.reset();
     this._dataGrid.rootNode().removeChildren();
     var tree = this._buildTree();
-    if (!tree.children)
-      return;
+    var children = tree.children();
     var maxSelfTime = 0;
     var maxTotalTime = 0;
-    for (var child of tree.children.values()) {
+    for (var child of children.values()) {
       maxSelfTime = Math.max(maxSelfTime, child.selfTime);
       maxTotalTime = Math.max(maxTotalTime, child.totalTime);
     }
-    for (var child of tree.children.values()) {
+    for (var child of children.values()) {
       // Exclude the idle time off the total calculation.
       var gridNode = new Timeline.TimelineTreeView.TreeGridNode(child, tree.totalTime, maxSelfTime, maxTotalTime, this);
       this._dataGrid.insertChild(gridNode);
     }
     this._sortingChanged();
     this._updateDetailsForSelection();
   }
 
   /**
    * @return {!TimelineModel.TimelineProfileTree.Node}
@@ skipping 135 matching lines @@
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} treeNode
    * @protected
    * @return {?Timeline.TimelineTreeView.GridNode}
    */
   dataGridNodeForTreeNode(treeNode) {
     return treeNode[Timeline.TimelineTreeView.TreeGridNode._gridNodeSymbol] || null;
   }
 };
 
-
 /**
  * @unrestricted
  */
 Timeline.TimelineTreeView.GridNode = class extends DataGrid.SortableDataGridNode {
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} profileNode
    * @param {number} grandTotalTime
    * @param {number} maxSelfTime
    * @param {number} maxTotalTime
    * @param {!Timeline.TimelineTreeView} treeView
    */
   constructor(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView) {
     super(null, false);
-
     this._populated = false;
     this._profileNode = profileNode;
     this._treeView = treeView;
     this._grandTotalTime = grandTotalTime;
     this._maxSelfTime = maxSelfTime;
     this._maxTotalTime = maxTotalTime;
   }
 
   /**
    * @override
@@ skipping 88 matching lines @@
 Timeline.TimelineTreeView.TreeGridNode = class extends Timeline.TimelineTreeView.GridNode {
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} profileNode
    * @param {number} grandTotalTime
    * @param {number} maxSelfTime
    * @param {number} maxTotalTime
    * @param {!Timeline.TimelineTreeView} treeView
    */
   constructor(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView) {
     super(profileNode, grandTotalTime, maxSelfTime, maxTotalTime, treeView);
-    this.setHasChildren(this._profileNode.children ? this._profileNode.children.size > 0 : false);
+    this.setHasChildren(this._profileNode.hasChildren());
     profileNode[Timeline.TimelineTreeView.TreeGridNode._gridNodeSymbol] = this;
   }
 
   /**
    * @override
    */
   populate() {
     if (this._populated)
       return;
     this._populated = true;
     if (!this._profileNode.children)
       return;
-    for (var node of this._profileNode.children.values()) {
+    for (var node of this._profileNode.children().values()) {
       var gridNode = new Timeline.TimelineTreeView.TreeGridNode(
           node, this._grandTotalTime, this._maxSelfTime, this._maxTotalTime, this._treeView);
       this.insertChildOrdered(gridNode);
     }
   }
 };
 
 Timeline.TimelineTreeView.TreeGridNode._gridNodeSymbol = Symbol('treeGridNode');
 
 /**
@@ skipping 38 matching lines @@
         this._executionContextNamesByOrigin.set(context.origin, context.name);
     }
   }
 
   /**
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    * @return {!{name: string, color: string}}
    */
   _displayInfoForGroupNode(node) {
     var categories = Timeline.TimelineUIUtils.categories();
-    var color = node.id ? Timeline.TimelineUIUtils.eventColor(node.event) : categories['other'].color;
+    var color = node.id ? Timeline.TimelineUIUtils.eventColor(/** @type {!SDK.TracingModel.Event} */ (node.event)) :
+        categories['other'].color;
 
     switch (this._groupBySetting.get()) {
       case Timeline.AggregatedTimelineTreeView.GroupBy.Category:
         var category = categories[node.id] || categories['other'];
         return {name: category.title, color: category.color};
 
       case Timeline.AggregatedTimelineTreeView.GroupBy.Domain:
       case Timeline.AggregatedTimelineTreeView.GroupBy.Subdomain:
         var name = node.id;
         if (Timeline.AggregatedTimelineTreeView._isExtensionInternalURL(name))
@@ skipping 63 matching lines @@
    * @param {!TimelineModel.TimelineProfileTree.Node} treeNode
    * @return {!Array<!TimelineModel.TimelineProfileTree.Node>}
    */
   _buildHeaviestStack(treeNode) {
     console.assert(!!treeNode.parent, 'Attempt to build stack for tree root');
     var result = [];
     // Do not add root to the stack, as it's the tree itself.
     for (var node = treeNode; node && node.parent; node = node.parent)
       result.push(node);
     result = result.reverse();
-    for (node = treeNode; node && node.children && node.children.size;) {
-      var children = Array.from(node.children.values());
+    for (node = treeNode; node && node.children() && node.children().size;) {
+      var children = Array.from(node.children().values());
       node = children.reduce((a, b) => a.totalTime > b.totalTime ? a : b);
       result.push(node);
     }
     return result;
   }
 
   /**
    * @override
    * @return {boolean}
    */
@@ skipping 19 matching lines @@
    */
   _showDetailsForNode(node) {
     var stack = this._buildHeaviestStack(node);
     this._stackView.setStack(stack, node);
     this._stackView.show(this._detailsView.element);
     return true;
   }
 
   /**
    * @param {!Timeline.AggregatedTimelineTreeView.GroupBy} groupBy
-   * @return {function(!SDK.TracingModel.Event):string}
+   * @return {function(!SDK.TracingModel.Event):(string|symbol)}
    */
   _groupingFunction(groupBy) {
     /**
      * @param {!SDK.TracingModel.Event} event
      * @return {string}
      */
     function groupByURL(event) {
       return TimelineModel.TimelineProfileTree.eventURL(event) || '';
     }
 
@@ skipping 127 matching lines @@
   constructor(model, filters) {
     super(model, filters);
     this._dataGrid.markColumnAsSortedBy('self', DataGrid.DataGrid.Order.Descending);
   }
 
   /**
    * @override
    * @return {!TimelineModel.TimelineProfileTree.Node}
    */
   _buildTree() {
-    var topDown = this.buildTopDownTree(this._groupingFunction(this._groupBySetting.get()));
-    return TimelineModel.TimelineProfileTree.buildBottomUp(topDown);
+    var tree = new TimelineModel.TimelineProfileTree(
+        this._model.mainThreadEvents(), this._filters, this._startTime, this._endTime,
+        this._groupingFunction(this._groupBySetting.get()));
+    return tree.bottomUpTreeRoot();
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineStackView = class extends UI.VBox {
   constructor(treeView) {
     super();
     var header = this.element.createChild('div', 'timeline-stack-view-header');
@@ skipping 37 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };