[DevTools] Merge filter bar with the main toolbar

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

 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 534 matching lines @@
   Click: Symbol('Click'),
   MouseDown: Symbol('MouseDown'),
   MouseUp: Symbol('MouseUp')
 };
 
 /**
  * @unrestricted
  */
 UI.ToolbarInput = class extends UI.ToolbarItem {
   /**
-   * @param {string=} placeholder
+   * @param {string} placeholder
    * @param {number=} growFactor
    * @param {number=} shrinkFactor
+   * @param {boolean=} isSearchField
    */
-  constructor(placeholder, growFactor, shrinkFactor) {
-    super(createElementWithClass('input', 'toolbar-item'));
-    this.element.addEventListener('input', this._onChangeCallback.bind(this), false);
+  constructor(placeholder, growFactor, shrinkFactor, isSearchField) {
+    super(createElementWithClass('div', 'toolbar-input'));
+
+    this._input = this.element.createChild('input');
+    this._input.addEventListener('blur', () => this.element.classList.toggle('focused', false));
+    this._input.addEventListener('focus', () => this.element.classList.toggle('focused', true));
+    this._input.addEventListener('input', () => this._onChangeCallback(), false);
     if (growFactor)
       this.element.style.flexGrow = growFactor;
     if (shrinkFactor)
       this.element.style.flexShrink = shrinkFactor;
     if (placeholder)
-      this.element.setAttribute('placeholder', placeholder);
-    this._value = '';
+      this._input.setAttribute('placeholder', placeholder);
+
+    if (isSearchField)
+      this._setupSearchControls();
+  }
+
+  _setupSearchControls() {
+    var clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
+    clearButton.appendChild(UI.Icon.create('smallicon-clear-input', 'search-cancel-button'));
+    clearButton.addEventListener('click', () => this.setValue('', true));
+    this._input.addEventListener('keydown', event => this._onKeydownCallback(event));
   }
 
   /**
    * @param {string} value
+   * @param {boolean=} notify

[dgozman, 2017/02/03 20:54:53]

Don't add parameters to public methods if they are not intended to be used by
clients. If you need this, add a private function.

[eostroukhov, 2017/02/03 22:59:25]

Done.

    */
-  setValue(value) {
-    this._value = value;
-    this.element.value = value;
+  setValue(value, notify) {
+    this._input.value = value;
+    if (notify)
+      this._onChangeCallback();
   }
 
   /**
    * @return {string}
    */
   value() {
-    return this.element.value;
+    return this._input.value;
+  }
+
+  _onKeydownCallback(event) {

[dgozman, 2017/02/03 20:54:53]

JSDoc please.

[eostroukhov, 2017/02/03 22:59:25]

Done.

+    if (event.code === 'ArrowDown')
+      this.dispatchEventToListeners(UI.ToolbarInput.Event.FocusOnResultsRequested, this);

[dgozman, 2017/02/03 20:54:53]

I don't think this is too generic to be in ToolbarInput. Let's expose KeyDown
event (with data == |event|) instead, and let clients handle ArrowDown as they
want.

[eostroukhov, 2017/02/03 22:59:26]

Done.

+    if (event.code !== 'Escape' || !this._input.value)

[dgozman, 2017/02/03 20:54:53]

Escape is good though.

[eostroukhov, 2017/02/03 22:59:26]

Acknowledged.

+      return;
+
+    this.setValue('', true);
+    event.consume(true);
   }
 
   _onChangeCallback() {
-    this.dispatchEventToListeners(UI.ToolbarInput.Event.TextChanged, this.element.value);
+    this.dispatchEventToListeners(UI.ToolbarInput.Event.TextChanged, this._input.value);
   }
 };
 
 UI.ToolbarInput.Event = {
-  TextChanged: Symbol('TextChanged')
+  TextChanged: Symbol('TextChanged'),
+  FocusOnResultsRequested: Symbol('FocusOnResultsRequested')
 };
 
 /**
  * @unrestricted
  */
 UI.ToolbarToggle = class extends UI.ToolbarButton {
   /**
    * @param {string} title
    * @param {string=} glyph
    * @param {string=} toggledGlyph
@@ skipping 393 matching lines @@
 
   /**
    * @override
    * @param {boolean} enabled
    */
   _applyEnabledState(enabled) {
     super._applyEnabledState(enabled);
     this.inputElement.disabled = !enabled;
   }
 };