[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..8e819b5d5e8cd48e89b71ace6387947fd5ce4135 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._highlightItem(null));
     this._itemElementsContainer.classList.add('container');
     this._bottomElementsContainer.appendChild(this._itemElementsContainer);
     this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
@@ -49,6 +54,9 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prefix = '';
     this._provider = provider;
     this._queryChangedCallback = queryChangedCallback;
+
+    /** @type {?number} */
+    this._initialSelectedItem = null;
   }
 
   /**
@@ -117,11 +125,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 +166,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 +197,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @param {!Event} event
+   */
+  _updateHover(event) {
+    var item = this._list.itemForNode(/** @type {?Node} */ (event.target));
+    this._highlightItem(item);
+  }
+
+  /**
    * @override
    */
   wasShown() {
@@ -181,6 +215,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
+    this._highlightItem(null);
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
@@ -270,6 +305,17 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       fromElement.classList.remove('selected');
     if (toElement)
       toElement.classList.add('selected');
+    this._highlightItem(to);
+  }
+
+  /**
+   * @param {number} item
+   */
+  setInitialSelection(item) {
+    if (this._list.length() > 0)
+      this._list.selectItem(item, true);
+    else
+      this._initialSelectedItem = item;
   }
 
   /**
@@ -434,8 +480,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 +558,14 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
       this._promptHistory.shift();
     this._provider.selectItem(itemIndex, this._cleanValue());
   }
+
+  /**
+   * @param {?number} item
+   */
+  _highlightItem(item) {
+    if (this._provider)
+      this._provider.highlightItem(item);
+  }
 };
 
 
@@ -549,6 +608,12 @@ QuickOpen.FilteredListWidget.Provider = class {
   }
 
   /**
+   * @param {?number} itemIndex
+   */
+  highlightItem(itemIndex) {
+  }
+
+  /**
    * @param {number} itemIndex
    * @param {string} query
    * @param {!Element} titleElement