DevTools: Display SuggestBox with a Viewport control

third_party/WebKit/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 32 matching lines @@
     applySuggestion: function(suggestion, isIntermediateSuggestion) { },
 
     /**
      * acceptSuggestion will be always called after call to applySuggestion with isIntermediateSuggestion being equal to false.
      */
     acceptSuggestion: function() { },
 }
 
 /**
  * @constructor
+ * @implements {WebInspector.StaticViewportControl.Provider}
  * @param {!WebInspector.SuggestBoxDelegate} suggestBoxDelegate
  * @param {number=} maxItemsHeight
  * @param {boolean=} captureEnter
  */
 WebInspector.SuggestBox = function(suggestBoxDelegate, maxItemsHeight, captureEnter)
 {
     this._suggestBoxDelegate = suggestBoxDelegate;
     this._length = 0;
     this._selectedIndex = -1;
     this._selectedElement = null;
     this._maxItemsHeight = maxItemsHeight;
     this._maybeHideBound = this._maybeHide.bind(this);
     this._container = createElementWithClass("div", "suggest-box-container");
-    this._element = this._container.createChild("div", "suggest-box");
+    this._viewport = new WebInspector.StaticViewportControl(this);
+    this._element = this._viewport.element;
+    this._element.classList.add("suggest-box");
+    this._container.appendChild(this._element);
     this._element.addEventListener("mousedown", this._onBoxMouseDown.bind(this), true);
     this._detailsPopup = this._container.createChild("div", "suggest-box details-popup monospace");
     this._detailsPopup.classList.add("hidden");
     this._asyncDetailsCallback = null;
     /** @type {!Map<number, !Promise<{detail: string, description: string}>>} */
     this._asyncDetailsPromises = new Map();
     this._userInteracted = false;
     this._captureEnter = captureEnter;
+    /** @type {!Array<!Element>} */
+    this._elementList = [];
+    this._rowHeight = 17;
+    this._viewportWidth = "100vw";
+    this._hasScrollBars = false;
 }
 
 /**
  * @typedef {!Array.<{title: string, className: (string|undefined)}>}
  */
 WebInspector.SuggestBox.Suggestions;
 
 WebInspector.SuggestBox.prototype = {
     /**
      * @return {boolean}
@@ skipping 10 matching lines @@
     {
         this._updateBoxPosition(anchorBox);
     },
 
     /**
      * @param {!AnchorBox} anchorBox
      */
     _updateBoxPosition: function(anchorBox)
     {
         console.assert(this._overlay);
-        if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox))
+        if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox) && this._lastItemCount === this.itemCount())
             return;
+        this._lastItemCount = this.itemCount();
         this._lastAnchorBox = anchorBox;
 
         // Position relative to main DevTools element.
         var container = WebInspector.Dialog.modalHostView().element;
         anchorBox = anchorBox.relativeToElement(container);
         var totalHeight = container.offsetHeight;
         var aboveHeight = anchorBox.y;
         var underHeight = totalHeight - anchorBox.y - anchorBox.height;
 
         this._overlay.setLeftOffset(anchorBox.x);
 
         var under = underHeight >= aboveHeight;
         if (under)
             this._overlay.setVerticalOffset(anchorBox.y + anchorBox.height, true);
         else
             this._overlay.setVerticalOffset(totalHeight - anchorBox.y, false);
 
-        /** const */ var rowHeight = 17;
-        /** const */ var spacer = 6;
-        var maxHeight = this._maxItemsHeight ? this._maxItemsHeight * rowHeight : Math.max(underHeight, aboveHeight) - spacer;
-        this._element.style.maxHeight = maxHeight + "px";
+        var spacer = 6;
+        var maxHeight = this._maxItemsHeight ? this._maxItemsHeight * this._rowHeight : Math.max(underHeight, aboveHeight) - spacer;
+        var height = this._rowHeight * this._elementList.length;
+        this._hasScrollBars = height > maxHeight;
+        this._element.style.height = Math.min(maxHeight, height) + "px";
+    },
+
+    _updateWidth: function()
+    {
+        if (this._hasScrollBars) {
+            this._element.style.width = "100vw";
+            return;
+        }
+        // If there are no scrollbars, set the width to the width of the largest row.
+        // Perform N sync layouts inside a layout boundary of a small size.
+        var width = 0;
+        for (var i = 0; i < this._elementList.length; i++)

[lushnikov, 2016/10/10 20:49:24]

"I can find the largest size one and measure it instead!" (Joel)

[einbinder, 2016/10/11 00:18:16]

Done.

+            width = Math.max(width, WebInspector.measurePreferredSize(this._elementList[i], this._element).width);
+        this._element.style.width = width + "px";
     },
 
     /**
      * @param {!Event} event
      */
     _onBoxMouseDown: function(event)
     {
         if (this._hideTimeoutId) {
             window.clearTimeout(this._hideTimeoutId);
             delete this._hideTimeoutId;
@@ skipping 12 matching lines @@
      * @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._container);
+        var measuringElement = this._createItemElement("1", "12");
+        this._viewport.element.appendChild(measuringElement);
+        this._rowHeight = measuringElement.getBoundingClientRect().height;
+        measuringElement.remove();
     },
 
     hide: function()
     {
         if (!this.visible())
             return;
 
         this._userInteracted = false;
         this._bodyElement.removeEventListener("mousedown", this._maybeHideBound, true);
         delete this._bodyElement;
@@ skipping 79 matching lines @@
     _onItemMouseDown: function(event)
     {
         this._selectedElement = event.currentTarget;
         this.acceptSuggestion();
         event.consume(true);
     },
 
     /**
      * @param {string} prefix
      * @param {string} text
-     * @param {string|undefined} className
-     * @param {number} index
+     * @param {string=} className
+     * @return {!Element}
      */
-    _createItemElement: function(prefix, text, className, index)
+    _createItemElement: function(prefix, text, className)
     {
         var element = createElementWithClass("div", "suggest-box-content-item source-code " + (className || ""));
         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).trimEnd(50);
         } else {
             element.createChild("span", "suffix").textContent = text.trimEnd(50);
         }
         element.__fullValue = text;
         element.createChild("span", "spacer");
         element.addEventListener("mousedown", this._onItemMouseDown.bind(this), false);

[lushnikov, 2016/10/10 20:49:24]

one event listener on the container should be more performant/memory efficient
FYI: enclosingNodeOrSelfWithClass

         return element;
     },
 
     /**
      * @param {!WebInspector.SuggestBox.Suggestions} items
      * @param {string} userEnteredText
      * @param {function(number): !Promise<{detail:string, description:string}>=} asyncDetails
      */
     _updateItems: function(items, userEnteredText, asyncDetails)
     {
         this._length = items.length;
         this._asyncDetailsPromises.clear();
         this._asyncDetailsCallback = asyncDetails;
-        this._element.removeChildren();
+        this._elementList = [];
         delete this._selectedElement;
 
-        for (var i = 0; i < items.length; ++i) {
-            var item = items[i];
-            var currentItemElement = this._createItemElement(userEnteredText, item.title, item.className, i);
-            this._element.appendChild(currentItemElement);
-        }
+        for (var i = 0; i < items.length; ++i)
+            this._elementList.push(this._createItemElement(userEnteredText, items[i].title, items[i].className));

[lushnikov, 2016/10/10 20:49:24]

lazy creation should work faster

[einbinder, 2016/10/11 00:18:16]

Done.

     },
 
     /**
      * @param {number} index
      * @return {!Promise<?{detail: string, description: string}>}
      */
     _asyncDetails: function(index)
     {
         if (!this._asyncDetailsCallback)
             return Promise.resolve(/** @type {?{description: string, detail: string}} */(null));
@@ skipping 21 matching lines @@
      */
     _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 = this._elementList[index];
         this._selectedElement.classList.add("selected");
         this._detailsPopup.classList.add("hidden");
         var elem = this._selectedElement;
         this._asyncDetails(index).then(showDetails.bind(this), function(){});
 
         if (scrollIntoView)
-            this._selectedElement.scrollIntoViewIfNeeded(false);
+            this._viewport.scrollItemIntoView(index);
 
         /**
          * @param {?{detail: string, description: string}} details
          * @this {WebInspector.SuggestBox}
          */
         function showDetails(details)
         {
             if (elem === this._selectedElement)
                 this._showDetailsPopup(details);
         }
@@ skipping 13 matching lines @@
             return true;
 
         // Do not show a single suggestion if it is the same as user-entered prefix, even if allowed to show single-item suggest boxes.
         return canShowForSingleItem && completions[0].title !== userEnteredText;
     },
 
     _ensureRowCountPerViewport: function()
     {
         if (this._rowCountPerViewport)
             return;
-        if (!this._element.firstChild)
+        if (!this._elementList.length)
             return;
 
-        this._rowCountPerViewport = Math.floor(this._element.offsetHeight / this._element.firstChild.offsetHeight);
+        this._rowCountPerViewport = Math.floor(this._element.getBoundingClientRect().height / this._rowHeight);
     },
 
     /**
      * @param {!AnchorBox} anchorBox
      * @param {!WebInspector.SuggestBox.Suggestions} completions
      * @param {number} selectedIndex
      * @param {boolean} canShowForSingleItem
      * @param {string} userEnteredText
      * @param {function(number): !Promise<{detail:string, description:string}>=} asyncDetails
      */
     updateSuggestions: function(anchorBox, completions, selectedIndex, canShowForSingleItem, userEnteredText, asyncDetails)
     {
         delete this._onlyCompletion;
         if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)) {
             this._updateItems(completions, userEnteredText, asyncDetails);
             this._show();
             this._updateBoxPosition(anchorBox);
+            this._updateWidth();
+            this._viewport.refresh();
             this._selectItem(selectedIndex, selectedIndex > 0);
             delete this._rowCountPerViewport;
         } else {
             if (completions.length === 1)
                 this._onlyCompletion = completions[0].title;
             this.hide();
         }
     },
 
     /**
@@ skipping 58 matching lines @@
     {
         if (!this._userInteracted && this._captureEnter)
             return false;
 
         var hasSelectedItem = !!this._selectedElement || this._onlyCompletion;
         this.acceptSuggestion();
 
         // Report the event as non-handled if there is no selected item,
         // to commit the input or handle it otherwise.
         return hasSelectedItem;
+    },
+
+    /**
+     * @override
+     * @param {number} index
+     * @return {number}
+     */
+    fastItemHeight: function(index)
+    {
+        return this._rowHeight;
+    },
+
+    /**
+     * @override
+     * @return {number}
+     */
+    itemCount: function()
+    {
+        return this._elementList.length;
+    },
+
+    /**
+     * @override
+     * @param {number} index
+     * @return {?Element}
+     */
+    itemElement: function(index)
+    {
+        return this._elementList[index];
     }
 }
 
 /**
  * @constructor
  * // FIXME: make SuggestBox work for multiple documents.
  * @suppressGlobalPropertiesCheck
  */
 WebInspector.SuggestBox.Overlay = function()
 {
@@ skipping 50 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();
     }
 }