From ad18bb00ce2447914f85f03c600bbd79a5b9dca6 Mon Sep 17 00:00:00 2001 From: Henning Dieterichs Date: Tue, 9 Jan 2024 23:00:52 +0100 Subject: [PATCH] Fixes #199351 --- .../lib/stylelint/vscode-known-variables.json | 4 +- .../theme-defaults/themes/light_vs.json | 3 +- .../widget/multiDiffEditorWidget/colors.ts | 13 +++++++ .../diffEditorItemTemplate.ts | 39 ++++++------------- .../multiDiffEditorWidgetImpl.ts | 17 ++++---- .../widget/multiDiffEditorWidget/style.css | 38 ++++++++++-------- 6 files changed, 58 insertions(+), 56 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 6d0e83e9743..c15c90a21d9 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -727,7 +727,9 @@ "--vscode-widget-border", "--vscode-widget-shadow", "--vscode-window-activeBorder", - "--vscode-window-inactiveBorder" + "--vscode-window-inactiveBorder", + "--vscode-multiDiffEditor-background", + "--vscode-multiDiffEditor-border" ], "others": [ "--background-dark", diff --git a/extensions/theme-defaults/themes/light_vs.json b/extensions/theme-defaults/themes/light_vs.json index c67d2932a16..bdd063fbc56 100644 --- a/extensions/theme-defaults/themes/light_vs.json +++ b/extensions/theme-defaults/themes/light_vs.json @@ -31,7 +31,8 @@ "list.focusAndSelectionOutline": "#90C2F9", "terminal.inactiveSelectionBackground": "#E5EBF1", "widget.border": "#d4d4d4", - "actionBar.toggledBackground": "#dddddd" + "actionBar.toggledBackground": "#dddddd", + "diffEditor.unchangedRegionBackground": "#f8f8f8" }, "tokenColors": [ { diff --git a/src/vs/editor/browser/widget/multiDiffEditorWidget/colors.ts b/src/vs/editor/browser/widget/multiDiffEditorWidget/colors.ts index 5b69dd6c1df..b07e5338e80 100644 --- a/src/vs/editor/browser/widget/multiDiffEditorWidget/colors.ts +++ b/src/vs/editor/browser/widget/multiDiffEditorWidget/colors.ts @@ -11,3 +11,16 @@ export const multiDiffEditorHeaderBackground = registerColor( { dark: '#808080', light: '#b4b4b4', hcDark: '#808080', hcLight: '#b4b4b4', }, localize('multiDiffEditor.headerBackground', 'The background color of the diff editor\'s header') ); + +export const multiDiffEditorBackground = registerColor( + 'multiDiffEditor.background', + { dark: '#000000', light: '#e5e5e5', hcDark: '#000000', hcLight: '#e5e5e5', }, + localize('multiDiffEditor.background', 'The background color of the multi file diff editor') +); + +export const multiDiffEditorBorder = registerColor( + 'multiDiffEditor.border', + { dark: 'sideBarSectionHeader.border', light: '#cccccc', hcDark: 'sideBarSectionHeader.border', hcLight: '#cccccc', }, + localize('multiDiffEditor.border', 'The border color of the multi file diff editor') +); + diff --git a/src/vs/editor/browser/widget/multiDiffEditorWidget/diffEditorItemTemplate.ts b/src/vs/editor/browser/widget/multiDiffEditorWidget/diffEditorItemTemplate.ts index 2218b53f5ed..e81aa6f51b9 100644 --- a/src/vs/editor/browser/widget/multiDiffEditorWidget/diffEditorItemTemplate.ts +++ b/src/vs/editor/browser/widget/multiDiffEditorWidget/diffEditorItemTemplate.ts @@ -36,9 +36,9 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject< private readonly _collapsed = derived(this, reader => this._viewModel.read(reader)?.collapsed.read(reader)); - private readonly _contentHeight = observableValue(this, 500); - public readonly height = derived(this, reader => { - const h = this._collapsed.read(reader) ? 0 : this._contentHeight.read(reader); + private readonly _editorContentHeight = observableValue(this, 500); + public readonly contentHeight = derived(this, reader => { + const h = this._collapsed.read(reader) ? 0 : this._editorContentHeight.read(reader); return h + this._outerEditorHeight; }); @@ -58,29 +58,14 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject< }); private readonly _elements = h('div.multiDiffEntry', [ - h('div.content', { - style: { - display: 'flex', - flexDirection: 'column', - flex: '1', - overflow: 'hidden', - } - }, [ - h('div.header@header', [ - h('div.collapse-button@collapseButton'), - h('div.title.show-file-icons@title', [] as any), - h('div.actions@actions'), - ]), + h('div.header@header', [ + h('div.collapse-button@collapseButton'), + h('div.title.show-file-icons@title', [] as any), + h('div.actions@actions'), + ]), - h('div.editorParent', { - style: { - flex: '1', - display: 'flex', - flexDirection: 'column', - } - }, [ - h('div.editorContainer@editor', { style: { flex: '1' } }), - ]) + h('div.editorParent', [ + h('div.editorContainer@editor'), ]) ]); @@ -132,7 +117,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject< this._register(this.editor.onDidContentSizeChange(e => { globalTransaction(tx => { - this._contentHeight.set(e.contentHeight, tx); + this._editorContentHeight.set(e.contentHeight, tx); this._modifiedContentWidth.set(this.editor.getModifiedEditor().getContentWidth(), tx); this._originalContentWidth.set(this.editor.getOriginalEditor().getContentWidth(), tx); }); @@ -199,7 +184,7 @@ export class DiffEditorItemTemplate extends Disposable implements IPooledObject< }); } - private readonly _headerHeight = this._elements.header.clientHeight; + private readonly _headerHeight = /*this._elements.header.clientHeight*/ 38; public render(verticalRange: OffsetRange, width: number, editorScroll: number, viewPort: OffsetRange): void { this._elements.root.style.visibility = 'visible'; diff --git a/src/vs/editor/browser/widget/multiDiffEditorWidget/multiDiffEditorWidgetImpl.ts b/src/vs/editor/browser/widget/multiDiffEditorWidget/multiDiffEditorWidgetImpl.ts index 4a1baec1796..cd1fbf9cb81 100644 --- a/src/vs/editor/browser/widget/multiDiffEditorWidget/multiDiffEditorWidgetImpl.ts +++ b/src/vs/editor/browser/widget/multiDiffEditorWidget/multiDiffEditorWidgetImpl.ts @@ -23,11 +23,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle import { EditorContextKeys } from 'vs/editor/common/editorContextKeys'; export class MultiDiffEditorWidgetImpl extends Disposable { - private readonly _elements = h('div', { - style: { - overflowY: 'hidden', - } - }, [ + private readonly _elements = h('div.monaco-component.multiDiffEditor', [ h('div@content', { style: { overflow: 'hidden', @@ -59,7 +55,6 @@ export class MultiDiffEditorWidgetImpl extends Disposable { private readonly _scrollableElement = this._register(new SmoothScrollableElement(this._elements.root, { vertical: ScrollbarVisibility.Auto, horizontal: ScrollbarVisibility.Auto, - className: 'monaco-component', useShadows: false, }, this._scrollable)); @@ -193,8 +188,10 @@ export class MultiDiffEditorWidgetImpl extends Disposable { v.render(itemRange, scroll, width, viewPort); } - itemHeightSumBefore += itemHeight; - itemContentHeightSumBefore += itemContentHeight; + const spaceBetween = 10; + + itemHeightSumBefore += itemHeight + spaceBetween; + itemContentHeightSumBefore += itemContentHeight + spaceBetween; } this._elements.content.style.transform = `translateY(${-(scrollTop + contentScrollOffsetToScrollOffset)}px)`; @@ -210,7 +207,7 @@ class VirtualizedViewItem extends Disposable { private readonly _templateRef = this._register(disposableObservableValue | undefined>(this, undefined)); public readonly contentHeight = derived(this, reader => - this._templateRef.read(reader)?.object.height?.read(reader) ?? this._lastTemplateData.read(reader).contentHeight + this._templateRef.read(reader)?.object.contentHeight?.read(reader) ?? this._lastTemplateData.read(reader).contentHeight ); public readonly maxScroll = derived(this, reader => this._templateRef.read(reader)?.object.maxScroll.read(reader) ?? this._lastTemplateData.read(reader).maxScroll); @@ -257,7 +254,7 @@ class VirtualizedViewItem extends Disposable { if (!ref) { return; } transaction(tx => { this._lastTemplateData.set({ - contentHeight: ref.object.height.get(), + contentHeight: ref.object.contentHeight.get(), maxScroll: { maxScroll: 0, width: 0, } // Reset max scroll }, tx); ref.object.hide(); diff --git a/src/vs/editor/browser/widget/multiDiffEditorWidget/style.css b/src/vs/editor/browser/widget/multiDiffEditorWidget/style.css index 8674fdfb791..f1ce31f7837 100644 --- a/src/vs/editor/browser/widget/multiDiffEditorWidget/style.css +++ b/src/vs/editor/browser/widget/multiDiffEditorWidget/style.css @@ -3,21 +3,18 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +.monaco-component.multiDiffEditor { + background: var(--vscode-multiDiffEditor-background); + overflow-y: hidden; +} + .monaco-component .multiDiffEntry { display: flex; flex-direction: column; -} + flex: 1; + overflow: hidden; -.monaco-component .multiDiffEntry .editorParent { - border-left: 2px var(--vscode-tab-inactiveBackground) solid; -} - -.monaco-component .multiDiffEntry.focused .editorParent { - border-left: 2px var(--vscode-notebook-focusedCellBorder) solid; -} - -.monaco-component .multiDiffEntry .editorParent .editorContainer { - border-left: 17px var(--vscode-tab-inactiveBackground) solid; + border-bottom: 1px solid var(--vscode-multiDiffEditor-border); } .monaco-component .multiDiffEntry .collapse-button { @@ -35,15 +32,12 @@ padding: 8px 5px; color: var(--vscode-foreground); background: var(--vscode-editor-background); + z-index: 1000; - border-bottom: 1px var(--vscode-sideBarSectionHeader-border) solid; - border-top: 1px var(--vscode-sideBarSectionHeader-border) solid; + border-top: 1px solid var(--vscode-multiDiffEditor-border); - border-left: 2px var(--vscode-editor-background) solid; -} -.monaco-component .multiDiffEntry.focused .header { - border-left: 2px var(--vscode-notebook-focusedCellBorder) solid; + border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border); } .monaco-component .multiDiffEntry .header.shadow { @@ -59,3 +53,13 @@ .monaco-component .multiDiffEntry .header .actions { padding: 0 8px; } + +.monaco-component .multiDiffEntry .editorParent { + flex: 1; + display: flex; + flex-direction: column; +} + +.monaco-component .multiDiffEntry .editorContainer { + flex: 1; +}