Bug 965158 - Up/down arrows should navigate through the autocompletion suggestions, r=harth

browser/devtools/sourceeditor/autocomplete.js

@@ -43,6 +43,22 @@ function setupAutoCompletion(ctx, walker) {
         return;
       }
 
+      return win.CodeMirror.Pass;
+    },
+    "Up": cm => {
+      if (popup && popup.isOpen) {
+        cycleSuggestions(ed, true);
+        return;
+      }
+
+      return win.CodeMirror.Pass;
+    },
+    "Down": cm => {
+      if (popup && popup.isOpen) {
+        cycleSuggestions(ed);
+        return;
+      }
+
       return win.CodeMirror.Pass;
     },
   };
@@ -147,8 +163,9 @@ function cycleSuggestions(ed, reverse) {
 function onEditorKeypress(ed, event) {
   let private = privates.get(ed);
   switch (event.keyCode) {
-    case event.DOM_VK_UP:
-    case event.DOM_VK_DOWN:
+    case event.DOM_VK_ESCAPE:
+      if (private.popup.isOpen)
+        event.preventDefault();
     case event.DOM_VK_LEFT:
     case event.DOM_VK_RIGHT:
     case event.DOM_VK_HOME:
@@ -157,7 +174,6 @@ function onEditorKeypress(ed, event) {
     case event.DOM_VK_DELETE:
     case event.DOM_VK_ENTER:
     case event.DOM_VK_RETURN:
-    case event.DOM_VK_ESCAPE:
       private.doNotAutocomplete = true;
       private.popup.hidePopup();
       break;

browser/devtools/styleeditor/test/browser_styleeditor_autocomplete.js

@@ -22,6 +22,8 @@ let TEST_CASES = [
   ['VK_RIGHT', -1],
   ['VK_RIGHT', -1],
   [-1, 1, 0],
+  ['VK_LEFT', -1],
+  ['VK_RIGHT', -1],
   ['VK_DOWN', -1],
   ['VK_RIGHT', -1],
   ['VK_RIGHT', -1],
@@ -31,14 +33,18 @@ let TEST_CASES = [
   ['VK_RETURN', -1],
   ['b', MAX_SUGGESTIONS, 0],
   ['a', 11, 0],
-  ['VK_TAB', 11, 0, 1],
+  ['VK_DOWN', 11, 0, 1],
   ['VK_TAB', 11, 1, 1],
   [':', -1],
   ['b', 9, 0],
   ['l', 4, 0],
   ['VK_TAB', 4, 0, 1],
+  ['VK_DOWN', 4, 1, 1],
+  ['VK_UP', 4, 0, 1],
   ['VK_TAB', 4, 1, 1],
   ['VK_TAB', 4, 2, 1],
+  ['VK_LEFT', -1],
+  ['VK_RIGHT', -1],
   ['VK_DOWN', -1],
   ['VK_RETURN', -1],
   ['b', 2, 0],
@@ -102,12 +108,13 @@ function testState() {
     key = " ";
     mods.accelKey = true;
   }
-  else if (/(down|left|right|return|home|end)/ig.test(key)) {
+  else if (/(left|right|return|home|end)/ig.test(key) ||
+           (key == "VK_DOWN" && !gPopup.isOpen)) {
     info("pressing key " + key + " to get result: [" + TEST_CASES[index] +
          "] for index " + index);
     gEditor.once("cursorActivity", checkState);
   }
-  else if (key == "VK_TAB") {
+  else if (key == "VK_TAB" || key == "VK_UP" || key == "VK_DOWN") {
     info("pressing key " + key + " to get result: [" + TEST_CASES[index] +
          "] for index " + index);
     gEditor.once("suggestion-entered", checkState);
@@ -139,8 +146,7 @@ function checkState() {
       }
     }
     else {
-      ok(gPopup._panel.state != "open" && gPopup._panel.state != "showing",
-         "Popup is closed for index " + index);
+      ok(!gPopup.isOpen, "Popup is closed for index " + index);
     }
     index++;
     testState();