Changeset 223057 in webkit

Timestamp:

Oct 9, 2017 12:27:40 PM (7 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: Network Tab - Search Headers Detail View
​https://bugs.webkit.org/show_bug.cgi?id=177981

Reviewed by Brian Burg.

• 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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Base/Main.js (modified) (1 diff)
• UserInterface/Views/LogContentView.js (modified) (1 diff)
• UserInterface/Views/ResourceHeadersContentView.css (modified) (1 diff)
• UserInterface/Views/ResourceHeadersContentView.js (modified) (3 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-10-09  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Network Tab - Search Headers Detail View
+        https://bugs.webkit.org/show_bug.cgi?id=177981
+
+        Reviewed by Brian Burg.
+
+        * 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.
+
 2017-10-08  Devin Rousso  <webkit@devinrousso.com>
 

trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

@@ -2552 +2552 @@
 };
 
-WI.revertDomChanges = function(domChanges)
+WI.revertDOMChanges = function(domChanges)
 {
     for (var i = domChanges.length - 1; i >= 0; --i) {

trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js

@@ -951 +951 @@
     {
         if (!isEmptyObject(this._searchHighlightDOMChanges))
-            WI.revertDomChanges(this._searchHighlightDOMChanges);
+            WI.revertDOMChanges(this._searchHighlightDOMChanges);
 
         this._currentSearchQuery = searchQuery;

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.css

@@ -78 +78 @@
     bottom: 1px;
 }
+
+.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%);
+}

trunk/Source/WebInspectorUI/UserInterface/Views/ResourceHeadersContentView.js

@@ -39 +39 @@
         this._delegate = delegate || null;
 
+        this._searchQuery = null;
+        this._searchResults = null;
+        this._searchDOMChanges = [];
+        this._searchIndex = -1;
+        this._automaticallyRevealFirstSearchResult = false;
+        this._bouncyHighlightElement = null;
+
         this.element.classList.add("resource-details", "resource-headers");
+        this.element.tabIndex = 0;
 
         this._needsSummaryRefresh = false;
@@ -108 +116 @@
 
         super.closed();
+    }
+
+    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);
     }
 
@@ -315 +405 @@
     }
 
+    _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);
+    }
+
     _resourceRequestHeadersDidChange(event)
     {