Diff
Modified: trunk/Source/WebCore/ChangeLog (121910 => 121911)
--- trunk/Source/WebCore/ChangeLog 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/ChangeLog 2012-07-05 16:44:46 UTC (rev 121911)
@@ -1,3 +1,50 @@
+2012-07-05 Pavel Feldman <pfeld...@chromium.org>
+
+ 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):
+
2012-07-05 Sergey Rogulenko <rogule...@google.com>
Web Inspector: added low-level instrumentation support for TimelineAgent
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js (121910 => 121911)
--- trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-07-05 16:44:46 UTC (rev 121911)
@@ -719,3 +719,4 @@
localizedStrings["Encoded Data Length"] = "Encoded Data Length";
localizedStrings["%d Bytes"] = "%d Bytes";
localizedStrings["Time End"] = "Time End";
+localizedStrings["Search:"] = "Search:";
Modified: trunk/Source/WebCore/inspector/front-end/InspectorView.js (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/InspectorView.js 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/InspectorView.js 2012-07-05 16:44:46 UTC (rev 121911)
@@ -51,6 +51,8 @@
// Windows and Mac have two different definitions of ']', so accept both.
this._closeBracketIdentifiers = ["U+005D", "U+00DD"].keySet();
this._closeBracketCharCode = "]".charCodeAt(0);
+ this._footerElementContainer = this.element.createChild("div", "inspector-footer status-bar hidden");
+ this._panelsElement = this.element.createChild("div", "fill");
}
WebInspector.InspectorView.Events = {
@@ -190,6 +192,28 @@
if (!this._history.length || this._history[this._history.length - 1] !== panelName)
this._history.push(panelName);
this._historyIterator = this._history.length - 1;
+ },
+
+ panelsElement: function()
+ {
+ return this._panelsElement;
+ },
+
+ /**
+ * @param {Element?} element
+ */
+ setFooterElement: function(element)
+ {
+ if (element) {
+ this._footerElementContainer.removeStyleClass("hidden");
+ this._footerElementContainer.appendChild(element);
+ this._panelsElement.style.bottom = this._footerElementContainer.offsetHeight + "px";
+ } else {
+ this._footerElementContainer.addStyleClass("hidden");
+ this._footerElementContainer.removeChildren();
+ this._panelsElement.style.bottom = 0;
+ }
+ this.doResize();
}
}
Modified: trunk/Source/WebCore/inspector/front-end/Panel.js (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/Panel.js 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/Panel.js 2012-07-05 16:44:46 UTC (rev 121911)
@@ -63,7 +63,7 @@
show: function()
{
- WebInspector.View.prototype.show.call(this, WebInspector.inspectorView.element);
+ WebInspector.View.prototype.show.call(this, WebInspector.inspectorView.panelsElement());
},
wasShown: function()
Modified: trunk/Source/WebCore/inspector/front-end/SearchController.js (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/SearchController.js 2012-07-05 16:44:46 UTC (rev 121911)
@@ -31,19 +31,36 @@
/**
* @constructor
+ * @param {Element} parentElement
*/
WebInspector.SearchController = function()
{
- this.element = document.getElementById("search");
- this._matchesElement = document.getElementById("search-results-matches");
- this._searchItemElement = document.getElementById("toolbar-search-item");
- this._searchControlBoxElement = document.getElementById("toolbar-search-navigation-control");
+ this._element = document.createElement("div");
+ this._element.textContent = "Search:";
- this.element.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
- this.element.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
- this.element.addEventListener("keydown", this._onKeyDown.bind(this), true);
-
- this._populateSearchNavigationButtons();
+ this._searchInputElement = this._element.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._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);
+
+ var closeButtonElement = this._element.createChild("span", "drawer-header-close-button");
+ closeButtonElement.textContent = WebInspector.UIString("\u00D7");
+ closeButtonElement.addEventListener("click", this.cancelSearch.bind(this), false);
}
WebInspector.SearchController.prototype = {
@@ -70,13 +87,14 @@
if (!panelName)
return;
var newLabel = WebInspector.UIString("Search %s", panelName);
- this.element.setAttribute("placeholder", newLabel);
+ this._searchInputElement.setAttribute("placeholder", newLabel);
},
cancelSearch: function()
{
- this.element.value = "";
+ this._searchInputElement.value = "";
this._performSearch("");
+ WebInspector.inspectorView.setFooterElement(null);
},
disableSearchUntilExplicitAction: function(event)
@@ -156,12 +174,15 @@
}
},
- _updateSearchNavigationButtonState: function(visible)
+ _updateSearchNavigationButtonState: function(enabled)
{
- if (visible)
- this._searchItemElement.addStyleClass("with-navigation-buttons");
- else
- this._searchItemElement.removeStyleClass("with-navigation-buttons");
+ if (enabled) {
+ this._searchNavigationPrevElement.removeStyleClass("hidden");
+ this._searchNavigationNextElement.removeStyleClass("hidden");
+ } else {
+ this._searchNavigationPrevElement.addStyleClass("hidden");
+ this._searchNavigationNextElement.addStyleClass("hidden");
+ }
},
/**
@@ -204,8 +225,9 @@
focusSearchField: function()
{
- this.element.focus();
- this.element.select();
+ WebInspector.inspectorView.setFooterElement(this._element);
+ this._searchInputElement.focus();
+ this._searchInputElement.select();
},
_onSearchFieldManualFocus: function(event)
@@ -217,14 +239,7 @@
{
// Escape Key will clear the field and clear the search results
if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
- // If focus belongs here and text is empty - nothing to do, return unhandled.
- // When search was selected manually and is currently blank, we'd like Esc stay unhandled
- // and hit console drawer handler.
- if (event.target.value === "")
- return;
-
event.consume(true);
-
this.cancelSearch();
WebInspector.setCurrentFocusElement(WebInspector.previousFocusElement());
if (WebInspector.currentFocusElement() === event.target)
@@ -257,13 +272,13 @@
_onNextButtonSearch: function(event)
{
// Simulate next search on search-navigation-button click.
- this._performSearch(this.element.value, true, false, false);
+ this._performSearch(this._searchInputElement.value, true, false, false);
},
_onPrevButtonSearch: function(event)
{
// Simulate previous search on search-navigation-button click.
- this._performSearch(this.element.value, true, true, false);
+ this._performSearch(this._searchInputElement.value, true, true, false);
},
/**
@@ -327,44 +342,6 @@
currentPanel.currentQuery = query;
currentPanel.performSearch(query);
- },
-
- /**
- * @param {string=} direction
- */
- _createSearchNavigationButton: function(direction)
- {
- var searchNavigationControlElement = document.createElement("div");
- var searchNavigationIconElement = document.createElement("div");
-
- searchNavigationControlElement.className = "toolbar-search-navigation-label";
-
- switch (direction) {
- case "prev":
- var searchTitle = WebInspector.UIString("Search Previous");
- searchNavigationIconElement.className = "toolbar-search-navigation-icon-prev";
- this._searchNavigationPrev = searchNavigationControlElement;
- this._searchNavigationPrev.addEventListener("mousedown", this._onPrevButtonSearch.bind(this), false);
- break;
-
- case "next":
- var searchTitle = WebInspector.UIString("Search Next");
- searchNavigationIconElement.className = "toolbar-search-navigation-icon-next";
- this._searchNavigationNext = searchNavigationControlElement;
- this._searchNavigationNext.addEventListener("mousedown", this._onNextButtonSearch.bind(this), false);
- break;
- }
-
- searchNavigationControlElement.setAttribute("title" , searchTitle);
- searchNavigationControlElement.appendChild(searchNavigationIconElement);
- this._searchControlBoxElement.appendChild(searchNavigationControlElement);
- },
-
- _populateSearchNavigationButtons: function()
- {
- // Lazily adding search navigation keys to dom.
- this._createSearchNavigationButton("prev");
- this._createSearchNavigationButton("next");
}
}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2012-07-05 16:44:46 UTC (rev 121911)
@@ -263,63 +263,49 @@
border-radius: 5px;
}
-#toolbar-search-item {
- display: -webkit-box;
- -webkit-box-orient: horizontal;
- -webkit-box-align: center;
- -webkit-box-pack: end;
-}
-
#search {
width: 205px;
- font-size: 16px;
+ margin-left: 4px;
+ margin-right: 4px;
+ font-size: 11px;
}
-.with-navigation-buttons #search {
- width: 165px;
-}
-
-.toolbar-search-navigation-label {
- display: none;
+.toolbar-search-navigation {
+ width: 16px;
+ height: 16px;
+ position: relative;
+ top: 4px;
+ margin: 0px 1px;
+ background-repeat: no-repeat;
+ display: inline-block;
+ background-position: 2px 5px;
border: 1px solid transparent;
- border-radius: 2px;
- padding: 3px;
- margin-left: 2px;
- width: 18px;
- height: 18px;
- float: right;
}
-.with-navigation-buttons .toolbar-search-navigation-label {
- display: block;
-}
-
-.toolbar-search-navigation-label:hover {
+.toolbar-search-navigation:hover {
border: 1px solid rgba(120, 120, 120, 0.6);
}
-.toolbar-search-navigation-icon-prev , .toolbar-search-navigation-icon-next {
- width: 9px;
- margin-top: 2px;
- height: 100%;
- background-repeat: no-repeat;
-}
-
-.toolbar-search-navigation-icon-prev {
+.toolbar-search-navigation.toolbar-search-navigation-prev {
background-image: url(Images/searchPrev.png);
}
-.toolbar-search-navigation-icon-next {
+.toolbar-search-navigation.toolbar-search-navigation-next {
background-image: url(Images/searchNext.png);
}
+.toolbar-search-navigation-hidden {
+ background: none;
+}
+
body.compact #search {
font-size: 11px;
}
-#search-results-matches {
+.search-results-matches {
font-size: 11px;
text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ padding-left: 4px;
}
.toolbar-item.elements .toolbar-icon {
@@ -2427,7 +2413,7 @@
}
.search-drawer-header input[type="search"].search-config-search {
- font-size: 11px;
+ font-size: 11px;
margin-left: 4px;
color: #303030;
position: relative;
@@ -2778,3 +2764,17 @@
#console-context {
max-width: 200px;
}
+
+.inspector-footer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-size: 11px;
+ padding-left: 7px;
+ padding-bottom: 7px;
+}
+
+.inspector-footer > div {
+ vertical-align: middle;
+}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/inspector.html 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html 2012-07-05 16:44:46 UTC (rev 121911)
@@ -226,11 +226,6 @@
<div class="toolbar-item close-left"><button id="close-button-left"></button></div>
<div id="toolbar-controls">
<div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">»</button></div>
- <div class="toolbar-item hidden" id="search-results-matches"></div>
- <div class="toolbar-item" id="toolbar-search-item">
- <input id="search" type="search" incremental results="0">
- <div id="toolbar-search-navigation-control"></div>
- </div>
<div class="toolbar-item close-right"><button id="close-button-right"></button></div>
</div>
</div>
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (121910 => 121911)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2012-07-05 16:39:54 UTC (rev 121910)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2012-07-05 16:44:46 UTC (rev 121911)
@@ -261,9 +261,6 @@
if (WebInspector.toolbar)
WebInspector.toolbar.compact = x;
- if (WebInspector.searchController)
- WebInspector.searchController.updateSearchLabel();
-
if (WebInspector.drawer)
WebInspector.drawer.resize();
},
@@ -819,7 +816,7 @@
if (event.handled)
return;
- if (event.keyIdentifier === "U+001B") { // Escape key
+ if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
// If drawer is open with some view other than console then close it.
if (!this._toggleConsoleButton.toggled && WebInspector.drawer.visible)
this.closeViewInDrawer();
