[DevTools] Introduce a sidebar with a drop-down

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.Provider} provider
    * @param {!Array<string>=} promptHistory
    * @param {function(string)=} queryChangedCallback
    */
   constructor(provider, promptHistory, queryChangedCallback) {
     super(true);
     this._promptHistory = promptHistory || [];
 
     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');
+    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();
     this._prompt.initialize(() => Promise.resolve([]));
     var promptProxy = this._prompt.attach(this._promptElement);
     promptProxy.addEventListener('input', this._onInput.bind(this), false);
     promptProxy.classList.add('filtered-list-widget-prompt-element');
 
     this._bottomElementsContainer = this.contentElement.createChild('div', 'vbox');
     this._progressElement = this._bottomElementsContainer.createChild('div', 'filtered-list-widget-progress');
     this._progressBarElement = this._progressElement.createChild('div', 'filtered-list-widget-progress-bar');
 
     /** @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);
 
     this._notFoundElement = this._bottomElementsContainer.createChild('div', 'not-found-text');
     this._notFoundElement.classList.add('hidden');
 
     this.setDefaultFocusedElement(this._promptElement);
 
     this._prefix = '';
     this._provider = provider;
     this._queryChangedCallback = queryChangedCallback;
+
+    /** @type {?number} */
+    this._initialSelectedItem = null;
+    /** @type {?Element} */
+    this._hoveredListElement = null;
   }
 
   /**
    * @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;
   }
 
   /**
    * @param {string} placeholder
    */
   setPlaceholder(placeholder) {
     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();
   }
 
   /**
    * @param {string} prefix
    */
   setPrefix(prefix) {
     this._prefix = prefix;
   }
 
   /**
    * @param {?QuickOpen.FilteredListWidget.Provider} provider
    */
   setProvider(provider) {
     if (provider === this._provider)
       return;
 
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
 
     this._provider = provider;
     if (this.isShowing())
       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();
     if (this._provider) {
       this._provider.setRefreshCallback(this._itemsLoaded.bind(this, this._provider));
       this._provider.attach();
     }
     this._itemsLoaded(this._provider);
   }
 
   /**
    * @return {string}
    */
   _value() {
     return this._prompt.text().trim();
   }
 
   _cleanValue() {
     return this._value().substring(this._prefix.length);
   }
 
   /**
+   * @param {!Event} event
+   */
+  _updateHover(event) {
+    var item = this._list.itemForNode(/** @type {?Node} */ (event.target));
+    this._hover(item);
+  }
+
+  /**
    * @override
    */
   wasShown() {
     this._attachProvider();
   }
 
   /**
    * @override
    */
   willHide() {
+    this._hover(null);
     if (this._provider)
       this._provider.detach();
     this._clearTimers();
   }
 
   _clearTimers() {
     clearTimeout(this._filterTimer);
     clearTimeout(this._scoringTimer);
     clearTimeout(this._loadTimeout);
     delete this._filterTimer;
@@ skipping 69 matching lines @@
    * @param {?number} from
    * @param {?number} to
    * @param {?Element} fromElement
    * @param {?Element} toElement
    */
   selectedItemChanged(from, to, fromElement, toElement) {
     if (fromElement)
       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;
+  }
+
+  /**
    * @param {!Event} event
    */
   _onClick(event) {
     var item = this._list.itemForNode(/** @type {?Node} */ (event.target));
     if (item === null)
       return;
 
     event.consume(true);
     this._selectItem(item);
     if (this._dialog)
@@ skipping 141 matching lines @@
    * @param {!Array<number>} bestItems
    * @param {!Array<number>} overflowItems
    * @param {!Array<number>} filteredItems
    */
   _refreshList(bestItems, overflowItems, filteredItems) {
     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) {
+      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();
   }
 
   /**
    * @param {boolean} hasItems
    */
   _updateNotFoundMessage(hasItems) {
     this._list.element.classList.toggle('hidden', !hasItems);
@@ skipping 51 matching lines @@
 
   /**
    * @param {?number} itemIndex
    */
   _selectItem(itemIndex) {
     this._promptHistory.push(this._value());
     if (this._promptHistory.length > 100)
       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);
+  }
 };
 
 
 /**
  * @unrestricted
  */
 QuickOpen.FilteredListWidget.Provider = class {
   /**
    * @param {function():void} refreshCallback
    */
@@ skipping 22 matching lines @@
   /**
    * @param {number} itemIndex
    * @param {string} query
    * @return {number}
    */
   itemScoreAt(itemIndex, query) {
     return 1;
   }
 
   /**
+   * @param {?number} itemIndex
+   */
+  hoverItem(itemIndex) {
+  }
+
+  /**
    * @param {number} itemIndex
    * @param {string} query
    * @param {!Element} titleElement
    * @param {!Element} subtitleElement
    */
   renderItem(itemIndex, query, titleElement, subtitleElement) {
   }
 
   /**
    * @return {boolean}
@@ skipping 31 matching lines @@
    * @param {string} query
    * @return {string}
    */
   notFoundText(query) {
     return Common.UIString('No results found');
   }
 
   detach() {
   }
 };