Bug 1558201 - Disable history navigation with Arrow keys in Editor mode. r=nchevobbe

In editor mode, there are dedicated icons to history navigation  (See Bug [[ https://bugzilla.mozilla.org/show_bug.cgi?id=1558198 | 1558198 ]]).
Removing the arrow up/down history navigation which is troublesome when working with multi-line snippets.

Differential Revision: https://phabricator.services.mozilla.com/D39262

--HG--
extra : moz-landing-system : lando

devtools/client/webconsole/components/Input/JSTerm.js

@@ -182,14 +182,11 @@ class JSTerm extends Component {
             return null;
           }
 
-          if (this.canCaretGoPrevious()) {
+          if (this.props.editorMode === false && this.canCaretGoPrevious()) {
             inputUpdated = this.historyPeruse(HISTORY_BACK);
           }
 
-          if (!inputUpdated) {
-            return "CodeMirror.Pass";
-          }
-          return null;
+          return inputUpdated ? null : "CodeMirror.Pass";
         };
 
         const onArrowDown = () => {
@@ -199,14 +196,11 @@ class JSTerm extends Component {
             return null;
           }
 
-          if (this.canCaretGoNext()) {
+          if (this.props.editorMode === false && this.canCaretGoNext()) {
             inputUpdated = this.historyPeruse(HISTORY_FORWARD);
           }
 
-          if (!inputUpdated) {
-            return "CodeMirror.Pass";
-          }
-          return null;
+          return inputUpdated ? null : "CodeMirror.Pass";
         };
 
         const onArrowLeft = () => {
@@ -348,6 +342,7 @@ class JSTerm extends Component {
               // multiline text.
               if (
                 Services.appinfo.OS === "Darwin" &&
+                this.props.editorMode === false &&
                 this.canCaretGoNext() &&
                 this.historyPeruse(HISTORY_FORWARD)
               ) {
@@ -364,6 +359,7 @@ class JSTerm extends Component {
               // multiline text.
               if (
                 Services.appinfo.OS === "Darwin" &&
+                this.props.editorMode === false &&
                 this.canCaretGoPrevious() &&
                 this.historyPeruse(HISTORY_BACK)
               ) {
@@ -975,6 +971,7 @@ class JSTerm extends Component {
           // multiline text.
           if (
             Services.appinfo.OS == "Darwin" &&
+            this.props.editorMode === false &&
             this.canCaretGoNext() &&
             this.historyPeruse(HISTORY_FORWARD)
           ) {
@@ -993,6 +990,7 @@ class JSTerm extends Component {
           // multiline text.
           if (
             Services.appinfo.OS == "Darwin" &&
+            this.props.editorMode === false &&
             this.canCaretGoPrevious() &&
             this.historyPeruse(HISTORY_BACK)
           ) {
@@ -1096,7 +1094,10 @@ class JSTerm extends Component {
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectPreviousItem();
           event.preventDefault();
-        } else if (this.canCaretGoPrevious()) {
+        } else if (
+          this.props.editorMode === false &&
+          this.canCaretGoPrevious()
+        ) {
           inputUpdated = this.historyPeruse(HISTORY_BACK);
         }
         if (inputUpdated) {
@@ -1108,7 +1109,7 @@ class JSTerm extends Component {
         if (this.autocompletePopup.isOpen) {
           this.autocompletePopup.selectNextItem();
           event.preventDefault();
-        } else if (this.canCaretGoNext()) {
+        } else if (this.props.editorMode === false && this.canCaretGoNext()) {
           inputUpdated = this.historyPeruse(HISTORY_FORWARD);
         }
         if (inputUpdated) {

devtools/client/webconsole/test/mochitest/browser.ini

@@ -223,6 +223,7 @@ skip-if = (os == "win" && processor == "aarch64") # disabled on aarch64 due to 1
 skip-if = os != 'mac' # The tested ctrl+key shortcuts are OSX only
 [browser_jsterm_document_no_xray.js]
 [browser_jsterm_editor.js]
+[browser_jsterm_editor_disabled_history_nav_with_keyboard.js]
 [browser_jsterm_editor_enter.js]
 [browser_jsterm_editor_execute.js]
 [browser_jsterm_editor_gutter.js]

devtools/client/webconsole/test/mochitest/browser_jsterm_editor_disabled_history_nav_with_keyboard.js

@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that user input is not cleared when 'devtools.webconsole.input.editor'
+// is set to true.
+// See https://bugzilla.mozilla.org/show_bug.cgi?id=1519313
+
+"use strict";
+
+const TEST_URI =
+  "data:text/html;charset=utf-8,Web Console test for bug 1519313";
+
+add_task(async function() {
+  await pushPref("devtools.webconsole.features.editor", true);
+  await pushPref("devtools.webconsole.input.editor", true);
+  // Run test with legacy JsTerm
+  await pushPref("devtools.webconsole.jsterm.codeMirror", false);
+  await performTests();
+  // And then run it with the CodeMirror-powered one.
+  await pushPref("devtools.webconsole.jsterm.codeMirror", true);
+  await performTests();
+});
+
+async function performTests() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  const testExpressions = [
+    "`Mozilla 😍 Firefox`",
+    "`Firefox Devtools are awesome`",
+    "`2 + 2 = 5?`",
+    "`I'm running out of ideas...`",
+    "`🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘`",
+    "`🌪🌪 🐄 🐄 🏠 🐄 🐄 ⛈`",
+    "`🌈 🌈 🌈 🦄 🦄 🌈 🌈 🌈`",
+    "`Time to perform the test 🤪`",
+  ];
+
+  info("Executing a bunch of non-sense JS expression");
+  for (const expression of testExpressions) {
+    await executeAndWaitForMessage(hud, expression, expression);
+    ok(true, `JS expression executed successfully: ${expression} `);
+  }
+
+  info("Test that pressing ArrowUp does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(getInputValue(hud), "", "Good! There is no text in the JS Editor");
+
+  info("Test that pressing multiple times ArrowUp does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(getInputValue(hud), "", "Good! Again, there is no text in the JS Editor");
+
+  info(
+    "Move somewhere in the middle of the history using the navigation buttons and test again"
+  );
+  const prevHistoryButton = getEditorToolbar(hud).querySelector(
+    ".webconsole-editor-toolbar-history-prevExpressionButton"
+  );
+  info("Pressing 3 times the previous history button");
+  prevHistoryButton.click();
+  prevHistoryButton.click();
+  prevHistoryButton.click();
+  const jsExpression = testExpressions[testExpressions.length - 3];
+  is(
+    getInputValue(hud),
+    jsExpression,
+    "Sweet! We are in the right position of the history"
+  );
+
+  info("Test again that pressing ArrowUp does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    getInputValue(hud),
+    jsExpression,
+    "OMG! We have some cows in the JS Editor!"
+  );
+
+  info("Test again that pressing multiple times ArrowUp does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  EventUtils.synthesizeKey("KEY_ArrowUp");
+  is(
+    getInputValue(hud),
+    jsExpression,
+    "Awesome! The cows are still there in the JS Editor!"
+  );
+
+  info("Test that pressing ArrowDown does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(
+    getInputValue(hud),
+    jsExpression,
+    "Super! We still have the cows in the JS Editor!"
+  );
+
+  info("Test that pressing multiple times ArrowDown does nothing");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  EventUtils.synthesizeKey("KEY_ArrowDown");
+  is(getInputValue(hud), jsExpression, "And the cows are still there...");
+}
+
+function getEditorToolbar(hud) {
+  return hud.ui.outputNode.querySelector(".webconsole-editor-toolbar");
+}