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

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

 // Copyright 2017 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.EventsTimelineTreeView = class extends Timeline.TimelineTreeView {
   /**
    * @param {!TimelineModel.TimelineModel} model
@@ skipping 73 matching lines @@
     if (expand)
       this.dataGridNodeForTreeNode(node).expand();
   }
 
   /**
    * @override
    * @param {!Array<!DataGrid.DataGrid.ColumnDescriptor>} columns
    */
   populateColumns(columns) {
     columns.push(
-        {id: 'startTime', title: Common.UIString('Start Time'), width: '110px', fixedWidth: true, sortable: true});
+        {id: 'startTime', title: Common.UIString('Start Time'), width: '80px', fixedWidth: true, sortable: true});
     super.populateColumns(columns);
+    columns.filter(c => c.fixedWidth).forEach(c => c.width = '80px');
   }
 
   /**
    * @override
-   * @param {!Element} parent
+   * @param {!UI.Toolbar} toolbar
    */
-  _populateToolbar(parent) {
-    var filtersWidget = this._filtersControl.filtersWidget();
-    filtersWidget.forceShowFilterBar();
-    filtersWidget.show(parent);
+  _populateToolbar(toolbar) {
+    this._filtersControl.populateToolbar(toolbar);
   }
 
   /**
    * @override
    * @param {!TimelineModel.TimelineProfileTree.Node} node
    * @return {boolean}
    */
   _showDetailsForNode(node) {
     var traceEvent = node.event;
     if (!traceEvent)
@@ skipping 19 matching lines @@
     this._delegate.highlightEvent(node && node.event);
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.EventsTimelineTreeView.Filters = class extends Common.Object {
   constructor() {
     super();
-
     this._categoryFilter = new Timeline.TimelineFilters.Category();
     this._durationFilter = new Timeline.TimelineFilters.IsLong();
     this._textFilter = new Timeline.TimelineFilters.RegExp();
     this._filters = [this._categoryFilter, this._durationFilter, this._textFilter];
-
-    this._createFilterBar();
   }
 
   /**
    * @return {!Array<!TimelineModel.TimelineModelFilter>}
    */
   filters() {
     return this._filters;
   }
 
   /**
-   * @return {?RegExp}
+   * @param {!UI.Toolbar} toolbar
    */
-  searchRegExp() {
-    return this._textFilter.regExp();
-  }
+  populateToolbar(toolbar) {
+    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'));
+    this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, textFilterChanged, this);
+    toolbar.appendToolbarItem(this._textFilterUI);
 
-  /**
-   * @return {!UI.ToolbarItem}
-   */
-  filterButton() {
-    return this._filterBar.filterButton();
-  }
-
-  /**
-   * @return {!UI.Widget}
-   */
-  filtersWidget() {
-    return this._filterBar;
-  }
-
-  _createFilterBar() {
-    this._filterBar = new UI.FilterBar('timelinePanel');
-
-    this._textFilterUI = new UI.TextFilterUI();
-    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, textFilterChanged, this);
-    this._filterBar.addFilter(this._textFilterUI);
-
-    var durationOptions = [];
+    var durationFilterUI = new UI.ToolbarComboBox(durationFilterChanged.bind(this));
     for (var durationMs of Timeline.EventsTimelineTreeView.Filters._durationFilterPresetsMs) {
-      var durationOption = {};
+      var label, title;

[caseq, 2017/02/09 00:46:04]

split into two lines.

       if (!durationMs) {
-        durationOption.label = Common.UIString('All');
-        durationOption.title = Common.UIString('Show all records');
+        label = Common.UIString('All');
+        title = Common.UIString('Show all records');
       } else {
-        durationOption.label = Common.UIString('\u2265 %dms', durationMs);
-        durationOption.title = Common.UIString('Hide records shorter than %dms', durationMs);
+        label = Common.UIString('\u2265 %dms', durationMs);
+        title = Common.UIString('Hide records shorter than %d\u2009ms', durationMs);
       }
-      durationOption.value = String(durationMs);
-      durationOptions.push(durationOption);
+      var value = String(durationMs);
+      durationFilterUI.addOption(durationFilterUI.createOption(label, title, value));

[caseq, 2017/02/09 00:46:04]

perhaps just call create option with appropriate labels using a ternary operator
above?

[alph, 2017/02/09 01:01:50]

Done.

     }
-    var durationFilterUI = new UI.ComboBoxFilterUI(durationOptions);
-    durationFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, durationFilterChanged, this);
-    this._filterBar.addFilter(durationFilterUI);
+    toolbar.appendToolbarItem(durationFilterUI);
 
     var categoryFiltersUI = {};
     var categories = Timeline.TimelineUIUtils.categories();
     for (var categoryName in categories) {
       var category = categories[categoryName];
       if (!category.visible)
         continue;
-      var filter = new UI.CheckboxFilterUI(category.name, category.title);
-      filter.setColor(category.color, 'rgba(0, 0, 0, 0.2)');
-      categoryFiltersUI[category.name] = filter;
-      filter.addEventListener(UI.FilterUI.Events.FilterChanged, categoriesFilterChanged.bind(this, categoryName));
-      this._filterBar.addFilter(filter);
+      var checkbox = new UI.ToolbarCheckbox(
+          category.title, undefined, undefined, categoriesFilterChanged.bind(this, categoryName));
+      checkbox.setChecked(true);
+      checkbox.inputElement.style.backgroundColor = category.color;
+      categoryFiltersUI[category.name] = checkbox;
+      toolbar.appendToolbarItem(checkbox);
     }
-    return this._filterBar;
 
     /**
      * @this {Timeline.EventsTimelineTreeView.Filters}
      */
     function textFilterChanged() {
       var searchQuery = this._textFilterUI.value();
       this._textFilter.setRegExp(searchQuery ? createPlainTextSearchRegex(searchQuery, 'i') : null);
       this._notifyFiltersChanged();
     }
 
     /**
      * @this {Timeline.EventsTimelineTreeView.Filters}
      */
     function durationFilterChanged() {
-      var duration = durationFilterUI.value();
+      var duration = durationFilterUI.selectedOption().value;
       var minimumRecordDuration = parseInt(duration, 10);
       this._durationFilter.setMinimumRecordDuration(minimumRecordDuration);
       this._notifyFiltersChanged();
     }
 
     /**
      * @param {string} name
      * @this {Timeline.EventsTimelineTreeView.Filters}
      */
     function categoriesFilterChanged(name) {
       var categories = Timeline.TimelineUIUtils.categories();
       categories[name].hidden = !categoryFiltersUI[name].checked();
       this._notifyFiltersChanged();
     }
   }
 
   _notifyFiltersChanged() {
     this.dispatchEventToListeners(Timeline.EventsTimelineTreeView.Filters.Events.FilterChanged);
   }
 };
 
 Timeline.EventsTimelineTreeView.Filters._durationFilterPresetsMs = [0, 1, 15];
 
 /** @enum {symbol} */
 Timeline.EventsTimelineTreeView.Filters.Events = {
   FilterChanged: Symbol('FilterChanged')
 };