DevTools: all ToolbarInputs should have clear button

Prior to this CL, some input fields did not have the 'x' button to clear
text from the field. Namely, HeapSnapshotView's 'Class filter' and
DatabaseTableView's 'Visible columns' will now behave consistently with
the others.

Screenshot: http://imgur.com/a/AJecJ

Bug: none
Change-Id: Ia1be529c0d2d851cbf63e01f4c69841f85ff75b0
Reviewed-on: https://chromium-review.googlesource.com/662398Reviewed-by: Alexei Filippov <alph@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#501492}

third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

@@ -1019,7 +1019,7 @@ Console.ConsoleViewFilter = class {
     this._filterByExecutionContextSetting.addChangeListener(this._filterChanged);
     this._filterByConsoleAPISetting.addChangeListener(this._filterChanged);
 
-    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'), 0.2, 1, true);
+    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'), 0.2, 1);
     this._textFilterUI.element.title = Common.UIString('e.g. /event\\d/ -cdn url:a.com');
     this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, this._textFilterChanged, this);
     this._filterParser = new TextUtils.FilterParser(Object.values(Console.ConsoleViewFilter._filterType));

third_party/WebKit/Source/devtools/front_end/coverage/CoverageView.js

@@ -35,7 +35,7 @@ Coverage.CoverageView = class extends UI.VBox {
     this._textFilterRegExp = null;
 
     toolbar.appendSeparator();
-    this._filterInput = new UI.ToolbarInput(Common.UIString('URL filter'), 0.4, 1, true);
+    this._filterInput = new UI.ToolbarInput(Common.UIString('URL filter'), 0.4, 1);
     this._filterInput.setEnabled(false);
     this._filterInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._onFilterChanged, this);
     toolbar.appendToolbarItem(this._filterInput);

third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js

@@ -73,7 +73,7 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
     this._filterType = null;
 
     var placeholder = 'Enter regex, for example: (web)?socket';
-    this._filterTextInput = new UI.ToolbarInput(Common.UIString(placeholder), 0.4, undefined, true);
+    this._filterTextInput = new UI.ToolbarInput(Common.UIString(placeholder), 0.4);
     this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._updateFilterSetting, this);
     this._mainToolbar.appendToolbarItem(this._filterTextInput);
     this._filterRegex = null;

third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js

@@ -19,7 +19,7 @@ Resources.StorageItemsView = class extends UI.VBox {
 
     this._mainToolbar = new UI.Toolbar('top-resources-toolbar', this.element);
 
-    this._filterItem = new UI.ToolbarInput(Common.UIString('Filter'), 0.4, undefined, true);
+    this._filterItem = new UI.ToolbarInput(Common.UIString('Filter'), 0.4);
     this._filterItem.addEventListener(UI.ToolbarInput.Event.TextChanged, this._filterChanged, this);
 
     var toolbarItems = [this._refreshButton, this._deleteAllButton, this._deleteSelectedButton, this._filterItem];

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

@@ -131,7 +131,7 @@ Timeline.TimelineTreeView = class extends UI.VBox {
     this._threadSelector.setMaxWidth(230);
     this._currentThreadSetting = Common.settings.createSetting('timelineTreeCurrentThread', 0);
     toolbar.appendToolbarItem(this._threadSelector);
-    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'), 0, 0, true);
+    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'));
     this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, textFilterChanged, this);
     toolbar.appendToolbarItem(this._textFilterUI);
 

third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js

@@ -575,16 +575,14 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @param {string} placeholder
    * @param {number=} growFactor
    * @param {number=} shrinkFactor
-   * @param {boolean=} isSearchField
    */
-  constructor(placeholder, growFactor, shrinkFactor, isSearchField) {
+  constructor(placeholder, growFactor, shrinkFactor) {
     super(createElementWithClass('div', 'toolbar-input'));
 
     this.input = this.element.createChild('input');
     this.input.addEventListener('focus', () => this.element.classList.add('focused'));
     this.input.addEventListener('blur', () => this.element.classList.remove('focused'));
     this.input.addEventListener('input', () => this._onChangeCallback(), false);
-    this._isSearchField = !!isSearchField;
     if (growFactor)
       this.element.style.flexGrow = growFactor;
     if (shrinkFactor)
@@ -592,8 +590,10 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
     if (placeholder)
       this.input.setAttribute('placeholder', placeholder);
 
-    if (isSearchField)
-      this._setupSearchControls();
+    var clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
+    clearButton.appendChild(UI.Icon.create('mediumicon-gray-cross-hover', 'search-cancel-button'));
+    clearButton.addEventListener('click', () => this._internalSetValue('', true));
+    this.input.addEventListener('keydown', event => this._onKeydownCallback(event));
 
     this._updateEmptyStyles();
   }
@@ -606,13 +606,6 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
     this.input.disabled = !enabled;
   }
 
-  _setupSearchControls() {
-    var clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
-    clearButton.appendChild(UI.Icon.create('mediumicon-gray-cross-hover', 'search-cancel-button'));
-    clearButton.addEventListener('click', () => this._internalSetValue('', true));
-    this.input.addEventListener('keydown', event => this._onKeydownCallback(event));
-  }
-
   /**
    * @param {string} value
    */
@@ -642,7 +635,7 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @param {!Event} event
    */
   _onKeydownCallback(event) {
-    if (!this._isSearchField || !isEscKey(event) || !this.input.value)
+    if (!isEscKey(event) || !this.input.value)
       return;
     this._internalSetValue('', true);
     event.consume(true);