Changeset 122465 in webkit

Timestamp:

Jul 12, 2012 8:54:04 AM (12 years ago)

Author:

pfeldman@chromium.org

Message:

Web Inspector: beautify find bar looks, simplify search update routines.
​https://bugs.webkit.org/show_bug.cgi?id=91087

Reviewed by Vsevolod Vlasov.

This change updates the looks to the one on the screenshots and simplifies match count update routines.

• inspector/front-end/SearchController.js:

(WebInspector.SearchController.onMatchesMouseDown):
(WebInspector.SearchController):
(WebInspector.SearchController.prototype.activePanelChanged.performPanelSearch):
(WebInspector.SearchController.prototype.activePanelChanged):
(WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
(WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
(WebInspector.SearchController.prototype._onKeyDown):
(WebInspector.SearchController.prototype._onInput):
(WebInspector.SearchController.prototype._onNextButtonSearch):
(WebInspector.SearchController.prototype._onPrevButtonSearch):
(WebInspector.SearchController.prototype._performSearch):

• inspector/front-end/inspector.css:

(#search):
(#search:focus):
(.toolbar-search-navigation-controls):
(.toolbar-search-navigation):
(.toolbar-search-navigation.enabled:hover):
(.toolbar-search-navigation.enabled, .toolbar-search-navigation.enabled:active):
(.toolbar-search):
(.toolbar-search-control):
(.search-results-matches):
(.inspector-footer):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• English.lproj/localizedStrings.js (modified) (1 diff)
• inspector/front-end/ConsolePanel.js (modified) (1 diff)
• inspector/front-end/ProfilesPanel.js (modified) (3 diffs)
• inspector/front-end/SearchController.js (modified) (13 diffs)
• inspector/front-end/SourceFrame.js (modified) (1 diff)
• inspector/front-end/inspector.css (modified) (4 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-07-12  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: beautify find bar looks, simplify search update routines.
+        https://bugs.webkit.org/show_bug.cgi?id=91087
+
+        Reviewed by Vsevolod Vlasov.
+
+        This change updates the looks to the one on the screenshots and simplifies match count update routines.
+
+        * inspector/front-end/SearchController.js:
+        (WebInspector.SearchController.onMatchesMouseDown):
+        (WebInspector.SearchController):
+        (WebInspector.SearchController.prototype.activePanelChanged.performPanelSearch):
+        (WebInspector.SearchController.prototype.activePanelChanged):
+        (WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
+        (WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
+        (WebInspector.SearchController.prototype._onKeyDown):
+        (WebInspector.SearchController.prototype._onInput):
+        (WebInspector.SearchController.prototype._onNextButtonSearch):
+        (WebInspector.SearchController.prototype._onPrevButtonSearch):
+        (WebInspector.SearchController.prototype._performSearch):
+        * inspector/front-end/inspector.css:
+        (#search):
+        (#search:focus):
+        (.toolbar-search-navigation-controls):
+        (.toolbar-search-navigation):
+        (.toolbar-search-navigation.enabled:hover):
+        (.toolbar-search-navigation.enabled, .toolbar-search-navigation.enabled:active):
+        (.toolbar-search):
+        (.toolbar-search-control):
+        (.search-results-matches):
+        (.inspector-footer):
+
 2012-07-12  Joshua Bell  <jsbell@chromium.org>
 

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

@@ -720 +720 @@
 localizedStrings["%d Bytes"] = "%d Bytes";
 localizedStrings["Time End"] = "Time End";
-localizedStrings["Search:"] = "Search:";
+localizedStrings["Find"] = "Find";

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

@@ -128 +128 @@
         this._clearCurrentSearchResultHighlight();
         this._currentSearchResultIndex = index;
+        WebInspector.searchController.updateCurrentMatchIndex(this._currentSearchResultIndex, this);
         this._searchResults[index].highlightSearchResults(this._searchRegex);
     },

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

@@ -753 +753 @@
         {
             WebInspector.searchController.updateSearchMatchesCount(this._totalSearchMatches, this);
+            WebInspector.searchController.updateCurrentMatchIndex(this._currentSearchResultIndex, this);
             matchesCountUpdateTimeout = null;
         }
@@ -834 +835 @@
         }
 
+        WebInspector.searchController.updateCurrentMatchIndex(this._currentSearchResultIndex, this);
+
         if (currentView !== this.visibleView) {
             this.showView(currentView);
@@ -866 +869 @@
             showLastResult = true;
         }
+
+        WebInspector.searchController.updateCurrentMatchIndex(this._currentSearchResultIndex, this);
 
         if (currentView !== this.visibleView) {

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

@@ -36 +36 @@
 {
     this._element = document.createElement("div");
-    this._element.textContent = "Search:";
-
-    this._searchInputElement = this._element.createChild("input");
+    this._element.className = "toolbar-search";
+
+    var labelElement = this._element.createChild("span");
+    labelElement.textContent = WebInspector.UIString("Find");
+
+    this._searchControlElement = this._element.createChild("div", "toolbar-search-control");
+
+    this._searchInputElement = this._searchControlElement.createChild("input");
     this._searchInputElement.id = "search";
-    this._searchInputElement.type = "search";
-    this._searchInputElement.incremental = true;
-    this._searchInputElement.results = 0;
-
-    this._searchNavigationNextElement = this._element.createChild("div", "toolbar-search-navigation toolbar-search-navigation-next hidden");
-    this._searchNavigationNextElement.addEventListener("mousedown", this._onNextButtonSearch.bind(this), false); 
+
+    this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches");
+    this._matchesElement.setAttribute("for", "search");
+
+    var searchNavigationElement = this._searchControlElement.createChild("div", "toolbar-search-navigation-controls");
+    this._searchNavigationPrevElement = searchNavigationElement.createChild("div", "toolbar-search-navigation toolbar-search-navigation-prev");
+    this._searchNavigationPrevElement.addEventListener("click", this._onPrevButtonSearch.bind(this), false);
+    this._searchNavigationPrevElement.title = WebInspector.UIString("Search Previous");
+
+    this._searchNavigationNextElement = searchNavigationElement.createChild("div", "toolbar-search-navigation toolbar-search-navigation-next"); 
+    this._searchNavigationNextElement.addEventListener("click", this._onNextButtonSearch.bind(this), false);
     this._searchNavigationNextElement.title = WebInspector.UIString("Search Next");
 
-    this._searchNavigationPrevElement = this._element.createChild("div", "toolbar-search-navigation toolbar-search-navigation-prev hidden");
-    this._searchNavigationPrevElement.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
-    this._searchNavigationPrevElement.title = WebInspector.UIString("Search Previous");
-
-    this._matchesElement = this._element.createChild("span", "search-results-matches");
-
-    this._searchInputElement.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
     this._searchInputElement.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
     this._searchInputElement.addEventListener("keydown", this._onKeyDown.bind(this), true);
+    this._searchInputElement.addEventListener("input", this._onInput.bind(this), false);
 
     var closeButtonElement = this._element.createChild("span", "drawer-header-close-button");
@@ -72 +76 @@
 
         if (panel === WebInspector.inspectorView.currentPanel())
-            this._updateSearchMatchesCountAndCurrentMatchIndex(WebInspector.inspectorView.currentPanel().currentQuery && matches);
+            this._updateSearchMatchesCountAndCurrentMatchIndex(WebInspector.inspectorView.currentPanel().currentQuery ? matches : 0, -1);
     },
 
@@ -79 +83 @@
         if (panel === WebInspector.inspectorView.currentPanel())
             this._updateSearchMatchesCountAndCurrentMatchIndex(panel.currentSearchMatches, currentMatchIndex);
-    },
-
-    updateSearchLabel: function()
-    {
-        var panelName = WebInspector.inspectorView.currentPanel() && WebInspector.inspectorView.currentPanel().toolbarItemLabel;
-        if (!panelName)
-            return;
-        var newLabel = WebInspector.UIString("Search %s", panelName);
-        this._searchInputElement.setAttribute("placeholder", newLabel);
     },
 
@@ -151 +146 @@
     activePanelChanged: function()
     {
-        this.updateSearchLabel();
-
         if (!this._currentQuery)
             return;
@@ -160 +153 @@
             function performPanelSearch()
             {
-                this._updateSearchMatchesCountAndCurrentMatchIndex();
+                this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
 
                 panel.currentQuery = this._currentQuery;
@@ -170 +163 @@
         } else {
             // Update to show Not found for panels that can't be searched.
-            this._updateSearchMatchesCountAndCurrentMatchIndex();
+            this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
         }
     },
@@ -177 +170 @@
     {
         if (enabled) {
-            this._searchNavigationPrevElement.removeStyleClass("hidden");
-            this._searchNavigationNextElement.removeStyleClass("hidden");
+            this._searchNavigationPrevElement.addStyleClass("enabled");
+            this._searchNavigationNextElement.addStyleClass("enabled");
         } else {
-            this._searchNavigationPrevElement.addStyleClass("hidden");
-            this._searchNavigationNextElement.addStyleClass("hidden");
+            this._searchNavigationPrevElement.removeStyleClass("enabled");
+            this._searchNavigationNextElement.removeStyleClass("enabled");
         }
     },
 
     /**
-     * @param {?number=} matches
-     * @param {number=} currentMatchIndex
+     * @param {number} matches
+     * @param {number} currentMatchIndex
      */
     _updateSearchMatchesCountAndCurrentMatchIndex: function(matches, currentMatchIndex)
     {
-        if (matches == null) {
-            this._matchesElement.addStyleClass("hidden");
-            // Make Search Nav key non-accessible when there is no active search.
-            this._updateSearchNavigationButtonState(false); 
-            return;
-        }
-
-        if (matches) {
-            if (matches === 1) {
-                if (currentMatchIndex === 0)
-                    var matchesString = WebInspector.UIString("1 of 1 match");
-                else
-                    var matchesString = WebInspector.UIString("1 match");
-            } else {
-                if (typeof currentMatchIndex === "number")
-                    var matchesString = WebInspector.UIString("%d of %d matches", currentMatchIndex + 1, matches);
-                else
-                    var matchesString = WebInspector.UIString("%d matches", matches);
-                // Make search nav key accessible when there are more than 1 search results found.    
-                this._updateSearchNavigationButtonState(true);
-            }
-        } else {
-            var matchesString = WebInspector.UIString("Not Found");
-            // Make search nav key non-accessible when there is no match found.
-            this._updateSearchNavigationButtonState(false);
-        }
-
-        this._matchesElement.removeStyleClass("hidden");
-        this._matchesElement.textContent = matchesString;
-        WebInspector.toolbar.resize();
+        if (matches === 0 || currentMatchIndex >= 0)
+            this._matchesElement.textContent = WebInspector.UIString("%d of %d", currentMatchIndex + 1, matches);
+        this._updateSearchNavigationButtonState(matches > 0);
     },
 
@@ -247 +213 @@
         }
 
-        if (!isEnterKey(event))
-            return false;
-
-        // Select all of the text so the user can easily type an entirely new query.
-        event.target.select();
-
-        // Only call performSearch if the Enter key was pressed. Otherwise the search
-        // performance is poor because of searching on every key. The search field has
-        // the incremental attribute set, so we still get incremental searches.
-        this._onSearch(event);
-
-        // Call preventDefault since this was the Enter key. This prevents a "search" event
-        // from firing for key down. This stops performSearch from being called twice in a row.
-        event.preventDefault();
-    },
-
-    _onSearch: function(event)
-    {
-        var forceSearch = event.keyIdentifier === "Enter";
-        this._performSearch(event.target.value, forceSearch, event.shiftKey, false);
+        if (isEnterKey(event))
+            this._performSearch(event.target.value, true, event.shiftKey);
+    },
+
+    _onInput: function(event)
+    {
+        this._performSearch(event.target.value, false, false);
     },
 
@@ -272 +225 @@
     {
         // Simulate next search on search-navigation-button click.
-        this._performSearch(this._searchInputElement.value, true, false, false);
+        this._performSearch(this._searchInputElement.value, true, false);
+        this._searchInputElement.focus();
     },
 
@@ -278 +232 @@
     {
         // Simulate previous search on search-navigation-button click.
-        this._performSearch(this._searchInputElement.value, true, true, false);
+        this._performSearch(this._searchInputElement.value, true, true);
+        this._searchInputElement.focus();
     },
 
@@ -284 +239 @@
      * @param {boolean=} forceSearch
      * @param {boolean=} isBackwardSearch
-     * @param {boolean=} repeatSearch
      */
-    _performSearch: function(query, forceSearch, isBackwardSearch, repeatSearch)
-    {
-        var isShortSearch = (query.length < 3);
-
-        // Clear a leftover short search flag due to a non-conflicting forced search.
-        if (isShortSearch && this._shortSearchWasForcedByKeyEvent && this._currentQuery !== query)
-            delete this._shortSearchWasForcedByKeyEvent;
-
-        // Indicate this was a forced search on a short query.
-        if (isShortSearch && forceSearch)
-            this._shortSearchWasForcedByKeyEvent = true;
-
-        if (!query || !query.length || (!forceSearch && isShortSearch)) {
-            // Prevent clobbering a short search forced by the user.
-            if (this._shortSearchWasForcedByKeyEvent) {
-                delete this._shortSearchWasForcedByKeyEvent;
-                return;
-            }
-
+    _performSearch: function(query, forceSearch, isBackwardSearch)
+    {
+        if (!query || !query.length) {
             delete this._currentQuery;
 
@@ -314 +252 @@
                     panel.searchCanceled();
             }
-
-            this._updateSearchMatchesCountAndCurrentMatchIndex();
-
+            this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
             return;
         }
 
         var currentPanel = WebInspector.inspectorView.currentPanel();
-        if (!repeatSearch && query === currentPanel.currentQuery && currentPanel.currentQuery === this._currentQuery) {
+        if (query === currentPanel.currentQuery && currentPanel.currentQuery === this._currentQuery) {
             // When this is the same query and a forced search, jump to the next
             // search result for a good user experience.
@@ -333 +269 @@
         }
 
+        if (!forceSearch && query.length < 3 && !this._currentQuery)
+            return;
+
         this._currentQuery = query;
 
-        this._updateSearchMatchesCountAndCurrentMatchIndex();
-
-        if (!currentPanel.performSearch)
-            return;
+        if (!currentPanel.performSearch) {
+            this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
+            return;
+        }
 
         currentPanel.currentQuery = query;

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

@@ -334 +334 @@
             var selection = this._textEditor.lastSelection();
             for (var i = 0; selection && i < this._searchResults.length; ++i) {
-                if (this._searchResults[i].compareTo(selection) > 0) {
+                if (this._searchResults[i].compareTo(selection) >= 0) {
                     this._currentSearchResultIndex = i - 1;
                     break;

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

@@ -265 +265 @@
 
 #search {
-    width: 205px;
-    margin-left: 4px;
-    margin-right: 4px;
-    font-size: 11px;
+    -webkit-appearance: none;
+    border: 0;
+    padding: 0 2px;
+    margin: 0;
+    width: 165px;
+}
+
+#search:focus {
+    outline: none;
+}
+
+.toolbar-search-navigation-controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 18px;
+    background-image: -webkit-linear-gradient(rgb(228, 228, 228), rgb(204, 204, 204) 75%, rgb(206, 206, 206));
 }
 
 .toolbar-search-navigation {
-    width: 16px;
-    height: 16px;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    background-repeat: no-repeat;
+    background-position: 4px 7px;
+    border-left: 1px solid rgb(170, 170, 170);
+    opacity: 0.3;
+}
+
+.toolbar-search-navigation.enabled:hover {
+    border-left: 1px solid rgb(190, 190, 190);
+    opacity: 0.9;
+}
+
+.toolbar-search-navigation.enabled, .toolbar-search-navigation.enabled:active {
+    border-left: 1px solid rgb(170, 170, 170);
+    opacity: 0.7;
+}
+
+#search:focus {
+    outline: none;
+}
+
+.toolbar-search {
+    line-height: 19px;
+}
+
+.toolbar-search-control {
+    display: inline-block;
     position: relative;
-    top: 4px;
-    margin: 0px 1px;
-    background-repeat: no-repeat;
-    display: inline-block;
-    background-position: 2px 5px;
-    border: 1px solid transparent;
-}
-
-.toolbar-search-navigation:hover {
-    border: 1px solid rgba(120, 120, 120, 0.6);    
+    background-color: white;
+    border: 1px solid rgb(202, 202, 202);
+    margin: 2px;
+    height: 20px;
+    border-radius: 2px;
+    padding-right: 36px;
 }
 
@@ -295 +331 @@
 }
 
-.toolbar-search-navigation-hidden {
-    background: none;
-}
-
 body.compact #search {
     font-size: 11px;
@@ -304 +336 @@
 
 .search-results-matches {
+    display: inline-block;
+    min-width: 70px;
+    min-height: 10px;
+    text-align: right;
     font-size: 11px;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    padding-left: 4px;
+    padding: 0 4px;
+    color: rgb(165, 165, 165);
 }
 
@@ -2786 +2822 @@
     right: 0;
     font-size: 11px;
-    padding-left: 7px;
-    padding-bottom: 7px;
-}
-
-.inspector-footer > div {
-    vertical-align: middle;
-}
+    padding-left: 5px;
+}