highlight full gutter line for wrapped lines too

lib/ace/css/editor.css

@@ -27,12 +27,6 @@
     z-index: 4;
 }
 
-.ace_gutter_active_line {
-    position: absolute;
-    left: 0;
-    right: 0;
-}
-
 .ace_scroller.horscroll {
     box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;
 }

lib/ace/virtual_renderer.js

@@ -67,7 +67,7 @@ dom.importCssString(editorCss, "ace_editor");
 
 /**
  * new VirtualRenderer(container, theme)
- * - container (DOMElement): The root element of the editor 
+ * - container (DOMElement): The root element of the editor
  * - theme (String): The starting theme
  *
  * Constructs a new `VirtualRenderer` within the `container` specified, applying the given `theme`.
@@ -82,7 +82,7 @@ var VirtualRenderer = function(container, theme) {
     // TODO: this breaks rendering in Cloud9 with multiple ace instances
 //    // Imports CSS once per DOM document ('ace_editor' serves as an identifier).
 //    dom.importCssString(editorCss, "ace_editor", container.ownerDocument);
-    
+
     // in IE <= 9 the native cursor always shines through
     this.$keepTextAreaAtCursor = !useragent.isIE;
 
@@ -102,7 +102,6 @@ var VirtualRenderer = function(container, theme) {
     this.content.className = "ace_content";
     this.scroller.appendChild(this.content);
 
-    this.setHighlightGutterLine(true);
     this.$gutterLayer = new GutterLayer(this.$gutter);
     this.$gutterLayer.on("changeGutterWidth", this.onResize.bind(this, true));
     this.setFadeFoldWidgets(true);
@@ -449,31 +448,38 @@ var VirtualRenderer = function(container, theme) {
             dom.removeCssClass(this.$gutter, "ace_fade-fold-widgets");
     };
 
-    this.$highlightGutterLine = false;
+    this.$highlightGutterLine = true;
     this.setHighlightGutterLine = function(shouldHighlight) {
         if (this.$highlightGutterLine == shouldHighlight)
             return;
         this.$highlightGutterLine = shouldHighlight;
-        
-        
-        if (!this.$gutterLineHighlight) {
-            this.$gutterLineHighlight = dom.createElement("div");
-            this.$gutterLineHighlight.className = "ace_gutter_active_line";
-            this.$gutter.appendChild(this.$gutterLineHighlight);
-            return;
-        }
 
-        this.$gutterLineHighlight.style.display = shouldHighlight ? "" : "none";
+        this.$loop.schedule(this.CHANGE_GUTTER);
-        this.$updateGutterLineHighlight();
     };
 
     this.getHighlightGutterLine = function() {
         return this.$highlightGutterLine;
     };
 
-    this.$updateGutterLineHighlight = function() {
+    this.$updateGutterLineHighlight = function(gutterReady) {
-        this.$gutterLineHighlight.style.top = this.$cursorLayer.$pixelPos.top - this.layerConfig.offset + "px";
+        var i = this.session.selection.lead.row;
-        this.$gutterLineHighlight.style.height = this.layerConfig.lineHeight + "px";
+        if (i == this.$gutterLineHighlight)
+            return;
+
+        if (!gutterReady) {
+            var ch = this.$gutterLayer.element.children
+            var oldEl = ch[this.$gutterLineHighlight - this.layerConfig.firstRow];
+            if (oldEl)
+                dom.removeCssClass(oldEl, "ace_gutter_active_line");
+
+            var newEl = ch[i - this.layerConfig.firstRow];
+            if (newEl)
+                dom.addCssClass(newEl, "ace_gutter_active_line");
+        }
+
+        this.$gutterLayer.removeGutterDecoration(this.$gutterLineHighlight, "ace_gutter_active_line");
+        this.$gutterLayer.addGutterDecoration(i, "ace_gutter_active_line");
+        this.$gutterLineHighlight = i;
     };
     
     this.$updatePrintMargin = function() {
@@ -667,13 +673,15 @@ var VirtualRenderer = function(container, theme) {
             // update scrollbar first to not lose scroll position when gutter calls resize
             this.$updateScrollBar();
             this.$textLayer.update(this.layerConfig);
-            if (this.showGutter)
+            if (this.showGutter) {
+                if (this.$highlightGutterLine)
+                    this.$updateGutterLineHighlight(true);
                 this.$gutterLayer.update(this.layerConfig);
+            }
             this.$markerBack.update(this.layerConfig);
             this.$markerFront.update(this.layerConfig);
             this.$cursorLayer.update(this.layerConfig);
             this.$moveTextAreaToCursor();
-            this.$highlightGutterLine && this.$updateGutterLineHighlight();
             return;
         }
 
@@ -685,13 +693,15 @@ var VirtualRenderer = function(container, theme) {
             else
                 this.$textLayer.scrollLines(this.layerConfig);
 
-            if (this.showGutter)
+            if (this.showGutter) {
+                if (this.$highlightGutterLine)
+                    this.$updateGutterLineHighlight(true);
                 this.$gutterLayer.update(this.layerConfig);
+            }
             this.$markerBack.update(this.layerConfig);
             this.$markerFront.update(this.layerConfig);
             this.$cursorLayer.update(this.layerConfig);
             this.$moveTextAreaToCursor();
-            this.$highlightGutterLine && this.$updateGutterLineHighlight();
             return;
         }
 
@@ -714,7 +724,7 @@ var VirtualRenderer = function(container, theme) {
         if (changes & this.CHANGE_CURSOR) {
             this.$cursorLayer.update(this.layerConfig);
             this.$moveTextAreaToCursor();
-            this.$highlightGutterLine && this.$updateGutterLineHighlight();
+            this.$highlightGutterLine && this.$updateGutterLineHighlight(false);
         }
 
         if (changes & (this.CHANGE_MARKER | this.CHANGE_MARKER_FRONT)) {
@@ -1041,13 +1051,13 @@ var VirtualRenderer = function(container, theme) {
         return steps;
     };
 
-    /** 
+    /**
     * VirtualRenderer.scrollToLine(line, center, animate, callback) -> Void
     * - line (Number): A line number
     * - center (Boolean): If `true`, centers the editor the to indicated line
     * - animate (Boolean): If `true` animates scrolling
     * - callback (Function): Function to be called after the animation has finished
-    * 
+    *
     * Gracefully scrolls the editor to the row indicated.
     **/
     this.scrollToLine = function(line, center, animate, callback) {