Web Inspector: do not set any textContent in overlay highlight spans
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jan 2013 14:10:36 +0000 (14:10 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jan 2013 14:10:36 +0000 (14:10 +0000)
https://bugs.webkit.org/show_bug.cgi?id=108460

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

Source/WebCore:

Do not set any text content for overlay highlight spans to implicitly
set its height. Instead, measure its height in the same manner as its
done for "width" and "left" and set it explicitly.

No new tests: no change in behaviour.

* inspector/front-end/DefaultTextEditor.js:
(WebInspector.TextEditorMainPanel.prototype._appendOverlayHighlight):
(WebInspector.TextEditorMainPanel.ElementMetrics):
* inspector/front-end/textEditor.css:
(.text-editor-token-highlight): Update highlight to correspond to
slightly different elements height.

LayoutTests:

Replace "height" pixel value with "<number>" to avoid difference in
test expectations on varioius platforms and correct test expectations.

* inspector/editor/editor-test.js:
(initialize_EditorTests.InspectorTest.dumpEditorHTML):
* inspector/editor/text-editor-highlight-api-expected.txt:
* inspector/editor/text-editor-highlight-token-expected.txt:

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

LayoutTests/ChangeLog
LayoutTests/inspector/editor/editor-test.js
LayoutTests/inspector/editor/text-editor-highlight-api-expected.txt
LayoutTests/inspector/editor/text-editor-highlight-token-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/DefaultTextEditor.js
Source/WebCore/inspector/front-end/textEditor.css

index 577672f..058a981 100644 (file)
@@ -1,3 +1,18 @@
+2013-01-31  Andrey Lushnikov  <lushnikov@chromium.org>
+
+        Web Inspector: do not set any textContent in overlay highlight spans
+        https://bugs.webkit.org/show_bug.cgi?id=108460
+
+        Reviewed by Pavel Feldman.
+
+        Replace "height" pixel value with "<number>" to avoid difference in
+        test expectations on varioius platforms and correct test expectations.
+
+        * inspector/editor/editor-test.js:
+        (initialize_EditorTests.InspectorTest.dumpEditorHTML):
+        * inspector/editor/text-editor-highlight-api-expected.txt:
+        * inspector/editor/text-editor-highlight-token-expected.txt:
+
 2013-01-31  Florin Malita  <fmalita@chromium.org>
 
         [Chromium] Unreviewed gardening.
index a499152..1523138 100644 (file)
@@ -73,6 +73,7 @@ InspectorTest.dumpEditorHTML = function(textEditor, mainPanelOnly)
 {
     var element = mainPanelOnly ? textEditor._mainPanel.element : textEditor.element;
     var dumpedHTML = element.innerHTML.replace(/<div/g, "\n<div");
+    var dumpedHTML = dumpedHTML.replace(/height: [0-9]+/g, "height: <number>");
     InspectorTest.addResult(dumpedHTML);
 };
 
index 0cbe8aa..b8fedf1 100644 (file)
@@ -18,11 +18,11 @@ Lines repainted: 2
 
 <div class="inner-container" tabindex="0">
 <div class="webkit-line-content">foo();</div>
-<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-css-class text-editor-overlay-highlight" style="left: -1px; width: 37px;"> </span><span class="some-css-class text-editor-overlay-highlight" style="left: 90px; width: 37px;"> </span></div>
+<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-css-class text-editor-overlay-highlight" style="left: -1px; width: 37px; height: <number>px;"></span><span class="some-css-class text-editor-overlay-highlight" style="left: 90px; width: 37px; height: <number>px;"></span></div>
 <div class="webkit-line-content">foo_</div>
 <div class="webkit-line-content">global_foo</div>
 <div class="webkit-line-content">global_foo2</div>
-<div class="webkit-line-content">some_other_foo_X<span class="some-css-class text-editor-overlay-highlight" style="left: 76px; width: 37px;"> </span></div></div>
+<div class="webkit-line-content">some_other_foo_X<span class="some-css-class text-editor-overlay-highlight" style="left: 76px; width: 37px; height: <number>px;"></span></div></div>
 
 Running: testHighlightRange
 
@@ -31,11 +31,11 @@ Lines repainted: 3
 
 <div class="inner-container" tabindex="0">
 <div class="webkit-line-content">foo();</div>
-<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-css-class text-editor-overlay-highlight" style="left: -1px; width: 37px;"> </span><span class="some-css-class text-editor-overlay-highlight" style="left: 90px; width: 37px;"> </span><span class="some-other-class text-editor-overlay-highlight" style="left: 90px; width: 37px;"> </span></div>
-<div class="webkit-line-content">foo_<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 30px;"> </span></div>
-<div class="webkit-line-content">global_foo<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 72px;"> </span></div>
+<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-css-class text-editor-overlay-highlight" style="left: -1px; width: 37px; height: <number>px;"></span><span class="some-css-class text-editor-overlay-highlight" style="left: 90px; width: 37px; height: <number>px;"></span><span class="some-other-class text-editor-overlay-highlight" style="left: 90px; width: 37px; height: <number>px;"></span></div>
+<div class="webkit-line-content">foo_<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 30px; height: <number>px;"></span></div>
+<div class="webkit-line-content">global_foo<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 72px; height: <number>px;"></span></div>
 <div class="webkit-line-content">global_foo2</div>
-<div class="webkit-line-content">some_other_foo_X<span class="some-css-class text-editor-overlay-highlight" style="left: 76px; width: 37px;"> </span></div></div>
+<div class="webkit-line-content">some_other_foo_X<span class="some-css-class text-editor-overlay-highlight" style="left: 76px; width: 37px; height: <number>px;"></span></div></div>
 
 Running: testRemoveRegexHighlight
 
@@ -44,9 +44,9 @@ Lines repainted: 2
 
 <div class="inner-container" tabindex="0">
 <div class="webkit-line-content">foo();</div>
-<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-other-class text-editor-overlay-highlight" style="left: 90px; width: 37px;"> </span></div>
-<div class="webkit-line-content">foo_<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 30px;"> </span></div>
-<div class="webkit-line-content">global_foo<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 72px;"> </span></div>
+<div class="webkit-line-content">foo_1; foor; foo_;<span class="some-other-class text-editor-overlay-highlight" style="left: 90px; width: 37px; height: <number>px;"></span></div>
+<div class="webkit-line-content">foo_<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 30px; height: <number>px;"></span></div>
+<div class="webkit-line-content">global_foo<span class="some-other-class text-editor-overlay-highlight" style="left: -1px; width: 72px; height: <number>px;"></span></div>
 <div class="webkit-line-content">global_foo2</div>
 <div class="webkit-line-content">some_other_foo_X</div></div>
 
index 8bed18e..172791d 100644 (file)
@@ -21,20 +21,20 @@ function findElement(collection, elem) {
 =========== 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">function findElement(collection, elem) {<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 146px; width: 72px; height: <number>px;"></span></div>
 <div class="webkit-line-content">        // length</div>
-<div class="webkit-line-content">        for(var i = 0; i <span class="webkit-html-tag">&lt;</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">        for(var i = 0; i <span class="webkit-html-tag">&lt;</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; height: <number>px;"></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; height: <number>px;"></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">function findElement(collection, elem) {<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 230px; width: 30px; height: <number>px;"></span></div>
 <div class="webkit-line-content">        // length</div>
 <div class="webkit-line-content">        for(var i = 0; i <span class="webkit-html-tag">&lt;</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-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; height: <number>px;"></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>
@@ -42,8 +42,8 @@ function findElement(collection, elem) {
 
 <div class="inner-container text-editor-editable" tabindex="0">
 <div class="webkit-line-content">function findElement(collection, elem) {</div>
-<div class="webkit-line-content">        // length<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 76px; width: 44px;"> </span></div>
-<div class="webkit-line-content">        for(var i = 0; i <span class="webkit-html-tag">&lt;</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: 265px; width: 44px;"> </span></div>
+<div class="webkit-line-content">        // length<span class="text-editor-token-highlight text-editor-overlay-highlight" style="left: 76px; width: 44px; height: <number>px;"></span></div>
+<div class="webkit-line-content">        for(var i = 0; i <span class="webkit-html-tag">&lt;</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: 265px; width: 44px; height: <number>px;"></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>
index bb4cae3..007aaa6 100644 (file)
@@ -1,3 +1,23 @@
+2013-01-31  Andrey Lushnikov  <lushnikov@chromium.org>
+
+        Web Inspector: do not set any textContent in overlay highlight spans
+        https://bugs.webkit.org/show_bug.cgi?id=108460
+
+        Reviewed by Pavel Feldman.
+
+        Do not set any text content for overlay highlight spans to implicitly
+        set its height. Instead, measure its height in the same manner as its
+        done for "width" and "left" and set it explicitly.
+
+        No new tests: no change in behaviour.
+
+        * inspector/front-end/DefaultTextEditor.js:
+        (WebInspector.TextEditorMainPanel.prototype._appendOverlayHighlight):
+        (WebInspector.TextEditorMainPanel.ElementMetrics):
+        * inspector/front-end/textEditor.css:
+        (.text-editor-token-highlight): Update highlight to correspond to
+        slightly different elements height.
+
 2013-01-31  Allan Sandfeld Jensen  <allan.jensen@digia.com>
 
         [Qt] Box shadows on a transparency layer is very slow
index 2b69903..b834cb4 100644 (file)
@@ -1933,7 +1933,7 @@ WebInspector.TextEditorMainPanel.prototype = {
             highlightSpan.addStyleClass(cssClass);
             highlightSpan.style.left = (metrics[i].left - extraWidth) + "px";
             highlightSpan.style.width = (metrics[i].width + extraWidth * 2) + "px";
-            highlightSpan.textContent = " ";
+            highlightSpan.style.height = metrics[i].height + "px";
             highlightSpan.addStyleClass("text-editor-overlay-highlight");
             lineRow.insertBefore(highlightSpan, lineRow.decorationsElement);
         }
@@ -2830,6 +2830,7 @@ WebInspector.TextEditorMainPanel.RangeHighlightDescriptor.prototype = {
 WebInspector.TextEditorMainPanel.ElementMetrics = function(element)
 {
     this.width = element.offsetWidth;
+    this.height = element.offsetHeight;
     this.left = element.offsetLeft;
 }
 
index 268a3e3..34745c7 100644 (file)
@@ -38,7 +38,8 @@
 }
 
 .text-editor-token-highlight {
-    outline: 1px solid gray;
+    border: 1px solid gray;
+    border-radius: 3px;
 }
 
 .text-editor-contents .inner-container {