Web Inspector: DOM Tree search highlights are not appearing
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 11 Sep 2014 18:35:36 +0000 (18:35 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 11 Sep 2014 18:35:36 +0000 (18:35 +0000)
https://bugs.webkit.org/show_bug.cgi?id=136662

Reviewed by Timothy Hatcher.

When performing a search within the DOMTreeContentView all
search results should immediately highlight. When moving
between search results, emphasize the current with a bouncy.
Remember to remove the highlights when the search is changed
or cleared.

* UserInterface/Views/DOMTreeContentView.js:
(WebInspector.DOMTreeContentView.prototype.performSearch.searchResultsReady):
(WebInspector.DOMTreeContentView.prototype.searchCleared):
Shor or hide highlights when searches change.

(WebInspector.DOMTreeContentView.prototype.revealResult):
(WebInspector.DOMTreeContentView.prototype._revealSearchResult):
Emphasize the highlight when moving to a new current result.

(WebInspector.DOMTreeContentView.prototype._showSearchHighlights):
(WebInspector.DOMTreeContentView.prototype._hideSearchHighlights):
On each affected DOMTreeElement show or hide search highlights.

* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight.animationEnded):
(WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight):
Give a brief bouncy-highlight when told to emphasize the search highlight.

(WebInspector.DOMTreeElement.prototype.updateTitle):
Remove unused and unnecessary style class on each row.

(WebInspector.DOMTreeElement.prototype._highlightSearchResults):
Update the stale code to use new function names and accessors.

* UserInterface/Views/DOMTreeOutline.css:
(.dom-tree-outline .search-highlight):
Styles for the search highlight match search highlights in the sidebar.

* UserInterface/Views/Main.css:
(.bouncy-highlight):
* UserInterface/Views/TextEditor.css:
Move bouncy-highlight to Main.css.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/TextEditor.css

index f220dbd..b2e5e0f 100644 (file)
@@ -1,3 +1,49 @@
+2014-09-11  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: DOM Tree search highlights are not appearing
+        https://bugs.webkit.org/show_bug.cgi?id=136662
+
+        Reviewed by Timothy Hatcher.
+
+        When performing a search within the DOMTreeContentView all
+        search results should immediately highlight. When moving
+        between search results, emphasize the current with a bouncy.
+        Remember to remove the highlights when the search is changed
+        or cleared.
+
+        * UserInterface/Views/DOMTreeContentView.js:
+        (WebInspector.DOMTreeContentView.prototype.performSearch.searchResultsReady):
+        (WebInspector.DOMTreeContentView.prototype.searchCleared):
+        Shor or hide highlights when searches change.
+
+        (WebInspector.DOMTreeContentView.prototype.revealResult):
+        (WebInspector.DOMTreeContentView.prototype._revealSearchResult):
+        Emphasize the highlight when moving to a new current result.
+
+        (WebInspector.DOMTreeContentView.prototype._showSearchHighlights):
+        (WebInspector.DOMTreeContentView.prototype._hideSearchHighlights):
+        On each affected DOMTreeElement show or hide search highlights.
+
+        * UserInterface/Views/DOMTreeElement.js:
+        (WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight.animationEnded):
+        (WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight):
+        Give a brief bouncy-highlight when told to emphasize the search highlight.
+
+        (WebInspector.DOMTreeElement.prototype.updateTitle):
+        Remove unused and unnecessary style class on each row.
+
+        (WebInspector.DOMTreeElement.prototype._highlightSearchResults):
+        Update the stale code to use new function names and accessors.
+
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.dom-tree-outline .search-highlight):
+        Styles for the search highlight match search highlights in the sidebar.
+
+        * UserInterface/Views/Main.css:
+        (.bouncy-highlight):
+        * UserInterface/Views/TextEditor.css:
+        Move bouncy-highlight to Main.css.
+
 2014-09-10  Saam Barati  <saambarati1@gmail.com>
 
         Web Inspector: Modify the type profiler runtime protocol to transfer some computation into the WebInspector
index 0617c73..828c2b8 100644 (file)
@@ -200,8 +200,10 @@ WebInspector.DOMTreeContentView.prototype = {
         if (this._searchQuery === query)
             return;
 
-        if (this._searchIdentifier)
+        if (this._searchIdentifier) {
             DOMAgent.discardSearchResults(this._searchIdentifier);
+            this._hideSearchHighlights();
+        }
 
         this._searchQuery = query;
         this._searchIdentifier = null;
@@ -218,6 +220,8 @@ WebInspector.DOMTreeContentView.prototype = {
 
             this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
 
+            this._showSearchHighlights();
+
             if (this._automaticallyRevealFirstSearchResult)
                 this.revealNextSearchResult();
         }
@@ -239,8 +243,10 @@ WebInspector.DOMTreeContentView.prototype = {
 
     searchCleared: function()
     {
-        if (this._searchIdentifier)
+        if (this._searchIdentifier) {
             DOMAgent.discardSearchResults(this._searchIdentifier);
+            this._hideSearchHighlights();
+        }
 
         this._searchQuery = null;
         this._searchIdentifier = null;
@@ -299,6 +305,10 @@ WebInspector.DOMTreeContentView.prototype = {
                 return;
 
             this._domTreeOutline.selectDOMNode(domNode, changeFocus);
+
+            var selectedTreeElement = this._domTreeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                selectedTreeElement.emphasizeSearchHighlight();
         }
 
         DOMAgent.getSearchResults(this._searchIdentifier, index, index + 1, revealResult.bind(this));
@@ -449,5 +459,52 @@ WebInspector.DOMTreeContentView.prototype = {
     _toggleShowsShadowDOMSetting: function(event)
     {
         WebInspector.showShadowDOMSetting.value = !WebInspector.showShadowDOMSetting.value;
+    },
+
+    _showSearchHighlights: function()
+    {
+        console.assert(this._searchIdentifier);
+
+        this._searchResultNodes = [];
+
+        var searchIdentifier = this._searchIdentifier;
+
+        DOMAgent.getSearchResults(this._searchIdentifier, 0, this._numberOfSearchResults, function(error, nodeIdentifiers) {
+            if (error)
+                return;
+
+            if (this._searchIdentifier !== searchIdentifier)
+                return;
+
+            console.assert(nodeIdentifiers.length === this._numberOfSearchResults);
+
+            for (var i = 0; i < nodeIdentifiers.length; ++i) {
+                var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[i]);
+                console.assert(domNode);
+                if (!domNode)
+                    continue;
+
+                this._searchResultNodes.push(domNode);
+
+                var treeElement = this._domTreeOutline.findTreeElement(domNode);
+                console.assert(treeElement);
+                if (treeElement)
+                    treeElement.highlightSearchResults(this._searchQuery);
+            }
+        }.bind(this));
+    },
+
+    _hideSearchHighlights: function()
+    {
+        if (!this._searchResultNodes)
+            return;
+
+        for (var domNode of this._searchResultNodes) {
+            var treeElement = this._domTreeOutline.findTreeElement(domNode);
+            if (treeElement)
+                treeElement.hideSearchHighlights();
+        }
+
+        delete this._searchResultNodes;
     }
 };
index f442cd4..4299c23 100644 (file)
@@ -58,6 +58,9 @@ WebInspector.DOMTreeElement.EditTagBlacklist = [
     "html", "head", "body"
 ].keySet();
 
+WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
+WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
+
 WebInspector.DOMTreeElement.prototype = {
     isCloseTag: function()
     {
@@ -82,6 +85,39 @@ WebInspector.DOMTreeElement.prototype = {
         this._updateSearchHighlight(false);
     },
 
+    emphasizeSearchHighlight: function()
+    {
+        var highlightElement = this.title.querySelector("." + WebInspector.DOMTreeElement.SearchHighlightStyleClassName);
+        console.assert(highlightElement);
+        if (!highlightElement)
+            return;
+
+        if (this._bouncyHighlightElement)
+            this._bouncyHighlightElement.remove();
+
+        this._bouncyHighlightElement = document.createElement("div");
+        this._bouncyHighlightElement.className = WebInspector.DOMTreeElement.BouncyHighlightStyleClassName;
+        this._bouncyHighlightElement.textContent = highlightElement.textContent;
+
+        // Position and show the bouncy highlight adjusting the coordinates to be inside the TreeOutline's space.
+        var highlightElementRect = highlightElement.getBoundingClientRect();
+        var treeOutlineRect = this.treeOutline.element.getBoundingClientRect();
+        this._bouncyHighlightElement.style.top = (highlightElementRect.top - treeOutlineRect.top) + "px";
+        this._bouncyHighlightElement.style.left = (highlightElementRect.left - treeOutlineRect.left) + "px";
+        this.title.appendChild(this._bouncyHighlightElement);
+
+        function animationEnded()
+        {
+            if (!this._bouncyHighlightElement)
+                return;
+
+            this._bouncyHighlightElement.remove();
+            delete this._bouncyHighlightElement;
+        }
+
+        this._bouncyHighlightElement.addEventListener("webkitAnimationEnd", animationEnded.bind(this));
+    },
+
     _updateSearchHighlight: function(show)
     {
         if (!this._highlightResult)
@@ -986,10 +1022,8 @@ WebInspector.DOMTreeElement.prototype = {
             if (this._highlightResult)
                 this._updateSearchHighlight(false);
         } else {
-            var highlightElement = document.createElement("span");
-            highlightElement.className = "highlight";
-            highlightElement.appendChild(this._nodeTitleInfo().titleDOM);
-            this.title = highlightElement;
+            this.title = document.createElement("span");
+            this.title.appendChild(this._nodeTitleInfo().titleDOM);
             delete this._highlightResult;
         }
 
@@ -1270,22 +1304,23 @@ WebInspector.DOMTreeElement.prototype = {
 
     _highlightSearchResults: function()
     {
-        if (!this._searchQuery || !this._searchHighlightsVisible)
+        if (!this.title || !this._searchQuery || !this._searchHighlightsVisible)
             return;
+
         if (this._highlightResult) {
             this._updateSearchHighlight(true);
             return;
         }
 
-        var text = this.listItemElement.textContent;
-        var regexObject = createPlainTextSearchRegex(this._searchQuery, "gi");
+        var text = this.title.textContent;
+        var searchRegex = new RegExp(this._searchQuery.escapeForRegExp(), "gi");
 
         var offset = 0;
-        var match = regexObject.exec(text);
+        var match = searchRegex.exec(text);
         var matchRanges = [];
         while (match) {
             matchRanges.push({ offset: match.index, length: match[0].length });
-            match = regexObject.exec(text);
+            match = searchRegex.exec(text);
         }
 
         // Fall back for XPath, etc. matches.
@@ -1293,7 +1328,7 @@ WebInspector.DOMTreeElement.prototype = {
             matchRanges.push({ offset: 0, length: text.length });
 
         this._highlightResult = [];
-        highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
+        WebInspector.highlightRangesWithStyleClass(this.title, matchRanges, WebInspector.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult);
     },
 
     handleEvent: function(event)
index c4c1d92..e67e955 100644 (file)
@@ -158,3 +158,9 @@ body.mac-platform.legacy .dom-tree-outline:focus li.selected .selection {
     min-width: 100%;
     white-space: pre-wrap;
 }
+
+.dom-tree-outline .search-highlight {
+    color: black;
+    background-color: rgba(235, 215, 38, 0.2);
+    border-bottom: 1px solid rgb(237, 202, 71);
+}
index d57133e..aca39ed 100644 (file)
@@ -290,3 +290,50 @@ body.mac-platform.legacy #split-content-browser > .navigation-bar {
 .value-with-clarification .clarification {
     color: #666;
 }
+
+.bouncy-highlight {
+    position: absolute;
+    z-index: 100;
+
+    box-shadow: inset rgb(250, 232, 140) 0 -1px 0, rgba(211, 197, 96, 1) 0 1px 1px, rgba(0, 0, 0, 0.33) 0 1px 2px 1px;
+    text-shadow: white 0 0 2px;
+
+    background: linear-gradient(to bottom, rgb(250, 237, 108), rgb(242, 220, 100));
+    border-radius: 7px;
+
+    padding: 2px 4px;
+    margin-top: -2px;
+    margin-left: -4px;
+
+    -webkit-user-select: none;
+    pointer-events: none;
+
+    -webkit-animation-name: bouncy-highlight-animation;
+    -webkit-animation-duration: 750ms;
+    -webkit-animation-timing-function: ease-in-out;
+
+    opacity: 0;
+}
+
+@-webkit-keyframes bouncy-highlight-animation {
+    0% {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+
+    12.5% {
+        -webkit-transform: scale(1.25);
+    }
+
+    25% {
+        -webkit-transform: scale(1);
+    }
+
+    62.5% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
index 11b23ae..6e68591 100644 (file)
     background-color: rgb(217, 234, 208) !important;
 }
 
-.text-editor .bouncy-highlight {
-    position: absolute;
-    z-index: 100;
-
-    box-shadow: inset rgb(250, 232, 140) 0 -1px 0, rgba(211, 197, 96, 1) 0 1px 1px, rgba(0, 0, 0, 0.33) 0 1px 2px 1px;
-    text-shadow: white 0 0 2px;
-
-    background: linear-gradient(to bottom, rgb(250, 237, 108), rgb(242, 220, 100));
-    border-radius: 7px;
-
-    padding: 2px 4px;
-    margin-top: -2px;
-    margin-left: -4px;
-
-    -webkit-user-select: none;
-    pointer-events: none;
-
-    -webkit-animation-name: text-editor-bouncy;
-    -webkit-animation-duration: 750ms;
-    -webkit-animation-timing-function: ease-in-out;
-
-    opacity: 0;
-}
-
-@-webkit-keyframes text-editor-bouncy {
-    0% {
-        -webkit-transform: scale(1);
-        opacity: 1;
-    }
-
-    12.5% {
-        -webkit-transform: scale(1.25);
-    }
-
-    25% {
-        -webkit-transform: scale(1);
-    }
-
-    62.5% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
 .text-editor > .CodeMirror .highlighted {
     -webkit-animation: "text-editor-highlight-fadeout" 2s;
 }