Devtools: [WIP] Implement enhanced devtools extension language APIs

Source/devtools/front_end/ui/SuggestBox.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 35 matching lines @@
      * acceptSuggestion will be always called after call to applySuggestion with isIntermediateSuggestion being equal to false.
      */
     acceptSuggestion: function() { },
 }
 
 /**
  * @constructor
  * @param {!WebInspector.SuggestBoxDelegate} suggestBoxDelegate
  * @param {number=} maxItemsHeight
  */
 WebInspector.SuggestBox = function(suggestBoxDelegate, maxItemsHeight)

[pfeldman, 2015/08/13 21:15:47]

This is worth a separate patch.

[wes, 2015/08/14 01:25:50]

Adding the details popover flow? Alright, I'll note it as one of the bits that
should get broken out.

 {
     this._suggestBoxDelegate = suggestBoxDelegate;
     this._length = 0;
     this._selectedIndex = -1;
     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 = {
     /**
      * @return {boolean}
      */
     visible: function()
     {
-        return !!this._element.parentElement;
+        return !!this._container.parentElement;
     },
 
     /**
      * @param {!AnchorBox} anchorBox
      */
     setPosition: function(anchorBox)
     {
         this._updateBoxPosition(anchorBox);
     },
 
@@ skipping 50 matching lines @@
      * // FIXME: make SuggestBox work for multiple documents.
      * @suppressGlobalPropertiesCheck
      */
     _show: function()
     {
         if (this.visible())
             return;
         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()
     {
         if (!this.visible())
             return;
 
         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;
         this._selectedIndex = -1;
         delete this._lastAnchorBox;
     },
 
     removeFromElement: function()
     {
         this.hide();
@@ skipping 61 matching lines @@
     _onItemMouseDown: function(event)
     {
         this._selectedElement = event.currentTarget;
         this.acceptSuggestion();
         event.consume(true);
     },
 
     /**
      * @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;
         if (prefix && prefix.length && !text.indexOf(prefix)) {
             element.createChild("span", "prefix").textContent = prefix;
             element.createChild("span", "suffix").textContent = text.substring(prefix.length);
         } else {
             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;
     },
 
     /**
      * @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();
         delete this._selectedElement;
 
         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
      */
     _selectItem: function(index, scrollIntoView)
     {
         if (this._selectedElement)
             this._selectedElement.classList.remove("selected");
 
         this._selectedIndex = index;
         if (index < 0)
             return;
 
         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);
     },
 
     /**
      * @param {!Array.<string>} completions
      * @param {boolean} canShowForSingleItem
      * @param {string} userEnteredText
      */
@@ skipping 18 matching lines @@
 
         this._rowCountPerViewport = Math.floor(this._element.offsetHeight / this._element.firstChild.offsetHeight);
     },
 
     /**
      * @param {!AnchorBox} anchorBox
      * @param {!Array.<string>} completions
      * @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);
             delete this._rowCountPerViewport;
         } else
             this.hide();
     },
 
     /**
      * @param {!KeyboardEvent} event
@@ skipping 125 matching lines @@
         this.element.style.top = containerBox.y + "px";
         this.element.style.height = containerBox.height + "px";
         this.element.style.width = containerBox.width + "px";
     },
 
     dispose: function()
     {
         this.element.remove();
     }
 }