DevTools: ToolbarInput should use TextPrompt

This CL replaces the <input> used in ToolbarInput with a TextPrompt. It
is in preparation to allow all ToolbarInputs to use autocomplete
suggestions.

Bug: 685283
Change-Id: I9df985d5b414ceb37079610a77143ca53346975c
Reviewed-on: https://chromium-review.googlesource.com/662400Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#504148}

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

@@ -1019,8 +1019,8 @@ Console.ConsoleViewFilter = class {
     this._filterByExecutionContextSetting.addChangeListener(this._filterChanged);
     this._filterByConsoleAPISetting.addChangeListener(this._filterChanged);
 
-    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 =
+        new UI.ToolbarInput(Common.UIString('Filter'), 0.2, 1, 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));
     /** @type {!Array<!TextUtils.FilterParser.ParsedFilter>} */

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

@@ -202,6 +202,16 @@ UI.TextPrompt = class extends Common.Object {
       this._element.removeAttribute('data-placeholder');
   }
 
+  /**
+   * @param {boolean} enabled
+   */
+  setEnabled(enabled) {
+    if (enabled)
+      this._element.setAttribute('contenteditable', 'plaintext-only');
+    else
+      this._element.removeAttribute('contenteditable');
+  }
+
   _removeFromElement() {
     this.clearAutocomplete();
     this._element.removeEventListener('keydown', this._boundOnKeyDown, false);

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

@@ -575,25 +575,33 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @param {string} placeholder
    * @param {number=} growFactor
    * @param {number=} shrinkFactor
+   * @param {string=} tooltip
    */
-  constructor(placeholder, growFactor, shrinkFactor) {
+  constructor(placeholder, growFactor, shrinkFactor, tooltip) {
     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);
+    var internalPromptElement = this.element.createChild('div', 'toolbar-input-prompt');
+    internalPromptElement.addEventListener('focus', () => this.element.classList.add('focused'));
+    internalPromptElement.addEventListener('blur', () => this.element.classList.remove('focused'));
+
+    this._prompt = new UI.TextPrompt();
+    this._proxyElement = this._prompt.attach(internalPromptElement);
+    this._proxyElement.classList.add('toolbar-prompt-proxy');
+    this._proxyElement.addEventListener('keydown', event => this._onKeydownCallback(event));
+    this._prompt.initialize(() => Promise.resolve([]));
+    if (tooltip)
+      this._prompt.setTitle(tooltip);
+    this._prompt.setPlaceholder(placeholder);
+    this._prompt.addEventListener(UI.TextPrompt.Events.TextChanged, this._onChangeCallback.bind(this));
+
     if (growFactor)
       this.element.style.flexGrow = growFactor;
     if (shrinkFactor)
       this.element.style.flexShrink = shrinkFactor;
-    if (placeholder)
-      this.input.setAttribute('placeholder', placeholder);
 
     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();
   }
@@ -603,7 +611,7 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @param {boolean} enabled
    */
   _applyEnabledState(enabled) {
-    this.input.disabled = !enabled;
+    this._prompt.setEnabled(enabled);
   }
 
   /**
@@ -618,7 +626,7 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @param {boolean} notify
    */
   _internalSetValue(value, notify) {
-    this.input.value = value;
+    this._prompt.setText(value);
     if (notify)
       this._onChangeCallback();
     this._updateEmptyStyles();
@@ -628,14 +636,16 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
    * @return {string}
    */
   value() {
-    return this.input.value;
+    return this._prompt.text();
   }
 
   /**
    * @param {!Event} event
    */
   _onKeydownCallback(event) {
-    if (!isEscKey(event) || !this.input.value)
+    if (isEnterKey(event))
+      event.consume(true);
+    if (!isEscKey(event) || !this._prompt.text())
       return;
     this._internalSetValue('', true);
     event.consume(true);
@@ -643,11 +653,11 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
 
   _onChangeCallback() {
     this._updateEmptyStyles();
-    this.dispatchEventToListeners(UI.ToolbarInput.Event.TextChanged, this.input.value);
+    this.dispatchEventToListeners(UI.ToolbarInput.Event.TextChanged, this._prompt.text());
   }
 
   _updateEmptyStyles() {
-    this.element.classList.toggle('toolbar-input-empty', !this.input.value);
+    this.element.classList.toggle('toolbar-input-empty', !this._prompt.text());
   }
 };
 

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

@@ -223,8 +223,8 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
 
 .toolbar-input {
     width: 120px;
-    height: 20px;
-    padding: 3px;
+    height: 19px;
+    padding: 4px 3px 3px 3px;
     margin: 1px 3px;
     background-color: white;
     border: solid 1px #d8d8d8;
@@ -257,6 +257,17 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
     display: none;
 }
 
+.toolbar-prompt-proxy {
+    flex: 1;
+}
+
+.toolbar-input-prompt {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: auto;
+}
+
 /* Separator */
 
 .toolbar-divider {