Support drag and drop for symbols in breadcrumbs, outline and chat (microsoft#234372)

* Support DnD for breadcrumbs and symbols

* symbol data type

* Refactor DocumentSymbolDragAndDrop to remove model provider dependency

Author: benibenj

src/vs/platform/dnd/browser/dnd.ts

@@ -29,7 +29,8 @@ import { Registry } from '../../registry/common/platform.js';
 
 export const CodeDataTransfers = {
 	EDITORS: 'CodeEditors',
-	FILES: 'CodeFiles'
+	FILES: 'CodeFiles',
+	SYMBOLS: 'application/vnd.code.symbols'
 };
 
 export interface IDraggedResourceEditorInput extends IBaseTextResourceEditorInput {
@@ -400,6 +401,31 @@ export class LocalSelectionTransfer<T> {
 	}
 }
 
+export interface DocumentSymbolTransferData {
+	name: string;
+	fsPath: string;
+	range: {
+		startLineNumber: number;
+		startColumn: number;
+		endLineNumber: number;
+		endColumn: number;
+	};
+	kind: number;
+}
+
+export function extractSymbolDropData(e: DragEvent): DocumentSymbolTransferData[] {
+	const rawSymbolsData = e.dataTransfer?.getData(CodeDataTransfers.SYMBOLS);
+	if (rawSymbolsData) {
+		try {
+			return JSON.parse(rawSymbolsData);
+		} catch (error) {
+			// Invalid transfer
+		}
+	}
+
+	return [];
+}
+
 /**
  * A helper to get access to Electrons `webUtils.getPathForFile` function
  * in a safe way without crashing the application when running in the web.

src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts

@@ -8,8 +8,8 @@ import { StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
 import { BreadcrumbsItem, BreadcrumbsWidget, IBreadcrumbsItemEvent, IBreadcrumbsWidgetStyles } from '../../../../base/browser/ui/breadcrumbs/breadcrumbsWidget.js';
 import { timeout } from '../../../../base/common/async.js';
 import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
-import { combinedDisposable, DisposableStore, MutableDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
-import { extUri } from '../../../../base/common/resources.js';
+import { combinedDisposable, DisposableStore, IDisposable, MutableDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
+import { basename, extUri } from '../../../../base/common/resources.js';
 import { URI } from '../../../../base/common/uri.js';
 import './media/breadcrumbscontrol.css';
 import { localize, localize2 } from '../../../../nls.js';
@@ -40,6 +40,11 @@ import { defaultBreadcrumbsWidgetStyles } from '../../../../platform/theme/brows
 import { Emitter } from '../../../../base/common/event.js';
 import { IHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegate.js';
 import { getDefaultHoverDelegate } from '../../../../base/browser/ui/hover/hoverDelegateFactory.js';
+import { DataTransfers } from '../../../../base/browser/dnd.js';
+import { $ } from '../../../../base/browser/dom.js';
+import { OutlineElement } from '../../../../editor/contrib/documentSymbols/browser/outlineModel.js';
+import { CodeDataTransfers, DocumentSymbolTransferData } from '../../../../platform/dnd/browser/dnd.js';
+import { withSelection } from '../../../../platform/opener/common/opener.js';
 
 class OutlineItem extends BreadcrumbsItem {
 
@@ -96,8 +101,22 @@ class OutlineItem extends BreadcrumbsItem {
 		}, 0, template, undefined);
 
 		this._disposables.add(toDisposable(() => { renderer.disposeTemplate(template); }));
-	}
 
+		if (element instanceof OutlineElement && outline.uri) {
+			const symbolUri = withSelection(outline.uri, element.symbol.range);
+			const symbolTransferData: DocumentSymbolTransferData = {
+				name: element.symbol.name,
+				fsPath: outline.uri.fsPath,
+				range: element.symbol.range,
+				kind: element.symbol.kind
+			};
+			const dataTransfers: DataTransfer[] = [
+				[CodeDataTransfers.SYMBOLS, [symbolTransferData]],
+				[DataTransfers.RESOURCES, [symbolUri]]
+			];
+			this._disposables.add(createBreadcrumbDndObserver(container, element.symbol.name, symbolUri.toString(), dataTransfers));
+		}
+	}
 }
 
 class FileItem extends BreadcrumbsItem {
@@ -139,9 +158,53 @@ class FileItem extends BreadcrumbsItem {
 		});
 		container.classList.add(FileKind[this.element.kind].toLowerCase());
 		this._disposables.add(label);
+
+		const dataTransfers: DataTransfer[] = [
+			[CodeDataTransfers.FILES, [this.element.uri.fsPath]],
+			[DataTransfers.RESOURCES, [this.element.uri.toString()]],
+		];
+		const dndObserver = createBreadcrumbDndObserver(container, basename(this.element.uri), this.element.uri.toString(), dataTransfers);
+		this._disposables.add(dndObserver);
 	}
 }
 
+type DataTransfer = [string, any[]];
+
+function createBreadcrumbDndObserver(container: HTMLElement, label: string, textData: string, dataTransfers: DataTransfer[]): IDisposable {
+	container.draggable = true;
+
+	return new dom.DragAndDropObserver(container, {
+		onDragStart: event => {
+			if (!event.dataTransfer) {
+				return;
+			}
+
+			// Set data transfer
+			event.dataTransfer.effectAllowed = 'copyMove';
+			event.dataTransfer.setData(DataTransfers.TEXT, textData);
+			for (const [type, data] of dataTransfers) {
+				event.dataTransfer.setData(type, JSON.stringify(data));
+			}
+
+			// Create drag image and remove when dropped
+			const dragImage = $('.monaco-drag-image');
+			dragImage.textContent = label;
+
+			const getDragImageContainer = (e: HTMLElement | null) => {
+				while (e && !e.classList.contains('monaco-workbench')) {
+					e = e.parentElement;
+				}
+				return e || container.ownerDocument;
+			};
+
+			const dragContainer = getDragImageContainer(container);
+			dragContainer.appendChild(dragImage);
+			event.dataTransfer.setDragImage(dragImage, -10, -10);
+			setTimeout(() => dragImage.remove(), 0);
+		}
+	});
+}
+
 export interface IBreadcrumbsControlOptions {
 	readonly showFileIcons: boolean;
 	readonly showSymbolIcons: boolean;

src/vs/workbench/contrib/chat/browser/chatDragAndDrop.ts

@@ -12,8 +12,10 @@ import { IDisposable } from '../../../../base/common/lifecycle.js';
 import { Mimes } from '../../../../base/common/mime.js';
 import { basename, joinPath } from '../../../../base/common/resources.js';
 import { URI } from '../../../../base/common/uri.js';
+import { IRange } from '../../../../editor/common/core/range.js';
+import { SymbolKinds } from '../../../../editor/common/languages.js';
 import { localize } from '../../../../nls.js';
-import { containsDragType, extractEditorsDropData, IDraggedResourceEditorInput } from '../../../../platform/dnd/browser/dnd.js';
+import { CodeDataTransfers, containsDragType, DocumentSymbolTransferData, extractEditorsDropData, extractSymbolDropData, IDraggedResourceEditorInput } from '../../../../platform/dnd/browser/dnd.js';
 import { FileType, IFileService, IFileSystemProvider } from '../../../../platform/files/common/files.js';
 import { IThemeService, Themable } from '../../../../platform/theme/common/themeService.js';
 import { EditorInput } from '../../../common/editor/editorInput.js';
@@ -26,7 +28,8 @@ enum ChatDragAndDropType {
 	FILE_INTERNAL,
 	FILE_EXTERNAL,
 	FOLDER,
-	IMAGE
+	IMAGE,
+	SYMBOL
 }
 
 export class ChatDragAndDrop extends Themable {
@@ -155,6 +158,8 @@ export class ChatDragAndDrop extends Themable {
 		// This is an esstimation based on the datatransfer types/items
 		if (this.isImageDnd(e)) {
 			return this.extensionService.extensions.some(ext => isProposedApiEnabled(ext, 'chatReferenceBinaryData')) ? ChatDragAndDropType.IMAGE : undefined;
+		} else if (containsDragType(e, CodeDataTransfers.SYMBOLS)) {
+			return ChatDragAndDropType.SYMBOL;
 		} else if (containsDragType(e, DataTransfers.FILES)) {
 			return ChatDragAndDropType.FILE_EXTERNAL;
 		} else if (containsDragType(e, DataTransfers.INTERNAL_URI_LIST)) {
@@ -178,6 +183,7 @@ export class ChatDragAndDrop extends Themable {
 			case ChatDragAndDropType.FILE_EXTERNAL: return localize('file', 'File');
 			case ChatDragAndDropType.FOLDER: return localize('folder', 'Folder');
 			case ChatDragAndDropType.IMAGE: return localize('image', 'Image');
+			case ChatDragAndDropType.SYMBOL: return localize('symbol', 'Symbol');
 		}
 	}
 
@@ -209,6 +215,11 @@ export class ChatDragAndDrop extends Themable {
 			return [];
 		}
 
+		if (containsDragType(e, CodeDataTransfers.SYMBOLS)) {
+			const data = extractSymbolDropData(e);
+			return this.resolveSymbolsAttachContext(data);
+		}
+
 		const data = extractEditorsDropData(e);
 		return coalesce(await Promise.all(data.map(editorInput => {
 			return this.resolveAttachContext(editorInput);
@@ -245,6 +256,20 @@ export class ChatDragAndDrop extends Themable {
 		return getResourceAttachContext(editor.resource, stat.isDirectory);
 	}
 
+	private resolveSymbolsAttachContext(symbols: DocumentSymbolTransferData[]): IChatRequestVariableEntry[] {
+		return symbols.map(symbol => {
+			const resource = URI.file(symbol.fsPath);
+			return {
+				kind: 'symbol',
+				id: symbolId(resource, symbol.range),
+				value: { uri: resource, range: symbol.range },
+				fullName: `$(${SymbolKinds.toIcon(symbol.kind).id}) ${symbol.name}`,
+				name: symbol.name,
+				isDynamic: true
+			};
+		});
+	}
+
 	private setOverlay(target: HTMLElement, type: ChatDragAndDropType | undefined): void {
 		// Remove any previous overlay text
 		this.overlayText?.remove();
@@ -390,3 +415,14 @@ function getImageAttachContext(editor: EditorInput | IDraggedResourceEditorInput
 
 	return undefined;
 }
+
+function symbolId(resource: URI, range?: IRange): string {
+	let rangePart = '';
+	if (range) {
+		rangePart = `:${range.startLineNumber}`;
+		if (range.startLineNumber !== range.endLineNumber) {
+			rangePart += `-${range.endLineNumber}`;
+		}
+	}
+	return resource.fsPath + rangePart;
+}

src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsOutline.ts

@@ -10,7 +10,7 @@ import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } fr
 import { Registry } from '../../../../../platform/registry/common/platform.js';
 import { LifecyclePhase } from '../../../../services/lifecycle/common/lifecycle.js';
 import { IEditorPane } from '../../../../common/editor.js';
-import { DocumentSymbolComparator, DocumentSymbolAccessibilityProvider, DocumentSymbolRenderer, DocumentSymbolFilter, DocumentSymbolGroupRenderer, DocumentSymbolIdentityProvider, DocumentSymbolNavigationLabelProvider, DocumentSymbolVirtualDelegate } from './documentSymbolsTree.js';
+import { DocumentSymbolComparator, DocumentSymbolAccessibilityProvider, DocumentSymbolRenderer, DocumentSymbolFilter, DocumentSymbolGroupRenderer, DocumentSymbolIdentityProvider, DocumentSymbolNavigationLabelProvider, DocumentSymbolVirtualDelegate, DocumentSymbolDragAndDrop } from './documentSymbolsTree.js';
 import { ICodeEditor, isCodeEditor, isDiffEditor } from '../../../../../editor/browser/editorBrowser.js';
 import { OutlineGroup, OutlineElement, OutlineModel, TreeElement, IOutlineMarker, IOutlineModelService } from '../../../../../editor/contrib/documentSymbols/browser/outlineModel.js';
 import { CancellationToken, CancellationTokenSource } from '../../../../../base/common/cancellation.js';
@@ -169,7 +169,8 @@ class DocumentSymbolsOutline implements IOutline<DocumentSymbolItem> {
 				? instantiationService.createInstance(DocumentSymbolFilter, 'outline')
 				: target === OutlineTarget.Breadcrumbs
 					? instantiationService.createInstance(DocumentSymbolFilter, 'breadcrumbs')
-					: undefined
+					: undefined,
+			dnd: new DocumentSymbolDragAndDrop(),
 		};
 
 		this.config = {

src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.ts

@@ -8,10 +8,10 @@ import '../../../../../editor/contrib/symbolIcons/browser/symbolIcons.js'; // Th
 import * as dom from '../../../../../base/browser/dom.js';
 import { HighlightedLabel } from '../../../../../base/browser/ui/highlightedlabel/highlightedLabel.js';
 import { IIdentityProvider, IKeyboardNavigationLabelProvider, IListVirtualDelegate } from '../../../../../base/browser/ui/list/list.js';
-import { ITreeNode, ITreeRenderer, ITreeFilter } from '../../../../../base/browser/ui/tree/tree.js';
+import { ITreeNode, ITreeRenderer, ITreeFilter, ITreeDragAndDrop, ITreeDragOverReaction } from '../../../../../base/browser/ui/tree/tree.js';
 import { createMatches, FuzzyScore } from '../../../../../base/common/filters.js';
 import { Range } from '../../../../../editor/common/core/range.js';
-import { SymbolKind, SymbolKinds, SymbolTag, getAriaLabelForSymbol, symbolKindNames } from '../../../../../editor/common/languages.js';
+import { DocumentSymbol, SymbolKind, SymbolKinds, SymbolTag, getAriaLabelForSymbol, symbolKindNames } from '../../../../../editor/common/languages.js';
 import { OutlineElement, OutlineGroup, OutlineModel } from '../../../../../editor/contrib/documentSymbols/browser/outlineModel.js';
 import { localize } from '../../../../../nls.js';
 import { IconLabel, IIconLabelValueOptions } from '../../../../../base/browser/ui/iconLabel/iconLabel.js';
@@ -24,6 +24,11 @@ import { IListAccessibilityProvider } from '../../../../../base/browser/ui/list/
 import { IOutlineComparator, OutlineConfigKeys, OutlineTarget } from '../../../../services/outline/browser/outline.js';
 import { ThemeIcon } from '../../../../../base/common/themables.js';
 import { mainWindow } from '../../../../../base/browser/window.js';
+import { IDragAndDropData, DataTransfers } from '../../../../../base/browser/dnd.js';
+import { ElementsDragAndDropData } from '../../../../../base/browser/ui/list/listView.js';
+import { CodeDataTransfers } from '../../../../../platform/dnd/browser/dnd.js';
+import { withSelection } from '../../../../../platform/opener/common/opener.js';
+import { URI } from '../../../../../base/common/uri.js';
 
 export type DocumentSymbolItem = OutlineGroup | OutlineElement;
 
@@ -60,6 +65,66 @@ export class DocumentSymbolIdentityProvider implements IIdentityProvider<Documen
 	}
 }
 
+export class DocumentSymbolDragAndDrop implements ITreeDragAndDrop<DocumentSymbolItem> {
+
+	constructor() { }
+
+	getDragURI(element: DocumentSymbolItem): string | null {
+		const resource = OutlineModel.get(element)?.uri;
+		if (!resource) {
+			return null;
+		}
+
+		if (element instanceof OutlineElement) {
+			return symbolRangeUri(resource, element.symbol).toString();
+		} else {
+			return resource.toString();
+		}
+	}
+
+	getDragLabel(elements: DocumentSymbolItem[], originalEvent: DragEvent): string | undefined {
+		// Multi select not supported
+		if (elements.length !== 1) {
+			return undefined;
+		}
+
+		const element = elements[0];
+		return element instanceof OutlineElement ? element.symbol.name : element.label;
+	}
+
+	onDragStart(data: IDragAndDropData, originalEvent: DragEvent): void {
+		const elements = (data as ElementsDragAndDropData<DocumentSymbolItem, DocumentSymbolItem[]>).elements;
+		const item = elements[0];
+		if (!item || !originalEvent.dataTransfer) {
+			return;
+		}
+
+		const resource = OutlineModel.get(item)?.uri;
+		if (!resource) {
+			return;
+		}
+
+		const outlineElements = item instanceof OutlineElement ? [item] : Array.from(item.children.values());
+		const symbolsData = outlineElements.map(oe => ({
+			name: oe.symbol.name,
+			fsPath: resource.fsPath,
+			range: oe.symbol.range,
+			kind: oe.symbol.kind
+		}));
+
+		originalEvent.dataTransfer.setData(CodeDataTransfers.SYMBOLS, JSON.stringify(symbolsData));
+		originalEvent.dataTransfer.setData(DataTransfers.RESOURCES, JSON.stringify(outlineElements.map(oe => symbolRangeUri(resource, oe.symbol))));
+	}
+
+	onDragOver(): boolean | ITreeDragOverReaction { return false; }
+	drop(): void { }
+	dispose(): void { }
+}
+
+function symbolRangeUri(resource: URI, symbol: DocumentSymbol): URI {
+	return withSelection(resource, symbol.range);
+}
+
 class DocumentSymbolGroupTemplate {
 	static readonly id = 'DocumentSymbolGroupTemplate';
 	constructor(