From 43cdb2c69b6ef2142bd995f0cdbcec0279b4d733 Mon Sep 17 00:00:00 2001
From: Rachel Macfarlane <ramacfar@microsoft.com>
Date: Wed, 18 Jul 2018 15:34:51 -0700
Subject: [PATCH] High contrast border in comments editor widget

Fixes https://github.com/Microsoft/vscode-pull-request-github/issues/58
Fixes https://github.com/Microsoft/vscode-pull-request-github/issues/59
---
 .../electron-browser/commentThreadWidget.ts         | 13 ++++++++++---
 .../comments/electron-browser/media/review.css      |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/vs/workbench/parts/comments/electron-browser/commentThreadWidget.ts b/src/vs/workbench/parts/comments/electron-browser/commentThreadWidget.ts
index 22237cc11b7..41fd94bf268 100644
--- a/src/vs/workbench/parts/comments/electron-browser/commentThreadWidget.ts
+++ b/src/vs/workbench/parts/comments/electron-browser/commentThreadWidget.ts
@@ -25,7 +25,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { IModelService } from 'vs/editor/common/services/modelService';
 import { SimpleCommentEditor } from './simpleCommentEditor';
 import URI from 'vs/base/common/uri';
-import { transparent, editorForeground, inputValidationErrorBorder, textLinkActiveForeground, textLinkForeground, focusBorder, textBlockQuoteBackground, textBlockQuoteBorder } from 'vs/platform/theme/common/colorRegistry';
+import { transparent, editorForeground, inputValidationErrorBorder, textLinkActiveForeground, textLinkForeground, focusBorder, textBlockQuoteBackground, textBlockQuoteBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -477,8 +477,8 @@ export class ReviewZoneWidget extends ZoneWidget {
 	}
 
 	private setCommentEditorDecorations() {
-		if (this._commentEditor) {
-			let model = this._commentEditor.getModel();
+		const model = this._commentEditor && this._commentEditor.getModel();
+		if (model) {
 			let valueLength = model.getValueLength();
 			const hasExistingComments = this._commentThread.comments.length > 0;
 			let placeholder = valueLength > 0 ? '' : (hasExistingComments ? 'Reply...' : 'Type a new comment');
@@ -579,6 +579,7 @@ export class ReviewZoneWidget extends ZoneWidget {
 		const focusColor = theme.getColor(focusBorder);
 		if (focusColor) {
 			content.push(`.monaco-editor .review-widget .body .review-comment a:focus { outline: 1px solid ${focusColor}; }`);
+			content.push(`.monaco-editor .review-widget .body .comment-form .monaco-editor.focused { outline: 1px solid ${focusColor}; }`);
 		}
 
 		const blockQuoteBackground = theme.getColor(textBlockQuoteBackground);
@@ -591,6 +592,12 @@ export class ReviewZoneWidget extends ZoneWidget {
 			content.push(`.monaco-editor .review-widget .body .review-comment blockquote { border-color: ${blockQuoteBOrder}; }`);
 		}
 
+		const hcBorder = theme.getColor(contrastBorder);
+		if (hcBorder) {
+			content.push(`.monaco-editor .review-widget .body .comment-form .review-thread-reply-button { outline-color: ${hcBorder}; }`);
+			content.push(`.monaco-editor .review-widget .body .comment-form .monaco-editor { outline: 1px solid ${hcBorder}; }`);
+		}
+
 		this._styleElement.innerHTML = content.join('\n');
 
 		// Editor decorations should also be responsive to theme changes
diff --git a/src/vs/workbench/parts/comments/electron-browser/media/review.css b/src/vs/workbench/parts/comments/electron-browser/media/review.css
index 06ae9872fa4..dd28fb338ef 100644
--- a/src/vs/workbench/parts/comments/electron-browser/media/review.css
+++ b/src/vs/workbench/parts/comments/electron-browser/media/review.css
@@ -149,6 +149,7 @@
 	white-space: nowrap;
 	border: 0px;
 	cursor: text;
+	outline: 1px solid transparent;
 }
 
 .monaco-editor .review-widget .body .comment-form .review-thread-reply-button:focus {
-- 
GitLab