Center repl input chevron

src/vs/workbench/contrib/debug/browser/media/repl.css

@@ -79,7 +79,8 @@
 }
 
 .repl .repl-input-wrapper {
-	padding-left: 20px;
+	display: flex;
+	align-items: center;
 	border-top: 1px solid rgba(128, 128, 128, 0.35);
 }
 
@@ -92,15 +93,14 @@
 	border-top-color: #6FC3DF;
 }
 
-.repl .repl-input-wrapper:before {
-	left: 8px;
-	position: absolute;
-	content: '\276f';
-	line-height: 18px;
-}
-
-.monaco-workbench.linux .repl .repl-input-wrapper:before {
-	font-size: 9px;
+.repl .repl-input-wrapper .repl-input-chevron {
+	padding: 0 6px 0 8px;
+	width: 16px;
+	height: 100%;
+	display: flex;
+	flex-shrink: 0;
+	justify-content: center;
+	font-weight: 600;
 }
 
 /* Output coloring  and styling */

src/vs/workbench/contrib/debug/browser/repl.ts

@@ -58,7 +58,7 @@ import { IViewsService, IViewDescriptorService } from 'vs/workbench/common/views
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ReplGroup } from 'vs/workbench/contrib/debug/common/replModel';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
-import { EDITOR_FONT_DEFAULTS } from 'vs/editor/common/config/editorOptions';
+import { EDITOR_FONT_DEFAULTS, EditorOption } from 'vs/editor/common/config/editorOptions';
 
 const $ = dom.$;
 
@@ -284,6 +284,14 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 			const lineHeight = debugConsole.lineHeight ? `${debugConsole.lineHeight}px` : '1.4em';
 			const backgroundColor = this.themeService.getColorTheme().getColor(this.getBackgroundColor());
 
+			this.replInput.updateOptions({
+				fontSize,
+				lineHeight: debugConsole.lineHeight,
+				fontFamily: debugConsole.fontFamily === 'default' ? EDITOR_FONT_DEFAULTS.fontFamily : debugConsole.fontFamily
+			});
+
+			const replInputLineHeight = this.replInput.getOption(EditorOption.lineHeight);
+
 			// Set the font size, font family, line height and align the twistie to be centered, and input theme color
 			this.styleElement.innerHTML = `
 				.repl .repl-tree .expression {
@@ -299,6 +307,10 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 					background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px);
 				}
 
+				.repl .repl-input-wrapper .repl-input-chevron {
+					line-height: ${replInputLineHeight}px
+				}
+
 				.repl .repl-input-wrapper .monaco-editor .lines-content {
 					background-color: ${backgroundColor};
 				}
@@ -306,12 +318,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 
 			this.tree.rerender();
 
-			this.replInput.updateOptions({
-				fontSize,
-				lineHeight: debugConsole.lineHeight,
-				fontFamily: debugConsole.fontFamily === 'default' ? EDITOR_FONT_DEFAULTS.fontFamily : debugConsole.fontFamily
-			});
-
 			if (this.dimension) {
 				this.layoutBody(this.dimension.height, this.dimension.width);
 			}
@@ -406,7 +412,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 
 	protected layoutBody(height: number, width: number): void {
 		this.dimension = new dom.Dimension(width, height);
-		const replInputHeight = this.replInput.getContentHeight();
+		const replInputHeight = Math.min(this.replInput.getContentHeight(), height);
 		if (this.tree) {
 			const lastElementVisible = this.tree.scrollTop + this.tree.renderHeight >= this.tree.scrollHeight;
 			const treeHeight = height - replInputHeight;
@@ -418,7 +424,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 		}
 		this.replInputContainer.style.height = `${replInputHeight}px`;
 
-		this.replInput.layout({ width: width - 20, height: replInputHeight });
+		this.replInput.layout({ width: width - 30, height: replInputHeight });
 	}
 
 	focus(): void {
@@ -553,6 +559,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 
 	private createReplInput(container: HTMLElement): void {
 		this.replInputContainer = dom.append(container, $('.repl-input-wrapper'));
+		dom.append(this.replInputContainer, $('.repl-input-chevron.codicon.codicon-chevron-right'));
 
 		const { scopedContextKeyService, historyNavigationEnablement } = createAndBindHistoryNavigationWidgetScopedContextKeyService(this.contextKeyService, { target: this.replInputContainer, historyNavigator: this });
 		this.historyNavigationEnablement = historyNavigationEnablement;