Remove concept of detail in Quick Tree (#260486)

I played around with enabling this but with the twisties, checkbox, icon and all that, I didn't think it looked good.

We'll keep `detail` as a Quick Pick feature.

fixes #258657

Author: TylerLeonhardt

src/vs/platform/quickinput/browser/media/quickInput.css

@@ -94,6 +94,10 @@
 	margin: 0;
 }
 
+.quick-input-widget .quick-input-header .monaco-checkbox {
+	margin-top: 6px;
+}
+
 .quick-input-filter {
 	flex-grow: 1;
 	display: flex;
@@ -211,7 +215,11 @@
 
 .quick-input-widget .monaco-checkbox {
 	margin-right: 0;
-	align-self: center;
+}
+
+.quick-input-widget .quick-input-list .monaco-checkbox,
+.quick-input-widget .quick-input-tree .monaco-checkbox {
+	margin-top: 4px;
 }
 
 .quick-input-list .quick-input-list-icon {
@@ -432,13 +440,6 @@
 	opacity: 1;
 }
 
-.quick-input-tree .quick-input-tree-detail {
-	opacity: 0.7;
-	line-height: normal;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
 .quick-input-tree .quick-input-tree-entry-action-bar {
 	display: flex;
 	flex: 0;

src/vs/platform/quickinput/browser/tree/quickInputDelegate.ts

@@ -11,8 +11,8 @@ import { QuickInputTreeRenderer } from './quickInputTreeRenderer.js';
  * Delegate for QuickInputTree that provides height and template information.
  */
 export class QuickInputTreeDelegate<T extends IQuickTreeItem> implements IListVirtualDelegate<T> {
-	getHeight(element: T): number {
-		return element.detail ? 44 : 22; // 22 for single line, 44 for two lines
+	getHeight(_element: T): number {
+		return 22;
 	}
 
 	getTemplateId(_element: T): string {

src/vs/platform/quickinput/browser/tree/quickInputTree.ts

@@ -10,7 +10,6 @@ import { IObjectTreeElement, ITreeNode } from '../../../../base/browser/ui/tree/
 export interface IQuickTreeFilterData {
 	readonly labelHighlights?: IMatch[];
 	readonly descriptionHighlights?: IMatch[];
-	readonly detailHighlights?: IMatch[];
 }
 
 export function getParentNodeState(parentChildren: ITreeNode<IQuickTreeItem | null, IQuickTreeFilterData>[] | IObjectTreeElement<IQuickTreeItem>[]): boolean | 'partial' {

src/vs/platform/quickinput/browser/tree/quickInputTreeAccessibilityProvider.ts

@@ -20,7 +20,7 @@ export class QuickTreeAccessibilityProvider<T extends IQuickTreeItem> implements
 	}
 
 	getAriaLabel(element: T): string {
-		return element.ariaLabel || [element.label, element.description, element.detail]
+		return element.ariaLabel || [element.label, element.description]
 			.map(s => getCodiconAriaLabel(s))
 			.filter(s => !!s)
 			.join(', ');

src/vs/platform/quickinput/browser/tree/quickInputTreeController.ts

@@ -75,7 +75,7 @@ export class QuickInputTreeController extends Disposable {
 						} else if (a.label > b.label) {
 							return 1;
 						}
-						// use description and then detail to break ties
+						// use description to break ties
 						if (a.description && b.description) {
 							if (a.description < b.description) {
 								return -1;
@@ -87,17 +87,6 @@ export class QuickInputTreeController extends Disposable {
 						} else if (b.description) {
 							return 1;
 						}
-						if (a.detail && b.detail) {
-							if (a.detail < b.detail) {
-								return -1;
-							} else if (a.detail > b.detail) {
-								return 1;
-							}
-						} else if (a.detail) {
-							return -1;
-						} else if (b.detail) {
-							return 1;
-						}
 						return 0;
 					}
 				},
@@ -135,17 +124,13 @@ export class QuickInputTreeController extends Disposable {
 	updateFilterOptions(options: {
 		matchOnLabel?: boolean;
 		matchOnDescription?: boolean;
-		matchOnDetail?: boolean;
 	}): void {
 		if (options.matchOnLabel !== undefined) {
 			this._filter.matchOnLabel = options.matchOnLabel;
 		}
 		if (options.matchOnDescription !== undefined) {
 			this._filter.matchOnDescription = options.matchOnDescription;
 		}
-		if (options.matchOnDetail !== undefined) {
-			this._filter.matchOnDetail = options.matchOnDetail;
-		}
 		this._tree.refilter();
 	}
 

src/vs/platform/quickinput/browser/tree/quickInputTreeFilter.ts

@@ -12,24 +12,22 @@ export class QuickInputTreeFilter implements ITreeFilter<IQuickTreeItem, IQuickT
 	filterValue: string = '';
 	matchOnLabel: boolean = true;
 	matchOnDescription: boolean = false;
-	matchOnDetail: boolean = false;
 
 	filter(element: IQuickTreeItem, parentVisibility: TreeVisibility): ITreeFilterDataResult<IQuickTreeFilterData> {
-		if (!this.filterValue || !(this.matchOnLabel || this.matchOnDescription || this.matchOnDetail)) {
+		if (!this.filterValue || !(this.matchOnLabel || this.matchOnDescription)) {
 			return element.children
 				? { visibility: TreeVisibility.Recurse, data: {} }
 				: { visibility: TreeVisibility.Visible, data: {} };
 		}
 
 		const labelHighlights = this.matchOnLabel ? matchesFuzzyIconAware(this.filterValue, parseLabelWithIcons(element.label)) ?? undefined : undefined;
 		const descriptionHighlights = this.matchOnDescription ? matchesFuzzyIconAware(this.filterValue, parseLabelWithIcons(element.description || '')) ?? undefined : undefined;
-		const detailHighlights = this.matchOnDetail ? matchesFuzzyIconAware(this.filterValue, parseLabelWithIcons(element.detail || '')) ?? undefined : undefined;
 
 		const visibility = parentVisibility === TreeVisibility.Visible
 			// Parent is visible because it had matches, so we show all children
 			? TreeVisibility.Visible
 			// This would only happen on Parent is recurse so...
-			: (labelHighlights || descriptionHighlights || detailHighlights)
+			: (labelHighlights || descriptionHighlights)
 				// If we have any highlights, we are visible
 				? TreeVisibility.Visible
 				// Otherwise, we defer to the children or if no children, we are hidden
@@ -41,8 +39,7 @@ export class QuickInputTreeFilter implements ITreeFilter<IQuickTreeItem, IQuickT
 			visibility,
 			data: {
 				labelHighlights,
-				descriptionHighlights,
-				detailHighlights
+				descriptionHighlights
 			}
 		};
 	}

src/vs/platform/quickinput/browser/tree/quickInputTreeRenderer.ts

@@ -29,7 +29,6 @@ export interface IQuickTreeTemplateData {
 	checkbox: TriStateCheckbox;
 	icon: HTMLElement;
 	label: IconLabel;
-	detail: IconLabel;
 	actionBar: ActionBar;
 	toDisposeElement: DisposableStore;
 	toDisposeTemplate: DisposableStore;
@@ -67,13 +66,6 @@ export class QuickInputTreeRenderer<T extends IQuickTreeItem> extends Disposable
 			supportIcons: true,
 			hoverDelegate: this._hoverDelegate
 		}));
-		const row2 = dom.append(rows, $('.quick-input-tree-row'));
-		const detailContainer = dom.append(row2, $('.quick-input-tree-detail'));
-		const detail = store.add(new IconLabel(detailContainer, {
-			supportHighlights: true,
-			supportIcons: true,
-			hoverDelegate: this._hoverDelegate
-		}));
 		const actionBar = store.add(new ActionBar(entry, this._hoverDelegate ? { hoverDelegate: this._hoverDelegate } : undefined));
 		actionBar.domNode.classList.add('quick-input-tree-entry-action-bar');
 		return {
@@ -82,12 +74,11 @@ export class QuickInputTreeRenderer<T extends IQuickTreeItem> extends Disposable
 			checkbox,
 			icon,
 			label,
-			detail,
 			actionBar,
 			toDisposeElement: new DisposableStore(),
 		};
 	}
-	renderElement(node: ITreeNode<T, IQuickTreeFilterData>, index: number, templateData: IQuickTreeTemplateData, details?: ITreeElementRenderDetails): void {
+	renderElement(node: ITreeNode<T, IQuickTreeFilterData>, index: number, templateData: IQuickTreeTemplateData, _details?: ITreeElementRenderDetails): void {
 		const store = templateData.toDisposeElement;
 		const quickTreeItem = node.element;
 
@@ -110,7 +101,7 @@ export class QuickInputTreeRenderer<T extends IQuickTreeItem> extends Disposable
 			templateData.icon.className = quickTreeItem.iconClass ? `quick-input-tree-icon ${quickTreeItem.iconClass}` : '';
 		}
 
-		const { labelHighlights: matches, descriptionHighlights: descriptionMatches, detailHighlights } = node.filterData || {};
+		const { labelHighlights: matches, descriptionHighlights: descriptionMatches } = node.filterData || {};
 
 		// Label and Description
 		let descriptionTitle: IManagedHoverTooltipMarkdownString | undefined;
@@ -138,29 +129,6 @@ export class QuickInputTreeRenderer<T extends IQuickTreeItem> extends Disposable
 			}
 		);
 
-		// Detail
-		if (!quickTreeItem.detail) {
-			templateData.detail.element.style.display = 'none';
-		} else {
-			// If we have a tooltip, we want that to be shown and not any other hover
-			const title = {
-				markdown: {
-					value: escape(quickTreeItem.detail),
-					supportThemeIcons: true
-				},
-				markdownNotSupportedFallback: quickTreeItem.detail
-			};
-			templateData.detail.setLabel(
-				quickTreeItem.detail,
-				undefined,
-				{
-					matches: detailHighlights,
-					title,
-					labelEscapeNewLines: true
-				}
-			);
-		}
-
 		// Action Bar
 		const buttons = quickTreeItem.buttons;
 		if (buttons && buttons.length) {

src/vs/platform/quickinput/browser/tree/quickTree.ts

@@ -21,7 +21,6 @@ export class QuickTree<T extends IQuickTreeItem> extends QuickInput implements I
 	private readonly _ariaLabel = observableValue<string | undefined>('ariaLabel', undefined);
 	private readonly _placeholder = observableValue<string | undefined>('placeholder', undefined);
 	private readonly _matchOnDescription = observableValue('matchOnDescription', false);
-	private readonly _matchOnDetail = observableValue('matchOnDetail', false);
 	private readonly _matchOnLabel = observableValue('matchOnLabel', true);
 	private readonly _activeItems = observableValue<readonly T[]>('activeItems', []);
 	private readonly _itemTree = observableValue<ReadonlyArray<T>>('itemTree', []);
@@ -53,9 +52,6 @@ export class QuickTree<T extends IQuickTreeItem> extends QuickInput implements I
 	get matchOnDescription(): boolean { return this._matchOnDescription.get(); }
 	set matchOnDescription(matchOnDescription: boolean) { this._matchOnDescription.set(matchOnDescription, undefined); }
 
-	get matchOnDetail(): boolean { return this._matchOnDetail.get(); }
-	set matchOnDetail(matchOnDetail: boolean) { this._matchOnDetail.set(matchOnDetail, undefined); }
-
 	get matchOnLabel(): boolean { return this._matchOnLabel.get(); }
 	set matchOnLabel(matchOnLabel: boolean) { this._matchOnLabel.set(matchOnLabel, undefined); }
 
@@ -199,8 +195,7 @@ export class QuickTree<T extends IQuickTreeItem> extends QuickInput implements I
 		this.registerVisibleAutorun((reader) => {
 			const matchOnLabel = this._matchOnLabel.read(reader);
 			const matchOnDescription = this._matchOnDescription.read(reader);
-			const matchOnDetail = this._matchOnDetail.read(reader);
-			this.ui.tree.updateFilterOptions({ matchOnLabel, matchOnDescription, matchOnDetail });
+			this.ui.tree.updateFilterOptions({ matchOnLabel, matchOnDescription });
 		});
 		this.registerVisibleAutorun((reader) => {
 			const itemTree = this._itemTree.read(reader);

src/vs/platform/quickinput/common/quickInput.ts

@@ -16,9 +16,12 @@ import Severity from '../../../base/common/severity.js';
 import { URI } from '../../../base/common/uri.js';
 import { IMarkdownString } from '../../../base/common/htmlContent.js';
 
-export interface IQuickPickItemHighlights {
+export interface IQuickItemHighlights {
 	label?: IMatch[];
 	description?: IMatch[];
+}
+
+export interface IQuickPickItemHighlights extends IQuickItemHighlights {
 	detail?: IMatch[];
 }
 
@@ -32,10 +35,6 @@ export interface IQuickItem {
 	label: string;
 	ariaLabel?: string;
 	description?: string;
-	/**
-	 * The detail text of the quick pick item. Shown as the second line.
-	 */
-	detail?: string;
 	/**
 	 * Whether the item is displayed in italics.
 	 */
@@ -47,7 +46,7 @@ export interface IQuickItem {
 	iconClasses?: readonly string[];
 	iconPath?: { dark: URI; light?: URI };
 	iconClass?: string;
-	highlights?: IQuickPickItemHighlights;
+	highlights?: IQuickItemHighlights;
 	buttons?: readonly IQuickInputButton[];
 	/**
 	 * Used when we're in multi-select mode. Renders a disabled checkbox.
@@ -63,10 +62,15 @@ export interface IQuickPickItem extends IQuickItem {
 	 * The type of the quick pick item. Used to distinguish between 'item' and 'separator'
 	 */
 	type?: 'item';
+	/**
+	 * The detail text of the quick pick item. Shown as the second line.
+	 */
+	detail?: string;
 	/**
 	 * The tooltip for the quick pick item.
 	 */
 	tooltip?: string | IMarkdownString;
+	highlights?: IQuickPickItemHighlights;
 	/**
 	 * Allows to show a keybinding next to the item to indicate
 	 * how the item can be triggered outside of the picker using
@@ -1035,11 +1039,6 @@ export interface IQuickTree<T extends IQuickTreeItem> extends IQuickInput {
 	 */
 	matchOnDescription: boolean;
 
-	/**
-	 * Whether to match on the detail of the items.
-	 */
-	matchOnDetail: boolean;
-
 	/**
 	 * Whether to match on the label of the items.
 	 */
@@ -1154,11 +1153,6 @@ export interface IQuickTreeItem extends IQuickItem {
 	 */
 	checked?: boolean | 'partial';
 
-	/**
-	 * TODO: Bring this back
-	 */
-	detail?: undefined;
-
 	/**
 	 * The collapsible state of the tree item. Defaults to 'Expanded' if children are present.
 	 */