DevTools: Create extensible QuickOpen control

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

 /*
  * Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 /**
  * @unrestricted
  * @implements {UI.ListDelegate}
  */
 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);
     this.registerRequiredCSS('quick_open/filteredListWidget.css');
 
     this._promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
     this._promptElement.setAttribute('spellcheck', 'false');
     this._promptElement.setAttribute('contenteditable', 'plaintext-only');
     this._prompt = new UI.TextPrompt();
     this._prompt.initialize(() => Promise.resolve([]));
@@ skipping 10 matching lines @@
     this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
     this._itemElementsContainer = this._list.element;
     this._itemElementsContainer.classList.add('container');
     this._bottomElementsContainer.appendChild(this._itemElementsContainer);
 
     this._notFoundElement = this._bottomElementsContainer.createChild('div', 'not-found-text');
     this._notFoundElement.classList.add('hidden');
 
     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();
   }
 
   /**
    * @param {string} query
    * @return {!RegExp}
    */
   static filterRegex(query) {
     const toEscape = String.regexSpecialCharacters();
     var regexString = '';
     for (var i = 0; i < query.length; ++i) {
@@ skipping 48 matching lines @@
     return false;
   }
 
   showAsDialog() {
     this._dialog = new UI.Dialog();
     this._dialog.setMaxContentSize(new UI.Size(504, 340));
     this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetMaxHeight);
     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;
+  }
+
+  /**
    * @return {string}
    */
   _value() {
     return this._prompt.text().trim();
   }
 
+  _cleanValue() {
+    return this._value().substring(this._prefix.length);
+  }
+
   /**
    * @override
    */
   wasShown() {
     this._list.invalidateItemHeight();
   }
 
   /**
    * @override
    */
   willHide() {
-    this._delegate.dispose();
+    this.emit(new QuickOpen.FilteredListWidget.DisposeEvent());
+    if (this._delegate)
+      this._delegate.dispose();
     if (this._filterTimer)
       clearTimeout(this._filterTimer);
   }
 
   /**
    * @param {!Event} event
    */
   _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() {
     if (this._loadTimeout)
       return;
     this._loadTimeout = setTimeout(this._updateAfterItemsLoaded.bind(this), 0);
   }
 
   _updateAfterItemsLoaded() {
     delete this._loadTimeout;
     this._filterItems();
   }
 
   /**
    * @override
    * @param {number} item
    * @return {!Element}
    */
   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;
   }
 
   /**
    * @override
    * @param {number} item
    * @return {number}
    */
   heightForItem(item) {
@@ skipping 22 matching lines @@
       fromElement.classList.remove('selected');
     if (toElement)
       toElement.classList.add('selected');
   }
 
   /**
    * @param {string} query
    */
   setQuery(query) {
     this._prompt.setText(query);
+    this._queryChanged();
     this._prompt.autoCompleteSoon(true);
     this._scheduleFilter();
-    this._updateShowMatchingItems();
   }
 
   _tabKeyPressed() {
     var userEnteredText = this._prompt.text();
     var completion;
     for (var i = this._promptHistory.length - 1; i >= 0; i--) {
       if (this._promptHistory[i] !== userEnteredText && this._promptHistory[i].startsWith(userEnteredText)) {
         completion = this._promptHistory[i];
         break;
       }
@@ skipping 16 matching lines @@
       delete this._scoringTimer;
 
       if (this._refreshListWithCurrentResult)
         this._refreshListWithCurrentResult();
     }
 
     this._progressBarElement.style.transform = 'scaleX(0)';
     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;
 
     var filteredItems = [];
 
     var bestScores = [];
     var bestItems = [];
     var bestItemsToCollect = 100;
     var minBestScore = 0;
@@ skipping 85 matching lines @@
     this._itemsFilteredForTest();
   }
 
   /**
    * @param {boolean} hasItems
    */
   _updateNotFoundMessage(hasItems) {
     this._list.element.classList.toggle('hidden', !hasItems);
     this._notFoundElement.classList.toggle('hidden', hasItems);
     if (!hasItems)
-      this._notFoundElement.textContent = this._delegate.notFoundText();
+      this._notFoundElement.textContent = this._delegate.notFoundText(this._cleanValue());
+  }
+
+  _onInput() {
+    this._queryChanged();
+    this._scheduleFilter();
+  }
+
+  _queryChanged() {
+    this.emit(new QuickOpen.FilteredListWidget.QueryChangedEvent(this._value()));
+    this._delegate.queryChanged(this._cleanValue());
   }
 
   /**
-   * @return {boolean}
-   */
-  _shouldShowMatchingItems() {
-    return this._delegate.shouldShowMatchingItems(this._value());
-  }
-
-  _onInput() {
-    this._updateShowMatchingItems();
-    this._scheduleFilter();
-  }
-
-  _updateShowMatchingItems() {
-    var shouldShowMatchingItems = this._shouldShowMatchingItems();
-    this._bottomElementsContainer.classList.toggle('hidden', !shouldShowMatchingItems);
-  }
-
-  /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
     var handled = false;
     switch (event.key) {
       case 'Enter':
         this._onEnter(event);
         return;
       case 'Tab':
         this._tabKeyPressed();
@@ skipping 16 matching lines @@
   }
 
   _scheduleFilter() {
     if (this._filterTimer)
       return;
     this._filterTimer = setTimeout(this._filterItems.bind(this), 0);
   }
 
   /**
    * @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());
   }
 };
 
 
 /**
  * @unrestricted
  */
 QuickOpen.FilteredListWidget.Delegate = class {
   /**
    * @param {function():void} refreshCallback
    */
   setRefreshCallback(refreshCallback) {
     this._refreshCallback = refreshCallback;
   }
 
   /**
-   * @param {string} query
-   * @return {boolean}
-   */
-  shouldShowMatchingItems(query) {
-    return true;
-  }
-
-  /**
    * @return {number}
    */
   itemCount() {
     return 0;
   }
 
   /**
    * @param {number} itemIndex
    * @return {string}
    */
@@ skipping 39 matching lines @@
 
   /**
    * @param {string} query
    * @return {string}
    */
   rewriteQuery(query) {
     return query;
   }
 
   /**
+   * @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 {};