Bug 962531 - Page Up and Page Down should always scroll the output area in Console; r=msucan

browser/devtools/shared/autocomplete-popup.js

@@ -453,6 +453,17 @@ AutocompletePopup.prototype = {
     return this._list.childNodes.length;
   },
 
+  /**
+   * Getter for the height of each item in the list.
+   *
+   * @private
+   *
+   * @type number
+   */
+  get _itemHeight() {
+    return this._list.selectedItem.clientHeight;
+  },
+
   /**
    * Select the next item in the list.
    *
@@ -475,7 +486,7 @@ AutocompletePopup.prototype = {
    * Select the previous item in the list.
    *
    * @return object
-   *         The newly selected item object.
+   *         The newly-selected item object.
    */
   selectPreviousItem: function AP_selectPreviousItem()
   {
@@ -489,6 +500,39 @@ AutocompletePopup.prototype = {
     return this.selectedItem;
   },
 
+  /**
+   * Select the top-most item in the next page of items or
+   * the last item in the list.
+   *
+   * @return object
+   *         The newly-selected item object.
+   */
+  selectNextPageItem: function AP_selectNextPageItem()
+  {
+    let itemsPerPane = Math.floor(this._list.scrollHeight / this._itemHeight);
+    let nextPageIndex = this.selectedIndex + itemsPerPane + 1;
+    this.selectedIndex = nextPageIndex > this.itemCount - 1 ?
+      this.itemCount - 1 : nextPageIndex;
+
+    return this.selectedItem;
+  },
+
+  /**
+   * Select the bottom-most item in the previous page of items,
+   * or the first item in the list.
+   *
+   * @return object
+   *         The newly-selected item object.
+   */
+  selectPreviousPageItem: function AP_selectPreviousPageItem()
+  {
+    let itemsPerPane = Math.floor(this._list.scrollHeight / this._itemHeight);
+    let prevPageIndex = this.selectedIndex - itemsPerPane - 1;
+    this.selectedIndex = prevPageIndex < 0 ? 0 : prevPageIndex;
+
+    return this.selectedItem;
+  },
+
   /**
    * Focuses the richlistbox.
    */

browser/devtools/webconsole/test/browser_console_keyboard_accessibility.js

@@ -22,11 +22,13 @@ function test()
     hud = aHud;
     ok(hud, "Web Console opened");
 
-    content.console.log("foobarz1");
+    info("dump some spew into the console for scrolling");
+    for (let i = 0; i < 100; i++)
+      content.console.log("foobarz" + i);
     waitForMessages({
       webconsole: hud,
       messages: [{
-        text: "foobarz1",
+        text: "foobarz99",
         category: CATEGORY_WEBDEV,
         severity: SEVERITY_LOG,
       }],
@@ -35,6 +37,14 @@ function test()
 
   function onConsoleMessage()
   {
+    let currentPosition = hud.outputNode.parentNode.scrollTop;
+    EventUtils.synthesizeKey("VK_PAGE_UP", {});
+    isnot(hud.outputNode.parentNode.scrollTop, currentPosition, "scroll position changed after page up");
+
+    currentPosition = hud.outputNode.parentNode.scrollTop;
+    EventUtils.synthesizeKey("VK_PAGE_DOWN", {});
+    ok(hud.outputNode.parentNode.scrollTop > currentPosition, "scroll position now at bottom");
+
     hud.jsterm.once("messages-cleared", onClear);
     info("try ctrl-l to clear output");
     EventUtils.synthesizeKey("l", { ctrlKey: true });

browser/devtools/webconsole/test/browser_webconsole_bug_585991_autocomplete_keys.js

@@ -91,6 +91,18 @@ function consoleOpened(aHud) {
     is(completeNode.value, prefix + "watch",
         "completeNode.value holds watch");
 
+    let currentSelectionIndex = popup.selectedIndex;
+
+    EventUtils.synthesizeKey("VK_PAGE_DOWN", {});
+
+    ok(popup.selectedIndex > currentSelectionIndex,
+      "Index is greater after PGDN");
+
+    currentSelectionIndex = popup.selectedIndex;
+    EventUtils.synthesizeKey("VK_PAGE_UP", {});
+
+    ok(popup.selectedIndex < currentSelectionIndex, "Index is less after Page UP");
+
     info("press Tab and wait for popup to hide");
     popup._panel.addEventListener("popuphidden", popupHideAfterTab, false);
     EventUtils.synthesizeKey("VK_TAB", {});

browser/devtools/webconsole/webconsole.js

@@ -2661,8 +2661,6 @@ WebConsoleFrame.prototype = {
 
       // If this event started with a mousedown event and it ends at a different
       // location, we consider this text selection.
-      // Add a fuzz modifier of two pixels in any direction to account for sloppy
-      // clicking.
       if (mousedown &&
           (this._startX != aEvent.clientX) &&
           (this._startY != aEvent.clientY))
@@ -3063,6 +3061,8 @@ JSTerm.prototype = {
   COMPLETE_FORWARD: 0,
   COMPLETE_BACKWARD: 1,
   COMPLETE_HINT_ONLY: 2,
+  COMPLETE_PAGEUP: 3,
+  COMPLETE_PAGEDOWN: 4,
 
   /**
    * Initialize the JSTerminal UI.
@@ -3924,6 +3924,40 @@ JSTerm.prototype = {
         }
         break;
 
+      case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_UP:
+        if (this.autocompletePopup.isOpen) {
+          inputUpdated = this.complete(this.COMPLETE_PAGEUP);
+          if (inputUpdated) {
+            this._autocompletePopupNavigated = true;
+          }
+        }
+        else {
+          this.hud.outputNode.parentNode.scrollTop =
+            Math.max(0,
+              this.hud.outputNode.parentNode.scrollTop -
+              this.hud.outputNode.parentNode.clientHeight
+            );
+        }
+        aEvent.preventDefault();
+        break;
+
+      case Ci.nsIDOMKeyEvent.DOM_VK_PAGE_DOWN:
+        if (this.autocompletePopup.isOpen) {
+          inputUpdated = this.complete(this.COMPLETE_PAGEDOWN);
+          if (inputUpdated) {
+            this._autocompletePopupNavigated = true;
+          }
+        }
+        else {
+          this.hud.outputNode.parentNode.scrollTop =
+            Math.min(this.hud.outputNode.parentNode.scrollHeight,
+              this.hud.outputNode.parentNode.scrollTop +
+              this.hud.outputNode.parentNode.clientHeight
+            );
+        }
+        aEvent.preventDefault();
+        break;
+
       case Ci.nsIDOMKeyEvent.DOM_VK_HOME:
       case Ci.nsIDOMKeyEvent.DOM_VK_END:
       case Ci.nsIDOMKeyEvent.DOM_VK_LEFT:
@@ -4095,6 +4129,10 @@ JSTerm.prototype = {
    *    - this.COMPLETE_BACKWARD: Same as this.COMPLETE_FORWARD but if the
    *          value stayed the same as the last time the function was called,
    *          then the previous completion of all possible completions is used.
+   *    - this.COMPLETE_PAGEUP: Scroll up one page if available or select the first
+   *          item.
+   *    - this.COMPLETE_PAGEDOWN: Scroll down one page if available or select the
+   *          last item.
    *    - this.COMPLETE_HINT_ONLY: If there is more than one possible
    *          completion and the input value stayed the same compared to the
    *          last time this function was called, then the same completion is
@@ -4148,6 +4186,12 @@ JSTerm.prototype = {
     else if (aType == this.COMPLETE_FORWARD) {
       popup.selectNextItem();
     }
+    else if (aType == this.COMPLETE_PAGEUP) {
+      popup.selectPreviousPageItem();
+    }
+    else if (aType == this.COMPLETE_PAGEDOWN) {
+      popup.selectNextPageItem();
+    }
 
     aCallback && aCallback(this);
     this.emit("autocomplete-updated");