Bug 588967 - Console input field doesn't resize r=dietrich a=dietrich

toolkit/components/console/hudservice/HUDService.jsm

@@ -3810,7 +3810,7 @@ JSTerm.prototype = {
     this.history.push(aExecuteString);
     this.historyIndex++;
     this.historyPlaceHolder = this.history.length;
-    this.inputNode.value = "";
+    this.setInputValue("");
   },
 
   /**
@@ -3967,12 +3967,46 @@ JSTerm.prototype = {
     outputNode.lastTimestamp = 0;
   },
 
+  /**
+   * Updates the size of the input field (command line) to fit its contents.
+   *
+   * @returns void
+   */
+  resizeInput: function JST_resizeInput()
+  {
+    let inputNode = this.inputNode;
+
+    // Reset the height so that scrollHeight will reflect the natural height of
+    // the contents of the input field.
+    inputNode.style.height = "auto";
+
+    // Now resize the input field to fit its contents.
+    let scrollHeight = inputNode.inputField.scrollHeight;
+    if (scrollHeight > 0) {
+      inputNode.style.height = scrollHeight + "px";
+    }
+  },
+
+  /**
+   * Sets the value of the input field (command line), and resizes the field to
+   * fit its contents. This method is preferred over setting "inputNode.value"
+   * directly, because it correctly resizes the field.
+   *
+   * @param string aNewValue
+   *        The new value to set.
+   * @returns void
+   */
+  setInputValue: function JST_setInputValue(aNewValue)
+  {
+    this.inputNode.value = aNewValue;
+    this.resizeInput();
+  },
+
   inputEventHandler: function JSTF_inputEventHandler()
   {
     var self = this;
     function handleInputEvent(aEvent) {
-      self.inputNode.setAttribute("rows",
+      self.resizeInput();
-        Math.min(8, self.inputNode.value.split("\n").length));
     }
     return handleInputEvent;
   },
@@ -3992,17 +4026,16 @@ JSTerm.prototype = {
             // control-a
             tmp = self.codeInputString;
             setTimeout(function() {
-              self.inputNode.value = tmp;
+              self.setInputValue(tmp);
               self.inputNode.setSelectionRange(0, 0);
             }, 0);
             break;
           case 101:
             // control-e
             tmp = self.codeInputString;
-            self.inputNode.value = "";
+            self.setInputValue("");
             setTimeout(function(){
-              var endPos = tmp.length + 1;
+              self.setInputValue(tmp);
-              self.inputNode.value = tmp;
             }, 0);
             break;
           default:
@@ -4103,14 +4136,14 @@ JSTerm.prototype = {
 
       let inputVal = this.history[--this.historyPlaceHolder];
       if (inputVal){
-        this.inputNode.value = inputVal;
+        this.setInputValue(inputVal);
       }
     }
     // Down Arrow key
     else {
       if (this.historyPlaceHolder == this.history.length - 1) {
         this.historyPlaceHolder ++;
-        this.inputNode.value = "";
+        this.setInputValue("");
         return;
       }
       else if (this.historyPlaceHolder >= (this.history.length)) {
@@ -4119,7 +4152,7 @@ JSTerm.prototype = {
       else {
         let inputVal = this.history[++this.historyPlaceHolder];
         if (inputVal){
-          this.inputNode.value = inputVal;
+          this.setInputValue(inputVal);
         }
       }
     }
@@ -4250,7 +4283,7 @@ JSTerm.prototype = {
       }
 
       completionStr = matches[matchIndexToUse].substring(matchOffset);
-      this.inputNode.value = inputValue +  completionStr;
+      this.setInputValue(inputValue + completionStr);
 
       selEnd = inputValue.length + completionStr.length;
 

toolkit/components/console/hudservice/tests/browser/Makefile.in

@@ -45,6 +45,7 @@ include $(topsrcdir)/config/rules.mk
 
 _BROWSER_TEST_FILES = \
 	browser_HUDServiceTestsAll.js \
+	browser_webconsole_bug_588967_input_expansion.js \
 	browser_webconsole_netlogging.js \
 	browser_webconsole_bug_581231_close_button.js \
 	$(NULL)

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

@@ -994,39 +994,6 @@ 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;
@@ -1426,7 +1393,6 @@ function test() {
       testExecutionScope();
       testCompletion();
       testPropertyProvider();
-      testJSInputExpand();
       testPropertyPanel();
       testJSTermHelper();
 

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

@@ -0,0 +1,90 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** 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.
+ *
+ * The Original Code is DevTools test code.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2010
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *  Julian Viereck <jviereck@mozilla.com>
+ *  Patrick Walton <pcwalton@mozilla.com>
+ *
+ * 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 ***** */
+
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/HUDService.jsm");
+
+const TEST_URI = "http://example.com/browser/toolkit/components/console/hudservice/tests/browser/test-console.html";
+
+function test() {
+  waitForExplicitFinish();
+  content.location.href = TEST_URI;
+  waitForFocus(onFocus);
+}
+
+function onFocus() {
+  gBrowser.selectedBrowser.addEventListener("DOMContentLoaded",
+                                            testInputExpansion, false);
+}
+
+function testInputExpansion() {
+  gBrowser.selectedBrowser.removeEventListener("DOMContentLoaded",
+                                               testInputExpansion, false);
+
+  HUDService.activateHUDForContext(gBrowser.selectedTab);
+
+  let hudId = HUDService.displaysIndex()[0];
+  let hudBox = HUDService.getHeadsUpDisplay(hudId);
+  let input = hudBox.querySelector(".jsterm-input-node");
+
+  input.focus();
+
+  is(input.getAttribute("multiline"), "true", "multiline is enabled");
+
+  let ordinaryHeight = input.clientHeight;
+
+  // 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 height of the inputNode.
+  EventUtils.synthesizeKey("d", {});
+  ok(input.clientHeight > ordinaryHeight, "the input expanded");
+
+  // Test if the inputNode shrinks again.
+  input.value = "";
+  EventUtils.synthesizeKey("d", {});
+  is(input.clientHeight, ordinaryHeight, "the input's height is normal again");
+
+  HUDService.deactivateHUDForContext(gBrowser.selectedTab);
+  finish();
+}
+