Allow to record chords in define keybinding widget

src/vs/workbench/parts/preferences/browser/keybindingWidgets.ts

@@ -27,8 +27,12 @@ class KeybindingInputWidget extends Widget {
 
 	public readonly inputBox: InputBox;
 
-	private _onKeybinding = this._register(new Emitter<ResolvedKeybinding>());
-	public readonly onKeybinding: Event<ResolvedKeybinding> = this._onKeybinding.event;
+	private _acceptChords: boolean;
+	private _firstPart: ResolvedKeybinding;
+	private _chordPart: ResolvedKeybinding;
+
+	private _onKeybinding = this._register(new Emitter<[ResolvedKeybinding, ResolvedKeybinding]>());
+	public readonly onKeybinding: Event<[ResolvedKeybinding, ResolvedKeybinding]> = this._onKeybinding.event;
 
 	private _onEnter = this._register(new Emitter<void>());
 	public readonly onEnter: Event<void> = this._onEnter.event;
@@ -44,10 +48,18 @@ class KeybindingInputWidget extends Widget {
 		super();
 		this.inputBox = this._register(new InputBox(parent, this.contextViewService, this.options));
 		this._register(attachInputBoxStyler(this.inputBox, themeService));
-		this.onkeydown(this.inputBox.inputElement, e => this.onKeyDown(e));
+		this.onkeydown(this.inputBox.inputElement, e => this._onKeyDown(e));
+		this._acceptChords = true;
+		this._firstPart = null;
+		this._chordPart = null;
+	}
+
+	public setAcceptChords(acceptChords: boolean) {
+		this._acceptChords = acceptChords;
+		this._chordPart = null;
 	}
 
-	private onKeyDown(keyboardEvent: IKeyboardEvent): void {
+	private _onKeyDown(keyboardEvent: IKeyboardEvent): void {
 		keyboardEvent.preventDefault();
 		keyboardEvent.stopPropagation();
 		if (keyboardEvent.equals(KeyCode.Enter)) {
@@ -63,9 +75,35 @@ class KeybindingInputWidget extends Widget {
 
 	private printKeybinding(keyboardEvent: IKeyboardEvent): void {
 		const keybinding = this.keybindingService.resolveKeyboardEvent(keyboardEvent);
-		this.inputBox.value = keybinding.getUserSettingsLabel().toLowerCase();
-		this.inputBox.inputElement.title = 'keyCode: ' + keyboardEvent.browserEvent.keyCode;
-		this._onKeybinding.fire(keybinding);
+		const info = `code: ${keyboardEvent.browserEvent.code}, keyCode: ${keyboardEvent.browserEvent.keyCode}, key: ${keyboardEvent.browserEvent.key} => UI: ${keybinding.getAriaLabel()}, user settings: ${keybinding.getUserSettingsLabel()}, dispatch: ${keybinding.getDispatchParts()[0]}`;
+
+		if (this._acceptChords) {
+			const hasFirstPart = (this._firstPart && this._firstPart.getDispatchParts()[0] !== null);
+			const hasChordPart = (this._chordPart && this._chordPart.getDispatchParts()[0] !== null);
+			if (hasFirstPart && hasChordPart) {
+				// Reset
+				this._firstPart = keybinding;
+				this._chordPart = null;
+			} else if (!hasFirstPart) {
+				this._firstPart = keybinding;
+			} else {
+				this._chordPart = keybinding;
+			}
+		} else {
+			this._firstPart = keybinding;
+		}
+
+		let value = '';
+		if (this._firstPart) {
+			value = this._firstPart.getUserSettingsLabel();
+		}
+		if (this._chordPart) {
+			value = value + ' ' + this._chordPart.getUserSettingsLabel();
+		}
+		this.inputBox.value = value;
+
+		this.inputBox.inputElement.title = info;
+		this._onKeybinding.fire([this._firstPart, this._chordPart]);
 	}
 }
 
@@ -78,7 +116,8 @@ export class DefineKeybindingWidget extends Widget {
 	private _keybindingInputWidget: KeybindingInputWidget;
 	private _outputNode: HTMLElement;
 
-	private _resolvedKeybinding: ResolvedKeybinding = null;
+	private _firstPart: ResolvedKeybinding = null;
+	private _chordPart: ResolvedKeybinding = null;
 	private _isVisible: boolean = false;
 
 	private _onHide = this._register(new Emitter<void>());
@@ -103,14 +142,19 @@ export class DefineKeybindingWidget extends Widget {
 				this._isVisible = true;
 				this._domNode.setDisplay('block');
 
-				this._resolvedKeybinding = null;
+				this._firstPart = null;
+				this._chordPart = null;
 				this._keybindingInputWidget.inputBox.value = '';
 				dom.clearNode(this._outputNode);
 				this._keybindingInputWidget.inputBox.focus();
 			}
 			const disposable = this._onHide.event(() => {
-				if (this._resolvedKeybinding) {
-					c(this._resolvedKeybinding.getUserSettingsLabel());
+				if (this._firstPart) {
+					let r = this._firstPart.getUserSettingsLabel();
+					if (this._chordPart) {
+						r = r + ' ' + this._chordPart.getUserSettingsLabel();
+					}
+					c(r);
 				} else {
 					c(null);
 				}
@@ -135,7 +179,7 @@ export class DefineKeybindingWidget extends Widget {
 		this._domNode.setHeight(DefineKeybindingWidget.HEIGHT);
 		dom.append(this._domNode.domNode, dom.$('.message', null, nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER. ESCAPE to cancel.")));
 
-		this._keybindingInputWidget = this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {});
+		this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {}));
 		this._register(this._keybindingInputWidget.onKeybinding(keybinding => this.printKeybinding(keybinding)));
 		this._register(this._keybindingInputWidget.onEnter(() => this.hide()));
 		this._register(this._keybindingInputWidget.onEscape(() => this.onCancel()));
@@ -144,15 +188,21 @@ export class DefineKeybindingWidget extends Widget {
 		this._outputNode = dom.append(this._domNode.domNode, dom.$('.output'));;
 	}
 
-	private printKeybinding(keybinding: ResolvedKeybinding): void {
-		this._resolvedKeybinding = keybinding;
+	private printKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
+		const [firstPart, chordPart] = keybinding;
+		this._firstPart = firstPart;
+		this._chordPart = chordPart;
 		dom.clearNode(this._outputNode);
-		let htmlkb = this._resolvedKeybinding.getHTMLLabel();
-		htmlkb.forEach((item) => this._outputNode.appendChild(renderHtml(item)));
+		this._firstPart.getHTMLLabel().forEach((item) => this._outputNode.appendChild(renderHtml(item)));
+		if (this._chordPart) {
+			this._outputNode.appendChild(document.createTextNode(' ' + nls.localize('defineKeybinding.chordsTo', "chord to") + ' '));
+			this._chordPart.getHTMLLabel().forEach((item) => this._outputNode.appendChild(renderHtml(item)));
+		}
 	}
 
 	private onCancel(): void {
-		this._resolvedKeybinding = null;
+		this._firstPart = null;
+		this._chordPart = null;
 		this.hide();
 	}
 

src/vs/workbench/parts/preferences/browser/media/keybindings.css

@@ -22,6 +22,10 @@
 	text-align: center;
 }
 
+.defineKeybindingWidget .input {
+	text-align: center;
+}
+
 /* Theming */
 .defineKeybindingWidget {
 	background-color: #EFEFF2;