[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 86152f7fd21913b9578618009deadef49a819e01..efd4522f005f1d3df2ad04de084be7aa81256b2e 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();
@@ -37,6 +40,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', () => this._hover(null));
     this._itemElementsContainer.classList.add('container');
     this._bottomElementsContainer.appendChild(this._itemElementsContainer);
     this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
@@ -49,6 +54,11 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prefix = '';
     this._provider = provider;
     this._queryChangedCallback = queryChangedCallback;
+
+    /** @type {?number} */
+    this._initialSelectedItem = null;
+    /** @type {?Element} */
+    this._hoveredListElement = null;
   }
 
   /**
@@ -117,11 +127,20 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prompt.setPlaceholder(placeholder);
   }
 
-  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();
   }
@@ -149,6 +168,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() {
     this._list.replaceAllItems([]);
     this._list.invalidateItemHeight();
@@ -171,6 +199,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @param {!Event} event
+   */
+  _updateHover(event) {
+    var item = this._list.itemForNode(/** @type {?Node} */ (event.target));
+    this._hover(item);
+  }
+
+  /**
    * @override
    */
   wasShown() {
@@ -181,6 +217,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
+    this._hover(null);
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
@@ -270,6 +307,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       fromElement.classList.remove('selected');
     if (toElement)
       toElement.classList.add('selected');
+    this._hover(to);

[dgozman, 2017/05/03 17:32:58]

I don't think it's a good idea to mix up mouse accessibility and keyboard
navigation.

[eostroukhov, 2017/05/03 22:01:37]

In the newer version it is now called "highlight" so I think it better reflects
the intent.

+  }
+
+  /**
+   * @param {number} item
+   */
+  setInitialSelection(item) {
+    if (this._list.length() > 0)
+      this._list.selectItem(item, true);
+    else
+      this._initialSelectedItem = item;
   }
 
   /**
@@ -434,8 +482,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._initialSelectedItem !== null && filteredItems.includes(this._initialSelectedItem))
+        selection = this._initialSelectedItem;
+      this._initialSelectedItem = null;
+      this._list.selectItem(selection, true);
+    }
     if (this._list.element.offsetHeight !== oldHeight)
       this._list.viewportResized();
     this._itemsFilteredForTest();
@@ -507,6 +560,22 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       this._promptHistory.shift();
     this._provider.selectItem(itemIndex, this._cleanValue());
   }
+
+  /**
+   * @param {?number} item
+   */
+  _hover(item) {
+    var element = item === null ? null : this._list.elementForItem(item);
+    if (element === this._hoveredListElement)
+      return;
+    if (this._hoveredListElement)
+      this._hoveredListElement.classList.remove('hovered');

[dgozman, 2017/05/03 17:32:58]

Let's do this with :hover css class, and remove ListControl.elementForItem.

[eostroukhov, 2017/05/03 22:01:38]

I was not sure if it was ok to use pseudoclasses :) I switched to pseudoclass
and the code became radically simpler...

+    if (element)
+      element.classList.add('hovered');
+    this._hoveredListElement = element;
+    if (this._provider)
+      this._provider.hoverItem(item);
+  }
 };
 
 
@@ -549,6 +618,12 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
+   * @param {?number} itemIndex
+   */
+  hoverItem(itemIndex) {
+  }
+
+  /**
    * @param {number} itemIndex
    * @param {string} query
    * @param {!Element} titleElement