DevTools: Show a list of availble QuickOpen providers

This adds a new QuickOpenProvider '?' that can be be used to jump to
another provider or search for help.

BUG=662081

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

third_party/WebKit/Source/devtools/BUILD.gn

@@ -408,6 +408,7 @@ all_devtools_files = [
   "front_end/quick_open/CommandMenu.js",
   "front_end/quick_open/filteredListWidget.css",
   "front_end/quick_open/FilteredListWidget.js",
+  "front_end/quick_open/HelpQuickOpen.js",
   "front_end/quick_open/QuickOpen.js",
   "front_end/quick_open/module.json",
   "front_end/resources/ApplicationCacheModel.js",

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

@@ -26,7 +26,6 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._promptElement.setAttribute('contenteditable', 'plaintext-only');
     this._prompt = new UI.TextPrompt();
     this._prompt.initialize(() => Promise.resolve([]));
-    this._prompt.renderAsBlock();
     var promptProxy = this._prompt.attach(this._promptElement);
     promptProxy.addEventListener('input', this._onInput.bind(this), false);
     promptProxy.classList.add('filtered-list-widget-prompt-element');
@@ -111,6 +110,13 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     return false;
   }
 
+  /**
+   * @param {string} placeholder
+   */
+  setPlaceholder(placeholder) {
+    this._prompt.setPlaceholder(placeholder);
+  }
+
   showAsDialog() {
     this._dialog = new UI.Dialog();
     this._dialog.setMaxContentSize(new UI.Size(504, 340));

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

+// Copyright 2017 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.
+QuickOpen.HelpQuickOpen = class extends QuickOpen.FilteredListWidget.Provider {
+  constructor() {
+    super();
+    /** @type {!Array<{prefix: string, title: string}>} */
+    this._providers = [];
+    self.runtime.extensions(QuickOpen.FilteredListWidget.Provider).forEach(this._addProvider.bind(this));
+  }
+
+  /**
+   * @param {!Runtime.Extension} extension
+   */
+  _addProvider(extension) {
+    if (extension.descriptor()['title'])
+      this._providers.push({prefix: extension.descriptor()['prefix'], title: extension.descriptor()['title']});
+  }
+
+  /**
+   * @override
+   * @return {number}
+   */
+  itemCount() {
+    return this._providers.length;
+  }
+
+  /**
+   * @override
+   * @param {number} itemIndex
+   * @return {string}
+   */
+  itemKeyAt(itemIndex) {
+    return this._providers[itemIndex].prefix;
+  }
+
+  /**
+   * @override
+   * @param {number} itemIndex
+   * @param {string} query
+   * @return {number}
+   */
+  itemScoreAt(itemIndex, query) {
+    return -this._providers[itemIndex].prefix.length;
+  }
+
+  /**
+   * @override
+   * @param {number} itemIndex
+   * @param {string} query
+   * @param {!Element} titleElement
+   * @param {!Element} subtitleElement
+   */
+  renderItem(itemIndex, query, titleElement, subtitleElement) {
+    var provider = this._providers[itemIndex];
+    var prefixElement = titleElement.createChild('span', 'monospace');
+    prefixElement.textContent = (provider.prefix || '\u2026') + ' ';
+    titleElement.createTextChild(provider.title);
+  }
+
+  /**
+   * @override
+   * @param {?number} itemIndex
+   * @param {string} promptValue
+   */
+  selectItem(itemIndex, promptValue) {
+    if (itemIndex !== null)
+      QuickOpen.QuickOpen.show(this._providers[itemIndex].prefix);
+  }
+
+  /**
+   * @override
+   * @return {boolean}
+   */
+  renderAsTwoRows() {
+    return false;
+  }
+};

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

@@ -23,6 +23,7 @@ QuickOpen.QuickOpen = class {
     var filteredListWidget =
         new QuickOpen.FilteredListWidget(null, this._history, quickOpen._queryChanged.bind(quickOpen));
     quickOpen._filteredListWidget = filteredListWidget;
+    filteredListWidget.setPlaceholder(Common.UIString('Type \'?\' to see available commands'));
     filteredListWidget.showAsDialog();
     filteredListWidget.setQuery(query);
   }

third_party/WebKit/Source/devtools/front_end/quick_open/module.json

@@ -6,6 +6,11 @@
             "prefix": ">",
             "className": "QuickOpen.CommandMenuProvider"
         },
+        {
+            "type": "@QuickOpen.FilteredListWidget.Provider",
+            "prefix": "?",
+            "className": "QuickOpen.HelpQuickOpen"
+        },
         {
             "type": "@UI.ActionDelegate",
             "actionId": "commandMenu.show",
@@ -46,7 +51,8 @@
     "scripts": [
         "FilteredListWidget.js",
         "QuickOpen.js",
-        "CommandMenu.js"
+        "CommandMenu.js",
+        "HelpQuickOpen.js"
     ],
     "resources": [
         "filteredListWidget.css"