Fixed-height completion rows.

content/bindings.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+
+<bindings xmlns="http://www.mozilla.org/xbl"
+	  xmlns:xbl="http://www.mozilla.org/xbl"
+	  xmlns:html="http://www.w3.org/1999/xhtml">
+
+    <binding id="frame">
+        <content>
+            <div id="liberator-frame-indicator" style="width: 40px; height: 40px"/>
+            <children/>
+        </content>
+    </binding>
+    <binding id="compitem-td">
+        <!-- No white space. The table is white-space: pre; :( -->
+        <content><html:span class="compitem-td-span"><children/></html:span></content>
+    </binding>
+</bindings>
+
+<!-- vim:se ft=xbl sw=4 sts=4 tw=0 et: -->

content/ui.js

@@ -1235,32 +1235,6 @@ liberator.ItemList = function (id) //{{{
     var completionElements = null;
     var minHeight = 0;
 
-    // TODO: temporary, to be changed/removed
-    function createRow(b, c, a, dom)
-    {
-        /* Obviously, ItemList shouldn't know or care about this. */
-        let filter = liberator.completion.filterString;
-        if (filter)
-        {
-            b = liberator.template.highlightFilter(b, filter);
-            c = liberator.template.highlightFilter(c, filter);
-        }
-
-        if (typeof a == "function")
-            a = a();
-
-        let row =
-            <tr class="compitem">
-                <td class="favicon">{a ? <img src={a}/> : <span/>}</td>
-                <td class="completion">{b}</td>
-                <td class="description">{c}</td>
-            </tr>;
-
-        if (dom)
-            return liberator.util.xmlToDom(row, doc);
-        return row;
-    }
-
     function autoSize()
     {
         function getHeight()
@@ -1279,6 +1253,32 @@ liberator.ItemList = function (id) //{{{
     }
     doc.body.addEventListener("DOMSubtreeModified", autoSize, true);
 
+    // TODO: temporary, to be changed/removed
+    function createRow(b, c, a, dom)
+    {
+        /* Obviously, ItemList shouldn't know or care about this. */
+        let filter = liberator.completion.filterString;
+        if (filter)
+        {
+            b = liberator.template.highlightFilter(b, filter);
+            c = liberator.template.highlightFilter(c, filter);
+        }
+
+        if (typeof a == "function")
+            a = a();
+
+        let row =
+            <tr class="compitem">
+                <td class="favicon">{a ? <img src={a}/> : <></>}</td>
+                <td class="completion">{b}</td>
+                <td class="description">{c}</td>
+            </tr>;
+
+        if (dom)
+            return liberator.util.xmlToDom(row, doc);
+        return row;
+    }
+
     /**
      * uses the entries in completions to fill the listbox
      * does incremental filling to speed up things
@@ -1334,7 +1334,7 @@ liberator.ItemList = function (id) //{{{
             <table>
             {
                 liberator.template.map(liberator.util.range(0, maxItems), function (i)
-                <tr><td style="color: blue">~</td></tr>)
+                <tr class="compitem"><td class="hl-NonText">~</td></tr>)
             }
             </table>;
 

skin/liberator.css

@@ -72,9 +72,14 @@ the terms of any one of the MPL, the GPL or the LGPL.
 
 *:-moz-loading, *:-moz-broken { display: none !important; }
 
+.compitem > td {
+    display: table-cell;
+    -moz-binding: url(chrome://liberator/content/bindings.xml#compitem-td);
+}
+.compitem-td-span { height: 1.5em; display: block; }
+
 .compitem[selected=true] { background-color: yellow; }
 .compitem > .favicon { width: 16px; }
-.compitem > .favicon > * { width: 16px; height: 16px; display: block; }
 .compitem > .completion { width: 45%; overflow: hidden; }
 .compitem > .description { color: gray; }
 
@@ -95,6 +100,8 @@ the terms of any one of the MPL, the GPL or the LGPL.
 .hl-Keyword { color: red; }
 .hl-Tag     { color: blue; }
 
+.hl-NonText { color: blue; }
+
 .hl-Filter  { font-weight: bold !important; }
 
 }