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 0a2eb140680112c0c8c88624a7e1403629a6c4a9..40d15b21fd96d9885703621c8b859c9a9761eb3e 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
@@ -9,13 +9,12 @@
  */
 QuickOpen.FilteredListWidget = class extends UI.VBox {
   /**
-   * @param {!QuickOpen.FilteredListWidget.Delegate} delegate
+   * @param {?QuickOpen.FilteredListWidget.Delegate} delegate
    * @param {!Array<string>=} promptHistory
    */
   constructor(delegate, promptHistory) {
     super(true);
     this._promptHistory = promptHistory || [];
-    this._renderAsTwoRows = delegate.renderAsTwoRows();
 
     this.contentElement.classList.add('filtered-list-widget');
     this.contentElement.addEventListener('keydown', this._onKeyDown.bind(this), true);
@@ -46,10 +45,10 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
     this.setDefaultFocusedElement(this._promptElement);
 
-    this._delegate = delegate;
-    this._delegate.setRefreshCallback(this._itemsLoaded.bind(this));
+    this._prefix = '';
+    this._delegate = null;

[pfeldman, 2017/03/06 18:37:18]

Could you extract swappable delegate-related change into a separate CL? I'll
review it there. Also, swappable delegates are typically called "models" or
"providers".

[einbinder, 2017/03/08 22:39:56]

Done.

+    this.setDelegate(delegate);
     this._itemsLoaded();
-    this._updateShowMatchingItems();
   }
 
   /**
@@ -118,7 +117,27 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._dialog.setContentPosition(null, 22);
     this.show(this._dialog.contentElement);
     this._dialog.show();
-    this._updateShowMatchingItems();
+  }
+
+  /**
+   * @param {?QuickOpen.FilteredListWidget.Delegate} delegate
+   */
+  setDelegate(delegate) {
+    if (this._delegate === delegate)
+      return;
+    this._delegate = delegate;
+    if (!delegate)
+      return;
+    this._delegate.setRefreshCallback(this._itemsLoaded.bind(this));
+    this._delegate.queryChanged(this._cleanValue());
+    this._itemsLoaded();
+  }
+
+  /**
+   * @param {string} prefix
+   */
+  setPrefix(prefix) {
+    this._prefix = prefix;
   }
 
   /**
@@ -128,6 +147,10 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     return this._prompt.text().trim();
   }
 
+  _cleanValue() {
+    return this._value().substring(this._prefix.length);
+  }
+
   /**
    * @override
    */
@@ -139,7 +162,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
-    this._delegate.dispose();
+    this.emit(new QuickOpen.FilteredListWidget.DisposeEvent());
+    if (this._delegate)
+      this._delegate.dispose();
     if (this._filterTimer)
       clearTimeout(this._filterTimer);
   }
@@ -149,14 +174,12 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    */
   _onEnter(event) {
     event.preventDefault();
-    if (!this._delegate.itemCount())
-      return;
-    var selectedIndexInDelegate = this._shouldShowMatchingItems() ? this._list.selectedItem() : null;
+    var selectedIndexInDelegate = this._delegate.itemCount() ? this._list.selectedItem() : null;
 
     // Detach dialog before allowing delegate to override focus.
     if (this._dialog)
       this._dialog.hide();
-    this._selectItemWithQuery(selectedIndexInDelegate, this._value());
+    this._selectItem(selectedIndexInDelegate);
   }
 
   _itemsLoaded() {
@@ -177,17 +200,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    */
   createElementForItem(item) {
     var itemElement = createElement('div');
-    itemElement.className = 'filtered-list-widget-item ' + (this._renderAsTwoRows ? 'two-rows' : 'one-row');
+    itemElement.className = 'filtered-list-widget-item ' + (this._delegate.renderAsTwoRows() ? 'two-rows' : 'one-row');
     var titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
     var subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
     subtitleElement.textContent = '\u200B';
-    this._delegate.renderItem(item, this._value(), titleElement, subtitleElement);
+    this._delegate.renderItem(item, this._cleanValue(), titleElement, subtitleElement);
     itemElement.addEventListener('click', event => {
       event.consume(true);
       // Detach dialog before allowing delegate to override focus.
       if (this._dialog)
         this._dialog.hide();
-      this._selectItemWithQuery(item, this._value());
+      this._selectItem(item);
     }, false);
     return itemElement;
   }
@@ -230,9 +253,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    */
   setQuery(query) {
     this._prompt.setText(query);
+    this._queryChanged();
     this._prompt.autoCompleteSoon(true);
     this._scheduleFilter();
-    this._updateShowMatchingItems();
   }
 
   _tabKeyPressed() {
@@ -269,7 +292,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._progressBarElement.classList.remove('filtered-widget-progress-fade');
     this._progressBarElement.classList.remove('hidden');
 
-    var query = this._delegate.rewriteQuery(this._value());
+    var query = this._delegate.rewriteQuery(this._cleanValue());
     this._query = query;
 
     var filterRegex = query ? QuickOpen.FilteredListWidget.filterRegex(query) : null;
@@ -375,24 +398,17 @@ 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._delegate.notFoundText();
-  }
-
-  /**
-   * @return {boolean}
-   */
-  _shouldShowMatchingItems() {
-    return this._delegate.shouldShowMatchingItems(this._value());
+      this._notFoundElement.textContent = this._delegate.notFoundText(this._cleanValue());
   }
 
   _onInput() {
-    this._updateShowMatchingItems();
+    this._queryChanged();
     this._scheduleFilter();
   }
 
-  _updateShowMatchingItems() {
-    var shouldShowMatchingItems = this._shouldShowMatchingItems();
-    this._bottomElementsContainer.classList.toggle('hidden', !shouldShowMatchingItems);
+  _queryChanged() {
+    this.emit(new QuickOpen.FilteredListWidget.QueryChangedEvent(this._value()));
+    this._delegate.queryChanged(this._cleanValue());
   }
 
   /**
@@ -432,13 +448,12 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
   /**
    * @param {?number} itemIndex
-   * @param {string} promptValue
    */
-  _selectItemWithQuery(itemIndex, promptValue) {
-    this._promptHistory.push(promptValue);
+  _selectItem(itemIndex) {

[einbinder, 2017/03/03 23:07:14]

This was always called with promptValue = this._value()

+    this._promptHistory.push(this._value());
     if (this._promptHistory.length > 100)
       this._promptHistory.shift();
-    this._delegate.selectItem(itemIndex, promptValue);
+    this._delegate.selectItem(itemIndex, this._cleanValue());
   }
 };
 
@@ -455,14 +470,6 @@ QuickOpen.FilteredListWidget.Delegate = class {
   }
 
   /**
-   * @param {string} query
-   * @return {boolean}
-   */
-  shouldShowMatchingItems(query) {
-    return true;
-  }
-
-  /**
    * @return {number}
    */
   itemCount() {
@@ -522,12 +529,32 @@ QuickOpen.FilteredListWidget.Delegate = class {
   }
 
   /**
+   * @param {string} query
+   */
+  queryChanged(query) {
+  }
+
+  /**
+   * @param {string} query
    * @return {string}
    */
-  notFoundText() {
+  notFoundText(query) {
     return Common.UIString('No results found');
   }
 
   dispose() {
   }
 };
+
+/** @implements {Common.Emittable} */
+QuickOpen.FilteredListWidget.QueryChangedEvent = class {
+  /**
+   * @param {string} query
+   */
+  constructor(query) {
+    this.query = query;
+  }
+};
+
+/** @implements {Common.Emittable} */
+QuickOpen.FilteredListWidget.DisposeEvent = class {};