@codingame/monaco-vscode-api 3.2.3 → 4.1.0

package/vscode/src/vs/base/browser/ui/findinput/findInputToggles.js

@@ -1,3 +1,4 @@
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { Toggle } from '../toggle/toggle.js';
 import { Codicon } from '../../../common/codicons.js';
 import { localizeWithPath } from '../../../../nls.js';
@@ -22,6 +23,7 @@ class CaseSensitiveToggle extends Toggle {
             icon: Codicon.caseSensitive,
             title: NLS_CASE_SENSITIVE_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground
@@ -34,6 +36,7 @@ class WholeWordsToggle extends Toggle {
             icon: Codicon.wholeWord,
             title: NLS_WHOLE_WORD_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground
@@ -46,6 +49,7 @@ class RegexToggle extends Toggle {
             icon: Codicon.regex,
             title: NLS_REGEX_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground

package/vscode/src/vs/base/browser/ui/findinput/replaceInput.js

@@ -6,6 +6,7 @@ import { Codicon } from '../../../common/codicons.js';
 import { Emitter } from '../../../common/event.js';
 import './findInput.css.js';
 import { localizeWithPath } from '../../../../nls.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 const NLS_DEFAULT_LABEL = ( localizeWithPath('vs/base/browser/ui/findinput/replaceInput', 'defaultLabel', "input"));
 const NLS_PRESERVE_CASE_LABEL = ( localizeWithPath(
     'vs/base/browser/ui/findinput/replaceInput',
@@ -18,9 +19,10 @@ class PreserveCaseToggle extends Toggle {
             icon: Codicon.preserveCase,
             title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
-            inputActiveOptionBackground: opts.inputActiveOptionBackground
+            inputActiveOptionBackground: opts.inputActiveOptionBackground,
         });
     }
 }

package/vscode/src/vs/base/browser/ui/grid/gridview.js

@@ -7,6 +7,7 @@ import { Disposable, DisposableStore, toDisposable } from '../../../common/lifec
 import { rot } from '../../../common/numbers.js';
 import { isUndefined } from '../../../common/types.js';
 import './gridview.css.js';
+import '../sash/sash.js';
 const defaultStyles = {
     separatorBorder: Color.transparent
 };

package/vscode/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.js

@@ -1,8 +1,13 @@
 import { append, $, reset } from '../../dom.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from '../iconLabel/iconLabels.js';
+import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
-class HighlightedLabel {
+class HighlightedLabel extends Disposable {
     constructor(container, options) {
+        super();
+        this.options = options;
         this.text = '';
         this.title = '';
         this.highlights = [];
@@ -63,11 +68,17 @@ class HighlightedLabel {
             }
         }
         reset(this.domNode, ...children);
-        if (this.title) {
+        if (this.options?.hoverDelegate?.showNativeHover) {
             this.domNode.title = this.title;
         }
         else {
-            this.domNode.removeAttribute('title');
+            if (!this.customHover && this.title !== '') {
+                const hoverDelegate = this.options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
+                this.customHover = this._register(setupCustomHover(hoverDelegate, this.domNode, this.title));
+            }
+            else if (this.customHover) {
+                this.customHover.update(this.title);
+            }
         }
         this.didEverRender = true;
     }

package/vscode/src/vs/base/browser/ui/{iconLabel/iconHoverDelegate.d.ts → hover/hoverDelegate.d.ts}

@@ -1,5 +1,5 @@
-import { HoverPosition } from '../hover/hoverWidget.js';
-import { IUpdatableHoverOptions } from './iconLabelHover.js';
+import { HoverPosition } from './hoverWidget.js';
+import { IHoverWidget, IUpdatableHoverOptions } from './updatableHoverWidget.js';
 import { IMarkdownString } from '../../../common/htmlContent.js';
 import { IDisposable } from '../../../common/lifecycle.js';
 
@@ -57,8 +57,5 @@ interface IHoverDelegate {
     placement?: 'mouse' | 'element';
     showNativeHover?: boolean;
 }
-interface IHoverWidget extends IDisposable {
-    readonly isDisposed: boolean;
-}
 
-export type { IHoverDelegate, IHoverDelegateOptions, IHoverDelegateTarget, IHoverWidget };
+export type { IHoverDelegate, IHoverDelegateOptions, IHoverDelegateTarget };

package/vscode/src/vs/base/browser/ui/hover/{hoverDelegate.js → hoverDelegateFactory.js}

@@ -10,13 +10,13 @@ const defaultHoverDelegateElement = ( new Lazy(() => hoverDelegateFactory('eleme
 function setHoverDelegateFactory(hoverDelegateProvider) {
     hoverDelegateFactory = hoverDelegateProvider;
 }
-function getDefaultHoverDelegate(placement, enableInstantHover) {
-    if (enableInstantHover) {
-        return hoverDelegateFactory(placement, true);
-    }
+function getDefaultHoverDelegate(placement) {
     if (placement === 'element') {
         return defaultHoverDelegateElement.value;
     }
     return defaultHoverDelegateMouse.value;
 }
-export { getDefaultHoverDelegate, setHoverDelegateFactory };
+function createInstantHoverDelegate() {
+    return hoverDelegateFactory('element', true);
+}
+export { createInstantHoverDelegate, getDefaultHoverDelegate, setHoverDelegateFactory };

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.js

@@ -2,7 +2,7 @@ import { append, addDisposableListener, EventType, $ as $$1 } from '../../dom.js
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Disposable } from '../../../common/lifecycle.js';
-import './hover.css.js';
+import './hoverWidget.css.js';
 import { localizeWithPath } from '../../../../nls.js';
 const $ = $$1;
 class HoverWidget extends Disposable {

package/vscode/src/vs/base/browser/ui/{iconLabel/iconLabelHover.d.ts → hover/updatableHoverWidget.d.ts}

@@ -1,3 +1,5 @@
+import { IDisposable } from '../../../common/lifecycle.js';
+
 /**
  * Copied from src\vs\workbench\services\hover\browser\hover.ts
  * @deprecated Use IHoverService
@@ -12,5 +14,8 @@ interface IUpdatableHoverOptions {
     actions?: IHoverAction[];
     linkHandler?(url: string): void;
 }
+interface IHoverWidget extends IDisposable {
+    readonly isDisposed: boolean;
+}
 
-export type { IUpdatableHoverOptions };
+export type { IHoverWidget, IUpdatableHoverOptions };

package/vscode/src/vs/base/browser/ui/{iconLabel/iconLabelHover.js → hover/updatableHoverWidget.js}

@@ -1,4 +1,4 @@
-import { addDisposableListener, EventType } from '../../dom.js';
+import { addDisposableListener, EventType, getWindow } from '../../dom.js';
 import { TimeoutTimer } from '../../../common/async.js';
 import { CancellationTokenSource } from '../../../common/cancellation.js';
 import { isMarkdownString } from '../../../common/htmlContent.js';
@@ -41,7 +41,7 @@ class UpdatableHoverWidget {
         else {
             if (!this._hoverWidget) {
                 this.show(( localizeWithPath(
-                    'vs/base/browser/ui/iconLabel/iconLabelHover',
+                    'vs/base/browser/ui/hover/updatableHoverWidget',
                     'iconLabel.loading',
                     "Loading..."
                 )), focus);
@@ -95,7 +95,20 @@ class UpdatableHoverWidget {
         this._cancellationTokenSource = undefined;
     }
 }
+function getHoverTargetElement(element, stopElement) {
+    stopElement = stopElement ?? getWindow(element).document.body;
+    while (!element.hasAttribute('custom-hover') && element !== stopElement) {
+        element = element.parentElement;
+    }
+    return element;
+}
 function setupCustomHover(hoverDelegate, htmlElement, content, options) {
+    htmlElement.setAttribute('custom-hover', 'true');
+    if (htmlElement.title !== '') {
+        console.warn('HTML element already has a title attribute, which will conflict with the custom hover. Please remove the title attribute.');
+        console.trace('Stack trace:', htmlElement.title);
+        htmlElement.title = '';
+    }
     let hoverPreparation;
     let hoverWidget;
     const hideHover = (disposeWidget, disposePreparation) => {
@@ -133,7 +146,7 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         isMouseDown = false;
         hideHover(false, e.fromElement === htmlElement);
     }, true);
-    const onMouseOver = () => {
+    const onMouseOver = (e) => {
         if (hoverPreparation) {
             return;
         }
@@ -145,14 +158,17 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         if (hoverDelegate.placement === undefined || hoverDelegate.placement === 'mouse') {
             const onMouseMove = (e) => {
                 target.x = e.x + 10;
-                if ((e.target instanceof HTMLElement) && e.target.classList.contains('action-label')) {
+                if ((e.target instanceof HTMLElement) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
                     hideHover(true, true);
                 }
             };
             toDispose.add(addDisposableListener(htmlElement, EventType.MOUSE_MOVE, onMouseMove, true));
         }
-        toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
         hoverPreparation = toDispose;
+        if ((e.target instanceof HTMLElement) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
+            return;
+        }
+        toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
     };
     const mouseOverDomEmitter = addDisposableListener(htmlElement, EventType.MOUSE_OVER, onMouseOver, true);
     const onFocus = () => {
@@ -169,7 +185,11 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
         hoverPreparation = toDispose;
     };
-    const focusDomEmitter = addDisposableListener(htmlElement, EventType.FOCUS, onFocus, true);
+    let focusDomEmitter;
+    const tagName = htmlElement.tagName.toLowerCase();
+    if (tagName !== 'input' && tagName !== 'textarea') {
+        focusDomEmitter = addDisposableListener(htmlElement, EventType.FOCUS, onFocus, true);
+    }
     const hover = {
         show: focus => {
             hideHover(false, true);
@@ -186,7 +206,7 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
             mouseLeaveEmitter.dispose();
             mouseDownEmitter.dispose();
             mouseUpEmitter.dispose();
-            focusDomEmitter.dispose();
+            focusDomEmitter?.dispose();
             hideHover(true, true);
         }
     };

package/vscode/src/vs/base/browser/ui/iconLabel/iconLabel.js

@@ -1,11 +1,11 @@
 import './iconlabel.css.js';
 import { append, $, after } from '../../dom.js';
 import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
-import { setupNativeHover, setupCustomHover } from './iconLabelHover.js';
+import { setupNativeHover, setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
 import { Range } from '../../../common/range.js';
-import { getDefaultHoverDelegate } from '../hover/hoverDelegate.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 class FastLabelNode {
     constructor(_element) {
         this._element = _element;
@@ -47,7 +47,7 @@ class IconLabel extends Disposable {
         this.labelContainer = append(this.domNode.element, $('.monaco-icon-label-container'));
         this.nameContainer = append(this.labelContainer, $('span.monaco-icon-name-container'));
         if (options?.supportHighlights || options?.supportIcons) {
-            this.nameNode = ( new LabelWithHighlights(this.nameContainer, !!options.supportIcons));
+            this.nameNode = this._register(( new LabelWithHighlights(this.nameContainer, !!options.supportIcons)));
         }
         else {
             this.nameNode = ( new Label(this.nameContainer));
@@ -145,10 +145,10 @@ class IconLabel extends Disposable {
                 append(this.labelContainer, $('span.monaco-icon-description-container'))
             )));
             if (this.creationOptions?.supportDescriptionHighlights) {
-                this.descriptionNode = ( new HighlightedLabel(
+                this.descriptionNode = this._register(( new HighlightedLabel(
                     append(descriptionContainer.element, $('span.label-description')),
                     { supportIcons: !!this.creationOptions.supportIcons }
-                ));
+                )));
             }
             else {
                 this.descriptionNode = this._register(( new FastLabelNode(append(descriptionContainer.element, $('span.label-description')))));
@@ -207,8 +207,9 @@ function splitMatches(labels, separator, matches) {
         return result;
     }));
 }
-class LabelWithHighlights {
+class LabelWithHighlights extends Disposable {
     constructor(container, supportIcons) {
+        super();
         this.container = container;
         this.supportIcons = supportIcons;
         this.label = undefined;
@@ -224,10 +225,10 @@ class LabelWithHighlights {
             if (!this.singleLabel) {
                 this.container.innerText = '';
                 this.container.classList.remove('multiple');
-                this.singleLabel = ( new HighlightedLabel(
+                this.singleLabel = this._register(( new HighlightedLabel(
                     append(this.container, $('a.label-name', { id: options?.domId })),
                     { supportIcons: this.supportIcons }
-                ));
+                )));
             }
             this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
         }
@@ -242,7 +243,7 @@ class LabelWithHighlights {
                 const m = matches ? matches[i] : undefined;
                 const id = options?.domId && `${options?.domId}_${i}`;
                 const name = $('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' });
-                const highlightedLabel = ( new HighlightedLabel(append(this.container, name), { supportIcons: this.supportIcons }));
+                const highlightedLabel = this._register(( new HighlightedLabel(append(this.container, name), { supportIcons: this.supportIcons })));
                 highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines);
                 if (i < label.length - 1) {
                     append(name, $('span.label-separator', undefined, separator));

package/vscode/src/vs/base/browser/ui/iconLabel/simpleIconLabel.js

@@ -1,4 +1,6 @@
 import { reset } from '../../dom.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from './iconLabels.js';
 class SimpleIconLabel {
     constructor(_container) {
@@ -8,7 +10,15 @@ class SimpleIconLabel {
         reset(this._container, ...renderLabelWithIcons(text ?? ''));
     }
     set title(title) {
-        this._container.title = title;
+        if (!this.hover && title) {
+            this.hover = setupCustomHover(getDefaultHoverDelegate('mouse'), this._container, title);
+        }
+        else if (this.hover) {
+            this.hover.update(title);
+        }
+    }
+    dispose() {
+        this.hover?.dispose();
     }
 }
 export { SimpleIconLabel };

package/vscode/src/vs/base/browser/ui/icons/iconSelectBox.css.js

@@ -0,0 +1,4 @@
+import n from '../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+var css = ".icon-select-box>.icon-select-box-container{height:100%}.icon-select-box .icon-select-icons-container{height:100%;outline:0!important}.icon-select-box .icon-select-icons-container>.icon-container{align-items:center;border-radius:5px;cursor:pointer;display:inline-flex;font-size:20px;justify-content:center}.icon-select-box .icon-select-icons-container>.icon-container.focused{background-color:var(--vscode-quickInputList-focusBackground);color:var(--vscode-quickInputList-focusForeground)}.icon-select-box .icon-select-icons-container>.icon-container:hover:not(.focused){background-color:var(--vscode-toolbar-hoverBackground);color:var(--vscode-list-hoverForeground)}.icon-select-box .icon-select-id-container .icon-select-id-label{height:24px;opacity:.8;padding:10px}.icon-select-box .icon-select-id-container .icon-select-id-label .highlight{color:var(--vscode-list-highlightForeground);font-weight:700}";
+n(css,{});
+export { css, css as default };

package/vscode/src/vs/base/browser/ui/icons/iconSelectBox.js

@@ -0,0 +1,246 @@
+import './iconSelectBox.css.js';
+import { $, append, clearNode, addDisposableListener, EventType } from '../../dom.js';
+import { alert } from '../aria/aria.js';
+import { InputBox } from '../inputbox/inputBox.js';
+import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
+import { Emitter } from '../../../common/event.js';
+import { Disposable, MutableDisposable, DisposableStore } from '../../../common/lifecycle.js';
+import { ThemeIcon } from '../../../common/themables.js';
+import { localizeWithPath } from '../../../../nls.js';
+import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
+class IconSelectBox extends Disposable {
+    static { this.InstanceCount = 0; }
+    constructor(options) {
+        super();
+        this.options = options;
+        this.domId = `icon_select_box_id_${++IconSelectBox.InstanceCount}`;
+        this._onDidSelect = this._register(( new Emitter()));
+        this.onDidSelect = this._onDidSelect.event;
+        this.renderedIcons = [];
+        this.focusedItemIndex = 0;
+        this.numberOfElementsPerRow = 1;
+        this.iconContainerWidth = 36;
+        this.iconContainerHeight = 36;
+        this.domNode = $('.icon-select-box');
+        this._register(this.create());
+    }
+    create() {
+        const disposables = ( new DisposableStore());
+        const iconSelectBoxContainer = append(this.domNode, $('.icon-select-box-container'));
+        iconSelectBoxContainer.style.margin = '10px 15px';
+        const iconSelectInputContainer = append(iconSelectBoxContainer, $('.icon-select-input-container'));
+        iconSelectInputContainer.style.paddingBottom = '10px';
+        this.inputBox = disposables.add(( new InputBox(iconSelectInputContainer, undefined, {
+            placeholder: ( localizeWithPath(
+                'vs/base/browser/ui/icons/iconSelectBox',
+                'iconSelect.placeholder',
+                "Search icons"
+            )),
+            inputBoxStyles: this.options.inputBoxStyles,
+        })));
+        const iconsContainer = this.iconsContainer = $('.icon-select-icons-container', { id: `${this.domId}_icons` });
+        iconsContainer.role = 'listbox';
+        iconsContainer.tabIndex = 0;
+        this.scrollableElement = disposables.add(( new DomScrollableElement(iconsContainer, {
+            useShadows: false,
+            horizontal: 2 ,
+        })));
+        append(iconSelectBoxContainer, this.scrollableElement.getDomNode());
+        if (this.options.showIconInfo) {
+            this.iconIdElement = this._register(( new HighlightedLabel(
+                append(append(iconSelectBoxContainer, $('.icon-select-id-container')), $('.icon-select-id-label'))
+            )));
+        }
+        const iconsDisposables = disposables.add(( new MutableDisposable()));
+        iconsDisposables.value = this.renderIcons(this.options.icons, [], iconsContainer);
+        this.scrollableElement.scanDomNode();
+        disposables.add(this.inputBox.onDidChange(value => {
+            const icons = [], matches = [];
+            for (const icon of this.options.icons) {
+                const match = this.matchesContiguous(value, icon.id);
+                if (match) {
+                    icons.push(icon);
+                    matches.push(match);
+                }
+            }
+            if (icons.length) {
+                iconsDisposables.value = this.renderIcons(icons, matches, iconsContainer);
+                this.scrollableElement?.scanDomNode();
+            }
+        }));
+        this.inputBox.inputElement.role = 'combobox';
+        this.inputBox.inputElement.ariaHasPopup = 'menu';
+        this.inputBox.inputElement.ariaAutoComplete = 'list';
+        this.inputBox.inputElement.ariaExpanded = 'true';
+        this.inputBox.inputElement.setAttribute('aria-controls', iconsContainer.id);
+        return disposables;
+    }
+    renderIcons(icons, matches, container) {
+        const disposables = ( new DisposableStore());
+        clearNode(container);
+        const focusedIcon = this.renderedIcons[this.focusedItemIndex]?.icon;
+        let focusedIconIndex = 0;
+        const renderedIcons = [];
+        if (icons.length) {
+            for (let index = 0; index < icons.length; index++) {
+                const icon = icons[index];
+                const iconContainer = append(container, $('.icon-container', { id: `${this.domId}_icons_${index}` }));
+                iconContainer.style.width = `${this.iconContainerWidth}px`;
+                iconContainer.style.height = `${this.iconContainerHeight}px`;
+                iconContainer.title = icon.id;
+                iconContainer.role = 'button';
+                iconContainer.setAttribute('aria-setsize', `${icons.length}`);
+                iconContainer.setAttribute('aria-posinset', `${index + 1}`);
+                append(iconContainer, $(ThemeIcon.asCSSSelector(icon)));
+                renderedIcons.push({ icon, element: iconContainer, highlightMatches: matches[index] });
+                disposables.add(addDisposableListener(iconContainer, EventType.CLICK, (e) => {
+                    e.stopPropagation();
+                    this.setSelection(index);
+                }));
+                if (icon === focusedIcon) {
+                    focusedIconIndex = index;
+                }
+            }
+        }
+        else {
+            const noResults = ( localizeWithPath(
+                'vs/base/browser/ui/icons/iconSelectBox',
+                'iconSelect.noResults',
+                "No results"
+            ));
+            append(container, $('.icon-no-results', undefined, noResults));
+            alert(noResults);
+        }
+        this.renderedIcons.splice(0, this.renderedIcons.length, ...renderedIcons);
+        this.focusIcon(focusedIconIndex);
+        return disposables;
+    }
+    focusIcon(index) {
+        const existing = this.renderedIcons[this.focusedItemIndex];
+        if (existing) {
+            existing.element.classList.remove('focused');
+        }
+        this.focusedItemIndex = index;
+        const renderedItem = this.renderedIcons[index];
+        if (renderedItem) {
+            renderedItem.element.classList.add('focused');
+        }
+        if (this.inputBox) {
+            if (renderedItem) {
+                this.inputBox.inputElement.setAttribute('aria-activedescendant', renderedItem.element.id);
+            }
+            else {
+                this.inputBox.inputElement.removeAttribute('aria-activedescendant');
+            }
+        }
+        if (this.iconIdElement) {
+            if (renderedItem) {
+                this.iconIdElement.set(renderedItem.icon.id, renderedItem.highlightMatches);
+            }
+            else {
+                this.iconIdElement.set('');
+            }
+        }
+        this.reveal(index);
+    }
+    reveal(index) {
+        if (!this.scrollableElement) {
+            return;
+        }
+        if (index < 0 || index >= this.renderedIcons.length) {
+            return;
+        }
+        const element = this.renderedIcons[index].element;
+        if (!element) {
+            return;
+        }
+        const { height } = this.scrollableElement.getScrollDimensions();
+        const { scrollTop } = this.scrollableElement.getScrollPosition();
+        if (element.offsetTop + this.iconContainerHeight > scrollTop + height) {
+            this.scrollableElement.setScrollPosition({ scrollTop: element.offsetTop + this.iconContainerHeight - height });
+        }
+        else if (element.offsetTop < scrollTop) {
+            this.scrollableElement.setScrollPosition({ scrollTop: element.offsetTop });
+        }
+    }
+    matchesContiguous(word, wordToMatchAgainst) {
+        const matchIndex = wordToMatchAgainst.toLowerCase().indexOf(word.toLowerCase());
+        if (matchIndex !== -1) {
+            return [{ start: matchIndex, end: matchIndex + word.length }];
+        }
+        return null;
+    }
+    layout(dimension) {
+        this.domNode.style.width = `${dimension.width}px`;
+        this.domNode.style.height = `${dimension.height}px`;
+        const iconsContainerWidth = dimension.width - 30;
+        this.numberOfElementsPerRow = Math.floor(iconsContainerWidth / this.iconContainerWidth);
+        if (this.numberOfElementsPerRow === 0) {
+            throw new Error('Insufficient width');
+        }
+        const extraSpace = iconsContainerWidth % this.iconContainerWidth;
+        const iconElementMargin = Math.floor(extraSpace / this.numberOfElementsPerRow);
+        for (const { element } of this.renderedIcons) {
+            element.style.marginRight = `${iconElementMargin}px`;
+        }
+        const containerPadding = extraSpace % this.numberOfElementsPerRow;
+        if (this.iconsContainer) {
+            this.iconsContainer.style.paddingLeft = `${Math.floor(containerPadding / 2)}px`;
+            this.iconsContainer.style.paddingRight = `${Math.ceil(containerPadding / 2)}px`;
+        }
+        if (this.scrollableElement) {
+            this.scrollableElement.getDomNode().style.height = `${this.iconIdElement ? dimension.height - 80 : dimension.height - 40}px`;
+            this.scrollableElement.scanDomNode();
+        }
+    }
+    getFocus() {
+        return [this.focusedItemIndex];
+    }
+    setSelection(index) {
+        if (index < 0 || index >= this.renderedIcons.length) {
+            throw new Error(`Invalid index ${index}`);
+        }
+        this.focusIcon(index);
+        this._onDidSelect.fire(this.renderedIcons[index].icon);
+    }
+    clearInput() {
+        if (this.inputBox) {
+            this.inputBox.value = '';
+        }
+    }
+    focus() {
+        this.inputBox?.focus();
+        this.focusIcon(0);
+    }
+    focusNext() {
+        this.focusIcon((this.focusedItemIndex + 1) % this.renderedIcons.length);
+    }
+    focusPrevious() {
+        this.focusIcon((this.focusedItemIndex - 1 + this.renderedIcons.length) % this.renderedIcons.length);
+    }
+    focusNextRow() {
+        let nextRowIndex = this.focusedItemIndex + this.numberOfElementsPerRow;
+        if (nextRowIndex >= this.renderedIcons.length) {
+            nextRowIndex = (nextRowIndex + 1) % this.numberOfElementsPerRow;
+            nextRowIndex = nextRowIndex >= this.renderedIcons.length ? 0 : nextRowIndex;
+        }
+        this.focusIcon(nextRowIndex);
+    }
+    focusPreviousRow() {
+        let previousRowIndex = this.focusedItemIndex - this.numberOfElementsPerRow;
+        if (previousRowIndex < 0) {
+            const numberOfRows = Math.floor(this.renderedIcons.length / this.numberOfElementsPerRow);
+            previousRowIndex = this.focusedItemIndex + (this.numberOfElementsPerRow * numberOfRows) - 1;
+            previousRowIndex = previousRowIndex < 0
+                ? this.renderedIcons.length - 1
+                : previousRowIndex >= this.renderedIcons.length
+                    ? previousRowIndex - this.numberOfElementsPerRow
+                    : previousRowIndex;
+        }
+        this.focusIcon(previousRowIndex);
+    }
+    getFocusedIcon() {
+        return this.renderedIcons[this.focusedItemIndex].icon;
+    }
+}
+export { IconSelectBox };

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.js

@@ -3,6 +3,8 @@ import { DomEmitter } from '../../event.js';
 import { renderFormattedText, renderText } from '../../formattedTextRenderer.js';
 import { ActionBar } from '../actionbar/actionbar.js';
 import { alert, status } from '../aria/aria.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { ScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Widget } from '../widget.js';
 import { Emitter, Event } from '../../../common/event.js';
@@ -115,7 +117,12 @@ class InputBox extends Widget {
     }
     setTooltip(tooltip) {
         this.tooltip = tooltip;
-        this.input.title = tooltip;
+        if (!this.hover) {
+            this.hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.input, tooltip));
+        }
+        else {
+            this.hover.update(tooltip);
+        }
     }
     setAriaLabel(label) {
         this.ariaLabel = label;
@@ -174,6 +181,17 @@ class InputBox extends Widget {
     isSelectionAtEnd() {
         return this.input.selectionEnd === this.input.value.length && this.input.selectionStart === this.input.selectionEnd;
     }
+    getSelection() {
+        const selectionStart = this.input.selectionStart;
+        if (selectionStart === null) {
+            return null;
+        }
+        const selectionEnd = this.input.selectionEnd ?? selectionStart;
+        return {
+            start: selectionStart,
+            end: selectionEnd,
+        };
+    }
     enable() {
         this.input.removeAttribute('disabled');
     }