Add gradient to completions output. Leave space for top arrow, as well

content/bindings.xml

@@ -21,117 +21,6 @@
         <!-- No white space. The table is white-space: pre; :( -->
         <content><html:span class="td-strut"/><html:span class="td-span"><children/></html:span></content>
     </binding>
-    <binding id="gradient" inheritstyle="true">
-        <content>
-            <div xmlns="http://www.w3.org/1999/xhtml" style="white-space: normal; border: 1px solid green; margin: 6px;">
-                <div xbl:inherits="style=right" style="height: 3px"/>
-                <table width="100%" style="height: 3px; margin-top: -3px">
-                    <tr>
-    <td xbl:inherits="style=left" style="opacity: 0.01"/>
-    <td xbl:inherits="style=left" style="opacity: 0.02"/>
-    <td xbl:inherits="style=left" style="opacity: 0.03"/>
-    <td xbl:inherits="style=left" style="opacity: 0.04"/>
-    <td xbl:inherits="style=left" style="opacity: 0.05"/>
-    <td xbl:inherits="style=left" style="opacity: 0.06"/>
-    <td xbl:inherits="style=left" style="opacity: 0.07"/>
-    <td xbl:inherits="style=left" style="opacity: 0.08"/>
-    <td xbl:inherits="style=left" style="opacity: 0.09"/>
-    <td xbl:inherits="style=left" style="opacity: 0.1"/>
-    <td xbl:inherits="style=left" style="opacity: 0.11"/>
-    <td xbl:inherits="style=left" style="opacity: 0.12"/>
-    <td xbl:inherits="style=left" style="opacity: 0.13"/>
-    <td xbl:inherits="style=left" style="opacity: 0.14"/>
-    <td xbl:inherits="style=left" style="opacity: 0.15"/>
-    <td xbl:inherits="style=left" style="opacity: 0.16"/>
-    <td xbl:inherits="style=left" style="opacity: 0.17"/>
-    <td xbl:inherits="style=left" style="opacity: 0.18"/>
-    <td xbl:inherits="style=left" style="opacity: 0.19"/>
-    <td xbl:inherits="style=left" style="opacity: 0.2"/>
-    <td xbl:inherits="style=left" style="opacity: 0.21"/>
-    <td xbl:inherits="style=left" style="opacity: 0.22"/>
-    <td xbl:inherits="style=left" style="opacity: 0.23"/>
-    <td xbl:inherits="style=left" style="opacity: 0.24"/>
-    <td xbl:inherits="style=left" style="opacity: 0.25"/>
-    <td xbl:inherits="style=left" style="opacity: 0.26"/>
-    <td xbl:inherits="style=left" style="opacity: 0.27"/>
-    <td xbl:inherits="style=left" style="opacity: 0.28"/>
-    <td xbl:inherits="style=left" style="opacity: 0.29"/>
-    <td xbl:inherits="style=left" style="opacity: 0.3"/>
-    <td xbl:inherits="style=left" style="opacity: 0.31"/>
-    <td xbl:inherits="style=left" style="opacity: 0.32"/>
-    <td xbl:inherits="style=left" style="opacity: 0.33"/>
-    <td xbl:inherits="style=left" style="opacity: 0.34"/>
-    <td xbl:inherits="style=left" style="opacity: 0.35"/>
-    <td xbl:inherits="style=left" style="opacity: 0.36"/>
-    <td xbl:inherits="style=left" style="opacity: 0.37"/>
-    <td xbl:inherits="style=left" style="opacity: 0.38"/>
-    <td xbl:inherits="style=left" style="opacity: 0.39"/>
-    <td xbl:inherits="style=left" style="opacity: 0.4"/>
-    <td xbl:inherits="style=left" style="opacity: 0.41"/>
-    <td xbl:inherits="style=left" style="opacity: 0.42"/>
-    <td xbl:inherits="style=left" style="opacity: 0.43"/>
-    <td xbl:inherits="style=left" style="opacity: 0.44"/>
-    <td xbl:inherits="style=left" style="opacity: 0.45"/>
-    <td xbl:inherits="style=left" style="opacity: 0.46"/>
-    <td xbl:inherits="style=left" style="opacity: 0.47"/>
-    <td xbl:inherits="style=left" style="opacity: 0.48"/>
-    <td xbl:inherits="style=left" style="opacity: 0.49"/>
-    <td xbl:inherits="style=left" style="opacity: 0.5"/>
-    <td xbl:inherits="style=left" style="opacity: 0.51"/>
-    <td xbl:inherits="style=left" style="opacity: 0.52"/>
-    <td xbl:inherits="style=left" style="opacity: 0.53"/>
-    <td xbl:inherits="style=left" style="opacity: 0.54"/>
-    <td xbl:inherits="style=left" style="opacity: 0.55"/>
-    <td xbl:inherits="style=left" style="opacity: 0.56"/>
-    <td xbl:inherits="style=left" style="opacity: 0.57"/>
-    <td xbl:inherits="style=left" style="opacity: 0.58"/>
-    <td xbl:inherits="style=left" style="opacity: 0.59"/>
-    <td xbl:inherits="style=left" style="opacity: 0.6"/>
-    <td xbl:inherits="style=left" style="opacity: 0.61"/>
-    <td xbl:inherits="style=left" style="opacity: 0.62"/>
-    <td xbl:inherits="style=left" style="opacity: 0.63"/>
-    <td xbl:inherits="style=left" style="opacity: 0.64"/>
-    <td xbl:inherits="style=left" style="opacity: 0.65"/>
-    <td xbl:inherits="style=left" style="opacity: 0.66"/>
-    <td xbl:inherits="style=left" style="opacity: 0.67"/>
-    <td xbl:inherits="style=left" style="opacity: 0.68"/>
-    <td xbl:inherits="style=left" style="opacity: 0.69"/>
-    <td xbl:inherits="style=left" style="opacity: 0.7"/>
-    <td xbl:inherits="style=left" style="opacity: 0.71"/>
-    <td xbl:inherits="style=left" style="opacity: 0.72"/>
-    <td xbl:inherits="style=left" style="opacity: 0.73"/>
-    <td xbl:inherits="style=left" style="opacity: 0.74"/>
-    <td xbl:inherits="style=left" style="opacity: 0.75"/>
-    <td xbl:inherits="style=left" style="opacity: 0.76"/>
-    <td xbl:inherits="style=left" style="opacity: 0.77"/>
-    <td xbl:inherits="style=left" style="opacity: 0.78"/>
-    <td xbl:inherits="style=left" style="opacity: 0.79"/>
-    <td xbl:inherits="style=left" style="opacity: 0.8"/>
-    <td xbl:inherits="style=left" style="opacity: 0.81"/>
-    <td xbl:inherits="style=left" style="opacity: 0.82"/>
-    <td xbl:inherits="style=left" style="opacity: 0.83"/>
-    <td xbl:inherits="style=left" style="opacity: 0.84"/>
-    <td xbl:inherits="style=left" style="opacity: 0.85"/>
-    <td xbl:inherits="style=left" style="opacity: 0.86"/>
-    <td xbl:inherits="style=left" style="opacity: 0.87"/>
-    <td xbl:inherits="style=left" style="opacity: 0.88"/>
-    <td xbl:inherits="style=left" style="opacity: 0.89"/>
-    <td xbl:inherits="style=left" style="opacity: 0.9"/>
-    <td xbl:inherits="style=left" style="opacity: 0.91"/>
-    <td xbl:inherits="style=left" style="opacity: 0.92"/>
-    <td xbl:inherits="style=left" style="opacity: 0.93"/>
-    <td xbl:inherits="style=left" style="opacity: 0.94"/>
-    <td xbl:inherits="style=left" style="opacity: 0.95"/>
-    <td xbl:inherits="style=left" style="opacity: 0.96"/>
-    <td xbl:inherits="style=left" style="opacity: 0.97"/>
-    <td xbl:inherits="style=left" style="opacity: 0.98"/>
-    <td xbl:inherits="style=left" style="opacity: 0.99"/>
-    <td xbl:inherits="style=left" style="opacity: 1"/>
-                    </tr>
-                </table>
-            </div>
-        </content>
-    </binding>
 </bindings>
 
 <!-- vim:se ft=xbl sw=4 sts=4 tw=0 et: -->

content/style.js

@@ -27,7 +27,7 @@ function Highlights(name, store, serial)
         Preview     color: gray;
 
         CompTitle          color: magenta; background: white; font-weight: bold;
-        CompTitle>*        border-bottom: 1px dashed magenta;
+        CompTitle>*        /* border-bottom: 1px dashed magenta; */
         CompMsg            font-style: italic; margin-left: 16px;
         CompItem
         CompItem[selected] background: yellow;
@@ -41,6 +41,10 @@ function Highlights(name, store, serial)
         CompMore           text-align: center; height: .5ex; line-height: .5ex;
         CompMore::after    content: "\2304" /* Unicode down arrowhead */
 
+        Gradient        height: 1px; margin-bottom: -1px;
+        GradientLeft    background-color: magenta;
+        GradientRight   background-color: white;
+
         Indicator   color: blue;
         Filter      font-weight: bold;
 

content/ui.js

@@ -1323,6 +1323,17 @@ function ItemList(id) //{{{
     doc.body.appendChild(doc.createTextNode(""));
     doc.body.style.borderTop = "1px solid black"; // FIXME: For cases where completions/MOW are shown at once, or ls=0. Should use :highlight.
 
+    let gradient =
+        <div highlight="Gradient">
+            <div style="height: 0px"><div highlight="GradientRight Gradient"/></div>
+            <table highlight="Gradient" width="100%">
+                <tr>
+                    { template.map(util.range(0, 100), function (i)
+                      <td highlight="GradientLeft" style={"opacity: " + (1 - i / 100)}/>) }
+                </tr>
+            </table>
+        </div>;
+
     var items = null;
     var startIndex = -1;  // The index of the first displayed item
     var endIndex = -1;    // The index one *after* the last displayed item
@@ -1371,6 +1382,7 @@ function ItemList(id) //{{{
                     <div highlight="Completions">
                         { context.createRow(context.title || [], "CompTitle") }
                     </div>
+                    { gradient }
                     <div key="message" highlight="CompMsg"/>
                     <div key="up" highlight="CompLess"/>
                     <div key="items" highlight="Completions"/>
@@ -1418,7 +1430,7 @@ function ItemList(id) //{{{
                 nodes.message.textContent = context.message;
             nodes.message.style.display = context.message ? "block" : "none";
             nodes.waiting.style.display = context.incomplete ? "block" : "none";
-            nodes.up.style.display = "none";
+            nodes.up.style.opacity = "0";
             nodes.down.style.display = "none";
 
             let root = nodes.root
@@ -1446,8 +1458,13 @@ function ItemList(id) //{{{
                 else if (!display && row.parentNode == items)
                     items.removeChild(row);
             }
-            nodes.up.style.display = (start == 0) ? "none" : "block";
+            if (context.items.length == 0)
-            nodes.down.style.display = (end == context.items.length) ? "none" : "block";
+                return;
+            nodes.up.style.opacity = (start == 0) ? "0" : "1";
+            if (end != context.items.length)
+                nodes.down.style.display = "block"
+            else
+                nodes.up.style.display = "block"
         });
 
         divNodes.noCompletions.style.display = haveCompletions ? "none" : "block";