Changeset 145370 in webkit

Timestamp:

Mar 11, 2013 8:59:24 AM (11 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: [CodeMirror] add token highlight feature
​https://bugs.webkit.org/show_bug.cgi?id=112009

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

Handle CodeMirror's "cursorActivity" event, check selection for being
a word and highlight all its occurrences via CodeMirror.addOverlay method.

No new tests.

• inspector/front-end/CodeMirrorTextEditor.js:

(WebInspector.CodeMirrorTextEditor):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._cursorChange):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._isWord):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._removeHighlight):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._addHighlight.nextToken):
(WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._addHighlight):

• inspector/front-end/cm/cmdevtools.css:

(.cm-token-highlight):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/CodeMirrorTextEditor.js (modified) (2 diffs)
• inspector/front-end/cm/cmdevtools.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-03-11  Andrey Lushnikov  <lushnikov@chromium.org>
+
+        Web Inspector: [CodeMirror] add token highlight feature
+        https://bugs.webkit.org/show_bug.cgi?id=112009
+
+        Reviewed by Pavel Feldman.
+
+        Handle CodeMirror's "cursorActivity" event, check selection for being
+        a word and highlight all its occurrences via CodeMirror.addOverlay method.
+
+        No new tests.
+
+        * inspector/front-end/CodeMirrorTextEditor.js:
+        (WebInspector.CodeMirrorTextEditor):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._cursorChange):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._isWord):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._removeHighlight):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._addHighlight.nextToken):
+        (WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype._addHighlight):
+        * inspector/front-end/cm/cmdevtools.css:
+        (.cm-token-highlight):
+
 2013-03-11  Andrey Lushnikov  <lushnikov@chromium.org>
 

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

@@ -65 +65 @@
     }
 
+    this._tokenHighlighter = new WebInspector.CodeMirrorTextEditor.TokenHighlighter(this._codeMirror);
+
     this._codeMirror.on("change", this._change.bind(this));
     this._codeMirror.on("gutterClick", this._gutterClick.bind(this));
@@ -418 +420 @@
     __proto__: WebInspector.View.prototype
 }
+
+WebInspector.CodeMirrorTextEditor.TokenHighlighter = function(codeMirror)
+{
+    this._codeMirror = codeMirror;
+    this._codeMirror.on("cursorActivity", this._cursorChange.bind(this));
+}
+
+WebInspector.CodeMirrorTextEditor.TokenHighlighter.prototype = {
+    _cursorChange: function()
+    {
+        this._codeMirror.operation(this._removeHighlight.bind(this));
+        var selectionStart = this._codeMirror.getCursor("start");
+        var selectionEnd = this._codeMirror.getCursor("end");
+        if (selectionStart.line !== selectionEnd.line)
+            return;
+        if (selectionStart.ch === selectionEnd.ch)
+            return;
+
+        var selectedText = this._codeMirror.getSelection();
+        if (this._isWord(selectedText, selectionStart.line, selectionStart.ch, selectionEnd.ch))
+            this._codeMirror.operation(this._addHighlight.bind(this, selectedText));
+    },
+
+    _isWord: function(selectedText, lineNumber, startColumn, endColumn)
+    {
+        var line = this._codeMirror.getLine(lineNumber);
+        var leftBound = startColumn === 0 || !WebInspector.TextUtils.isWordChar(line.charAt(startColumn - 1));
+        var rightBound = endColumn === line.length || !WebInspector.TextUtils.isWordChar(line.charAt(endColumn));
+        return leftBound && rightBound && WebInspector.TextUtils.isWord(selectedText);
+    },
+
+    _removeHighlight: function()
+    {
+        if (this._overlayMode) {
+            this._codeMirror.removeOverlay(this._overlayMode);
+            delete this._overlayMode;
+        }
+    },
+
+    _addHighlight: function(token)
+    {
+        const tokenFirstChar = token.charAt(0);
+        function nextToken(stream)
+        {
+            if (stream.match(token))
+                return "token-highlight";
+            stream.next();
+            if (!stream.skipTo(tokenFirstChar))
+                stream.skipToEnd();
+        }
+
+        this._overlayMode = {
+            token: nextToken
+        };
+        this._codeMirror.addOverlay(this._overlayMode);
+    }
+}

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

@@ -38 +38 @@
     background-color: rgb(171, 191, 254) !important;
     outline: 1px solid rgb(64, 115, 244);
+}
+
+.cm-token-highlight {
+    border: 1px solid gray;
+    border-radius: 3px;
+    margin: -1px;
 }