scm: pimp up commit editor

src/vs/workbench/parts/scm/electron-browser/media/scmViewlet.css

@@ -76,11 +76,18 @@
 	display: none;
 }
 
-/* HACK */
-.action-label.scm-commit {
-	background-image: url('check.svg');
+.monaco-shell.vs .scm-viewlet > .scm-editor > .monaco-editor.focused {
+	outline: 1px solid rgba(0, 122, 204, 0.4);
 }
 
-.vs-dark .action-label.scm-commit {
-	background-image: url('check-inverse.svg');
+.monaco-shell.vs-dark .scm-viewlet > .scm-editor > .monaco-editor.focused {
+	outline: 1px solid rgba(14, 99, 156, 0.6);
+}
+
+.monaco-shell.hc-black .scm-viewlet > .scm-editor > .monaco-editor {
+	outline: 1px solid #6fc3df;
+}
+
+.monaco-shell.hc-black .scm-viewlet > .scm-editor > .monaco-editor.focused {
+	outline: 2px solid #f38518;
 }

src/vs/workbench/parts/scm/electron-browser/scmEditor.ts

@@ -61,6 +61,8 @@ export const InSCMInputContextKey = new RawContextKey<boolean>('inSCMInput', fal
 
 export class SCMEditor {
 
+	private static VerticalPadding = 4;
+
 	private editor: SCMCodeEditorWidget;
 	private disposables: IDisposable[] = [];
 
@@ -76,7 +78,7 @@ export class SCMEditor {
 			scrollbar: {
 				horizontal: 'hidden'
 			},
-			lineDecorationsWidth: 0,
+			lineDecorationsWidth: 3,
 			scrollBeyondLastLine: false,
 			theme: this.themeService.getColorTheme().id,
 			renderLineHighlight: 'none',
@@ -106,15 +108,24 @@ export class SCMEditor {
 		this.editor = scopedInstantiationService.createInstance(SCMCodeEditorWidget, container, this.editorOptions);
 		this.themeService.onDidColorThemeChange(e => this.editor.updateOptions(this.editorOptions), null, this.disposables);
 
-		this.editor.setModel(this.scmService.inputBoxModel);
+		const model = this.scmService.inputBoxModel;
+		this.editor.setModel(model);
+
+		this.editor.changeViewZones(accessor => {
+			accessor.addZone({
+				afterLineNumber: 0,
+				heightInPx: SCMEditor.VerticalPadding,
+				domNode: document.createElement('div')
+			});
+		});
 	}
 
-	get lineHeight(): number {
+	private get lineHeight(): number {
 		return this.editor.getConfiguration().lineHeight;
 	}
 
 	// TODO@joao TODO@alex isn't there a better way to get the number of lines?
-	get lineCount(): number {
+	private get lineCount(): number {
 		const model = this.scmService.inputBoxModel;
 		const modelLength = model.getValueLength();
 		const lastPosition = model.getPositionAt(modelLength);
@@ -124,6 +135,10 @@ export class SCMEditor {
 		return viewHeight / this.lineHeight;
 	}
 
+	get viewHeight(): number {
+		return Math.min(this.lineCount, 8) * this.lineHeight + (SCMEditor.VerticalPadding);
+	}
+
 	layout(dimension: IDimension): void {
 		this.editor.layout(dimension);
 	}

src/vs/workbench/parts/scm/electron-browser/scmViewlet.ts

@@ -238,7 +238,7 @@ export class SCMViewlet extends Viewlet {
 
 		this.cachedDimension = dimension;
 
-		const editorHeight = Math.min(this.editor.lineCount, 8) * this.editor.lineHeight;
+		const editorHeight = this.editor.viewHeight;
 		this.editor.layout({ width: dimension.width - 25, height: editorHeight });
 
 		const listHeight = dimension.height - (editorHeight + 12 /* margin */);