Merge pull request #863 from ajaxorg/refactor_debugger

Refactor debugger

lib/ace/css/editor.css

@@ -237,6 +237,21 @@
     cursor: move;
 }
 
+.ace_gutter_tooltip {
+    background-color: #FFFFD5;
+    border: 1px solid gray;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+    color: black;
+    display: inline-block;
+    padding: 4px;
+    position: absolute;
+    z-index: 300;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    cursor: default;
+}
+
 .ace_folding-enabled > .ace_gutter-cell {
     padding-right: 13px;
 }

lib/ace/edit_session.js

@@ -72,6 +72,7 @@ var SearchHighlight = require("./search_highlight").SearchHighlight;
 var EditSession = function(text, mode) {
     this.$modified = true;
     this.$breakpoints = [];
+    this.$decorations = [];
     this.$frontMarkers = {};
     this.$backMarkers = {};
     this.$markerId = 1;
@@ -490,6 +491,32 @@ var EditSession = function(text, mode) {
         this.setOverwrite(!this.$overwrite);
     };
 
+    /**
+    * EditSession.addGutterDecoration(row, className) -> Void
+    * - row (Number): The row number
+    * - className (String): The class to add
+    *
+    * Adds `className` to the `row`, to be used for CSS stylings and whatnot.
+    **/
+    this.addGutterDecoration = function(row, className) {
+        if (!this.$decorations[row])
+            this.$decorations[row] = "";
+        this.$decorations[row] += " " + className;
+        this._emit("changeBreakpoint", {});
+    };
+
+    /**
+    * EditSession.removeGutterDecoration(row, className)-> Void
+    * - row (Number): The row number
+    * - className (String): The class to add
+    *
+    * Removes `className` from the `row`.
+    **/
+    this.removeGutterDecoration = function(row, className) {
+        this.$decorations[row] = (this.$decorations[row] || "").replace(" " + className, "");
+        this._emit("changeBreakpoint", {});
+    };
+    
     /**
     * EditSession.getBreakpoints() -> Array
     *
@@ -509,7 +536,7 @@ var EditSession = function(text, mode) {
     this.setBreakpoints = function(rows) {
         this.$breakpoints = [];
         for (var i=0; i<rows.length; i++) {
-            this.$breakpoints[rows[i]] = true;
+            this.$breakpoints[rows[i]] = "ace_breakpoint";
         }
         this._emit("changeBreakpoint", {});
     };
@@ -527,11 +554,17 @@ var EditSession = function(text, mode) {
     /**
     * EditSession.setBreakpoint(row)
     * - row (Number): A row index
+    * - className: class of the breakpoint
     *
     * Sets a breakpoint on the row number given by `rows`. This function also emites the `'changeBreakpoint'` event.
     **/
-    this.setBreakpoint = function(row) {
+    this.setBreakpoint = function(row, className) {
-        this.$breakpoints[row] = true;
+        if (className === undefined)
+            className = "ace_breakpoint";
+        if (className)
+            this.$breakpoints[row] = className;
+        else
+            delete this.$breakpoints[row];
         this._emit("changeBreakpoint", {});
     };
 

lib/ace/layer/gutter.js

@@ -52,9 +52,7 @@ var Gutter = function(parentEl) {
     
     this.gutterWidth = 0;
 
-    this.$breakpoints = [];
     this.$annotations = [];
-    this.$decorations = [];
 };
 
 (function() {
@@ -66,13 +64,15 @@ var Gutter = function(parentEl) {
     };
 
     this.addGutterDecoration = function(row, className){
-        if (!this.$decorations[row])
+        if (window.console)
-            this.$decorations[row] = "";
+            console.warn && console.warn("deprecated use session.addGutterDecoration");
-        this.$decorations[row] += " " + className;
+        this.session.addGutterDecoration(row, className);
     };
 
     this.removeGutterDecoration = function(row, className){
-        this.$decorations[row] = (this.$decorations[row] || "").replace(" " + className, "");
+        if (window.console)
+            console.warn && console.warn("deprecated use session.removeGutterDecoration");
+        this.session.removeGutterDecoration(row, className);
     };
 
     this.setAnnotations = function(annotations) {
@@ -103,9 +103,7 @@ var Gutter = function(parentEl) {
     };
 
     this.update = function(config) {
-        this.$config = config;
+        var emptyAnno = {className: ""};
-
-        var emptyAnno = {className: "", text: []};
         var html = [];
         var i = config.firstRow;
         var lastRow = config.lastRow;
@@ -113,6 +111,7 @@ var Gutter = function(parentEl) {
         var foldStart = fold ? fold.start.row : Infinity;
         var foldWidgets = this.$showFoldWidgets && this.session.foldWidgets;
         var breakpoints = this.session.$breakpoints;
+        var decorations = this.session.$decorations;
 
         while (true) {
             if(i > foldStart) {
@@ -124,12 +123,12 @@ var Gutter = function(parentEl) {
                 break;
 
             var annotation = this.$annotations[i] || emptyAnno;
-            html.push("<div class='ace_gutter-cell",
+            html.push(
-                this.$decorations[i] || "",
+                "<div class='ace_gutter-cell ",
-                breakpoints[i] ? " ace_breakpoint " : " ",
+                breakpoints[i] || "", decorations[i] || "", annotation.className,
-                annotation.className,
+                "' style='height:", this.session.getRowLength(i) * config.lineHeight, "px;'>", 
-                "' title='", annotation.text.join("\n"),
+                i + 1
-                "' style='height:", this.session.getRowLength(i) * config.lineHeight, "px;'>", (i));
+            );
 
             if (foldWidgets) {
                 var c = foldWidgets[i];

lib/ace/mouse/default_gutter_handler.js

@@ -39,14 +39,16 @@
 define(function(require, exports, module) {
 "use strict";
 var dom = require("../lib/dom");
+var event = require("../lib/event");
 
 function GutterHandler(mouseHandler) {
     var editor = mouseHandler.editor;
+    var gutter = editor.renderer.$gutterLayer;
 
     mouseHandler.editor.setDefaultHandler("guttermousedown", function(e) {
         if (!editor.isFocused())
             return;
-        var gutterRegion = editor.renderer.$gutterLayer.getRegion(e);
+        var gutterRegion = gutter.getRegion(e);
 
         if (gutterRegion)
             return;
@@ -62,6 +64,98 @@ function GutterHandler(mouseHandler) {
         mouseHandler.captureMouse(e, "selectByLines");
         return e.preventDefault();
     });
+
+
+    var tooltipTimeout, mouseEvent, tooltip, tooltipAnnotation;
+    function createTooltip() {
+        tooltip = dom.createElement("div");
+        tooltip.className = "ace_gutter_tooltip";
+        tooltip.style.maxWidth = "500px";
+        tooltip.style.display = "none";
+        editor.container.appendChild(tooltip);
+    }
+
+    function showTooltip() {
+        if (!tooltip) {
+            createTooltip();
+        }
+        var row = mouseEvent.getDocumentPosition().row;
+        var annotation = gutter.$annotations[row];
+        if (!annotation)
+            return hideTooltip();
+
+        var maxRow = editor.session.getLength();
+        if (row == maxRow) {
+            var screenRow = editor.renderer.pixelToScreenCoordinates(0, mouseEvent.y).row;
+            var pos = mouseEvent.$pos;
+            if (screenRow > editor.session.documentToScreenRow(pos.row, pos.column))
+                return hideTooltip();
+        }
+
+        if (tooltipAnnotation == annotation)
+            return;
+        tooltipAnnotation = annotation.text.join("\n");
+
+        tooltip.style.display = "block";
+        tooltip.innerHTML = tooltipAnnotation;
+        editor.on("mousewheel", hideTooltip);
+
+        moveTooltip(mouseEvent);
+    }
+
+    function hideTooltip() {
+        if (tooltipTimeout)
+            tooltipTimeout = clearTimeout(tooltipTimeout);
+        if (tooltipAnnotation) {
+            tooltip.style.display = "none";
+            tooltipAnnotation = null;
+            editor.removeEventListener("mousewheel", hideTooltip);
+        }
+    }
+
+    function moveTooltip(e) {
+        var rect = editor.renderer.$gutter.getBoundingClientRect();
+        tooltip.style.left = e.x - rect.left + 15 + "px";
+        if (e.y + 3 * editor.renderer.lineHeight + 15 < rect.bottom) {
+            tooltip.style.bottom =  "";
+            tooltip.style.top =  e.y - rect.top + 15 + "px";
+        } else {
+            tooltip.style.top =  "";
+            tooltip.style.bottom = rect.bottom - e.y + 5 + "px";
+        }
+    }
+
+    mouseHandler.editor.setDefaultHandler("guttermousemove", function(e) {
+        var target = e.domEvent.target || e.domEvent.srcElement;
+        if (dom.hasCssClass(target, "ace_fold-widget"))
+            return hideTooltip();
+
+        if (tooltipAnnotation)
+            moveTooltip(e);
+
+        mouseEvent = e;
+        if (tooltipTimeout)
+            return;
+        tooltipTimeout = setTimeout(function() {
+            tooltipTimeout = null;
+            if (mouseEvent)
+                showTooltip();
+            else
+                hideTooltip();
+        }, 50);
+    });
+
+    event.addListener(editor.renderer.$gutter, "mouseout", function(e) {
+        mouseEvent = null;
+        if (!tooltipAnnotation || tooltipTimeout)
+            return;
+
+        tooltipTimeout = setTimeout(function() {
+            tooltipTimeout = null;
+            hideTooltip();
+        }, 50);
+    });
+
 }
 
 exports.GutterHandler = GutterHandler;

lib/ace/mouse/mouse_handler.js

@@ -69,7 +69,7 @@ var MouseHandler = function(editor) {
     event.addListener(gutterEl, "mousedown", this.onMouseEvent.bind(this, "guttermousedown"));
     event.addListener(gutterEl, "click", this.onMouseEvent.bind(this, "gutterclick"));
     event.addListener(gutterEl, "dblclick", this.onMouseEvent.bind(this, "gutterdblclick"));
-    event.addListener(gutterEl, "mousemove", this.onMouseMove.bind(this, "gutter"));
+    event.addListener(gutterEl, "mousemove", this.onMouseEvent.bind(this, "guttermousemove"));
 };
 
 (function() {

lib/ace/virtual_renderer.js

@@ -890,26 +890,20 @@ var VirtualRenderer = function(container, theme) {
 
     /**
     * VirtualRenderer.addGutterDecoration(row, className) -> Void
-    * - row (Number): The row number
-    * - className (String): The class to add
     *
-    * Adds `className` to the `row`, to be used for CSS stylings and whatnot.
+    * Deprecated (moved to EditSession)
     **/
     this.addGutterDecoration = function(row, className){
         this.$gutterLayer.addGutterDecoration(row, className);
-        this.$loop.schedule(this.CHANGE_GUTTER);
     };
 
     /**
     * VirtualRenderer.removeGutterDecoration(row, className)-> Void
-    * - row (Number): The row number
-    * - className (String): The class to add
     *
-    * Removes `className` from the `row`.
+    * Deprecated (moved to EditSession)
     **/
     this.removeGutterDecoration = function(row, className){
         this.$gutterLayer.removeGutterDecoration(row, className);
-        this.$loop.schedule(this.CHANGE_GUTTER);
     };
 
     /**