Index: third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js |
index 33cd18b4e99f02a884b42c843c841b3cf8f20e10..9c5a8ba8c0441d21edd3c34c72db910d6fc8eeb3 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js |
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js |
@@ -53,97 +53,64 @@ UI.SuggestBox = class { |
* @param {!UI.SuggestBoxDelegate} suggestBoxDelegate |
* @param {number=} maxItemsHeight |
* @param {boolean=} captureEnter |
+ * @suppressGlobalPropertiesCheck |
*/ |
constructor(suggestBoxDelegate, maxItemsHeight, captureEnter) { |
this._suggestBoxDelegate = suggestBoxDelegate; |
this._maxItemsHeight = maxItemsHeight; |
- this._maybeHideBound = this._maybeHide.bind(this); |
- this._hideBound = this.hide.bind(this); |
- this._container = createElementWithClass('div', 'suggest-box-container'); |
+ this._captureEnter = captureEnter; |
this._rowHeight = 17; |
- /** @type {!UI.ListControl<!UI.SuggestBox.Suggestion>} */ |
- this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems); |
- this._element = this._list.element; |
- this._element.classList.add('suggest-box'); |
- this._container.appendChild(this._element); |
- this._element.addEventListener('mousedown', this._onBoxMouseDown.bind(this), true); |
this._userInteracted = false; |
- this._captureEnter = captureEnter; |
- this._hasVerticalScroll = false; |
this._userEnteredText = ''; |
- |
- /** @type {?UI.SuggestBox.Overlay} */ |
- this._overlay = null; |
- /** @type {?AnchorBox} */ |
- this._lastAnchorBox = null; |
- this._lastItemCount = 0; |
- this._hideTimeoutId = 0; |
- /** @type {?Element} */ |
- this._bodyElement = null; |
/** @type {?string} */ |
this._onlyCompletion = null; |
+ |
+ /** @type {!UI.ListControl<!UI.SuggestBox.Suggestion>} */ |
+ this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems); |
+ this._element = this._list.element; |
+ this._element.classList.add('suggest-box'); |
+ this._element.addEventListener('mousedown', event => event.preventDefault(), true); |
+ |
+ // TODO(dgozman): take document in constructor. |
+ this._glassPane = |
+ new UI.GlassPane(document, false /* dimmed */, false /* blockPointerEvents */, this.hide.bind(this)); |
+ this._glassPane.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferBottom); |
+ var shadowRoot = UI.createShadowRootWithCoreStyles(this._glassPane.contentElement, 'ui/suggestBox.css'); |
+ shadowRoot.appendChild(this._element); |
} |
/** |
* @return {boolean} |
*/ |
visible() { |
- return !!this._container.parentElement; |
+ return this._glassPane.visible(); |
} |
/** |
* @param {!AnchorBox} anchorBox |
*/ |
setPosition(anchorBox) { |
- this._updateBoxPosition(anchorBox, this._list.length()); |
+ this._glassPane.setContentAnchorBox(anchorBox); |
} |
/** |
- * @param {!AnchorBox} anchorBox |
- * @param {number} length |
+ * @param {!UI.SuggestBox.Suggestions} items |
*/ |
- _updateBoxPosition(anchorBox, length) { |
- console.assert(this._overlay); |
- if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox) && this._lastItemCount === length) |
- return; |
- this._lastItemCount = length; |
- this._lastAnchorBox = anchorBox; |
- |
- // Position relative to main DevTools element. |
- var container = UI.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); |
- |
- var spacer = 6; |
- var maxHeight = Math.min( |
- Math.max(underHeight, aboveHeight) - spacer, |
- this._maxItemsHeight ? this._maxItemsHeight * this._rowHeight : Infinity); |
- var height = this._rowHeight * length; |
- this._hasVerticalScroll = height > maxHeight; |
- this._element.style.height = Math.min(maxHeight, height) + 'px'; |
+ _updateMaxSize(items) { |
+ var maxWidth = this._maxWidth(items); |
+ var length = this._maxItemsHeight ? Math.min(this._maxItemsHeight, items.length) : items.length; |
+ var maxHeight = length * this._rowHeight; |
+ this._glassPane.setMaxContentSize(new UI.Size(maxWidth, maxHeight)); |
} |
/** |
* @param {!UI.SuggestBox.Suggestions} items |
+ * @return {number} |
*/ |
- _updateWidth(items) { |
- if (this._hasVerticalScroll) { |
- this._element.style.width = '100vw'; |
- return; |
- } |
+ _maxWidth(items) { |
+ var kMaxWidth = 300; |
if (!items.length) |
- return; |
- // If there are no scrollbars, set the width to the width of the largest row. |
+ return kMaxWidth; |
var maxItem; |
var maxLength = -Infinity; |
for (var i = 0; i < items.length; i++) { |
@@ -153,41 +120,14 @@ UI.SuggestBox = class { |
maxItem = items[i]; |
} |
} |
- this._element.style.width = |
- UI.measurePreferredSize( |
- this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem)), this._element) |
- .width + |
- 'px'; |
- } |
- |
- /** |
- * @param {!Event} event |
- */ |
- _onBoxMouseDown(event) { |
- if (this._hideTimeoutId) { |
- window.clearTimeout(this._hideTimeoutId); |
- this._hideTimeoutId = 0; |
- } |
- event.preventDefault(); |
+ var element = this.createElementForItem(/** @type {!UI.SuggestBox.Suggestion} */ (maxItem)); |
+ return Math.min(kMaxWidth, UI.measurePreferredSize(element, this._element).width); |
} |
- _maybeHide() { |
- if (!this._hideTimeoutId) |
- this._hideTimeoutId = window.setTimeout(this._hideBound, 0); |
- } |
- |
- /** |
- * // FIXME: make SuggestBox work for multiple documents. |
- * @suppressGlobalPropertiesCheck |
- */ |
_show() { |
if (this.visible()) |
return; |
- this._bodyElement = document.body; |
- this._bodyElement.addEventListener('mousedown', this._maybeHideBound, true); |
- this._element.ownerDocument.defaultView.addEventListener('resize', this._hideBound, false); |
- this._overlay = new UI.SuggestBox.Overlay(); |
- this._overlay.setContentElement(this._container); |
+ this._glassPane.show(); |
this._rowHeight = |
UI.measurePreferredSize(this.createElementForItem({title: '1', subtitle: '12'}), this._element).height; |
} |
@@ -195,15 +135,8 @@ UI.SuggestBox = class { |
hide() { |
if (!this.visible()) |
return; |
- |
this._userInteracted = false; |
- this._bodyElement.removeEventListener('mousedown', this._maybeHideBound, true); |
- this._element.ownerDocument.defaultView.removeEventListener('resize', this._hideBound, false); |
- this._bodyElement = null; |
- this._container.remove(); |
- this._overlay.dispose(); |
- this._overlay = null; |
- this._lastAnchorBox = null; |
+ this._glassPane.hide(); |
} |
/** |
@@ -349,8 +282,8 @@ UI.SuggestBox = class { |
this._userEnteredText = userEnteredText; |
this._show(); |
- this._updateBoxPosition(anchorBox, completions.length); |
- this._updateWidth(completions); |
+ this._updateMaxSize(completions); |
+ this._glassPane.setContentAnchorBox(anchorBox); |
this._list.invalidateItemHeight(); |
this._list.replaceAllItems(completions); |
@@ -431,64 +364,3 @@ UI.SuggestBox.Suggestion; |
* @typedef {!Array<!UI.SuggestBox.Suggestion>} |
*/ |
UI.SuggestBox.Suggestions; |
- |
-UI.SuggestBox.Overlay = class { |
- /** |
- * // FIXME: make SuggestBox work for multiple documents. |
- * @suppressGlobalPropertiesCheck |
- */ |
- constructor() { |
- this.element = createElementWithClass('div', 'suggest-box-overlay'); |
- var root = UI.createShadowRootWithCoreStyles(this.element, 'ui/suggestBox.css'); |
- this._leftSpacerElement = root.createChild('div', 'suggest-box-left-spacer'); |
- this._horizontalElement = root.createChild('div', 'suggest-box-horizontal'); |
- this._topSpacerElement = this._horizontalElement.createChild('div', 'suggest-box-top-spacer'); |
- this._bottomSpacerElement = this._horizontalElement.createChild('div', 'suggest-box-bottom-spacer'); |
- this._resize(); |
- document.body.appendChild(this.element); |
- } |
- |
- /** |
- * @param {number} offset |
- */ |
- setLeftOffset(offset) { |
- this._leftSpacerElement.style.flexBasis = offset + 'px'; |
- } |
- |
- /** |
- * @param {number} offset |
- * @param {boolean} isTopOffset |
- */ |
- setVerticalOffset(offset, isTopOffset) { |
- this.element.classList.toggle('under-anchor', isTopOffset); |
- |
- if (isTopOffset) { |
- this._bottomSpacerElement.style.flexBasis = 'auto'; |
- this._topSpacerElement.style.flexBasis = offset + 'px'; |
- } else { |
- this._bottomSpacerElement.style.flexBasis = offset + 'px'; |
- this._topSpacerElement.style.flexBasis = 'auto'; |
- } |
- } |
- |
- /** |
- * @param {!Element} element |
- */ |
- setContentElement(element) { |
- this._horizontalElement.insertBefore(element, this._bottomSpacerElement); |
- } |
- |
- _resize() { |
- var container = UI.Dialog.modalHostView().element; |
- var containerBox = container.boxInWindow(container.ownerDocument.defaultView); |
- |
- this.element.style.left = containerBox.x + 'px'; |
- this.element.style.top = containerBox.y + 'px'; |
- this.element.style.height = containerBox.height + 'px'; |
- this.element.style.width = containerBox.width + 'px'; |
- } |
- |
- dispose() { |
- this.element.remove(); |
- } |
-}; |