fix: bug in guttertooltip when tooltipsFollowsMouse set to false (#5217)

Fixes a bug where an error is thrown when hovering over the gutter with tooltipsFollowsMouse == true and scrolled. Additionally, adds tooltipsFollowsMouse to kitchen-sink to make it easier to test this option.

Author: akoreman

src/ext/options.js

@@ -203,6 +203,10 @@ var optionGroups = {
         },
         "Keyboard Accessibility Mode": {
             path: "enableKeyboardAccessibility"
+        },
+        "Gutter tooltip follows mouse": {
+            path: "tooltipFollowsMouse",
+            defaultValue: true
         }
     }
 };

src/mouse/default_gutter_handler.js

@@ -57,11 +57,17 @@ function GutterHandler(mouseHandler) {
         if (mouseHandler.$tooltipFollowsMouse) {
             moveTooltip(mouseEvent);
         } else {
-            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";
-            style.top = rect.bottom + "px";
+            var gutterRow = mouseEvent.getGutterRow();
+            var gutterCell = gutter.$lines.get(gutterRow);
+            if (gutterCell) {
+                var gutterElement = gutterCell.element.querySelector(".ace_gutter_annotation");
+                var rect = gutterElement.getBoundingClientRect();
+                var style = tooltip.getElement().style;
+                style.left = rect.right + "px";
+                style.top = rect.bottom + "px";
+            } else {
+                moveTooltip(mouseEvent);
+            }
         }
     }
 

src/mouse/default_gutter_handler_test.js

@@ -217,6 +217,33 @@ module.exports = {
         // Annotation node should NOT have fold class.
         var annotation = lines.cells[0].element.children[2];
         assert.notOk(/fold/.test(annotation.className));
+    },"test: sets position correctly when tooltipFollowsMouse false" : function(done) {
+        var editor = this.editor;
+        var value = "";
+
+        editor.session.setMode(new Mode());
+        editor.setValue(value, -1);
+        editor.session.setAnnotations([{row: 0, column: 0, text: "error test", type: "error"}]);
+        editor.setOption("tooltipFollowsMouse", false);
+        editor.setOption("useSvgGutterIcons", true);
+        editor.renderer.$loop._flush();
+
+        var lines = editor.renderer.$gutterLayer.$lines;
+        var annotation = lines.cells[0].element.childNodes[2].firstChild;
+        assert.ok(/ace_error/.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 test/.test(tooltip.textContent));
+            assert.equal(tooltip.style.left, `${rect.right}px`);
+            assert.equal(tooltip.style.top, `${rect.bottom}px`);
+            done();
+        }, 100); 
     },
 
     tearDown : function() {

src/mouse/mouse_event.js

@@ -48,6 +48,18 @@ class MouseEvent {
         this.$pos = this.editor.renderer.screenToTextCoordinates(this.clientX, this.clientY);
         return this.$pos;
     }
+
+    /**
+     * Get the relative position within the gutter.
+     * 
+     * @return {Number} 'row' within the gutter. 
+     */
+    getGutterRow() {
+        var documentRow = this.getDocumentPosition().row;
+        var screenRow = this.editor.session.documentToScreenRow(documentRow, 0);
+        var screenTopRow = this.editor.session.documentToScreenRow(this.editor.renderer.$gutterLayer.$lines.get(0).row, 0);
+        return screenRow - screenTopRow;
+    }
 
     /**
      * Check if the mouse cursor is inside of the text selection