DevTools: Show not found message in FilteredListWidgets

This also lets the FilteredListWidget be smaller if it has few results.

BUG=662081

Review-Url: https://codereview.chromium.org/2599623002
Cr-Commit-Position: refs/heads/master@{#443170}

third_party/WebKit/Source/devtools/front_end/quick_open/CommandMenu.js

@@ -242,6 +242,14 @@ QuickOpen.CommandMenuDelegate = class extends QuickOpen.FilteredListWidget.Deleg
   renderMonospace() {
     return false;
   }
+
+  /**
+   * @override
+   * @return {string}
+   */
+  notFoundText() {
+    return Common.UIString('No commands found');
+  }
 };
 
 QuickOpen.CommandMenuDelegate.MaterialPaletteColors = [

third_party/WebKit/Source/devtools/front_end/quick_open/FilteredListWidget.js

@@ -18,8 +18,6 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
     this.contentElement.classList.add('filtered-list-widget');
     this.contentElement.addEventListener('keydown', this._onKeyDown.bind(this), true);
-    if (delegate.renderMonospace())
-      this.contentElement.classList.add('monospace');
     this.registerRequiredCSS('quick_open/filteredListWidget.css');
 
     this._promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
@@ -32,7 +30,8 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     promptProxy.addEventListener('input', this._onInput.bind(this), false);
     promptProxy.classList.add('filtered-list-widget-prompt-element');
 
-    this._progressElement = this.contentElement.createChild('div', 'filtered-list-widget-progress');
+    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>} */
@@ -40,7 +39,15 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._itemElementsContainer = this._list.element;
     this._itemElementsContainer.classList.add('container');
     this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
-    this.contentElement.appendChild(this._itemElementsContainer);
+    this._bottomElementsContainer.appendChild(this._itemElementsContainer);
+
+    if (delegate.renderMonospace()) {
+      this._list.element.classList.add('monospace');
+      this._promptElement.classList.add('monospace');
+    }
+
+    this._notFoundElement = this._bottomElementsContainer.createChild('div', 'not-found-text');
+    this._notFoundElement.classList.add('hidden');
 
     this.setDefaultFocusedElement(this._promptElement);
 
@@ -111,10 +118,11 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
   showAsDialog() {
     this._dialog = new UI.Dialog();
-    this._dialog.setMaxSize(new Size(504, 340));
+    this._dialog.setWrapsContent(true);
     this._dialog.setPosition(undefined, 22);
     this.show(this._dialog.element);
     this._dialog.show();
+    this._updateShowMatchingItems();
   }
 
   /**
@@ -178,6 +186,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     var subtitleElement = itemElement.createChild('div', 'filtered-list-widget-subtitle');
     subtitleElement.textContent = '\u200B';
     this._delegate.renderItem(item, this._value(), titleElement, subtitleElement);
+
     return itemElement;
   }
 
@@ -220,6 +229,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._prompt.setText(query);
     this._prompt.autoCompleteSoon(true);
     this._scheduleFilter();
+    this._updateShowMatchingItems();
   }
 
   _tabKeyPressed() {
@@ -330,12 +340,30 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
   _refreshList(bestItems, overflowItems, filteredItems) {
     delete this._refreshListWithCurrentResult;
     filteredItems = [].concat(bestItems, overflowItems, filteredItems);
+    this._updateNotFoundMessage(!!filteredItems.length);
     this._list.replaceAllItems(filteredItems);
     if (filteredItems.length)
       this._list.selectItemAtIndex(0, true);
+
+    var beforeDialogHeight = this._dialog.element.style.height;
+    this._dialog.contentResized();
+    // If the dialog height changed, the viewport might need to be resized.
+    // We use the CSS on the dialog to avoid measuring it directly.
+    if (beforeDialogHeight !== this._dialog.element.style.height)
+      this._list.viewportResized();
     this._itemsFilteredForTest();
   }
 
+  /**
+   * @param {boolean} hasItems
+   */
+  _updateNotFoundMessage(hasItems) {
+    this._list.element.classList.toggle('hidden', !hasItems);
+    this._notFoundElement.classList.toggle('hidden', hasItems);
+    if (!hasItems)
+      this._notFoundElement.textContent = this._delegate.notFoundText();
+  }
+
   /**
    * @return {boolean}
    */
@@ -350,7 +378,7 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
 
   _updateShowMatchingItems() {
     var shouldShowMatchingItems = this._shouldShowMatchingItems();
-    this._itemElementsContainer.classList.toggle('hidden', !shouldShowMatchingItems);
+    this._bottomElementsContainer.classList.toggle('hidden', !shouldShowMatchingItems);
   }
 
   /**
@@ -510,6 +538,13 @@ QuickOpen.FilteredListWidget.Delegate = class {
     return query;
   }
 
+  /**
+   * @return {string}
+   */
+  notFoundText() {
+    return Common.UIString('No results found');
+  }
+
   dispose() {
   }
 };

third_party/WebKit/Source/devtools/front_end/quick_open/filteredListWidget.css

@@ -8,6 +8,8 @@
     display: flex;
     flex-direction: column;
     flex: auto;
+    width: 504px;
+    max-height: 340px;
 }
 
 .filtered-list-widget-prompt-element {
@@ -109,3 +111,12 @@
 .filtered-list-widget-item .tag .highlight {
     color: white;
 }
+
+.not-found-text {
+    height: 34px;
+    line-height: 34px;
+    padding-left: 4px;
+    font-style: italic;
+    color: #888;
+    background: #fbfbfb;
+}

third_party/WebKit/Source/devtools/front_end/sources/FilteredUISourceCodeListDelegate.js

@@ -203,6 +203,14 @@ Sources.FilteredUISourceCodeListDelegate = class extends QuickOpen.FilteredListW
     this.refresh();
   }
 
+  /**
+   * @override
+   * @return {string}
+   */
+  notFoundText() {
+    return Common.UIString('No files found');
+  }
+
   /**
    * @override
    */