rework listbox to not require platform (#5192)

src/sql/base/browser/ui/listBox/listBox.ts

@@ -7,11 +7,10 @@ import { SelectBox, ISelectBoxStyles, ISelectOptionItem } from 'vs/base/browser/
 import { Color } from 'vs/base/common/color';
 import { IMessage, MessageType, defaultOpts } from 'vs/base/browser/ui/inputbox/inputBox';
 import * as dom from 'vs/base/browser/dom';
-import { KeyCode } from 'vs/base/common/keyCodes';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import { RenderOptions, renderFormattedText, renderText } from 'vs/base/browser/htmlContentRenderer';
-import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
+import { Emitter } from 'vs/base/common/event';
 
 const $ = dom.$;
 
@@ -49,10 +48,12 @@ export class ListBox extends SelectBox {
 	private contextViewProvider: IContextViewProvider;
 	private isValid: boolean;
 
+	private _onKeyDown = new Emitter<StandardKeyboardEvent>();
+	public readonly onKeyDown = this._onKeyDown.event;
+
 	constructor(
 		options: ISelectOptionItem[],
-		contextViewProvider: IContextViewProvider,
+		contextViewProvider: IContextViewProvider) {
-		private _clipboardService: IClipboardService) {
 
 		super(options, 0, contextViewProvider);
 		this.contextViewProvider = contextViewProvider;
@@ -64,7 +65,7 @@ export class ListBox extends SelectBox {
 		this.selectElement.style['width'] = 'inherit';
 		this.selectElement.style['min-width'] = '100%';
 
-		this._register(dom.addStandardDisposableListener(this.selectElement, dom.EventType.KEY_DOWN, e => this.onKeyDown(e)));
+		this._register(dom.addStandardDisposableListener(this.selectElement, dom.EventType.KEY_DOWN, (e: StandardKeyboardEvent) => this._onKeyDown.fire(e)));
 
 		this.enabledSelectBackground = this.selectBackground;
 		this.enabledSelectForeground = this.selectForeground;
@@ -146,26 +147,6 @@ export class ListBox extends SelectBox {
 		this.selectElement.add(this.createOption(option));
 	}
 
-	// Allow copy to clipboard
-	public onKeyDown(event: IKeyboardEvent): void {
-		if (this.selectedOptions.length > 0) {
-			let key = event.keyCode;
-			let ctrlOrCmd = event.ctrlKey || event.metaKey;
-
-			if (ctrlOrCmd && key === KeyCode.KEY_C) {
-				let textToCopy = this.selectedOptions[0];
-				for (let i = 1; i < this.selectedOptions.length; i++) {
-					textToCopy = textToCopy + ', ' + this.selectedOptions[i];
-				}
-
-				// Copy to clipboard
-				this._clipboardService.writeText(textToCopy);
-
-				event.stopPropagation();
-			}
-		}
-	}
-
 	public enable(): void {
 		this.selectElement.disabled = false;
 		this.selectBackground = this.enabledSelectBackground;

src/sql/workbench/electron-browser/modelComponents/listbox.component.ts

@@ -18,6 +18,7 @@ import { attachListBoxStyler } from 'sql/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 @Component({
 	selector: 'modelview-listBox',
@@ -48,7 +49,25 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
 
 	ngAfterViewInit(): void {
 		if (this._inputContainer) {
-			this._input = new ListBox([], this.contextViewService, this.clipboardService);
+			this._input = new ListBox([], this.contextViewService);
+			this._input.onKeyDown(e => {
+				if (this._input.selectedOptions.length > 0) {
+					const key = e.keyCode;
+					const ctrlOrCmd = e.ctrlKey || e.metaKey;
+
+					if (ctrlOrCmd && key === KeyCode.KEY_C) {
+						let textToCopy = this._input.selectedOptions[0];
+						for (let i = 1; i < this._input.selectedOptions.length; i++) {
+							textToCopy = textToCopy + ', ' + this._input.selectedOptions[i];
+						}
+
+						// Copy to clipboard
+						this.clipboardService.writeText(textToCopy);
+
+						e.stopPropagation();
+					}
+				}
+			});
 			this._input.render(this._inputContainer.nativeElement);
 
 			this._register(this._input);

src/sql/workbench/parts/backup/electron-browser/backup.component.ts

@@ -31,6 +31,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 export const BACKUP_SELECTOR: string = 'backup-component';
 
@@ -268,7 +269,25 @@ export class BackupComponent {
 		});
 
 		// Set backup path list
-		this.pathListBox = new ListBox([], this.contextViewService, this.clipboardService);
+		this.pathListBox = new ListBox([], this.contextViewService);
+		this.pathListBox.onKeyDown(e => {
+			if (this.pathListBox.selectedOptions.length > 0) {
+				const key = e.keyCode;
+				const ctrlOrCmd = e.ctrlKey || e.metaKey;
+
+				if (ctrlOrCmd && key === KeyCode.KEY_C) {
+					let textToCopy = this.pathListBox.selectedOptions[0];
+					for (let i = 1; i < this.pathListBox.selectedOptions.length; i++) {
+						textToCopy = textToCopy + ', ' + this.pathListBox.selectedOptions[i];
+					}
+
+					// Copy to clipboard
+					this.clipboardService.writeText(textToCopy);
+
+					e.stopPropagation();
+				}
+			}
+		});
 		this.pathListBox.render(this.pathElement.nativeElement);
 
 		// Set backup path add/remove buttons