Changeset 191071 in webkit


Ignore:
Timestamp:
Oct 14, 2015 2:03:05 PM (9 years ago)
Author:
Joseph Pecoraro
Message:

Web Inspector: Console SearchBar should work more like ContentBrowser FindBanner
​https://bugs.webkit.org/show_bug.cgi?id=149505

Patch by João Oliveira <​hello@jxs.pt> on 2015-10-13
Reviewed by Joseph Pecoraro.

Console tab now uses findBanner, adapted LogContentView to use findBanner,
and findBanner to be more agnostic to both usecases, either as fixed, on console tab,
and hideable on other inspector tabs.

  • UserInterface/Views/FindBanner.css:

(.find-banner.console-find-banner):
(.find-banner.console-findbanner input[type="search"]):

  • UserInterface/Views/FindBanner.js:

(WebInspector.FindBanner):
(WebInspector.FindBanner.set targetElement.delayedWork):
(WebInspector.FindBanner.prototype.set targetElement):
(WebInspector.FindBanner.prototype.get showing):
(WebInspector.FindBanner.prototype.focus):
(WebInspector.FindBanner.prototype._clearAndBlur):
(WebInspector.FindBanner.prototype.show.delayedWork):
(WebInspector.FindBanner.prototype.show):
(WebInspector.FindBanner.prototype.hide):
(WebInspector.FindBanner.prototype.get element): Deleted.
(WebInspector.FindBanner.prototype._inputFieldSearch): Deleted.

  • UserInterface/Views/LogContentView.js:

(WebInspector.LogContentView):
(WebInspector.LogContentView.prototype.get navigationItems):
(WebInspector.LogContentView.prototype.handleFindEvent):
(WebInspector.LogContentView.prototype.findBannerRevealPreviousResult):
(WebInspector.LogContentView.prototype.findBannerRevealNextResult):
(WebInspector.LogContentView.prototype._filterMessageElements):
(WebInspector.LogContentView.prototype.findBannerPerformSearch):
(WebInspector.LogContentView.prototype.findBannerSearchCleared):
(WebInspector.LogContentView.prototype.revealNextSearchResult):
(WebInspector.LogContentView.prototype.revealPreviousSearchResult):
(WebInspector.LogContentView.prototype._performSearch):
(WebInspector.LogContentView.prototype.searchBarDidActivate): Deleted.
(WebInspector.LogContentView.prototype._searchTextDidChange): Deleted.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r191004 r191071  
     12015-10-13  João Oliveira  <hello@jxs.pt>
     2
     3        Web Inspector: Console SearchBar should work more like ContentBrowser FindBanner
     4        https://bugs.webkit.org/show_bug.cgi?id=149505
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Console tab now uses findBanner, adapted LogContentView to use findBanner,
     9        and findBanner to be more agnostic to both usecases, either as fixed, on console tab,
     10        and hideable on other inspector tabs.
     11
     12        * UserInterface/Views/FindBanner.css:
     13        (.find-banner.console-find-banner):
     14        (.find-banner.console-findbanner input[type="search"]):
     15        * UserInterface/Views/FindBanner.js:
     16        (WebInspector.FindBanner):
     17        (WebInspector.FindBanner.set targetElement.delayedWork):
     18        (WebInspector.FindBanner.prototype.set targetElement):
     19        (WebInspector.FindBanner.prototype.get showing):
     20        (WebInspector.FindBanner.prototype.focus):
     21        (WebInspector.FindBanner.prototype._clearAndBlur):
     22        (WebInspector.FindBanner.prototype.show.delayedWork):
     23        (WebInspector.FindBanner.prototype.show):
     24        (WebInspector.FindBanner.prototype.hide):
     25        (WebInspector.FindBanner.prototype.get element): Deleted.
     26        (WebInspector.FindBanner.prototype._inputFieldSearch): Deleted.
     27        * UserInterface/Views/LogContentView.js:
     28        (WebInspector.LogContentView):
     29        (WebInspector.LogContentView.prototype.get navigationItems):
     30        (WebInspector.LogContentView.prototype.handleFindEvent):
     31        (WebInspector.LogContentView.prototype.findBannerRevealPreviousResult):
     32        (WebInspector.LogContentView.prototype.findBannerRevealNextResult):
     33        (WebInspector.LogContentView.prototype._filterMessageElements):
     34        (WebInspector.LogContentView.prototype.findBannerPerformSearch):
     35        (WebInspector.LogContentView.prototype.findBannerSearchCleared):
     36        (WebInspector.LogContentView.prototype.revealNextSearchResult):
     37        (WebInspector.LogContentView.prototype.revealPreviousSearchResult):
     38        (WebInspector.LogContentView.prototype._performSearch):
     39        (WebInspector.LogContentView.prototype.searchBarDidActivate): Deleted.
     40        (WebInspector.LogContentView.prototype._searchTextDidChange): Deleted.
     41
    1422015-10-13  Nikita Vasilyev  <nvasilyev@apple.com>
    243

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

    r190640 r191071  
    189189    line-height: 21px;
    190190}
     191
     192.find-banner.console-find-banner {
     193    position: relative;
     194    top: auto;
     195    border: 0;
     196}
     197
     198.find-banner.console-find-banner > input[type="search"] {
     199    padding-top: 0;
     200    margin: 1px 6px;
     201    outline: none;
     202    -webkit-appearance: none;
     203    border: 1px solid hsla(0, 0%, 0%, 0.35);
     204    border-radius: 3px;
     205    background-color: hsla(0, 0%, 100%, 0.2);
     206    background-clip: padding-box;
     207    height: 22px;   
     208}
     209
     210.find-banner.console-find-banner > input[type="search"]::-webkit-input-placeholder {
     211    color: hsla(0, 0%, 0%, 0.35);
     212}
     213
     214.find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
     215    margin-left: 4px;
     216}
     217
     218.find-banner.console-find-banner > input[type="search"]:focus {
     219    background-color: white;
     220}

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

    r183579 r191071  
    2424 */
    2525
    26 WebInspector.FindBanner = class FindBanner extends WebInspector.Object
     26WebInspector.FindBanner = class FindBanner extends WebInspector.NavigationItem
    2727{
    28     constructor(delegate, element)
     28    constructor(delegate, className, fixed = false)
    2929    {
    3030        super();
    … …  
    3232        this._delegate = delegate || null;
    3333
    34         this._element = element || document.createElement("div");
    35         this._element.classList.add("find-banner");
     34        this.element.classList.add("find-banner");
     35
     36        if (className)
     37            this.element.classList.add(className);
    3638
    3739        this._resultCountLabel = document.createElement("label");
    38         this._element.appendChild(this._resultCountLabel);
     40        this.element.appendChild(this._resultCountLabel);
    3941
    4042        this._previousResultButton = document.createElement("button");
    … …  
    4345        this._previousResultButton.disabled = true;
    4446        this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
    45         this._element.appendChild(this._previousResultButton);
     47        this.element.appendChild(this._previousResultButton);
    4648
    4749        var previousResultButtonGlyphElement = document.createElement("div");
    … …  
    5456        this._nextResultButton.disabled = true;
    5557        this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
    56         this._element.appendChild(this._nextResultButton);
     58        this.element.appendChild(this._nextResultButton);
    5759
    5860        var nextResultButtonGlyphElement = document.createElement("div");
    … …  
    6971        this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
    7072        this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
    71         this._element.appendChild(this._inputField);
    72 
    73         this._doneButton = document.createElement("button");
    74         this._doneButton.textContent = WebInspector.UIString("Done");
    75         this._doneButton.addEventListener("click", this._doneButtonClicked.bind(this));
    76         this._element.appendChild(this._doneButton);
     73        this.element.appendChild(this._inputField);
     74
     75        if (fixed)
     76            this._clearAndBlurKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._clearAndBlur.bind(this), this.element);
     77        else {
     78            let doneButtonElement = document.createElement("button");
     79            doneButtonElement.textContent = WebInspector.UIString("Done");
     80            doneButtonElement.addEventListener("click", this._doneButtonClicked.bind(this));
     81            this.element.appendChild(doneButtonElement);
     82            this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this.element);
     83        }
    7784
    7885        this._numberOfResults = null;
    … …  
    8188        this._previousSearchValue = "";
    8289
    83         this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this._element);
    8490        this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "E", this._populateSearchQueryFromSelection.bind(this));
    8591        this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
    … …  
    102108    {
    103109        this._delegate = newDelegate || null;
    104     }
    105 
    106     get element()
    107     {
    108         return this._element;
    109110    }
    110111
    … …  
    158159        {
    159160            oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
    160             this._element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
     161            this.element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
    161162        }
    162163
    … …  
    168169            this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
    169170
    170             this._element.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
    171             this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
     171            this.element.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
     172            this.element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
    172173
    173174            // Delay so we can remove the no transition style class after the other style changes are committed.
    … …  
    183184    get showing()
    184185    {
    185         return this._element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
     186        return this.element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
     187    }
     188
     189    focus()
     190    {
     191        // FIXME: Workaround for: <https://webkit.org/b/149504> Caret missing from <input> after clearing text and calling select()
     192        if (!this._inputField.value.length)
     193            this._inputField.focus();
     194        else
     195            this._inputField.select();
     196    }
     197
     198    _clearAndBlur()
     199    {
     200        this.numberOfResults = null;
     201
     202        this._inputField.value = "";
     203        this._previousSearchValue = "";
     204
     205        if (this._delegate.findBannerSearchCleared)
     206            this._delegate.findBannerSearchCleared();
     207        if (this._delegate.findBannerWantsToClearAndBlur)
     208            this._delegate.findBannerWantsToClearAndBlur();
    186209    }
    187210
    … …  
    196219            return;
    197220
    198         if (this._element.parentNode !== this._targetElement.parentNode)
    199             this._targetElement.parentNode.insertBefore(this._element, this._targetElement);
     221        if (this.element.parentNode !== this._targetElement.parentNode)
     222            this._targetElement.parentNode.insertBefore(this.element, this._targetElement);
    200223
    201224        function delayedWork()
    202225        {
    203226            this._targetElement.classList.add(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
    204             this._element.classList.add(WebInspector.FindBanner.ShowingStyleClassName);
     227            this.element.classList.add(WebInspector.FindBanner.ShowingStyleClassName);
    205228
    206229            this._inputField.select();
    … …  
    223246
    224247        this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
    225         this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
     248        this.element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
    226249
    227250        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidHide);
    … …  
    277300        } else {
    278301            this.numberOfResults = null;
    279 
    280302            if (this._delegate && typeof this._delegate.findBannerSearchCleared === "function")
    281303                this._delegate.findBannerSearchCleared(this);

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

    r187105 r191071  
    186186}
    187187
    188 .search-bar.log-search-bar > input[type="search"] {
    189     width: 150px;
    190     border: 1px solid hsla(0, 0%, 0%, 0.35);
    191     padding-left: 4px;
    192 }
    193 
    194188.search-in-progress .console-item.filtered-out-by-search {
    195189    display: none;

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

    r189924 r191071  
    5858        this._lastMessageView = null;
    5959
    60         this._searchBar = new WebInspector.SearchBar("log-search-bar", WebInspector.UIString("Filter Console Log"), this);
    61         this._searchBar.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
     60        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", true);
     61        this._findBanner.inputField.placeholder = WebInspector.UIString("Filter Console Log");
    6262
    6363        var scopeBarItems = [
    … …  
    9292    get navigationItems()
    9393    {
    94         var navigationItems = [this._searchBar, this._scopeBar, this._clearLogNavigationItem];
     94        let navigationItems = [this._findBanner, this._scopeBar, this._clearLogNavigationItem];
    9595        if (WebInspector.isShowingSplitConsole())
    9696            navigationItems.push(this._showConsoleTabNavigationItem);
    … …  
    189189            return;
    190190
    191         this._searchBar.focus();
     191        this._findBanner.focus();
    192192    }
    193193
    … …  
    218218    }
    219219
     220    findBannerRevealPreviousResult()
     221    {
     222        this.highlightPreviousSearchMatch();
     223    }
     224
    220225    highlightPreviousSearchMatch()
    221226    {
    … …  
    227232    }
    228233
     234    findBannerRevealNextResult()
     235    {
     236        this.highlightNextSearchMatch();
     237    }
     238
    229239    highlightNextSearchMatch()
    230240    {
    … …  
    236246    }
    237247
    238     searchBarWantsToLoseFocus(searchBar)
     248    findBannerWantsToClearAndBlur(findBanner)
    239249    {
    240250        if (this._selectedMessages.length)
    … …  
    242252        else
    243253            this.prompt.focus();
    244     }
    245 
    246     searchBarDidActivate(searchBar)
    247     {
    248         if (!isEmptyObject(this._searchMatches))
    249             this._highlightSearchMatchAtIndex(0);
    250         this.prompt.focus();
    251254    }
    252255
    … …  
    695698        }, this);
    696699
    697         this._performSearch();
     700        this._performSearch("");
    698701    }
    699702
    … …  
    850853    }
    851854
    852     _searchTextDidChange(event)
    853     {
    854         this._performSearch();
    855     }
    856 
    857     _performSearch()
     855    findBannerPerformSearch(findBanner, searchTerms)
     856    {
     857        this._performSearch(searchTerms);
     858    }
     859
     860    findBannerSearchCleared()
     861    {
     862        this._performSearch("");
     863    }
     864
     865    revealNextSearchResult()
     866    {
     867        this.findBannerRevealNextResult();
     868    }
     869
     870    revealPreviousSearchResult()
     871    {
     872        this.findBannerRevealPreviousResult();
     873    }
     874
     875    _performSearch(searchTerms)
    858876    {
    859877        if (!isEmptyObject(this._searchHighlightDOMChanges))
    860878            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
    861 
    862         var searchTerms = this._searchBar.text;
    863879
    864880        if (searchTerms === "") {
    … …  
    874890        this._searchMatches = [];
    875891        this._selectedSearchMathIsValid = false;
     892        let numberOfResults = 0;
    876893
    877894        var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
    … …  
    881898            var match = searchRegex.exec(text);
    882899            while (match) {
     900                numberOfResults++;
    883901                matchRanges.push({ offset: match.index, length: match[0].length });
    884902                match = searchRegex.exec(text);
    … …  
    899917            delete this._selectedSearchMatch;
    900918        }
     919
     920        this._findBanner.numberOfResults = numberOfResults;
    901921    }
    902922

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

    r190436 r191071  
    188188}
    189189
    190 #split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-search-bar, .log-scope-bar) {
    191     pointer-events: none;
    192 }
    193 
    194 #split-content-browser > .navigation-bar > :matches(.log-search-bar, .log-scope-bar) > :matches(li, input) {
     190#split-content-browser > .navigation-bar > .log-scope-bar > li {
    195191    pointer-events: all;
    196192}

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

    r187105 r191071  
    4444}
    4545
    46 .search-bar > input[type="search"]:focus { background-color: white; }
    47 .search-bar > input[type="search"]:not(:placeholder-shown) { background-color: white; } /* Needs to be a separate rule. See http://webkit.org/b/118162 */
     46.search-bar > input[type="search"]:focus {
     47    background-color: white;
     48}
Note: See TracChangeset for help on using the changeset viewer.