fix: regression in setting breakpoints on folded lines

Author: nightwing

src/layer/gutter.js

@@ -316,8 +316,6 @@ class Gutter{
             className += decorations[row];
         if (this.$annotations[row] && row !== foldStart)
             className += this.$annotations[row].className;
-        if (element.className != className)
-            element.className = className;
 
         if (foldWidgets) {
             var c = foldWidgets[row];
@@ -327,10 +325,10 @@ class Gutter{
         }
 
         if (c) {
-            var className = "ace_fold-widget ace_" + c;
+            var foldClass = "ace_fold-widget ace_" + c;
             if (c == "start" && row == foldStart && row < fold.end.row){
-                className += " ace_closed";
-                var foldAnnotationClass;
+                foldClass += " ace_closed";
+                var foldAnnotationClass = '';
                 var annotationInFold = false;
 
                 for (var i = row + 1; i <= fold.end.row; i++){
@@ -349,12 +347,12 @@ class Gutter{
                     }
                 }
 
-                element.className += foldAnnotationClass;
+                className += foldAnnotationClass;
             }
             else
-                className += " ace_open";
-            if (foldWidget.className != className)
-                foldWidget.className = className;
+                foldClass += " ace_open";
+            if (foldWidget.className != foldClass)
+                foldWidget.className = foldClass;
 
             dom.setStyle(foldWidget.style, "height", lineHeight);
             dom.setStyle(foldWidget.style, "display", "inline-block");
@@ -418,6 +416,8 @@ class Gutter{
             textNode.data = rowText;
         } 
 
+        if (element.className != className)
+            element.className = className;
         dom.setStyle(cell.element.style, "height", this.$lines.computeLineHeight(row, config, session) + "px");
         dom.setStyle(cell.element.style, "top", this.$lines.computeLineTop(row, config, session) + "px");
 

src/virtual_renderer_test.js

@@ -25,6 +25,9 @@ module.exports = {
         require("./config").setLoader(function(moduleName, cb) {
             if (moduleName == "ace/ext/error_marker")
                 return cb(null, require("./ext/error_marker"));
+            if (moduleName == "ace/mode/javascript")
+                return cb(null, require("./mode/javascript"));
+            throw new Error("module not configured " + moduleName);
         });
 
         if (editor)
@@ -397,6 +400,26 @@ module.exports = {
             scrollDelta >= leftBoundPixelPos && scrollDelta < rightBoundPixelPos,
             "Expected content to have been scrolled two characters beyond the cursor"
         );
+    },
+    "test: set gutter class": function(done) {
+        editor.session.setMode("ace/mode/javascript", function() {
+            editor.session.setValue("x = {\n  foo: 1\n}");
+            editor.execCommand("toggleFoldWidget");
+            editor.renderer.$loop._flush();
+            assert.equal(editor.renderer.$loop.changes, 0);
+            var cell = editor.renderer.$gutterLayer.$lines.cells[0];
+            assert.equal(cell.element.children[0].className, "ace_fold-widget ace_start ace_closed");
+            assert.equal(cell.element.className.trim(), "ace_gutter-cell ace_gutter-active-line");
+
+            editor.session.setBreakpoint(0, "hello");
+            assert.notEqual(editor.renderer.$loop.changes, 0);
+            editor.renderer.$loop._flush();
+
+            cell = editor.renderer.$gutterLayer.$lines.cells[0];
+            assert.equal(editor.renderer.$loop.changes, 0);
+            assert.equal(cell.element.className, "ace_gutter-cell ace_gutter-active-line hello");
+            done()
+        });
     }
 
     // change tab size after setDocument (for text layer)