Web Inspector: console search bar jumps, behaves poorly at narrow widths
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Dec 2016 23:52:42 +0000 (23:52 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 15 Dec 2016 23:52:42 +0000 (23:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=164047
<rdar://problem/29055582>

Reviewed by Timothy Hatcher.

At narrow widths the find banner behaves poorly in the split console
toolbar. It should work like the main content browser, appearing below
the toolbar when Command-F is pressed and either the split console or
quick console prompt has the focus.

* UserInterface/Base/Main.js:
(WebInspector.contentLoaded):
Enable split content browser find banner.

* UserInterface/Views/ContentBrowser.js:
(WebInspector.ContentBrowser.prototype.showFindBanner):
Check for custom find banner support at runtime.
(WebInspector.ContentBrowser.prototype._findBannerDidShow):
(WebInspector.ContentBrowser.prototype._findBannerDidHide):
Refresh search results when banner is shown/hidden, instead of relying
on toggling the "showing-find-banner" class name for everything.

(WebInspector.ContentBrowser.prototype.handleFindEvent): Deleted.
Renamed `showFindBanner`.

* UserInterface/Views/ContentView.js:
(WebInspector.ContentView.prototype.get supportsCustomFindBanner):
(WebInspector.ContentView.prototype.showCustomFindBanner):
Custom find banner support (used by LogContentView).

* UserInterface/Views/LogContentView.js:
(WebInspector.LogContentView):
(WebInspector.LogContentView.prototype.get supportsSearch):
(WebInspector.LogContentView.prototype.get numberOfSearchResults):
(WebInspector.LogContentView.prototype.get hasPerformedSearch):
Cleanup.
(WebInspector.LogContentView.prototype.get supportsCustomFindBanner):
Use toolbar item find banner when showing Console tab.
(WebInspector.LogContentView.prototype.findBannerRevealPreviousResult):
(WebInspector.LogContentView.prototype.findBannerRevealNextResult):
(WebInspector.LogContentView.prototype._isMessageVisible):
(WebInspector.LogContentView.prototype._visibleMessageElements):
(WebInspector.LogContentView.prototype._logCleared):
(WebInspector.LogContentView.prototype._filterMessageElements):
(WebInspector.LogContentView.prototype.findBannerPerformSearch):
(WebInspector.LogContentView.prototype.findBannerSearchCleared):
(WebInspector.LogContentView.prototype.performSearch):
Support both the standard and custom (toolbar item) find banners.
(WebInspector.LogContentView.prototype.searchCleared):
Refresh search results.
(WebInspector.LogContentView.prototype._highlightRanges):
Correct spelling: _selectedSearchMathIsValid -> _selectedSearchMatchIsValid.
(WebInspector.LogContentView.prototype.get searchInProgress): Deleted.
Override ContentView.prototype.hasPerformedSearch instead.
(WebInspector.LogContentView.prototype.handleFindEvent): Deleted.
Replaced by `showCustomFindBanner`.
(WebInspector.LogContentView.prototype.highlightPreviousSearchMatch): Deleted.
Absorbed by findBannerRevealPreviousResult.
(WebInspector.LogContentView.prototype.highlightNextSearchMatch): Deleted.
Absorbed by findBannerRevealNextResult.
(WebInspector.LogContentView.prototype._performSearch): Deleted.
Override ContentView.prototype.performSearch instead.

* UserInterface/Views/Main.css:
(#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider)):
Hide the toolbar banner and divider.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
Source/WebInspectorUI/UserInterface/Views/ContentView.js
Source/WebInspectorUI/UserInterface/Views/LogContentView.js
Source/WebInspectorUI/UserInterface/Views/Main.css

index c5594f6..3639276 100644 (file)
@@ -1,3 +1,73 @@
+2016-12-15  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: console search bar jumps, behaves poorly at narrow widths
+        https://bugs.webkit.org/show_bug.cgi?id=164047
+        <rdar://problem/29055582>
+
+        Reviewed by Timothy Hatcher.
+
+        At narrow widths the find banner behaves poorly in the split console
+        toolbar. It should work like the main content browser, appearing below
+        the toolbar when Command-F is pressed and either the split console or
+        quick console prompt has the focus.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.contentLoaded):
+        Enable split content browser find banner.
+
+        * UserInterface/Views/ContentBrowser.js:
+        (WebInspector.ContentBrowser.prototype.showFindBanner):
+        Check for custom find banner support at runtime.
+        (WebInspector.ContentBrowser.prototype._findBannerDidShow):
+        (WebInspector.ContentBrowser.prototype._findBannerDidHide):
+        Refresh search results when banner is shown/hidden, instead of relying
+        on toggling the "showing-find-banner" class name for everything.
+
+        (WebInspector.ContentBrowser.prototype.handleFindEvent): Deleted.
+        Renamed `showFindBanner`.
+
+        * UserInterface/Views/ContentView.js:
+        (WebInspector.ContentView.prototype.get supportsCustomFindBanner):
+        (WebInspector.ContentView.prototype.showCustomFindBanner):
+        Custom find banner support (used by LogContentView).
+
+        * UserInterface/Views/LogContentView.js:
+        (WebInspector.LogContentView):
+        (WebInspector.LogContentView.prototype.get supportsSearch):
+        (WebInspector.LogContentView.prototype.get numberOfSearchResults):
+        (WebInspector.LogContentView.prototype.get hasPerformedSearch):
+        Cleanup.
+        (WebInspector.LogContentView.prototype.get supportsCustomFindBanner):
+        Use toolbar item find banner when showing Console tab.
+        (WebInspector.LogContentView.prototype.findBannerRevealPreviousResult):
+        (WebInspector.LogContentView.prototype.findBannerRevealNextResult):
+        (WebInspector.LogContentView.prototype._isMessageVisible):
+        (WebInspector.LogContentView.prototype._visibleMessageElements):
+        (WebInspector.LogContentView.prototype._logCleared):
+        (WebInspector.LogContentView.prototype._filterMessageElements):
+        (WebInspector.LogContentView.prototype.findBannerPerformSearch):
+        (WebInspector.LogContentView.prototype.findBannerSearchCleared):
+        (WebInspector.LogContentView.prototype.performSearch):
+        Support both the standard and custom (toolbar item) find banners.
+        (WebInspector.LogContentView.prototype.searchCleared):
+        Refresh search results.
+        (WebInspector.LogContentView.prototype._highlightRanges):
+        Correct spelling: _selectedSearchMathIsValid -> _selectedSearchMatchIsValid.
+        (WebInspector.LogContentView.prototype.get searchInProgress): Deleted.
+        Override ContentView.prototype.hasPerformedSearch instead.
+        (WebInspector.LogContentView.prototype.handleFindEvent): Deleted.
+        Replaced by `showCustomFindBanner`.
+        (WebInspector.LogContentView.prototype.highlightPreviousSearchMatch): Deleted.
+        Absorbed by findBannerRevealPreviousResult.
+        (WebInspector.LogContentView.prototype.highlightNextSearchMatch): Deleted.
+        Absorbed by findBannerRevealNextResult.
+        (WebInspector.LogContentView.prototype._performSearch): Deleted.
+        Override ContentView.prototype.performSearch instead.
+
+        * UserInterface/Views/Main.css:
+        (#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider)):
+        Hide the toolbar banner and divider.
+
 2016-12-14  Ryosuke Niwa  <rniwa@webkit.org>
 
         Web Inspector: Jumping to the definition of a custom elements is broken
index 49f4f45..74a8307 100644 (file)
@@ -270,7 +270,9 @@ WebInspector.contentLoaded = function()
     this._contentElement.setAttribute("role", "main");
     this._contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
 
-    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true, true);
+    const disableBackForward = true;
+    const disableFindBanner = false;
+    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, disableBackForward, disableFindBanner);
     this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
 
     this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
@@ -1984,11 +1986,11 @@ WebInspector._beforecopy = function(event)
 
 WebInspector._find = function(event)
 {
-    var contentBrowser = this._focusedOrVisibleContentBrowser();
-    if (!contentBrowser || typeof contentBrowser.handleFindEvent !== "function")
+    let contentBrowser = this._focusedOrVisibleContentBrowser();
+    if (!contentBrowser)
         return;
 
-    contentBrowser.handleFindEvent(event);
+    contentBrowser.showFindBanner();
 };
 
 WebInspector._save = function(event)
index 1ca28d0..1035b86 100644 (file)
@@ -197,7 +197,7 @@ WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
         // so it does not need to be called here.
     }
 
-    handleFindEvent(event)
+    showFindBanner()
     {
         if (!this._findBanner)
             return;
@@ -206,9 +206,8 @@ WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
         if (!currentContentView || !currentContentView.supportsSearch)
             return;
 
-        // LogContentView has custom search handling.
-        if (typeof currentContentView.handleFindEvent === "function") {
-            currentContentView.handleFindEvent(event);
+        if (currentContentView.supportsCustomFindBanner) {
+            currentContentView.showCustomFindBanner();
             return;
         }
 
@@ -295,6 +294,7 @@ WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
             return;
 
         currentContentView.automaticallyRevealFirstSearchResult = true;
+        currentContentView.performSearch(this._findBanner.searchQuery);
     }
 
     _findBannerDidHide(event)
@@ -304,6 +304,7 @@ WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
             return;
 
         currentContentView.automaticallyRevealFirstSearchResult = false;
+        currentContentView.searchCleared();
     }
 
     _contentViewNumberOfSearchResultsDidChange(event)
index 40a4b12..c3a8d88 100644 (file)
@@ -366,6 +366,17 @@ WebInspector.ContentView = class ContentView extends WebInspector.View
         return false;
     }
 
+    get supportsCustomFindBanner()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    showCustomFindBanner()
+    {
+        // Implemented by subclasses.
+    }
+
     get numberOfSearchResults()
     {
         // Implemented by subclasses.
index f18ef16..fac75bf 100644 (file)
@@ -57,8 +57,15 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         this._logViewController = new WebInspector.JavaScriptLogViewController(this.messagesElement, this.element, this.prompt, this, "console-prompt-history");
         this._lastMessageView = null;
 
-        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", true);
+        const fixed = true;
+        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", fixed);
         this._findBanner.inputField.placeholder = WebInspector.UIString("Filter Console Log");
+        this._findBanner.targetElement = this.element;
+
+        this._currentSearchQuery = "";
+        this._searchMatches = [];
+        this._selectedSearchMatch = null;
+        this._selectedSearchMatchIsValid = false;
 
         var scopeBarItems = [
             new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
@@ -117,11 +124,6 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         return true;
     }
 
-    get searchInProgress()
-    {
-        return this.messagesElement.classList.contains(WebInspector.LogContentView.SearchInProgressStyleClassName);
-    }
-
     shown()
     {
         super.shown();
@@ -171,12 +173,16 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         }
     }
 
-    get supportsSearch()
+    get supportsSearch() { return true; }
+    get numberOfSearchResults() { return this.hasPerformedSearch ? this._searchMatches.length : null; }
+    get hasPerformedSearch() { return this._currentSearchQuery !== ""; }
+
+    get supportsCustomFindBanner()
     {
-        return true;
+        return WebInspector.isShowingConsoleTab();
     }
 
-    handleFindEvent(event)
+    showCustomFindBanner()
     {
         if (!this.visible)
             return;
@@ -212,12 +218,7 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
 
     findBannerRevealPreviousResult()
     {
-        this.highlightPreviousSearchMatch();
-    }
-
-    highlightPreviousSearchMatch()
-    {
-        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+        if (!this.hasPerformedSearch || isEmptyObject(this._searchMatches))
             return;
 
         var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) : this._searchMatches.length;
@@ -226,12 +227,7 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
 
     findBannerRevealNextResult()
     {
-        this.highlightNextSearchMatch();
-    }
-
-    highlightNextSearchMatch()
-    {
-        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+        if (!this.hasPerformedSearch || isEmptyObject(this._searchMatches))
             return;
 
         var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) + 1 : 0;
@@ -587,7 +583,7 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         if (node.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName))
             return false;
 
-        if (this.searchInProgress && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
+        if (this.hasPerformedSearch && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
             return false;
 
         if (message.classList.contains("console-group-title"))
@@ -644,7 +640,7 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
     {
         var unfilteredMessages = this._unfilteredMessageElements();
 
-        if (!this.searchInProgress)
+        if (!this.hasPerformedSearch)
             return unfilteredMessages;
 
         return unfilteredMessages.filter(function(message) {
@@ -660,9 +656,8 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         this._logViewController.clear();
         this._nestingLevel = 0;
 
-        let searchQuery = this._findBanner.searchQuery;
-        if (searchQuery)
-            this._performSearch(searchQuery);
+        if (this._currentSearchQuery)
+            this.performSearch(this._currentSearchQuery);
     }
 
     _showConsoleTab()
@@ -716,7 +711,7 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
             }
         }, this);
 
-        this._performSearch(this._findBanner.searchQuery);
+        this.performSearch(this._currentSearchQuery);
     }
 
     _keyDown(event)
@@ -873,14 +868,14 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
             focusableElements[i].removeAttribute("tabindex");
     }
 
-    findBannerPerformSearch(findBanner, searchTerms)
+    findBannerPerformSearch(findBanner, searchQuery)
     {
-        this._performSearch(searchTerms);
+        this.performSearch(searchQuery);
     }
 
     findBannerSearchCleared()
     {
-        this._performSearch("");
+        this.searchCleared();
     }
 
     revealNextSearchResult()
@@ -893,32 +888,31 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         this.findBannerRevealPreviousResult();
     }
 
-    _performSearch(searchTerms)
+    performSearch(searchQuery)
     {
         if (!isEmptyObject(this._searchHighlightDOMChanges))
             WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
 
-        if (searchTerms === "") {
-            delete this._selectedSearchMatch;
-            this._matchingSearchElements = [];
-            this.messagesElement.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
+        this._currentSearchQuery = searchQuery;
+        this._searchHighlightDOMChanges = [];
+        this._searchMatches = [];
+        this._selectedSearchMatchIsValid = false;
+        this._selectedSearchMatch = null;
+
+        if (this._currentSearchQuery === "") {
+            this.element.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
             return;
         }
 
-        this.messagesElement.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
+        this.element.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
 
-        this._searchHighlightDOMChanges = [];
-        this._searchMatches = [];
-        this._selectedSearchMathIsValid = false;
-        let numberOfResults = 0;
-
-        var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
+        let searchRegex = new RegExp(this._currentSearchQuery.escapeForRegExp(), "gi");
         this._unfilteredMessageElements().forEach(function(message) {
-            var matchRanges = [];
-            var text = message.textContent;
-            var match = searchRegex.exec(text);
+            let matchRanges = [];
+            let text = message.textContent;
+            let match = searchRegex.exec(text);
             while (match) {
-                numberOfResults++;
                 matchRanges.push({offset: match.index, length: match[0].length});
                 match = searchRegex.exec(text);
             }
@@ -926,19 +920,24 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
             if (!isEmptyObject(matchRanges))
                 this._highlightRanges(message, matchRanges);
 
-            var classList = message.classList;
+            let classList = message.classList;
             if (!isEmptyObject(matchRanges) || message.__commandView instanceof WebInspector.ConsoleCommandView || message.__message instanceof WebInspector.ConsoleCommandResultMessage)
                 classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
             else
                 classList.add(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
         }, this);
 
-        if (!this._selectedSearchMathIsValid && this._selectedSearchMatch) {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+
+        if (!this._selectedSearchMatchIsValid && this._selectedSearchMatch) {
             this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-            delete this._selectedSearchMatch;
+            this._selectedSearchMatch = null;
         }
+    }
 
-        this._findBanner.numberOfResults = numberOfResults;
+    searchCleared()
+    {
+        this.performSearch("");
     }
 
     _highlightRanges(message, matchRanges)
@@ -950,9 +949,9 @@ WebInspector.LogContentView = class LogContentView extends WebInspector.ContentV
         matchRanges.forEach(function(range, index) {
             this._searchMatches.push({message, range, highlight: highlightedElements[index]});
 
-            if (this._selectedSearchMatch && !this._selectedSearchMathIsValid && this._selectedSearchMatch.message === message) {
-                this._selectedSearchMathIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
-                if (this._selectedSearchMathIsValid) {
+            if (this._selectedSearchMatch && !this._selectedSearchMatchIsValid && this._selectedSearchMatch.message === message) {
+                this._selectedSearchMatchIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
+                if (this._selectedSearchMatchIsValid) {
                     delete this._selectedSearchMatch;
                     this._highlightSearchMatchAtIndex(this._searchMatches.length - 1);
                 }
index 0c804af..5d215ea 100644 (file)
@@ -156,6 +156,10 @@ body.docked.right #navigation-sidebar.collapsed > .resizer {
     background-color: var(--panel-background-color);
 }
 
+#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider) {
+    display: none;
+}
+
 #split-content-browser > .navigation-bar .item {
     height: 100%;
 }