From 141bcdb0a1fb1811687d9b4199291d54c27cc092 Mon Sep 17 00:00:00 2001 From: Zakhar Kozlov Date: Sat, 13 Jul 2024 16:03:20 +0000 Subject: [PATCH 1/2] move default gutter png icons rendering to .ace_icon --- src/css/editor-css.js | 8 ++++---- src/mouse/default_gutter_handler_test.js | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/css/editor-css.js b/src/css/editor-css.js index 04245a30131..77f8df524fe 100644 --- a/src/css/editor-css.js +++ b/src/css/editor-css.js @@ -130,24 +130,24 @@ module.exports = ` float: left; } -.ace_gutter-cell.ace_error, .ace_icon.ace_error, .ace_icon.ace_error_fold { +.ace_gutter-cell.ace_error .ace_icon, .ace_icon.ace_error, .ace_icon.ace_error_fold { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-position: 2px center; } -.ace_gutter-cell.ace_warning, .ace_icon.ace_warning, .ace_icon.ace_warning_fold { +.ace_gutter-cell.ace_warning .ace_icon, .ace_icon.ace_warning, .ace_icon.ace_warning_fold { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAmVBMVEX///8AAAD///8AAAAAAABPSzb/5sAAAAB/blH/73z/ulkAAAAAAAD85pkAAAAAAAACAgP/vGz/rkDerGbGrV7/pkQICAf////e0IsAAAD/oED/qTvhrnUAAAD/yHD/njcAAADuv2r/nz//oTj/p064oGf/zHAAAAA9Nir/tFIAAAD/tlTiuWf/tkIAAACynXEAAAAAAAAtIRW7zBpBAAAAM3RSTlMAABR1m7RXO8Ln31Z36zT+neXe5OzooRDfn+TZ4p3h2hTf4t3k3ucyrN1K5+Xaks52Sfs9CXgrAAAAjklEQVR42o3PbQ+CIBQFYEwboPhSYgoYunIqqLn6/z8uYdH8Vmdnu9vz4WwXgN/xTPRD2+sgOcZjsge/whXZgUaYYvT8QnuJaUrjrHUQreGczuEafQCO/SJTufTbroWsPgsllVhq3wJEk2jUSzX3CUEDJC84707djRc5MTAQxoLgupWRwW6UB5fS++NV8AbOZgnsC7BpEAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-position: 2px center; } -.ace_gutter-cell.ace_info, .ace_icon.ace_info { +.ace_gutter-cell.ace_info .ace_icon, .ace_icon.ace_info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII="); background-repeat: no-repeat; background-position: 2px center; } -.ace_dark .ace_gutter-cell.ace_info, .ace_dark .ace_icon.ace_info { +.ace_dark .ace_gutter-cell.ace_info .ace_icon, .ace_dark .ace_icon.ace_info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC"); } diff --git a/src/mouse/default_gutter_handler_test.js b/src/mouse/default_gutter_handler_test.js index 9b1a04828bb..d7cbc54f966 100644 --- a/src/mouse/default_gutter_handler_test.js +++ b/src/mouse/default_gutter_handler_test.js @@ -106,6 +106,25 @@ module.exports = { assert.ok(/info test/.test(tooltip.textContent)); }, 100); }, + "test: gutter png icons" : function() { + var editor = this.editor; + var value = ""; + + editor.session.setMode(new Mode()); + editor.setOption("useSvgGutterIcons", false); + editor.setValue(value, -1); + editor.session.setAnnotations([{row: 0, column: 0, type: "error", text: "error test"}]); + editor.renderer.$loop._flush(); + + var lines = editor.renderer.$gutterLayer.$lines; + var line = lines.cells[0].element; + assert.ok(/ace_gutter-cell/.test(line.className)); + assert.notOk(/ace_gutter-cell_svg-icons/.test(line.className)); + + var annotation = line.children[2].firstChild; + assert.ok(/ace_icon/.test(annotation.className)); + assert.notOk(/ace_icon_svg/.test(annotation.className)); + }, "test: gutter svg icons" : function() { var editor = this.editor; var value = ""; From 588fe48bd1ba25d3453294bc48ffe689a9495b06 Mon Sep 17 00:00:00 2001 From: Zakhar Kozlov Date: Sun, 14 Jul 2024 13:32:44 +0200 Subject: [PATCH 2/2] calculate icon position in the currently used container --- src/css/editor-css.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/css/editor-css.js b/src/css/editor-css.js index 77f8df524fe..4cd408918d4 100644 --- a/src/css/editor-css.js +++ b/src/css/editor-css.js @@ -93,6 +93,11 @@ module.exports = ` contain: style size layout; } +.ace_gutter { + --line-height-value: 1.2; + --icon-height: 16px; +} + .ace_gutter-active-line { position: absolute; left: 0; @@ -118,6 +123,7 @@ module.exports = ` padding-left: 19px; padding-right: 6px; background-repeat: no-repeat; + line-height: var(--line-height-value, 1.2); } .ace_gutter-cell_svg-icons .ace_gutter_annotation { @@ -130,24 +136,27 @@ module.exports = ` float: left; } -.ace_gutter-cell.ace_error .ace_icon, .ace_icon.ace_error, .ace_icon.ace_error_fold { +.ace_gutter-cell.ace_error, .ace_icon.ace_error, .ace_icon.ace_error_fold { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg=="); background-repeat: no-repeat; - background-position: 2px center; + background-position: 2px calc((1em * var(--line-height-value, 1.2) / 2 - var(--icon-height, 16px) / 2)); + background-size: var(--icon-height, 16px); } -.ace_gutter-cell.ace_warning .ace_icon, .ace_icon.ace_warning, .ace_icon.ace_warning_fold { +.ace_gutter-cell.ace_warning, .ace_icon.ace_warning, .ace_icon.ace_warning_fold { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAmVBMVEX///8AAAD///8AAAAAAABPSzb/5sAAAAB/blH/73z/ulkAAAAAAAD85pkAAAAAAAACAgP/vGz/rkDerGbGrV7/pkQICAf////e0IsAAAD/oED/qTvhrnUAAAD/yHD/njcAAADuv2r/nz//oTj/p064oGf/zHAAAAA9Nir/tFIAAAD/tlTiuWf/tkIAAACynXEAAAAAAAAtIRW7zBpBAAAAM3RSTlMAABR1m7RXO8Ln31Z36zT+neXe5OzooRDfn+TZ4p3h2hTf4t3k3ucyrN1K5+Xaks52Sfs9CXgrAAAAjklEQVR42o3PbQ+CIBQFYEwboPhSYgoYunIqqLn6/z8uYdH8Vmdnu9vz4WwXgN/xTPRD2+sgOcZjsge/whXZgUaYYvT8QnuJaUrjrHUQreGczuEafQCO/SJTufTbroWsPgsllVhq3wJEk2jUSzX3CUEDJC84707djRc5MTAQxoLgupWRwW6UB5fS++NV8AbOZgnsC7BpEAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; - background-position: 2px center; + background-position: 2px calc((1em * var(--line-height-value, 1.2) / 2 - var(--icon-height, 16px) / 2)); + background-size: var(--icon-height, 16px); } -.ace_gutter-cell.ace_info .ace_icon, .ace_icon.ace_info { +.ace_gutter-cell.ace_info, .ace_icon.ace_info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII="); background-repeat: no-repeat; - background-position: 2px center; + background-position: 2px calc((1em * var(--line-height-value, 1.2) / 2 - var(--icon-height, 16px) / 2)); + background-size: var(--icon-height, 16px); } -.ace_dark .ace_gutter-cell.ace_info .ace_icon, .ace_dark .ace_icon.ace_info { +.ace_dark .ace_gutter-cell.ace_info, .ace_dark .ace_icon.ace_info { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC"); }