[DevTools] Filtered list enhancements

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 2d598c4753b421e367a1c9689d8f0b22eb1e4a3f..39a3f3ea7b090a1cd6c6644fb9f63309918642c2 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
@@ -38,6 +38,8 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     /** @type {!UI.ListControl<number>} */
     this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
     this._itemElementsContainer = this._list.element;
+    this._itemElementsContainer.addEventListener('mousemove', event => this._updateHover(event));
+    this._itemElementsContainer.addEventListener('mouseout', event => this._updateHover(event));
     this._itemElementsContainer.classList.add('container');
     this._bottomElementsContainer.appendChild(this._itemElementsContainer);
     this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
@@ -50,6 +52,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prefix = '';
     this._provider = provider;
     this._queryChangedCallback = queryChangedCallback;
+
+    /** @type {?number} */
+    this._selectedItemIndex = null;
   }
 
   /**
@@ -163,6 +168,22 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @param {!Event} event
+   */
+  _updateHover(event) {
+    var element = event.deepElementFromPoint();
+    var listItemElement = element && element.enclosingNodeOrSelfWithClass('filtered-list-widget-item');
+    if (listItemElement && listItemElement.classList.contains('hovered'))
+      return;
+    for (var child of this._list.element.getElementsByClassName('hovered'))
+      child.classList.remove('hovered');
+    var item = listItemElement && this._list.itemForNode(listItemElement);
+    if (listItemElement)
+      listItemElement.classList.add('hovered');
+    this._hover(item);
+  }
+
+  /**
    * @override
    */
   wasShown() {
@@ -174,6 +195,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
+    this._hover(null);
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
@@ -264,6 +286,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       fromElement.classList.remove('selected');
     if (toElement)
       toElement.classList.add('selected');
+    this._hover(to);
+  }
+
+  /**
+   * @param {number} item
+   */
+  selectItem(item) {
+    if (this._list.length() > 0)
+      this._list.selectItem(item, true);
+    else
+      this._selectedItemIndex = item;
   }
 
   /**
@@ -420,13 +453,21 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @param {!Array<number>} filteredItems
    */
   _refreshList(bestItems, overflowItems, filteredItems) {
+    var preservedSelection = this._list.selectedItem();
+    if (this._selectedItemIndex !== null) {

[caseq, 2017/03/30 16:26:47]

nit: drop !== null

[eostroukhov, 2017/03/30 16:51:11]

I can't - it is zero based... But it is not necessarily sorted in ascension
order so relying on it being the top item also will not work.

+      preservedSelection = this._selectedItemIndex;
+      this._selectedItemIndex = null;
+    }
     delete this._refreshListWithCurrentResult;
     filteredItems = [].concat(bestItems, overflowItems, filteredItems);
     this._updateNotFoundMessage(!!filteredItems.length);
     var oldHeight = this._list.element.offsetHeight;
     this._list.replaceAllItems(filteredItems);
-    if (filteredItems.length)
-      this._list.selectItem(filteredItems[0]);
+    if (filteredItems.length) {
+      if (!filteredItems.includes(preservedSelection))
+        preservedSelection = filteredItems[0];
+      this._list.selectItem(preservedSelection, true);
+    }
     if (this._list.element.offsetHeight !== oldHeight)
       this._list.viewportResized();
     this._itemsFilteredForTest();
@@ -498,6 +539,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       this._promptHistory.shift();
     this._provider.selectItem(itemIndex, this._cleanValue());
   }
+
+  /**
+   * @param {?number} item
+   */
+  _hover(item) {
+    if (this._provider)
+      this._provider.hoverItem(item);
+  }
 };
 
 
@@ -540,6 +589,12 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
+   * @param {?number} itemIndex
+   */
+  hoverItem(itemIndex) {
+  }
+
+  /**
    * @param {number} itemIndex
    * @param {string} query
    * @param {!Element} titleElement