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

src/editor/Editor.js

@@ -435,6 +435,19 @@ define(function (require, exports, module) {
                 return $(this.getRootElement());
             }
         });
+
+        const $cmElement = this.$el;
+        $cmElement[0].addEventListener("wheel", (event) => {
+            const $editor = $cmElement.find(".CodeMirror-scroll");
+            // we need to slow down the scroll by the factor of line height. else the scrolling is too fast.
+            // this became a problem after we added the custom line height feature causing jumping scrolls esp in safari
+            // and mac if we dont do this scroll scaling.
+            const lineHeight = parseFloat(getComputedStyle($editor[0]).lineHeight);
+            const scrollDelta = event.deltaY;
+            const defaultHeight = 14, scrollScaleFactor = lineHeight/defaultHeight;
+            $editor[0].scrollTop += (scrollDelta/scrollScaleFactor);
+            event.preventDefault();
+        });
     }
 
     EventDispatcher.makeEventDispatcher(Editor.prototype);

src/extensionsIntegrated/indentGuides/main.js

@@ -36,7 +36,8 @@ define(function (require, exports, module) {
 
     const COMMAND_NAME    = Strings.CMD_TOGGLE_INDENT_GUIDES,
         COMMAND_ID      = Commands.TOGGLE_INDENT_GUIDES,
-        GUIDE_CLASS     = "phcode-indent-guides";
+        GUIDE_CLASS     = "phcode-indent-guides",
+        GUIDE_CLASS_NONE     = "phcode-indent-guides-none";
 
     const PREFERENCES_EDITOR_INDENT_GUIDES = "editor.indentGuides",
         PREFERENCES_EDITOR_INDENT_HIDE_FIRST = "editor.indentHideFirst";
@@ -54,69 +55,89 @@ define(function (require, exports, module) {
     });
 
     // CodeMirror overlay code
-    const indentGuidesOverlay = {
-        token: function (stream, _state) {
-            let char        = "",
-                colNum      = 0,
-                spaceUnits  = 0,
-                isTabStart  = false;
-
-            char    = stream.next();
-            colNum  = stream.column();
-
-            // Check for "hide first guide" preference
-            if ((hideFirst) && (colNum === 0)) {
-                return null;
-            }
+    function _createOverlayObject(spaceUnits) {
+        return {
+            _spaceUnits: spaceUnits,
+            _cmRefreshPending: false,
+            token: function (stream, _state) {
+                let char        = "",
+                    colNum      = 0,
+                    isTabStart  = false;
+
+                char    = stream.next();
+                colNum  = stream.column();
+
+                // Check for "hide first guide" preference
+                if ((hideFirst) && (colNum === 0)) {
+                    return null;
+                }
 
-            if (char === "\t") {
-                return GUIDE_CLASS;
-            }
+                if (char === "\t") {
+                    return enabled? GUIDE_CLASS : GUIDE_CLASS_NONE;
+                }
 
-            if (char !== " ") {
-                stream.skipToEnd();
-                return null;
-            }
+                if (char !== " ") {
+                    stream.skipToEnd();
+                    return null;
+                }
 
-            spaceUnits = Editor.getSpaceUnits();
-            isTabStart = (colNum % spaceUnits) ? false : true;
+                isTabStart = (colNum % this._spaceUnits) === 0 ? true : false;
 
-            if ((char === " ") && (isTabStart)) {
-                return GUIDE_CLASS;
-            }
-            return null;
-        },
-        flattenSpans: false
-    };
+                if ((char === " ") && (isTabStart)) {
+                    return enabled? GUIDE_CLASS : GUIDE_CLASS_NONE;
+                }
+                return null;
+            },
+            flattenSpans: false
+        };
+    }
 
     function applyPreferences() {
         enabled     = PreferencesManager.get(PREFERENCES_EDITOR_INDENT_GUIDES);
         hideFirst   = PreferencesManager.get(PREFERENCES_EDITOR_INDENT_HIDE_FIRST);
     }
 
     function updateUI() {
-        const editor  = EditorManager.getActiveEditor(),
-            cm      = editor ? editor._codeMirror : null;
-
-        // Update CodeMirror overlay if editor is available
-        if (cm) {
-            if(editor._overlayPresent){
-                if(!enabled){
-                    cm.removeOverlay(indentGuidesOverlay);
-                    editor._overlayPresent = false;
-                    cm.refresh();
+        const editor  = EditorManager.getActiveEditor();
+        if(!editor || !editor._codeMirror) {
+            return;
+        }
+        const cm = editor._codeMirror;
+        if(!editor.__indentGuidesOverlay) {
+            editor.__indentGuidesOverlay = _createOverlayObject(Editor.getSpaceUnits(editor.document.file.fullPath));
+        }
+        function _reRenderOverlay() {
+            cm.removeOverlay(editor.__indentGuidesOverlay);
+            cm.addOverlay(editor.__indentGuidesOverlay);
+        }
+        editor.off(Editor.EVENT_OPTION_CHANGE+".indentGuide");
+        editor.on(Editor.EVENT_OPTION_CHANGE+".indentGuide", ()=>{
+            const newSpaceUnits = Editor.getSpaceUnits(editor.document.file.fullPath);
+            if(newSpaceUnits !== editor.__indentGuidesOverlay._spaceUnits){
+                editor.__indentGuidesOverlay._spaceUnits = newSpaceUnits;
+                if(EditorManager.getActiveEditor() === editor){
+                    console.log("space units changed, refreshing indent guides for",
+                        newSpaceUnits, editor.document.file.fullPath);
+                    _reRenderOverlay();
                 }
-            } else if(enabled){
-                cm.removeOverlay(indentGuidesOverlay);
-                cm.addOverlay(indentGuidesOverlay);
-                editor._overlayPresent = true;
-                cm.refresh();
             }
+        });
+
+        let shouldRerender = false;
+        if(!cm.__indentGuidesOverlayAttached){
+            cm.addOverlay(editor.__indentGuidesOverlay);
+            cm.__indentGuidesOverlayAttached = editor.__indentGuidesOverlay;
+            cm.__overlayEnabled = enabled;
+        } else if(cm.__indentGuidesOverlayAttached &&
+            cm.__indentGuidesOverlayAttached !== editor.__indentGuidesOverlay) {
+            cm.removeOverlay(cm.__indentGuidesOverlayAttached);
+            cm.addOverlay(editor.__indentGuidesOverlay);
+            cm.__overlayEnabled = enabled;
+        } else if (shouldRerender || cm.__overlayEnabled !== enabled) {
+            cm.__overlayEnabled = enabled;
+            _reRenderOverlay();
+            console.log("Refreshing indent guides");
         }
-
-        // Update menu
-        CommandManager.get(COMMAND_ID)
-            .setChecked(enabled);
     }
 
     function handleToggleGuides() {
@@ -127,6 +148,8 @@ define(function (require, exports, module) {
     function preferenceChanged() {
         applyPreferences();
         updateUI();
+        CommandManager.get(COMMAND_ID)
+            .setChecked(enabled);
     }
 
     // Initialize extension

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_codemirror_override.less

@@ -289,9 +289,18 @@ span.cm-emstrong {
     font-weight: normal;
 }
 
-.cm-phcode-indent-guides {
+.cm-phcode-indent-guides::before {
+    content: " ";
+    width: 1px;
+    display: inline-block;
     position: relative;
-    background-repeat: repeat-y;
-    background-image: url('images/indent-guide-line.svg');
+    border-left: 1px solid rgba(128, 128, 128, 0.3);
+}
+
+.cm-phcode-indent-guides-none::before {
+    content: " ";
+    width: 1px;
     display: inline-block;
+    position: relative;
+    border-left: 1px solid transparent;
 }

src/styles/brackets_core_ui_variables.less

@@ -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_theme_default.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_variables.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/view/ThemeSettings.js

@@ -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;