diff --git a/src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts b/src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts index d4ebf737165..99a4125d8e4 100644 --- a/src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts +++ b/src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts @@ -6,104 +6,91 @@ import { localize } from 'vs/nls'; import { registerColor } from 'vs/platform/theme/common/colorRegistry'; -export const modifiedBaseRangeInput1 = registerColor( - 'mergeEditor.modifiedBaseRange.input1', - { - dark: '#a44c9d53', - light: '#a44c9d38', - hcDark: '#a44c9d53', - hcLight: '#a44c9d38', - }, - localize( - 'mergeEditor.modifiedBaseRange.input1', - 'The foreground color for changes in input 1.' - ) -); - -export const modifiedBaseRangeInput2 = registerColor( - 'mergeEditor.modifiedBaseRange.input2', - { - dark: '#878feb53', - light: '#878feb53', - hcDark: '#878feb53', - hcLight: '#878feb53', - }, - localize( - 'mergeEditor.modifiedBaseRange.input2', - 'The foreground color for changes in input 2.' - ) -); - -export const modifiedBaseRangeCombination = registerColor( - 'mergeEditor.modifiedBaseRange.combination', - { - dark: '#8a4d249e', - light: '#8a4d243e', - hcDark: '#8a4d249e', - hcLight: '#8a4d243e', - }, - localize( - 'mergeEditor.modifiedBaseRange.combination', - 'The foreground color for combined changes in the result editor.' - ) -); - -export const diffInput1 = registerColor( - 'mergeEditor.diff.input1', - { - dark: '#e571db21', - light: '#e571db21', - hcDark: '#e571db21', - hcLight: '#e571db21', - }, - localize( - 'mergeEditor.diff.input1', - 'The foreground color for changed words in input 1.' - ) -); - export const diff = registerColor( 'mergeEditor.diff', { - dark: '#d3d3d321', - light: '#d3d3d321', - hcDark: '#d3d3d321', - hcLight: '#d3d3d321', + dark: '#9bb95533', + light: '#9bb95533', + hcDark: '#9bb95533', + hcLight: '#9bb95533', }, localize( 'mergeEditor.diff', - 'The foreground color for changes in the result.' + 'The foreground color for changes.' ) ); export const diffWord = registerColor( 'mergeEditor.diff.word', { - dark: '#e571db21', - light: '#e571db21', - hcDark: '#e571db21', - hcLight: '#e571db21', + dark: '#9bb9551e', + light: '#9bb9551e', + hcDark: '#9bb9551e', + hcLight: '#9bb9551e', }, localize( 'mergeEditor.diff.word', - 'The foreground color for word changes in the result.' + 'The foreground color for word changes.' ) ); -export const diffInput2 = registerColor( - 'mergeEditor.diff.input2', +export const conflictBorderUnhandledUnfocused = registerColor( + 'mergeEditor.conflictBorder.unhandledUnfocused', { - dark: '#878feb53', - light: '#878feb53', - hcDark: '#878feb53', - hcLight: '#878feb53', + dark: '#ffa6007a', + light: '#ffa6007a', + hcDark: '#ffa6007a', + hcLight: '#ffa6007a', }, localize( - 'mergeEditor.diff.input2', - 'The foreground color for changed words in input 2.' + 'mergeEditor.conflictBorder.unhandledUnfocused', + 'The border color of unhandled unfocused conflicts.' ) ); +export const conflictBorderUnhandledFocused = registerColor( + 'mergeEditor.conflictBorder.unhandledFocused', + { + dark: '#ffa600', + light: '#ffa600', + hcDark: '#ffa600', + hcLight: '#ffa600', + }, + localize( + 'mergeEditor.conflictBorder.unhandledFocused', + 'The border color of unhandled focused conflicts.' + ) +); + +export const conflictBorderHandledUnfocused = registerColor( + 'mergeEditor.conflictBorder.handledUnfocused', + { + dark: '#86868649', + light: '#86868649', + hcDark: '#86868649', + hcLight: '#86868649', + }, + localize( + 'mergeEditor.conflictBorder.handledUnfocused', + 'The border color of handled unfocused conflicts.' + ) +); + +export const conflictBorderHandledFocused = registerColor( + 'mergeEditor.conflictBorder.handledFocused', + { + dark: '#c1c1c1cc', + light: '#c1c1c1cc', + hcDark: '#c1c1c1cc', + hcLight: '#c1c1c1cc', + }, + localize( + 'mergeEditor.conflictBorder.handledFocused', + 'The border color of handled focused conflicts.' + ) +); + + export const handledConflictMinimapOverViewRulerColor = registerColor( 'mergeEditor.conflict-handled.minimapOverViewRuler', { @@ -118,7 +105,6 @@ export const handledConflictMinimapOverViewRulerColor = registerColor( ) ); - export const unhandledConflictMinimapOverViewRulerColor = registerColor( 'mergeEditor.conflict-unhandled.minimapOverViewRuler', { @@ -132,4 +118,3 @@ export const unhandledConflictMinimapOverViewRulerColor = registerColor( 'The foreground color for changes in input 1.' ) ); - diff --git a/src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts b/src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts index d77432927b1..d7d2bb31291 100644 --- a/src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts +++ b/src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts @@ -36,24 +36,23 @@ export class InputCodeEditorView extends CodeEditorView { const range = modifiedBaseRange.getInputRange(this.inputNumber); if (range && !range.isEmpty) { - - const blockClassNames = ['merge-editor-block']; const isHandled = model.isHandled(modifiedBaseRange).read(reader); if (isHandled) { blockClassNames.push('handled'); } if (modifiedBaseRange === activeModifiedBaseRange) { - blockClassNames.push('active'); + blockClassNames.push('focused'); } - blockClassNames.push('input' + this.inputNumber); + const inputClassName = this.inputNumber === 1 ? 'input1' : 'input2'; + blockClassNames.push(inputClassName); result.push({ range: range.toInclusiveRange()!, options: { isWholeLine: true, blockClassName: blockClassNames.join(' '), - description: 'Base Range Projection', + description: 'Merge Editor', minimap: { position: MinimapPosition.Gutter, color: { id: isHandled ? handledConflictMinimapOverViewRulerColor : unhandledConflictMinimapOverViewRulerColor }, @@ -67,13 +66,25 @@ export class InputCodeEditorView extends CodeEditorView { const inputDiffs = modifiedBaseRange.getInputDiffs(this.inputNumber); for (const diff of inputDiffs) { + const range = diff.outputRange.toInclusiveRange(); + if (range) { + result.push({ + range, + options: { + className: `merge-editor-diff ${inputClassName}`, + description: 'Merge Editor', + isWholeLine: true, + } + }); + } + if (diff.rangeMappings) { for (const d of diff.rangeMappings) { result.push({ range: d.outputRange, options: { - className: `merge-editor-diff-input1`, - description: 'Base Range Projection' + className: `merge-editor-diff-word ${inputClassName}`, + description: 'Merge Editor' } }); } diff --git a/src/vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView.ts b/src/vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView.ts index 97b4816527d..2037af7fa49 100644 --- a/src/vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView.ts +++ b/src/vs/workbench/contrib/mergeEditor/browser/view/editors/resultCodeEditorView.ts @@ -46,7 +46,7 @@ export class ResultCodeEditorView extends CodeEditorView { blockClassNames.push('handled'); } if (modifiedBaseRange === activeModifiedBaseRange) { - blockClassNames.push('active'); + blockClassNames.push('focused'); } blockClassNames.push('result'); @@ -68,6 +68,32 @@ export class ResultCodeEditorView extends CodeEditorView { }); } } + + for (const diff of m.rights) { + const range = diff.outputRange.toInclusiveRange(); + if (range) { + result.push({ + range, + options: { + className: `merge-editor-diff result`, + description: 'Merge Editor', + isWholeLine: true, + } + }); + } + + if (diff.rangeMappings) { + for (const d of diff.rangeMappings) { + result.push({ + range: d.outputRange, + options: { + className: `merge-editor-diff-word result`, + description: 'Merge Editor' + } + }); + } + } + } } return result; }); diff --git a/src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css b/src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css index d7887bb1600..895a56245a6 100644 --- a/src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css +++ b/src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css @@ -29,52 +29,29 @@ flex-grow: 0; } -.monaco-editor .merge-accept-conflict-glyph { - cursor: pointer; -} - -.merge-editor-modified-base-range-input1 { - background-color: var(--vscode-mergeEditor-modifiedBaseRange-input1); -} - -.merge-editor-diff-input1 { - background-color: var(--vscode-mergeEditor-diff-input1); -} - -.merge-editor-modified-base-range-input2 { - background-color: var(--vscode-mergeEditor-modifiedBaseRange-input2); -} - -.merge-editor-diff-input2 { - background-color: var(--vscode-mergeEditor-diff-input2); -} - -.merge-editor-modified-base-range-combination { - background-color: var(--vscode-mergeEditor-modifiedBaseRange-combination); -} - -.merge-editor-modified-base-range { +.merge-editor-diff { background-color: var(--vscode-mergeEditor-diff); } -.merge-editor-block { - border: 2px solid rgba(255, 166, 0, 0.479); +.merge-editor-diff-word { + background-color: var(--vscode-mergeEditor-diff-word); } -.merge-editor-block.active { - border: 2px solid orange; +.merge-editor-block { + border: 2px solid var(--vscode-mergeEditor-conflictBorder-unhandledUnfocused); +} + +.merge-editor-block.focused { + border: 2px solid var(--vscode-mergeEditor-conflictBorder-unhandledFocused); } .merge-editor-block.handled { - border: 2px solid rgba(134, 134, 134, 0.285); + border: 2px solid var(--vscode-mergeEditor-conflictBorder-handledUnfocused); } -.merge-editor-block.handled.active { - border: 2px solid rgb(134, 134, 134, 0.8); -} -.merge-editor-block.handled.active { - border: 2px solid rgba(193, 193, 193, 0.8); +.merge-editor-block.handled.focused { + border: 2px solid var(--vscode-mergeEditor-conflictBorder-handledFocused); } .gutter-item { @@ -121,6 +98,6 @@ background-color: var(--vscode-checkbox-border); } -.checkbox-background { +.merge-accept-gutter-marker .checkbox-background { background: var(--vscode-editor-background); }