Web Inspector: [ACE] add experimental breakpoint support
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 7 Mar 2013 10:41:25 +0000 (10:41 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 7 Mar 2013 10:41:25 +0000 (10:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=111573

Patch by Andrey Lushnikov <lushnikov@chromium.org> on 2013-03-07
Reviewed by Pavel Feldman.

No new tests.

- Implement attributes model for ace editor. Update attribute
locations by handling onTextChange event from editor.
- Implement breakpoints atop of attributes model.

* inspector/front-end/AceTextEditor.js:
(WebInspector.AceTextEditor):
(WebInspector.AceTextEditor.prototype._updateBreakpoints):
(WebInspector.AceTextEditor.prototype._updateLineAttributes):
(WebInspector.AceTextEditor.prototype._onTextChange):
(WebInspector.AceTextEditor.prototype.addBreakpoint):
(WebInspector.AceTextEditor.prototype.removeBreakpoint):
(WebInspector.AceTextEditor.prototype.getAttribute):
(WebInspector.AceTextEditor.prototype.setAttribute):
(WebInspector.AceTextEditor.prototype.removeAttribute):
* inspector/front-end/ace/acedevtools.css:
(.ace-editor-container):
(.ace_gutter-cell.webkit-breakpoint):
(.ace_gutter-cell.webkit-breakpoint-conditional):
(.ace_gutter-cell.webkit-breakpoint-disabled):
(.ace_gutter-cell):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@145058 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/AceTextEditor.js
Source/WebCore/inspector/front-end/ace/acedevtools.css

index 020bac8..bbebb17 100644 (file)
@@ -1,3 +1,33 @@
+2013-03-07  Andrey Lushnikov  <lushnikov@chromium.org>
+
+        Web Inspector: [ACE] add experimental breakpoint support
+        https://bugs.webkit.org/show_bug.cgi?id=111573
+
+        Reviewed by Pavel Feldman.
+
+        No new tests.
+
+        - Implement attributes model for ace editor. Update attribute
+        locations by handling onTextChange event from editor.
+        - Implement breakpoints atop of attributes model.
+
+        * inspector/front-end/AceTextEditor.js:
+        (WebInspector.AceTextEditor):
+        (WebInspector.AceTextEditor.prototype._updateBreakpoints):
+        (WebInspector.AceTextEditor.prototype._updateLineAttributes):
+        (WebInspector.AceTextEditor.prototype._onTextChange):
+        (WebInspector.AceTextEditor.prototype.addBreakpoint):
+        (WebInspector.AceTextEditor.prototype.removeBreakpoint):
+        (WebInspector.AceTextEditor.prototype.getAttribute):
+        (WebInspector.AceTextEditor.prototype.setAttribute):
+        (WebInspector.AceTextEditor.prototype.removeAttribute):
+        * inspector/front-end/ace/acedevtools.css:
+        (.ace-editor-container):
+        (.ace_gutter-cell.webkit-breakpoint):
+        (.ace_gutter-cell.webkit-breakpoint-conditional):
+        (.ace_gutter-cell.webkit-breakpoint-disabled):
+        (.ace_gutter-cell):
+
 2013-03-07  Antoine Quint  <graouts@apple.com>
 
         Web Inspector: identify layers for CSS generated content in LayerTreeAgent
index 1ef9bf3..21f81a1 100644 (file)
@@ -60,12 +60,58 @@ WebInspector.AceTextEditor = function(url, delegate)
     this._aceEditor.setHighlightActiveLine(false);
     this._aceEditor.session.setUseWorker(false);
     this.registerRequiredCSS("ace/acedevtools.css");
+    this._attributes = [];
 }
 
 WebInspector.AceTextEditor.prototype = {
 
+    _updateBreakpoints: function()
+    {
+        this._aceEditor.session.clearBreakpoints();
+        for(var i in this._attributes) {
+            var breakpoint = this.getAttribute(i, "ace_breakpoint");
+            if (!breakpoint)
+                continue;
+            var className = breakpoint.conditional ? "webkit-breakpoint-conditional" : "webkit-breakpoint";
+            if (breakpoint.disabled) className += " webkit-breakpoint-disabled";
+            this._aceEditor.session.setBreakpoint(i, className);
+        }
+    },
+
+    _updateLineAttributes: function(delta) {
+        var range = delta.range;
+        var length, insertionIndex;
+
+        if (range.end.row === range.start.row)
+            return;
+
+        if (delta.action === "insertText") {
+            length = range.end.row - range.start.row;
+            insertionIndex = range.start.column === 0 ? range.start.row: range.start.row + 1;
+        } else if (delta.action === "insertLines") {
+            length = range.end.row - range.start.row;
+            insertionIndex = range.start.row;
+        } else if (delta.action === "removeText") {
+            length = range.start.row - range.end.row;
+            insertionIndex = range.start.row;
+        } else if (delta.action === "removeLines") {
+            length = range.start.row - range.end.row;
+            insertionIndex = range.start.row;
+        }
+
+        if (length > 0) {
+            var spliceArguments = new Array(length);
+            spliceArguments.unshift(insertionIndex, 0);
+            Array.prototype.splice.apply(this._attributes, spliceArguments);
+        } else if (length < 0) {
+            this._attributes.splice(insertionIndex, -length);
+        }
+        this._updateBreakpoints();
+    },
+
     _onTextChange: function(event)
     {
+        this._updateLineAttributes(event.data);
         this._delegate.onTextChanged(null, null);
     },
 
@@ -163,7 +209,11 @@ WebInspector.AceTextEditor.prototype = {
      */
     addBreakpoint: function(lineNumber, disabled, conditional)
     {
-        this._aceEditor.getSession().setBreakpoint(lineNumber, "webkit-breakpoint");
+        this.setAttribute(lineNumber, "ace_breakpoint", {
+            disabled: disabled,
+            conditional: conditional
+        });
+        this._updateBreakpoints();
     },
 
     /**
@@ -171,7 +221,8 @@ WebInspector.AceTextEditor.prototype = {
      */
     removeBreakpoint: function(lineNumber)
     {
-        this._aceEditor.getSession().clearBreakpoint(lineNumber);
+        this.removeAttribute(lineNumber, "ace_breakpoint");
+        this._updateBreakpoints();
     },
 
     /**
@@ -346,21 +397,27 @@ WebInspector.AceTextEditor.prototype = {
     /**
      * @param {number} line
      * @param {string} name
-     * @param {Object?} value
+     * @return {Object|null} value
      */
-    setAttribute: function(line, name, value)
+    getAttribute: function(line, name)
     {
-        console.log("aceEditor.setAttribute not implemented");
+        var attrs = this._attributes[line];
+        return attrs ? attrs[name] : null;
     },
 
     /**
      * @param {number} line
      * @param {string} name
-     * @return {Object|null} value
+     * @param {Object?} value
      */
-    getAttribute: function(line, name)
+    setAttribute: function(line, name, value)
     {
-        console.log("aceEditor.getAttribute not implemented");
+        var attrs = this._attributes[line];
+        if (!attrs) {
+            attrs = {};
+            this._attributes[line] = attrs;
+        }
+        attrs[name] = value;
     },
 
     /**
@@ -369,7 +426,9 @@ WebInspector.AceTextEditor.prototype = {
      */
     removeAttribute: function(line, name)
     {
-        console.log("aceEditor.removeAttribute not implemented");
+        var attrs = this._attributes[line];
+        if (attrs)
+            delete attrs[name];
     },
 
     wasShown: function() { },
index 35f41b9..240f58b 100644 (file)
 
 .webkit-gutter-execution-line.webkit-breakpoint-conditional {
     -webkit-border-image: url(Images/breakpointConditionalCounterBorder.png) 0 10 0 2;
-}
\ No newline at end of file
+}
+
+.ace_gutter-cell.webkit-breakpoint {
+    color: white;
+    border-width: 0 10px 0px 2px;
+    -webkit-border-image: url(Images/breakpointBorder.png) 0 10 0 2;
+    padding-right: 0px !important;
+    padding-left: 4px !important;
+}
+
+.ace_gutter-cell.webkit-breakpoint-conditional {
+    color: transparent;
+    -webkit-border-image: url(Images/breakpointConditionalCounterBorder.png) 0 10 0 2;
+}
+
+.ace_gutter-cell.webkit-breakpoint-disabled {
+    opacity: 0.5;
+}
+
+.ace_gutter-cell {
+    padding-left: 6px !important;
+    padding-right: 10px !important;
+}
+