Changeset 121911 in webkit


Ignore:
Timestamp:
Jul 5, 2012 9:44:46 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: move search field to the bottom of the page.
​https://bugs.webkit.org/show_bug.cgi?id=90610

Reviewed by Vsevolod Vlasov.

This is the first step in the Search/replace implementation. This change moves search
field from the inspector toolbar to the inspector view footer that is visible upon Cmd/Ctrl+F.

  • English.lproj/localizedStrings.js:
  • inspector/front-end/InspectorView.js:

(WebInspector.InspectorView):
(WebInspector.InspectorView.prototype._pushToHistory):
(WebInspector.InspectorView.prototype.panelsElement):
(WebInspector.InspectorView.prototype.setFooterElement):

  • inspector/front-end/Panel.js:

(WebInspector.Panel.prototype.show):

  • inspector/front-end/ProfilesPanel.js:

(WebInspector.ProfilesPanel.prototype._reset):

  • inspector/front-end/SearchController.js:

(WebInspector.SearchController):
(WebInspector.SearchController.prototype.updateSearchLabel):
(WebInspector.SearchController.prototype.cancelSearch):
(WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
(WebInspector.SearchController.prototype.focusSearchField):
(WebInspector.SearchController.prototype._onKeyDown):
(WebInspector.SearchController.prototype._onNextButtonSearch):
(WebInspector.SearchController.prototype._onPrevButtonSearch):
(WebInspector.SearchController.prototype._performSearch):

  • inspector/front-end/inspector.css:

(#search):
(.toolbar-search-container):
(.toolbar-search-navigation):
(.toolbar-search-navigation:hover):
(.toolbar-search-navigation.toolbar-search-navigation-prev):
(.toolbar-search-navigation.toolbar-search-navigation-next):
(.toolbar-search-navigation-hidden):
(.status-bar):
(.search-drawer-header input[type="search"].search-config-search):
(.inspector-footer):
(.inspector-footer > div):

  • inspector/front-end/inspector.html:
  • inspector/front-end/inspector.js:

(WebInspector.get _setCompactMode):
(WebInspector.postDocumentKeyDown):

Location:
trunk/Source/WebCore
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r121908 r121911  
     12012-07-05  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: move search field to the bottom of the page.
     4        https://bugs.webkit.org/show_bug.cgi?id=90610
     5
     6        Reviewed by Vsevolod Vlasov.
     7
     8        This is the first step in the Search/replace implementation. This change moves search
     9        field from the inspector toolbar to the inspector view footer that is visible upon Cmd/Ctrl+F.
     10
     11        * English.lproj/localizedStrings.js:
     12        * inspector/front-end/InspectorView.js:
     13        (WebInspector.InspectorView):
     14        (WebInspector.InspectorView.prototype._pushToHistory):
     15        (WebInspector.InspectorView.prototype.panelsElement):
     16        (WebInspector.InspectorView.prototype.setFooterElement):
     17        * inspector/front-end/Panel.js:
     18        (WebInspector.Panel.prototype.show):
     19        * inspector/front-end/ProfilesPanel.js:
     20        (WebInspector.ProfilesPanel.prototype._reset):
     21        * inspector/front-end/SearchController.js:
     22        (WebInspector.SearchController):
     23        (WebInspector.SearchController.prototype.updateSearchLabel):
     24        (WebInspector.SearchController.prototype.cancelSearch):
     25        (WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
     26        (WebInspector.SearchController.prototype.focusSearchField):
     27        (WebInspector.SearchController.prototype._onKeyDown):
     28        (WebInspector.SearchController.prototype._onNextButtonSearch):
     29        (WebInspector.SearchController.prototype._onPrevButtonSearch):
     30        (WebInspector.SearchController.prototype._performSearch):
     31        * inspector/front-end/inspector.css:
     32        (#search):
     33        (.toolbar-search-container):
     34        (.toolbar-search-navigation):
     35        (.toolbar-search-navigation:hover):
     36        (.toolbar-search-navigation.toolbar-search-navigation-prev):
     37        (.toolbar-search-navigation.toolbar-search-navigation-next):
     38        (.toolbar-search-navigation-hidden):
     39        (.status-bar):
     40        (.search-drawer-header input[type="search"].search-config-search):
     41        (.inspector-footer):
     42        (.inspector-footer > div):
     43        * inspector/front-end/inspector.html:
     44        * inspector/front-end/inspector.js:
     45        (WebInspector.get _setCompactMode):
     46        (WebInspector.postDocumentKeyDown):
     47
    1482012-07-05  Sergey Rogulenko  <rogulenko@google.com>
    249

  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r121896 r121911  
    720720localizedStrings["%d Bytes"] = "%d Bytes";
    721721localizedStrings["Time End"] = "Time End";
     722localizedStrings["Search:"] = "Search:";

  • trunk/Source/WebCore/inspector/front-end/InspectorView.js

    r118520 r121911  
    5252    this._closeBracketIdentifiers = ["U+005D", "U+00DD"].keySet();
    5353    this._closeBracketCharCode = "]".charCodeAt(0);
     54    this._footerElementContainer = this.element.createChild("div", "inspector-footer status-bar hidden");
     55    this._panelsElement = this.element.createChild("div", "fill");
    5456}
    5557
    … …  
    191193            this._history.push(panelName);
    192194        this._historyIterator = this._history.length - 1;
     195    },
     196
     197    panelsElement: function()
     198    {
     199        return this._panelsElement;
     200    },
     201
     202    /**
     203     * @param {Element?} element
     204     */
     205    setFooterElement: function(element)
     206    {
     207        if (element) {
     208            this._footerElementContainer.removeStyleClass("hidden");
     209            this._footerElementContainer.appendChild(element);
     210            this._panelsElement.style.bottom = this._footerElementContainer.offsetHeight + "px";
     211        } else {
     212            this._footerElementContainer.addStyleClass("hidden");
     213            this._footerElementContainer.removeChildren();
     214            this._panelsElement.style.bottom = 0;
     215        }
     216        this.doResize();
    193217    }
    194218}

  • trunk/Source/WebCore/inspector/front-end/Panel.js

    r114740 r121911  
    6464    show: function()
    6565    {
    66         WebInspector.View.prototype.show.call(this, WebInspector.inspectorView.element);
     66        WebInspector.View.prototype.show.call(this, WebInspector.inspectorView.panelsElement());
    6767    },
    6868

  • trunk/Source/WebCore/inspector/front-end/SearchController.js

    r118152 r121911  
    3232/**
    3333 * @constructor
     34 * @param {Element} parentElement
    3435 */
    3536WebInspector.SearchController = function()
    3637{
    37     this.element = document.getElementById("search");
    38     this._matchesElement = document.getElementById("search-results-matches");
    39     this._searchItemElement = document.getElementById("toolbar-search-item");
    40     this._searchControlBoxElement = document.getElementById("toolbar-search-navigation-control");
    41 
    42     this.element.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
    43     this.element.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
    44     this.element.addEventListener("keydown", this._onKeyDown.bind(this), true);
    45    
    46     this._populateSearchNavigationButtons();
     38    this._element = document.createElement("div");
     39    this._element.textContent = "Search:";
     40
     41    this._searchInputElement = this._element.createChild("input");
     42    this._searchInputElement.id = "search";
     43    this._searchInputElement.type = "search";
     44    this._searchInputElement.incremental = true;
     45    this._searchInputElement.results = 0;
     46
     47    this._searchNavigationNextElement = this._element.createChild("div", "toolbar-search-navigation toolbar-search-navigation-next hidden");
     48    this._searchNavigationNextElement.addEventListener("mousedown", this._onNextButtonSearch.bind(this), false);
     49    this._searchNavigationNextElement.title = WebInspector.UIString("Search Next");
     50
     51    this._searchNavigationPrevElement = this._element.createChild("div", "toolbar-search-navigation toolbar-search-navigation-prev hidden");
     52    this._searchNavigationPrevElement.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
     53    this._searchNavigationPrevElement.title = WebInspector.UIString("Search Previous");
     54
     55    this._matchesElement = this._element.createChild("span", "search-results-matches");
     56
     57    this._searchInputElement.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
     58    this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
     59    this._searchInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
     60
     61    var closeButtonElement = this._element.createChild("span", "drawer-header-close-button");
     62    closeButtonElement.textContent = WebInspector.UIString("\u00D7");
     63    closeButtonElement.addEventListener("click", this.cancelSearch.bind(this), false);
    4764}
    4865
    … …  
    7188            return;
    7289        var newLabel = WebInspector.UIString("Search %s", panelName);
    73         this.element.setAttribute("placeholder", newLabel);
     90        this._searchInputElement.setAttribute("placeholder", newLabel);
    7491    },
    7592
    7693    cancelSearch: function()
    7794    {
    78         this.element.value = "";
     95        this._searchInputElement.value = "";
    7996        this._performSearch("");
     97        WebInspector.inspectorView.setFooterElement(null);
    8098    },
    8199
    … …  
    157175    },
    158176
    159     _updateSearchNavigationButtonState: function(visible)
    160     {
    161         if (visible)
    162             this._searchItemElement.addStyleClass("with-navigation-buttons");
    163         else
    164             this._searchItemElement.removeStyleClass("with-navigation-buttons");
     177    _updateSearchNavigationButtonState: function(enabled)
     178    {
     179        if (enabled) {
     180            this._searchNavigationPrevElement.removeStyleClass("hidden");
     181            this._searchNavigationNextElement.removeStyleClass("hidden");
     182        } else {
     183            this._searchNavigationPrevElement.addStyleClass("hidden");
     184            this._searchNavigationNextElement.addStyleClass("hidden");
     185        }
    165186    },
    166187
    … …  
    205226    focusSearchField: function()
    206227    {
    207         this.element.focus();
    208         this.element.select();
     228        WebInspector.inspectorView.setFooterElement(this._element);
     229        this._searchInputElement.focus();
     230        this._searchInputElement.select();
    209231    },
    210232
    … …  
    218240        // Escape Key will clear the field and clear the search results
    219241        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
    220             // If focus belongs here and text is empty - nothing to do, return unhandled.
    221             // When search was selected manually and is currently blank, we'd like Esc stay unhandled
    222             // and hit console drawer handler.
    223             if (event.target.value === "")
    224                 return;
    225 
    226242            event.consume(true);
    227 
    228243            this.cancelSearch();
    229244            WebInspector.setCurrentFocusElement(WebInspector.previousFocusElement());
    … …  
    258273    {
    259274        // Simulate next search on search-navigation-button click.
    260         this._performSearch(this.element.value, true, false, false);
     275        this._performSearch(this._searchInputElement.value, true, false, false);
    261276    },
    262277
    … …  
    264279    {
    265280        // Simulate previous search on search-navigation-button click.
    266         this._performSearch(this.element.value, true, true, false);
     281        this._performSearch(this._searchInputElement.value, true, true, false);
    267282    },
    268283
    … …  
    328343        currentPanel.currentQuery = query;
    329344        currentPanel.performSearch(query);
    330     },
    331 
    332     /**
    333      * @param {string=} direction
    334      */
    335     _createSearchNavigationButton: function(direction)
    336     {
    337         var searchNavigationControlElement = document.createElement("div");
    338         var searchNavigationIconElement = document.createElement("div");
    339        
    340         searchNavigationControlElement.className = "toolbar-search-navigation-label";
    341        
    342         switch (direction) {
    343         case "prev":
    344             var searchTitle = WebInspector.UIString("Search Previous");
    345             searchNavigationIconElement.className = "toolbar-search-navigation-icon-prev";
    346             this._searchNavigationPrev = searchNavigationControlElement;
    347             this._searchNavigationPrev.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
    348             break;
    349              
    350         case "next":
    351             var searchTitle = WebInspector.UIString("Search Next");
    352             searchNavigationIconElement.className = "toolbar-search-navigation-icon-next";
    353             this._searchNavigationNext = searchNavigationControlElement;
    354             this._searchNavigationNext.addEventListener("mousedown", this._onNextButtonSearch.bind(this), false);
    355             break;
    356         }
    357 
    358         searchNavigationControlElement.setAttribute("title" , searchTitle);
    359         searchNavigationControlElement.appendChild(searchNavigationIconElement); 
    360         this._searchControlBoxElement.appendChild(searchNavigationControlElement);
    361     },
    362 
    363     _populateSearchNavigationButtons: function()
    364     {
    365         // Lazily adding search navigation keys to dom.
    366         this._createSearchNavigationButton("prev");
    367         this._createSearchNavigationButton("next");
    368345    }
    369346}

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r121853 r121911  
    264264}
    265265
    266 #toolbar-search-item {
    267     display: -webkit-box;
    268     -webkit-box-orient: horizontal;
    269     -webkit-box-align: center;
    270     -webkit-box-pack: end;
    271 }
    272 
    273266#search {
    274267    width: 205px;
    275     font-size: 16px;
    276 }
    277 
    278 .with-navigation-buttons #search {
    279     width: 165px;
    280 }
    281 
    282 .toolbar-search-navigation-label {
    283     display: none;
     268    margin-left: 4px;
     269    margin-right: 4px;
     270    font-size: 11px;
     271}
     272
     273.toolbar-search-navigation {
     274    width: 16px;
     275    height: 16px;
     276    position: relative;
     277    top: 4px;
     278    margin: 0px 1px;
     279    background-repeat: no-repeat;
     280    display: inline-block;
     281    background-position: 2px 5px;
    284282    border: 1px solid transparent;
    285     border-radius: 2px;
    286     padding: 3px;
    287     margin-left: 2px;
    288     width: 18px;
    289     height: 18px;
    290     float: right;
    291 }
    292 
    293 .with-navigation-buttons .toolbar-search-navigation-label {
    294     display: block;
    295 }
    296 
    297 .toolbar-search-navigation-label:hover {
     283}
     284
     285.toolbar-search-navigation:hover {
    298286    border: 1px solid rgba(120, 120, 120, 0.6);   
    299287}
    300288
    301 .toolbar-search-navigation-icon-prev , .toolbar-search-navigation-icon-next {
    302     width: 9px;
    303     margin-top: 2px;
    304     height: 100%;
    305     background-repeat: no-repeat;
    306 }
    307 
    308 .toolbar-search-navigation-icon-prev {
     289.toolbar-search-navigation.toolbar-search-navigation-prev {
    309290    background-image: url(Images/searchPrev.png);
    310291}
    311292
    312 .toolbar-search-navigation-icon-next {
     293.toolbar-search-navigation.toolbar-search-navigation-next {
    313294    background-image: url(Images/searchNext.png);
     295}
     296
     297.toolbar-search-navigation-hidden {
     298    background: none;
    314299}
    315300
    … …  
    318303}
    319304
    320 #search-results-matches {
     305.search-results-matches {
    321306    font-size: 11px;
    322307    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     308    padding-left: 4px;
    323309}
    324310
    … …  
    24282414
    24292415.search-drawer-header input[type="search"].search-config-search {
    2430         font-size: 11px;
     2416    font-size: 11px;
    24312417    margin-left: 4px;
    24322418    color: #303030;
    … …  
    27792765    max-width: 200px;
    27802766}
     2767
     2768.inspector-footer {
     2769    position: absolute;
     2770    bottom: 0;
     2771    left: 0;
     2772    right: 0;
     2773    font-size: 11px;
     2774    padding-left: 7px;
     2775    padding-bottom: 7px;
     2776}
     2777
     2778.inspector-footer > div {
     2779    vertical-align: middle;
     2780}

  • trunk/Source/WebCore/inspector/front-end/inspector.html

    r121850 r121911  
    227227        <div id="toolbar-controls">
    228228            <div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">&raquo;</button></div>
    229             <div class="toolbar-item hidden" id="search-results-matches"></div>
    230             <div class="toolbar-item" id="toolbar-search-item">
    231                 <input id="search" type="search" incremental results="0">
    232                 <div id="toolbar-search-navigation-control"></div>
    233             </div>
    234229            <div class="toolbar-item close-right"><button id="close-button-right"></button></div>
    235230        </div>

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r121843 r121911  
    262262            WebInspector.toolbar.compact = x;
    263263
    264         if (WebInspector.searchController)
    265             WebInspector.searchController.updateSearchLabel();
    266 
    267264        if (WebInspector.drawer)
    268265            WebInspector.drawer.resize();
    … …  
    820817        return;
    821818
    822     if (event.keyIdentifier === "U+001B") { // Escape key
     819    if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
    823820        // If drawer is open with some view other than console then close it.
    824821        if (!this._toggleConsoleButton.toggled && WebInspector.drawer.visible)
Note: See TracChangeset for help on using the changeset viewer.