Changeset 117746 in webkit


Ignore:
Timestamp:
May 21, 2012 1:36:39 AM (12 years ago)
Author:
pfeldman@chromium.org
Message:

Web Inspector: make search results view more dense
​https://bugs.webkit.org/show_bug.cgi?id=86937

Reviewed by Yury Semikhatsky.

  • moved search field to the 'drawer status bar'
  • search view is now shown on scripts panel only
  • switching from the scripts panel closes the search view
  • beautified the looks (see the screenshot)
  • English.lproj/localizedStrings.js:
  • inspector/front-end/AdvancedSearchController.js:

(WebInspector.AdvancedSearchController.prototype.handleShortcut):
(WebInspector.AdvancedSearchController.prototype.show):
(WebInspector.AdvancedSearchController.prototype.close):
(WebInspector.SearchView):
(WebInspector.FileBasedSearchResultsPane):

  • inspector/front-end/ScriptsPanel.js:

(WebInspector.ScriptsPanel.prototype.willHide):

  • inspector/front-end/externs.js:

(WebInspector.showViewInDrawer):
(WebInspector.closeViewInDrawer):

  • inspector/front-end/inspector.css:

(.search-drawer-header input[type="search"].search-config-search):
(.search-drawer-header label.search-config-label):
(.search-drawer-header input[type="checkbox"].search-config-checkbox):
(body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox):
(body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox):
(.drawer-header):
(.drawer-header-close-button):
(.drawer-header-close-button:hover):
(.drawer-header-close-button:active):
(.search-view .search-results):
(#search-results-pane-file-based li):
(#search-results-pane-file-based ol):
(#search-results-pane-file-based ol.children):
(#search-results-pane-file-based ol.children.expanded):
(#search-results-pane-file-based li.parent::before):
(#search-results-pane-file-based li.parent.expanded::before):
(#search-results-pane-file-based .search-result):
(#search-results-pane-file-based .show-more-matches):

  • inspector/front-end/inspector.js:

(WebInspector.showViewInDrawer.closeButtonPressed):
(WebInspector.showViewInDrawer):
(WebInspector.closeViewInDrawer):
(WebInspector.postDocumentKeyDown):

Location:
trunk/Source/WebCore
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r117744 r117746  
     12012-05-21  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Web Inspector: make search results view more dense
     4        https://bugs.webkit.org/show_bug.cgi?id=86937
     5
     6        Reviewed by Yury Semikhatsky.
     7
     8        - moved search field to the 'drawer status bar'
     9        - search view is now shown on scripts panel only
     10        - switching from the scripts panel closes the search view
     11        - beautified the looks (see the screenshot)
     12
     13        * English.lproj/localizedStrings.js:
     14        * inspector/front-end/AdvancedSearchController.js:
     15        (WebInspector.AdvancedSearchController.prototype.handleShortcut):
     16        (WebInspector.AdvancedSearchController.prototype.show):
     17        (WebInspector.AdvancedSearchController.prototype.close):
     18        (WebInspector.SearchView):
     19        (WebInspector.FileBasedSearchResultsPane):
     20        * inspector/front-end/ScriptsPanel.js:
     21        (WebInspector.ScriptsPanel.prototype.willHide):
     22        * inspector/front-end/externs.js:
     23        (WebInspector.showViewInDrawer):
     24        (WebInspector.closeViewInDrawer):
     25        * inspector/front-end/inspector.css:
     26        (.search-drawer-header input[type="search"].search-config-search):
     27        (.search-drawer-header label.search-config-label):
     28        (.search-drawer-header input[type="checkbox"].search-config-checkbox):
     29        (body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox):
     30        (body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox):
     31        (.drawer-header):
     32        (.drawer-header-close-button):
     33        (.drawer-header-close-button:hover):
     34        (.drawer-header-close-button:active):
     35        (.search-view .search-results):
     36        (#search-results-pane-file-based li):
     37        (#search-results-pane-file-based ol):
     38        (#search-results-pane-file-based ol.children):
     39        (#search-results-pane-file-based ol.children.expanded):
     40        (#search-results-pane-file-based li.parent::before):
     41        (#search-results-pane-file-based li.parent.expanded::before):
     42        (#search-results-pane-file-based .search-result):
     43        (#search-results-pane-file-based .show-more-matches):
     44        * inspector/front-end/inspector.js:
     45        (WebInspector.showViewInDrawer.closeButtonPressed):
     46        (WebInspector.showViewInDrawer):
     47        (WebInspector.closeViewInDrawer):
     48        (WebInspector.postDocumentKeyDown):
     49
    1502012-05-18  Andreas Kling  <kling@webkit.org>
    251

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

    r117564 r117746  
    5555    {
    5656        if (WebInspector.KeyboardShortcut.makeKeyFromEvent(event) === this._shortcut.key) {
    57             this.show();
    58             event.handled = true;
     57            if (!this._searchView || !this._searchView.isShowing() || this._searchView._search !== document.activeElement) {
     58                WebInspector.inspectorView.setCurrentPanel(WebInspector.panels.scripts);
     59                this.show();
     60            } else
     61                this.close();
     62            event.consume();
    5963        }
    6064    },
    … …  
    8286            this._searchView.focus();
    8387        else
    84             WebInspector.showViewInDrawer(this._searchView);
     88            WebInspector.showViewInDrawer(this._searchView._searchPanelElement, this._searchView, this.stopSearch.bind(this));
    8589    },
    8690
    … …  
    8892    {
    8993        this.stopSearch();
    90         WebInspector.closeDrawerView();
     94        WebInspector.closeViewInDrawer();
    9195    },
    9296
    … …  
    172176    this.element.className = "search-view";
    173177
    174     this._searchPanelElement = this.element.createChild("div");
    175     this._searchPanelElement.tabIndex = 0;
    176     this._searchPanelElement.className = "search-panel";
     178    this._searchPanelElement = document.createElement("span");
     179    this._searchPanelElement.className = "search-drawer-header";
    177180    this._searchPanelElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
    178181   
    … …  
    180183    this._searchResultsElement.className = "search-results";
    181184   
     185    this._searchLabel = this._searchPanelElement.createChild("span");
     186    this._searchLabel.textContent = WebInspector.UIString("Search sources");
    182187    this._search = this._searchPanelElement.createChild("input");
    183188    this._search.setAttribute("type", "search");
    184189    this._search.addStyleClass("search-config-search");
    185190    this._search.setAttribute("results", "0");
    186     this._search.setAttribute("size", 20);
     191    this._search.setAttribute("size", 30);
    187192
    188193    this._ignoreCaseLabel = this._searchPanelElement.createChild("label");
    … …  
    199204    this._regexCheckbox.addStyleClass("search-config-checkbox");
    200205    this._regexLabel.appendChild(document.createTextNode(WebInspector.UIString("Regular expression")));
    201    
    202     this._searchDoneButton = this._searchPanelElement.createChild("button");
    203     this._searchDoneButton.textContent = WebInspector.UIString("Close");
    204     this._searchDoneButton.addStyleClass("search-close-button");
    205     this._searchDoneButton.addEventListener("click", this._closeButtonPressed.bind(this));
    206206   
    207207    this._searchStatusBarElement = document.createElement("div");
    … …  
    392392    },
    393393
    394     _closeButtonPressed: function()
    395     {
    396         this._controller.close();
    397     },
    398 
    399394    _searchStopButtonPressed: function()
    400395    {
    … …  
    502497   
    503498    this._treeOutlineElement = document.createElement("ol");
    504     this._treeOutlineElement.className = "outline-disclosure";
    505     this._treeOutlineElement.addStyleClass("search-results-outline-disclosure");
     499    this._treeOutlineElement.className = "search-results-outline-disclosure";
    506500    this.element.appendChild(this._treeOutlineElement);
    507501    this._treeOutline = new TreeOutline(this._treeOutlineElement);

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

    r117600 r117746  
    6666
    6767        uiSourceCode.contentChanged(newSource);
    68         callback();
     68        callback(null);
    6969    }
    7070    WebInspector.debuggerModel.setScriptSource(script.scriptId, newSource, didEditScriptSource.bind(this));

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

    r117462 r117746  
    227227
    228228        this._navigatorController.wasShown();
     229    },
     230
     231    willHide: function()
     232    {
     233        WebInspector.closeViewInDrawer();
    229234    },
    230235

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

    r116222 r117746  
    130130
    131131/**
     132 * @param {Element} element
    132133 * @param {WebInspector.View} view
    133  */
    134 WebInspector.showViewInDrawer = function(view) {}
    135 
    136 WebInspector.closeDrawerView = function() {}
     134 * @param {function()=} onclose
     135 */
     136WebInspector.showViewInDrawer = function(element, view, onclose) {}
     137
     138WebInspector.closeViewInDrawer = function() {}
    137139
    138140/**

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

    r117447 r117746  
    23752375}
    23762376
    2377 .search-view .search-panel {
    2378     position: absolute;
    2379     top: 0;
    2380     height: 28px;
    2381     left: 0;
    2382     right: 0;
    2383     padding-top: 2px;
    2384     padding-left: 10px;
    2385     padding-right: 10px;
    2386     background-color: #EBEBEB;
    2387     border-bottom: 1px solid #BBB;
    2388     overflow: hidden;
     2377.search-drawer-header input[type="search"].search-config-search {
     2378        font-size: 11px;
     2379    margin-left: 4px;
     2380    color: #303030;
     2381    position: relative;
     2382}
     2383
     2384body.platform-mac .search-drawer-header input[type="search"].search-config-search {
     2385    top: 1px;
     2386}
     2387
     2388.search-drawer-header label.search-config-label {
     2389    margin-left: 8px;
     2390    color: #303030;
     2391}
     2392
     2393.search-drawer-header input[type="checkbox"].search-config-checkbox {
     2394    vertical-align: bottom;
     2395}
     2396
     2397body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox {
     2398    margin-bottom: 5px;
     2399}
     2400
     2401body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox {
     2402    margin-bottom: 4px;
     2403}
     2404
     2405.drawer-header {
    23892406    font-size: 11px;
    2390 }
    2391 
    2392 .search-view .search-panel input[type="search"].search-config-search {
    2393     margin-right: 8px;
    2394     font-size: 11px;
    2395     color: #303030;
    2396 }
    2397 
    2398 .search-view .search-panel label.search-config-label {
    2399     margin-right: 8px;
    2400     color: #303030;
    2401 }
    2402 
    2403 .search-view .search-panel input[type="checkbox"].search-config-checkbox {
    2404     vertical-align: bottom;
    2405 }
    2406 
    2407 body:not(.platform-mac) .search-view .search-panel input[type="checkbox"].search-config-checkbox {
    2408     margin-bottom: 5px;
    2409 }
    2410 
    2411 body.platform-mac .search-view .search-panel input[type="checkbox"].search-config-checkbox {
    2412     margin-bottom: 4px;
    2413 }
    2414 
    2415 .search-view .search-panel button.search-close-button {
    2416     font-size: 11px;
    2417     float: right;
     2407    border-right: 1px solid rgb(197, 197, 197);
     2408    line-height: 23px;
     2409    padding-left: 6px;
     2410}
     2411
     2412.drawer-header-close-button {
     2413    font-family: Arial, monospace;
     2414    padding: 3px 6px;
     2415    font-size: 14px;
     2416    color:rgb(80, 80, 80);
     2417    opacity: 0.5;
     2418    position: relative;
     2419    top: 1px;
     2420}
     2421
     2422.drawer-header-close-button:hover {
     2423    opacity: 1;
     2424}
     2425
     2426.drawer-header-close-button:active {
     2427    opacity: 0.7;
    24182428}
    24192429
    … …  
    24642474.search-view .search-results {
    24652475    position: absolute;
    2466     top: 35px;
     2476    top: 0;
    24672477    bottom: 0;
    24682478    left: 0;
    … …  
    24712481}
    24722482
    2473 #search-results-pane-file-based .search-results-outline-disclosure {
    2474     padding-bottom: 5px;
     2483#search-results-pane-file-based li {
     2484    list-style: none;
     2485}
     2486
     2487#search-results-pane-file-based ol {
     2488    -webkit-padding-start: 0;
     2489    margin-top: 0;
     2490}
     2491
     2492#search-results-pane-file-based ol.children {
     2493    display: none;
     2494}
     2495
     2496#search-results-pane-file-based ol.children.expanded {
     2497    display: block;
     2498}
     2499
     2500#search-results-pane-file-based li.parent::before {
     2501    content: url(Images/treeRightTriangleBlack.png);
     2502    position: relative;
     2503    left: -4px;
     2504}
     2505
     2506#search-results-pane-file-based li.parent.expanded::before {
     2507    content: url(Images/treeDownTriangleBlack.png);
    24752508}
    24762509
    24772510#search-results-pane-file-based .search-result {
    24782511    font-size: 12px;
    2479     margin-top: 3px;
     2512    padding: 2px 0 2px 10px;
    24802513    word-wrap: normal;
    24812514    white-space: pre;
    … …  
    24882521}
    24892522
    2490 #search-results-pane-file-based .search-result:first-child {
    2491     margin-top: 1px;
    2492 }
    2493 
    2494 
    24952523#search-results-pane-file-based .search-result .search-result-file-name {
    24962524    font-weight: bold;
    … …  
    25042532
    25052533#search-results-pane-file-based .show-more-matches {
    2506     margin-left: 5px;
     2534    padding: 4px 0;
    25072535    color: #333;
    25082536    cursor: pointer;
     2537    font-size: 11px;
     2538    margin-left: 20px;
    25092539}
    25102540

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

    r117564 r117746  
    123123    },
    124124
    125     closeDrawerView: function()
    126     {
    127         // Once drawer is closed console should be shown if it was shown before current view replaced it in drawer.
    128         if (!this._consoleWasShown)
    129             this.drawer.hide(WebInspector.Drawer.AnimationType.Immediately);
    130         else
    131             this._toggleConsoleButtonClicked();           
    132     },
    133 
    134125    /**
     126     * @param {Element} statusBarElement
    135127     * @param {WebInspector.View} view
     128     * @param {function()=} onclose
    136129     */
    137     showViewInDrawer: function(view)
     130    showViewInDrawer: function(statusBarElement, view, onclose)
    138131    {
    139132        this._toggleConsoleButton.title = WebInspector.UIString("Hide console.");
    140133        this._toggleConsoleButton.toggled = false;
     134        this._closePreviousDrawerView();
     135
     136        var drawerStatusBarHeader = document.createElement("div");
     137        drawerStatusBarHeader.className = "drawer-header";
     138        drawerStatusBarHeader.appendChild(statusBarElement);
     139        drawerStatusBarHeader.onclose = onclose;
     140
     141        var closeButton = drawerStatusBarHeader.createChild("span");
     142        closeButton.textContent = WebInspector.UIString("\u00D7");
     143        closeButton.addStyleClass("drawer-header-close-button");
     144        closeButton.addEventListener("click", closeButtonPressed.bind(this), false);
     145
     146        function closeButtonPressed(event)
     147        {
     148            this.closeViewInDrawer();
     149        }
     150
     151        document.getElementById("main-status-bar").appendChild(drawerStatusBarHeader);
     152        this._drawerStatusBarHeader = drawerStatusBarHeader;
    141153        this.drawer.show(view, WebInspector.Drawer.AnimationType.Immediately);
     154    },
     155
     156    closeViewInDrawer: function()
     157    {
     158        if (this._drawerStatusBarHeader) {
     159            this._closePreviousDrawerView();
     160
     161            // Once drawer is closed console should be shown if it was shown before current view replaced it in drawer.
     162            if (!this._consoleWasShown)
     163                this.drawer.hide(WebInspector.Drawer.AnimationType.Immediately);
     164            else
     165                this._toggleConsoleButtonClicked();
     166        }
     167    },
     168
     169    _closePreviousDrawerView: function()
     170    {
     171        if (this._drawerStatusBarHeader) {
     172            document.getElementById("main-status-bar").removeChild(this._drawerStatusBarHeader);
     173            if (this._drawerStatusBarHeader.onclose)
     174                this._drawerStatusBarHeader.onclose();
     175            delete this._drawerStatusBarHeader;
     176        }
    142177    },
    143178
    … …  
    754789        // If drawer is open with some view other than console then close it.
    755790        if (!this._toggleConsoleButton.toggled && WebInspector.drawer.visible)
    756             this.closeDrawerView();
     791            this.closeViewInDrawer();
    757792        else
    758793            this._toggleConsoleButtonClicked();
Note: See TracChangeset for help on using the changeset viewer.