Change:
Note all three lines highlighted with background color <img width="262" alt="CleanShot 2022-09-08 at 16 01 57 src="https://user-"We only highlight the changed line and specific word. <img width="184" alt="CleanShot 2022-09-08 at 16 02 04 src="https://user-"If we followed the inline style and still rendered a word diff, wouldn't we be able to get away without using the borders to indicate the region? cc
The inline style does this because it has no clue about the actual conflict, it just sees the conflict markers. We do this to show the actual change in that side.
I a hidden setting (default false) so we can play with idea. Personally, I think it hides many important decorations, but I'm open to exploring it. Enabled: ! Disabled: ! The background color disappears when the conflict is handled.

Discussion:
*--------------------------------------------------------------------------------------------*/ import { localize } from 'vs/nls'; <del> import { registerColor } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { mergeCurrentHeaderBackground, mergeIncomingHeaderBackground, registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; </ins> export const diff = registerColor( 'mergeEditor.change.background',

{ dark: '#ffea0047', light: '#ffea0047', hcDark: '#ffea0047', hcLight: '#ffea0047', }, localize('mergeEditor.conflictingLines.background', 'The background of the "Conflicting Lines" text.') ); <ins> const contentTransparency = 0.4; export const conflictInput1Background = registerColor( 'mergeEditor.conflict.input1.background', { dark: transparent(mergeCurrentHeaderBackground, contentTransparency), light: transparent(mergeCurrentHeaderBackground, contentTransparency), hcDark: transparent(mergeCurrentHeaderBackground, contentTransparency), hcLight: transparent(mergeCurrentHeaderBackground, contentTransparency) }, localize('mergeEditor.conflict.input1.background', 'The background color of decorations in input 1.') ); export const conflictInput2Background = registerColor( 'mergeEditor.conflict.input2.background', { dark: transparent(mergeIncomingHeaderBackground, contentTransparency), light: transparent(mergeIncomingHeaderBackground, contentTransparency), hcDark: transparent(mergeIncomingHeaderBackground, contentTransparency), hcLight: transparent(mergeIncomingHeaderBackground, contentTransparency) }, localize('mergeEditor.conflict.input2.background', 'The background color of decorations in input 2.') ); </ins>

protected readonly showDeletionMarkers = observableFromEvent<boolean>( this.configurationService.onDidChangeConfiguration, <del> () => /** @description showDeletionMarkers */ this.configurationService.getValue('mergeEditor.showDeletionMarkers') </del> <ins> () => /** @description showDeletionMarkers */ this.configurationService.getValue('mergeEditor.showDeletionMarkers') ?? true ); protected readonly useSimplifiedDecorations = observableFromEvent<boolean>( this.configurationService.onDidChangeConfiguration, () => /** @description useSimplifiedDecorations */ this.configurationService.getValue('mergeEditor.useSimplifiedDecorations') ?? false </ins> ); public readonly editor = this.instantiationService.createInstance(

const showNonConflictingChanges = viewModel.showNonConflictingChanges.read(reader); const showDeletionMarkers = this.showDeletionMarkers.read(reader); <ins> const diffWithThis = viewModel.baseCodeEditorView.read(reader) !== undefined && viewModel.baseShowDiffAgainst.read(reader) === this.inputNumber; const useSimplifiedDecorations = !diffWithThis && this.useSimplifiedDecorations.read(reader); </ins> for (const modifiedBaseRange of model.modifiedBaseRanges.read(reader)) { const range = modifiedBaseRange.getInputRange(this.inputNumber);

if (modifiedBaseRange.isConflicting) { blockClassNames.push('conflicting'); } <del> const inputClassName = this.inputNumber === 1 ? 'input 1' : 'input 2'; </del> <ins> const inputClassName = this.inputNumber === 1 ? 'input i1' : 'input i2'; </ins> blockClassNames.push(inputClassName); if (!modifiedBaseRange.isConflicting && !showNonConflictingChanges && isHandled) { continue; } <ins> if (useSimplifiedDecorations && !isHandled) { blockClassNames.push('use-simplified-decorations'); } </ins> result.push({ range: range.toInclusiveRangeOrEmpty(), options: {

} }); <del> if (modifiedBaseRange.isConflicting || !model.isHandled(modifiedBaseRange).read(reader)) { </del> <ins> if (!useSimplifiedDecorations && (modifiedBaseRange.isConflicting || !model.isHandled(modifiedBaseRange).read(reader))) { </ins> const inputDiffs = modifiedBaseRange.getInputDiffs(this.inputNumber); for (const diff of inputDiffs) { const range = diff.outputRange.toInclusiveRange();

background-color: var(--vscode-mergeEditor-conflict-handledFocused-background); } <ins> .merge-editor-simplified.input.i1, .merge-editor-block.use-simplified-decorations.input.i1 { background-color: var(--vscode-mergeEditor-conflict-input1-background); } .merge-editor-simplified.input.i2, .merge-editor-block.use-simplified-decorations.input.i2 { background-color: var(--vscode-mergeEditor-conflict-input2-background); } </ins> /* END: .merge-editor-block */ .gutter.monaco-editor>div {