Add highlight groups for the completion list

content/style.js

@@ -26,6 +26,16 @@ function Highlights(name, store, serial)
         WarningMsg  color: red; background: white;
         Message     white-space: normal; min-width: 100%; padding-left: 2em; text-indent: -2em; display: block;
 
+
+        CompItem
+        CompItem[selected] background: yellow;
+        CompItem>*         padding: 0 .5ex;
+        CompIcon           width: 16px; 
+        CompIcon>img       max-width: 16px; max-height: 16px; vertical-align: middle; 
+        CompResult         width: 45%; overflow: hidden; 
+        CompDesc           color: gray; 
+
+        Indicator   color: blue; 
         Filter      font-weight: bold;
 
         Keyword     color: red;
@@ -84,7 +94,7 @@ function Highlights(name, store, serial)
     Highlight.defaultValue("filter", function () "chrome://liberator/content/buffer.xhtml" + "," + config.styleableChrome);
     Highlight.defaultValue("selector", function () ".hl-" + this.class);
     Highlight.defaultValue("value", function () this.default);
-    Highlight.prototype.toString = function () [k + ": " + util.escapeString(v || "undefined") for ([k, v] in this)].join(", ");
+    Highlight.prototype.toString = function () "Highlight(" + this.class + ")\n\t" + [k + ": " + util.escapeString(v || "undefined") for ([k, v] in this)].join("\n\t");
 
     function keys() [k for ([k, v] in Iterator(highlight))].sort();
     this.__iterator__ = function () (highlight[v] for ([k,v] in Iterator(keys())));
@@ -95,7 +105,7 @@ function Highlights(name, store, serial)
         let [, class, selectors] = key.match(/^([a-zA-Z_-]+)(.*)/);
 
         if (!(class in highlight))
-            return "Unknown highlight keyword";
+            return "Unknown highlight keyword: " + class;
 
         let style = highlight[key] || new Highlight(key);
         styles.removeSheet(style.selector, null, null, null, true);
@@ -129,7 +139,7 @@ function Highlights(name, store, serial)
                 .split("\n").filter(function (s) /\S/.test(s))
                 .forEach(function (style)
     {
-        style = Highlight.apply(Highlight, Array.slice(style.match(/^\s*([^,\s]+)(?:,([^,\s]+))?(?:,([^,\s]+))?(?:\s+(.*))?/), 1));
+        style = Highlight.apply(Highlight, Array.slice(style.match(/^\s*([^,\s]+)(?:,([^,\s]+))?(?:,([^,\s]+))?\s*(.*)$/), 1));
         highlight[style.class] = style;
         self.set(style.class);
     });

content/tabs.js

@@ -754,7 +754,7 @@ function Tabs() //{{{
                 items.* +=
                     <tr>
                         <td align="right">  {number}</td>
-                        <td><span class="indicator"> {indicator} </span></td>
+                        <td><span class="hl-Indicator"> {indicator} </span></td>
                         <td style="width: 250px; max-width: 500px; overflow: hidden">{title}</td>
                         <td><a href="#" class="hl-URL buffer-list">{item[1]}</a></td>
                     </tr>;

content/ui.js

@@ -1323,10 +1323,10 @@ function ItemList(id) //{{{
 
         XML.ignoreWhitespace = true;
         let row =
-            <ul class="compitem">
+            <ul class="hl-CompItem">
-                <li class="favicon">{a ? <img src={a}/> : <></>}</li>
+                <li class="hl-CompIcon">{a ? <img src={a}/> : <></>}</li>
-                <li class="completion">{b}</li>
+                <li class="hl-CompResult">{b}</li>
-                <li class="description">{c}</li>
+                <li class="hl-CompDesc">{c}</li>
             </ul>;
 
         if (dom)
@@ -1376,23 +1376,22 @@ function ItemList(id) //{{{
         XML.ignoreWhitespace = true;
         let div = <div class="ex-command-output hl-Normal">
                       <span class="hl-Title">Completions:</span>
-                      <div class="completion-items"/>
+                      <div class="hl-Completions">
+                      {
+                          template.map(util.range(offset, endIndex), function (i)
+                          createRow(completions[i]))
+                      }
+                      </div>
+                      <div class="hl-Completions">
+                      {
+                          template.map(util.range(0, maxItems), function (i)
+                          <ul class="hl-CompItem"><li class="hl-NonText">~</li></ul>)
+                      }
+                      </div>;
                   </div>;
 
-        let tbody = div.div;
-        for (let i in util.range(offset, endIndex))
-            tbody.* += createRow(completions[i]);
-
-        div.* +=
-            <div class="completion-items">
-            {
-                template.map(util.range(0, maxItems), function (i)
-                <ul class="compitem hl-NonText"><li>~</li></ul>)
-            }
-            </div>;
-
         let dom = util.xmlToDom(div, doc);
-        completionBody = dom.getElementsByClassName("completion-items")[0];
+        completionBody = dom.getElementsByClassName("hl-Completions")[0];
         completionElements = completionBody.childNodes;
         doc.body.replaceChild(dom, doc.body.firstChild);
     }

skin/liberator.css

@@ -48,18 +48,17 @@ the terms of any one of the MPL, the GPL or the LGPL.
 
 *:-moz-loading, *:-moz-broken { display: none !important; }
 
-.completion-items {
+.hl-Completions {
     width: 100%;
     display: table;
 }
-.compitem {
+.hl-CompItem {
     display: table-row;
 }
-.compitem > * {
+.hl-CompItem > * {
     -moz-binding: url(chrome://liberator/content/bindings.xml#compitem-td);
     display: table-cell;
     vertical-align: middle;
-    padding: 0 .5ex;
 }
 .td-span {
     height: 1.5em; line-height: 1.5em !important;
@@ -71,19 +70,11 @@ the terms of any one of the MPL, the GPL or the LGPL.
     width: 0px;
 }
 
-.compitem[selected=true] { background-color: yellow; }
-.compitem > .favicon     { width: 16px; }
-.favicon > img           { max-width: 16px; max-height: 16px; vertical-align: middle; }
-.compitem > .completion  { width: 45%; overflow: hidden; }
-.compitem > .description { color: gray; }
-
 .extra-info { color: gray; }
 
 .times-executed, .time-average { color: green; }
 .time-total { color: red; }
 
-.indicator  { color: blue; }
-
 }
 
 /* Applied to completion buffer, MOW, browser window */