diff --git a/ace.d.ts b/ace.d.ts index b7d483857c7..5619e8d9c73 100644 --- a/ace.d.ts +++ b/ace.d.ts @@ -195,6 +195,7 @@ export namespace Ace { hasCssTransforms: boolean; maxPixelHeight: number; useSvgGutterIcons: boolean; + showFoldedAnnotations: boolean; } export interface MouseHandlerOptions { diff --git a/src/css/editor.css.js b/src/css/editor.css.js index 372c83ba806..d44ff16e049 100644 --- a/src/css/editor.css.js +++ b/src/css/editor.css.js @@ -110,7 +110,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; @@ -120,18 +120,23 @@ 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_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_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; @@ -147,18 +152,27 @@ module.exports = ` } .ace_icon_svg.ace_error { - -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJyZWQiIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIj4KPGNpcmNsZSBmaWxsPSJub25lIiBjeD0iOCIgY3k9IjgiIHI9IjciIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPGxpbmUgeDE9IjExIiB5MT0iNSIgeDI9IjUiIHkyPSIxMSIvPgo8bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjUiIHkyPSI1Ii8+CjwvZz4KPC9zdmc+"); + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJyZWQiIHNoYXBlLXJlbmRlcmluZz0iZ2VvbWV0cmljUHJlY2lzaW9uIj4KPGNpcmNsZSBmaWxsPSJub25lIiBjeD0iOCIgY3k9IjgiIHI9IjciIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPGxpbmUgeDE9IjExIiB5MT0iNSIgeDI9IjUiIHkyPSIxMSIvPgo8bGluZSB4MT0iMTEiIHkxPSIxMSIgeDI9IjUiIHkyPSI1Ii8+CjwvZz4KPC9zdmc+"); background-color: crimson; } .ace_icon_svg.ace_warning { - -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJkYXJrb3JhbmdlIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+Cjxwb2x5Z29uIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHBvaW50cz0iOCAxIDE1IDE1IDEgMTUgOCAxIi8+CjxyZWN0IHg9IjgiIHk9IjEyIiB3aWR0aD0iMC4wMSIgaGVpZ2h0PSIwLjAxIi8+CjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjgiIHkyPSIxMCIvPgo8L2c+Cjwvc3ZnPg=="); + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJkYXJrb3JhbmdlIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+Cjxwb2x5Z29uIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiIHBvaW50cz0iOCAxIDE1IDE1IDEgMTUgOCAxIi8+CjxyZWN0IHg9IjgiIHk9IjEyIiB3aWR0aD0iMC4wMSIgaGVpZ2h0PSIwLjAxIi8+CjxsaW5lIHgxPSI4IiB5MT0iNiIgeDI9IjgiIHkyPSIxMCIvPgo8L2c+Cjwvc3ZnPg=="); background-color: darkorange; } .ace_icon_svg.ace_info { - -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJibHVlIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+CjxjaXJjbGUgZmlsbD0ibm9uZSIgY3g9IjgiIGN5PSI4IiByPSI3IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjxwb2x5bGluZSBwb2ludHM9IjggMTEgOCA4Ii8+Cjxwb2x5bGluZSBwb2ludHM9IjkgOCA2IDgiLz4KPGxpbmUgeDE9IjEwIiB5MT0iMTEiIHgyPSI2IiB5Mj0iMTEiLz4KPHJlY3QgeD0iOCIgeT0iNSIgd2lkdGg9IjAuMDEiIGhlaWdodD0iMC4wMSIvPgo8L2c+Cjwvc3ZnPg=="); + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAxNiI+CjxnIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSJibHVlIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiI+CjxjaXJjbGUgZmlsbD0ibm9uZSIgY3g9IjgiIGN5PSI4IiByPSI3IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjxwb2x5bGluZSBwb2ludHM9IjggMTEgOCA4Ii8+Cjxwb2x5bGluZSBwb2ludHM9IjkgOCA2IDgiLz4KPGxpbmUgeDE9IjEwIiB5MT0iMTEiIHgyPSI2IiB5Mj0iMTEiLz4KPHJlY3QgeD0iOCIgeT0iNSIgd2lkdGg9IjAuMDEiIGhlaWdodD0iMC4wMSIvPgo8L2c+Cjwvc3ZnPg=="); background-color: royalblue; } +.ace_icon_svg.ace_error_fold { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0ibSAxOC45Mjk4NTEsNy44Mjk4MDc2IGMgMC4xNDYzNTMsNi4zMzc0NjA0IC02LjMyMzE0Nyw3Ljc3Nzg0NDQgLTcuNDc3OTEyLDcuNzc3ODQ0NCAtMi4xMDcyNzI2LC0wLjEyODc1IDUuMTE3Njc4LDAuMzU2MjQ5IDUuMDUxNjk4LC03Ljg3MDA2MTggLTAuNjA0NjcyLC04LjAwMzk3MzQ5IC03LjA3NzI3MDYsLTcuNTYzMTE4OSAtNC44NTczLC03LjQzMDM5NTU2IDEuNjA2LC0wLjExNTE0MjI1IDYuODk3NDg1LDEuMjYyNTQ1OTYgNy4yODM1MTQsNy41MjI2MTI5NiB6IiBmaWxsPSJjcmltc29uIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0ibSA4LjExNDc1NjIsMi4wNTI5ODI4IGMgMy4zNDkxNjk4LDAgNi4wNjQxMzI4LDIuNjc2ODYyNyA2LjA2NDEzMjgsNS45Nzg5NTMgMCwzLjMwMjExMjIgLTIuNzE0OTYzLDUuOTc4OTIwMiAtNi4wNjQxMzI4LDUuOTc4OTIwMiAtMy4zNDkxNDczLDAgLTYuMDY0MTc3MiwtMi42NzY4MDggLTYuMDY0MTc3MiwtNS45Nzg5MjAyIDAuMDA1MzksLTMuMjk5ODg2MSAyLjcxNzI2NTYsLTUuOTczNjQwOCA2LjA2NDE3NzIsLTUuOTc4OTUzIHogbSAwLC0xLjczNTgyNzE5IGMgLTQuMzIxNDgzNiwwIC03LjgyNDc0MDM4LDMuNDU0MDE4NDkgLTcuODI0NzQwMzgsNy43MTQ3ODAxOSAwLDQuMjYwNzI4MiAzLjUwMzI1Njc4LDcuNzE0NzQ1MiA3LjgyNDc0MDM4LDcuNzE0NzQ1MiA0LjMyMTQ0OTgsMCA3LjgyNDY5OTgsLTMuNDU0MDE3IDcuODI0Njk5OCwtNy43MTQ3NDUyIDAsLTIuMDQ2MDkxNCAtMC44MjQzOTIsLTQuMDA4MzY3MiAtMi4yOTE3NTYsLTUuNDU1MTc0NiBDIDEyLjE4MDIyNSwxLjEyOTk2NDggMTAuMTkwMDEzLDAuMzE3MTU1NjEgOC4xMTQ3NTYyLDAuMzE3MTU1NjEgWiBNIDYuOTM3NDU2Myw4LjI0MDU5ODUgNC42NzE4Njg1LDEwLjQ4NTg1MiA2LjAwODY4MTQsMTEuODc2NzI4IDguMzE3MDAzNSw5LjYwMDc5MTEgMTAuNjI1MzM3LDExLjg3NjcyOCAxMS45NjIxMzgsMTAuNDg1ODUyIDkuNjk2NTUwOCw4LjI0MDU5ODUgMTEuOTYyMTM4LDYuMDA2ODA2NiAxMC41NzMyNDYsNC42Mzc0MzM1IDguMzE3MDAzNSw2Ljg3MzQyOTcgNi4wNjA3NjA3LDQuNjM3NDMzNSA0LjY3MTg2ODUsNi4wMDY4MDY2IFoiIGZpbGw9ImNyaW1zb24iIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4="); + background-color: crimson; +} +.ace_icon_svg.ace_warning_fold { + -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyMCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC43NzY5IDE0LjczMzdMOC42NTE5MiAyLjQ4MzY5QzguMzI5NDYgMS44Mzg3NyA3LjQwOTEzIDEuODM4NzcgNy4wODY2NyAyLjQ4MzY5TDAuOTYxNjY5IDE0LjczMzdDMC42NzA3NzUgMTUuMzE1NSAxLjA5MzgzIDE2IDEuNzQ0MjkgMTZIMTMuOTk0M0MxNC42NDQ4IDE2IDE1LjA2NzggMTUuMzE1NSAxNC43NzY5IDE0LjczMzdaTTMuMTYwMDcgMTQuMjVMNy44NjkyOSA0LjgzMTU2TDEyLjU3ODUgMTQuMjVIMy4xNjAwN1pNOC43NDQyOSAxMS42MjVWMTMuMzc1SDYuOTk0MjlWMTEuNjI1SDguNzQ0MjlaTTYuOTk0MjkgMTAuNzVWNy4yNUg4Ljc0NDI5VjEwLjc1SDYuOTk0MjlaIiBmaWxsPSIjRUM3MjExIi8+CjxwYXRoIGQ9Ik0xMS4xOTkxIDIuOTUyMzhDMTAuODgwOSAyLjMxNDY3IDEwLjM1MzcgMS44MDUyNiA5LjcwNTUgMS41MDlMMTEuMDQxIDEuMDY5NzhDMTEuNjg4MyAwLjk0OTgxNCAxMi4zMzcgMS4yNzI2MyAxMi42MzE3IDEuODYxNDFMMTcuNjEzNiAxMS44MTYxQzE4LjM1MjcgMTMuMjkyOSAxNy41OTM4IDE1LjA4MDQgMTYuMDE4IDE1LjU3NDVDMTYuNDA0NCAxNC40NTA3IDE2LjMyMzEgMTMuMjE4OCAxNS43OTI0IDEyLjE1NTVMMTEuMTk5MSAyLjk1MjM4WiIgZmlsbD0iI0VDNzIxMSIvPgo8L3N2Zz4="); + background-color: darkorange; +} + .ace_scrollbar { contain: strict; position: absolute; @@ -452,17 +466,10 @@ module.exports = ` outline: 1px solid #5E9ED6; } -.ace_gutter-tooltip_header { - font-weight: bold; -} - -.ace_gutter-tooltip_body { - padding-top: 5px; -} - -.ace_gutter-tooltip .ace_icon { +.ace_icon { display: inline-block; width: 18px; + vertical-align: top; } .ace_icon_svg { diff --git a/src/editor.js b/src/editor.js index 474e8448b24..80f89a3870d 100644 --- a/src/editor.js +++ b/src/editor.js @@ -2932,6 +2932,7 @@ config.defineOptions(Editor.prototype, "editor", { useTextareaForIME: "renderer", useResizeObserver: "renderer", useSvgGutterIcons: "renderer", + showFoldedAnnotations: "renderer", scrollSpeed: "$mouseHandler", dragDelay: "$mouseHandler", diff --git a/src/ext/options.js b/src/ext/options.js index 471635fe182..2e2beb36f0d 100644 --- a/src/ext/options.js +++ b/src/ext/options.js @@ -198,6 +198,9 @@ var optionGroups = { "Use SVG gutter icons": { path: "useSvgGutterIcons" }, + "Annotations for folded lines": { + path: "showFoldedAnnotations" + }, "Keyboard Accessibility Mode": { path: "enableKeyboardAccessibility" } diff --git a/src/layer/gutter.js b/src/layer/gutter.js index 2f1bdbc73ae..44a153b939d 100644 --- a/src/layer/gutter.js +++ b/src/layer/gutter.js @@ -290,25 +290,9 @@ class Gutter{ var lineHeight = config.lineHeight + "px"; - var className; - if (this.$useSvgGutterIcons){ - className = "ace_gutter-cell_svg-icons "; - - if (this.$annotations[row]){ - annotationNode.className = "ace_icon_svg" + this.$annotations[row].className; - - dom.setStyle(annotationNode.style, "height", lineHeight); - dom.setStyle(annotationNode.style, "display", "block"); - } - else { - dom.setStyle(annotationNode.style, "display", "none"); - } - } - else { - className = "ace_gutter-cell "; - dom.setStyle(annotationNode.style, "display", "none"); - } - + var className = this.$useSvgGutterIcons ? "ace_gutter-cell_svg-icons " : "ace_gutter-cell "; + var iconClassName = this.$useSvgGutterIcons ? "ace_icon_svg" : "ace_icon"; + if (this.$highlightGutterLine) { if (row == this.$cursorRow || (fold && row < this.$cursorRow && row >= foldStart && this.$cursorRow <= fold.end.row)) { className += "ace_gutter-active-line "; @@ -324,7 +308,7 @@ class Gutter{ className += breakpoints[row]; if (decorations[row]) className += decorations[row]; - if (this.$annotations[row]) + if (this.$annotations[row] && row !== foldStart) className += this.$annotations[row].className; if (element.className != className) element.className = className; @@ -338,8 +322,29 @@ class Gutter{ if (c) { var className = "ace_fold-widget ace_" + c; - if (c == "start" && row == foldStart && row < fold.end.row) + if (c == "start" && row == foldStart && row < fold.end.row){ className += " ace_closed"; + var foldAnnotationClass; + var annotationInFold = false; + + for (var i = row + 1; i <= fold.end.row; i++){ + if (!this.$annotations[i]) + continue; + + if (this.$annotations[i].className === " ace_error"){ + annotationInFold = true; + foldAnnotationClass = " ace_error_fold"; + break; + } + if (this.$annotations[i].className === " ace_warning"){ + annotationInFold = true; + foldAnnotationClass = " ace_warning_fold"; + continue; + } + } + + element.className += foldAnnotationClass; + } else className += " ace_open"; if (foldWidget.className != className) @@ -352,6 +357,28 @@ class Gutter{ dom.setStyle(foldWidget.style, "display", "none"); } } + + if (annotationInFold && this.$showFoldedAnnotations){ + annotationNode.className = iconClassName; + annotationNode.className += foldAnnotationClass; + + dom.setStyle(annotationNode.style, "height", lineHeight); + dom.setStyle(annotationNode.style, "display", "block"); + } + else if (this.$annotations[row]){ + annotationNode.className = iconClassName; + + if (this.$useSvgGutterIcons) + annotationNode.className += this.$annotations[row].className; + else + element.classList.add(this.$annotations[row].className.replace(" ", "")); + + dom.setStyle(annotationNode.style, "height", lineHeight); + dom.setStyle(annotationNode.style, "display", "block"); + } + else { + dom.setStyle(annotationNode.style, "display", "none"); + } var text = (gutterRenderer ? gutterRenderer.getText(session, row) @@ -372,7 +399,6 @@ class Gutter{ this.$highlightGutterLine = highlightGutterLine; } - setShowLineNumbers(show) { this.$renderer = !show && { getWidth: function() {return 0;}, diff --git a/src/mouse/default_gutter_handler.js b/src/mouse/default_gutter_handler.js index d7c6cdea92f..d8b1324f7a9 100644 --- a/src/mouse/default_gutter_handler.js +++ b/src/mouse/default_gutter_handler.js @@ -34,12 +34,60 @@ function GutterHandler(mouseHandler) { }); - var tooltipTimeout, mouseEvent, tooltipAnnotation; + var tooltipTimeout, mouseEvent, tooltipContent; + + var annotationLabels = { + error: {singular: "error", plural: "errors"}, + warning: {singular: "warning", plural: "warnings"}, + info: {singular: "information message", plural: "information messages"} + }; function showTooltip() { var row = mouseEvent.getDocumentPosition().row; - var annotation = gutter.$annotations[row]; - if (!annotation) + var annotationsInRow = gutter.$annotations[row]; + var annotation; + + if (annotationsInRow) + annotation = {text: Array.from(annotationsInRow.text), type: Array.from(annotationsInRow.type)}; + else + annotation = {text: [], type: []}; + + // If the tooltip is for a row which has a closed fold, check whether there are + // annotations in the folded lines. If so, add a summary to the list of annotations. + var fold = gutter.session.getFoldLine(row); + if (fold && gutter.$showFoldedAnnotations){ + var annotationsInFold = {error: [], warning: [], info: []}; + var mostSevereAnnotationInFoldType; + + for (var i = row + 1; i <= fold.end.row; i++){ + if (!gutter.$annotations[i]) + continue; + + for (var j = 0; j < gutter.$annotations[i].text.length; j++) { + var annotationType = gutter.$annotations[i].type[j]; + annotationsInFold[annotationType].push(gutter.$annotations[i].text[j]); + + if (annotationType === "error"){ + mostSevereAnnotationInFoldType = "error_fold"; + continue; + } + + if (annotationType === "warning"){ + mostSevereAnnotationInFoldType = "warning_fold"; + continue; + } + } + } + + if (mostSevereAnnotationInFoldType === "error_fold" || mostSevereAnnotationInFoldType === "warning_fold"){ + var summaryFoldedAnnotations = `${annotationsToSummaryString(annotationsInFold)} in folded code.`; + + annotation.text.push(summaryFoldedAnnotations); + annotation.type.push(mostSevereAnnotationInFoldType); + } + } + + if (annotation.text.length === 0) return hideTooltip(); var maxRow = editor.session.getLength(); @@ -51,39 +99,16 @@ function GutterHandler(mouseHandler) { } var annotationMessages = {error: [], warning: [], info: []}; - var annotationLabels = { - error: {singular: "error", plural: "errors"}, - warning: {singular: "warning", plural: "warnings"}, - info: {singular: "information message", plural: "information messages"} - }; - var iconClassName = gutter.$useSvgGutterIcons ? "ace_icon_svg" : "ace_icon"; - // Construct the body of the tooltip. + // Construct the contents of the tooltip. for (var i = 0; i < annotation.text.length; i++) { - var line = ` ${annotation.text[i]}`; - annotationMessages[annotation.type[i]].push(line); + var line = ` ${annotation.text[i]}`; + annotationMessages[annotation.type[i].replace("_fold","")].push(line); } - var tooltipBody = "
"; - tooltipBody += [].concat(annotationMessages.error, annotationMessages.warning, annotationMessages.info).join("
"); - tooltipBody += '
'; - - // Construct the header of the tooltip. - var isMoreThanOneAnnotationType = false; - var tooltipHeader = "
"; - for (var i = 0; i < 3; i++){ - var annotationType = ['error', 'warning', 'info'][i]; - if (annotationMessages[annotationType].length > 0){ - var label = annotationMessages[annotationType].length === 1 ? annotationLabels[annotationType].singular : annotationLabels[annotationType].plural; - tooltipHeader += `${isMoreThanOneAnnotationType ? ', ' : ''}${annotationMessages[annotationType].length} ${label}`; - isMoreThanOneAnnotationType = true; - } - } - tooltipHeader += "
"; - - tooltipAnnotation = tooltipHeader + tooltipBody; - - tooltip.setHtml(tooltipAnnotation); + tooltipContent = [].concat(annotationMessages.error, annotationMessages.warning, annotationMessages.info).join("
"); + + tooltip.setHtml(tooltipContent); tooltip.setClassName("ace_gutter-tooltip"); tooltip.$element.setAttribute("aria-live", "polite"); @@ -97,7 +122,7 @@ function GutterHandler(mouseHandler) { if (mouseHandler.$tooltipFollowsMouse) { moveTooltip(mouseEvent); } else { - var gutterElement = mouseEvent.domEvent.target; + var gutterElement = gutter.$lines.cells[row].element.querySelector("[class*=ace_icon]"); var rect = gutterElement.getBoundingClientRect(); var style = tooltip.getElement().style; style.left = rect.right + "px"; @@ -108,14 +133,25 @@ function GutterHandler(mouseHandler) { function hideTooltip() { if (tooltipTimeout) tooltipTimeout = clearTimeout(tooltipTimeout); - if (tooltipAnnotation) { + if (tooltipContent) { tooltip.hide(); - tooltipAnnotation = null; + tooltipContent = null; editor._signal("hideGutterTooltip", tooltip); editor.off("mousewheel", hideTooltip); } } + function annotationsToSummaryString(annotations) { + const summary = []; + const annotationTypes = ['error', 'warning', 'info']; + for (const annotationType of annotationTypes) { + if (!annotations[annotationType].length) continue; + const label = annotations[annotationType].length === 1 ? annotationLabels[annotationType].singular : annotationLabels[annotationType].plural; + summary.push(`${annotations[annotationType].length} ${label}`); + } + return summary.join(", "); + } + function moveTooltip(e) { tooltip.setPosition(e.x, e.y); } @@ -125,7 +161,7 @@ function GutterHandler(mouseHandler) { if (dom.hasCssClass(target, "ace_fold-widget")) return hideTooltip(); - if (tooltipAnnotation && mouseHandler.$tooltipFollowsMouse) + if (tooltipContent && mouseHandler.$tooltipFollowsMouse) moveTooltip(e); mouseEvent = e; @@ -142,7 +178,7 @@ function GutterHandler(mouseHandler) { event.addListener(editor.renderer.$gutter, "mouseout", function(e) { mouseEvent = null; - if (!tooltipAnnotation || tooltipTimeout) + if (!tooltipContent || tooltipTimeout) return; tooltipTimeout = setTimeout(function() { diff --git a/src/mouse/default_gutter_handler_test.js b/src/mouse/default_gutter_handler_test.js index 59e2f823b90..f170b1e25de 100644 --- a/src/mouse/default_gutter_handler_test.js +++ b/src/mouse/default_gutter_handler_test.js @@ -36,7 +36,7 @@ module.exports = { editor = this.editor; next(); }, - + "test: gutter error tooltip" : function() { var editor = this.editor; var value = ""; @@ -51,15 +51,13 @@ module.exports = { assert.ok(/ace_error/.test(annotation.className)); var rect = annotation.getBoundingClientRect(); - annotation.dispatchEvent(new MouseEvent("move", {clientX: rect.left, clientY: rect.top})); + annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top})); // Wait for the tooltip to appear after its timeout. setTimeout(function() { editor.renderer.$loop._flush(); - var tooltipHeader = editor.container.querySelector(".ace_gutter-tooltip_header"); - var tooltipBody = editor.container.querySelector(".ace_gutter-tooltip_body"); - assert.ok(/1 error/.test(tooltipHeader.textContent)); - assert.ok(/error test/.test(tooltipBody.textContent)); + var tooltip = editor.container.querySelector(".ace_tooltip"); + assert.ok(/error test/.test(tooltip.textContent)); }, 100); }, "test: gutter warning tooltip" : function() { @@ -76,15 +74,13 @@ module.exports = { assert.ok(/ace_warning/.test(annotation.className)); var rect = annotation.getBoundingClientRect(); - annotation.dispatchEvent(new MouseEvent("move", {clientX: rect.left, clientY: rect.top})); + annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top})); // Wait for the tooltip to appear after its timeout. setTimeout(function() { editor.renderer.$loop._flush(); - var tooltipHeader = editor.container.querySelector(".ace_gutter-tooltip_header"); - var tooltipBody = editor.container.querySelector(".ace_gutter-tooltip_body"); - assert.ok(/1 warning/.test(tooltipHeader.textContent)); - assert.ok(/warning test/.test(tooltipBody.textContent)); + var tooltip = editor.container.querySelector(".ace_tooltip"); + assert.ok(/warning test/.test(tooltip.textContent)); }, 100); }, "test: gutter info tooltip" : function() { @@ -101,15 +97,13 @@ module.exports = { assert.ok(/ace_info/.test(annotation.className)); var rect = annotation.getBoundingClientRect(); - annotation.dispatchEvent(new MouseEvent("move", {clientX: rect.left, clientY: rect.top})); + annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top})); // Wait for the tooltip to appear after its timeout. setTimeout(function() { editor.renderer.$loop._flush(); - var tooltipHeader = editor.container.querySelector(".ace_gutter-tooltip_header"); - var tooltipBody = editor.container.querySelector(".ace_gutter-tooltip_body"); - assert.ok(/1 information message/.test(tooltipHeader.textContent)); - assert.ok(/info test/.test(tooltipBody.textContent)); + var tooltip = editor.container.querySelector(".ace_tooltip"); + assert.ok(/info test/.test(tooltip.textContent)); }, 100); }, "test: gutter svg icons" : function() { @@ -129,15 +123,108 @@ module.exports = { var annotation = line.children[2]; assert.ok(/ace_icon_svg/.test(annotation.className)); }, - - + "test: error show up in fold" : function() { + var editor = this.editor; + var value = "x {" + "\n".repeat(50) + "}"; + value = value.repeat(50); + editor.session.setMode(new Mode()); + editor.setOption("showFoldedAnnotations", true); + editor.setValue(value, -1); + editor.session.setAnnotations([{row: 1, column: 0, type: "error", text: "error test"}]); + editor.renderer.$loop._flush(); + + // Fold the line containing the annotation. + var lines = editor.renderer.$gutterLayer.$lines; + assert.equal(lines.cells[1].element.textContent, "2"); + var toggler = lines.cells[0].element.children[1]; + var rect = toggler.getBoundingClientRect(); + if (!rect.left) rect.left = 100; // for mockdom + toggler.dispatchEvent(MouseEvent("click", {x: rect.left, y: rect.top})); + editor.renderer.$loop._flush(); + assert.ok(/ace_closed/.test(toggler.className)); + assert.equal(lines.cells[1].element.textContent, "51"); + + // Annotation node should have fold class. + var annotation = lines.cells[0].element.children[2]; + assert.ok(/ace_error_fold/.test(annotation.className)); + + var rect = annotation.getBoundingClientRect(); + annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top})); + + // Wait for the tooltip to appear after its timeout. + setTimeout(function() { + editor.renderer.$loop._flush(); + var tooltip = editor.container.querySelector(".ace_tooltip"); + assert.ok(/error in folded/.test(tooltip.textContent)); + }, 100); + }, + "test: warning show up in fold" : function() { + var editor = this.editor; + var value = "x {" + "\n".repeat(50) + "}"; + value = value.repeat(50); + editor.session.setMode(new Mode()); + editor.setOption("showFoldedAnnotations", true); + editor.setValue(value, -1); + editor.session.setAnnotations([{row: 1, column: 0, type: "warning", text: "warning test"}]); + editor.renderer.$loop._flush(); + + // Fold the line containing the annotation. + var lines = editor.renderer.$gutterLayer.$lines; + assert.equal(lines.cells[1].element.textContent, "2"); + var toggler = lines.cells[0].element.children[1]; + var rect = toggler.getBoundingClientRect(); + if (!rect.left) rect.left = 100; // for mockdom + toggler.dispatchEvent(MouseEvent("click", {x: rect.left, y: rect.top})); + editor.renderer.$loop._flush(); + assert.ok(/ace_closed/.test(toggler.className)); + assert.equal(lines.cells[1].element.textContent, "51"); + + // Annotation node should have fold class. + var annotation = lines.cells[0].element.children[2]; + assert.ok(/ace_warning_fold/.test(annotation.className)); + + var rect = annotation.getBoundingClientRect(); + annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top})); + + // Wait for the tooltip to appear after its timeout. + setTimeout(function() { + editor.renderer.$loop._flush(); + var tooltip = editor.container.querySelector(".ace_tooltip"); + assert.ok(/warning in folded/.test(tooltip.textContent)); + }, 100); + }, + "test: info not show up in fold" : function() { + var editor = this.editor; + var value = "x {" + "\n".repeat(50) + "}"; + value = value.repeat(50); + editor.session.setMode(new Mode()); + editor.setOption("showFoldedAnnotations", true); + editor.setValue(value, -1); + editor.session.setAnnotations([{row: 1, column: 0, type: "info", text: "info test"}]); + editor.renderer.$loop._flush(); + + // Fold the line containing the annotation. + var lines = editor.renderer.$gutterLayer.$lines; + assert.equal(lines.cells[1].element.textContent, "2"); + var toggler = lines.cells[0].element.children[1]; + var rect = toggler.getBoundingClientRect(); + if (!rect.left) rect.left = 100; // for mockdom + toggler.dispatchEvent(MouseEvent("click", {x: rect.left, y: rect.top})); + editor.renderer.$loop._flush(); + assert.ok(/ace_closed/.test(toggler.className)); + assert.equal(lines.cells[1].element.textContent, "51"); + + // Annotation node should NOT have fold class. + var annotation = lines.cells[0].element.children[2]; + assert.notOk(/fold/.test(annotation.className)); + }, + tearDown : function() { this.editor.destroy(); document.body.removeChild(this.editor.container); } }; - if (typeof module !== "undefined" && module === require.main) { require("asyncjs").test.testcase(module.exports).exec(); } diff --git a/src/virtual_renderer.js b/src/virtual_renderer.js index 18d33bb1415..d86c4000777 100644 --- a/src/virtual_renderer.js +++ b/src/virtual_renderer.js @@ -1908,6 +1908,12 @@ config.defineOptions(VirtualRenderer.prototype, "renderer", { }, initialValue: false }, + showFoldedAnnotations: { + set: function(value){ + this.$gutterLayer.$showFoldedAnnotations = value; + }, + initialValue: false + }, fadeFoldWidgets: { set: function(show) { dom.setCssClass(this.$gutter, "ace_fade-fold-widgets", show);