Add option to use SVG gutter icons

[akoreman]

Adds an option (useSvgGutterIcons) to use SVG gutter icons (only annotation icons for now). By default useSvgGutterIcons is false, after setting useSvgGutterIcons = true the gutter annotations will be drawn using a CSS mask on top of a background color. This allows to set the stroke color of the SVG icons in themes.

When useSvgGutterIcons = false we return to the current behavior:

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Patch coverage: 96.96% and no project coverage change.

Comparison is base (49ba187) 86.63% compared to head (d4fa7a9) 86.64%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #5107   +/-   ##
=======================================
  Coverage   86.63%   86.64%           
=======================================
  Files         555      555           
  Lines       43121    43149   +28     
  Branches     6711     6714    +3     
=======================================
+ Hits        37358    37385   +27     
- Misses       5763     5764    +1     

Flag	Coverage Δ
unittests	86.64% <96.96%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/css/editor.css.js	100.00% <ø> (ø)
src/editor.js	79.63% <ø> (ø)
src/layer/gutter.js	88.77% <93.33%> (+0.12%)	⬆️
src/mouse/default_gutter_handler.js	63.71% <100.00%> (+0.32%)	⬆️
src/mouse/default_gutter_handler_test.js	98.98% <100.00%> (+0.15%)	⬆️
src/mouse/mouse_handler_test.js	99.51% <100.00%> (ø)
src/virtual_renderer.js	77.47% <100.00%> (+0.04%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[nightwing]

On windows, for monitors without high resolution the image does not have proper antialiasing, and looks rather jagged
Maybe we should try to use font, or use css filter to change svg color (though i am not sure about the performance of the later case)

[akoreman]

@nightwing Could you share what resolution and browser you're using (I'm looking at Chrome on Windows 11 at a resolution of 800x600px and I don't see jagged edges).

Using CSS filters can make it hard to set the color to a particular RGB/HEX value, you'd have to lookup the correct Hue value afaik. I don't think switching to using CSS filters would affect how the UA applies AA here though?

[nightwing]

I am seeing the above on chrome windows 10 1680x1050 display

[akoreman]

Made some tweaks to the SVGs which could help here.