2017-10-08  Joseph Pecoraro  <pecoraro@apple.com>

        Web Inspector: Network Tab - Search Headers Detail View

        https://bugs.webkit.org/show_bug.cgi?id=177981

        Reviewed by NOBODY (OOPS!).

        * UserInterface/Base/Main.js:

        * UserInterface/Views/LogContentView.js:

        (WI.LogContentView.prototype.performSearch):

        Rename "Dom" to "DOM" in utility function.

        * UserInterface/Views/ResourceHeadersContentView.css:

        (.resource-headers.showing-find-banner .search-highlight):

        Search highlight styles.

        * UserInterface/Views/ResourceHeadersContentView.js:

        (WI.ResourceHeadersContentView.prototype.get supportsSearch):

        (WI.ResourceHeadersContentView.prototype.get numberOfSearchResults):

        (WI.ResourceHeadersContentView.prototype.get hasPerformedSearch):

        (WI.ResourceHeadersContentView.prototype.set automaticallyRevealFirstSearchResult):

        (WI.ResourceHeadersContentView.prototype.performSearch):

        (WI.ResourceHeadersContentView.prototype.searchCleared):

        (WI.ResourceHeadersContentView.prototype.revealPreviousSearchResult):

        (WI.ResourceHeadersContentView.prototype.revealNextSearchResult):

        (WI.ResourceHeadersContentView.prototype._perfomSearchOnKeyValuePairs):

        (WI.ResourceHeadersContentView.prototype._revealSearchResult):

        Implement ContentView search behavior.

.resource-headers.showing-find-banner .search-highlight {

    color: black;

    background-color: hsla(53, 83%, 53%, 0.2);

    border-bottom: 1px solid hsl(47, 82%, 60%);

}

        this._searchQuery = null;

        this._searchResults = null;

        this._searchDOMChanges = [];

        this._searchIndex = -1;

        this._automaticallyRevealFirstSearchResult = false;

        this._bouncyHighlightElement = null;

        this.element.tabIndex = 0;

    get supportsSearch()

    {

        return true;

    }

    get numberOfSearchResults()

    {

        return this._searchResults ? this._searchResults.length : null;

    }

    get hasPerformedSearch()

    {

        return this._searchResults !== null;

    }

    set automaticallyRevealFirstSearchResult(reveal)

    {

        this._automaticallyRevealFirstSearchResult = reveal;

        // If we haven't shown a search result yet, reveal one now.

        if (this._automaticallyRevealFirstSearchResult && this.numberOfSearchResults > 0) {

            if (this._searchIndex === -1)

                this.revealNextSearchResult();

        }

    }

    performSearch(query)

    {

        if (query === this._searchQuery)

            return;

        WI.revertDOMChanges(this._searchDOMChanges);

        this._searchQuery = query;

        this._searchResults = [];

        this._searchDOMChanges = [];

        this._searchIndex = -1;

        this._perfomSearchOnKeyValuePairs();

        this.dispatchEventToListeners(WI.ContentView.Event.NumberOfSearchResultsDidChange);

        if (this._automaticallyRevealFirstSearchResult && this._searchResults.length > 0)

            this.revealNextSearchResult();

    }

    searchCleared()

    {

        WI.revertDOMChanges(this._searchDOMChanges);

        this._searchQuery = null;

        this._searchResults = null;

        this._searchDOMChanges = [];

        this._searchIndex = -1;

    }

    revealPreviousSearchResult(changeFocus)

    {

        if (!this.numberOfSearchResults)

            return;

        if (this._searchIndex > 0)

            --this._searchIndex;

        else

            this._searchIndex = this._searchResults.length - 1;

        this._revealSearchResult(this._searchIndex, changeFocus);

    }

    revealNextSearchResult(changeFocus)

    {

        if (!this.numberOfSearchResults)

            return;

        if (this._searchIndex + 1 < this._searchResults.length)

            ++this._searchIndex;

        else

            this._searchIndex = 0;

        this._revealSearchResult(this._searchIndex, changeFocus);

    }

    _perfomSearchOnKeyValuePairs()

    {

        let searchRegex = new RegExp(this._searchQuery.escapeForRegExp(), "gi");

        let elements = this.element.querySelectorAll(".key, .value");

        for (let element of elements) {

            let matchRanges = [];

            let text = element.textContent;

            let match;

            while (match = searchRegex.exec(text))

                matchRanges.push({offset: match.index, length: match[0].length});

            if (matchRanges.length) {

                let highlightedNodes = WI.highlightRangesWithStyleClass(element, matchRanges, "search-highlight", this._searchDOMChanges);

                this._searchResults = this._searchResults.concat(highlightedNodes);

            }

        }

    }

    _revealSearchResult(index, changeFocus)

    {

        let highlightElement = this._searchResults[index];

        if (!highlightElement)

            return;

        highlightElement.scrollIntoViewIfNeeded();

        if (!this._bouncyHighlightElement) {

            this._bouncyHighlightElement = document.createElement("div");

            this._bouncyHighlightElement.className = "bouncy-highlight";

            this._bouncyHighlightElement.addEventListener("animationend", (event) => {

                this._bouncyHighlightElement.remove();

            });

        }

        this._bouncyHighlightElement.remove();

        let computedStyles = window.getComputedStyle(highlightElement);

        let highlightElementRect = highlightElement.getBoundingClientRect();

        let contentViewRect = this.element.getBoundingClientRect();

        let contentViewScrollTop = this.element.scrollTop;

        let contentViewScrollLeft = this.element.scrollLeft;

        this._bouncyHighlightElement.textContent = highlightElement.textContent;

        this._bouncyHighlightElement.style.top = (highlightElementRect.top - contentViewRect.top + contentViewScrollTop) + "px";

        this._bouncyHighlightElement.style.left = (highlightElementRect.left - contentViewRect.left + contentViewScrollLeft) + "px";

        this._bouncyHighlightElement.style.fontWeight = computedStyles.fontWeight;

        this.element.appendChild(this._bouncyHighlightElement);

    }