diff --git a/src/vs/workbench/contrib/debug/browser/media/repl.css b/src/vs/workbench/contrib/debug/browser/media/repl.css index f92f9f2b0af5c17cfce2b2da4818b0185cf1d848..cdd67e12807a87d777e7dbe69644586dc1b2fce9 100644 --- a/src/vs/workbench/contrib/debug/browser/media/repl.css +++ b/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 */ diff --git a/src/vs/workbench/contrib/debug/browser/repl.ts b/src/vs/workbench/contrib/debug/browser/repl.ts index afdc82e0bbb6f519b74bb216f5cd33d579eff6e2..1176afc16b16c22db3406e519f90558cd5c3ca64 100644 --- a/src/vs/workbench/contrib/debug/browser/repl.ts +++ b/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;