feat: add diffScrollBarWidth to DiffViewState and update related functionality

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: '',

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 &&

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

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);

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, 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 +22,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 +188,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]

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')

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])
+})

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')

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 {')
 })