Bug 576642 - JSTerm: expanding/shrinking inputNode, r=enn, a=bsmedberg

toolkit/components/console/hudservice/HUDService.jsm

@@ -2467,8 +2467,10 @@ JSTerm.prototype = {
     this.createSandbox();
     this.inputNode = this.mixins.inputNode;
     this.scrollToNode = this.mixins.scrollToNode;
-    let eventHandler = this.keyDown();
-    this.inputNode.addEventListener('keypress', eventHandler, false);
+    let eventHandlerKeyDown = this.keyDown();
+    this.inputNode.addEventListener('keypress', eventHandlerKeyDown, false);
+    let eventHandlerInput = this.inputEventHandler();
+    this.inputNode.addEventListener('input', eventHandlerInput, false);
     this.outputNode = this.mixins.outputNode;
     if (this.mixins.cssClassOverride) {
       this.cssClassOverride = this.mixins.cssClassOverride;
@@ -2596,6 +2598,16 @@ JSTerm.prototype = {
     outputNode.lastTimestamp = 0;
   },
 
+  inputEventHandler: function JSTF_inputEventHandler()
+  {
+    var self = this;
+    function handleInputEvent(aEvent) {
+      self.inputNode.setAttribute("rows",
+        Math.min(8, self.inputNode.value.split("\n").length));
+    }
+    return handleInputEvent;
+  },
+
   keyDown: function JSTF_keyDown(aEvent)
   {
     var self = this;
@@ -2639,6 +2651,7 @@ JSTerm.prototype = {
           case 13:
             // return
             self.execute();
+            aEvent.preventDefault();
             break;
           case 38:
             // up arrow: history previous
@@ -2753,7 +2766,7 @@ JSTerm.prototype = {
   {
     var firstLineBreak = this.codeInputString.indexOf("\n");
     return ((firstLineBreak == -1) ||
-            (this.codeInputString.selectionStart <= firstLineBreak));
+            (this.inputNode.selectionStart <= firstLineBreak));
   },
 
   caretInLastLine: function JSTF_caretInLastLine()
@@ -2929,6 +2942,8 @@ JSTermFirefoxMixin.prototype = {
   {
     let inputNode = this.xulElementFactory("textbox");
     inputNode.setAttribute("class", "jsterm-input-node");
+    inputNode.setAttribute("multiline", "true");
+    inputNode.setAttribute("rows", "1");
 
     if (this.existingConsoleNode == undefined) {
       // create elements

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

@@ -569,6 +569,39 @@ function testCompletion()
   is(input.selectionEnd, 23, "end selection is alright");
 }
 
+function testJSInputExpand()
+{
+  let HUD = HUDService.hudWeakReferences[hudId].get();
+  let jsterm = HUD.jsterm;
+  let input = jsterm.inputNode;
+  input.focus();
+
+  is(input.getAttribute("multiline"), "true", "multiline is enabled");
+
+  // Tests if the inputNode expands.
+  input.value = "hello\nworld\n";
+  let length = input.value.length;
+  input.selectionEnd = length;
+  input.selectionStart = length;
+  // Performs an "d". This will trigger/test for the input event that should
+  // change the "row" attribute of the inputNode.
+  EventUtils.synthesizeKey("d", {});
+  is(input.getAttribute("rows"), "3", "got 3 rows");
+
+  // Add some more rows. Tests for the 8 row limit.
+  input.value = "row1\nrow2\nrow3\nrow4\nrow5\nrow6\nrow7\nrow8\nrow9\nrow10\n";
+  length = input.value.length;
+  input.selectionEnd = length;
+  input.selectionStart = length;
+  EventUtils.synthesizeKey("d", {});
+  is(input.getAttribute("rows"), "8", "got 8 rows");
+
+  // Test if the inputNode shrinks again.
+  input.value = "";
+  EventUtils.synthesizeKey("d", {});
+  is(input.getAttribute("rows"), "1", "got 1 row");
+}
+
 function testExecutionScope()
 {
   content.location.href = TEST_URI;
@@ -755,6 +788,7 @@ function test() {
       testExecutionScope();
       testCompletion();
       testPropertyProvider();
+      testJSInputExpand();
       testNet();
     });
   }, false);

toolkit/themes/pinstripe/global/headsUpDisplay.css

@@ -154,6 +154,10 @@
     -moz-appearance: none !important;
 }
 
+.jsterm-input-node textarea {
+    overflow-x: hidden;
+}
+
 .jsterm-output-line {
     font-size: 1.2em;
 }

toolkit/themes/winstripe/global/headsUpDisplay.css

@@ -155,6 +155,10 @@
     -moz-appearance: none !important;
 }
 
+.jsterm-input-node textarea {
+    overflow-x: hidden;
+}
+
 .jsterm-output-line {
     font-size: 1.2em;
 }