Web Inspector: beautify file selector dialog to render as two rows
authorpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2013 14:03:32 +0000 (14:03 +0000)
committerpfeldman@chromium.org <pfeldman@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2013 14:03:32 +0000 (14:03 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@141260 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/FilteredItemSelectionDialog.js
Source/WebCore/inspector/front-end/ViewportControl.js
Source/WebCore/inspector/front-end/filteredItemSelectionDialog.css

index 1c6f992..e0db9cd 100644 (file)
@@ -1,5 +1,34 @@
 2013-01-30  Pavel Feldman  <pfeldman@chromium.org>
 
+        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  <pfeldman@chromium.org>
+
         Web Inspector: migrate file selection dialog to the viewport.
         https://bugs.webkit.org/show_bug.cgi?id=108313
 
index c1cf769..54036b8 100644 (file)
@@ -43,7 +43,7 @@ WebInspector.FilteredItemSelectionDialog = function(delegate)
     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 @@ WebInspector.FilteredItemSelectionDialog.prototype = {
     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 @@ WebInspector.FilteredItemSelectionDialog.prototype = {
             clearTimeout(this._filterTimer);
     },
 
+    renderAsTwoRows: function()
+    {
+        this._renderAsTwoRows = true;
+    },
+
     onEnter: function()
     {
         if (typeof this._selectedIndexInFiltered !== "number")
@@ -139,12 +144,12 @@ WebInspector.FilteredItemSelectionDialog.prototype = {
     _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 @@ WebInspector.OpenResourceDialog.show = function(panel, relativeToElement)
         return;
 
     var filteredItemSelectionDialog = new WebInspector.FilteredItemSelectionDialog(new WebInspector.OpenResourceDialog(panel));
+    filteredItemSelectionDialog.renderAsTwoRows();
     WebInspector.Dialog.show(relativeToElement, filteredItemSelectionDialog);
 }
index 5a68f8a..6411e52 100644 (file)
@@ -44,7 +44,7 @@ WebInspector.ViewportControl = function(provider)
     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 @@ WebInspector.ViewportControl.prototype = {
 
     refresh: function()
     {
+        if (!this.element.clientHeight)
+            return;  // Do nothing for invisible controls.
+
         var itemCount = this._provider.itemCount();
 
         if (!this._rowHeight) {
@@ -89,7 +92,7 @@ WebInspector.ViewportControl.prototype = {
         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"; 
 
index 5f13176..c6e2857 100644 (file)
@@ -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;
     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;
 }