add internal gutter cursor marker feature for cloud-editor themes

src/layer/gutter.js

@@ -15,6 +15,7 @@ class Gutter{
      * @param {HTMLElement} parentEl
      */
     constructor(parentEl) {
+        this.$showCursorMarker = null;
         this.element = dom.createElement("div");
         this.element.className = "ace_layer ace_gutter-layer";
         parentEl.appendChild(this.element);
@@ -172,6 +173,9 @@ class Gutter{
 
         this._signal("afterRender");
         this.$updateGutterWidth(config);
+
+        if (this.$showCursorMarker)
+            this.$updateCursorMarker();
     }
 
     /**
@@ -214,6 +218,9 @@ class Gutter{
     }
 
     updateLineHighlight() {
+        if (this.$showCursorMarker)
+            this.$updateCursorMarker();
+
         if (!this.$highlightGutterLine)
             return;
         var row = this.session.selection.cursor.row;
@@ -242,6 +249,28 @@ class Gutter{
         }
     }
 
+    $updateCursorMarker() {
+        if (!this.session)
+            return;
+        var session = this.session;
+        if (!this.$highlightElement) {
+            this.$highlightElement = dom.createElement("div");
+            this.$highlightElement.className = "ace_gutter-cursor";
+            this.element.appendChild(this.$highlightElement);
+        }
+        var pos = session.selection.cursor;
+        var config = this.config;
+        var lines = this.$lines;
+
+        var screenTop = config.firstRowScreen * config.lineHeight;
+        var screenPage = Math.floor(screenTop / lines.canvasHeight);
+        var lineTop = session.documentToScreenRow(pos) * config.lineHeight;
+        var top = lineTop - (screenPage * lines.canvasHeight);
+
+        dom.setStyle(this.$highlightElement.style, "height", config.lineHeight + "px");
+        dom.setStyle(this.$highlightElement.style, "top", top + "px");
+    }
+
     /**
      * @param {LayerConfig} config
      */

src/theme/cloud_editor-css.js

@@ -46,21 +46,16 @@ module.exports = `
     border: 1px solid #697077;
 }
 
-.ace-cloud_editor .ace_gutter-active-line::before,
+.ace-cloud_editor .ace_gutter-cursor,
 .ace-cloud_editor .ace_marker-layer .ace_active-line {
     box-sizing: border-box;
     border-top: 1px solid #9191ac;
     border-bottom: 1px solid #9191ac;
 }
 
-.ace-cloud_editor .ace_gutter-active-line::before {
-    content: "";
+.ace-cloud_editor .ace_gutter-cursor {
     position: absolute;
-    height: 100%;
     width: 100%;
-    left: 0;
-    z-index: 1;
-    pointer-events: none;
 }
 
 .ace-cloud_editor .ace_marker-layer .ace_selected-word {

src/theme/cloud_editor.js

@@ -1,6 +1,8 @@
 exports.isDark = false;
 exports.cssClass = "ace-cloud_editor";
 exports.cssText = require("./cloud_editor-css");
+/**@internal */
+exports.$showGutterCursorMarker = true;
 
 var dom = require("../lib/dom");
 dom.importCssString(exports.cssText, exports.cssClass, false);

src/theme/cloud_editor_dark-css.js

@@ -46,21 +46,16 @@ module.exports = `
     border: 1px solid #e8e8e8;
 }
 
-.ace-cloud_editor_dark .ace_gutter-active-line::before,
+.ace-cloud_editor_dark .ace_gutter-cursor,
 .ace-cloud_editor_dark .ace_marker-layer .ace_active-line {
     box-sizing: border-box;
     border-top: 1px solid #75777a;
     border-bottom: 1px solid #75777a;
 }
 
-.ace-cloud_editor_dark .ace_gutter-active-line::before {
-    content: "";
+.ace-cloud_editor_dark .ace_gutter-cursor {
     position: absolute;
-    height: 100%;
     width: 100%;
-    left: 0;
-    z-index: 1;
-    pointer-events: none;
 }
 
 .ace-cloud_editor_dark .ace_marker-layer .ace_selected-word {

src/theme/cloud_editor_dark.js

@@ -1,6 +1,8 @@
 exports.isDark = true;
 exports.cssClass = "ace-cloud_editor_dark";
 exports.cssText = require("./cloud_editor_dark-css");
+/**@internal */
+exports.$showGutterCursorMarker = true;
 
 var dom = require("../lib/dom");
 dom.importCssString(exports.cssText, exports.cssClass, false);

src/virtual_renderer.js

@@ -2013,6 +2013,15 @@ class VirtualRenderer {
             if (_self.$padding && padding != _self.$padding)
                 _self.setPadding(padding);
 
+            if (_self.$gutterLayer) {
+                var showGutterCursor = module["$showGutterCursorMarker"];
+                if (showGutterCursor && !_self.$gutterLayer.$showCursorMarker) {
+                    _self.$gutterLayer.$showCursorMarker = "theme";
+                } else if (!showGutterCursor && _self.$gutterLayer.$showCursorMarker == "theme") {
+                    _self.$gutterLayer.$showCursorMarker = null;
+                }
+            }
+
             // this is kept only for backwards compatibility
             _self.$theme = module.cssClass;