From 7f6369b1aa126fec9e3bfc11f43fd8b6b54b74bc Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 22 Nov 2024 20:29:30 +0530 Subject: [PATCH 1/4] feat: editor lineheight adjust in theme settings --- src/htmlContent/themes-settings.html | 15 +++++++++ src/nls/root/strings.js | 2 ++ src/styles/brackets.less | 16 ++++++++- src/styles/brackets_core_ui_variables.css | 39 ---------------------- src/styles/brackets_core_ui_variables.less | 16 ++++++--- src/styles/brackets_theme_default.less | 2 +- src/styles/brackets_variables.less | 1 + src/view/ThemeSettings.js | 19 ++++++++++- 8 files changed, 63 insertions(+), 47 deletions(-) delete mode 100644 src/styles/brackets_core_ui_variables.css diff --git a/src/htmlContent/themes-settings.html b/src/htmlContent/themes-settings.html index 204f8acb14..997e32b51a 100644 --- a/src/htmlContent/themes-settings.html +++ b/src/htmlContent/themes-settings.html @@ -41,6 +41,21 @@

{{Strings.THEMES_SETTINGS}}

+ +
+ +
+ + {{settings.editorLineHeight}} +
+
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index ee071f557a..acd9f08444 100644 --- a/src/nls/root/strings.js +++ b/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", diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 54802016f2..5ed299121b 100644 --- a/src/styles/brackets.less +++ b/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; } -} \ No newline at end of file +} + diff --git a/src/styles/brackets_core_ui_variables.css b/src/styles/brackets_core_ui_variables.css deleted file mode 100644 index 057a6954ac..0000000000 --- a/src/styles/brackets_core_ui_variables.css +++ /dev/null @@ -1,39 +0,0 @@ -/* -// Copyright (c) 2021 - present core.ai . All rights reserved. -// Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved. -// -// Permission is hereby granted, free of charge, to any person obtaining a -// copy of this software and associated documentation files (the "Software"), -// to deal in the Software without restriction, including without limitation -// the rights to use, copy, modify, merge, publish, distribute, sublicense, -// and/or sell copies of the Software, and to permit persons to whom the -// Software is furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING -// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER -// DEALINGS IN THE SOFTWARE. - * Brackets Colors - * - * These are general purpose colors that can be used in defining - * themes or UI elements. you can override these by overriding the :root{} element - * with your own variable definitions in the theme css. - * All brackets color variable names (that refer to an actual color) - * are prefixed with "bc-" for "brackets". This is to avoid confusion - * with system and css color names. (We define our own colors because system - * colors are ugly.) - */ - -: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; -} diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less index 79f53b4d57..c4e3a07e6e 100644 --- a/src/styles/brackets_core_ui_variables.less +++ b/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; diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less index 7979bbfea7..0caf282a24 100644 --- a/src/styles/brackets_theme_default.less +++ b/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; diff --git a/src/styles/brackets_variables.less b/src/styles/brackets_variables.less index 3bb10a0822..663c67166c 100644 --- a/src/styles/brackets_variables.less +++ b/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 */ diff --git a/src/view/ThemeSettings.js b/src/view/ThemeSettings.js index f9847661a7..80200b84f9 100644 --- a/src/view/ThemeSettings.js +++ b/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; From 07244b4e366b01ded226f01538e246b5cbca3f5f Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 23 Nov 2024 10:45:48 +0530 Subject: [PATCH 2/4] chore: scaled scrolling with line height working but not smooth --- src/editor/Editor.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 61d1a4f298..8ad9f51f88 100644 --- a/src/editor/Editor.js +++ b/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/2); + event.preventDefault(); + }); } EventDispatcher.makeEventDispatcher(Editor.prototype); From 040196e348ae4fc449057de8cced3d0475b4f722 Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 23 Nov 2024 16:35:26 +0530 Subject: [PATCH 3/4] chore: performance improveement for scrolling and indent guides --- src/editor/Editor.js | 2 +- src/extensionsIntegrated/indentGuides/main.js | 123 +++++++++++------- src/styles/brackets_codemirror_override.less | 15 ++- src/styles/images/indent-guide-line.svg | 3 - 4 files changed, 86 insertions(+), 57 deletions(-) delete mode 100644 src/styles/images/indent-guide-line.svg diff --git a/src/editor/Editor.js b/src/editor/Editor.js index 8ad9f51f88..64594a8317 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -445,7 +445,7 @@ define(function (require, exports, module) { const lineHeight = parseFloat(getComputedStyle($editor[0]).lineHeight); const scrollDelta = event.deltaY; const defaultHeight = 14, scrollScaleFactor = lineHeight/defaultHeight; - $editor[0].scrollTop += (scrollDelta/scrollScaleFactor/2); + $editor[0].scrollTop += (scrollDelta/scrollScaleFactor); event.preventDefault(); }); } diff --git a/src/extensionsIntegrated/indentGuides/main.js b/src/extensionsIntegrated/indentGuides/main.js index fc090b2b3a..8f1d5d7bb7 100644 --- a/src/extensionsIntegrated/indentGuides/main.js +++ b/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,40 +55,42 @@ 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); @@ -95,28 +98,46 @@ define(function (require, exports, module) { } 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 diff --git a/src/styles/brackets_codemirror_override.less b/src/styles/brackets_codemirror_override.less index e2628fa4c1..89e2dfff9f 100644 --- a/src/styles/brackets_codemirror_override.less +++ b/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; } \ No newline at end of file diff --git a/src/styles/images/indent-guide-line.svg b/src/styles/images/indent-guide-line.svg deleted file mode 100644 index 071da0cd19..0000000000 --- a/src/styles/images/indent-guide-line.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file From b6e09f6d286d41b63c14f24bef585502442cb68c Mon Sep 17 00:00:00 2001 From: abose Date: Sat, 23 Nov 2024 17:47:40 +0530 Subject: [PATCH 4/4] fix: old integ test wrong as the indent framework didnt listen to ato tab space changes --- test/spec/Generic-integ-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/spec/Generic-integ-test.js b/test/spec/Generic-integ-test.js index 225396043c..86b598a462 100644 --- a/test/spec/Generic-integ-test.js +++ b/test/spec/Generic-integ-test.js @@ -119,7 +119,7 @@ define(function (require, exports, module) { }); it("should show and toggle indent guides with 12 space file", async function () { - await verify("space-12.js", 3); + await verify("space-12.js", 2); }); it("should show and toggle indent guides with no space file", async function () {