Title: [147415] trunk/Source/WebCore
Revision
147415
Author
commit-qu...@webkit.org
Date
2013-04-02 03:49:31 -0700 (Tue, 02 Apr 2013)

Log Message

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

Patch by Andrey Lushnikov <lushni...@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/_javascript_SourceFrame.js:
(WebInspector._javascript_SourceFrame):
(WebInspector._javascript_SourceFrame.prototype.willHide):
(WebInspector._javascript_SourceFrame.prototype._getPopoverAnchor):
(WebInspector._javascript_SourceFrame.prototype.):
(WebInspector._javascript_SourceFrame.prototype._resolveObjectForPopover):
(WebInspector._javascript_SourceFrame.prototype._onHidePopover):
* inspector/front-end/inspector.css:
(.popover-anchor):
(.source-frame-eval-_expression_):

Modified Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (147414 => 147415)


--- trunk/Source/WebCore/ChangeLog	2013-04-02 10:33:35 UTC (rev 147414)
+++ trunk/Source/WebCore/ChangeLog	2013-04-02 10:49:31 UTC (rev 147415)
@@ -1,3 +1,30 @@
+2013-04-02  Andrey Lushnikov  <lushni...@chromium.org>
+
+        Web Inspector: Separate _javascript_SourceFrame 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/_javascript_SourceFrame.js:
+        (WebInspector._javascript_SourceFrame):
+        (WebInspector._javascript_SourceFrame.prototype.willHide):
+        (WebInspector._javascript_SourceFrame.prototype._getPopoverAnchor):
+        (WebInspector._javascript_SourceFrame.prototype.):
+        (WebInspector._javascript_SourceFrame.prototype._resolveObjectForPopover):
+        (WebInspector._javascript_SourceFrame.prototype._onHidePopover):
+        * inspector/front-end/inspector.css:
+        (.popover-anchor):
+        (.source-frame-eval-_expression_):
+
 2013-04-02  Mihnea Ovidenie  <mih...@adobe.com>
 
         [CSSRegions] RenderFlowThread should not be created as a Document renderer

Modified: trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js (147414 => 147415)


--- trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js	2013-04-02 10:33:35 UTC (rev 147414)
+++ trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js	2013-04-02 10:49:31 UTC (rev 147415)
@@ -640,54 +640,6 @@
     },
 
     /**
-     * @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
      * @param {number} chunkSize

Modified: trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js (147414 => 147415)


--- trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js	2013-04-02 10:33:35 UTC (rev 147414)
+++ trunk/Source/WebCore/inspector/front-end/_javascript_SourceFrame.js	2013-04-02 10:49:31 UTC (rev 147415)
@@ -60,7 +60,7 @@
     this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.SourceMappingChanged, this._onSourceMappingChanged, this);
     this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyChanged, this._workingCopyChanged, this);
     this._uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, this._workingCopyCommitted, this);
-    
+
     this._updateScriptFile();
 }
 
@@ -221,51 +221,32 @@
             return null;
         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;
+        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;
 
-        // 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});
+        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);
 
-        // 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;
+        anchorBox.token = token;
+        anchorBox.lineNumber = lineNumber;
+
+        return anchorBox;
     },
 
-    _resolveObjectForPopover: function(element, showCallback, objectGroupName)
+    _resolveObjectForPopover: function(anchorBox, showCallback, objectGroupName)
     {
-        this._highlightElement = this._highlightExpression(element);
-
         /**
          * @param {?RuntimeAgent.RemoteObject} result
          * @param {boolean=} wasThrown
@@ -276,42 +257,41 @@
                 this._popoverHelper.hidePopover();
                 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_");
+            }
         }
 
         if (!WebInspector.debuggerModel.isPaused()) {
             this._popoverHelper.hidePopover();
             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)
+        if (!this._popoverAnchorBox)
             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;
+        if (this._popoverAnchorBox._highlightDescriptor)
+            this.textEditor.removeHighlight(this._popoverAnchorBox._highlightDescriptor);
+        delete this._popoverAnchorBox;
     },
 
     /**
-     * @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 });
-    },
-
-    /**
      * @param {number} lineNumber
      * @param {string} condition
      * @param {boolean} enabled

Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (147414 => 147415)


--- trunk/Source/WebCore/inspector/front-end/inspector.css	2013-04-02 10:33:35 UTC (rev 147414)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css	2013-04-02 10:49:31 UTC (rev 147415)
@@ -2329,8 +2329,7 @@
 }
 
 .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);
 }
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to