DevTools: Turn FilterBar into Toolbar in timeline events log view.

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();
@@ skipping 20 matching lines @@
   init(model, filters) {
     this._model = model;
     this._linkifier = new Components.Linkifier();
 
     this._filters = filters.slice();
 
     const columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([]);
     this.populateColumns(columns);
 
     this._splitWidget = new UI.SplitWidget(true, true, 'timelineTreeViewDetailsSplitWidget');
-    const mainView = new UI.VBox();
-    this._populateToolbar(mainView.element);
+    var mainView = new UI.VBox();
+    var toolbar = new UI.Toolbar('', mainView.element);
+    this._populateToolbar(toolbar);
 
     this._dataGrid = new DataGrid.SortableDataGrid(columns);
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this._sortingChanged, this);
     this._dataGrid.element.addEventListener('mousemove', this._onMouseMove.bind(this), true);
     this._dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.Last);
     this._dataGrid.setRowContextMenuCallback(this._onContextMenu.bind(this));
     this._dataGrid.asWidget().show(mainView.element);
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, this._updateDetailsForSelection, this);
 
     this._detailsView = new UI.VBox();
@@ skipping 33 matching lines @@
   }
 
   /**
    * @return {boolean}
    */
   _exposePercentages() {
     return false;
   }
 
   /**
-   * @param {!Element} parent
+   * @param {!UI.Toolbar} toolbar
    */
-  _populateToolbar(parent) {
+  _populateToolbar(toolbar) {
   }
 
   /**
    * @param {?TimelineModel.TimelineProfileTree.Node} node
    */
   _onHover(node) {
   }
 
   /**
    * @param {!UI.ContextMenu} contextMenu
@@ skipping 75 matching lines @@
   buildTopDownTree(doNotAggregate, groupIdCallback) {
     return new TimelineModel.TimelineProfileTree.TopDownRootNode(
         this._model.mainThreadEvents(), this._filters, this._startTime, this._endTime, doNotAggregate, groupIdCallback);
   }
 
   /**
    * @protected
    * @param {!Array<!DataGrid.DataGrid.ColumnDescriptor>} columns
    */
   populateColumns(columns) {
-    columns.push({id: 'self', title: Common.UIString('Self Time'), width: '110px', fixedWidth: true, sortable: true});
-    columns.push({id: 'total', title: Common.UIString('Total Time'), width: '110px', fixedWidth: true, sortable: true});
+    columns.push({id: 'self', title: Common.UIString('Self Time'), width: '120px', fixedWidth: true, sortable: true});
+    columns.push({id: 'total', title: Common.UIString('Total Time'), width: '120px', fixedWidth: true, sortable: true});
     columns.push({id: 'activity', title: Common.UIString('Activity'), disclosure: true, sortable: true});
   }
 
   _sortingChanged() {
     var columnId = this._dataGrid.sortColumnId();
     if (!columnId)
       return;
     var sortFunction;
     switch (columnId) {
       case 'startTime':
@@ skipping 341 matching lines @@
         return {name: frameName, color: color};
 
       default:
         console.assert(false, 'Unexpected aggregation type');
     }
     return {name: node.id || Common.UIString('unattributed'), color: color};
   }
 
   /**
    * @override
-   * @param {!Element} parent
+   * @param {!UI.Toolbar} toolbar
    */
-  _populateToolbar(parent) {
-    var panelToolbar = new UI.Toolbar('', parent);
+  _populateToolbar(toolbar) {
     this._groupByCombobox = new UI.ToolbarComboBox(this._onGroupByChanged.bind(this));
     /**
      * @param {string} name
      * @param {string} id
      * @this {Timeline.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);
     }
     const groupBy = Timeline.AggregatedTimelineTreeView.GroupBy;
     addGroupingOption.call(this, Common.UIString('No Grouping'), groupBy.None);
     addGroupingOption.call(this, Common.UIString('Group by Activity'), groupBy.EventName);
     addGroupingOption.call(this, Common.UIString('Group by Category'), groupBy.Category);
     addGroupingOption.call(this, Common.UIString('Group by Domain'), groupBy.Domain);
     addGroupingOption.call(this, Common.UIString('Group by Subdomain'), groupBy.Subdomain);
     addGroupingOption.call(this, Common.UIString('Group by URL'), groupBy.URL);
     addGroupingOption.call(this, Common.UIString('Group by Frame'), groupBy.Frame);
-    panelToolbar.appendToolbarItem(this._groupByCombobox);
-    panelToolbar.appendSpacer();
-    panelToolbar.appendToolbarItem(this._splitWidget.createShowHideSidebarButton(Common.UIString('heaviest stack')));
+    toolbar.appendToolbarItem(this._groupByCombobox);
+    toolbar.appendSpacer();
+    toolbar.appendToolbarItem(this._splitWidget.createShowHideSidebarButton(Common.UIString('heaviest stack')));
   }
 
   /**
    * @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.
@@ skipping 239 matching lines @@
 
   _onSelectionChanged() {
     this.dispatchEventToListeners(Timeline.TimelineStackView.Events.SelectionChanged);
   }
 };
 
 /** @enum {symbol} */
 Timeline.TimelineStackView.Events = {
   SelectionChanged: Symbol('SelectionChanged')
 };