Render missing key codes in current keyboard layout as errors in keybindings.json

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

@@ -51,7 +51,7 @@
 	background-size: 0.9em;
 }
 
-/*.monaco-editor .inlineKeybindingError:before {
+.monaco-editor .inlineKeybindingError:before {
 	margin: 0.1em 0.1em 0 0.1em;
 	content:" ";
 	display:inline-block;
@@ -59,9 +59,14 @@
 	width:1em;
 	background: url(status-error.svg) 0px -0.1em no-repeat;
 	background-size: 1em;
-}*/
+}
 
 .monaco-editor .keybindingInfo {
 	box-shadow:	inset 0 0 0 1px #B9B9B9;
 	background-color: rgba(100, 100, 250, 0.2);
 }
+
+.monaco-editor .keybindingError {
+	box-shadow:	inset 0 0 0 1px #B9B9B9;
+	background-color: rgba(250, 100, 100, 0.2);
+}

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

@@ -27,7 +27,8 @@ import {IHTMLContentElement} from 'vs/base/common/htmlContent';
 const NLS_LAUNCH_MESSAGE = nls.localize('defineKeybinding.start', "Define Keybinding");
 const NLS_DEFINE_MESSAGE = nls.localize('defineKeybinding.initial', "Press desired key combination and ENTER");
 const NLS_DEFINE_ACTION_LABEL = nls.localize('DefineKeybindingAction',"Define Keybinding");
-const NLS_KB_LAYOUT_INFO_MESSAGE = nls.localize('defineKeybinding.kbLayoutMessage', "For your current keyboard layout press ");
+const NLS_KB_LAYOUT_INFO_MESSAGE = nls.localize('defineKeybinding.kbLayoutInfoMessage', "For your current keyboard layout press ");
+const NLS_KB_LAYOUT_ERROR_MESSAGE = nls.localize('defineKeybinding.kbLayoutErrorMessage', "You won't be able to produce this key combination under your current keyboard layout.");
 
 const INTERESTING_FILE = /keybindings\.json$/;
 
@@ -174,28 +175,56 @@ export class DefineKeybindingController implements EditorCommon.IEditorContribut
 		});
 
 		this._dec = this._editor.deltaDecorations(this._dec, data.map((m) : EditorCommon.IModelDeltaDecoration => {
-			let label = m.label;
-			let msg:IHTMLContentElement[] = [{
-				tagName: 'span',
-				text: NLS_KB_LAYOUT_INFO_MESSAGE
-			}];
-			msg = msg.concat(this._keybindingService.getHTMLLabelFor(m.keybinding));
+			let isError:boolean;
+			let msg:IHTMLContentElement[];
+
+			if (!m.label) {
+				isError = true;
+				msg = [{
+					tagName: 'span',
+					text: NLS_KB_LAYOUT_ERROR_MESSAGE
+				}];
+			} else {
+				isError = false;
+				msg = [{
+					tagName: 'span',
+					text: NLS_KB_LAYOUT_INFO_MESSAGE
+				}];
+				msg = msg.concat(this._keybindingService.getHTMLLabelFor(m.keybinding));
+			}
 			return {
 				range: m.range,
-				options: {
-					stickiness: EditorCommon.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-					className: 'keybindingInfo',
-					htmlMessage: msg,
-					inlineClassName: 'inlineKeybindingInfo',
-					overviewRuler: {
-						color: 'rgba(100, 100, 250, 0.6)',
-						darkColor: 'rgba(100, 100, 250, 0.6)',
-						position: EditorCommon.OverviewRulerLane.Right
-					}
-				}
+				options: DefineKeybindingController._decorationOptions(msg, isError)
 			}
 		}))
 	}
+
+	private static _decorationOptions(msg:IHTMLContentElement[], isError:boolean): EditorCommon.IModelDecorationOptions {
+		if (isError) {
+			return {
+				stickiness: EditorCommon.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+				className: 'keybindingError',
+				htmlMessage: msg,
+				inlineClassName: 'inlineKeybindingError',
+				overviewRuler: {
+					color: 'rgba(250, 100, 100, 0.6)',
+					darkColor: 'rgba(250, 100, 100, 0.6)',
+					position: EditorCommon.OverviewRulerLane.Right
+				}
+			}
+		}
+		return {
+			stickiness: EditorCommon.TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+			className: 'keybindingInfo',
+			htmlMessage: msg,
+			inlineClassName: 'inlineKeybindingInfo',
+			overviewRuler: {
+				color: 'rgba(100, 100, 250, 0.6)',
+				darkColor: 'rgba(100, 100, 250, 0.6)',
+				position: EditorCommon.OverviewRulerLane.Right
+			}
+		}
+	}
 }
 
 class DefineKeybindingLauncherWidget implements EditorBrowser.IOverlayWidget {

src/vs/editor/contrib/defineKeybinding/browser/status-error.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" height="16" width="16"><circle cx="8" cy="8" r="6" fill="#F6F6F6"/><path d="M8 3C5.238 3 3 5.238 3 8s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5zm3 7l-1 1-2-2-2 2-1-1 2-2.027L5 6l1-1 2 2 2-2 1 1-2 1.973L11 10z" fill="#E51400"/><path fill="#fff" d="M11 6l-1-1-2 2-2-2-1 1 2 1.973L5 10l1 1 2-2 2 2 1-1-2-2.027z"/></svg>
\ No newline at end of file