improve decorations (#143130)

microsoft · Feb 15, 2022 · a2348fa · a2348fa
1 parent 5fed342
commit a2348fa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css
@@ -102,6 +102,16 @@
 	padding-right: 20px;
 }
 
+.monaco-workbench .editor-instance .terminal-group .monaco-split-view2.horizontal .split-view-view:first-child .xterm .terminal-command-decoration,
+.monaco-workbench .pane-body.integrated-terminal .terminal-group .monaco-split-view2.horizontal .split-view-view:first-child .xterm .terminal-command-decoration {
+	margin-left: -17px;
+}
+
+.monaco-workbench .editor-instance .terminal-group .monaco-split-view2.horizontal .split-view-view .xterm .terminal-command-decoration,
+.monaco-workbench .pane-body.integrated-terminal .terminal-group .monaco-split-view2.horizontal .split-view-view .xterm .terminal-command-decoration {
+	margin-left: -12px;
+}
+
 .monaco-workbench .editor-instance .xterm a:not(.xterm-invalid-link),
 .monaco-workbench .pane-body.integrated-terminal .xterm a:not(.xterm-invalid-link) {
 	/* To support message box sizing */
@@ -419,3 +429,8 @@
 .terminal-command-decoration.skipped {
 	pointer-events: none;
 }
+
+.terminal-command-decoration {
+	width: 10px;
+	height: 10px;
+}
diff --git a/src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts b/src/vs/workbench/contrib/terminal/browser/xterm/decorationAddon.ts
@@ -28,10 +28,9 @@ const enum DecorationSelector {
 	ErrorColor = 'error',
 	SkippedColor = 'skipped',
 	Codicon = 'codicon',
+	XtermScreen = 'xterm-screen'
 }
 
-const enum DecorationStyles { ButtonMargin = 4 }
-
 interface IDisposableDecoration { decoration: IDecoration; disposables: IDisposable[] }
 
 export class DecorationAddon extends Disposable implements ITerminalAddon {
@@ -121,8 +120,6 @@ export class DecorationAddon extends Disposable implements ITerminalAddon {
 				this._decorations.set(decoration.marker.id, { decoration, disposables });
 			}
 			if (decoration.element?.clientWidth! > 0) {
-				const marginWidth = ((decoration.element?.parentElement?.parentElement?.previousElementSibling?.clientWidth || 0) - (decoration.element?.parentElement?.parentElement?.clientWidth || 0)) * .5;
-				target.style.marginLeft = `${((marginWidth - (decoration.element!.clientWidth + DecorationStyles.ButtonMargin)) * .5) - marginWidth}px`;
 				target.classList.add(DecorationSelector.CommandDecoration);
 				target.classList.add(DecorationSelector.Codicon);
 				if (command.exitCode === undefined) {
@@ -135,8 +132,6 @@ export class DecorationAddon extends Disposable implements ITerminalAddon {
 				} else {
 					target.classList.add(`codicon-${this._configurationService.getValue(TerminalSettingId.CommandIcon)}`);
 				}
-				target.style.width = `${marginWidth}px`;
-				target.style.height = `${marginWidth}px`;
 			}
 		});
 		return decoration;
@@ -199,5 +194,5 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 	const commandDecorationSkippedColor = theme.getColor(TERMINAL_COMMAND_DECORATION_SKIPPED_BACKGROUND_COLOR);
 	collector.addRule(`.${DecorationSelector.CommandDecoration}.${DecorationSelector.SkippedColor} { color: ${commandDecorationSkippedColor ? commandDecorationSkippedColor.toString() : ''}; } `);
 	const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground);
-	collector.addRule(`.${DecorationSelector.CommandDecoration}:not(.${DecorationSelector.SkippedColor}):hover { background-color: ${toolbarHoverBackgroundColor ? toolbarHoverBackgroundColor.toString() : ''}; }`);
+	collector.addRule(`.${DecorationSelector.CommandDecoration}:not(.${DecorationSelector.SkippedColor}):hover { background-color: ${toolbarHoverBackgroundColor ? toolbarHoverBackgroundColor.toString() : ''}; border-radius: 5px; }`);
 });