add support for rendering breakpoints

src/ace/Document.js

@@ -4,6 +4,7 @@ ace.Document = function(text, mode) {
     this.modified = true;
     this.lines = [];
     this.selection = new ace.Selection(this);
+    this.$breakpoints = [];
 
     this.listeners = [];
     if (mode) {
@@ -109,6 +110,20 @@ ace.Document = function(text, mode) {
         return this.$tabSize;
     };
 
+    this.getBreakpoints = function() {
+        return this.$breakpoints;
+    };
+
+    this.setBreakpoint = function(row) {
+        this.$breakpoints[row] = true;
+        this.$dispatchEvent("changeBreakpoint", {data: row});
+    };
+
+    this.clearBreakpoint = function(row) {
+        delete this.$breakpoints[row];
+        this.$dispatchEvent("changeBreakpoint", {data: row});
+    };
+
     this.$detectNewLine = function(text) {
         var match = text.match(/^.*?(\r?\n)/m);
         if (match) {

src/ace/Editor.js

@@ -68,6 +68,7 @@ ace.Editor = function(renderer, doc) {
             this.doc.removeEventListener("change", this.$onDocumentChange);
             this.doc.removeEventListener("changeMode", this.$onDocumentModeChange);
             this.doc.removeEventListener("changeTabSize", this.$onDocumentChangeTabSize);
+            this.doc.removeEventListener("changeBreakpoint", this.$onDocumentChangeBreakpoint);
 
             var selection = this.doc.getSelection();
             this.selection.removeEventListener("changeCursor", this.$onCursorChange);
@@ -88,6 +89,9 @@ ace.Editor = function(renderer, doc) {
         this.$onDocumentChangeTabSize = ace.bind(this.renderer.draw, this.renderer);
         doc.addEventListener("changeTabSize", this.$onDocumentChangeTabSize);
 
+        this.$onDocumentChangeBreakpoint = ace.bind(this.onDocumentChangeBreakpoint, this);
+        this.doc.addEventListener("changeBreakpoint", this.$onDocumentChangeBreakpoint);
+
         this.selection = doc.getSelection();
 
         this.$onCursorChange = ace.bind(this.onCursorChange, this);
@@ -103,6 +107,7 @@ ace.Editor = function(renderer, doc) {
         this.renderer.draw();
         this.onCursorChange();
         this.onSelectionChange();
+        this.onDocumentChangeBreakpoint();
         this.renderer.scrollToRow(doc.getScrollTopRow());
     };
 
@@ -209,6 +214,10 @@ ace.Editor = function(renderer, doc) {
         this.onCursorChange();
     };
 
+    this.onDocumentChangeBreakpoint = function() {
+        this.renderer.setBreakpoints(this.doc.getBreakpoints());
+    };
+
     this.onDocumentModeChange = function() {
         var mode = this.doc.getMode();
 

src/ace/VirtualRenderer.js

@@ -221,6 +221,7 @@ ace.VirtualRenderer = function(container) {
         this.$updateScrollBar();
     };
 
+
     this.addMarker = function(range, clazz, type) {
         range.start = this.$documentToScreenPosition(range.start);
         range.end = this.$documentToScreenPosition(range.end);
@@ -231,6 +232,10 @@ ace.VirtualRenderer = function(container) {
         this.$markerLayer.removeMarker(markerId);
     };
 
+    this.setBreakpoints = function(rows) {
+        this.$gutterLayer.setBreakpoints(rows);
+    };
+
     this.updateCursor = function(position, overwrite) {
         this.cursorLayer.setCursor(this.$documentToScreenPosition(position), overwrite);
         this.cursorLayer.update(this.layerConfig);

src/ace/layer/Gutter.js

@@ -4,15 +4,27 @@ ace.layer.Gutter = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "layer gutter-layer";
     parentEl.appendChild(this.element);
+
+    this.$breakpoints = [];
 };
 
 (function() {
 
+    this.setBreakpoints = function(rows) {
+        this.$breakpoints = rows.concat();
+
+        if (this.$config)
+            this.update(this.$config);
+    };
+
     this.update = function(config) {
+        this.$config = config;
+
         var html = [];
         for ( var i = config.firstRow; i <= config.lastRow; i++) {
-            html.push("<div class='gutter-cell' style='height:" + config.lineHeight
-                    + "px;'>", (i+1), "</div>");
+            html.push("<div class='gutter-cell",
+                this.$breakpoints[i] ? " breakpoint" : "",
+                "' style='height:", config.lineHeight, "px;'>", (i+1), "</div>");
             html.push("</div>");
         }