merge MOW improvements

content/bookmarks.js

@@ -271,17 +271,26 @@ function Bookmarks() //{{{
 
             for (var i = 0; i < items.length; i++)
             {
-                var list = "<table><tr align=\"left\" style=\"color: magenta\"><th>title</th><th>URL</th></tr>";
+                var list = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
+                           "<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++)
                 {
-                    list += "<tr><td>" + items[i][1] + "</td><td style=\"color: green\">" + items[i][0] + "</td></tr>";
+                    var title = vimperator.util.escapeHTML(items[i][1]);
+                    if (title.length > 50)
+                        title = title.substr(0, 47) + "...";
+                    var keyword = "".substr(0,12); // maximum 12 chars
+                    var url = vimperator.util.escapeHTML(items[i][0]);
+                    var tags = "tag1, tag2";
+                    list += "<tr><td>" + title + "</td><td style=\"color: blue\" align=\"center\">" + keyword +
+                            "</td><td style=\"color: green; width: 100%\">" + url +
+                            "</td><td style=\"color: red;\" align=\"right\">" + tags + "</td></tr>";
                     // TODO: change that list to something like this when we have keywords
                     //list += "<tr><td width=\"30%\"><span style=\"font-weight: bold\">" + items[i][1].substr(0,20) + "</span></td><td width=\"70%\"><span style=\"color: green\">" + items[i][0] + "</span><br/>" + "Keyword: <span style=\"color: blue\">foo</span> Tags: <span style=\"color: red\">computer, news</span>" + "</td></tr>";
 
                 }
                 list += "</table>";
 
-                vimperator.commandline.echo(list, true);
+                vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true);
             }
         }
     }
@@ -441,6 +450,7 @@ function History() //{{{
     };
 
     // TODO: better names?
+    //       and move to vimperator.buffer.?
     this.stepTo = function(steps)
     {
         var index = getWebNavigation().sessionHistory.index + steps;
@@ -504,14 +514,19 @@ function History() //{{{
 
             for (var i = 0; i < items.length; i++)
             {
-                var list = "<table><tr align=\"left\" style=\"color: magenta\"><th>title</th><th>URL</th></tr>";
+                var list = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
+                           "<table><tr align=\"left\" class=\"hl-Title\"><th>title</th><th>URL</th></tr>";
                 for (var i = 0; i < items.length; i++)
                 {
-                    list += "<tr><td>" + items[i][1] + "</td><td>" + items[i][0] + "</td></tr>";
+                    var title = vimperator.util.escapeHTML(items[i][1]);
+                    if (title.length > 50)
+                        title = title.substr(0, 47) + "...";
+                    var url = vimperator.util.escapeHTML(items[i][0]);
+                    list += "<tr><td>" + title + "</td><td style=\"color: green;\">" + url + "</td></tr>";
                 }
                 list += "</table>";
 
-                vimperator.commandline.echo(list, true);
+                vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true);
             }
         }
     }
@@ -755,19 +770,20 @@ 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 = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
+                   "<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.y * 100) + "%</td>"
-                  + "<td align=\"right\">" + Math.round(marks[i][1].position.x * 100) + "%</td>"
+                  + "<td align=\"right\">"         + Math.round(marks[i][1].position.x * 100) + "%</td>"
-                  + "<td>"                 + marks[i][1].location                     +  "</td>"
+                  + "<td style=\"color: green;\">" + vimperator.util.escapeHTML(marks[i][1].location) +  "</td>"
                   + "</tr>";
         }
         list += "</table>";
 
-        vimperator.commandline.echo(list, true); // TODO: force of multiline widget a better way
+        vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true); // TODO: force of multiline widget a better way
     }
     //}}}
 } //}}}
@@ -850,14 +866,16 @@ function QuickMarks() //{{{
             }
         }
 
-        var list = "<table><tr align=\"left\" style=\"color: magenta\"><th>QuickMark</th><th>URL</th></tr>";
+        var list = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
+                   "<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] + "</td><td>" + marks[i][1] + "</td></tr>";
+            list += "<tr><td>    " + marks[i][0] +
+                    "</td><td style=\"color: green;\">" + vimperator.util.escapeHTML(marks[i][1]) + "</td></tr>";
         }
         list += "</table>";
 
-        vimperator.commandline.echo(list, true); // TODO: force of multiline widget a better way
+        vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true); // TODO: force of multiline widget a better way
     }
 
     this.destroy = function()

content/buffers.js

@@ -185,24 +185,28 @@ function Buffer() //{{{
             var items = vimperator.completion.get_buffer_completions("");
             var number, indicator, title, url;
 
-            var list = "<table>"
+            var list = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" + "<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 = vimperator.util.escapeHTML(url);
+                title = vimperator.util.escapeHTML(title);
 
-                list += "<tr><td align=\"right\">&nbsp;&nbsp;" + number + "</td><td>" + indicator + "</td><td>" + title + "</td><td><span style=\"color: green\">" + url + "</span></td></tr>";
+                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>";
             }
             list += "</table>";
 
-            vimperator.commandline.echo(list, true);
+            vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true);
         }
     }
 

content/commands.js

@@ -503,7 +503,7 @@ function Commands() //{{{
         if (typeof arg === "object")
             arg = vimperator.objectToString(arg, color);
         else if (typeof arg === "function")
-            arg = arg.toString().replace(/</g, "&lt;").replace(/>/, "&gt;");
+            arg = vimperator.util.escapeHTML(arg.toString());
         else if (typeof arg === "number" || typeof arg === "boolean")
             arg = "" + arg;
         else if (typeof arg === "undefined")
@@ -1423,25 +1423,31 @@ 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 = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
+                              "<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/find.js

@@ -166,9 +166,9 @@ function Search() //{{{
             // our command line
             setTimeout(function() {
                 if (up)
-                    vimperator.echoerr("search hit TOP, continuing at BOTTOM");
+                    vimperator.commandline.echo("search hit TOP, continuing at BOTTOM", vimperator.commandline.HL_WARNING);
                 else
-                    vimperator.echoerr("search hit BOTTOM, continuing at TOP");
+                    vimperator.commandline.echo("search hit BOTTOM, continuing at TOP", vimperator.commandline.HL_WARNING);
             }, 0);
         }
         else

content/mappings.js

@@ -270,21 +270,20 @@ function Mappings() //{{{
         }
 
         var list = "<table>";
-
         for (var i = 0; i < maps.length; i++)
         {
             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> " + vimperator.util.escapeHTML(maps[i].names[j]) + "</td>"
                 if (maps[i].rhs)
-                    list += "<td>&nbsp;" + maps[i].rhs.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</td>"
+                    list += "<td> " + vimperator.util.escapeHTML(maps[i].rhs) + "</td>"
                 list += "</tr>";
             }
         }
         list += "</table>";
 
-        vimperator.commandline.echo(list, true); // TODO: force of multiline widget a better way
+        vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true); // TODO: force of multiline widget a better way
     }
 
     /////////////////////////////////////////////////////////////////////////////}}}

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 = ":" + vimperator.util.escapeHTML(vimperator.commandline.getCommand()) + "<br/>" +
-                   "<tr align=\"left\" style=\"color: magenta\"><th>--- Options ---</th></tr>";
+                   "<table><tr align=\"left\" class=\"hl-Title\"><th>--- Options ---</th></tr>";
         var name, value;
 
         for (var i = 0; i < options.length; i++)
@@ -315,18 +315,18 @@ 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>";
             }
         }
 
         list += "</table>";
 
-        vimperator.commandline.echo(list, true);
+        vimperator.commandline.echo(list, vimperator.commandline.HL_NORMAL, true);
     }
 
     // TODO: separate Preferences from Options? Would these utility functions

content/ui.js

@@ -110,12 +110,6 @@ function CommandLine() //{{{
     var multiline_output_widget = document.getElementById("vimperator-multiline-output");
     multiline_output_widget.contentDocument.body.setAttribute("style", "margin: 0px; font-family: -moz-fixed;"); // get rid of the default border
     multiline_output_widget.contentDocument.body.innerHTML = "";
-    // we need this hack, or otherwise the first use of setMultiline() will have a wrong height
-    setTimeout(function() {
-        multiline_output_widget.collapsed = false;
-        var content_height = multiline_output_widget.contentDocument.height;
-        multiline_output_widget.collapsed = true;
-    }, 100);
 
     // the widget used for multiline intput
     var multiline_input_widget = document.getElementById("vimperator-multiline-input");
@@ -133,20 +127,12 @@ function CommandLine() //{{{
     var multiline_regexp = null;
     var multiline_callback = null;
 
-    function setNormalStyle()
+    function setHighlightGroup(group)
     {
-        commandline_widget.setAttribute("class", "normal");
+        commandline_widget.setAttribute("class", group);
-    }
-    function setMessageStyle()
-    {
-        commandline_widget.setAttribute("class", "message");
-    }
-    function setErrorStyle()
-    {
-        commandline_widget.setAttribute("class", "error");
     }
 
-    // Sets the prompt - for example, : or /
+    // sets the prompt - for example, : or /
     function setPrompt(prompt)
     {
         if (typeof prompt != "string")
@@ -155,7 +141,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';
@@ -167,53 +153,67 @@ 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.hidden = false;
         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
-        if (!multiline_output_widget.collapsed)
-            multiline_output_widget.collapsed = true;
-
         multiline_input_widget.collapsed = true;
 
-        var output = str.replace(/\n|\\n/g, "<br/>");
+        var output = "<div class=\"ex-command-output\">" + str + "</div>";
-        //output =  ":" + command_widget.value + "<br/>" + output;
+        if (!multiline_output_widget.collapsed)
-        output += "<br/>"
+        {
-        output += '<span id="end-prompt" style="color: green; background-color: white;">Press ENTER or type command to continue</span>';
+            // FIXME: need to make sure an open MOW is closed when commands
-        output += '<span id="more-prompt" style="display: none; position: fixed; top: auto; bottom: 0; left: 0; right: 0; color: green; background-color: white;">';
+            //        that don't generate output are executed
-        output += "-- More --";
+            output = multiline_output_widget.contentDocument.body.innerHTML + output;
-        output += '</span>';
+            multiline_output_widget.collapsed = true;
-        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>';
+        var font_size = document.defaultView.getComputedStyle(document.getElementById("main-window"), null).getPropertyValue("font-size");
+        multiline_output_widget.contentDocument.body.setAttribute("style", "font-size: " + font_size);
 
         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;
         var height = content_height < available_height ? content_height : available_height;
 
-        //multiline_output_widget.style.height = height + "px";
         multiline_output_widget.height = height + "px";
         multiline_output_widget.collapsed = false;
 
         if (vimperator.options["more"] && multiline_output_widget.contentWindow.scrollMaxY > 0)
         {
-            multiline_output_widget.contentWindow.document.getElementById("more-prompt").style.display = "inline";
+            // start the last executed command's output at the top of the screen
-            multiline_output_widget.contentWindow.scrollTo(0, 0);
+            var elements = multiline_output_widget.contentDocument.getElementsByTagName("div");
+            for (var i = 0; i < elements.length; i++)
+            {
+                if (elements[i].className != "ex-command-output")
+                    elements.splice(i, 1);
+            }
+            elements[elements.length - 1].scrollIntoView(true);
+
+            if (multiline_output_widget.contentWindow.scrollY >= multiline_output_widget.contentWindow.scrollMaxY)
+                vimperator.commandline.echo("Press ENTER or type command to continue", vimperator.commandline.HL_QUESTION);
+            else
+                vimperator.commandline.echo("-- More --", vimperator.commandline.HL_MOREMSG);
         }
         else
         {
             multiline_output_widget.contentWindow.scrollTo(0, content_height);
+            vimperator.commandline.echo("Press ENTER or type command to continue", vimperator.commandline.HL_QUESTION);
         }
 
         multiline_output_widget.contentWindow.focus();
@@ -243,6 +243,18 @@ function CommandLine() //{{{
     ////////////////////// PUBLIC SECTION //////////////////////////////////////////
     /////////////////////////////////////////////////////////////////////////////{{{
 
+    this.HL_NORMAL   = "hl-Normal";
+    this.HL_ERRORMSG = "hl-ErrorMsg";
+    this.HL_MODEMSG  = "hl-ModeMsg";
+    this.HL_MOREMSG  = "hl-MoreMsg";
+    this.HL_QUESTION = "hl-Question";
+    this.HL_WARNING  = "hl-Warning";
+
+    // not yet used
+    this.FORCE_MULTILINE  =  1 << 0;
+    this.FORCE_SINGLELINE  = 1 << 1;
+    this.FORCE_ECHO  =       1 << 2; // also echoes if the commandline has focus
+
     this.getCommand = function()
     {
         return command_widget.value;
@@ -256,7 +268,7 @@ function CommandLine() //{{{
         cur_command = cmd || "";
         cur_extended_mode = ext_mode || null;
 
-        setNormalStyle();
+        setHighlightGroup(this.HL_NORMAL);
         history_index = UNINITIALIZED;
         completion_index = UNINITIALIZED;
 
@@ -269,8 +281,19 @@ function CommandLine() //{{{
         command_widget.focus();
     };
 
+    // normally used when pressing esc, does not execute a command
+    this.close = function()
+    {
+        var res = vimperator.triggerCallback("cancel", cur_extended_mode);
+        history.add(this.getCommand());
+        //vimperator.modes.set(old_mode, old_extended_mode);
+        vimperator.statusline.updateProgress(""); // we may have a "match x of y" visible
+        this.clear();
+    }
+
     // FIXME: flags not yet really functional --mst
-    this.echo = function(str, flags)
+    // multiline string don't obey highlight_group
+    this.echo = function(str, highlight_group, flags)
     {
         var focused = document.commandDispatcher.focusedElement;
         if (focused && focused == command_widget.inputField || focused == multiline_input_widget.inputField)
@@ -279,42 +302,42 @@ function CommandLine() //{{{
         if (typeof str != "string")
             str = "";
 
-        setNormalStyle();
+        highlight_group = highlight_group || this.HL_NORMAL;
-        if (flags || str.indexOf("\n") > -1 || str.indexOf("\\n") > -1 || str.indexOf("<br>") > -1 || str.indexOf("<br/>") > -1)
+        setHighlightGroup(highlight_group);
+        if (flags /*|| !multiline_output_widget.collapsed*/ || /\n|<br\/?>/.test(str))
         {
             setMultiline(str);
         }
         else
         {
-            setPrompt("");
+            if (!str)
-            setCommand(str);
+                str = "";
+
+            setCommand("");
+            setPrompt(str);
+            // FIXME: this causes the commandline to lose focus in FF2
+            //command_widget.hidden = true;
+
+            // 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';
+            prompt_widget.size = str.length;
         }
         cur_extended_mode = null;
         return true;
     };
 
-    this.echoErr = function(str)
-    {
-        var focused = document.commandDispatcher.focusedElement;
-        if (focused && focused == command_widget.inputField || focused == multiline_input_widget.inputField)
-            return false;
-
-        setErrorStyle();
-        setPrompt("");
-        setCommand(str);
-        cur_extended_mode = null;
-        return true;
-    };
-
     // this will prompt the user for a string
     // vimperator.commandline.input("(s)ave or (o)pen the file?")
     this.input = function(str)
     {
         // TODO: unfinished, need to find out how/if we can block the execution of code
         // to make this code synchronous or at least use a callback
-        setMessageStyle();
+        setHighlightGroup(this.HL_QUESTION);
         setPrompt(str);
         setCommand("");
+        command_widget.focus();
         return "not implemented";
     };
 
@@ -345,9 +368,7 @@ function CommandLine() //{{{
         multiline_output_widget.collapsed = true;
         completionlist.hide();
 
-        setPrompt(" "); // looks faster than an empty string as most prompts are 1 char long
+        this.echo("");
-        setCommand("");
-        setNormalStyle();
     };
 
     this.onEvent = function(event)
@@ -366,7 +387,7 @@ function CommandLine() //{{{
         }
         else if (event.type == "focus")
         {
-            if (!cur_extended_mode)
+            if (!cur_extended_mode && event.target == command_widget.inputField)
                 event.target.blur();
         }
         else if (event.type == "input")
@@ -478,7 +499,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) {
@@ -638,31 +659,20 @@ function CommandLine() //{{{
 
         var show_more_help_prompt = false;
         var show_more_prompt = false;
+        var close_window = false;
+        var pass_event = false;
 
         function isScrollable() { return !win.scrollMaxY == 0; }
 
         function atEnd() { return win.scrollY / win.scrollMaxY >= 1; }
 
-        function close()
-        {
-            multiline_output_widget.collapsed = true;
-            vimperator.setMode(vimperator.modes.NORMAL);
-            vimperator.focusContent();
-        }
-
-        function pass(event)
-        {
-            close();
-            vimperator.events.onKeyPress(event);
-        }
-
         var key = vimperator.events.toString(event);
 
         switch (key)
         {
             case ":":
                 vimperator.commandline.open(":", "", vimperator.modes.EX);
-                break;
+                return;
 
             // down a line
             case "j":
@@ -670,7 +680,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable())
                     win.scrollByLines(1);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             case "<C-j>":
@@ -679,7 +689,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable() && !atEnd())
                     win.scrollByLines(1);
                 else
-                    close(); // don't propagate the event for accept keys
+                    close_window = true;; // don't propagate the event for accept keys
                 break;
 
             // up a line
@@ -691,7 +701,7 @@ function CommandLine() //{{{
                 else if (vimperator.options["more"] && !isScrollable())
                     show_more_prompt = true;
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // half page down
@@ -699,7 +709,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable())
                     win.scrollBy(0, win.innerHeight / 2);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             case "<LeftMouse>":
@@ -716,7 +726,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable())
                     win.scrollByPages(1);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             case "<Space>":
@@ -724,7 +734,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable() && !atEnd())
                     win.scrollByPages(1);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // half page up
@@ -733,7 +743,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable())
                     win.scrollBy(0, -(win.innerHeight / 2));
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // page up
@@ -743,14 +753,14 @@ function CommandLine() //{{{
                 else if (vimperator.options["more"] && !isScrollable())
                     show_more_prompt = true;
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             case "<PageUp>":
                 if (vimperator.options["more"] && isScrollable())
                     win.scrollByPages(-1);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // top of page
@@ -760,7 +770,7 @@ function CommandLine() //{{{
                 else if (vimperator.options["more"] && !isScrollable())
                     show_more_prompt = true;
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // bottom of page
@@ -768,7 +778,7 @@ function CommandLine() //{{{
                 if (vimperator.options["more"] && isScrollable() && !atEnd())
                     win.scrollTo(0, win.scrollMaxY);
                 else
-                    pass(event);
+                    pass_event = true;
                 break;
 
             // copy text to clipboard
@@ -778,34 +788,34 @@ function CommandLine() //{{{
 
             // close the window
             case "q":
-                close();
+                close_window = true;;
                 break;
 
             // unmapped key
             default:
                 if (!vimperator.options["more"] || !isScrollable() || atEnd() || vimperator.events.isCancelKey(key))
-                    pass(event);
+                    pass_event = true;
                 else
                     show_more_help_prompt = true;
         }
 
-        // set appropriate prompt string
+        if (pass_event || close_window)
-        var more_prompt = win.document.getElementById("more-prompt");
+        {
-        var more_help_prompt = win.document.getElementById("more-help-prompt");
+            vimperator.setMode(vimperator.modes.NORMAL);
+            vimperator.focusContent();
+            this.clear();
 
-        if (show_more_help_prompt)
+            if (pass_event)
-        {
+                vimperator.events.onKeyPress(event);
-            more_prompt.style.display = "none";
-            more_help_prompt.style.display = "inline";
         }
-        else if (show_more_prompt || (vimperator.options["more"] && isScrollable() && !atEnd()))
+        else // set update the prompt string
         {
-            more_help_prompt.style.display = "none";
+            if (show_more_help_prompt)
-            more_prompt.style.display = "inline";
+                this.echo("-- More -- SPACE/d/j: screen/page/line down, b/u/k: up, q: quit", this.HL_MOREMSG);
-        }
+            else if (show_more_prompt || (vimperator.options["more"] && isScrollable() && !atEnd()))
-        else
+                this.echo("-- More --", this.HL_MOREMSG);
-        {
+            else
-            more_prompt.style.display = more_help_prompt.style.display = "none";
+                this.echo("Press ENTER or type command to continue", this.HL_QUESTION);
         }
     }
 

content/util.js

@@ -0,0 +1,38 @@
+/***** BEGIN LICENSE BLOCK ***** {{{
+Version: MPL 1.1/GPL 2.0/LGPL 2.1
+
+The contents of this file are subject to the Mozilla Public License Version
+1.1 (the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+http://www.mozilla.org/MPL/
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+for the specific language governing rights and limitations under the
+License.
+
+(c) 2006-2007: Martin Stubenschrott <stubenschrott@gmx.net>
+
+Alternatively, the contents of this file may be used under the terms of
+either the GNU General Public License Version 2 or later (the "GPL"), or
+the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+in which case the provisions of the GPL or the LGPL are applicable instead
+of those above. If you wish to allow use of your version of this file only
+under the terms of either the GPL or the LGPL, and not to allow others to
+use your version of this file under the terms of the MPL, indicate your
+decision by deleting the provisions above and replace them with the notice
+and other provisions required by the GPL or the LGPL. If you do not delete
+the provisions above, a recipient may use your version of this file under
+the terms of any one of the MPL, the GPL or the LGPL.
+}}} ***** END LICENSE BLOCK *****/
+
+vimperator.util = {
+    escapeHTML: function(str)
+    {   
+        var e = window.content.document.createElement("div");
+        e.appendChild(window.content.document.createTextNode(str));
+        return e.innerHTML;
+    }
+}
+
+// vim: set fdm=marker sw=4 ts=4 et:

content/vimperator.js

@@ -451,7 +451,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";
 
@@ -494,7 +494,7 @@ const vimperator = (function() //{{{
                         {
                             var str = value.toString();
                             if (typeof str == "string")  // can be "undefined"
-                                value = str.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                                value = vimperator.util.escapeHTML(str);
                         }
                     }
                     
@@ -746,8 +746,8 @@ const vimperator = (function() //{{{
             vimperator.hints         = new Hints();
             vimperator.log("All modules loaded", 3);
 
-            vimperator.echo    = vimperator.commandline.echo;
+            vimperator.echo    = function(str) { vimperator.commandline.echo(str); }
-            vimperator.echoerr = vimperator.commandline.echoErr;
+            vimperator.echoerr = function(str) { vimperator.commandline.echo(str, vimperator.commandline.HL_ERRORMSG); }
 
             vimperator.globalVariables = {};
 

content/vimperator.xul

@@ -51,6 +51,7 @@ the terms of any one of the MPL, the GPL or the LGPL.
     <script type="application/x-javascript;version=1.7" src="options.js"/>
     <script type="application/x-javascript;version=1.7" src="tabs.js"/>
     <script type="application/x-javascript;version=1.7" src="ui.js"/>
+    <script type="application/x-javascript;version=1.7" src="util.js"/>
 
     <window id="main-window">
 

skin/vimperator.css

@@ -66,28 +66,93 @@
 }
 
 #vimperator-commandline {
-    /* FIXME: black on white or default skin colors? -moz-Field/-moz-FieldText */
+    padding: 1px;
+    /*
     background-color: white;
     color: black;
-    padding: 1px;
+    */
 }
 #vimperator-commandline-prompt, #vimperator-commandline-command {
     background-color: inherit;
     color: inherit;
 }
-#vimperator-commandline.error {
-    background-color: red;
-    color: white;
-    font-weight: bold;
-}
-#vimperator-commandline.message > #vimperator-commandline-prompt {
-    background-color: white;
-    color: magenta;
-    font-weight: bold;
-}
 
 #vimperator-multiline-output {
     overflow: hidden;
 }
 
+/* highlight groups */
+
+.hl-Normal {
+    background-color: white;
+    color: black;
+}
+.hl-ErrorMsg {
+    background-color: red;
+    color: white;
+    font-weight: bold;
+}
+.hl-ModeMsg {
+    background-color: white;
+    color: black;
+}
+.hl-MoreMsg {
+    background-color: white;
+    color: green;
+}
+.hl-Question {
+    background-color: white;
+    color: green;
+}
+.hl-Title {
+    background-color: white;
+    color: magenta;
+    font-weight: bold;
+}
+.hl-Warning {
+    background-color: white;
+    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,
+#vimperator-multiline-output-content th {
+    padding: 0px 2px;
+}
+
 /* vim: set fdm=marker sw=4 ts=4 et: */