DevTools: Create extensible QuickOpen control

third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js

Index: third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js b/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
index a1ec8e223a9733510e1e0e9ffa691ba629b0a25c..2e7ccb2a5916bd294d00191130d043061f2a1bd0 100644
--- a/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js
@@ -11,8 +11,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   /**
    * @param {?QuickOpen.FilteredListWidget.Provider} provider
    * @param {!Array<string>=} promptHistory
+   * @param {function(string)=} queryChangedCallback
    */
-  constructor(provider, promptHistory) {
+  constructor(provider, promptHistory, queryChangedCallback) {
     super(true);
     this._promptHistory = promptHistory || [];
 
@@ -45,7 +46,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
     this.setDefaultFocusedElement(this._promptElement);
 
+    this._prefix = '';
     this._provider = provider;
+    this._queryChangedCallback = queryChangedCallback;
   }
 
   /**
@@ -117,6 +120,13 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @param {string} prefix
+   */
+  setPrefix(prefix) {
+    this._prefix = prefix;
+  }
+
+  /**
    * @param {?QuickOpen.FilteredListWidget.Provider} provider
    */
   setProvider(provider) {
@@ -138,7 +148,6 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       this._provider.attach();
     }
     this._itemsLoaded(this._provider);
-    this._updateShowMatchingItems();
   }
 
   /**
@@ -148,6 +157,10 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     return this._prompt.text().trim();
   }
 
+  _cleanValue() {
+    return this._value().substring(this._prefix.length);
+  }
+
   /**
    * @override
    */
@@ -180,14 +193,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    */
   _onEnter(event) {
     event.preventDefault();
-    if (!this._provider || !this._provider.itemCount())
+    if (!this._provider)
       return;
-    var selectedIndexInProvider = this._shouldShowMatchingItems() ? this._list.selectedItem() : null;
+    var selectedIndexInProvider = this._provider.itemCount() ? this._list.selectedItem() : null;
 
     // Detach dialog before allowing provider to override focus.
     if (this._dialog)
       this._dialog.hide();
-    this._selectItemWithQuery(selectedIndexInProvider, this._value());
+    this._selectItem(selectedIndexInProvider);
   }
 
   /**
@@ -215,13 +228,13 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     var titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
     var subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
     subtitleElement.textContent = '\u200B';
-    this._provider.renderItem(item, this._value(), titleElement, subtitleElement);
+    this._provider.renderItem(item, this._cleanValue(), titleElement, subtitleElement);
     itemElement.addEventListener('click', event => {
       event.consume(true);
       // Detach dialog before allowing provider to override focus.
       if (this._dialog)
         this._dialog.hide();
-      this._selectItemWithQuery(item, this._value());
+      this._selectItem(item);
     }, false);
     return itemElement;
   }
@@ -264,9 +277,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    */
   setQuery(query) {
     this._prompt.setText(query);
+    this._queryChanged();
     this._prompt.autoCompleteSoon(true);
     this._scheduleFilter();
-    this._updateShowMatchingItems();
   }
 
   _tabKeyPressed() {
@@ -300,15 +313,18 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     }
 
     if (!this._provider) {
+      this._bottomElementsContainer.classList.toggle('hidden', true);
       this._itemsFilteredForTest();
       return;
     }
 
+    this._bottomElementsContainer.classList.toggle('hidden', false);
+
     this._progressBarElement.style.transform = 'scaleX(0)';
     this._progressBarElement.classList.remove('filtered-widget-progress-fade');
     this._progressBarElement.classList.remove('hidden');
 
-    var query = this._provider.rewriteQuery(this._value());
+    var query = this._provider.rewriteQuery(this._cleanValue());
     this._query = query;
 
     var filterRegex = query ? QuickOpen.FilteredListWidget.filterRegex(query) : null;
@@ -414,24 +430,19 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._list.element.classList.toggle('hidden', !hasItems);
     this._notFoundElement.classList.toggle('hidden', hasItems);
     if (!hasItems)
-      this._notFoundElement.textContent = this._provider.notFoundText();
-  }
-
-  /**
-   * @return {boolean}
-   */
-  _shouldShowMatchingItems() {
-    return !!this._provider && this._provider.shouldShowMatchingItems(this._value());
+      this._notFoundElement.textContent = this._provider.notFoundText(this._cleanValue());
   }
 
   _onInput() {
-    this._updateShowMatchingItems();
+    this._queryChanged();
     this._scheduleFilter();
   }
 
-  _updateShowMatchingItems() {
-    var shouldShowMatchingItems = this._shouldShowMatchingItems();
-    this._bottomElementsContainer.classList.toggle('hidden', !shouldShowMatchingItems);
+  _queryChanged() {
+    if (this._queryChangedCallback)
+      this._queryChangedCallback(this._value());
+    if (this._provider)
+      this._provider.queryChanged(this._cleanValue());
   }
 
   /**
@@ -471,13 +482,12 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
   /**
    * @param {?number} itemIndex
-   * @param {string} promptValue
    */
-  _selectItemWithQuery(itemIndex, promptValue) {
-    this._promptHistory.push(promptValue);
+  _selectItem(itemIndex) {
+    this._promptHistory.push(this._value());
     if (this._promptHistory.length > 100)
       this._promptHistory.shift();
-    this._provider.selectItem(itemIndex, promptValue);
+    this._provider.selectItem(itemIndex, this._cleanValue());
   }
 };
 
@@ -497,14 +507,6 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
-   * @param {string} query
-   * @return {boolean}
-   */
-  shouldShowMatchingItems(query) {
-    return true;
-  }
-
-  /**
    * @return {number}
    */
   itemCount() {
@@ -564,9 +566,16 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
+   * @param {string} query
+   */
+  queryChanged(query) {
+  }
+
+  /**
+   * @param {string} query
    * @return {string}
    */
-  notFoundText() {
+  notFoundText(query) {
     return Common.UIString('No results found');
   }