Changeset 147415 in webkit

Timestamp:

Apr 2, 2013 3:49:31 AM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: Separate JavaScriptSourceFrame popover from knowledge of editor's DOM
​https://bugs.webkit.org/show_bug.cgi?id=113412

Patch by Andrey Lushnikov <​lushnikov@chromium.org> on 2013-04-02
Reviewed by Pavel Feldman.

• Use TextEditor.coordinatesToCursorPosition,

TextEditor.cursorPositionToCoordinates and TextEditor.tokenAtTextPosition to figure out
hovering area and create popover anchor.

• Use TextEditor.highlightRange/TextEditor.removeHighlight methods to

highlight hovering text in editor.

No new tests: no change in behaviour.

• inspector/front-end/DefaultTextEditor.js:
• inspector/front-end/JavaScriptSourceFrame.js:

(WebInspector.JavaScriptSourceFrame):
(WebInspector.JavaScriptSourceFrame.prototype.willHide):
(WebInspector.JavaScriptSourceFrame.prototype._getPopoverAnchor):
(WebInspector.JavaScriptSourceFrame.prototype.):
(WebInspector.JavaScriptSourceFrame.prototype._resolveObjectForPopover):
(WebInspector.JavaScriptSourceFrame.prototype._onHidePopover):

• inspector/front-end/inspector.css:

(.popover-anchor):
(.source-frame-eval-expression):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/DefaultTextEditor.js (modified) (1 diff)
• inspector/front-end/JavaScriptSourceFrame.js (modified) (4 diffs)
• inspector/front-end/inspector.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-04-02  Andrey Lushnikov  <lushnikov@chromium.org>
+
+        Web Inspector: Separate JavaScriptSourceFrame popover from knowledge of editor's DOM
+        https://bugs.webkit.org/show_bug.cgi?id=113412
+
+        Reviewed by Pavel Feldman.
+
+        - Use TextEditor.coordinatesToCursorPosition,
+        TextEditor.cursorPositionToCoordinates and TextEditor.tokenAtTextPosition to figure out
+        hovering area and create popover anchor.
+        - Use TextEditor.highlightRange/TextEditor.removeHighlight methods to
+        highlight hovering text in editor.
+
+        No new tests: no change in behaviour.
+
+        * inspector/front-end/DefaultTextEditor.js:
+        * inspector/front-end/JavaScriptSourceFrame.js:
+        (WebInspector.JavaScriptSourceFrame):
+        (WebInspector.JavaScriptSourceFrame.prototype.willHide):
+        (WebInspector.JavaScriptSourceFrame.prototype._getPopoverAnchor):
+        (WebInspector.JavaScriptSourceFrame.prototype.):
+        (WebInspector.JavaScriptSourceFrame.prototype._resolveObjectForPopover):
+        (WebInspector.JavaScriptSourceFrame.prototype._onHidePopover):
+        * inspector/front-end/inspector.css:
+        (.popover-anchor):
+        (.source-frame-eval-expression):
+
 2013-04-02  Mihnea Ovidenie  <mihnea@adobe.com>
 

trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js

@@ -641 +641 @@
 
     /**
-     * @param {Element} element
-     * @param {Object} skipClasses
-     * @param {Object} skipTokens
-     * @return {Element}
-     */
-    highlightExpression: function(element, skipClasses, skipTokens)
-    {
-        // Collect tokens belonging to evaluated expression.
-        var tokens = [element];
-        var token = element.previousSibling;
-        while (token && (skipClasses[token.className] || skipTokens[token.textContent.trim()])) {
-            tokens.push(token);
-            token = token.previousSibling;
-        }
-        tokens.reverse();
-
-        // Wrap them with highlight element.
-        this._mainPanel.beginDomUpdates();
-        var parentElement = element.parentElement;
-        var nextElement = element.nextSibling;
-        var container = document.createElement("span");
-        for (var i = 0; i < tokens.length; ++i)
-            container.appendChild(tokens[i]);
-        parentElement.insertBefore(container, nextElement);
-        this._mainPanel.endDomUpdates();
-        return container;
-    },
-
-    /**
-     * @param {Element} highlightElement
-     */
-    hideHighlightedExpression: function(highlightElement)
-    {
-        this._mainPanel.beginDomUpdates();
-        var parentElement = highlightElement.parentElement;
-        if (parentElement) {
-            var child = highlightElement.firstChild;
-            while (child) {
-                var nextSibling = child.nextSibling;
-                parentElement.insertBefore(child, highlightElement);
-                child = nextSibling;
-            }
-            parentElement.removeChild(highlightElement);
-        }
-        this._mainPanel.endDomUpdates();
-    },
-
-    /**
      * @param {number} scrollTop
      * @param {number} clientHeight

trunk/Source/WebCore/inspector/front-end/JavaScriptSourceFrame.js

@@ -61 +61 @@
     this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
-    
+
     this._updateScriptFile();
 }
@@ -222 +222 @@
         if (window.getSelection().type === "Range")
             return null;
-        var lineElement = element.enclosingNodeOrSelfWithClass("webkit-line-content");
-        if (!lineElement)
+
+        var textPosition = this.textEditor.coordinatesToCursorPosition(event.x, event.y);
+        if (!textPosition)
             return null;
 
-        if (element.hasStyleClass("webkit-javascript-ident"))
-            return element;
-
-        if (element.hasStyleClass("source-frame-token"))
-            return element;
-
-        // We are interested in identifiers and "this" keyword.
-        if (element.hasStyleClass("webkit-javascript-keyword"))
-            return element.textContent === "this" ? element : null;
-
-        if (element !== lineElement || lineElement.childElementCount)
+        var token = this.textEditor.tokenAtTextPosition(textPosition.startLine, textPosition.startColumn);
+        if (!token)
             return null;
-
-        // Handle non-highlighted case
-        // 1. Collect ranges of identifier suspects
-        var lineContent = lineElement.textContent;
-        var ranges = [];
-        var regex = new RegExp("[a-zA-Z_\$0-9]+", "g");
-        var match;
-        while (regex.lastIndex < lineContent.length && (match = regex.exec(lineContent)))
-            ranges.push({offset: match.index, length: regex.lastIndex - match.index});
-
-        // 2. 'highlight' them with artificial style to detect word boundaries
-        var changes = [];
-        this.textEditor.highlightRangesWithStyleClass(lineElement, ranges, "source-frame-token", changes);
-        var lineOffsetLeft = lineElement.totalOffsetLeft();
-        for (var child = lineElement.firstChild; child; child = child.nextSibling) {
-            if (child.nodeType !== Node.ELEMENT_NODE || !child.hasStyleClass("source-frame-token"))
-                continue;
-            if (event.x > lineOffsetLeft + child.offsetLeft && event.x < lineOffsetLeft + child.offsetLeft + child.offsetWidth) {
-                var text = child.textContent;
-                return (text === "this" || !WebInspector.SourceJavaScriptTokenizer.Keywords[text]) ? child : null;
-            }
-        }
-        return null;
-    },
-
-    _resolveObjectForPopover: function(element, showCallback, objectGroupName)
-    {
-        this._highlightElement = this._highlightExpression(element);
-
+        var lineNumber = textPosition.startLine;
+        var line = this.textEditor.line(lineNumber);
+        var tokenContent = line.substring(token.startColumn, token.endColumn + 1);
+        if (token.type !== "javascript-ident" && (token.type !== "javascript-keyword" || tokenContent !== "this"))
+            return null;
+
+        var leftCorner = this.textEditor.cursorPositionToCoordinates(lineNumber, token.startColumn);
+        var rightCorner = this.textEditor.cursorPositionToCoordinates(lineNumber, token.endColumn + 1);
+        var anchorBox = new AnchorBox(leftCorner.x, leftCorner.y, rightCorner.x - leftCorner.x, leftCorner.height);
+
+        anchorBox.token = token;
+        anchorBox.lineNumber = lineNumber;
+
+        return anchorBox;
+    },
+
+    _resolveObjectForPopover: function(anchorBox, showCallback, objectGroupName)
+    {
         /**
          * @param {?RuntimeAgent.RemoteObject} result
@@ -277 +258 @@
                 return;
             }
-            showCallback(WebInspector.RemoteObject.fromPayload(result), wasThrown, this._highlightElement);
+            this._popoverAnchorBox = anchorBox;
+            showCallback(WebInspector.RemoteObject.fromPayload(result), wasThrown, this._popoverAnchorBox);
             // Popover may have been removed by showCallback().
-            if (this._highlightElement)
-                this._highlightElement.addStyleClass("source-frame-eval-expression");
+            if (this._popoverAnchorBox) {
+                var highlightRange = new WebInspector.TextRange(anchorBox.lineNumber, startHighlight, anchorBox.lineNumber, endHighlight);
+                this._popoverAnchorBox._highlightDescriptor = this.textEditor.highlightRange(highlightRange, "source-frame-eval-expression");
+            }
         }
 
@@ -287 +271 @@
             return;
         }
+
+        var startHighlight = anchorBox.token.startColumn;
+        var endHighlight = anchorBox.token.endColumn;
+        var line = this.textEditor.line(anchorBox.lineNumber);
+        while (startHighlight > 1 && line.charAt(startHighlight - 1) === '.')
+            startHighlight = this.textEditor.tokenAtTextPosition(anchorBox.lineNumber, startHighlight - 2).startColumn;
+        var evaluationText = line.substring(startHighlight, endHighlight + 1);
+
         var selectedCallFrame = WebInspector.debuggerModel.selectedCallFrame();
-        selectedCallFrame.evaluate(this._highlightElement.textContent, objectGroupName, false, true, false, false, showObjectPopover.bind(this));
+        selectedCallFrame.evaluate(evaluationText, objectGroupName, false, true, false, false, showObjectPopover.bind(this));
     },
 
     _onHidePopover: function()
     {
-        // Replace higlight element with its contents inplace.
-        var highlightElement = this._highlightElement;
-        if (!highlightElement)
-            return;
-        // FIXME: the text editor should maintain highlight on its own. The check below is a workaround for
-        // the case when highlight element is detached from DOM by the TextEditor when re-building the DOM.
-        this.textEditor.hideHighlightedExpression(highlightElement);
-        delete this._highlightElement;
-    },
-
-    /**
-     * @param {Element} element
-     * @return {Element}
-     */
-    _highlightExpression: function(element)
-    {
-        return this.textEditor.highlightExpression(element, { "webkit-javascript-ident": true, "source-frame-token": true, "webkit-javascript-keyword": true }, { ".": true });
+        if (!this._popoverAnchorBox)
+            return;
+        if (this._popoverAnchorBox._highlightDescriptor)
+            this.textEditor.removeHighlight(this._popoverAnchorBox._highlightDescriptor);
+        delete this._popoverAnchorBox;
     },
 

trunk/Source/WebCore/inspector/front-end/inspector.css

@@ -2330 +2330 @@
 
 .source-frame-eval-expression {
-    border: 1px solid rgb(163, 41, 34);
-    margin: -1px;
+    outline: 1px solid rgb(163, 41, 34);
     background-color: rgb(255, 255, 194);
 }