- Revision
- 140828
- Author
- commit-qu...@webkit.org
- Date
- 2013-01-25 08:22:00 -0800 (Fri, 25 Jan 2013)
Log Message
Web Inspector: highlight occurences of word in DefaultTextEditor
https://bugs.webkit.org/show_bug.cgi?id=105523
Patch by Andrey Lushnikov <lushni...@chromium.org> on 2013-01-25
Reviewed by Pavel Feldman.
Source/WebCore:
Highlight occurrences of selected word in DefaultTextEditor by the means of new highlight regex API.
Test: inspector/editor/text-editor-highlight-token.html
* inspector/front-end/DefaultTextEditor.js:
(WebInspector.TextEditorMainPanel):
(WebInspector.TextEditorMainPanel.prototype._handleSelectionChange):
(WebInspector.TextEditorMainPanel.TokenHighlighter): Added.
(WebInspector.TextEditorMainPanel.TokenHighlighter.prototype.handleSelectionChange):
(WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._regexString):
(WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._highlight):
(WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._removeHighlight):
(WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._isWord):
* inspector/front-end/textEditor.css:
(.text-editor-token-highlight):
LayoutTests:
Add new test to verify token highlightning functionality.
* inspector/editor/editor-test.js:
(initialize_EditorTests.InspectorTest.createTestEditor): Added optional TextEditorDelegate argument.
* inspector/editor/text-editor-highlight-token-expected.txt: Added.
* inspector/editor/text-editor-highlight-token.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (140827 => 140828)
--- trunk/LayoutTests/ChangeLog 2013-01-25 15:56:27 UTC (rev 140827)
+++ trunk/LayoutTests/ChangeLog 2013-01-25 16:22:00 UTC (rev 140828)
@@ -1,3 +1,17 @@
+2013-01-25 Andrey Lushnikov <lushni...@chromium.org>
+
+ Web Inspector: highlight occurences of word in DefaultTextEditor
+ https://bugs.webkit.org/show_bug.cgi?id=105523
+
+ Reviewed by Pavel Feldman.
+
+ Add new test to verify token highlightning functionality.
+
+ * inspector/editor/editor-test.js:
+ (initialize_EditorTests.InspectorTest.createTestEditor): Added optional TextEditorDelegate argument.
+ * inspector/editor/text-editor-highlight-token-expected.txt: Added.
+ * inspector/editor/text-editor-highlight-token.html: Added.
+
2013-01-25 Zan Dobersek <zdober...@igalia.com>
Unreviewed GTK gardening.
Modified: trunk/LayoutTests/inspector/editor/editor-test.js (140827 => 140828)
--- trunk/LayoutTests/inspector/editor/editor-test.js 2013-01-25 15:56:27 UTC (rev 140827)
+++ trunk/LayoutTests/inspector/editor/editor-test.js 2013-01-25 16:22:00 UTC (rev 140828)
@@ -1,10 +1,10 @@
function initialize_EditorTests()
{
-InspectorTest.createTestEditor = function(clientHeight, chunkSize)
+InspectorTest.createTestEditor = function(clientHeight, chunkSize, textEditorDelegate)
{
WebInspector.debugDefaultTextEditor = true;
- var textEditor = new WebInspector.DefaultTextEditor("", new WebInspector.TextEditorDelegate());
+ var textEditor = new WebInspector.DefaultTextEditor("", textEditorDelegate || new WebInspector.TextEditorDelegate());
textEditor.overrideViewportForTest(0, clientHeight || 100, chunkSize || 10);
textEditor.show(WebInspector.inspectorView.element);
return textEditor;
Added: trunk/LayoutTests/inspector/editor/text-editor-highlight-token-expected.txt (0 => 140828)
--- trunk/LayoutTests/inspector/editor/text-editor-highlight-token-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/editor/text-editor-highlight-token-expected.txt 2013-01-25 16:22:00 UTC (rev 140828)
@@ -0,0 +1,37 @@
+This test checks text editor token highlight functionality.
+
+=========== TextEditor text ==========
+function findElement(collection, elem) {
+ for(var i = 0; i < collection.length; ++i)
+ if (collection[i] === elem)
+ return i;
+ return null;
+ }
+=========== Before selecting element ===========
+
+<div class="inner-container text-editor-editable" tabindex="0">
+<div class="webkit-line-content">function findElement(collection, elem) {</div>
+<div class="webkit-line-content"> for(var i = 0; i <span class="webkit-html-tag"><</span> <span class="webkit-html-tag">collection.length;</span> <span class="webkit-html-attribute-name">++i)</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-name">if</span> <span class="webkit-html-attribute-name">(collection</span>[<span class="webkit-html-attribute-name">i</span>] === <span class="webkit-html-attribute-value">elem)</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">i;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">null;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">}</span></div></div>
+=========== After selecting 'collection' ===========
+
+<div class="inner-container text-editor-editable" tabindex="0">
+<div class="webkit-line-content">function findElement(collection, elem) {<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 146px; width: 72px;"> </span></div>
+<div class="webkit-line-content"> for(var i = 0; i <span class="webkit-html-tag"><</span> <span class="webkit-html-tag">collection.length;</span> <span class="webkit-html-attribute-name">++i)</span><span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 188px; width: 72px;"> </span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-name">if</span> <span class="webkit-html-attribute-name">(collection</span>[<span class="webkit-html-attribute-name">i</span>] === <span class="webkit-html-attribute-value">elem)</span><span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 111px; width: 72px;"> </span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">i;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">null;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">}</span></div></div>
+=========== After selecting 'elem' ===========
+
+<div class="inner-container text-editor-editable" tabindex="0">
+<div class="webkit-line-content">function findElement(collection, elem) {<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 230px; width: 30px;"> </span></div>
+<div class="webkit-line-content"> for(var i = 0; i <span class="webkit-html-tag"><</span> <span class="webkit-html-tag">collection.length;</span> <span class="webkit-html-attribute-name">++i)</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-name">if</span> <span class="webkit-html-attribute-name">(collection</span>[<span class="webkit-html-attribute-name">i</span>] === <span class="webkit-html-attribute-value">elem)</span><span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 237px; width: 30px;"> </span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">i;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">return</span> <span class="webkit-html-attribute-value">null;</span></div>
+<div class="webkit-line-content"> <span class="webkit-html-attribute-value">}</span></div></div>
+
Added: trunk/LayoutTests/inspector/editor/text-editor-highlight-token.html (0 => 140828)
--- trunk/LayoutTests/inspector/editor/text-editor-highlight-token.html (rev 0)
+++ trunk/LayoutTests/inspector/editor/text-editor-highlight-token.html 2013-01-25 16:22:00 UTC (rev 140828)
@@ -0,0 +1,64 @@
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+function test()
+{
+ function findElement(collection, elem) {
+ for(var i = 0; i < collection.length; ++i)
+ if (collection[i] === elem)
+ return i;
+ return null;
+ }
+
+ var steps = [step2, step1]; // reversed order
+ function selectionChangeListener()
+ {
+ if (steps.length)
+ steps.pop().call();
+ }
+
+ var textEditorDelegate = new WebInspector.TextEditorDelegate();
+ textEditorDelegate.selectionChanged = selectionChangeListener;
+
+ var textEditor = InspectorTest.createTestEditor(undefined, undefined, textEditorDelegate);
+ textEditor.setReadOnly(false);
+ textEditor.setText(findElement.toString());
+ textEditor.element.focus();
+
+ InspectorTest.addResult("=========== TextEditor text ==========");
+ InspectorTest.addResult(textEditor.text());
+
+ InspectorTest.addResult("=========== Before selecting element ===========");
+ InspectorTest.dumpEditorHTML(textEditor, true);
+
+ var range = new WebInspector.TextRange(0, 21, 0, 31);
+ textEditor.setSelection(range);
+
+ function step1()
+ {
+ InspectorTest.addResult("=========== After selecting '" + textEditor._textModel.copyRange(range) + "' ===========");
+ InspectorTest.dumpEditorHTML(textEditor, true);
+ range = new WebInspector.TextRange(0, 33, 0, 37);
+ textEditor.setSelection(range);
+ }
+
+ function step2()
+ {
+ InspectorTest.addResult("=========== After selecting '" + textEditor._textModel.copyRange(range) + "' ===========");
+ InspectorTest.dumpEditorHTML(textEditor, true);
+ InspectorTest.completeTest();
+ }
+
+}
+
+</script>
+</head>
+
+<body _onload_="runTest();">
+<p>
+This test checks text editor token highlight functionality.
+</p>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (140827 => 140828)
--- trunk/Source/WebCore/ChangeLog 2013-01-25 15:56:27 UTC (rev 140827)
+++ trunk/Source/WebCore/ChangeLog 2013-01-25 16:22:00 UTC (rev 140828)
@@ -1,3 +1,26 @@
+2013-01-25 Andrey Lushnikov <lushni...@chromium.org>
+
+ Web Inspector: highlight occurences of word in DefaultTextEditor
+ https://bugs.webkit.org/show_bug.cgi?id=105523
+
+ Reviewed by Pavel Feldman.
+
+ Highlight occurrences of selected word in DefaultTextEditor by the means of new highlight regex API.
+
+ Test: inspector/editor/text-editor-highlight-token.html
+
+ * inspector/front-end/DefaultTextEditor.js:
+ (WebInspector.TextEditorMainPanel):
+ (WebInspector.TextEditorMainPanel.prototype._handleSelectionChange):
+ (WebInspector.TextEditorMainPanel.TokenHighlighter): Added.
+ (WebInspector.TextEditorMainPanel.TokenHighlighter.prototype.handleSelectionChange):
+ (WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._regexString):
+ (WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._highlight):
+ (WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._removeHighlight):
+ (WebInspector.TextEditorMainPanel.TokenHighlighter.prototype._isWord):
+ * inspector/front-end/textEditor.css:
+ (.text-editor-token-highlight):
+
2013-01-25 Alexander Paschenko <alexander.pashe...@lge.com>
[TexMap] Flickering after transitions on Apple HTML5 demo
Modified: trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js (140827 => 140828)
--- trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js 2013-01-25 15:56:27 UTC (rev 140827)
+++ trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js 2013-01-25 16:22:00 UTC (rev 140828)
@@ -1362,6 +1362,8 @@
this._highlightRegexs = {};
+ this._tokenHighlighter = new WebInspector.TextEditorMainPanel.TokenHighlighter(this, textModel);
+
this._freeCachedElements();
this.buildChunks();
}
@@ -2622,6 +2624,8 @@
var textRange = this.selection();
if (textRange)
this._lastSelection = textRange;
+
+ this._tokenHighlighter.handleSelectionChange(textRange);
this._delegate.selectionChanged(textRange);
},
@@ -2944,4 +2948,92 @@
}
}
+/**
+ * @constructor
+ * @param {WebInspector.TextEditorMainPanel} mainPanel
+ * @param {WebInspector.TextEditorModel} textModel
+ */
+WebInspector.TextEditorMainPanel.TokenHighlighter = function(mainPanel, textModel)
+{
+ this._mainPanel = mainPanel;
+ this._textModel = textModel;
+}
+
+WebInspector.TextEditorMainPanel.TokenHighlighter._NonWordCharRegex = /[^a-zA-Z0-9_]/;
+WebInspector.TextEditorMainPanel.TokenHighlighter._WordRegex = /^[a-zA-Z0-9_]+$/;
+
+WebInspector.TextEditorMainPanel.TokenHighlighter.prototype = {
+ /**
+ * @param {WebInspector.TextRange} range
+ */
+ handleSelectionChange: function(range)
+ {
+ if (!range) {
+ this._removeHighlight();
+ return;
+ }
+
+ if (range.startLine !== range.endLine) {
+ this._removeHighlight();
+ return;
+ }
+
+ range = range.normalize();
+ var selectedText = this._textModel.copyRange(range);
+ if (selectedText === this._selectedWord)
+ return;
+
+ if (selectedText === "") {
+ this._removeHighlight();
+ return;
+ }
+
+ if (this._isWord(range, selectedText))
+ this._highlight(selectedText);
+ else
+ this._removeHighlight();
+ },
+
+ /**
+ * @param {string} word
+ */
+ _regexString: function(word)
+ {
+ return "\\b" + word + "\\b";
+ },
+
+ /**
+ * @param {string} selectedWord
+ */
+ _highlight: function(selectedWord)
+ {
+ this._removeHighlight();
+ this._selectedWord = selectedWord;
+ this._mainPanel.highlightRegex(this._regexString(selectedWord), "text-editor-token-highlight")
+ },
+
+ _removeHighlight: function()
+ {
+ if (this._selectedWord) {
+ this._mainPanel.removeRegexHighlight(this._regexString(this._selectedWord));
+ delete this._selectedWord;
+ }
+ },
+
+ /**
+ * @param {WebInspector.TextRange} range
+ * @param {string} selectedText
+ * @return {boolean}
+ */
+ _isWord: function(range, selectedText)
+ {
+ const NonWordChar = WebInspector.TextEditorMainPanel.TokenHighlighter._NonWordCharRegex;
+ const WordRegex = WebInspector.TextEditorMainPanel.TokenHighlighter._WordRegex;
+ var line = this._textModel.line(range.startLine);
+ var leftBound = range.startColumn === 0 || NonWordChar.test(line.charAt(range.startColumn - 1));
+ var rightBound = range.endColumn === line.length - 1 || NonWordChar.test(line.charAt(range.endColumn));
+ return leftBound && rightBound && WordRegex.test(selectedText);
+ }
+}
+
WebInspector.debugDefaultTextEditor = false;
Modified: trunk/Source/WebCore/inspector/front-end/textEditor.css (140827 => 140828)
--- trunk/Source/WebCore/inspector/front-end/textEditor.css 2013-01-25 15:56:27 UTC (rev 140827)
+++ trunk/Source/WebCore/inspector/front-end/textEditor.css 2013-01-25 16:22:00 UTC (rev 140828)
@@ -37,6 +37,11 @@
z-index: -1;
}
+.text-editor-token-highlight {
+ -webkit-border-radius: 3px;
+ border: 1px solid gray;
+}
+
.text-editor-contents .inner-container {
position: absolute;
top: 0;
