feat: hint gutter icons for "circle" & "square" (#142)

README.md

@@ -34,7 +34,7 @@ the entire line wherever a diagnostic is generated by the language and also prin
 |errorLens.disableLine|Error Lens: Add a comment to disable line for linter rule. Comment format is controlled by `"errorLens.disableLineComments"` setting.|
 <!-- COMMANDS_END -->
 <!-- SETTINGS_START -->
-## Settings (56)
+## Settings (57)
 
 > **Error Lens** extension settings start with `errorLens.`
 
@@ -90,9 +90,10 @@ the entire line wherever a diagnostic is generated by the language and also prin
 |errorGutterIconPath|""|Absolute path to error gutter icon.|
 |warningGutterIconPath|""|Absolute path to warning gutter icon.|
 |infoGutterIconPath|""|Absolute path to info gutter icon.|
-|errorGutterIconColor|"\#e45454"|Error color of `circle` gutter icon set.|
-|warningGutterIconColor|"\#ff942f"|Warning color of `circle` gutter icon set.|
-|infoGutterIconColor|"\#00b7e4"|Info color of `circle` gutter icon set.|
+|errorGutterIconColor|"\#e45454"|Error color of `circle` & `square` gutter icons.|
+|warningGutterIconColor|"\#ff942f"|Warning color of `circle` & `square` gutter icons.|
+|infoGutterIconColor|"\#00b7e4"|Info color of `circle` & `square` gutter icons.|
+|hintGutterIconColor|"\#2faf64"|Hint color of `circle` & `square` gutter icons.|
 |removeLinebreaks|**true**|When enabled - replaces line breaks in inline diagnostic message with whitespaces.|
 |replaceLinebreaksSymbol|"⏎"|Symbol to replace linebreaks. Requires enabling `#errorLens.removeLinebreaks#`.|
 |scrollbarHackEnabled|**false**|When enabled - prevents showing horizontal scrollbar in editor (caused by inline decorations).|

package.json

@@ -507,22 +507,33 @@
 							"description": "Absolute path to info gutter icon for light themes.",
 							"default": ""
 						},
+						"hintGutterIconPath": {
+							"type": "string",
+							"description": "Absolute path to hint gutter icon for light themes.",
+							"default": ""
+						},
 						"errorGutterIconColor": {
 							"type": "string",
 							"default": "",
-							"markdownDescription": "Error color of `circle` gutter icon set for light themes.",
+							"markdownDescription": "Error color of `circle` & `square` gutter icons for light themes.",
 							"format": "color"
 						},
 						"warningGutterIconColor": {
 							"type": "string",
 							"default": "",
-							"markdownDescription": "Warning color of `circle` gutter icon set for light themes.",
+							"markdownDescription": "Warning color of `circle` & `square` gutter icons for light themes.",
 							"format": "color"
 						},
 						"infoGutterIconColor": {
 							"type": "string",
 							"default": "",
-							"markdownDescription": "Info color of `circle` gutter icon set for light themes.",
+							"markdownDescription": "Info color of `circle` & `square` gutter icons for light themes.",
+							"format": "color"
+						},
+						"hintGutterIconColor": {
+							"type": "string",
+							"default": "",
+							"markdownDescription": "Hint color of `circle` & `square` gutter icons for light themes.",
 							"format": "color"
 						}
 					}
@@ -643,6 +654,12 @@
 					"markdownDescription": "Info color of `circle` & `square` gutter icons.",
 					"format": "color"
 				},
+				"errorLens.hintGutterIconColor": {
+					"type": "string",
+					"default": "#2faf64",
+					"markdownDescription": "Hint color of `circle` & `square` gutter icons.",
+					"format": "color"
+				},
 				"errorLens.removeLinebreaks": {
 					"type": "boolean",
 					"default": true,

src/decorations.ts

@@ -7,7 +7,7 @@ import { extUtils, type GroupedByLineDiagnostics } from 'src/utils/extUtils';
 import { utils } from 'src/utils/utils';
 import { Range, ThemeColor, languages, window, workspace, type DecorationInstanceRenderOptions, type DecorationOptions, type DecorationRenderOptions, type ExtensionContext, type TextEditor, type TextEditorDecorationType, type ThemableDecorationAttachmentRenderOptions, type Uri } from 'vscode';
 
-type DecorationKeys = 'decorationTypeError' | 'decorationTypeGutterError' | 'decorationTypeGutterInfo' | 'decorationTypeGutterWarning' | 'decorationTypeHint' | 'decorationTypeInfo' | 'decorationTypeWarning';
+type DecorationKeys = 'decorationTypeError' | 'decorationTypeGutterError' | 'decorationTypeGutterHint' | 'decorationTypeGutterInfo' | 'decorationTypeGutterWarning' | 'decorationTypeHint' | 'decorationTypeInfo' | 'decorationTypeWarning';
 export const decorationTypes = {} as unknown as Record<DecorationKeys, TextEditorDecorationType>;
 
 /**
@@ -26,6 +26,7 @@ export function setDecorationStyle(context: ExtensionContext): void {
 				gutterIconSize: $config.gutterIconSize,
 				light: {
 					gutterIconPath: gutter.errorIconPathLight,
+					// TODO: is this line needed?
 					gutterIconSize: $config.gutterIconSize,
 				},
 			});
@@ -45,6 +46,14 @@ export function setDecorationStyle(context: ExtensionContext): void {
 					gutterIconSize: $config.gutterIconSize,
 				},
 			});
+			decorationTypes.decorationTypeGutterHint = window.createTextEditorDecorationType({
+				gutterIconPath: gutter.hintIconPath,
+				gutterIconSize: $config.gutterIconSize,
+				light: {
+					gutterIconPath: gutter.hintIconPathLight,
+					gutterIconSize: $config.gutterIconSize,
+				},
+			});
 			// gutter will be rendered as a separate decoration, delete gutter from ordinary decorations
 			gutter = undefined;
 		}
@@ -183,13 +192,17 @@ export function setDecorationStyle(context: ExtensionContext): void {
 	};
 	const decorationRenderOptionsHint: DecorationRenderOptions = {
 		backgroundColor: hintBackground,
+		gutterIconSize: $config.gutterIconSize,
+		gutterIconPath: gutter?.hintIconPath,
 		after: {
 			...afterProps,
 			color: hintForeground,
 			backgroundColor: hintMessageBackground,
 		},
 		light: {
 			backgroundColor: hintBackgroundLight,
+			gutterIconSize: $config.gutterIconSize,
+			gutterIconPath: gutter?.hintIconPathLight,
 			after: {
 				color: hintForegroundLight,
 			},

src/gutter.ts

@@ -16,6 +16,9 @@ export interface Gutter {
 
 	infoIconPath: Uri | string;
 	infoIconPathLight: Uri | string;
+
+	hintIconPath: Uri | string | undefined;
+	hintIconPathLight: Uri | string | undefined;
 }
 
 /**
@@ -33,13 +36,17 @@ export function getGutterStyles(extensionContext: ExtensionContext): Gutter {
 		gutter.warningIconPathLight = vscodeUtils.svgToUri(createCircleIcon($config.light.warningGutterIconColor || $config.warningGutterIconColor));
 		gutter.infoIconPath = vscodeUtils.svgToUri(createCircleIcon($config.infoGutterIconColor));
 		gutter.infoIconPathLight = vscodeUtils.svgToUri(createCircleIcon($config.light.infoGutterIconColor || $config.infoGutterIconColor));
+		gutter.hintIconPath = vscodeUtils.svgToUri(createCircleIcon($config.hintGutterIconColor));
+		gutter.hintIconPathLight = vscodeUtils.svgToUri(createCircleIcon($config.light.hintGutterIconPath || $config.hintGutterIconColor));
 	} else if ($config.gutterIconSet === 'square') {
 		gutter.errorIconPath = vscodeUtils.svgToUri(createSquareIcon($config.errorGutterIconColor));
 		gutter.errorIconPathLight = vscodeUtils.svgToUri(createSquareIcon($config.light.errorGutterIconColor || $config.errorGutterIconColor));
 		gutter.warningIconPath = vscodeUtils.svgToUri(createSquareIcon($config.warningGutterIconColor));
 		gutter.warningIconPathLight = vscodeUtils.svgToUri(createSquareIcon($config.light.warningGutterIconColor || $config.warningGutterIconColor));
 		gutter.infoIconPath = vscodeUtils.svgToUri(createSquareIcon($config.infoGutterIconColor));
 		gutter.infoIconPathLight = vscodeUtils.svgToUri(createSquareIcon($config.light.infoGutterIconColor || $config.infoGutterIconColor));
+		gutter.hintIconPath = vscodeUtils.svgToUri(createSquareIcon($config.hintGutterIconColor));
+		gutter.hintIconPathLight = vscodeUtils.svgToUri(createSquareIcon($config.light.hintGutterIconPath || $config.hintGutterIconColor));
 	} else {
 		gutter.errorIconPath = extensionContext.asAbsolutePath(`./img/${gutter.iconSet}/error-dark.svg`);
 		gutter.errorIconPathLight = extensionContext.asAbsolutePath(`./img/${gutter.iconSet}/error-light.svg`);
@@ -75,6 +82,8 @@ export function getGutterStyles(extensionContext: ExtensionContext): Gutter {
 		warningIconPathLight: gutter.warningIconPathLight,
 		infoIconPath: gutter.infoIconPath,
 		infoIconPathLight: gutter.infoIconPathLight,
+		hintIconPath: gutter.hintIconPath,
+		hintIconPathLight: gutter.hintIconPathLight,
 		iconSet: gutter.iconSet,
 	};
 }
@@ -86,6 +95,7 @@ export function doUpdateGutterDecorations(editor: TextEditor, groupedDiagnostics
 	const decorationOptionsGutterError: DecorationOptions[] = [];
 	const decorationOptionsGutterWarning: DecorationOptions[] = [];
 	const decorationOptionsGutterInfo: DecorationOptions[] = [];
+	const decorationOptionsGutterHint: DecorationOptions[] = [];
 
 	for (const key in groupedDiagnostics) {
 		const groupedDiagnostic = groupedDiagnostics[key].sort((a, b) => a.severity - b.severity);
@@ -113,12 +123,21 @@ export function doUpdateGutterDecorations(editor: TextEditor, groupedDiagnostics
 				decorationOptionsGutterInfo.push(diagnosticDecorationOptions);
 				break;
 			}
-			default: {}// gutter only shows error(0) warning(1) info(2) icons
+			case 3: {
+				if ($config.gutterIconSet === 'circle' ||
+					$config.gutterIconSet === 'square') {
+					decorationOptionsGutterHint.push(diagnosticDecorationOptions);
+				}
+				break;
+			}
+			default: {}
 		}
 	}
+
 	editor.setDecorations(decorationTypes.decorationTypeGutterError, decorationOptionsGutterError);
 	editor.setDecorations(decorationTypes.decorationTypeGutterWarning, decorationOptionsGutterWarning);
 	editor.setDecorations(decorationTypes.decorationTypeGutterInfo, decorationOptionsGutterInfo);
+	editor.setDecorations(decorationTypes.decorationTypeGutterHint, decorationOptionsGutterHint);
 }
 /**
  * Create circle gutter icons with different colors. `%23` is encoded `#` sign (need it to work).

src/types.ts

@@ -212,29 +212,35 @@ interface ExtensionConfigType {
 	 */
 	infoGutterIconPath: string;
 	/**
-	 * Error color of `circle` gutter icon set.
+	 * Error color of `circle` & `square` gutter icons.
 	 */
 	errorGutterIconColor: string;
 	/**
-	 * Warning color of `circle` gutter icon set.
+	 * Warning color of `circle` & `square` gutter icons.
 	 */
 	warningGutterIconColor: string;
 	/**
-	 * Info color of `circle` gutter icon set.
+	 * Info color of `circle` & `square` gutter icons.
 	 */
 	infoGutterIconColor: string;
+	/**
+	 * Info color of `circle` & `square` gutter icons.
+	 */
+	hintGutterIconColor: string;
 
 	/**
-	 * Overwrite gutter items for light theme
+	 * Overwrite gutter settings for light theme
 	 */
 	light: {
 		errorGutterIconPath: string;
 		warningGutterIconPath: string;
 		infoGutterIconPath: string;
+		hintGutterIconPath: string;
 
 		errorGutterIconColor: string;
 		warningGutterIconColor: string;
 		infoGutterIconColor: string;
+		hintGutterIconColor: string;
 	};
 
 	/**