Render the a background cover up only if really necessary (#236460)

pull/236480/head
Alexandru Dima 2024-12-18 14:12:34 +01:00 committed by GitHub
parent 6c2faf1c5d
commit 7579838b39
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 8 deletions

View File

@ -14,6 +14,7 @@ import { ICommandService } from '../../../../../../platform/commands/common/comm
import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
import { diffInserted, diffRemoved } from '../../../../../../platform/theme/common/colorRegistry.js';
import { darken, lighten, registerColor } from '../../../../../../platform/theme/common/colorUtils.js';
import { IThemeService } from '../../../../../../platform/theme/common/themeService.js';
import { ICodeEditor } from '../../../../../browser/editorBrowser.js';
import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
import { Point } from '../../../../../browser/point.js';
@ -108,7 +109,8 @@ export class InlineEditsSideBySideDiff extends Disposable {
originalDisplayRange: LineRange;
} | undefined>,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@ICommandService private readonly _commandService: ICommandService
@ICommandService private readonly _commandService: ICommandService,
@IThemeService private readonly _themeService: IThemeService,
) {
super();
@ -487,19 +489,33 @@ export class InlineEditsSideBySideDiff extends Disposable {
return extendedModifiedPathBuilder.build();
});
private readonly _originalBackgroundColor = observableFromEvent(this, this._themeService.onDidColorThemeChange, () => {
return this._themeService.getColorTheme().getColor(originalBackgroundColor) ?? Color.transparent;
});
private readonly _backgroundSvg = n.svg({
transform: 'translate(-0.5 -0.5)',
style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
}, [
n.svgElem('path', {
class: 'rightOfModifiedBackgroundCoverUp',
d: this._previewEditorLayoutInfo.map(layoutInfo => layoutInfo && new PathBuilder()
.moveTo(layoutInfo.code1)
.lineTo(layoutInfo.code1.deltaX(1000))
.lineTo(layoutInfo.code2.deltaX(1000))
.lineTo(layoutInfo.code2)
.build()
),
d: derived(reader => {
const layoutInfo = this._previewEditorLayoutInfo.read(reader);
if (!layoutInfo) {
return undefined;
}
const originalBackgroundColor = this._originalBackgroundColor.read(reader);
if (originalBackgroundColor.isTransparent()) {
return undefined;
}
return new PathBuilder()
.moveTo(layoutInfo.code1)
.lineTo(layoutInfo.code1.deltaX(1000))
.lineTo(layoutInfo.code2.deltaX(1000))
.lineTo(layoutInfo.code2)
.build();
}),
style: {
fill: 'var(--vscode-editor-background, transparent)',
}