From f90d6533cd5b29cd8a14de7a01b0cc0b40378016 Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Wed, 29 Apr 2026 14:52:28 +0200 Subject: [PATCH 1/2] feat: add diffScrollBarWidth to DiffViewState and update related functionality --- .../CreateDefaultState/CreateDefaultState.ts | 1 + .../diff-view/src/parts/DiffCss/DiffCss.ts | 1 + .../src/parts/DiffViewState/DiffViewState.ts | 1 + packages/diff-view/src/parts/GetCss/GetCss.ts | 21 ++++++++++++++++ .../src/parts/RenderCss/RenderCss.ts | 24 ++----------------- .../diff-view/test/CreateDefaultState.test.ts | 1 + packages/diff-view/test/Diff.test.ts | 10 ++++++++ packages/diff-view/test/GetCss.test.ts | 2 ++ .../test/RenderCssGutterWidth.test.ts | 3 +++ 9 files changed, 42 insertions(+), 22 deletions(-) diff --git a/packages/diff-view/src/parts/CreateDefaultState/CreateDefaultState.ts b/packages/diff-view/src/parts/CreateDefaultState/CreateDefaultState.ts index 38e124fe..fdf55aea 100644 --- a/packages/diff-view/src/parts/CreateDefaultState/CreateDefaultState.ts +++ b/packages/diff-view/src/parts/CreateDefaultState/CreateDefaultState.ts @@ -8,6 +8,7 @@ export const createDefaultState = (): DiffViewState => ({ contentRight: '', deltaY: 0, diffMode: 'side-by-side', + diffScrollBarWidth: 8, errorLeftCodeFrame: '', errorLeftMessage: '', errorLeftStack: '', diff --git a/packages/diff-view/src/parts/DiffCss/DiffCss.ts b/packages/diff-view/src/parts/DiffCss/DiffCss.ts index 6ffe156d..e418adff 100644 --- a/packages/diff-view/src/parts/DiffCss/DiffCss.ts +++ b/packages/diff-view/src/parts/DiffCss/DiffCss.ts @@ -3,6 +3,7 @@ import type { DiffViewState } from '../DiffViewState/DiffViewState.ts' export const isEqual = (oldState: DiffViewState, newState: DiffViewState): boolean => { return ( oldState.deltaY === newState.deltaY && + oldState.diffScrollBarWidth === newState.diffScrollBarWidth && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.gutterWidthVariable === newState.gutterWidthVariable && diff --git a/packages/diff-view/src/parts/DiffViewState/DiffViewState.ts b/packages/diff-view/src/parts/DiffViewState/DiffViewState.ts index e2db2871..76d1b964 100644 --- a/packages/diff-view/src/parts/DiffViewState/DiffViewState.ts +++ b/packages/diff-view/src/parts/DiffViewState/DiffViewState.ts @@ -13,6 +13,7 @@ export interface DiffViewState { readonly contentRight: string readonly deltaY: number readonly diffMode: DiffMode + readonly diffScrollBarWidth: number readonly errorLeftCodeFrame: string readonly errorLeftMessage: string readonly errorLeftStack: string diff --git a/packages/diff-view/src/parts/GetCss/GetCss.ts b/packages/diff-view/src/parts/GetCss/GetCss.ts index 7be1455a..ed7e3f7b 100644 --- a/packages/diff-view/src/parts/GetCss/GetCss.ts +++ b/packages/diff-view/src/parts/GetCss/GetCss.ts @@ -1,5 +1,26 @@ export const getCss = (): string => { return ` +.DiffScrollBar { + background-color: rgba(128, 128, 128, 0.15); + background-image: var(--ScrollBarBackgroundImage); + border-radius: 4px; + height: 100%; + position: absolute; + right: 2px; + top: 0; + width: var(--DiffScrollBarWidth); +} + +.DiffScrollBarThumb { + background: rgba(128, 128, 128, 0.45); + border-radius: 4px; + cursor: pointer; + height: var(--ScrollBarHeight); + position: absolute; + top: var(--ScrollBarThumbTop); + width: 100%; +} + .DiffEditorErrorCodeFrame, .DiffEditorErrorStack { background: rgba(0, 0, 0, 0.22); diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts index 5c2a84c2..ff848004 100644 --- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts +++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts @@ -6,7 +6,7 @@ import { getScrollBarBackgroundImage } from '../GetScrollBarBackgroundImage/GetS import { getScrollBarThumbTop } from '../GetScrollBarThumbTop/GetScrollBarThumbTop.ts' export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any => { - const { deltaY, finalDeltaY, gutterWidthVariable, height, id, inlineChanges, itemHeight, leftWidth, rightWidth, scrollBarHeight, totalLineCount } = newState + const { deltaY, diffScrollBarWidth, finalDeltaY, gutterWidthVariable, height, id, inlineChanges, itemHeight, leftWidth, rightWidth, scrollBarHeight, totalLineCount } = newState const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY) const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount) const { layout } = newState @@ -21,6 +21,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any --RightWidth: ${rightWidth}px; --GutterWidth: ${gutterWidthVariable}px; --DiffEditorHeight: ${height}px; + --DiffScrollBarWidth: ${diffScrollBarWidth}px; --EditorRowHeight: ${itemHeight}px; --ScrollBarHeight: ${scrollBarHeight}px; --ScrollBarBackgroundImage: ${scrollBarBackgroundImage}; @@ -186,27 +187,6 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any height: ${getSashWidth()}px; } -.DiffScrollBar { - background-color: rgba(128, 128, 128, 0.15); - background-image: var(--ScrollBarBackgroundImage); - border-radius: 4px; - height: 100%; - position: absolute; - right: 2px; - top: 0; - width: 8px; -} - -.DiffScrollBarThumb { - background: rgba(128, 128, 128, 0.45); - border-radius: 4px; - cursor: pointer; - height: var(--ScrollBarHeight); - position: absolute; - top: var(--ScrollBarThumbTop); - width: 100%; -} - ${staticCss} ` return [ViewletCommand.SetCss, id, css] diff --git a/packages/diff-view/test/CreateDefaultState.test.ts b/packages/diff-view/test/CreateDefaultState.test.ts index 95888018..bf87cb4a 100644 --- a/packages/diff-view/test/CreateDefaultState.test.ts +++ b/packages/diff-view/test/CreateDefaultState.test.ts @@ -8,6 +8,7 @@ test('createDefaultState sets up image render defaults', (): void => { expect(result.allowedLinkSchemes).toEqual(['http', 'https', 'file']) expect(result.knownImageExtensions).toEqual(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.svg', '.bmp', '.ico']) expect(result.diffMode).toBe('side-by-side') + expect(result.diffScrollBarWidth).toBe(8) expect(result.gutterWidthVariable).toBe(9) expect(result.lineNumbers).toBe(true) expect(result.layout).toBe('horizontal') diff --git a/packages/diff-view/test/Diff.test.ts b/packages/diff-view/test/Diff.test.ts index 5dd624f5..831d8f3f 100644 --- a/packages/diff-view/test/Diff.test.ts +++ b/packages/diff-view/test/Diff.test.ts @@ -21,3 +21,13 @@ test('diff returns no renderers when states are equal', (): void => { expect(diff(state, state)).toEqual([]) }) + +test('diff returns renderCss when diff scrollbar width changes', (): void => { + const oldState = createDefaultState() + const newState = { + ...oldState, + diffScrollBarWidth: 12, + } + + expect(diff(oldState, newState)).toEqual([DiffType.RenderCss]) +}) diff --git a/packages/diff-view/test/GetCss.test.ts b/packages/diff-view/test/GetCss.test.ts index 5f68ef6a..76a4f4e4 100644 --- a/packages/diff-view/test/GetCss.test.ts +++ b/packages/diff-view/test/GetCss.test.ts @@ -4,6 +4,8 @@ import { getCss } from '../src/parts/GetCss/GetCss.ts' test('getCss includes the shared error styles', (): void => { const css = getCss() + expect(css).toContain('.DiffScrollBar') + expect(css).toContain('width: var(--DiffScrollBarWidth);') expect(css).toContain('.DiffEditorErrorCodeFrame') expect(css).toContain('.DiffEditorErrorStack') expect(css).toContain('.DiffEditorErrorStackLink') diff --git a/packages/diff-view/test/RenderCssGutterWidth.test.ts b/packages/diff-view/test/RenderCssGutterWidth.test.ts index 1d5caada..d92c06ee 100644 --- a/packages/diff-view/test/RenderCssGutterWidth.test.ts +++ b/packages/diff-view/test/RenderCssGutterWidth.test.ts @@ -6,13 +6,16 @@ test('renderCss exposes gutter width as a css variable and uses it for gutter si const oldState = createDefaultState() const newState = { ...oldState, + diffScrollBarWidth: 12, gutterWidthVariable: 27, id: 1, } const result = renderCss(oldState, newState) + expect(result[2]).toContain('--DiffScrollBarWidth: 12px;') expect(result[2]).toContain('--GutterWidth: 27px;') expect(result[2]).toContain('width: calc(var(--GutterWidth) + 20px);') + expect(result[2]).toContain('width: var(--DiffScrollBarWidth);') expect(result[2]).toContain('.InlineDiffEditor .DiffEditorGutter {') }) From 35de28e3c9a0fb20dcfe33cd3ac3fd7aba010a9f Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Wed, 29 Apr 2026 14:52:41 +0200 Subject: [PATCH 2/2] fix --- packages/diff-view/src/parts/RenderCss/RenderCss.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts index ff848004..72df1219 100644 --- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts +++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts @@ -6,7 +6,8 @@ import { getScrollBarBackgroundImage } from '../GetScrollBarBackgroundImage/GetS import { getScrollBarThumbTop } from '../GetScrollBarThumbTop/GetScrollBarThumbTop.ts' export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any => { - const { deltaY, diffScrollBarWidth, finalDeltaY, gutterWidthVariable, height, id, inlineChanges, itemHeight, leftWidth, rightWidth, scrollBarHeight, totalLineCount } = newState + const { deltaY, diffScrollBarWidth, finalDeltaY, gutterWidthVariable, height, id, inlineChanges, itemHeight, leftWidth, rightWidth, scrollBarHeight, totalLineCount } = + newState const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY) const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount) const { layout } = newState