Repository: microsoft/vscode (TypeScript)
Date: 2023-05-04 13:37:10+00:00
Task type: Bug Fix

Issue:
Gutter icon is no longer centered in 1.78
Create decoration with `gutterIconSize` set to `50%`.

Example [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens):

```js
"errorLens.gutterIconsEnabled": true,
"errorLens.gutterIconSet": "circle",
"errorLens.gutterIconSize": "50%",
```


https://user-images.githubusercontent.com/9638156/236124435-0e9df3cd-6171-472d-8d5b-24e12afe05fc.mp4

---
Version: 1.78.0
Commit: 252e5463d60e63238250799aef7375787f68b4ee
Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.78.0 Chrome/108.0.5359.215 Electron/22.4.8 Safari/537.36


Issue discussion:

Solution patch:
diff --git a/src/vs/editor/browser/services/abstractCodeEditorService.ts b/src/vs/editor/browser/services/abstractCodeEditorService.ts
--- a/src/vs/editor/browser/services/abstractCodeEditorService.ts
+++ b/src/vs/editor/browser/services/abstractCodeEditorService.ts
@@ -585,7 +585,7 @@ export const _CSS_MAP: { [prop: string]: string } = {
 	cursor: 'cursor:{0};',
 	letterSpacing: 'letter-spacing:{0};',
 
-	gutterIconPath: 'background:{0} no-repeat;',
+	gutterIconPath: 'background:{0} center center no-repeat;',
 	gutterIconSize: 'background-size:{0};',
 
 	contentText: 'content:\'{0}\';',


Test patch:
diff --git a/src/vs/editor/test/browser/services/decorationRenderOptions.test.ts b/src/vs/editor/test/browser/services/decorationRenderOptions.test.ts
--- a/src/vs/editor/test/browser/services/decorationRenderOptions.test.ts
+++ b/src/vs/editor/test/browser/services/decorationRenderOptions.test.ts
@@ -41,7 +41,7 @@ suite('Decoration Render Options', () => {
 		const styleSheet = s.globalStyleSheet;
 		s.registerDecorationType('test', 'example', options);
 		const sheet = readStyleSheet(styleSheet);
-		assert(sheet.indexOf(`{background:url('https://github.com/microsoft/vscode/blob/main/resources/linux/code.png') no-repeat;background-size:contain;}`) >= 0);
+		assert(sheet.indexOf(`{background:url('https://github.com/microsoft/vscode/blob/main/resources/linux/code.png') center center no-repeat;background-size:contain;}`) >= 0);
 		assert(sheet.indexOf(`{background-color:red;border-color:yellow;box-sizing: border-box;}`) >= 0);
 	});
 
@@ -108,14 +108,14 @@ suite('Decoration Render Options', () => {
 
 		// URI, only minimal encoding
 		s.registerDecorationType('test', 'example', { gutterIconPath: URI.parse('data:image/svg+xml;base64,PHN2ZyB4b+') });
-		assert(readStyleSheet(styleSheet).indexOf(`{background:url('data:image/svg+xml;base64,PHN2ZyB4b+') no-repeat;}`) > 0);
+		assert(readStyleSheet(styleSheet).indexOf(`{background:url('data:image/svg+xml;base64,PHN2ZyB4b+') center center no-repeat;}`) > 0);
 		s.removeDecorationType('example');
 
 		function assertBackground(url1: string, url2: string) {
 			const actual = readStyleSheet(styleSheet);
 			assert(
-				actual.indexOf(`{background:url('${url1}') no-repeat;}`) > 0
-				|| actual.indexOf(`{background:url('${url2}') no-repeat;}`) > 0
+				actual.indexOf(`{background:url('${url1}') center center no-repeat;}`) > 0
+				|| actual.indexOf(`{background:url('${url2}') center center no-repeat;}`) > 0
 			);
 		}
 
@@ -142,7 +142,7 @@ suite('Decoration Render Options', () => {
 		}
 
 		s.registerDecorationType('test', 'example', { gutterIconPath: URI.parse('http://test/pa\'th') });
-		assert(readStyleSheet(styleSheet).indexOf(`{background:url('http://test/pa%27th') no-repeat;}`) > 0);
+		assert(readStyleSheet(styleSheet).indexOf(`{background:url('http://test/pa%27th') center center no-repeat;}`) > 0);
 		s.removeDecorationType('example');
 	});
 });