#24396 💄

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

@@ -137,7 +137,7 @@ export class DefineKeybindingWidget extends Widget {
 	private _domNode: FastDomNode<HTMLElement>;
 	private _keybindingInputWidget: KeybindingInputWidget;
 	private _outputNode: HTMLElement;
-	private _conflictNode: HTMLElement;
+	private _showExistingKeybindingsNode: HTMLElement;
 
 	private _firstPart: ResolvedKeybinding = null;
 	private _chordPart: ResolvedKeybinding = null;
@@ -148,8 +148,8 @@ export class DefineKeybindingWidget extends Widget {
 	private _onDidChange = this._register(new Emitter<String>());
 	public onDidChange: Event<String> = this._onDidChange.event;
 
-	private _onLinkClick = this._register(new Emitter<String>());
-	public readonly onLinkClick: Event<String> = this._onLinkClick.event;
+	private _onShowExistingKeybindings = this._register(new Emitter<String>());
+	public readonly onShowExistingKeybidings: Event<String> = this._onShowExistingKeybindings.event;
 
 	constructor(
 		parent: HTMLElement,
@@ -178,19 +178,11 @@ export class DefineKeybindingWidget extends Widget {
 				this._chordPart = null;
 				this._keybindingInputWidget.setInputValue('');
 				dom.clearNode(this._outputNode);
-				dom.clearNode(this._conflictNode);
+				dom.clearNode(this._showExistingKeybindingsNode);
 				this._keybindingInputWidget.focus();
 			}
 			const disposable = this._onHide.event(() => {
-				if (this._firstPart) {
-					let r = this._firstPart.getUserSettingsLabel();
-					if (this._chordPart) {
-						r = r + ' ' + this._chordPart.getUserSettingsLabel();
-					}
-					c(r);
-				} else {
-					c(null);
-				}
+				c(this.getUserSettingsLabel());
 				disposable.dispose();
 			});
 		});
@@ -204,6 +196,21 @@ export class DefineKeybindingWidget extends Widget {
 		this._domNode.setLeft(left);
 	}
 
+	printExisting(numberOfExisting: number): void {
+		if (numberOfExisting > 0) {
+			let outputString: string = nls.localize('defineKeybinding.existing', "Existing");
+			outputString = numberOfExisting + ' ' + outputString;
+			let textNode = document.createTextNode(outputString);
+			let textSpan = document.createElement('span');
+			dom.addClass(textSpan, 'existingText');
+			textSpan.appendChild(textNode);
+			this._showExistingKeybindingsNode.appendChild(textSpan);
+			textSpan.onmousedown = (e) => { e.preventDefault(); };
+			textSpan.onmouseup = (e) => { e.preventDefault(); };
+			textSpan.onclick = () => { this._onShowExistingKeybindings.fire(this.getUserSettingsLabel()); };
+		}
+	}
+
 	private create(): void {
 		this._domNode = createFastDomNode(document.createElement('div'));
 		this._domNode.setDisplay('none');
@@ -227,56 +234,41 @@ export class DefineKeybindingWidget extends Widget {
 		}));
 
 		this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {}));
-		this._register(this._keybindingInputWidget.onKeybinding(keybinding => { this.printKeybinding(keybinding); this.processChange(keybinding); }));
+		this._register(this._keybindingInputWidget.onKeybinding(keybinding => this.onKeybinding(keybinding)));
 		this._register(this._keybindingInputWidget.onEnter(() => this.hide()));
 		this._register(this._keybindingInputWidget.onEscape(() => this.onCancel()));
 		this._register(this._keybindingInputWidget.onBlur(() => this.onCancel()));
 
 		this._outputNode = dom.append(this._domNode.domNode, dom.$('.output'));
-		this._conflictNode = dom.append(this._domNode.domNode, dom.$('.conflicts'));
+		this._showExistingKeybindingsNode = dom.append(this._domNode.domNode, dom.$('.existing'));
 	}
 
-	private processChange(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
-		const [firstPart, chordPart] = keybinding;
-		let keybindingStr = '"' + firstPart.getAriaLabel() + '+';
-		if (chordPart) {
-			keybindingStr = keybindingStr + chordPart.getAriaLabel() + '+';
-		}
-		keybindingStr = keybindingStr + '"';
-		this._onDidChange.fire(keybindingStr);
-	}
-
-	private printKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
+	private onKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void {
 		const [firstPart, chordPart] = keybinding;
 		this._firstPart = firstPart;
 		this._chordPart = chordPart;
 		dom.clearNode(this._outputNode);
-		dom.clearNode(this._conflictNode);
+		dom.clearNode(this._showExistingKeybindingsNode);
 		new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null);
 		if (this._chordPart) {
 			this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to")));
 			new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null);
 		}
+		const label = this.getUserSettingsLabel();
+		if (label) {
+			this._onDidChange.fire(label);
+		}
 	}
 
-	public printConflicts(numConflicts: Number): void {
-		if (numConflicts > 0) {
-			let outputString: string = nls.localize('defineKeybinding.existing', "Existing");
-			outputString = numConflicts + ' ' + outputString;
-			let textNode = document.createTextNode(outputString);
-			let textSpan = document.createElement('span');
-			dom.addClass(textSpan, 'conflictText');
-			textSpan.appendChild(textNode);
-			let linkBinding = this._firstPart.getAriaLabel();
+	private getUserSettingsLabel(): string {
+		let label = null;
+		if (this._firstPart) {
+			label = this._firstPart.getUserSettingsLabel();
 			if (this._chordPart) {
-				linkBinding += '+' + this._chordPart.getAriaLabel();
+				label = label + ' ' + this._chordPart.getUserSettingsLabel();
 			}
-			linkBinding += '+';
-			this._conflictNode.appendChild(textSpan);
-			textSpan.onmousedown = (e) => { e.preventDefault(); };
-			textSpan.onmouseup = (e) => { e.preventDefault(); };
-			textSpan.onclick = () => { this._onLinkClick.fire(linkBinding); };
 		}
+		return label;
 	}
 
 	private onCancel(): void {

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

@@ -260,25 +260,20 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 	}
 
 	showSimilarKeybindings(keybindingEntry: IKeybindingItemEntry): TPromise<any> {
-		let value = `"${keybindingEntry.keybindingItem.keybinding.getAriaLabel().replace(' ', '+')}+"`;
+		const value = `"${keybindingEntry.keybindingItem.keybinding.getAriaLabel()}"`;
 		if (value !== this.searchWidget.getValue()) {
 			this.searchWidget.setValue(value);
 		}
 		return TPromise.as(null);
 	}
 
-	private showOverlayConflicts(keybindingStr: String): void {
-		const conflictsList: IKeybindingItemEntry[] = this.keybindingsEditorModel.fetch(`${keybindingStr}`, this.sortByPrecedence.checked);
-		this.defineKeybindingWidget.printConflicts(conflictsList.length);
-	}
-
 	private createOverlayContainer(parent: HTMLElement): void {
 		this.overlayContainer = DOM.append(parent, $('.overlay-container'));
 		this.overlayContainer.style.position = 'absolute';
 		this.overlayContainer.style.zIndex = '10';
 		this.defineKeybindingWidget = this._register(this.instantiationService.createInstance(DefineKeybindingWidget, this.overlayContainer));
-		this._register(this.defineKeybindingWidget.onDidChange(keybindingStr => this.showOverlayConflicts(keybindingStr)));
-		this._register(this.defineKeybindingWidget.onLinkClick(keybindingStr => { this.showSimilarKeybindings(this.keybindingsEditorModel.fetch(`${keybindingStr}`, this.sortByPrecedence.checked)[0]); }));
+		this._register(this.defineKeybindingWidget.onDidChange(keybindingStr => this.defineKeybindingWidget.printExisting(this.keybindingsEditorModel.fetch(`"${keybindingStr}"`).length)));
+		this._register(this.defineKeybindingWidget.onShowExistingKeybidings(keybindingStr => this.searchWidget.setValue(`"${keybindingStr}"`)));
 		this.hideOverlayContainer();
 	}
 

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

@@ -15,7 +15,7 @@
 
 .defineKeybindingWidget .monaco-inputbox,
 .defineKeybindingWidget .output,
-.defineKeybindingWidget .conflicts {
+.defineKeybindingWidget .existing {
 	margin-top:10px;
 	width: 400px;
 	display: block;
@@ -31,7 +31,7 @@
 	justify-content: center;
 }
 
-.defineKeybindingWidget .conflicts .conflictText {
+.defineKeybindingWidget .existing .existingText {
 	text-decoration: underline;
 	cursor: pointer;
 }