[DevTools] Introduce a sidebar with a drop-down

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 a856c09d17fb1bfb1235a4d50d48cfb6ac070076..dbd4606dc527cbae577b3d6483545c90d9de296b 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
@@ -21,7 +21,10 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     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');
+    var promptContainer = this.contentElement.createChild('div', 'filtered-list-widget-input-container');
+    this._iconContainer = promptContainer.createChild('div');
+    var container = promptContainer.createChild('div', 'filtered-list-widget-input');
+    this._promptElement = container.createChild('div');
     this._promptElement.setAttribute('spellcheck', 'false');
     this._promptElement.setAttribute('contenteditable', 'plaintext-only');
     this._prompt = new UI.TextPrompt();
@@ -38,6 +41,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 +55,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prefix = '';
     this._provider = provider;
     this._queryChangedCallback = queryChangedCallback;
+
+    /** @type {?number} */
+    this._selectedItemIndex = null;
   }
 
   /**
@@ -111,11 +119,20 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     return false;
   }
 
-  showAsDialog() {
+  /**
+   * @param {!AnchorBox=} anchorBox
+   * @param {!UI.GlassPane.AnchorBehavior=} anchorBehavior
+   */
+  showAsDialog(anchorBox, anchorBehavior) {
     this._dialog = new UI.Dialog();
+    if (anchorBox)
+      this._dialog.setContentAnchorBox(anchorBox);
+    else
+      this._dialog.setContentPosition(null, 22);
     this._dialog.setMaxContentSize(new UI.Size(504, 340));
     this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
-    this._dialog.setContentPosition(null, 22);
+    if (anchorBehavior)
+      this._dialog.setAnchorBehavior(anchorBehavior);
     this.show(this._dialog.contentElement);
     this._dialog.show();
   }
@@ -143,6 +160,15 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       this._attachProvider();
   }
 
+  /**
+   * @param {?string} icon
+   */
+  setInputIcon(icon) {
+    this._iconContainer.removeChildren();
+    if (icon)
+      this._iconContainer.appendChild(UI.Icon.create(icon, 'filtered-list-input-icon'));
+  }
+
   _attachProvider() {
     if (this._provider) {
       this._provider.setRefreshCallback(this._itemsLoaded.bind(this, this._provider));
@@ -163,6 +189,22 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @param {!Event} event
+   */
+  _updateHover(event) {
+    var element = event.deepElementFromPoint();

[dgozman, 2017/04/05 20:52:55]

Implement this similarly to click?

var item = this._list.itemForNode(/** @type {?Node} */ (event.target));
...

[eostroukhov, 2017/05/03 00:33:46]

Done.

+    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'))

[dgozman, 2017/04/05 20:52:55]

Introduce |this._hoverElement| and remove the class in this._hover.

[eostroukhov, 2017/05/03 00:33:46]

Done.

+      child.classList.remove('hovered');
+    var item = listItemElement && this._list.itemForNode(listItemElement);
+    if (listItemElement)
+      listItemElement.classList.add('hovered');

[dgozman, 2017/04/05 20:52:56]

This should go to _hover.

[eostroukhov, 2017/05/03 00:33:46]

Done.

+    this._hover(item);
+  }
+
+  /**
    * @override
    */
   wasShown() {
@@ -174,6 +216,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
+    this._hover(null);
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
@@ -264,6 +307,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       fromElement.classList.remove('selected');
     if (toElement)
       toElement.classList.add('selected');
+    this._hover(to);

[dgozman, 2017/04/05 20:52:55]

Why this?

[eostroukhov, 2017/05/03 00:33:46]

For keyboard navigation. It is extremely confusing if highlighted frame is
different from the one you are stepping onto with arrow keys.

+  }
+
+  /**
+   * @param {number} item
+   */
+  selectItem(item) {

[dgozman, 2017/04/05 20:52:55]

setInitialSelection

[eostroukhov, 2017/05/03 00:33:46]

Done.

+    if (this._list.length() > 0)
+      this._list.selectItem(item, true);
+    else
+      this._selectedItemIndex = item;

[dgozman, 2017/04/05 20:52:55]

_initialSelectedItem

[eostroukhov, 2017/05/03 00:33:46]

Done.

   }
 
   /**
@@ -425,8 +479,13 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     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) {
+      var selection = filteredItems[0];
+      if (this._selectedItemIndex !== null && filteredItems.includes(this._selectedItemIndex))
+        selection = this._selectedItemIndex;
+      this._selectedItemIndex = null;
+      this._list.selectItem(selection, true);
+    }
     if (this._list.element.offsetHeight !== oldHeight)
       this._list.viewportResized();
     this._itemsFilteredForTest();
@@ -498,6 +557,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 +607,12 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
+   * @param {?number} itemIndex
+   */
+  hoverItem(itemIndex) {
+  }
+
+  /**
    * @param {number} itemIndex
    * @param {string} query
    * @param {!Element} titleElement