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

Author: mkslanc

src/mouse/default_gutter_handler.js

@@ -3,7 +3,7 @@
  * @typedef {import("./mouse_handler").MouseHandler} MouseHandler
  */
 var dom = require("../lib/dom");
-const MouseEvent = require("./mouse_event").MouseEvent;
+var MouseEvent = require("./mouse_event").MouseEvent;
 var HoverTooltip = require("../tooltip").HoverTooltip;
 var nls = require("../config").nls;
 var Range = require("../range").Range;
@@ -99,8 +99,10 @@ class GutterTooltip extends HoverTooltip {
         super.removeFromEditor(editor);
     }
 
-    destroy(editor) {
-        this.removeFromEditor(editor);
+    destroy() {
+        if (this.editor) {
+            this.removeFromEditor(this.editor);
+        }
         super.destroy();
     }
 
@@ -129,6 +131,9 @@ class GutterTooltip extends HoverTooltip {
         };
     }
 
+    /**
+     * @param {number} row
+     */
     showTooltip(row) {
         var gutter = this.editor.renderer.$gutterLayer;
         var annotationsInRow = gutter.$annotations[row];
@@ -149,7 +154,7 @@ class GutterTooltip extends HoverTooltip {
             var severityRank = {error: 1, security: 2, warning: 3, info: 4, hint: 5};
             var mostSevereAnnotationTypeInFold;
 
-            for (let i = row + 1; i <= fold.end.row; i++) {
+            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++) {
@@ -181,7 +186,7 @@ class GutterTooltip extends HoverTooltip {
         var iconClassName = gutter.$useSvgGutterIcons ? "ace_icon_svg" : "ace_icon";
 
         // Construct the contents of the tooltip.
-        for (let i = 0; i < annotation.displayText.length; i++) {
+        for (var i = 0; i < annotation.displayText.length; i++) {
             var lineElement = dom.createElement("span");
 
             var iconElement = dom.createElement("span");
@@ -212,26 +217,26 @@ class GutterTooltip extends HoverTooltip {
 
         tooltipElement.setAttribute("aria-live", "polite");
 
-        const annotationNode = this.$findLinkedAnnotationNode(row);
+        var annotationNode = this.$findLinkedAnnotationNode(row);
         if (annotationNode) {
             annotationNode.setAttribute("aria-describedby", this.id);
         }
 
-        const range = Range.fromPoints({row, column: 0}, {row, column: 0});
+        var range = Range.fromPoints({row, column: 0}, {row, column: 0});
         this.showForRange(this.editor, range, tooltipElement);
         this.visibleTooltipRow = row;
         this.editor._signal("showGutterTooltip", this);
     }
 
     $setPosition(editor, _ignoredPosition, range) {
-        const gutterCell = this.$findCellByRow(range.start.row);
+        var gutterCell = this.$findCellByRow(range.start.row);
         if (!gutterCell) return;
-        const el = gutterCell && gutterCell.element;
-        const anchorEl = el && (el.querySelector(".ace_gutter_annotation"));
+        var el = gutterCell && gutterCell.element;
+        var anchorEl = el && (el.querySelector(".ace_gutter_annotation"));
         if (!anchorEl) return;
-        const r = anchorEl.getBoundingClientRect();
+        var r = anchorEl.getBoundingClientRect();
         if (!r) return;
-        const point = {
+        var point = {
             pageX: r.right,
             pageY: r.top
         };
@@ -246,9 +251,9 @@ class GutterTooltip extends HoverTooltip {
     }
 
     $findLinkedAnnotationNode(row) {
-        const cell = this.$findCellByRow(row);
+        var cell = this.$findCellByRow(row);
         if (cell) {
-            const element = cell.element;
+            var element = cell.element;
             if (element.childNodes.length > 2) {
                 return element.childNodes[2];
             }
@@ -266,7 +271,7 @@ class GutterTooltip extends HoverTooltip {
         this.$element.removeAttribute("aria-live");
 
         if (this.visibleTooltipRow != undefined) {
-            const annotationNode = this.$findLinkedAnnotationNode(this.visibleTooltipRow);
+            var annotationNode = this.$findLinkedAnnotationNode(this.visibleTooltipRow);
             if (annotationNode) {
                 annotationNode.removeAttribute("aria-describedby");
             }
@@ -277,11 +282,11 @@ class GutterTooltip extends HoverTooltip {
     }
 
     static annotationsToSummaryString(annotations) {
-        const summary = [];
-        const annotationTypes = ["error", "security", "warning", "info", "hint"];
-        for (const annotationType of annotationTypes) {
+        var summary = [];
+        var annotationTypes = ["error", "security", "warning", "info", "hint"];
+        for (var annotationType of annotationTypes) {
             if (!annotations[annotationType].length) continue;
-            const label = annotations[annotationType].length === 1 ? GutterTooltip.annotationLabels[annotationType].singular : GutterTooltip.annotationLabels[annotationType].plural;
+            var label = annotations[annotationType].length === 1 ? GutterTooltip.annotationLabels[annotationType].singular : GutterTooltip.annotationLabels[annotationType].plural;
             summary.push(`${annotations[annotationType].length} ${label}`);
         }
         return summary.join(", ");

src/mouse/mouse_handler.js

@@ -213,7 +213,7 @@ class MouseHandler {
     }
     destroy() {
         if (this.releaseMouse) this.releaseMouse();
-        if (this.tooltip) this.tooltip.destroy(this.editor);
+        if (this.tooltip) this.tooltip.destroy();
     }
 }
 

src/tooltip.js

@@ -152,7 +152,7 @@ class PopupManager {
      * @param {Tooltip} popup
      */
     removePopup(popup) {
-        const index = this.popups.indexOf(popup);
+        var index = this.popups.indexOf(popup);
         if (index !== -1) {
             this.popups.splice(index, 1);
             this.updatePopups();
@@ -188,8 +188,8 @@ class PopupManager {
      * @return {boolean}
      */
     doPopupsOverlap(popupA, popupB) {
-        const rectA = popupA.getElement().getBoundingClientRect();
-        const rectB = popupB.getElement().getBoundingClientRect();
+        var rectA = popupA.getElement().getBoundingClientRect();
+        var rectB = popupB.getElement().getBoundingClientRect();
 
         return (rectA.left < rectB.right && rectA.right > rectB.left && rectA.top < rectB.bottom && rectA.bottom
             > rectB.top);
@@ -236,7 +236,7 @@ class HoverTooltip extends Tooltip {
     addToEditor(editor) {
         editor.on("mousemove", this.onMouseMove);
         editor.on("mousedown", this.hide);
-        const target = editor.renderer.getMouseEventTarget();
+        var target = editor.renderer.getMouseEventTarget();
         if (target && typeof target.removeEventListener === "function") {
             target.addEventListener("mouseout", this.onMouseOut, true);
         }
@@ -249,7 +249,7 @@ class HoverTooltip extends Tooltip {
     removeFromEditor(editor) {
         editor.off("mousemove", this.onMouseMove);
         editor.off("mousedown", this.hide);
-        const target = editor.renderer.getMouseEventTarget();
+        var target = editor.renderer.getMouseEventTarget();
         if (target && typeof target.removeEventListener === "function") {
             target.removeEventListener("mouseout", this.onMouseOut, true);
         }
@@ -382,8 +382,8 @@ class HoverTooltip extends Tooltip {
         var spaceBelow = window.innerHeight - anchorTop - renderer.lineHeight;
 
         // if tooltip fits above the line, or space below the line is smaller, show tooltip above
-        const metrics = { labelHeight, anchorTop, spaceBelow};
-        const isAbove = this.$shouldPlaceAbove(metrics);
+        var metrics = { labelHeight, anchorTop, spaceBelow};
+        var isAbove = this.$shouldPlaceAbove(metrics);
 
         var rootRect = element.offsetParent && element.offsetParent.getBoundingClientRect();
 

types/ace-modules.d.ts

@@ -1763,6 +1763,10 @@ declare module "ace-code/src/tooltip" {
         setPosition(x: number, y: number): void;
         setClassName(className: string): void;
         setTheme(theme: import("ace-code").Ace.Theme): void;
+        theme: {
+            isDark: boolean;
+            cssClass: string;
+        };
         show(text?: string, x?: number, y?: number): void;
         hide(e: any): void;
         getHeight(): number;
@@ -1786,8 +1790,6 @@ declare module "ace-code/src/mouse/default_gutter_handler" {
     export interface GutterHandler {
     }
     export type MouseHandler = import("ace-code/src/mouse/mouse_handler").MouseHandler;
-    export const GUTTER_TOOLTIP_LEFT_OFFSET: 3;
-    export const GUTTER_TOOLTIP_TOP_OFFSET: 3;
     export class GutterTooltip extends HoverTooltip {
         static get annotationLabels(): {
             error: {
@@ -1812,15 +1814,15 @@ declare module "ace-code/src/mouse/default_gutter_handler" {
             };
         };
         static annotationsToSummaryString(annotations: any): string;
-        constructor(editor: any);
+        constructor(editor: import("ace-code/src/editor").Editor);
         id: string;
-        editor: any;
+        editor: import("ace-code/src/editor").Editor;
         visibleTooltipRow: number | undefined;
         onDomMouseMove(domEvent: any): void;
         onDomMouseOut(domEvent: any): void;
         addToEditor(editor: any): void;
         removeFromEditor(editor: any): void;
-        showTooltip(row: any): void;
+        showTooltip(row: number): void;
         /**
          * Check if cursor is outside gutter
          */
@@ -1874,20 +1876,23 @@ declare module "ace-code/src/mouse/mouse_handler" {
         startSelect?: (pos?: import("ace-code").Ace.Point, waitForClickSelection?: boolean) => void;
         select?: () => void;
         selectEnd?: () => void;
+        tooltip?: import("ace-code").Ace.GutterTooltip;
     }
     export type Editor = import("ace-code/src/editor").Editor;
     import { MouseEvent } from "ace-code/src/mouse/mouse_event";
     namespace Ace {
         type Range = import("ace-code").Ace.Range;
         type MouseEvent = import("ace-code").Ace.MouseEvent;
         type Point = import("ace-code").Ace.Point;
+        type GutterTooltip = import("ace-code").Ace.GutterTooltip;
     }
     export interface MouseHandler {
         cancelDrag?: boolean;
         mousedownEvent?: Ace.MouseEvent;
         startSelect?: (pos?: Ace.Point, waitForClickSelection?: boolean) => void;
         select?: () => void;
         selectEnd?: () => void;
+        tooltip?: Ace.GutterTooltip;
     }
 }
 declare module "ace-code/src/mouse/fold_handler" {