Diff
Modified: trunk/Source/WebCore/ChangeLog (117745 => 117746)
--- trunk/Source/WebCore/ChangeLog 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/ChangeLog 2012-05-21 08:36:39 UTC (rev 117746)
@@ -1,3 +1,52 @@
+2012-05-21 Pavel Feldman <[email protected]>
+
+ 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):
+
2012-05-18 Andreas Kling <[email protected]>
REGRESSION(r117501): IconDatabase asserts on startup in synchronousIconForPageURL().
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js
(Binary files differ)
Modified: trunk/Source/WebCore/inspector/front-end/AdvancedSearchController.js (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/AdvancedSearchController.js 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/AdvancedSearchController.js 2012-05-21 08:36:39 UTC (rev 117746)
@@ -54,8 +54,12 @@
handleShortcut: function(event)
{
if (WebInspector.KeyboardShortcut.makeKeyFromEvent(event) === this._shortcut.key) {
- this.show();
- event.handled = true;
+ if (!this._searchView || !this._searchView.isShowing() || this._searchView._search !== document.activeElement) {
+ WebInspector.inspectorView.setCurrentPanel(WebInspector.panels.scripts);
+ this.show();
+ } else
+ this.close();
+ event.consume();
}
},
@@ -81,13 +85,13 @@
if (this._searchView.isShowing())
this._searchView.focus();
else
- WebInspector.showViewInDrawer(this._searchView);
+ WebInspector.showViewInDrawer(this._searchView._searchPanelElement, this._searchView, this.stopSearch.bind(this));
},
close: function()
{
this.stopSearch();
- WebInspector.closeDrawerView();
+ WebInspector.closeViewInDrawer();
},
/**
@@ -171,19 +175,20 @@
this.element.className = "search-view";
- this._searchPanelElement = this.element.createChild("div");
- this._searchPanelElement.tabIndex = 0;
- this._searchPanelElement.className = "search-panel";
+ this._searchPanelElement = document.createElement("span");
+ this._searchPanelElement.className = "search-drawer-header";
this._searchPanelElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
this._searchResultsElement = this.element.createChild("div");
this._searchResultsElement.className = "search-results";
+ this._searchLabel = this._searchPanelElement.createChild("span");
+ this._searchLabel.textContent = WebInspector.UIString("Search sources");
this._search = this._searchPanelElement.createChild("input");
this._search.setAttribute("type", "search");
this._search.addStyleClass("search-config-search");
this._search.setAttribute("results", "0");
- this._search.setAttribute("size", 20);
+ this._search.setAttribute("size", 30);
this._ignoreCaseLabel = this._searchPanelElement.createChild("label");
this._ignoreCaseLabel.addStyleClass("search-config-label");
@@ -199,11 +204,6 @@
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");
@@ -391,11 +391,6 @@
this._regexCheckbox.checked = searchConfig.isRegex;
},
- _closeButtonPressed: function()
- {
- this._controller.close();
- },
-
_searchStopButtonPressed: function()
{
this._controller.stopSearch();
@@ -501,8 +496,7 @@
this.element.id ="search-results-pane-file-based";
this._treeOutlineElement = document.createElement("ol");
- this._treeOutlineElement.className = "outline-disclosure";
- this._treeOutlineElement.addStyleClass("search-results-outline-disclosure");
+ this._treeOutlineElement.className = "search-results-outline-disclosure";
this.element.appendChild(this._treeOutlineElement);
this._treeOutline = new TreeOutline(this._treeOutlineElement);
Modified: trunk/Source/WebCore/inspector/front-end/DebuggerResourceBinding.js (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/DebuggerResourceBinding.js 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/DebuggerResourceBinding.js 2012-05-21 08:36:39 UTC (rev 117746)
@@ -65,7 +65,7 @@
resource.addRevision(newSource);
uiSourceCode.contentChanged(newSource);
- callback();
+ callback(null);
}
WebInspector.debuggerModel.setScriptSource(script.scriptId, newSource, didEditScriptSource.bind(this));
}
Modified: trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/ScriptsPanel.js 2012-05-21 08:36:39 UTC (rev 117746)
@@ -228,6 +228,11 @@
this._navigatorController.wasShown();
},
+ willHide: function()
+ {
+ WebInspector.closeViewInDrawer();
+ },
+
/**
* @param {WebInspector.Event} event
*/
Modified: trunk/Source/WebCore/inspector/front-end/externs.js (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/externs.js 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/externs.js 2012-05-21 08:36:39 UTC (rev 117746)
@@ -129,11 +129,13 @@
WebInspector.inspectorView;
/**
+ * @param {Element} element
* @param {WebInspector.View} view
+ * @param {function()=} onclose
*/
-WebInspector.showViewInDrawer = function(view) {}
+WebInspector.showViewInDrawer = function(element, view, onclose) {}
-WebInspector.closeDrawerView = function() {}
+WebInspector.closeViewInDrawer = function() {}
/**
* @param {string=} messageLevel
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2012-05-21 08:36:39 UTC (rev 117746)
@@ -2374,49 +2374,59 @@
right: 0;
}
-.search-view .search-panel {
- position: absolute;
- top: 0;
- height: 28px;
- left: 0;
- right: 0;
- padding-top: 2px;
- padding-left: 10px;
- padding-right: 10px;
- background-color: #EBEBEB;
- border-bottom: 1px solid #BBB;
- overflow: hidden;
- font-size: 11px;
+.search-drawer-header input[type="search"].search-config-search {
+ font-size: 11px;
+ margin-left: 4px;
+ color: #303030;
+ position: relative;
}
-.search-view .search-panel input[type="search"].search-config-search {
- margin-right: 8px;
- font-size: 11px;
- color: #303030;
+body.platform-mac .search-drawer-header input[type="search"].search-config-search {
+ top: 1px;
}
-.search-view .search-panel label.search-config-label {
- margin-right: 8px;
+.search-drawer-header label.search-config-label {
+ margin-left: 8px;
color: #303030;
}
-.search-view .search-panel input[type="checkbox"].search-config-checkbox {
+.search-drawer-header input[type="checkbox"].search-config-checkbox {
vertical-align: bottom;
}
-body:not(.platform-mac) .search-view .search-panel input[type="checkbox"].search-config-checkbox {
+body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox {
margin-bottom: 5px;
}
-body.platform-mac .search-view .search-panel input[type="checkbox"].search-config-checkbox {
+body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox {
margin-bottom: 4px;
}
-.search-view .search-panel button.search-close-button {
+.drawer-header {
font-size: 11px;
- float: right;
+ border-right: 1px solid rgb(197, 197, 197);
+ line-height: 23px;
+ padding-left: 6px;
}
+.drawer-header-close-button {
+ font-family: Arial, monospace;
+ padding: 3px 6px;
+ font-size: 14px;
+ color:rgb(80, 80, 80);
+ opacity: 0.5;
+ position: relative;
+ top: 1px;
+}
+
+.drawer-header-close-button:hover {
+ opacity: 1;
+}
+
+.drawer-header-close-button:active {
+ opacity: 0.7;
+}
+
#drawer-status-bar .search-status-bar-item {
cursor: pointer;
font-size: 11px;
@@ -2463,20 +2473,43 @@
.search-view .search-results {
position: absolute;
- top: 35px;
+ top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
-#search-results-pane-file-based .search-results-outline-disclosure {
- padding-bottom: 5px;
+#search-results-pane-file-based li {
+ list-style: none;
}
+#search-results-pane-file-based ol {
+ -webkit-padding-start: 0;
+ margin-top: 0;
+}
+
+#search-results-pane-file-based ol.children {
+ display: none;
+}
+
+#search-results-pane-file-based ol.children.expanded {
+ display: block;
+}
+
+#search-results-pane-file-based li.parent::before {
+ content: url(Images/treeRightTriangleBlack.png);
+ position: relative;
+ left: -4px;
+}
+
+#search-results-pane-file-based li.parent.expanded::before {
+ content: url(Images/treeDownTriangleBlack.png);
+}
+
#search-results-pane-file-based .search-result {
font-size: 12px;
- margin-top: 3px;
+ padding: 2px 0 2px 10px;
word-wrap: normal;
white-space: pre;
cursor: pointer;
@@ -2487,11 +2520,6 @@
-webkit-border-radius: 5px;
}
-#search-results-pane-file-based .search-result:first-child {
- margin-top: 1px;
-}
-
-
#search-results-pane-file-based .search-result .search-result-file-name {
font-weight: bold;
color: #222;
@@ -2503,9 +2531,11 @@
}
#search-results-pane-file-based .show-more-matches {
- margin-left: 5px;
+ padding: 4px 0;
color: #333;
cursor: pointer;
+ font-size: 11px;
+ margin-left: 20px;
}
#search-results-pane-file-based .show-more-matches:hover {
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (117745 => 117746)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2012-05-21 08:27:42 UTC (rev 117745)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2012-05-21 08:36:39 UTC (rev 117746)
@@ -122,25 +122,60 @@
}
},
- 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();
- },
-
/**
+ * @param {Element} statusBarElement
* @param {WebInspector.View} view
+ * @param {function()=} onclose
*/
- showViewInDrawer: function(view)
+ showViewInDrawer: function(statusBarElement, view, onclose)
{
this._toggleConsoleButton.title = WebInspector.UIString("Hide console.");
this._toggleConsoleButton.toggled = false;
+ this._closePreviousDrawerView();
+
+ var drawerStatusBarHeader = document.createElement("div");
+ drawerStatusBarHeader.className = "drawer-header";
+ drawerStatusBarHeader.appendChild(statusBarElement);
+ drawerStatusBarHeader._onclose_ = onclose;
+
+ var closeButton = drawerStatusBarHeader.createChild("span");
+ closeButton.textContent = WebInspector.UIString("\u00D7");
+ closeButton.addStyleClass("drawer-header-close-button");
+ closeButton.addEventListener("click", closeButtonPressed.bind(this), false);
+
+ function closeButtonPressed(event)
+ {
+ this.closeViewInDrawer();
+ }
+
+ document.getElementById("main-status-bar").appendChild(drawerStatusBarHeader);
+ this._drawerStatusBarHeader = drawerStatusBarHeader;
this.drawer.show(view, WebInspector.Drawer.AnimationType.Immediately);
},
+ closeViewInDrawer: function()
+ {
+ if (this._drawerStatusBarHeader) {
+ this._closePreviousDrawerView();
+
+ // 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();
+ }
+ },
+
+ _closePreviousDrawerView: function()
+ {
+ if (this._drawerStatusBarHeader) {
+ document.getElementById("main-status-bar").removeChild(this._drawerStatusBarHeader);
+ if (this._drawerStatusBarHeader.onclose)
+ this._drawerStatusBarHeader.onclose();
+ delete this._drawerStatusBarHeader;
+ }
+ },
+
get attached()
{
return this._attached;
@@ -753,7 +788,7 @@
if (event.keyIdentifier === "U+001B") { // Escape key
// If drawer is open with some view other than console then close it.
if (!this._toggleConsoleButton.toggled && WebInspector.drawer.visible)
- this.closeDrawerView();
+ this.closeViewInDrawer();
else
this._toggleConsoleButtonClicked();
}
