feat: editor lineheight adjust in theme settings

Author: abose

src/htmlContent/themes-settings.html

@@ -41,6 +41,21 @@ <h1 class="dialog-title">{{Strings.THEMES_SETTINGS}}</h1>
                     <input type="text" data-target="fontFamily" value="{{settings.fontFamily}}">
                 </div>
             </div>
+
+            <div class="control-group">
+                <label class="control-label">{{Strings.FONT_LINE_HEIGHT}}:</label>
+                <div class="controls line-height-slider">
+                    <input
+                            type="range"
+                            min="1"
+                            max="3"
+                            step="0.1"
+                            value="{{settings.editorLineHeight}}"
+                            class="form-range fontLineHeightSlider"
+                            data-target="editorLineHeight">
+                    <span class="fontLineHeightValue">{{settings.editorLineHeight}}</span>
+                </div>
+            </div>
         </form>
     </div>
     <div class="modal-footer">

src/nls/root/strings.js

@@ -688,6 +688,7 @@ define({
     "USE_THEME_SCROLLBARS": "Use Theme Scrollbars",
     "FONT_SIZE": "Font Size",
     "FONT_FAMILY": "Font Family",
+    "FONT_LINE_HEIGHT": "Line Height",
     "THEMES_SETTINGS": "Themes Settings",
     "THEMES_ERROR": "Themes Error",
     "THEMES_ERROR_CANNOT_APPLY": "Could not apply theme due to an error.",
@@ -1054,6 +1055,7 @@ define({
     "DESCRIPTION_NUMBER_QUICK_VIEW": "true to show Quick View on hover over numbers in editor",
     "DESCRIPTION_THEME": "Select a {APP_NAME} theme",
     "DESCRIPTION_USE_THEME_SCROLLBARS": "true to allow custom scroll bars",
+    "DESCRIPTION_EDITOR_LINE_HEIGHT": "Adjust the vertical spacing between lines of code in the editor. Choose a value between 1 and 3, default is 1.5",
     "DESCRIPTION_LINTING_COLLAPSED": "true to collapse linting panel",
     "DESCRIPTION_FONT_FAMILY": "Change font family",
     "DESCRIPTION_DESKTOP_ZOOM_SCALE": "Choose a zoom scale factor ranging from 0.1 (for a more compact view) to 2 (for a larger, more magnified view). Available in desktop apps only",

src/styles/brackets.less

@@ -3130,6 +3130,19 @@ label input {
     display: none;
 }
 
+.theme-settings {
+    .line-height-slider {
+        padding-top: 5px;
+    }
+    .fontLineHeightSlider {
+        width: 220px;
+    }
+    .fontLineHeightValue {
+        margin-left: 3px;
+        padding-top: 5px;
+    }
+}
+
 .theme-settings td {
     padding: 2px;
 }
@@ -3507,4 +3520,5 @@ label input {
     .toggle input:checked ~ .labels::before {
         opacity: 1;
     }
-}
+}
+

src/styles/brackets_core_ui_variables.css

@@ -41,11 +41,17 @@
  */
 
 
-@import (less) "./brackets_core_ui_variables.css";
-
-// DEPRECATION WARNING: This file is here for legacy reasons and will be removed as we migrate entirely to css variables
-// this is necessary for extension them-ability.
-// Please use brackets_core_ui_variables.css for defining new style variables
+:root {
+  --bc-toast-danger-bg-color: #FF5C33;
+  --bc-toast-error-bg-color: #f74687;
+  --bc-toast-success-bg-color: #82b839;
+  --bc-toast-warning-bg-color: #FFAA00;
+  --bc-toast-info-bg-color: #60A3D9;
+}
+
+// WARNING: Use the above css variables section!!! This file uses less variables for legacy reasons
+// and we will migrate to css variables above. This is necessary for extension them-ability.
+// Please use css variables above for defining new style variables
 
 // General
 @bc-bg-highlight:               #e0f0fa;

src/styles/brackets_core_ui_variables.less

@@ -131,7 +131,7 @@
  */
 .code-font() {
     color: @foreground;
-    line-height: 1.25;
+    line-height: var(--editor-line-height);
 
     .dark & {
         color: @dark-bc-text;

src/styles/brackets_theme_default.less

@@ -23,6 +23,7 @@
 /* Brackets Variables */
 :root {
  --z-index-parameter-hints: 19;
+ --editor-line-height: 1.5;
 }
 
 /* All paddings, gutters, etc. should be multiples of this */

src/styles/brackets_variables.less

@@ -50,7 +50,8 @@ define(function (require, exports, module) {
         themeScrollbars: true,
         theme: SYSTEM_DEFAULT_THEME,
         lightTheme: "light-theme",
-        darkTheme: "dark-theme"
+        darkTheme: "dark-theme",
+        editorLineHeight: 1.5
     };
 
 
@@ -133,6 +134,12 @@ define(function (require, exports, module) {
                 var targetValue = $(this).val();
                 newSettings["fontFamily"] = targetValue;
             })
+            .on("input", ".fontLineHeightSlider", function () {
+                const targetValue = $(this).val();
+                $template.find(".fontLineHeightValue").text(targetValue);
+                newSettings["editorLineHeight"] = targetValue;
+                prefs.set("editorLineHeight", targetValue + "");
+            })
             .on("change", "select", function () {
                 var $target = $(":selected", this);
                 var attr = $target.attr("data-target");
@@ -163,6 +170,7 @@ define(function (require, exports, module) {
             } else if (id === "cancel") {
                 // Make sure we revert any changes to theme selection
                 prefs.set("theme", currentSettings.theme);
+                prefs.set("editorLineHeight", currentSettings.editorLineHeight);
             }
         });
         $template
@@ -197,6 +205,15 @@ define(function (require, exports, module) {
     prefs.definePreference("themeScrollbars", "boolean", DEFAULTS.themeScrollbars, {
         description: Strings.DESCRIPTION_USE_THEME_SCROLLBARS
     });
+    prefs.definePreference("editorLineHeight", "number", DEFAULTS.editorLineHeight, {
+        description: Strings.DESCRIPTION_EDITOR_LINE_HEIGHT
+    });
+
+    prefs.on("change", "editorLineHeight", function () {
+        const lineHeight = prefs.get("editorLineHeight") + "";
+        const $phoenixMain = $('#Phoenix-Main');
+        $phoenixMain[0].style.setProperty('--editor-line-height', lineHeight);
+    });
 
     exports.DEFAULTS   = DEFAULTS;
     exports._setThemes = setThemes;