Changeset 141260 in webkit

Timestamp:

Jan 30, 2013 6:03:32 AM (11 years ago)

Author:

pfeldman@chromium.org

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):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/FilteredItemSelectionDialog.js (modified) (5 diffs)
• inspector/front-end/ViewportControl.js (modified) (3 diffs)
• inspector/front-end/filteredItemSelectionDialog.css (modified) (5 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebCore/inspector/front-end/FilteredItemSelectionDialog.js

@@ -44 +44 @@
 
     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");
@@ -94 +94 @@
     {
         WebInspector.setCurrentFocusElement(this._promptElement);
-        if (this._filteredItems.length && !this._viewportControl.lastVisibleIndex())
+        if (this._filteredItems.length && this._viewportControl.lastVisibleIndex() === -1)
             this._viewportControl.refresh();
     },
@@ -105 +105 @@
         if (this._filterTimer)
             clearTimeout(this._filterTimer);
+    },
+
+    renderAsTwoRows: function()
+    {
+        this._renderAsTwoRows = true;
     },
 
@@ -140 +145 @@
     {
         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;
@@ -638 +643 @@
 
     var filteredItemSelectionDialog = new WebInspector.FilteredItemSelectionDialog(new WebInspector.OpenResourceDialog(panel));
+    filteredItemSelectionDialog.renderAsTwoRows();
     WebInspector.Dialog.show(relativeToElement, filteredItemSelectionDialog);
 }

trunk/Source/WebCore/inspector/front-end/ViewportControl.js

@@ -45 +45 @@
     this.element.addEventListener("scroll", this._onScroll.bind(this), false);
     this._firstVisibleIndex = 0;
-    this._lastVisibleIndex = 0;
+    this._lastVisibleIndex = -1;
 }
 
@@ -79 +79 @@
     refresh: function()
     {
+        if (!this.element.clientHeight)
+            return;  // Do nothing for invisible controls.
+
         var itemCount = this._provider.itemCount();
 
@@ -90 +93 @@
 
         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"; 

trunk/Source/WebCore/inspector/front-end/filteredItemSelectionDialog.css

@@ -1 @@
-.js-outline-dialog > input {
+.filtered-item-list-dialog > input {
     font-size: 11px;
     width: 100%;
@@ -5 +5 @@
 }
 
-.js-outline-dialog > div.progress {
+.filtered-item-list-dialog > div.progress {
     position: absolute;
     top: 35px;
@@ -13 +13 @@
 }
 
-.js-outline-dialog > div.container {
+.filtered-item-list-dialog > div.container {
     position: absolute;
     top: 38px;
@@ -24 +24 @@
 }
 
-.js-outline-dialog > .container > div.item {
+.filtered-item-list-dialog-item {
     padding: 2px;
     white-space: nowrap;
@@ -32 +32 @@
 }
 
-.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;