WIP: Gutter Hover tooltip

ace-internal.d.ts

@@ -380,7 +380,6 @@ export namespace Ace {
         dragDelay: number;
         dragEnabled: boolean;
         focusTimeout: number;
-        tooltipFollowsMouse: boolean;
     }
 
     interface EditorOptions extends EditSessionOptions,
@@ -1629,7 +1628,6 @@ declare module "./src/mouse/mouse_event" {
 declare module "./src/mouse/mouse_handler" {
 
     export interface MouseHandler {
-        $tooltipFollowsMouse?: boolean,
         cancelDrag?: boolean
         //from DefaultHandlers
         $clickSelection?: Ace.Range,
@@ -1638,6 +1636,7 @@ declare module "./src/mouse/mouse_handler" {
         select?: () => void
         $lastScroll?: { t: number, vx: number, vy: number, allowed: number }
         selectEnd?: () => void
+        tooltip?: Ace.GutterTooltip
     }
 }
 

ace.d.ts

@@ -281,7 +281,6 @@ declare module "ace-code" {
             dragDelay: number;
             dragEnabled: boolean;
             focusTimeout: number;
-            tooltipFollowsMouse: boolean;
         }
         interface EditorOptions extends EditSessionOptions, MouseHandlerOptions, VirtualRendererOptions {
             selectionStyle: "fullLine" | "screenLine" | "text" | "line";

src/editor.js

@@ -3121,7 +3121,6 @@ config.defineOptions(Editor.prototype, "editor", {
     dragDelay: "$mouseHandler",
     dragEnabled: "$mouseHandler",
     focusTimeout: "$mouseHandler",
-    tooltipFollowsMouse: "$mouseHandler",
 
     firstLineNumber: "session",
     overwrite: "session",

src/editor_options_test.js

@@ -59,6 +59,7 @@ module.exports = {
             assert.ok(editor.hoverTooltip != null);
 
             var nodes = document.querySelectorAll(".ace_tooltip");
+            // TODO
             assert.equal(nodes.length, 2);
             assert.equal(editor.hoverTooltip.isOpen, true);
 

src/ext/options.js

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

src/keyboard/gutter_handler.js

@@ -34,7 +34,7 @@ class GutterKeyboardHandler {
             e.preventDefault();
 
             if (e.keyCode === keys["escape"])
-                this.annotationTooltip.hideTooltip();
+                this.annotationTooltip.hide();
 
             return;
         }
@@ -186,12 +186,8 @@ class GutterKeyboardHandler {
                     return; 
 
                 case "annotation":
-                    var gutterElement = this.lines.cells[this.activeRowIndex].element.childNodes[2];
-                    var rect = gutterElement.getBoundingClientRect();
-                    var style = this.annotationTooltip.getElement().style;
-                    style.left = rect.right + "px";
-                    style.top = rect.bottom + "px";
-                    this.annotationTooltip.showTooltip(this.$rowIndexToRow(this.activeRowIndex));                
+                    this.annotationTooltip.showTooltip(this.$rowIndexToRow(this.activeRowIndex));
+                    window.removeEventListener("keydown", this.annotationTooltip.hide, true);
                     break;
             }
             return;
@@ -213,7 +209,7 @@ class GutterKeyboardHandler {
         }
 
         if (this.annotationTooltip.isOpen)
-            this.annotationTooltip.hideTooltip();
+            this.annotationTooltip.hide();
 
         return;
     }

src/keyboard/gutter_handler_test.js

@@ -22,6 +22,16 @@ function emit(keyCode) {
     el.dispatchEvent(event);
 }
 
+function findVisibleTooltip() {
+    const tooltips = document.body.querySelectorAll(".ace_gutter-tooltip");
+    for (let i = 0; i < tooltips.length; i++) {
+        if (window.getComputedStyle(tooltips[i]).display === "block") {
+            return tooltips[i];
+        }
+    }
+    return null;
+}
+
 module.exports = {
     setUp : function(done) {
         this.editor = new Editor(new VirtualRenderer());
@@ -43,7 +53,7 @@ module.exports = {
         editor.renderer.$loop._flush();
 
         var lines = editor.renderer.$gutterLayer.$lines;
-        var toggler = lines.cells[0].element.children[1];
+        var toggler = lines.cells[0].element.querySelector(".ace_fold-widget");
 
         // Set focus to the gutter div.
         editor.renderer.$gutter.focus();
@@ -153,7 +163,7 @@ module.exports = {
             setTimeout(function() {
                 // Check annotation is rendered.
                 editor.renderer.$loop._flush();
-                var tooltip = editor.container.querySelector(".ace_gutter-tooltip");
+                var tooltip = findVisibleTooltip();
                 assert.ok(/error test/.test(tooltip.textContent));
 
                 // Press escape to dismiss the tooltip.
@@ -164,7 +174,7 @@ module.exports = {
                 assert.equal(document.activeElement, editor.renderer.$gutter);
 
                 done();
-            }, 20);
+            }, 400);
         }, 20);
     },"test: keyboard annotation: multiple annotations" : function(done) {
         var editor = this.editor;
@@ -198,7 +208,7 @@ module.exports = {
             setTimeout(function() {
                 // Check annotation is rendered.
                 editor.renderer.$loop._flush();
-                var tooltip = editor.container.querySelector(".ace_gutter-tooltip");
+                var tooltip = findVisibleTooltip();
                 assert.ok(/error test/.test(tooltip.textContent));
 
                 // Press escape to dismiss the tooltip.
@@ -214,7 +224,7 @@ module.exports = {
                 setTimeout(function() {
                     // Check annotation is rendered.
                     editor.renderer.$loop._flush();
-                    var tooltip = editor.container.querySelector(".ace_gutter-tooltip");
+                    var tooltip = findVisibleTooltip();
                     assert.ok(/warning test/.test(tooltip.textContent));
 
                     // Press escape to dismiss the tooltip.
@@ -376,7 +386,7 @@ module.exports = {
             setTimeout(function() {
                 // Check annotation is rendered.
                 editor.renderer.$loop._flush();
-                var tooltip = editor.container.querySelector(".ace_gutter-tooltip");
+                var tooltip = findVisibleTooltip();
                 assert.ok(/error test/.test(tooltip.textContent));
 
                 // Press escape to dismiss the tooltip.