move more-prompt messages to the commandline and use the default UI font size

in the MOW

content/bookmarks.js

@@ -258,7 +258,7 @@ function Bookmarks() //{{{
 
             for (var i = 0; i < items.length; i++)
             {
-                var list = "<table style=\"white-space: nowrap;\"><tr align=\"left\" style=\"color: magenta\"><th>title</th><th>keyword</th><th>URL</th><th align=\"right\">tags</th></tr>";
+                var list = "<table><tr align=\"left\" class=\"hl-Title\"><th>title</th><th>keyword</th><th>URL</th><th align=\"right\">tags</th></tr>";
                 for (var i = 0; i < items.length; i++)
                 {
                     var title = items[i][1].replace(/</, "&lt;").replace(/>/, "&gt;");
@@ -488,7 +488,7 @@ function History() //{{{
 
             for (var i = 0; i < items.length; i++)
             {
-                var list = "<table style=\"white-space: nowrap;\"><tr align=\"left\" style=\"color: magenta\"><th>title</th><th>URL</th></tr>";
+                var list = "<table><tr align=\"left\" class=\"hl-Title\"><th>title</th><th>URL</th></tr>";
                 for (var i = 0; i < items.length; i++)
                 {
                     var title = items[i][1].replace(/</, "&lt;").replace(/>/, "&gt;");
@@ -743,11 +743,11 @@ function Marks() //{{{
             }
         }
 
-        var list = "<table><tr align=\"left\" style=\"color: magenta\"><th>mark</th><th>line</th><th>col</th><th>file</th></tr>";
+        var list = "<table><tr align=\"left\" class=\"hl-Title\"><th>mark</th><th>line</th><th>col</th><th>file</th></tr>";
         for (var i = 0; i < marks.length; i++)
         {
             list += "<tr>"
-                  + "<td>&nbsp;"                   + marks[i][0]                              +  "</td>"
+                  + "<td> "                        + marks[i][0]                              +  "</td>"
                   + "<td align=\"right\">"         + Math.round(marks[i][1].position.y * 100) + "%</td>"
                   + "<td align=\"right\">"         + Math.round(marks[i][1].position.x * 100) + "%</td>"
                   + "<td style=\"color: green;\">" + marks[i][1].location.replace(/</, "&lt;").replace(/>/, "&gt;") +  "</td>"
@@ -838,10 +838,10 @@ function QuickMarks() //{{{
             }
         }
 
-        var list = "<table><tr align=\"left\" style=\"color: magenta\"><th>QuickMark</th><th>URL</th></tr>";
+        var list = "<table><tr align=\"left\" class=\"hl-Title\"><th>QuickMark</th><th>URL</th></tr>";
         for (var i = 0; i < marks.length; i++)
         {
-            list += "<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;" + marks[i][0] +
+            list += "<tr><td>    " + marks[i][0] +
                     "</td><td style=\"color: green;\">" + marks[i][1].replace(/</, "&lt;").replace(/>/, "&gt;") + "</td></tr>";
         }
         list += "</table>";

content/buffers.js

@@ -232,22 +232,22 @@ function Buffer() //{{{
             var items = vimperator.completion.get_buffer_completions("");
             var number, indicator, title, url;
 
-            var list = "<table style=\"white-space: pre;\">"
+            var list = "<table>"
             for (var i = 0; i < items.length; i++)
             {
                 if (i == vimperator.tabs.index())
-                   indicator = "&nbsp;<span style=\"color: blue\">%</span>&nbsp;";
+                   indicator = " <span style=\"color: blue\">%</span> ";
                 else if (i == vimperator.tabs.index(vimperator.tabs.alternate))
-                   indicator = "&nbsp;<span style=\"color: blue\">#</span>&nbsp;";
+                   indicator = " <span style=\"color: blue\">#</span> ";
                 else
-                   indicator = "&nbsp;&nbsp;&nbsp;";
+                   indicator = "   ";
 
                 [number, title] = items[i][0].split(/:\s+/, 2);
                 url = items[i][1];
                 url = url.replace(/>/, "&gt;").replace(/</, "&lt;");
                 title = title.replace(/>/, "&gt;").replace(/</, "&lt;");
 
-                list += "<tr><td align=\"right\">&nbsp;&nbsp;" + number + "</td><td>" + indicator +
+                list += "<tr><td align=\"right\">  " + number + "</td><td>" + indicator +
                         "</td><td style=\"width: 250px; max-width: 500px; overflow: hidden;\">" + title +
                         "</td><td><span style=\"color: green\">" + url + "</span></td></tr>";
             }

content/commands.js

@@ -1426,25 +1426,30 @@ function Commands() //{{{
                     var after_time = Date.now();
                 
                     if ((after_time - before_time) / count >= 100)
-                        var each = "&nbsp;&nbsp;Each time:&nbsp;&nbsp;<span style=\"color: green\">" +
+                        var each = "<td>  Each time:</td><td align=\"right\"><span style=\"color: green\">" +
                             ((after_time - before_time) / 1000.0 / count) +
-                            "</span> sec<br/>";
+                            "</span></td><td>sec</td>";
                     else
-                        var each = "&nbsp;&nbsp;Each time:&nbsp;&nbsp;<span style=\"color: green\">" +
+                        var each = "<td>  Each time:</td><td align=\"right\"><span style=\"color: green\">" +
                             ((after_time - before_time) / count) +
-                            "</span> msec<br/>";
+                            "</span></td><td>msec</td>";
 
                     if (after_time - before_time >= 100)
-                        var total = "&nbsp;&nbsp;Total time: <span style=\"color: red\">" +
+                        var total = "<td>  Total time:</td><td align=\"right\"><span style=\"color: red\">" +
                             ((after_time - before_time) / 1000.0) +
-                            "</span> sec";
+                            "</span></td><td>sec</td>";
                     else
-                        var total = "&nbsp;&nbsp;Total time: <span style=\"color: red\">" +
+                        var total = "<td>  Total time:</td><td align=\"right\"><span style=\"color: red\">" +
-                            (after_time - before_time) + "</span> msec";
+                            (after_time - before_time) + "</span></td><td>msec</td>";
 
+                    var str = "<table>" +
+                              "<tr align=\"left\" class=\"hl-Title\"><th colspan=\"3\">Code execution summary</th></tr>" +
+                              "<tr><td>  Executed:</td><td align=\"right\"><span style=\"color: green\">" + count + "</span></td><td>times</td></tr>" +
+                              "<tr>" + each + "</tr>" +
+                              "<tr>" + total + "</tr>"
+                              "</table>";
 
-                    vimperator.echo("<span style=\"color: magenta; font-weight: bold\">Code execution summary</span>:<br/>" +
+                    vimperator.commandline.echo(str, vimperator.commandline.HL_NORMAL, true);
-                        "&nbsp;&nbsp;Executed:&nbsp;&nbsp;&nbsp;<span style=\"color: green\">" + count + "</span> times<br/>" + each + total);
                 }
                 else
                 {

content/mappings.js

@@ -288,9 +288,9 @@ function Mappings() //{{{
             for (var j = 0; j < maps[i].names.length; j++)
             {
                 list += "<tr>";
-                list += "<td>&nbsp;" + maps[i].names[j].replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</td>"
+                list += "<td> " + maps[i].names[j].replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</td>"
                 if (maps[i].rhs)
-                    list += "<td>&nbsp;" + maps[i].rhs.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</td>"
+                    list += "<td> " + maps[i].rhs.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</td>"
                 list += "</tr>";
             }
         }

content/options.js

@@ -304,8 +304,8 @@ function Options() //{{{
     this.list = function()
     {
         // TODO: columns like Vim?
-        var list = "<table style=\"white-space: nowrap;\">" +
+        var list = "<table>" +
-                   "<tr align=\"left\" style=\"color: magenta\"><th>--- Options ---</th></tr>";
+                   "<tr align=\"left\" class=\"hl-Title\"><th>--- Options ---</th></tr>";
         var name, value;
 
         for (var i = 0; i < options.length; i++)
@@ -315,12 +315,12 @@ function Options() //{{{
 
             if (options[i].type == "boolean")
             {
-                name = value ? "&nbsp;&nbsp;" + name : "no" + name;
+                name = value ? "  " + name : "no" + name;
                 list += "<tr><td>" + name + "</td></tr>";
             }
             else
             {
-                list += "<tr><td>" + "&nbsp;&nbsp;" + name + "=" + value + "</td></tr>";
+                list += "<tr><td>" + "  " + name + "=" + value + "</td></tr>";
             }
         }
 

content/ui.js

@@ -138,7 +138,7 @@ function CommandLine() //{{{
         commandline_widget.setAttribute("class", group);
     }
 
-    // Sets the prompt - for example, : or /
+    // sets the prompt - for example, : or /
     function setPrompt(prompt)
     {
         if (typeof prompt != "string")
@@ -147,7 +147,7 @@ function CommandLine() //{{{
         prompt_widget.value = prompt;
         if (prompt)
         {
-            // Initially (in the xul) the prompt is 'collapsed', this makes
+            // initially (in the xul) the prompt is 'collapsed', this makes
             // sure it's visible, then we toggle the display which works better
             prompt_widget.style.visibility = 'visible';
             prompt_widget.style.display = 'inline';
@@ -159,16 +159,15 @@ function CommandLine() //{{{
         }
     }
 
-    // Sets the command - e.g. 'tabopen', 'open http://example.com/'
+    // sets the command - e.g. 'tabopen', 'open http://example.com/'
     function setCommand(cmd)
     {
         command_widget.value = cmd;
     }
 
-    // TODO: the invoking command should be pasted at the top of the MOW and
+    // TODO: extract CSS
-    //       the MOW messages should actually be displayed in the commandline
-    //     : extract CSS
     //     : resize upon a window resize
+    //     : echoed lines longer than v-c-c.width should wrap and use MOW
     function setMultiline(str)
     {
         // TODO: we should retain any previous command output like Vim
@@ -177,16 +176,18 @@ function CommandLine() //{{{
 
         multiline_input_widget.collapsed = true;
 
-        var output = "<pre>" + str + "</pre>";
+        var output = ":" + command_widget.value + "<br/>" + str;
-        output += '<span id="end-prompt" style="color: green; background-color: white;">Press ENTER or type command to continue</span>';
+
-        output += '<span id="more-prompt" style="display: none; position: fixed; top: auto; bottom: 0; left: 0; right: 0; color: green; background-color: white;">';
+        var font_size = document.defaultView.getComputedStyle(document.getElementById("main-window"), null).getPropertyValue("font-size");
-        output += "-- More --";
+        multiline_output_widget.contentDocument.body.setAttribute("style", "font-size: " + font_size);
-        output += '</span>';
-        output += '<span id="more-help-prompt" style="display: none; position: fixed; top: auto; bottom: 0; left: 0; right: 0; color: green; background-color: white;">';
-        output += "-- More -- SPACE/d/j: screen/page/line down, b/u/k: up, q: quit";
-        output += '</span>';
 
         multiline_output_widget.contentDocument.body.innerHTML = output;
+        multiline_output_widget.contentDocument.body.id = "vimperator-multiline-output-content";
+
+        var stylesheet = multiline_output_widget.contentDocument.createElement("link");
+        stylesheet.setAttribute("rel", "Stylesheet");
+        stylesheet.setAttribute("href", "chrome://vimperator/skin/vimperator.css");
+        multiline_output_widget.contentDocument.getElementsByTagName("head")[0].appendChild(stylesheet);
 
         var available_height = getBrowser().mPanelContainer.boxObject.height;
         var content_height = multiline_output_widget.contentDocument.height;
@@ -197,12 +198,17 @@ function CommandLine() //{{{
 
         if (vimperator.options["more"] && multiline_output_widget.contentWindow.scrollMaxY > 0)
         {
-            multiline_output_widget.contentWindow.document.getElementById("more-prompt").style.display = "inline";
+            setHighlightGroup("hl-MoreMsg");
+            setPrompt("");
+            setCommand("-- More --");
             multiline_output_widget.contentWindow.scrollTo(0, 0);
         }
         else
         {
             multiline_output_widget.contentWindow.scrollTo(0, content_height);
+            setHighlightGroup("hl-Question");
+            setPrompt("");
+            setCommand('Press ENTER or type command to continue');
         }
 
         multiline_output_widget.contentWindow.focus();
@@ -264,7 +270,7 @@ function CommandLine() //{{{
         command_widget.focus();
     };
 
-    /* normally used when pressing esc, does not execute a command */
+    // normally used when pressing esc, does not execute a command
     this.close = function()
     {
         var res = vimperator.triggerCallback("cancel", cur_extended_mode);
@@ -476,7 +482,7 @@ function CommandLine() //{{{
                     if (res)
                         [completion_start_index, completions] = res;
 
-                    // Sort the completion list
+                    // sort the completion list
                     if (vimperator.options["wildoptions"].search(/\bsort\b/) > -1)
                     {
                         completions.sort(function(a, b) {
@@ -634,6 +640,7 @@ function CommandLine() //{{{
 
         var show_more_help_prompt = false;
         var show_more_prompt = false;
+        var clear_prompt = false;
 
         function isScrollable() { return !win.scrollMaxY == 0; }
 
@@ -641,9 +648,9 @@ function CommandLine() //{{{
 
         function close()
         {
-            multiline_output_widget.collapsed = true;
             // FIXME: use mode stack
             vimperator.modes.reset();
+            clear_prompt = true;
         }
 
         function pass(event)
@@ -657,7 +664,7 @@ function CommandLine() //{{{
         switch (key)
         {
             case ":":
-                vimperator.commandline.open(":", "", vimperator.modes.EX);
+                pass(event);
                 break;
 
             // down a line
@@ -786,22 +793,27 @@ function CommandLine() //{{{
         }
 
         // set appropriate prompt string
-        var more_prompt = win.document.getElementById("more-prompt");
+        if (clear_prompt)
-        var more_help_prompt = win.document.getElementById("more-help-prompt");
-
-        if (show_more_help_prompt)
         {
-            more_prompt.style.display = "none";
+            this.clear();
-            more_help_prompt.style.display = "inline";
+        }
+        else if (show_more_help_prompt)
+        {
+            setHighlightGroup(this.HL_MOREMSG);
+            setPrompt("");
+            setCommand("-- More -- SPACE/d/j: screen/page/line down, b/u/k: up, q: quit");
         }
         else if (show_more_prompt || (vimperator.options["more"] && isScrollable() && !atEnd()))
         {
-            more_help_prompt.style.display = "none";
+            setHighlightGroup(this.HL_MOREMSG);
-            more_prompt.style.display = "inline";
+            setPrompt("");
+            setCommand("-- More --");
         }
         else
         {
-            more_prompt.style.display = more_help_prompt.style.display = "none";
+            setHighlightGroup(this.HL_QUESTION);
+            setPrompt("");
+            setCommand('Press ENTER or type command to continue');
         }
     }
 

content/vimperator.js

@@ -363,7 +363,7 @@ const vimperator = (function() //{{{
             }
 
             if (color)
-                string += "<span style=\"color: magenta; font-weight: bold;\">" + obj + "</span>::\n";
+                string += "<span class=\"hl-Title\">" + obj + "</span>::\n";
             else
                 string += obj + "::\n";
 

skin/vimperator.css

@@ -114,6 +114,8 @@ the terms of any one of the MPL, the GPL or the LGPL.
     background-color: black;
 }
 
+/* highlight groups */
+
 .hl-Normal {
     background-color: white;
     color: black;
@@ -145,4 +147,44 @@ the terms of any one of the MPL, the GPL or the LGPL.
     color: red;
 }
 
+.hl-Normal {
+    background-color: white;
+    color: black;
+}
+.hl-ErrorMsg {
+    background-color: red;
+    color: white;
+    font-weight: bold;
+}
+.hl-MoreMsg {
+    color: green;
+    background-color: white;
+}
+.hl-Title {
+    color: magenta;
+    background-color: white;
+    font-weight: bold;
+}
+
+/* MOW */
+
+#vimperator-multiline-output-content {
+    white-space: pre; /* -moz-pre-wrap FIXME: Should lines wrap like Vim? */
+    font-family: -moz-fixed;
+    margin: 0px;
+}
+
+#vimperator-multiline-output-content * {
+    font: inherit;
+}
+
+#vimperator-multiline-output-content table {
+    white-space: inherit;
+    border-spacing: 0px;
+}
+
+#vimperator-multiline-output-content td {
+    padding: 0px;
+}
+
 /* vim: set fdm=marker sw=4 ts=4 et: */