Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: summary of annotations in folded lines #5117

Merged
merged 28 commits into from
Apr 21, 2023
Merged

feat: summary of annotations in folded lines #5117

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
67e7fcc
fix: gutter tooltip anchoring
akoreman Apr 6, 2023
8109ed8
add semicolon
akoreman Apr 6, 2023
89841a5
Change anchor point to be on icon
akoreman Apr 6, 2023
33facc4
set tooltipFollowsMouse back to true by default
akoreman Apr 6, 2023
9acd13c
small css change
akoreman Apr 6, 2023
598ca4a
whitespace fix
akoreman Apr 6, 2023
68bb9d7
Merge branch 'ajaxorg:master' into gutter_tooltip_fix
akoreman Apr 8, 2023
3190131
Refactoring
akoreman Apr 10, 2023
e59b8d8
Merge branch 'ajaxorg:master' into gutter_tooltip_fix
akoreman Apr 12, 2023
a579507
Merge branch 'ajaxorg:master' into gutter_tooltip_fix
akoreman Apr 13, 2023
fafb66d
Merge branch 'ajaxorg:master' into gutter_tooltip_fix
akoreman Apr 14, 2023
b308c0a
add summary of annotations in folded code
akoreman Apr 14, 2023
27d6197
add SVG icons for lines with folded annotations
akoreman Apr 15, 2023
0153067
fix icon positioning
akoreman Apr 15, 2023
4e8a3c0
fix failing tests
akoreman Apr 15, 2023
4a4ca09
add test
akoreman Apr 16, 2023
78b2f81
tweak new tests
akoreman Apr 16, 2023
3a26660
add annotations in fold as optional
akoreman Apr 16, 2023
448fd2c
add tooltip check to tests
akoreman Apr 18, 2023
095bf2b
refactor and cleanup
akoreman Apr 18, 2023
9dcf632
refactoring
akoreman Apr 19, 2023
6083beb
Change name kitchen-sink option
akoreman Apr 19, 2023
a4a2652
make svg viewbox size consistent
akoreman Apr 20, 2023
15bd2d0
test tweak
akoreman Apr 20, 2023
39fb5f4
Merge branch 'ajaxorg:master' into gutter_tooltip_fix
akoreman Apr 20, 2023
0c0727b
change array copy to use Array.from
akoreman Apr 20, 2023
99f9d36
test fix
akoreman Apr 20, 2023
3b180cb
tweak
akoreman Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions src/css/editor.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ module.exports = `
pointer-events: none;
}

.ace_gutter-cell, .ace_gutter-cell_svg-icons {
.ace_gutter-cell, .ace_gutter-cell_svg-icons {
position: absolute;
top: 0;
left: 0;
Expand All @@ -115,29 +115,34 @@ module.exports = `
background-repeat: no-repeat;
}

.ace_gutter-cell_svg-icons .ace_icon_svg{
.ace_gutter-cell_svg-icons .ace_icon_svg {
margin-left: -14px;
float: left;
}

.ace_gutter-cell.ace_error, .ace_icon.ace_error {
.ace_gutter-cell .ace_icon {
margin-left: -18px;
float: left;
}

.ace_gutter-cell.ace_error, .ace_gutter-tooltip .ace_icon.ace_error {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change will break cloud9, because there we use custom gutter cell backgrounds for errors and breakpoints. With this both will be visible.

If the goal is simply to have a node for getting client rect, maybe we can use client rect from element and offset by editor.renderer.$gutterLayer.$padding.left?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's try to not break c9 🙂 could you explain how this change could affect c9?

I assume they use selectors like .ace_gutter-cell.ace_error for their custom backgrounds and nothing changes for these selectors. The only change here is that the background set for .ace_icon.ace_error is now scoped to .ace_gutter-tooltip (to avoid the background image showing up twice).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, i thought this changes ace to set background on ace_icon instead of ace_gutter-cell, which would break the css override in cloud9.

I still think using the value from padding instead of adding a completely empty element would be better, but this may be ok too.

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_gutter-cell.ace_warning, .ace_gutter-tooltip .ace_icon.ace_warning {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this change needed? We may want to use the icon in other places too, e.g. in documentation tooltip.

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_gutter-tooltip .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_gutter-tooltip .ace_dark .ace_icon.ace_info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC");
}

Expand Down Expand Up @@ -450,9 +455,10 @@ module.exports = `
padding-top: 5px;
}

.ace_gutter-tooltip .ace_icon {
.ace_icon {
display: inline-block;
width: 18px;
vertical-align: top;
}

.ace_icon_svg {
Expand Down
20 changes: 11 additions & 9 deletions src/layer/gutter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,21 +291,23 @@ class Gutter{
var lineHeight = config.lineHeight + "px";

var className;
var iconClassName;
if (this.$useSvgGutterIcons){
className = "ace_gutter-cell_svg-icons ";
iconClassName = "ace_icon_svg";
}
else {
className = "ace_gutter-cell ";
iconClassName = "ace_icon";
}

if (this.$annotations[row]){
annotationNode.className = "ace_icon_svg" + this.$annotations[row].className;
if (this.$annotations[row]){
annotationNode.className = iconClassName + this.$annotations[row].className;

dom.setStyle(annotationNode.style, "height", lineHeight);
dom.setStyle(annotationNode.style, "display", "block");
}
else {
dom.setStyle(annotationNode.style, "display", "none");
}
dom.setStyle(annotationNode.style, "height", lineHeight);
dom.setStyle(annotationNode.style, "display", "block");
}
else {
className = "ace_gutter-cell ";
dom.setStyle(annotationNode.style, "display", "none");
}

Expand Down
2 changes: 1 addition & 1 deletion src/mouse/default_gutter_handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function GutterHandler(mouseHandler) {
if (mouseHandler.$tooltipFollowsMouse) {
moveTooltip(mouseEvent);
} else {
var gutterElement = mouseEvent.domEvent.target;
var gutterElement = gutter.$lines.cells[row].element.children[1];
InspiredGuy marked this conversation as resolved.
Show resolved Hide resolved
var rect = gutterElement.getBoundingClientRect();
var style = tooltip.getElement().style;
style.left = rect.right + "px";
Expand Down