Bug 580820 - Visually distinguish JavaScript input from output in the Console, r=mossop

toolkit/components/console/hudservice/HUDService.jsm

@@ -2422,7 +2422,7 @@ JSTerm.prototype = {
       return;
     }
 
-    this.writeOutput(str);
+    this.writeOutput(str, true);
 
     try {
       var execStr = "with(window) {" + str + "}";
@@ -2430,13 +2430,13 @@ JSTerm.prototype = {
         Cu.evalInSandbox(execStr,  this.sandbox, "default", "HUD Console", 1);
 
       if (result || result === false || result === " ") {
-        this.writeOutput(result);
+        this.writeOutput(result, false);
       }
       else if (result === undefined) {
-        this.writeOutput("undefined");
+        this.writeOutput("undefined", false);
       }
       else if (result === null) {
-        this.writeOutput("null");
+        this.writeOutput("null", false);
       }
     }
     catch (ex) {
@@ -2451,15 +2451,35 @@ JSTerm.prototype = {
     this.inputNode.value = "";
   },
 
-  writeOutput: function JST_writeOutput(aOutputMessage)
+  /**
+   * Writes a message to the HUD that originates from the interactive
+   * JavaScript console.
+   *
+   * @param string aOutputMessage
+   *        The message to display.
+   * @param boolean aIsInput
+   *        True if the message is the user's input, false if the message is
+   *        the result of the expression the user typed.
+   * @returns void
+   */
+  writeOutput: function JST_writeOutput(aOutputMessage, aIsInput)
   {
     var node = this.elementFactory("div");
-    if (this.cssClassOverride) {
-      node.setAttribute("class", this.cssClassOverride);
+    if (aIsInput) {
+      node.setAttribute("class", "jsterm-input-line");
+      aOutputMessage = "> " + aOutputMessage;
     }
     else {
       node.setAttribute("class", "jsterm-output-line");
     }
+
+    if (this.cssClassOverride) {
+      let classes = this.cssClassOverride.split(" ");
+      for (let i = 0; i < classes.length; i++) {
+        node.classList.add(classes[i]);
+      }
+    }
+
     var textNode = this.textFactory(aOutputMessage);
     node.appendChild(textNode);
     this.outputNode.appendChild(node);

toolkit/components/console/hudservice/tests/browser/browser_HUDServiceTestsAll.js

@@ -336,6 +336,26 @@ function testNullUndefinedOutput()
       "'undefined' printed to output");
 }
 
+function testJSInputAndOutputStyling() {
+  let jsterm = HUDService.hudWeakReferences[hudId].get().jsterm;
+
+  jsterm.clearOutput();
+  jsterm.execute("2 + 2");
+
+  let outputChildren = jsterm.outputNode.childNodes;
+  let jsInputNode = outputChildren[0];
+  isnot(jsInputNode.childNodes[0].nodeValue.indexOf("2 + 2"), -1,
+    "JS input node contains '2 + 2'");
+  isnot(jsInputNode.getAttribute("class").indexOf("jsterm-input-line"), -1,
+    "JS input node is of the CSS class 'jsterm-input-line'");
+
+  let jsOutputNode = outputChildren[1];
+  isnot(jsOutputNode.childNodes[0].nodeValue.indexOf("4"), -1,
+    "JS output node contains '4'");
+  isnot(jsOutputNode.getAttribute("class").indexOf("jsterm-output-line"), -1,
+    "JS output node is of the CSS class 'jsterm-output-line'");
+}
+
 function testCreateDisplay() {
   ok(typeof cs.consoleDisplays == "object",
      "consoledisplays exist");
@@ -698,6 +718,7 @@ function test() {
       testConsoleHistory();
       testOutputOrder();
       testNullUndefinedOutput();
+      testJSInputAndOutputStyling();
       testExecutionScope();
       testCompletion();
       testPropertyProvider();