fixed custom completion styling, now better than ever before, per-item based. Note that hold <tab> down after :bmarks <tab> results in a sluggish display, I don't think this commit causes this, it's proably a recent regression.

content/completion.js

@@ -813,9 +813,47 @@ function Completion() //{{{
 
         bookmark: function (filter)
         {
+            // TODO: move to template.js?
+            function createHtml(item)
+            {
+                var extra = [];
+                if (item.keyword)
+                    extra.push(['keyword', item.keyword, "hl-Keyword"]);
+                if (item.tags.length > 0)
+                    extra.push(["tags", item.tags.join(","), "hl-Tag"]); // no space, otherwise it looks strange, since we just have spaces to seperate tags from keywords
+
+                return <ul class="hl-CompItem">
+                    <li class="hl-CompIcon"><img src={item.icon || ""}/></li>
+                    <li class="hl-CompResult">{util.clip(item.title || "", 50)}</li>
+                    <li style="width: 100%">
+                        <a href="#" class="hl-URL">{item.url}</a>&#160;
+                        {
+                            !(extra.length) ? "" :
+                            <span class="extra-info">
+                                ({
+                                    template.map(extra, function (e)
+                                    <>{e[0]}: <span class={e[2]}>{e[1]}</span></>,
+                                    <>&#xa0;</>/* Non-breaking space */)
+                                })
+                            </span>
+                        }
+                    </li>
+                </ul>
+            }
+
             return {
                 start: 0,
-                get items() { return bookmarks.get(filter) },
+                get items() {
+                    return bookmarks.get(filter).map(function (bmark) {
+                        // temporary, until we have moved all completions to objects
+                        bmark[0] = bmark.url;
+                        bmark[1] = bmark.title;
+
+                        bmark.text = bmark.url;
+                        bmark.__defineGetter__("html", function () createHtml(bmark));
+                        return bmark;
+                    });
+                },
                 createRow: function (item)
                         <ul class="hl-CompItem">
                             <li class="hl-CompIcon"><img src={item.icon || ""}/></li>

content/ui.js

@@ -1373,8 +1373,6 @@ function ItemList(id) //{{{
         if (offset == null || offset - startIndex == 0 || offset < 0 || items.length && offset >= items.length)
             return;
 
-        //let createRow = ("createRow" in completionObject) ? completionObject.createRow : createDefaultRow;
-        let createRow = createDefaultRow;
         startIndex = offset;
         endIndex = Math.min(startIndex + maxItems, items.length);
 
@@ -1385,14 +1383,14 @@ function ItemList(id) //{{{
             if (diff == 1) /* Scroll down */
             {
                 let item = items[endIndex - 1];
-                let row = createRow(item, true);
+                let row = "html" in item ? util.xmlToDom(item.html, doc) : createDefaultRow(item, true);
                 tbody.removeChild(tbody.firstChild);
                 tbody.appendChild(row);
             }
             else /* Scroll up */
             {
                 let item = items[offset];
-                let row = createRow(item, true);
+                let row = "html" in item ? util.xmlToDom(item.html, doc) : createDefaultRow(item, true);
                 tbody.removeChild(tbody.lastChild);
                 tbody.insertBefore(row, tbody.firstChild);
             }
@@ -1406,7 +1404,7 @@ function ItemList(id) //{{{
                           <div class="hl-Completions">
                           {
                               template.map(util.range(offset, endIndex), function (i)
-                              createRow(items[i]))
+                              "html" in items[i] ? items[i].html : createDefaultRow(items[i]))
                           }
                           </div>
                           <div class="hl-Completions">