Web Inspector: Improve user experience of advanced search panel closing.

https://bugs.webkit.org/show_bug.cgi?id=76983

Reviewed by Pavel Feldman.

Added close button to search panel.
Esc now closes the panel even when search filed has focus.

* English.lproj/localizedStrings.js:
* inspector/front-end/AdvancedSearchController.js:
(WebInspector.AdvancedSearchController.prototype.close):
(WebInspector.SearchView):
(WebInspector.SearchView.prototype._onKeyDown):
(WebInspector.SearchView.prototype._closeButtonPressed):
* inspector/front-end/inspector.css:
(.search-view .search-panel):
(.search-view .search-panel button.search-close-button):
* inspector/front-end/inspector.js:
(WebInspector._escPressed):
(WebInspector.closeDrawerView):

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

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 4e28047..73293a9 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,26 @@
+2012-01-24  Vsevolod Vlasov  <vsevik@chromium.org>
+
+        Web Inspector: Improve user experience of advanced search panel closing.
+        https://bugs.webkit.org/show_bug.cgi?id=76983
+
+        Reviewed by Pavel Feldman.
+
+        Added close button to search panel.
+        Esc now closes the panel even when search filed has focus.
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/AdvancedSearchController.js:
+        (WebInspector.AdvancedSearchController.prototype.close):
+        (WebInspector.SearchView):
+        (WebInspector.SearchView.prototype._onKeyDown):
+        (WebInspector.SearchView.prototype._closeButtonPressed):
+        * inspector/front-end/inspector.css:
+        (.search-view .search-panel):
+        (.search-view .search-panel button.search-close-button):
+        * inspector/front-end/inspector.js:
+        (WebInspector._escPressed):
+        (WebInspector.closeDrawerView):
+
 2012-01-26  Joe Thomas  <joethomas@motorola.com>
 
         https://bugs.webkit.org/show_bug.cgi?id=76995.

diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
index 2e57714..d8498d9 100644 (file)
Binary files a/Source/WebCore/English.lproj/localizedStrings.js and b/Source/WebCore/English.lproj/localizedStrings.js differ

diff --git a/Source/WebCore/inspector/front-end/AdvancedSearchController.js b/Source/WebCore/inspector/front-end/AdvancedSearchController.js
index 36fed6a..253f6fe 100644 (file)
--- a/Source/WebCore/inspector/front-end/AdvancedSearchController.js
+++ b/Source/WebCore/inspector/front-end/AdvancedSearchController.js
@@ -83,7 +83,13 @@ WebInspector.AdvancedSearchController.prototype = {
         else
             WebInspector.showViewInDrawer(this._searchView);
     },
-    
+
+    close: function()
+    {
+        this.stopSearch();
+        WebInspector.closeDrawerView();
+    },
+
     /**
      * @param {number} searchId
      * @param {Object} searchResult
@@ -193,6 +199,11 @@ WebInspector.SearchView = function(controller)
     this._regexCheckbox.addStyleClass("search-config-checkbox");
     this._regexLabel.appendChild(document.createTextNode(WebInspector.UIString("Regular expression")));
     
+    this._searchDoneButton = this._searchPanelElement.createChild("button");
+    this._searchDoneButton.textContent = WebInspector.UIString("Close");
+    this._searchDoneButton.addStyleClass("search-close-button");
+    this._searchDoneButton.addEventListener("click", this._closeButtonPressed.bind(this));
+    
     this._searchStatusBarElement = document.createElement("div");
     this._searchStatusBarElement.className = "search-status-bar-item";
     this._searchMessageElement = this._searchStatusBarElement.createChild("div");
@@ -359,8 +370,16 @@ WebInspector.SearchView.prototype = {
      */
     _onKeyDown: function(event)
     {
-        if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code)
+        switch (event.keyCode) {
+        case WebInspector.KeyboardShortcut.Keys.Enter.code:
             this._onAction();
+            break;
+        case WebInspector.KeyboardShortcut.Keys.Esc.code:
+            this._controller.close();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+        }        
     },
     
     _save: function()
@@ -376,7 +395,12 @@ WebInspector.SearchView.prototype = {
         this._ignoreCaseCheckbox.checked = searchConfig.ignoreCase;
         this._regexCheckbox.checked = searchConfig.isRegex;
     },
-    
+
+    _closeButtonPressed: function()
+    {
+        this._controller.close();
+    },
+
     _searchStopButtonPressed: function()
     {
         this._controller.stopSearch();

diff --git a/Source/WebCore/inspector/front-end/inspector.css b/Source/WebCore/inspector/front-end/inspector.css
index e05f065..70f0e13 100644 (file)
--- a/Source/WebCore/inspector/front-end/inspector.css
+++ b/Source/WebCore/inspector/front-end/inspector.css
@@ -2329,9 +2329,10 @@ body.platform-mac .soft-context-menu-item-mouse-over {
     right: 0;
     padding-top: 2px;
     padding-left: 10px;
+    padding-right: 10px;
     background-color: #EBEBEB;
     border-bottom: 1px solid #BBB;
-
+    overflow: hidden;
     font-size: 11px;
 }
 
@@ -2358,6 +2359,11 @@ body.platform-mac .search-view .search-panel input[type="checkbox"].search-confi
     margin-bottom: 4px;
 }
 
+.search-view .search-panel button.search-close-button {
+    font-size: 11px;
+    float: right;
+}
+
 #drawer-status-bar .search-status-bar-item {
     cursor: pointer;
     font-size: 11px;

diff --git a/Source/WebCore/inspector/front-end/inspector.js b/Source/WebCore/inspector/front-end/inspector.js
index c75033e..29d05fa 100644 (file)
--- a/Source/WebCore/inspector/front-end/inspector.js
+++ b/Source/WebCore/inspector/front-end/inspector.js
@@ -124,8 +124,18 @@ var WebInspector = {
 
     _escPressed: function()
     {
-        // If drawer was open with some view other than console then just close it.
-        if (!this._consoleWasShown && WebInspector.drawer.visible)
+        
+        // If drawer is open with some view other than console then close it.
+        if (!this._toggleConsoleButton.toggled && WebInspector.drawer.visible)
+            this.closeDrawerView();
+        else
+            this._toggleConsoleButtonClicked();
+    },
+
+    closeDrawerView: function()
+    {
+        // Once drawer is closed console should be shown if it was shown before current view replaced it in drawer. 
+        if (!this._consoleWasShown)
             this.drawer.hide(WebInspector.Drawer.AnimationType.Immediately);
         else
             this._toggleConsoleButtonClicked();