Workbench hover to align and correctly apply delay setting (microsoft#204871)

* Workbench hover

* 💄

* placement element for tabs and breadcrumbs

* enableInstantHoverAfterRecentlyShown

* 💄

* adobt custom hover in all toolbars and labels

* dropdown hover

* widgets

* dispose hover delegate uf own instance

* testing hover delegate (might be a better way of doing this?)

* nullHoverDelegateFactory

* registering the disposables and handing down options

* Hygiene

* fix quickinput

Author: benibenj

src/vs/base/browser/ui/actionbar/actionViewItems.ts

@@ -9,6 +9,7 @@ import { addDisposableListener, EventHelper, EventLike, EventType } from 'vs/bas
 import { EventType as TouchEventType, Gesture } from 'vs/base/browser/touch';
 import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
 import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
 import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { ISelectBoxOptions, ISelectBoxStyles, ISelectOptionItem, SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
@@ -224,16 +225,14 @@ export class BaseActionViewItem extends Disposable implements IActionViewItem {
 		}
 		const title = this.getTooltip() ?? '';
 		this.updateAriaLabel();
-		if (!this.options.hoverDelegate) {
-			this.element.title = title;
+
+		this.element.title = '';
+		if (!this.customHover) {
+			const hoverDelegate = this.options.hoverDelegate ?? getDefaultHoverDelegate('element');
+			this.customHover = setupCustomHover(hoverDelegate, this.element, title);
+			this._store.add(this.customHover);
 		} else {
-			this.element.title = '';
-			if (!this.customHover) {
-				this.customHover = setupCustomHover(this.options.hoverDelegate, this.element, title);
-				this._store.add(this.customHover);
-			} else {
-				this.customHover.update(title);
-			}
+			this.customHover.update(title);
 		}
 	}
 

src/vs/base/browser/ui/actionbar/actionbar.ts

@@ -6,6 +6,7 @@
 import * as DOM from 'vs/base/browser/dom';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { ActionViewItem, BaseActionViewItem, IActionViewItemOptions } from 'vs/base/browser/ui/actionbar/actionViewItems';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
 import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
 import { ActionRunner, IAction, IActionRunner, IRunEvent, Separator } from 'vs/base/common/actions';
 import { Emitter } from 'vs/base/common/event';
@@ -67,6 +68,7 @@ export interface IActionOptions extends IActionViewItemOptions {
 export class ActionBar extends Disposable implements IActionRunner {
 
 	private readonly options: IActionBarOptions;
+	private readonly _hoverDelegate: IHoverDelegate;
 
 	private _actionRunner: IActionRunner;
 	private readonly _actionRunnerDisposables = this._register(new DisposableStore());
@@ -117,6 +119,8 @@ export class ActionBar extends Disposable implements IActionRunner {
 			keys: this.options.triggerKeys?.keys ?? [KeyCode.Enter, KeyCode.Space]
 		};
 
+		this._hoverDelegate = options.hoverDelegate ?? this._register(getDefaultHoverDelegate('element', true));
+
 		if (this.options.actionRunner) {
 			this._actionRunner = this.options.actionRunner;
 		} else {
@@ -358,7 +362,7 @@ export class ActionBar extends Disposable implements IActionRunner {
 
 			let item: IActionViewItem | undefined;
 
-			const viewItemOptions = { hoverDelegate: this.options.hoverDelegate, ...options };
+			const viewItemOptions = { hoverDelegate: this._hoverDelegate, ...options };
 			if (this.options.actionViewItemProvider) {
 				item = this.options.actionViewItemProvider(action, viewItemOptions);
 			}

src/vs/base/browser/ui/button/button.ts

@@ -9,6 +9,8 @@ import { sanitize } from 'vs/base/browser/dompurify/dompurify';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { renderMarkdown, renderStringAsPlaintext } from 'vs/base/browser/markdownRenderer';
 import { Gesture, EventType as TouchEventType } from 'vs/base/browser/touch';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
+import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
 import { Action, IAction, IActionRunner } from 'vs/base/common/actions';
 import { Codicon } from 'vs/base/common/codicons';
@@ -74,6 +76,7 @@ export class Button extends Disposable implements IButton {
 	protected _label: string | IMarkdownString = '';
 	protected _labelElement: HTMLElement | undefined;
 	protected _labelShortElement: HTMLElement | undefined;
+	private _hover: ICustomHover | undefined;
 
 	private _onDidClick = this._register(new Emitter<Event>());
 	get onDidClick(): BaseEvent<Event> { return this._onDidClick.event; }
@@ -240,10 +243,16 @@ export class Button extends Disposable implements IButton {
 			}
 		}
 
+		let title: string = '';
 		if (typeof this.options.title === 'string') {
-			this._element.title = this.options.title;
+			title = this.options.title;
 		} else if (this.options.title) {
-			this._element.title = renderStringAsPlaintext(value);
+			title = renderStringAsPlaintext(value);
+		}
+		if (!this._hover) {
+			this._hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this._element, title));
+		} else {
+			this._hover.update(title);
 		}
 
 		if (typeof this.options.ariaLabel === 'string') {
@@ -348,7 +357,7 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 		this.separator.style.backgroundColor = options.buttonSeparator ?? '';
 
 		this.dropdownButton = this._register(new Button(this.element, { ...options, title: false, supportIcons: true }));
-		this.dropdownButton.element.title = localize("button dropdown more actions", 'More Actions...');
+		this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.dropdownButton.element, localize("button dropdown more actions", 'More Actions...')));
 		this.dropdownButton.element.setAttribute('aria-haspopup', 'true');
 		this.dropdownButton.element.setAttribute('aria-expanded', 'false');
 		this.dropdownButton.element.classList.add('monaco-dropdown-button');

src/vs/base/browser/ui/dropdown/dropdown.ts

@@ -8,6 +8,8 @@ import { $, addDisposableListener, append, EventHelper, EventType, isMouseEvent
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { EventType as GestureEventType, Gesture } from 'vs/base/browser/touch';
 import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
+import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { IMenuOptions } from 'vs/base/browser/ui/menu/menu';
 import { ActionRunner, IAction } from 'vs/base/common/actions';
 import { Emitter } from 'vs/base/common/event';
@@ -34,6 +36,8 @@ class BaseDropdown extends ActionRunner {
 	private _onDidChangeVisibility = this._register(new Emitter<boolean>());
 	readonly onDidChangeVisibility = this._onDidChangeVisibility.event;
 
+	private hover: ICustomHover | undefined;
+
 	constructor(container: HTMLElement, options: IBaseDropdownOptions) {
 		super();
 
@@ -101,7 +105,11 @@ class BaseDropdown extends ActionRunner {
 
 	set tooltip(tooltip: string) {
 		if (this._label) {
-			this._label.title = tooltip;
+			if (!this.hover) {
+				this.hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this._label, tooltip));
+			} else {
+				this.hover.update(tooltip);
+			}
 		}
 	}
 

src/vs/base/browser/ui/dropdown/dropdownActionViewItem.ts

@@ -19,6 +19,8 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { ResolvedKeybinding } from 'vs/base/common/keybindings';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import 'vs/css!./dropdown';
+import { setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
 
 export interface IKeybindingProvider {
 	(action: IAction): ResolvedKeybinding | undefined;
@@ -90,7 +92,9 @@ export class DropdownMenuActionViewItem extends BaseActionViewItem {
 			this.element.setAttribute('role', 'button');
 			this.element.setAttribute('aria-haspopup', 'true');
 			this.element.setAttribute('aria-expanded', 'false');
-			this.element.title = this._action.label || '';
+			if (this._action.label) {
+				this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.element, this._action.label));
+			}
 			this.element.ariaLabel = this._action.label || '';
 
 			return null;
@@ -203,7 +207,7 @@ export class ActionWithDropdownActionViewItem extends ActionViewItem {
 			separator.classList.toggle('prominent', menuActionClassNames.includes('prominent'));
 			append(this.element, separator);
 
-			this.dropdownMenuActionViewItem = this._register(new DropdownMenuActionViewItem(this._register(new Action('dropdownAction', nls.localize('moreActions', "More Actions..."))), menuActionsProvider, this.contextMenuProvider, { classNames: ['dropdown', ...ThemeIcon.asClassNameArray(Codicon.dropDownButton), ...menuActionClassNames] }));
+			this.dropdownMenuActionViewItem = this._register(new DropdownMenuActionViewItem(this._register(new Action('dropdownAction', nls.localize('moreActions', "More Actions..."))), menuActionsProvider, this.contextMenuProvider, { classNames: ['dropdown', ...ThemeIcon.asClassNameArray(Codicon.dropDownButton), ...menuActionClassNames], hoverDelegate: this.options.hoverDelegate }));
 			this.dropdownMenuActionViewItem.render(this.element);
 
 			this._register(addDisposableListener(this.element, EventType.KEY_DOWN, e => {

src/vs/base/browser/ui/hover/hoverDelegate.ts

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IHoverDelegate, IScopedHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
+import { Lazy } from 'vs/base/common/lazy';
+
+const nullHoverDelegateFactory = () => ({
+	get delay(): number { return -1; },
+	dispose: () => { },
+	showHover: () => { return undefined; },
+});
+
+let hoverDelegateFactory: (placement: 'mouse' | 'element', enableInstantHover: boolean) => IScopedHoverDelegate = nullHoverDelegateFactory;
+const defaultHoverDelegateMouse = new Lazy<IHoverDelegate>(() => hoverDelegateFactory('mouse', false));
+const defaultHoverDelegateElement = new Lazy<IHoverDelegate>(() => hoverDelegateFactory('element', false));
+
+export function setHoverDelegateFactory(hoverDelegateProvider: ((placement: 'mouse' | 'element', enableInstantHover: boolean) => IScopedHoverDelegate)): void {
+	hoverDelegateFactory = hoverDelegateProvider;
+}
+
+export function getDefaultHoverDelegate(placement: 'mouse' | 'element'): IHoverDelegate;
+export function getDefaultHoverDelegate(placement: 'mouse' | 'element', enableInstantHover: true): IScopedHoverDelegate;
+export function getDefaultHoverDelegate(placement: 'mouse' | 'element', enableInstantHover?: boolean): IHoverDelegate | IScopedHoverDelegate {
+	if (enableInstantHover) {
+		// If instant hover is enabled, the consumer is responsible for disposing the hover delegate
+		return hoverDelegateFactory(placement, true);
+	}
+
+	if (placement === 'element') {
+		return defaultHoverDelegateElement.value;
+	}
+	return defaultHoverDelegateMouse.value;
+}

src/vs/base/browser/ui/iconLabel/iconHoverDelegate.ts

@@ -64,6 +64,8 @@ export interface IHoverDelegate {
 	placement?: 'mouse' | 'element';
 }
 
+export interface IScopedHoverDelegate extends IHoverDelegate, IDisposable { }
+
 export interface IHoverWidget extends IDisposable {
 	readonly isDisposed: boolean;
 }

src/vs/base/browser/ui/iconLabel/iconLabel.ts

@@ -7,11 +7,12 @@ import 'vs/css!./iconlabel';
 import * as dom from 'vs/base/browser/dom';
 import { HighlightedLabel } from 'vs/base/browser/ui/highlightedlabel/highlightedLabel';
 import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
-import { ITooltipMarkdownString, setupCustomHover, setupNativeHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
+import { ITooltipMarkdownString, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { IMatch } from 'vs/base/common/filters';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { equals } from 'vs/base/common/objects';
 import { Range } from 'vs/base/common/range';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
 
 export interface IIconLabelCreationOptions {
 	readonly supportHighlights?: boolean;
@@ -94,7 +95,7 @@ export class IconLabel extends Disposable {
 
 	private readonly labelContainer: HTMLElement;
 
-	private readonly hoverDelegate: IHoverDelegate | undefined;
+	private readonly hoverDelegate: IHoverDelegate;
 	private readonly customHovers: Map<HTMLElement, IDisposable> = new Map();
 
 	constructor(container: HTMLElement, options?: IIconLabelCreationOptions) {
@@ -113,7 +114,7 @@ export class IconLabel extends Disposable {
 			this.nameNode = new Label(this.nameContainer);
 		}
 
-		this.hoverDelegate = options?.hoverDelegate;
+		this.hoverDelegate = options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
 	}
 
 	get element(): HTMLElement {
@@ -186,13 +187,9 @@ export class IconLabel extends Disposable {
 			return;
 		}
 
-		if (!this.hoverDelegate) {
-			setupNativeHover(htmlElement, tooltip);
-		} else {
-			const hoverDisposable = setupCustomHover(this.hoverDelegate, htmlElement, tooltip);
-			if (hoverDisposable) {
-				this.customHovers.set(htmlElement, hoverDisposable);
-			}
+		const hoverDisposable = setupCustomHover(this.hoverDelegate, htmlElement, tooltip);
+		if (hoverDisposable) {
+			this.customHovers.set(htmlElement, hoverDisposable);
 		}
 	}
 

src/vs/base/browser/ui/inputbox/inputBox.ts

@@ -11,6 +11,8 @@ import { MarkdownRenderOptions } from 'vs/base/browser/markdownRenderer';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import * as aria from 'vs/base/browser/ui/aria/aria';
 import { AnchorAlignment, IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
+import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { Widget } from 'vs/base/browser/ui/widget';
 import { IAction } from 'vs/base/common/actions';
@@ -111,6 +113,7 @@ export class InputBox extends Widget {
 	private cachedContentHeight: number | undefined;
 	private maxHeight: number = Number.POSITIVE_INFINITY;
 	private scrollableElement: ScrollableElement | undefined;
+	private hover: ICustomHover | undefined;
 
 	private _onDidChange = this._register(new Emitter<string>());
 	public readonly onDidChange: Event<string> = this._onDidChange.event;
@@ -230,7 +233,11 @@ export class InputBox extends Widget {
 
 	public setTooltip(tooltip: string): void {
 		this.tooltip = tooltip;
-		this.input.title = tooltip;
+		if (!this.hover) {
+			this.hover = this._register(setupCustomHover(getDefaultHoverDelegate('element'), this.input, tooltip));
+		} else {
+			this.hover.update(tooltip);
+		}
 	}
 
 	public setAriaLabel(label: string): void {

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -9,6 +9,8 @@ import { IContentActionHandler } from 'vs/base/browser/formattedTextRenderer';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { renderMarkdown } from 'vs/base/browser/markdownRenderer';
 import { AnchorPosition, IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
+import { getDefaultHoverDelegate } from 'vs/base/browser/ui/hover/hoverDelegate';
+import { ICustomHover, setupCustomHover } from 'vs/base/browser/ui/iconLabel/iconLabelHover';
 import { IListEvent, IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { List } from 'vs/base/browser/ui/list/listWidget';
 import { ISelectBoxDelegate, ISelectBoxOptions, ISelectBoxStyles, ISelectData, ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox';
@@ -101,6 +103,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 	private selectionDetailsPane!: HTMLElement;
 	private _skipLayout: boolean = false;
 	private _cachedMaxDetailsHeight?: number;
+	private _hover: ICustomHover;
 
 	private _sticky: boolean = false; // for dev purposes only
 
@@ -131,6 +134,8 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 			this.selectElement.setAttribute('aria-description', this.selectBoxOptions.ariaDescription);
 		}
 
+		this._hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.selectElement, ''));
+
 		this._onDidSelect = new Emitter<ISelectData>();
 		this._register(this._onDidSelect);
 
@@ -199,7 +204,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 				selected: e.target.value
 			});
 			if (!!this.options[this.selected] && !!this.options[this.selected].text) {
-				this.selectElement.title = this.options[this.selected].text;
+				this._hover.update(this.options[this.selected].text);
 			}
 		}));
 
@@ -309,7 +314,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 
 		this.selectElement.selectedIndex = this.selected;
 		if (!!this.options[this.selected] && !!this.options[this.selected].text) {
-			this.selectElement.title = this.options[this.selected].text;
+			this._hover.update(this.options[this.selected].text);
 		}
 	}
 
@@ -837,7 +842,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 
 				});
 				if (!!this.options[this.selected] && !!this.options[this.selected].text) {
-					this.selectElement.title = this.options[this.selected].text;
+					this._hover.update(this.options[this.selected].text);
 				}
 			}
 
@@ -936,7 +941,7 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 				selected: this.options[this.selected].text
 			});
 			if (!!this.options[this.selected] && !!this.options[this.selected].text) {
-				this.selectElement.title = this.options[this.selected].text;
+				this._hover.update(this.options[this.selected].text);
 			}
 		}