Skip to content

Gutter Hover tooltip #5872

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

Merged
merged 17 commits into from
Oct 17, 2025
Merged

Gutter Hover tooltip #5872

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
26f4410
WIP: gutter hover tooltip based on hover tooltip
mkslanc Sep 10, 2025
2ba3927
Refactor gutter tooltip to reuse hover tooltip functionality and alig…
mkslanc Sep 11, 2025
34193b4
Adjust gutter tooltip offsets and ensure absolute positioning.
mkslanc Sep 11, 2025
e050f62
refactor gutter tooltip handling: unify hide method, remove unused co…
mkslanc Sep 15, 2025
a06f18e
remove tooltipFollowsMouse option in default gutter handler (for now)
mkslanc Sep 15, 2025
c952559
Merge remote-tracking branch 'origin/master' into gutter-tooltip
mkslanc Sep 19, 2025
145fd4b
remove `tooltipFollowsMouse` option and refactor gutter tooltip logic…
mkslanc Sep 29, 2025
732ed80
fix tests
nightwing Sep 29, 2025
8dd2fe0
refactor gutter tooltip constructor and positioning logic for improve…
mkslanc Sep 30, 2025
171fdff
fix tooltip positioning logic
nightwing Oct 1, 2025
8237ee6
refactor gutter tooltip positioning logic to enhance alignment, reuse…
mkslanc Oct 6, 2025
1d6d3b9
fix more tests
nightwing Oct 7, 2025
47a6321
refactor gutter tooltip: improve type definitions, remove unused cons…
mkslanc Oct 7, 2025
2e764d0
refactor tooltip logic: improve $setPosition method, update handling …
mkslanc Oct 9, 2025
f277636
refactor tooltip references: rename `tooltip` to `$tooltip`, update t…
mkslanc Oct 9, 2025
28e1060
cleanup
nightwing Oct 9, 2025
670086f
Use position fixed to prevent tooltip being cropped to parent node
nightwing Oct 13, 2025
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
3 changes: 1 addition & 2 deletions ace-internal.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,6 @@ export namespace Ace {
dragDelay: number;
dragEnabled: boolean;
focusTimeout: number;
tooltipFollowsMouse: boolean;
}

interface EditorOptions extends EditSessionOptions,
Expand Down Expand Up @@ -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,
Expand All @@ -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
Copy link
Member

@nightwing nightwing Oct 9, 2025

Choose a reason for hiding this comment

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

why do we need to add this as public property, don't we have it as annotationTooltip already?

}
}

Expand Down
1 change: 0 additions & 1 deletion ace.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
1 change: 0 additions & 1 deletion src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3121,7 +3121,6 @@ config.defineOptions(Editor.prototype, "editor", {
dragDelay: "$mouseHandler",
dragEnabled: "$mouseHandler",
focusTimeout: "$mouseHandler",
tooltipFollowsMouse: "$mouseHandler",

firstLineNumber: "session",
overwrite: "session",
Expand Down
4 changes: 0 additions & 4 deletions src/ext/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,10 +231,6 @@ var optionGroups = {
},
"Keyboard Accessibility Mode": {
path: "enableKeyboardAccessibility"
},
"Gutter tooltip follows mouse": {
path: "tooltipFollowsMouse",
defaultValue: true
}
}
};
Expand Down
12 changes: 4 additions & 8 deletions src/keyboard/gutter_handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class GutterKeyboardHandler {
e.preventDefault();

if (e.keyCode === keys["escape"])
this.annotationTooltip.hideTooltip();
this.annotationTooltip.hide();

return;
}
Expand Down Expand Up @@ -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));
this.annotationTooltip.$fromKeyboard = true;
break;
}
return;
Expand All @@ -213,7 +209,7 @@ class GutterKeyboardHandler {
}

if (this.annotationTooltip.isOpen)
this.annotationTooltip.hideTooltip();
this.annotationTooltip.hide();

return;
}
Expand Down
106 changes: 54 additions & 52 deletions src/keyboard/gutter_handler_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,24 @@ if (typeof process !== "undefined") {
require("../test/mockdom");
}

var keys = require('../lib/keys');

"use strict";

require("../multi_select");
require("../theme/textmate");
var user = require("../test/user");
var Editor = require("../editor").Editor;
var Mode = require("../mode/java").Mode;
var VirtualRenderer = require("../virtual_renderer").VirtualRenderer;
var assert = require("../test/assertions");

function emit(keyCode) {
var data = {bubbles: true, keyCode};
var event = new KeyboardEvent("keydown", data);

var el = document.activeElement;
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 = {
Expand All @@ -43,20 +44,20 @@ 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();
assert.equal(document.activeElement, editor.renderer.$gutter);

// Focus on the fold widget.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
assert.equal(document.activeElement, lines.cells[0].element.childNodes[1]);

// Click the fold widget.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
// Check that code is folded.
Expand All @@ -65,7 +66,7 @@ module.exports = {
assert.equal(lines.cells[1].element.textContent, "52");

// After escape focus should be back to the gutter.
emit(keys["escape"]);
user.type("Escape");
assert.equal(document.activeElement, editor.renderer.$gutter);

done();
Expand All @@ -90,33 +91,33 @@ module.exports = {
assert.equal(lines.cells[2].element.textContent, "3");

// Focus on the fold widgets.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
assert.equal(document.activeElement, lines.cells[1].element.childNodes[1]);

// Click the first fold widget.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
// Check that code is folded.
editor.renderer.$loop._flush();
assert.equal(lines.cells[2].element.textContent, "8");

// Move to the next fold widget.
emit(keys["down"]);
user.type("Down");
assert.equal(document.activeElement, lines.cells[3].element.childNodes[1]);
assert.equal(lines.cells[4].element.textContent, "10");

// Click the fold widget.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
// Check that code is folded.
assert.equal(lines.cells[4].element.textContent, "15");

// Move back up one fold widget.
emit(keys["up"]);
user.type("Up");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[1]);

done();
Expand All @@ -141,26 +142,26 @@ module.exports = {
assert.equal(document.activeElement, editor.renderer.$gutter);

// Focus on the annotation.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
emit(keys["left"]);
user.type("Left");
assert.equal(document.activeElement, lines.cells[0].element.childNodes[2]);

// Click annotation.
emit(keys["enter"]);
user.type("Enter");

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.
emit(keys["escape"]);
user.type("Escape");

// After escape again focus should be back to the gutter.
emit(keys["escape"]);
user.type("Escape");
assert.equal(document.activeElement, editor.renderer.$gutter);

done();
Expand All @@ -186,46 +187,46 @@ module.exports = {
assert.equal(document.activeElement, editor.renderer.$gutter);

// Focus on the annotation.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
emit(keys["left"]);
user.type("Left");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);

// Click annotation.
emit(keys["enter"]);
user.type("Enter");

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.
emit(keys["escape"]);
user.type("Escape");

// Press down to move to next annotation.
emit(keys["down"]);
user.type("Down");
assert.equal(document.activeElement, lines.cells[2].element.childNodes[2]);

// Click annotation.
emit(keys["enter"]);
user.type("Enter");

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.
emit(keys["escape"]);
user.type("Escape");

// Move back up one annotation.
emit(keys["up"]);
user.type("Up");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);

// Move back to the folds, focus should be on the fold on line 1.
emit(keys["right"]);
user.type("Right");
assert.equal(document.activeElement, lines.cells[0].element.childNodes[1]);

done();
Expand All @@ -249,14 +250,15 @@ module.exports = {
assert.equal(document.activeElement, editor.renderer.$gutter);

// Focus on gutter interaction.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
// Focus should be on the annotation directly.
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);
done();
}, 20);
},"test: aria attributes mode with getFoldWidgetRange" : function() {
},
"test: aria attributes mode with getFoldWidgetRange" : function() {
var editor = this.editor;
var value = "x {" + "\n".repeat(5) + "}";
editor.session.setMode(new Mode());
Expand All @@ -265,7 +267,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");

assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, rows 1 through 6");
assert.equal(toggler.getAttribute("aria-expanded"), "true");
Expand All @@ -291,7 +293,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");

assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, row 1");
assert.equal(toggler.getAttribute("aria-expanded"), "true");
Expand Down Expand Up @@ -323,10 +325,10 @@ module.exports = {
assert.equal(document.activeElement, editor.renderer.$gutter);

// Focus on the annotation.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
emit(keys["left"]);
user.type("Left");
assert.equal(document.activeElement, lines.cells[0].element.childNodes[2]);

setTimeout(function() {
Expand Down Expand Up @@ -364,30 +366,30 @@ module.exports = {
});

// Focus on the annotation.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
emit(keys["left"]);
user.type("Left");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);

// Click annotation.
emit(keys["enter"]);
user.type("Enter");

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.
emit(keys["escape"]);
user.type("Escape");

// Switch lane move to custom widget
emit(keys["right"]);
user.type("Right");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[3]);

// Move back to the annotations, focus should be on the annotation on line 1.
emit(keys["left"]);
user.type("Left");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);
done();
}, 20);
Expand Down Expand Up @@ -426,20 +428,20 @@ module.exports = {
});

// Focus on the fold widgets.
emit(keys["enter"]);
user.type("Enter");

setTimeout(function() {
assert.equal(document.activeElement, lines.cells[1].element.childNodes[1]);

// Move down to the custom widget.
emit(keys["down"]);
user.type("Down");
assert.equal(document.activeElement, lines.cells[2].element.childNodes[3]);

emit(keys["enter"]);
user.type("Enter");
assert.equal(firstCallbackCalledCount,1);

// Move up to the previous fold widget.
emit(keys["up"]);
user.type("Up");
assert.equal(document.activeElement, lines.cells[1].element.childNodes[1]);
done();
}, 20);
Expand Down
Loading
Loading