⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 173522 in webkit


Ignore:
Timestamp:
Sep 11, 2014, 11:35:36 AM (12 years ago)
Author:
Joseph Pecoraro
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r173505 r173522  
     12014-09-11  Joseph Pecoraro  <pecoraro@apple.com>
     2
     3        Web Inspector: DOM Tree search highlights are not appearing
     4        https://bugs.webkit.org/show_bug.cgi?id=136662
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        When performing a search within the DOMTreeContentView all
     9        search results should immediately highlight. When moving
     10        between search results, emphasize the current with a bouncy.
     11        Remember to remove the highlights when the search is changed
     12        or cleared.
     13
     14        * UserInterface/Views/DOMTreeContentView.js:
     15        (WebInspector.DOMTreeContentView.prototype.performSearch.searchResultsReady):
     16        (WebInspector.DOMTreeContentView.prototype.searchCleared):
     17        Shor or hide highlights when searches change.
     18
     19        (WebInspector.DOMTreeContentView.prototype.revealResult):
     20        (WebInspector.DOMTreeContentView.prototype._revealSearchResult):
     21        Emphasize the highlight when moving to a new current result.
     22
     23        (WebInspector.DOMTreeContentView.prototype._showSearchHighlights):
     24        (WebInspector.DOMTreeContentView.prototype._hideSearchHighlights):
     25        On each affected DOMTreeElement show or hide search highlights.
     26
     27        * UserInterface/Views/DOMTreeElement.js:
     28        (WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight.animationEnded):
     29        (WebInspector.DOMTreeElement.prototype.emphasizeSearchHighlight):
     30        Give a brief bouncy-highlight when told to emphasize the search highlight.
     31
     32        (WebInspector.DOMTreeElement.prototype.updateTitle):
     33        Remove unused and unnecessary style class on each row.
     34
     35        (WebInspector.DOMTreeElement.prototype._highlightSearchResults):
     36        Update the stale code to use new function names and accessors.
     37
     38        * UserInterface/Views/DOMTreeOutline.css:
     39        (.dom-tree-outline .search-highlight):
     40        Styles for the search highlight match search highlights in the sidebar.
     41
     42        * UserInterface/Views/Main.css:
     43        (.bouncy-highlight):
     44        * UserInterface/Views/TextEditor.css:
     45        Move bouncy-highlight to Main.css.
     46
    1472014-09-10  Saam Barati  <saambarati1@gmail.com>
    248

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js

    r172839 r173522  
    201201            return;
    202202
    203         if (this._searchIdentifier)
     203        if (this._searchIdentifier) {
    204204            DOMAgent.discardSearchResults(this._searchIdentifier);
     205            this._hideSearchHighlights();
     206        }
    205207
    206208        this._searchQuery = query;
    … …  
    219221            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
    220222
     223            this._showSearchHighlights();
     224
    221225            if (this._automaticallyRevealFirstSearchResult)
    222226                this.revealNextSearchResult();
    … …  
    240244    searchCleared: function()
    241245    {
    242         if (this._searchIdentifier)
     246        if (this._searchIdentifier) {
    243247            DOMAgent.discardSearchResults(this._searchIdentifier);
     248            this._hideSearchHighlights();
     249        }
    244250
    245251        this._searchQuery = null;
    … …  
    300306
    301307            this._domTreeOutline.selectDOMNode(domNode, changeFocus);
     308
     309            var selectedTreeElement = this._domTreeOutline.selectedTreeElement;
     310            if (selectedTreeElement)
     311                selectedTreeElement.emphasizeSearchHighlight();
    302312        }
    303313
    … …  
    450460    {
    451461        WebInspector.showShadowDOMSetting.value = !WebInspector.showShadowDOMSetting.value;
     462    },
     463
     464    _showSearchHighlights: function()
     465    {
     466        console.assert(this._searchIdentifier);
     467
     468        this._searchResultNodes = [];
     469
     470        var searchIdentifier = this._searchIdentifier;
     471
     472        DOMAgent.getSearchResults(this._searchIdentifier, 0, this._numberOfSearchResults, function(error, nodeIdentifiers) {
     473            if (error)
     474                return;
     475
     476            if (this._searchIdentifier !== searchIdentifier)
     477                return;
     478
     479            console.assert(nodeIdentifiers.length === this._numberOfSearchResults);
     480
     481            for (var i = 0; i < nodeIdentifiers.length; ++i) {
     482                var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[i]);
     483                console.assert(domNode);
     484                if (!domNode)
     485                    continue;
     486
     487                this._searchResultNodes.push(domNode);
     488
     489                var treeElement = this._domTreeOutline.findTreeElement(domNode);
     490                console.assert(treeElement);
     491                if (treeElement)
     492                    treeElement.highlightSearchResults(this._searchQuery);
     493            }
     494        }.bind(this));
     495    },
     496
     497    _hideSearchHighlights: function()
     498    {
     499        if (!this._searchResultNodes)
     500            return;
     501
     502        for (var domNode of this._searchResultNodes) {
     503            var treeElement = this._domTreeOutline.findTreeElement(domNode);
     504            if (treeElement)
     505                treeElement.hideSearchHighlights();
     506        }
     507
     508        delete this._searchResultNodes;
    452509    }
    453510};

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r173492 r173522  
    5959].keySet();
    6060
     61WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
     62WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
     63
    6164WebInspector.DOMTreeElement.prototype = {
    6265    isCloseTag: function()
    … …  
    8184        delete this._searchHighlightsVisible;
    8285        this._updateSearchHighlight(false);
     86    },
     87
     88    emphasizeSearchHighlight: function()
     89    {
     90        var highlightElement = this.title.querySelector("." + WebInspector.DOMTreeElement.SearchHighlightStyleClassName);
     91        console.assert(highlightElement);
     92        if (!highlightElement)
     93            return;
     94
     95        if (this._bouncyHighlightElement)
     96            this._bouncyHighlightElement.remove();
     97
     98        this._bouncyHighlightElement = document.createElement("div");
     99        this._bouncyHighlightElement.className = WebInspector.DOMTreeElement.BouncyHighlightStyleClassName;
     100        this._bouncyHighlightElement.textContent = highlightElement.textContent;
     101
     102        // Position and show the bouncy highlight adjusting the coordinates to be inside the TreeOutline's space.
     103        var highlightElementRect = highlightElement.getBoundingClientRect();
     104        var treeOutlineRect = this.treeOutline.element.getBoundingClientRect();
     105        this._bouncyHighlightElement.style.top = (highlightElementRect.top - treeOutlineRect.top) + "px";
     106        this._bouncyHighlightElement.style.left = (highlightElementRect.left - treeOutlineRect.left) + "px";
     107        this.title.appendChild(this._bouncyHighlightElement);
     108
     109        function animationEnded()
     110        {
     111            if (!this._bouncyHighlightElement)
     112                return;
     113
     114            this._bouncyHighlightElement.remove();
     115            delete this._bouncyHighlightElement;
     116        }
     117
     118        this._bouncyHighlightElement.addEventListener("webkitAnimationEnd", animationEnded.bind(this));
    83119    },
    84120
    … …  
    9871023                this._updateSearchHighlight(false);
    9881024        } else {
    989             var highlightElement = document.createElement("span");
    990             highlightElement.className = "highlight";
    991             highlightElement.appendChild(this._nodeTitleInfo().titleDOM);
    992             this.title = highlightElement;
     1025            this.title = document.createElement("span");
     1026            this.title.appendChild(this._nodeTitleInfo().titleDOM);
    9931027            delete this._highlightResult;
    9941028        }
    … …  
    12711305    _highlightSearchResults: function()
    12721306    {
    1273         if (!this._searchQuery || !this._searchHighlightsVisible)
    1274             return;
     1307        if (!this.title || !this._searchQuery || !this._searchHighlightsVisible)
     1308            return;
     1309
    12751310        if (this._highlightResult) {
    12761311            this._updateSearchHighlight(true);
    … …  
    12781313        }
    12791314
    1280         var text = this.listItemElement.textContent;
    1281         var regexObject = createPlainTextSearchRegex(this._searchQuery, "gi");
     1315        var text = this.title.textContent;
     1316        var searchRegex = new RegExp(this._searchQuery.escapeForRegExp(), "gi");
    12821317
    12831318        var offset = 0;
    1284         var match = regexObject.exec(text);
     1319        var match = searchRegex.exec(text);
    12851320        var matchRanges = [];
    12861321        while (match) {
    12871322            matchRanges.push({ offset: match.index, length: match[0].length });
    1288             match = regexObject.exec(text);
     1323            match = searchRegex.exec(text);
    12891324        }
    12901325
    … …  
    12941329
    12951330        this._highlightResult = [];
    1296         highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
     1331        WebInspector.highlightRangesWithStyleClass(this.title, matchRanges, WebInspector.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult);
    12971332    },
    12981333

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css

    r171134 r173522  
    159159    white-space: pre-wrap;
    160160}
     161
     162.dom-tree-outline .search-highlight {
     163    color: black;
     164    background-color: rgba(235, 215, 38, 0.2);
     165    border-bottom: 1px solid rgb(237, 202, 71);
     166}

  • trunk/Source/WebInspectorUI/UserInterface/Views/Main.css

    r172526 r173522  
    291291    color: #666;
    292292}
     293
     294.bouncy-highlight {
     295    position: absolute;
     296    z-index: 100;
     297
     298    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;
     299    text-shadow: white 0 0 2px;
     300
     301    background: linear-gradient(to bottom, rgb(250, 237, 108), rgb(242, 220, 100));
     302    border-radius: 7px;
     303
     304    padding: 2px 4px;
     305    margin-top: -2px;
     306    margin-left: -4px;
     307
     308    -webkit-user-select: none;
     309    pointer-events: none;
     310
     311    -webkit-animation-name: bouncy-highlight-animation;
     312    -webkit-animation-duration: 750ms;
     313    -webkit-animation-timing-function: ease-in-out;
     314
     315    opacity: 0;
     316}
     317
     318@-webkit-keyframes bouncy-highlight-animation {
     319    0% {
     320        -webkit-transform: scale(1);
     321        opacity: 1;
     322    }
     323
     324    12.5% {
     325        -webkit-transform: scale(1.25);
     326    }
     327
     328    25% {
     329        -webkit-transform: scale(1);
     330    }
     331
     332    62.5% {
     333        opacity: 1;
     334    }
     335
     336    100% {
     337        opacity: 0;
     338    }
     339}

  • trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.css

    r164629 r173522  
    103103}
    104104
    105 .text-editor .bouncy-highlight {
    106     position: absolute;
    107     z-index: 100;
    108 
    109     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;
    110     text-shadow: white 0 0 2px;
    111 
    112     background: linear-gradient(to bottom, rgb(250, 237, 108), rgb(242, 220, 100));
    113     border-radius: 7px;
    114 
    115     padding: 2px 4px;
    116     margin-top: -2px;
    117     margin-left: -4px;
    118 
    119     -webkit-user-select: none;
    120     pointer-events: none;
    121 
    122     -webkit-animation-name: text-editor-bouncy;
    123     -webkit-animation-duration: 750ms;
    124     -webkit-animation-timing-function: ease-in-out;
    125 
    126     opacity: 0;
    127 }
    128 
    129 @-webkit-keyframes text-editor-bouncy {
    130     0% {
    131         -webkit-transform: scale(1);
    132         opacity: 1;
    133     }
    134 
    135     12.5% {
    136         -webkit-transform: scale(1.25);
    137     }
    138 
    139     25% {
    140         -webkit-transform: scale(1);
    141     }
    142 
    143     62.5% {
    144         opacity: 1;
    145     }
    146 
    147     100% {
    148         opacity: 0;
    149     }
    150 }
    151 
    152105.text-editor > .CodeMirror .highlighted {
    153106    -webkit-animation: "text-editor-highlight-fadeout" 2s;
Note: See TracChangeset for help on using the changeset viewer.