Address drop UX feedback (#180343)

- Reduce margin on button
- Change icon to insert
- Try to align styling to match other editor widgets
- Use capital casing on entries

extensions/markdown-language-features/src/languageFeatures/copyFiles/dropIntoEditor.ts

@@ -135,15 +135,15 @@ export function createUriListSnippet(document: vscode.TextDocument, uris: readon
 
 	let label: string;
 	if (insertedImageCount > 0 && insertedLinkCount > 0) {
-		label = vscode.l10n.t('Insert Markdown images and links');
+		label = vscode.l10n.t('Insert Markdown Images and Links');
 	} else if (insertedImageCount > 0) {
 		label = insertedImageCount > 1
-			? vscode.l10n.t('Insert Markdown images')
+			? vscode.l10n.t('Insert Markdown Images')
-			: vscode.l10n.t('Insert Markdown image');
+			: vscode.l10n.t('Insert Markdown Image');
 	} else {
 		label = insertedLinkCount > 1
-			? vscode.l10n.t('Insert Markdown links')
+			? vscode.l10n.t('Insert Markdown Links')
-			: vscode.l10n.t('Insert Markdown link');
+			: vscode.l10n.t('Insert Markdown Link');
 	}
 
 	return { snippet, label };

src/vs/editor/contrib/dropIntoEditor/browser/defaultOnDropProviders.ts

@@ -30,7 +30,7 @@ class DefaultTextDropProvider implements DocumentOnDropEditProvider {
 
 		const text = await textEntry.asString();
 		return {
-			label: localize('defaultDropProvider.text.label', "Insert plain text"),
+			label: localize('defaultDropProvider.text.label', "Insert Plain Text"),
 			insertText: text
 		};
 	}
@@ -63,13 +63,13 @@ class UriListDropProvider implements DocumentOnDropEditProvider {
 		if (uriCount > 0) {
 			// Dropping at least one generic uri (such as https) so use most generic label
 			label = entries.length > 1
-				? localize('defaultDropProvider.uriList.uris', "Insert uris")
+				? localize('defaultDropProvider.uriList.uris', "Insert Uris")
-				: localize('defaultDropProvider.uriList.uri', "Insert uri");
+				: localize('defaultDropProvider.uriList.uri', "Insert Uri");
 		} else {
 			// All the paths are file paths
 			label = entries.length > 1
-				? localize('defaultDropProvider.uriList.paths', "Insert paths")
+				? localize('defaultDropProvider.uriList.paths', "Insert Paths")
-				: localize('defaultDropProvider.uriList.path', "Insert path");
+				: localize('defaultDropProvider.uriList.path', "Insert Path");
 		}
 
 		return { insertText, label };
@@ -103,8 +103,8 @@ class RelativePathDropProvider implements DocumentOnDropEditProvider {
 		return {
 			insertText: relativeUris.join(' '),
 			label: entries.length > 1
-				? localize('defaultDropProvider.uriList.relativePaths', "Insert relative paths")
+				? localize('defaultDropProvider.uriList.relativePaths', "Insert Relative Paths")
-				: localize('defaultDropProvider.uriList.relativePath', "Insert relative path")
+				: localize('defaultDropProvider.uriList.relativePath', "Insert Relative Path")
 		};
 	}
 }

src/vs/editor/contrib/dropIntoEditor/browser/postDropWidget.css

@@ -4,5 +4,18 @@
  *--------------------------------------------------------------------------------------------*/
 
 .post-drop-widget .monaco-button {
-	padding: 0;
+	box-shadow:  0 0 8px 2px var(--vscode-widget-shadow);
+	border: 1px solid var(--vscode-widget-border, transparent);
+	border-radius: 4px;
+	padding: 2px;
+	color: var(--vscode-input-foreground);
+	background-color:  var(--vscode-editorWidget-background);
+}
+
+.post-drop-widget .monaco-button:hover {
+	background-color: var(--vscode-inputOption-hoverBackground) !important;
+}
+
+.post-drop-widget .monaco-button .codicon {
+	margin: 0;
 }

src/vs/editor/contrib/dropIntoEditor/browser/postDropWidget.ts

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as dom from 'vs/base/browser/dom';
-import { Event } from 'vs/base/common/event';
 import { Button } from 'vs/base/browser/ui/button/button';
 import { toAction } from 'vs/base/common/actions';
+import { Event } from 'vs/base/common/event';
 import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 import 'vs/css!./postDropWidget';
 import { ContentWidgetPositionPreference, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser';
@@ -15,7 +15,6 @@ import { DocumentOnDropEdit } from 'vs/editor/common/languages';
 import { localize } from 'vs/nls';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
 
 
 interface DropEditSet {
@@ -30,6 +29,7 @@ class PostDropWidget extends Disposable implements IContentWidget {
 	readonly suppressMouseDown = true;
 
 	private domNode!: HTMLElement;
+	private button!: Button;
 
 	constructor(
 		private readonly editor: ICodeEditor,
@@ -57,17 +57,16 @@ class PostDropWidget extends Disposable implements IContentWidget {
 	private create(): void {
 		this.domNode = dom.$('.post-drop-widget');
 
-		const button = this._register(new Button(this.domNode, {
+		this.button = this._register(new Button(this.domNode, {
 			title: localize('postDropWidgetTile', "Drop options..."),
 			supportIcons: true,
-			...defaultButtonStyles,
 		}));
-		button.label = '$(clippy)';
+		this.button.label = '$(insert)';
 
 		this._register(dom.addDisposableListener(this.domNode, dom.EventType.CLICK, e => {
 			this._contextMenuService.showContextMenu({
 				getAnchor: () => {
-					const pos = dom.getDomNodePagePosition(button.element);
+					const pos = dom.getDomNodePagePosition(this.button.element);
 					return { x: pos.left + pos.width, y: pos.top + pos.height };
 				},
 				getActions: () => {