From dcfef6c3ea81e45e5b2b95f40f0b97901a86e254 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 12 Dec 2025 15:07:27 +0000 Subject: [PATCH] refactor: reduce border radius for inline edit components from 4px to 3px --- .../view/inlineEdits/components/gutterIndicatorView.ts | 4 ++-- .../inlineEdits/inlineEditsViews/inlineEditsCustomView.ts | 2 +- .../inlineEditsViews/inlineEditsInsertionView.ts | 2 +- .../inlineEditsViews/inlineEditsLineReplacementView.ts | 8 ++++---- .../inlineEditsViews/inlineEditsWordInsertView.ts | 6 +++--- .../inlineEditsViews/inlineEditsWordReplacementView.ts | 8 ++++---- .../longDistanceHint/inlineEditsLongDistanceHint.ts | 5 +++-- .../inlineCompletions/browser/view/inlineEdits/view.css | 8 ++++---- 8 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts index 70986285c6e..18542f7db86 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts @@ -492,7 +492,7 @@ export class InlineEditsGutterIndicator extends Disposable { style: { position: 'absolute', background: asCssVariable(inlineEditIndicatorBackground), - borderRadius: '4px', + borderRadius: '3px', ...rectToProps(reader => layout.read(reader).gutterEditArea), } }), @@ -529,7 +529,7 @@ export class InlineEditsGutterIndicator extends Disposable { ['--vscodeIconForeground' as any]: this._gutterIndicatorStyles.map(v => v.foreground), border: this._gutterIndicatorStyles.map(v => `1px solid ${v.border}`), boxSizing: 'border-box', - borderRadius: '4px', + borderRadius: '3px', display: 'flex', justifyContent: 'flex-end', transition: this._modifierPressed.map(m => m ? '' : 'background-color 0.2s ease-in-out, width 0.2s ease-in-out'), diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts index ab687560e68..0d35144d5a1 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts @@ -248,7 +248,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie boxSizing: 'border-box', cursor: 'pointer', border: styles.map(s => `1px solid ${s.border}`), - borderRadius: '4px', + borderRadius: '3px', backgroundColor: styles.map(s => s.background), display: 'flex', diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts index 2d27e4cc363..d14efdebf64 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts @@ -29,7 +29,7 @@ import { getPrefixTrim, mapOutFalsy } from '../utils/utils.js'; const BORDER_WIDTH = 1; const WIDGET_SEPARATOR_WIDTH = 1; const WIDGET_SEPARATOR_DIFF_EDITOR_WIDTH = 3; -const BORDER_RADIUS = 4; +const BORDER_RADIUS = 3; export class InlineEditsInsertionView extends Disposable implements IInlineEditsView { private readonly _editorObs: ObservableCodeEditor; diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts index c74949f8496..61b73313982 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts @@ -232,7 +232,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft).withMargin(separatorWidth)), - borderRadius: '4px', + borderRadius: '3px', border: `${separatorWidth + 1}px solid ${asCssVariable(editorBackground)}`, boxSizing: 'border-box', @@ -244,7 +244,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).background.translateX(-contentLeft)), - borderRadius: '4px', + borderRadius: '3px', border: getEditorBlendedColor(originalBorderColor, this._themeService).map(c => `1px solid ${c.toString()}`), pointerEvents: 'none', @@ -257,7 +257,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).lowerBackground.translateX(-contentLeft)), - borderRadius: '0 0 4px 4px', + borderRadius: '0 0 3px 3px', background: asCssVariable(editorBackground), boxShadow: `${asCssVariable(scrollbarShadow)} 0 6px 6px -6px`, border: `1px solid ${asCssVariable(modifiedBorderColor)}`, @@ -289,7 +289,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin fontWeight: this._editor.getOption(EditorOption.fontWeight), pointerEvents: 'none', whiteSpace: 'nowrap', - borderRadius: '0 0 4px 4px', + borderRadius: '0 0 3px 3px', overflow: 'hidden', } }, [...modifiedLineElements.lines]), diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts index 2243e3e91cb..92ee546644c 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts @@ -77,7 +77,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).lowerBackground), - borderRadius: '4px', + borderRadius: '3px', background: 'var(--vscode-editor-background)' } }, []), @@ -85,7 +85,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).modified), - borderRadius: '4px', + borderRadius: '3px', padding: '0px', textAlign: 'center', background: 'var(--vscode-inlineEdit-modifiedChangedTextBackground)', @@ -100,7 +100,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit style: { position: 'absolute', ...rectToProps(reader => layout.read(reader).background), - borderRadius: '4px', + borderRadius: '3px', border: `1px solid ${modifiedBorderColor}`, //background: 'rgba(122, 122, 122, 0.12)', looks better background: 'var(--vscode-inlineEdit-wordReplacementView-background)', diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts index a3fb07b96ec..eb0d7274891 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts @@ -241,7 +241,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin width: undefined, pointerEvents: 'auto', boxSizing: 'border-box', - borderRadius: '4px', + borderRadius: '3px', background: asCssVariable(editorBackground), display: 'flex', @@ -258,7 +258,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin fontSize: this._editor.getOption(EditorOption.fontSize), fontWeight: this._editor.getOption(EditorOption.fontWeight), width: rectToProps(reader => layout.read(reader).codeLine.withMargin(BORDER_WIDTH, 2 * BORDER_WIDTH)).width, - borderRadius: '4px', + borderRadius: '3px', border: primaryActionStyles.map(s => `${BORDER_WIDTH}px solid ${s.borderColor}`), boxSizing: 'border-box', padding: `${BORDER_WIDTH}px`, @@ -287,7 +287,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin id: DOM_ID_RENAME, style: { position: 'relative', - borderRadius: '4px', + borderRadius: '3px', borderTop: `${BORDER_WIDTH}px solid`, borderRight: `${BORDER_WIDTH}px solid`, borderBottom: `${BORDER_WIDTH}px solid`, @@ -326,7 +326,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin position: 'absolute', ...rectToProps(reader => layout.read(reader).originalLine.withMargin(BORDER_WIDTH)), boxSizing: 'border-box', - borderRadius: '4px', + borderRadius: '3px', border: `${BORDER_WIDTH}px solid ${originalBorderColor}`, background: asCssVariable(originalChangedTextOverlayColor), pointerEvents: 'none', diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.ts b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.ts index e9dd4c7ad1e..3f96dd92409 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.ts +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.ts @@ -36,7 +36,7 @@ import { ILongDistancePreviewProps, LongDistancePreviewEditor } from './longDist import { InlineSuggestionGutterMenuData, SimpleInlineSuggestModel } from '../../components/gutterIndicatorView.js'; import { jumpToNextInlineEditId } from '../../../../controller/commandIds.js'; -const BORDER_RADIUS = 4; +const BORDER_RADIUS = 6; const MAX_WIDGET_WIDTH = { EMPTY_SPACE: 425, OVERLAY: 375 }; const MIN_WIDGET_WIDTH = 250; @@ -373,7 +373,8 @@ export class InlineEditsLongDistanceHint extends Disposable implements IInlineEd class: ['editorContainer'], style: { overflow: 'hidden', - padding: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin), + paddingTop: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin), + paddingBottom: this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin), background: asCssVariable(editorBackground), pointerEvents: 'none', }, diff --git a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css index cea46ae7e32..e0cf5e57ba4 100644 --- a/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css +++ b/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css @@ -132,13 +132,13 @@ border-bottom: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */ } .inlineCompletions-char-insert.single-line-inline.start { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; border-left: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */ } .inlineCompletions-char-insert.single-line-inline.end { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; border-right: 1px solid var(--vscode-inlineEdit-modifiedBorder); /* TODO: Do not set border inline but create overlaywidget (like deletion view) */ }