Devtools: [WIP] Implement enhanced devtools extension language APIs

Source/devtools/front_end/ui/SuggestBox.js

Index: Source/devtools/front_end/ui/SuggestBox.js
diff --git a/Source/devtools/front_end/ui/SuggestBox.js b/Source/devtools/front_end/ui/SuggestBox.js
index 32b3c52282616f84ecb7df1250dd9182739a72a5..7f1cc205b282d21ef49262bf3d4165242f880baa 100644
--- a/Source/devtools/front_end/ui/SuggestBox.js
+++ b/Source/devtools/front_end/ui/SuggestBox.js
@@ -61,8 +61,11 @@ WebInspector.SuggestBox = function(suggestBoxDelegate, maxItemsHeight)
     this._selectedElement = null;
     this._maxItemsHeight = maxItemsHeight;
     this._maybeHideBound = this._maybeHide.bind(this);
-    this._element = createElementWithClass("div", "suggest-box");
+    this._container = createElementWithClass("div", "suggest-box-container");
+    this._element = this._container.createChild("div", "suggest-box");
     this._element.addEventListener("mousedown", this._onBoxMouseDown.bind(this), true);
+    this._detailsPopup = this._container.createChild("div", "details-popup monospace");
+    this._detailsPopup.style.visibility = 'hidden';
 }
 
 WebInspector.SuggestBox.prototype = {
@@ -71,7 +74,7 @@ WebInspector.SuggestBox.prototype = {
      */
     visible: function()
     {
-        return !!this._element.parentElement;
+        return !!this._container.parentElement;
     },
 
     /**
@@ -142,7 +145,7 @@ WebInspector.SuggestBox.prototype = {
         this._bodyElement = document.body;
         this._bodyElement.addEventListener("mousedown", this._maybeHideBound, true);
         this._overlay = new WebInspector.SuggestBox.Overlay();
-        this._overlay.setContentElement(this._element);
+        this._overlay.setContentElement(this._container);
     },
 
     hide: function()
@@ -152,7 +155,7 @@ WebInspector.SuggestBox.prototype = {
 
         this._bodyElement.removeEventListener("mousedown", this._maybeHideBound, true);
         delete this._bodyElement;
-        this._element.remove();
+        this._container.remove();
         this._overlay.dispose();
         delete this._overlay;
         delete this._selectedElement;
@@ -234,8 +237,9 @@ WebInspector.SuggestBox.prototype = {
     /**
      * @param {string} prefix
      * @param {string} text
+     * @param {?Function<!Promise<{detail:string, description:string}>>} asyncDetail
      */
-    _createItemElement: function(prefix, text)
+    _createItemElement: function(prefix, text, asyncDetail)
     {
         var element = createElementWithClass("div", "suggest-box-content-item source-code");
         element.tabIndex = -1;
@@ -246,6 +250,17 @@ WebInspector.SuggestBox.prototype = {
             element.createChild("span", "suffix").textContent = text;
         }
         element.createChild("span", "spacer");
+        var prom;
+        element.details = function() {
+            if (!prom) {
+                if (!asyncDetail) {
+                    prom = Promise.reject().then(function(){},function(){});
+                } else {
+                    prom = asyncDetail();
+                }
+            }
+            return prom;
+        };
         element.addEventListener("mousedown", this._onItemMouseDown.bind(this), false);
         return element;
     },
@@ -253,8 +268,9 @@ WebInspector.SuggestBox.prototype = {
     /**
      * @param {!Array.<string>} items
      * @param {string} userEnteredText
+     * @param {!Array<!Function<!Promise<{detail:string, description:string}>>>} asyncDetails
      */
-    _updateItems: function(items, userEnteredText)
+    _updateItems: function(items, userEnteredText, asyncDetails)
     {
         this._length = items.length;
         this._element.removeChildren();
@@ -262,11 +278,34 @@ WebInspector.SuggestBox.prototype = {
 
         for (var i = 0; i < items.length; ++i) {
             var item = items[i];
-            var currentItemElement = this._createItemElement(userEnteredText, item);
+            if (!item) continue;
+            var currentItemElement = this._createItemElement(userEnteredText, item, asyncDetails[i]);
             this._element.appendChild(currentItemElement);
         }
     },
 
+    _hideDetailsPopup: function()
+    {
+        this._detailsPopup.style.visibility = 'hidden';
+    },
+
+    /**
+     * @param {{detail: string, description: string}=} details
+     */
+    _showDetailsPopup: function(details)
+    {
+        while (this._detailsPopup.firstChild) {
+            this._detailsPopup.removeChild(this._detailsPopup.firstChild);
+        }
+        if (!details) {
+            return;
+        }
+        this._detailsPopup.createChild('section', 'detail').createTextChild(details.detail);
+        this._detailsPopup.createChild('section', 'description').createTextChild(details.description);
+        this._detailsPopup.style.visibility = '';
+        //WebInspector.runCSSAnimationOnce(this._detailsPopup, 'details-fade-in'); //TODO: Causes assertion failures
+    },
+
     /**
      * @param {number} index
      * @param {boolean} scrollIntoView
@@ -282,6 +321,13 @@ WebInspector.SuggestBox.prototype = {
 
         this._selectedElement = this._element.children[index];
         this._selectedElement.classList.add("selected");
+        this._hideDetailsPopup();
+        var elem = this._selectedElement;
+        this._selectedElement.details().then((function(details){
+            if (elem === this._selectedElement) {
+                this._showDetailsPopup(details);
+            }
+        }).bind(this), function(){});
 
         if (scrollIntoView)
             this._selectedElement.scrollIntoViewIfNeeded(false);
@@ -320,11 +366,12 @@ WebInspector.SuggestBox.prototype = {
      * @param {number} selectedIndex
      * @param {boolean} canShowForSingleItem
      * @param {string} userEnteredText
+     * @param {?Array<!Function<!Promise<{detail:string, description:string}>>>=} asyncDetails
      */
-    updateSuggestions: function(anchorBox, completions, selectedIndex, canShowForSingleItem, userEnteredText)
+    updateSuggestions: function(anchorBox, completions, selectedIndex, canShowForSingleItem, userEnteredText, asyncDetails)
     {
         if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)) {
-            this._updateItems(completions, userEnteredText);
+            this._updateItems(completions, userEnteredText, asyncDetails || []);
             this._show();
             this._updateBoxPosition(anchorBox);
             this._selectItem(selectedIndex, selectedIndex > 0);