Changeset 209882 in webkit


Ignore:
Timestamp:
Dec 15, 2016 3:52:42 PM (7 years ago)
Author:
Matt Baker
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r209855 r209882  
     12016-12-15  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: console search bar jumps, behaves poorly at narrow widths
     4        https://bugs.webkit.org/show_bug.cgi?id=164047
     5        <rdar://problem/29055582>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        At narrow widths the find banner behaves poorly in the split console
     10        toolbar. It should work like the main content browser, appearing below
     11        the toolbar when Command-F is pressed and either the split console or
     12        quick console prompt has the focus.
     13
     14        * UserInterface/Base/Main.js:
     15        (WebInspector.contentLoaded):
     16        Enable split content browser find banner.
     17
     18        * UserInterface/Views/ContentBrowser.js:
     19        (WebInspector.ContentBrowser.prototype.showFindBanner):
     20        Check for custom find banner support at runtime.
     21        (WebInspector.ContentBrowser.prototype._findBannerDidShow):
     22        (WebInspector.ContentBrowser.prototype._findBannerDidHide):
     23        Refresh search results when banner is shown/hidden, instead of relying
     24        on toggling the "showing-find-banner" class name for everything.
     25
     26        (WebInspector.ContentBrowser.prototype.handleFindEvent): Deleted.
     27        Renamed `showFindBanner`.
     28
     29        * UserInterface/Views/ContentView.js:
     30        (WebInspector.ContentView.prototype.get supportsCustomFindBanner):
     31        (WebInspector.ContentView.prototype.showCustomFindBanner):
     32        Custom find banner support (used by LogContentView).
     33
     34        * UserInterface/Views/LogContentView.js:
     35        (WebInspector.LogContentView):
     36        (WebInspector.LogContentView.prototype.get supportsSearch):
     37        (WebInspector.LogContentView.prototype.get numberOfSearchResults):
     38        (WebInspector.LogContentView.prototype.get hasPerformedSearch):
     39        Cleanup.
     40        (WebInspector.LogContentView.prototype.get supportsCustomFindBanner):
     41        Use toolbar item find banner when showing Console tab.
     42        (WebInspector.LogContentView.prototype.findBannerRevealPreviousResult):
     43        (WebInspector.LogContentView.prototype.findBannerRevealNextResult):
     44        (WebInspector.LogContentView.prototype._isMessageVisible):
     45        (WebInspector.LogContentView.prototype._visibleMessageElements):
     46        (WebInspector.LogContentView.prototype._logCleared):
     47        (WebInspector.LogContentView.prototype._filterMessageElements):
     48        (WebInspector.LogContentView.prototype.findBannerPerformSearch):
     49        (WebInspector.LogContentView.prototype.findBannerSearchCleared):
     50        (WebInspector.LogContentView.prototype.performSearch):
     51        Support both the standard and custom (toolbar item) find banners.
     52        (WebInspector.LogContentView.prototype.searchCleared):
     53        Refresh search results.
     54        (WebInspector.LogContentView.prototype._highlightRanges):
     55        Correct spelling: _selectedSearchMathIsValid -> _selectedSearchMatchIsValid.
     56        (WebInspector.LogContentView.prototype.get searchInProgress): Deleted.
     57        Override ContentView.prototype.hasPerformedSearch instead.
     58        (WebInspector.LogContentView.prototype.handleFindEvent): Deleted.
     59        Replaced by `showCustomFindBanner`.
     60        (WebInspector.LogContentView.prototype.highlightPreviousSearchMatch): Deleted.
     61        Absorbed by findBannerRevealPreviousResult.
     62        (WebInspector.LogContentView.prototype.highlightNextSearchMatch): Deleted.
     63        Absorbed by findBannerRevealNextResult.
     64        (WebInspector.LogContentView.prototype._performSearch): Deleted.
     65        Override ContentView.prototype.performSearch instead.
     66
     67        * UserInterface/Views/Main.css:
     68        (#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider)):
     69        Hide the toolbar banner and divider.
     70
    1712016-12-14  Ryosuke Niwa  <rniwa@webkit.org>
    272

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

    r209631 r209882  
    271271    this._contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
    272272
    273     this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true, true);
     273    const disableBackForward = true;
     274    const disableFindBanner = false;
     275    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, disableBackForward, disableFindBanner);
    274276    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
    275277
    … …  
    19851987WebInspector._find = function(event)
    19861988{
    1987     var contentBrowser = this._focusedOrVisibleContentBrowser();
    1988     if (!contentBrowser || typeof contentBrowser.handleFindEvent !== "function")
    1989         return;
    1990 
    1991     contentBrowser.handleFindEvent(event);
     1989    let contentBrowser = this._focusedOrVisibleContentBrowser();
     1990    if (!contentBrowser)
     1991        return;
     1992
     1993    contentBrowser.showFindBanner();
    19921994};
    19931995

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

    r200605 r209882  
    198198    }
    199199
    200     handleFindEvent(event)
     200    showFindBanner()
    201201    {
    202202        if (!this._findBanner)
    … …  
    207207            return;
    208208
    209         // LogContentView has custom search handling.
    210         if (typeof currentContentView.handleFindEvent === "function") {
    211             currentContentView.handleFindEvent(event);
     209        if (currentContentView.supportsCustomFindBanner) {
     210            currentContentView.showCustomFindBanner();
    212211            return;
    213212        }
    … …  
    296295
    297296        currentContentView.automaticallyRevealFirstSearchResult = true;
     297        currentContentView.performSearch(this._findBanner.searchQuery);
    298298    }
    299299
    … …  
    305305
    306306        currentContentView.automaticallyRevealFirstSearchResult = false;
     307        currentContentView.searchCleared();
    307308    }
    308309

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

    r208441 r209882  
    367367    }
    368368
     369    get supportsCustomFindBanner()
     370    {
     371        // Implemented by subclasses.
     372        return false;
     373    }
     374
     375    showCustomFindBanner()
     376    {
     377        // Implemented by subclasses.
     378    }
     379
    369380    get numberOfSearchResults()
    370381    {

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

    r208725 r209882  
    5858        this._lastMessageView = null;
    5959
    60         this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", true);
     60        const fixed = true;
     61        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", fixed);
    6162        this._findBanner.inputField.placeholder = WebInspector.UIString("Filter Console Log");
     63        this._findBanner.targetElement = this.element;
     64
     65        this._currentSearchQuery = "";
     66        this._searchMatches = [];
     67        this._selectedSearchMatch = null;
     68        this._selectedSearchMatchIsValid = false;
    6269
    6370        var scopeBarItems = [
    … …  
    116123    {
    117124        return true;
    118     }
    119 
    120     get searchInProgress()
    121     {
    122         return this.messagesElement.classList.contains(WebInspector.LogContentView.SearchInProgressStyleClassName);
    123125    }
    124126
    … …  
    172174    }
    173175
    174     get supportsSearch()
    175     {
    176         return true;
    177     }
    178 
    179     handleFindEvent(event)
     176    get supportsSearch() { return true; }
     177    get numberOfSearchResults() { return this.hasPerformedSearch ? this._searchMatches.length : null; }
     178    get hasPerformedSearch() { return this._currentSearchQuery !== ""; }
     179
     180    get supportsCustomFindBanner()
     181    {
     182        return WebInspector.isShowingConsoleTab();
     183    }
     184
     185    showCustomFindBanner()
    180186    {
    181187        if (!this.visible)
    … …  
    213219    findBannerRevealPreviousResult()
    214220    {
    215         this.highlightPreviousSearchMatch();
    216     }
    217 
    218     highlightPreviousSearchMatch()
    219     {
    220         if (!this.searchInProgress || isEmptyObject(this._searchMatches))
     221        if (!this.hasPerformedSearch || isEmptyObject(this._searchMatches))
    221222            return;
    222223
    … …  
    227228    findBannerRevealNextResult()
    228229    {
    229         this.highlightNextSearchMatch();
    230     }
    231 
    232     highlightNextSearchMatch()
    233     {
    234         if (!this.searchInProgress || isEmptyObject(this._searchMatches))
     230        if (!this.hasPerformedSearch || isEmptyObject(this._searchMatches))
    235231            return;
    236232
    … …  
    588584            return false;
    589585
    590         if (this.searchInProgress && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
     586        if (this.hasPerformedSearch && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
    591587            return false;
    592588
    … …  
    645641        var unfilteredMessages = this._unfilteredMessageElements();
    646642
    647         if (!this.searchInProgress)
     643        if (!this.hasPerformedSearch)
    648644            return unfilteredMessages;
    649645
    … …  
    661657        this._nestingLevel = 0;
    662658
    663         let searchQuery = this._findBanner.searchQuery;
    664         if (searchQuery)
    665             this._performSearch(searchQuery);
     659        if (this._currentSearchQuery)
     660            this.performSearch(this._currentSearchQuery);
    666661    }
    667662
    … …  
    717712        }, this);
    718713
    719         this._performSearch(this._findBanner.searchQuery);
     714        this.performSearch(this._currentSearchQuery);
    720715    }
    721716
    … …  
    874869    }
    875870
    876     findBannerPerformSearch(findBanner, searchTerms)
    877     {
    878         this._performSearch(searchTerms);
     871    findBannerPerformSearch(findBanner, searchQuery)
     872    {
     873        this.performSearch(searchQuery);
    879874    }
    880875
    881876    findBannerSearchCleared()
    882877    {
    883         this._performSearch("");
     878        this.searchCleared();
    884879    }
    885880
    … …  
    894889    }
    895890
    896     _performSearch(searchTerms)
     891    performSearch(searchQuery)
    897892    {
    898893        if (!isEmptyObject(this._searchHighlightDOMChanges))
    899894            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
    900895
    901         if (searchTerms === "") {
    902             delete this._selectedSearchMatch;
    903             this._matchingSearchElements = [];
    904             this.messagesElement.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
    905             return;
    906         }
    907 
    908         this.messagesElement.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
    909 
     896        this._currentSearchQuery = searchQuery;
    910897        this._searchHighlightDOMChanges = [];
    911898        this._searchMatches = [];
    912         this._selectedSearchMathIsValid = false;
    913         let numberOfResults = 0;
    914 
    915         var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
     899        this._selectedSearchMatchIsValid = false;
     900        this._selectedSearchMatch = null;
     901
     902        if (this._currentSearchQuery === "") {
     903            this.element.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
     904            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
     905            return;
     906        }
     907
     908        this.element.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
     909
     910        let searchRegex = new RegExp(this._currentSearchQuery.escapeForRegExp(), "gi");
    916911        this._unfilteredMessageElements().forEach(function(message) {
    917             var matchRanges = [];
    918             var text = message.textContent;
    919             var match = searchRegex.exec(text);
     912            let matchRanges = [];
     913            let text = message.textContent;
     914            let match = searchRegex.exec(text);
    920915            while (match) {
    921                 numberOfResults++;
    922916                matchRanges.push({offset: match.index, length: match[0].length});
    923917                match = searchRegex.exec(text);
    … …  
    927921                this._highlightRanges(message, matchRanges);
    928922
    929             var classList = message.classList;
     923            let classList = message.classList;
    930924            if (!isEmptyObject(matchRanges) || message.__commandView instanceof WebInspector.ConsoleCommandView || message.__message instanceof WebInspector.ConsoleCommandResultMessage)
    931925                classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
    … …  
    934928        }, this);
    935929
    936         if (!this._selectedSearchMathIsValid && this._selectedSearchMatch) {
     930        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
     931
     932        if (!this._selectedSearchMatchIsValid && this._selectedSearchMatch) {
    937933            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
    938             delete this._selectedSearchMatch;
    939         }
    940 
    941         this._findBanner.numberOfResults = numberOfResults;
     934            this._selectedSearchMatch = null;
     935        }
     936    }
     937
     938    searchCleared()
     939    {
     940        this.performSearch("");
    942941    }
    943942
    … …  
    951950            this._searchMatches.push({message, range, highlight: highlightedElements[index]});
    952951
    953             if (this._selectedSearchMatch && !this._selectedSearchMathIsValid && this._selectedSearchMatch.message === message) {
    954                 this._selectedSearchMathIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
    955                 if (this._selectedSearchMathIsValid) {
     952            if (this._selectedSearchMatch && !this._selectedSearchMatchIsValid && this._selectedSearchMatch.message === message) {
     953                this._selectedSearchMatchIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
     954                if (this._selectedSearchMatchIsValid) {
    956955                    delete this._selectedSearchMatch;
    957956                    this._highlightSearchMatchAtIndex(this._searchMatches.length - 1);

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

    r209342 r209882  
    157157}
    158158
     159#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider) {
     160    display: none;
     161}
     162
    159163#split-content-browser > .navigation-bar .item {
    160164    height: 100%;
Note: See TracChangeset for help on using the changeset viewer.