- Revision
- 141260
- Author
- [email protected]
- Date
- 2013-01-30 06:03:32 -0800 (Wed, 30 Jan 2013)
Log Message
Web Inspector: beautify file selector dialog to render as two rows
https://bugs.webkit.org/show_bug.cgi?id=108335
Reviewed by Vsevolod Vlasov.
Go-to-file is now rendered in two rows.
* inspector/front-end/FilteredItemSelectionDialog.js:
(WebInspector.FilteredItemSelectionDialog):
(WebInspector.FilteredItemSelectionDialog.prototype.focus):
(WebInspector.FilteredItemSelectionDialog.prototype.renderAsTwoRows):
(WebInspector.FilteredItemSelectionDialog.prototype._createItemElement):
(WebInspector.OpenResourceDialog.show):
* inspector/front-end/ViewportControl.js:
(WebInspector.ViewportControl):
(WebInspector.ViewportControl.prototype.refresh):
* inspector/front-end/filteredItemSelectionDialog.css:
(.filtered-item-list-dialog > input):
(.filtered-item-list-dialog > div.progress):
(.filtered-item-list-dialog > div.container):
(.filtered-item-list-dialog-item):
(.filtered-item-list-dialog-subtitle):
(.filtered-item-list-dialog-item.one-row .filtered-item-list-dialog-subtitle):
(.filtered-item-list-dialog-item.two-rows):
(.filtered-item-list-dialog-item.selected):
(.filtered-item-list-dialog-item span.highlight):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (141259 => 141260)
--- trunk/Source/WebCore/ChangeLog 2013-01-30 13:59:04 UTC (rev 141259)
+++ trunk/Source/WebCore/ChangeLog 2013-01-30 14:03:32 UTC (rev 141260)
@@ -1,5 +1,34 @@
2013-01-30 Pavel Feldman <[email protected]>
+ Web Inspector: beautify file selector dialog to render as two rows
+ https://bugs.webkit.org/show_bug.cgi?id=108335
+
+ Reviewed by Vsevolod Vlasov.
+
+ Go-to-file is now rendered in two rows.
+
+ * inspector/front-end/FilteredItemSelectionDialog.js:
+ (WebInspector.FilteredItemSelectionDialog):
+ (WebInspector.FilteredItemSelectionDialog.prototype.focus):
+ (WebInspector.FilteredItemSelectionDialog.prototype.renderAsTwoRows):
+ (WebInspector.FilteredItemSelectionDialog.prototype._createItemElement):
+ (WebInspector.OpenResourceDialog.show):
+ * inspector/front-end/ViewportControl.js:
+ (WebInspector.ViewportControl):
+ (WebInspector.ViewportControl.prototype.refresh):
+ * inspector/front-end/filteredItemSelectionDialog.css:
+ (.filtered-item-list-dialog > input):
+ (.filtered-item-list-dialog > div.progress):
+ (.filtered-item-list-dialog > div.container):
+ (.filtered-item-list-dialog-item):
+ (.filtered-item-list-dialog-subtitle):
+ (.filtered-item-list-dialog-item.one-row .filtered-item-list-dialog-subtitle):
+ (.filtered-item-list-dialog-item.two-rows):
+ (.filtered-item-list-dialog-item.selected):
+ (.filtered-item-list-dialog-item span.highlight):
+
+2013-01-30 Pavel Feldman <[email protected]>
+
Web Inspector: migrate file selection dialog to the viewport.
https://bugs.webkit.org/show_bug.cgi?id=108313
Modified: trunk/Source/WebCore/inspector/front-end/FilteredItemSelectionDialog.js (141259 => 141260)
--- trunk/Source/WebCore/inspector/front-end/FilteredItemSelectionDialog.js 2013-01-30 13:59:04 UTC (rev 141259)
+++ trunk/Source/WebCore/inspector/front-end/FilteredItemSelectionDialog.js 2013-01-30 14:03:32 UTC (rev 141260)
@@ -43,7 +43,7 @@
xhr.send(null);
this.element = document.createElement("div");
- this.element.className = "js-outline-dialog";
+ this.element.className = "filtered-item-list-dialog";
this.element.addEventListener("keydown", this._onKeyDown.bind(this), false);
var styleElement = this.element.createChild("style");
styleElement.type = "text/css";
@@ -93,7 +93,7 @@
focus: function()
{
WebInspector.setCurrentFocusElement(this._promptElement);
- if (this._filteredItems.length && !this._viewportControl.lastVisibleIndex())
+ if (this._filteredItems.length && this._viewportControl.lastVisibleIndex() === -1)
this._viewportControl.refresh();
},
@@ -106,6 +106,11 @@
clearTimeout(this._filterTimer);
},
+ renderAsTwoRows: function()
+ {
+ this._renderAsTwoRows = true;
+ },
+
onEnter: function()
{
if (typeof this._selectedIndexInFiltered !== "number")
@@ -139,12 +144,12 @@
_createItemElement: function(index)
{
var itemElement = document.createElement("div");
- itemElement.className = "item";
+ itemElement.className = "filtered-item-list-dialog-item " + (this._renderAsTwoRows ? "two-rows" : "one-row");
itemElement._titleElement = itemElement.createChild("span");
itemElement._titleElement.textContent = this._delegate.itemTitleAt(index);
itemElement._titleSuffixElement = itemElement.createChild("span");
itemElement._titleSuffixElement.textContent = this._delegate.itemSuffixAt(index);
- itemElement._subtitleElement = itemElement.createChild("span", "subtitle");
+ itemElement._subtitleElement = itemElement.createChild("div", "filtered-item-list-dialog-subtitle");
itemElement._subtitleElement.textContent = this._delegate.itemSubtitleAt(index);
itemElement._index = index;
@@ -637,5 +642,6 @@
return;
var filteredItemSelectionDialog = new WebInspector.FilteredItemSelectionDialog(new WebInspector.OpenResourceDialog(panel));
+ filteredItemSelectionDialog.renderAsTwoRows();
WebInspector.Dialog.show(relativeToElement, filteredItemSelectionDialog);
}
Modified: trunk/Source/WebCore/inspector/front-end/ViewportControl.js (141259 => 141260)
--- trunk/Source/WebCore/inspector/front-end/ViewportControl.js 2013-01-30 13:59:04 UTC (rev 141259)
+++ trunk/Source/WebCore/inspector/front-end/ViewportControl.js 2013-01-30 14:03:32 UTC (rev 141260)
@@ -44,7 +44,7 @@
this._provider = provider;
this.element.addEventListener("scroll", this._onScroll.bind(this), false);
this._firstVisibleIndex = 0;
- this._lastVisibleIndex = 0;
+ this._lastVisibleIndex = -1;
}
/**
@@ -78,6 +78,9 @@
refresh: function()
{
+ if (!this.element.clientHeight)
+ return; // Do nothing for invisible controls.
+
var itemCount = this._provider.itemCount();
if (!this._rowHeight) {
@@ -89,7 +92,7 @@
var visibleTo = visibleFrom + this.element.clientHeight;
this._firstVisibleIndex = Math.floor(visibleFrom / this._rowHeight);
- this._lastVisibleIndex = Math.max(0, Math.min(Math.ceil(visibleTo / this._rowHeight), itemCount) - 1);
+ this._lastVisibleIndex = Math.min(Math.ceil(visibleTo / this._rowHeight), itemCount) - 1;
this._topGapElement.style.height = (this._rowHeight * this._firstVisibleIndex) + "px";
this._bottomGapElement.style.height = (this._rowHeight * (itemCount - this._lastVisibleIndex - 1)) + "px";
Modified: trunk/Source/WebCore/inspector/front-end/filteredItemSelectionDialog.css (141259 => 141260)
--- trunk/Source/WebCore/inspector/front-end/filteredItemSelectionDialog.css 2013-01-30 13:59:04 UTC (rev 141259)
+++ trunk/Source/WebCore/inspector/front-end/filteredItemSelectionDialog.css 2013-01-30 14:03:32 UTC (rev 141260)
@@ -1,10 +1,10 @@
-.js-outline-dialog > input {
+.filtered-item-list-dialog > input {
font-size: 11px;
width: 100%;
height: 24px;
}
-.js-outline-dialog > div.progress {
+.filtered-item-list-dialog > div.progress {
position: absolute;
top: 35px;
left: 10px;
@@ -12,7 +12,7 @@
height: 2px;
}
-.js-outline-dialog > div.container {
+.filtered-item-list-dialog > div.container {
position: absolute;
top: 38px;
bottom: 10px;
@@ -23,7 +23,7 @@
background-color: white;
}
-.js-outline-dialog > .container > div.item {
+.filtered-item-list-dialog-item {
padding: 2px;
white-space: nowrap;
text-overflow: ellipsis;
@@ -31,17 +31,23 @@
color: rgb(95, 95, 95);
}
-.js-outline-dialog span.subtitle {
+.filtered-item-list-dialog-subtitle {
color: rgb(155, 155, 155);
- padding-right: 2px;
+}
+
+.filtered-item-list-dialog-item.one-row .filtered-item-list-dialog-subtitle {
float: right;
}
-.js-outline-dialog .container div.item.selected {
+.filtered-item-list-dialog-item.two-rows {
+ border-bottom: 1px solid rgb(235, 235, 235);
+}
+
+.filtered-item-list-dialog-item.selected {
background-color: rgb(224, 224, 224);
}
-.js-outline-dialog .container div.item span.highlight {
+.filtered-item-list-dialog-item span.highlight {
color: black;
font-weight: bold;
}
