Modified: trunk/Source/WebCore/inspector/front-end/SearchController.js (122464 => 122465)
--- trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-07-12 15:52:30 UTC (rev 122464)
+++ trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-07-12 15:54:04 UTC (rev 122465)
@@ -35,27 +35,31 @@
WebInspector.SearchController = function()
{
this._element = document.createElement("div");
- this._element.textContent = "Search:";
+ this._element.className = "toolbar-search";
- this._searchInputElement = this._element.createChild("input");
+ 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._searchNavigationNextElement.title = WebInspector.UIString("Search Next");
+ this._matchesElement = this._searchControlElement.createChild("label", "search-results-matches");
+ this._matchesElement.setAttribute("for", "search");
- this._searchNavigationPrevElement = this._element.createChild("div", "toolbar-search-navigation toolbar-search-navigation-prev hidden");
- this._searchNavigationPrevElement.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
+ 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._matchesElement = this._element.createChild("span", "search-results-matches");
+ 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._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");
closeButtonElement.textContent = WebInspector.UIString("\u00D7");
@@ -71,7 +75,7 @@
panel.currentSearchMatches = matches;
if (panel === WebInspector.inspectorView.currentPanel())
- this._updateSearchMatchesCountAndCurrentMatchIndex(WebInspector.inspectorView.currentPanel().currentQuery && matches);
+ this._updateSearchMatchesCountAndCurrentMatchIndex(WebInspector.inspectorView.currentPanel().currentQuery ? matches : 0, -1);
},
updateCurrentMatchIndex: function(currentMatchIndex, panel)
@@ -80,15 +84,6 @@
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);
- },
-
cancelSearch: function()
{
this._searchInputElement.value = "";
@@ -150,8 +145,6 @@
activePanelChanged: function()
{
- this.updateSearchLabel();
-
if (!this._currentQuery)
return;
@@ -159,7 +152,7 @@
if (panel.performSearch) {
function performPanelSearch()
{
- this._updateSearchMatchesCountAndCurrentMatchIndex();
+ this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
panel.currentQuery = this._currentQuery;
panel.performSearch(this._currentQuery);
@@ -169,57 +162,30 @@
setTimeout(performPanelSearch.bind(this), 0);
} else {
// Update to show Not found for panels that can't be searched.
- this._updateSearchMatchesCountAndCurrentMatchIndex();
+ this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
}
},
_updateSearchNavigationButtonState: function(enabled)
{
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);
},
focusSearchField: function()
@@ -246,64 +212,36 @@
return false;
}
- 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();
+ if (isEnterKey(event))
+ this._performSearch(event.target.value, true, event.shiftKey);
},
- _onSearch: function(event)
+ _onInput: function(event)
{
- var forceSearch = event.keyIdentifier === "Enter";
- this._performSearch(event.target.value, forceSearch, event.shiftKey, false);
+ this._performSearch(event.target.value, false, false);
},
_onNextButtonSearch: function(event)
{
// 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();
},
_onPrevButtonSearch: function(event)
{
// 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();
},
/**
* @param {boolean=} forceSearch
* @param {boolean=} isBackwardSearch
- * @param {boolean=} repeatSearch
*/
- _performSearch: function(query, forceSearch, isBackwardSearch, repeatSearch)
+ _performSearch: function(query, forceSearch, isBackwardSearch)
{
- 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;
- }
-
+ if (!query || !query.length) {
delete this._currentQuery;
for (var panelName in WebInspector.panels) {
@@ -313,14 +251,12 @@
if (hadCurrentQuery && panel.searchCanceled)
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.
if (forceSearch) {
@@ -332,12 +268,15 @@
return;
}
+ if (!forceSearch && query.length < 3 && !this._currentQuery)
+ return;
+
this._currentQuery = query;
- this._updateSearchMatchesCountAndCurrentMatchIndex();
-
- if (!currentPanel.performSearch)
+ if (!currentPanel.performSearch) {
+ this._updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
return;
+ }
currentPanel.currentQuery = query;
currentPanel.performSearch(query);
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (122464 => 122465)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2012-07-12 15:52:30 UTC (rev 122464)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2012-07-12 15:54:04 UTC (rev 122465)
@@ -264,28 +264,64 @@
}
#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;
- position: relative;
- top: 4px;
- margin: 0px 1px;
+ display: inline-block;
+ width: 18px;
+ height: 18px;
background-repeat: no-repeat;
- display: inline-block;
- background-position: 2px 5px;
- border: 1px solid transparent;
+ background-position: 4px 7px;
+ border-left: 1px solid rgb(170, 170, 170);
+ opacity: 0.3;
}
-.toolbar-search-navigation:hover {
- border: 1px solid rgba(120, 120, 120, 0.6);
+.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;
+ background-color: white;
+ border: 1px solid rgb(202, 202, 202);
+ margin: 2px;
+ height: 20px;
+ border-radius: 2px;
+ padding-right: 36px;
+}
+
.toolbar-search-navigation.toolbar-search-navigation-prev {
background-image: url(Images/searchPrev.png);
}
@@ -294,18 +330,18 @@
background-image: url(Images/searchNext.png);
}
-.toolbar-search-navigation-hidden {
- background: none;
-}
-
body.compact #search {
font-size: 11px;
}
.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);
}
.toolbar-item.elements .toolbar-icon {
@@ -2785,10 +2821,5 @@
left: 0;
right: 0;
font-size: 11px;
- padding-left: 7px;
- padding-bottom: 7px;
+ padding-left: 5px;
}
-
-.inspector-footer > div {
- vertical-align: middle;
-}
