feat: editor lineheight adjust in theme settings and performance improvements for editor scroll/render

[abose]

Screenshots (if applicable)

1. Custom Line Height Slider in Theme Settings

Screencast.from.23-11-24.04.37.50.PM.IST.webm

2. Improved Indent Guides

Summary

1. Support for custom line heights in theme settings, improved scrolling behavior.
2. Indent guides impl changed to improve performance in webkit/safari as custom line height resulted in faster scrolling in mac, which resulted in higher pressure on safari to render indent guides which was not preformant. existing indent guides used a background image based approach which safari took time to render and caused jerky scroll behavior. so we moved to a border-left on the ::before pseudo element based approach which is performant to render in safari.
3. This change hence brings in scaled scrolling to control the scroll rate and render performance in safari along with changin to a more performing border lines based impl across all browsers.

Key Changes

1. Editor Enhancements

   • Custom Line Height Support:
     • Introduced a slider in the theme settings for users to adjust the line height of the editor between 1 and 3, with a default value of 1.5.
     • Dynamically updates the editor's appearance using CSS variables.
   • Smooth Scrolling:
     • Adjusted the scroll behavior to scale based on the custom line height, reducing jumpy scrolling issues, especially on macOS and Safari.

2. Indent Guides Improvements

   • Refactored the CodeMirror overlay for indent guides to support dynamic space units set from editor status bar.
   • Introduced a new class (phcode-indent-guides-none) for scenarios where indent guides are disabled. This was needed as the border elem used for the indent guide takes 1px screen space, and if we remove the border on diosabling indent guide, there will be a sudden jerk as all the 1px guide lines width get subtracted from the editor. so we now use a transparent border to disable indent guides and remove the text jerk.

3. Theme Settings

   • Added a new control to adjust line height in the theme settings UI.
   • Removed redundant legacy CSS variables and migrated to modern CSS variable usage.
   • preference

// Adjust the vertical spacing between lines of code in the editor. Choose a value between 1 and 3, default is 1.5
"themes.editorLineHeight": 1.5,

5. General Updates
   • Replaced the SVG-based indent guide lines with CSS borders for improved performance and maintainability.
   • Removed unused files, such as brackets_core_ui_variables.css, to clean up the codebase.

Testing

• Manual Testing:

  • Verified that line height changes dynamically update the editor.
  • Tested scrolling behavior with different line heights on mac OS, Windows, and Linux.
  • Checked indent guides rendering with and without space unit changes.
  • in mac/Linux/windows test scroll performance with and without indent guides
  • change line height and ensure scroll behavior is consistent for 1x, 1.5, 2. 2.5 and 3x line heights.
  • switch tab size and space units in status bar and make sure that the indent guides are redrawn.
  • enable and disable indent guides and switch files in working files and project tree.
  • mac touch pad left and right scroll test pending!

• ** Tests**:

  • test: integ tests for line height theme setting #1946

---

Breaking Changes

• None.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud