Gutter Hover tooltip (#5872)

* WIP: gutter hover tooltip based on hover tooltip

* Refactor gutter tooltip to reuse hover tooltip functionality and align position logic.

* Adjust gutter tooltip offsets and ensure absolute positioning.

* refactor gutter tooltip handling: unify hide method, remove unused code, and improve positioning logic.

* remove tooltipFollowsMouse option in default gutter handler (for now)

* remove `tooltipFollowsMouse` option and refactor gutter tooltip logic to improve handling and positioning.

* fix tests

* refactor gutter tooltip constructor and positioning logic for improved alignment and consistency.

* fix tooltip positioning logic

* refactor gutter tooltip positioning logic to enhance alignment, reuse anchor metrics, and improve code clarity.

* fix more tests

* refactor gutter tooltip: improve type definitions, remove unused constants, replace `const` with `var` for consistency, and adjust destroy logic.

* refactor tooltip logic: improve $setPosition method, update handling of markers, and enhance code readability.

* refactor tooltip references: rename `tooltip` to `$tooltip`, update type definitions, and adjust related logic for consistency and clarity.

* cleanup

* Use position fixed to prevent tooltip being cropped to parent node
reverts #5853

---------

Co-authored-by: nightwing <[email protected]>

Author: mkslanc

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/autocomplete/popup.js

@@ -370,27 +370,24 @@ class AcePopup {
                 renderer.$maxPixelHeight = null;
             }
 
-            el.style.display = "";
-            var rootRect = el.offsetParent && el.offsetParent.getBoundingClientRect();
-            
 
             if (anchor === "top") {
                 el.style.top = "";
-                el.style.bottom = (screenHeight + scrollBarSize - dims.bottom)
-                    - (rootRect ? screenHeight + scrollBarSize - rootRect.bottom : 0)+ "px";
+                el.style.bottom = (screenHeight + scrollBarSize - dims.bottom) + "px";
                 popup.isTopdown = false;
             } else {
-                el.style.top = (dims.top - (rootRect ? rootRect.top : 0)) + "px";
+                el.style.top = dims.top + "px";
                 el.style.bottom = "";
                 popup.isTopdown = true;
             }
 
+            el.style.display = "";
 
             var left = pos.left;
             if (left + el.offsetWidth > screenWidth)
                 left = screenWidth - el.offsetWidth;
 
-            el.style.left = (left - (rootRect ? rootRect.left : 0)) + "px";
+            el.style.left = left + "px";
             el.style.right = "";
 
             if (!popup.isOpen) {
@@ -401,6 +398,8 @@ class AcePopup {
 
             popup.anchorPos = pos;
             popup.anchor = anchor;
+            
+            dom.$fixPositionBug(el);
 
             return true;
         };
@@ -472,7 +471,7 @@ dom.importCssString(`
     width: 300px;
     z-index: 200000;
     border: 1px lightgray solid;
-    position: absolute;
+    position: fixed;
     box-shadow: 2px 3px 5px rgba(0,0,0,.2);
     line-height: 1.4;
     background: #fefefe;

src/css/editor-css.js

@@ -460,7 +460,7 @@ module.exports = `
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     color: black;
     padding: 3px 4px;
-    position: absolute;
+    position: fixed;
     z-index: 999999;
     box-sizing: border-box;
     cursor: default;

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/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

@@ -1,7 +1,6 @@
 "use strict";
 
 var keys = require('../lib/keys');
-var GutterTooltip = require("../mouse/default_gutter_handler").GutterTooltip;
 
 class GutterKeyboardHandler {
     constructor(editor) {
@@ -13,7 +12,7 @@ class GutterKeyboardHandler {
         this.activeRowIndex = null;
         this.activeLane = null;
 
-        this.annotationTooltip = new GutterTooltip(this.editor);
+        this.annotationTooltip = this.editor.$mouseHandler.$tooltip;
     }
 
     addListener() {
@@ -34,7 +33,7 @@ class GutterKeyboardHandler {
             e.preventDefault();
 
             if (e.keyCode === keys["escape"])
-                this.annotationTooltip.hideTooltip();
+                this.annotationTooltip.hide();
 
             return;
         }
@@ -186,12 +185,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));
+                    this.annotationTooltip.$fromKeyboard = true;
                     break;
             }
             return;
@@ -213,7 +208,7 @@ class GutterKeyboardHandler {
         }
 
         if (this.annotationTooltip.isOpen)
-            this.annotationTooltip.hideTooltip();
+            this.annotationTooltip.hide();
 
         return;
     }