Fixes #1275: Render both keybindings.json string and UI label in define keybinding widget

src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.css

@@ -13,8 +13,6 @@
 
 .monaco-editor .defineKeybindingWidget {
 	font-family: 'Segoe WPC', 'Segoe UI', "SFUIText-Light", HelveticaNeue-Light, sans-serif, "Droid Sans Fallback";
-	width: 340px;
-	height: 60px;
 	padding: 10px;
 }
 
@@ -23,7 +21,8 @@
 	text-align: center;
 }
 
-.monaco-editor .defineKeybindingWidget .input {
+.monaco-editor .defineKeybindingWidget .input,
+.monaco-editor .defineKeybindingWidget .output {
 	margin-top:10px;
 	width: 320px;
 	display: block;

src/vs/editor/contrib/defineKeybinding/browser/defineKeybinding.ts

@@ -23,6 +23,7 @@ import {IKeybindingService} from 'vs/platform/keybinding/common/keybindingServic
 import {RunOnceScheduler} from 'vs/base/common/async';
 import {IOSupport} from 'vs/platform/keybinding/common/commonKeybindingResolver';
 import {IHTMLContentElement} from 'vs/base/common/htmlContent';
+import {renderHtml} from 'vs/base/browser/htmlContentRenderer';
 
 const NLS_LAUNCH_MESSAGE = nls.localize('defineKeybinding.start', "Define Keybinding");
 const NLS_DEFINE_MESSAGE = nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER");
@@ -56,7 +57,7 @@ export class DefineKeybindingController implements EditorCommon.IEditorContribut
 		this._keybindingService = keybindingService;
 		this._toDispose = [];
 		this._launchWidget = new DefineKeybindingLauncherWidget(this._editor, keybindingService, () => this.launch());
-		this._defineWidget = new DefineKeybindingWidget(this._editor, (keybinding) => this._onAccepted(keybinding));
+		this._defineWidget = new DefineKeybindingWidget(this._editor, keybindingService, (keybinding) => this._onAccepted(keybinding));
 
 		this._toDispose.push(this._editor.addListener2(EditorCommon.EventType.ModelChanged, (e) => {
 			if (isInterestingEditorModel(this._editor)) {
@@ -286,31 +287,41 @@ class DefineKeybindingLauncherWidget implements EditorBrowser.IOverlayWidget {
 	}
 }
 
-class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
+
+class DefineKeybindingWidget implements EditorBrowser.IOverlayWidget {
 
 	private static ID = 'editor.contrib.defineKeybindingWidget';
+	private static WIDTH = 340;
+	private static HEIGHT = 90;
 
 	private _editor: EditorBrowser.ICodeEditor;
+	private _keybindingService:IKeybindingService;
 
 	private _domNode: HTMLElement;
 	private _toDispose: IDisposable[];
-	private _position: EditorCommon.IPosition;
 
 	private _messageNode: HTMLElement;
 	private _inputNode: HTMLInputElement;
+	private _outputNode: HTMLElement;
 
 	private _lastKeybinding: Keybinding;
 	private _onAccepted: (keybinding:string) => void;
+	private _isVisible: boolean;
 
-	constructor(editor:EditorBrowser.ICodeEditor, onAccepted:(keybinding:string) => void) {
+	constructor(editor:EditorBrowser.ICodeEditor, keybindingService:IKeybindingService, onAccepted:(keybinding:string) => void) {
 		this._editor = editor;
+		this._keybindingService = keybindingService;
 		this._onAccepted = onAccepted;
 		this._toDispose = [];
-		this._position = null;
 		this._lastKeybinding = null;
 
 		this._domNode = document.createElement('div');
 		this._domNode.className = 'defineKeybindingWidget';
+		DomUtils.StyleMutator.setWidth(this._domNode, DefineKeybindingWidget.WIDTH);
+		DomUtils.StyleMutator.setHeight(this._domNode, DefineKeybindingWidget.HEIGHT);
+
+		this._domNode.style.display = 'none';
+		this._isVisible = false;
 
 		this._messageNode = document.createElement('div');
 		this._messageNode.className = 'message';
@@ -321,6 +332,10 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
 		this._inputNode.className = 'input';
 		this._domNode.appendChild(this._inputNode);
 
+		this._outputNode = document.createElement('div');
+		this._outputNode.className = 'output';
+		this._domNode.appendChild(this._outputNode);
+
 		this._toDispose.push(DomUtils.addDisposableListener(this._inputNode, 'keydown', (e) => {
 			let keyEvent = new StandardKeyboardEvent(e);
 			keyEvent.preventDefault();
@@ -344,15 +359,24 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
 
 			this._inputNode.value = this._lastKeybinding.toUserSettingsLabel().toLowerCase();
 			this._inputNode.title = 'keyCode: ' + keyEvent.browserEvent.keyCode;
+
+			DomUtils.clearNode(this._outputNode);
+			let htmlkb = this._keybindingService.getHTMLLabelFor(this._lastKeybinding);
+			htmlkb.forEach((item) => this._outputNode.appendChild(renderHtml(item)));
 		}));
+		this._toDispose.push(this._editor.addListener2(EditorCommon.EventType.ConfigurationChanged, (e) => {
+			if (this._isVisible) {
+				this._layout();
+			}
+		}))
 
 		this._toDispose.push(DomUtils.addDisposableListener(this._inputNode, 'blur', (e) => this._stop()));
 
-		this._editor.addContentWidget(this);
+		this._editor.addOverlayWidget(this);
 	}
 
 	public dispose(): void {
-		this._editor.removeContentWidget(this);
+		this._editor.removeOverlayWidget(this);
 		this._toDispose = disposeAll(this._toDispose);
 	}
 
@@ -364,23 +388,43 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
 		return this._domNode;
 	}
 
-	public getPosition(): EditorBrowser.IContentWidgetPosition {
-		if (!this._position) {
-			return null;
-		}
+	public getPosition(): EditorBrowser.IOverlayWidgetPosition {
 		return {
-			position: this._position,
-			preference: [EditorBrowser.ContentWidgetPositionPreference.BELOW]
+			preference: null
 		};
 	}
 
+	private _show(): void {
+		if (this._isVisible) {
+			return;
+		}
+		this._isVisible = true;
+		this._layout();
+		this._domNode.style.display = 'block';
+	}
+
+	private _hide(): void {
+		if (!this._isVisible) {
+			return;
+		}
+		this._isVisible = false;
+		this._domNode.style.display = 'none';
+	}
+
+	private _layout(): void {
+		let editorLayout = this._editor.getLayoutInfo();
+
+		let top = Math.round((editorLayout.height - DefineKeybindingWidget.HEIGHT) / 2);
+		DomUtils.StyleMutator.setTop(this._domNode, top);
+
+		let left = Math.round((editorLayout.width - DefineKeybindingWidget.WIDTH) / 2);
+		DomUtils.StyleMutator.setLeft(this._domNode, left);
+	}
+
 	public start(): void {
-		this._position = this._editor.getPosition();
-		this._editor.revealPositionInCenterIfOutsideViewport(this._position);
-		this._editor.layoutContentWidget(this);
+		this._editor.revealPositionInCenterIfOutsideViewport(this._editor.getPosition());
 
-		// Force a view render
-		this._editor.getOffsetForColumn(this._position.lineNumber, this._position.column);
+		this._show();
 
 		this._lastKeybinding = null;
 		this._inputNode.value = '';
@@ -389,8 +433,7 @@ class DefineKeybindingWidget implements EditorBrowser.IContentWidget {
 
 	private _stop(): void {
 		this._editor.focus();
-		this._position = null;
-		this._editor.layoutContentWidget(this);
+		this._hide();
 	}
 }