Bug 1558201 - Disable history navigation with Arrow keys in Editor mode. r=nchevobbe
authorArmando Ferreira <armando.ferreira@edu.uag.mx>
Fri, 26 Jul 2019 18:23:59 +0000
changeset 484951 47b7f56134631a2e75ed2a81f6aee1826470e5ac
parent 484950 8bdfc4852ae5c9f0052908c02c4b90a9bb6481fc
child 484952 d1281ba0a85ff169512fdd4596a9e235f7e20014
push id91024
push usernchevobbe@mozilla.com
push dateFri, 26 Jul 2019 19:11:24 +0000
treeherderautoland@47b7f5613463 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1558201, 1558198
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/webconsole/components/Input/JSTerm.js
devtools/client/webconsole/test/mochitest/browser.ini
devtools/client/webconsole/test/mochitest/browser_jsterm_editor_disabled_history_nav_with_keyboard.js
--- a/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/devtools/client/webconsole/components/Input/JSTerm.js
@@ -177,41 +177,35 @@ class JSTerm extends Component {
       if (this.node) {
         const onArrowUp = () => {
           let inputUpdated;
           if (this.autocompletePopup.isOpen) {
             this.autocompletePopup.selectPreviousItem();
             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 = () => {
           let inputUpdated;
           if (this.autocompletePopup.isOpen) {
             this.autocompletePopup.selectNextItem();
             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 = () => {
           if (this.autocompletePopup.isOpen || this.getAutoCompletionText()) {
             this.clearCompletion();
           }
           return "CodeMirror.Pass";
         };
@@ -343,32 +337,34 @@ class JSTerm extends Component {
             "Alt-Right": onArrowRight,
 
             "Ctrl-N": () => {
               // Control-N differs from down arrow: it ignores autocomplete state.
               // Note that we preserve the default 'down' navigation within
               // multiline text.
               if (
                 Services.appinfo.OS === "Darwin" &&
+                this.props.editorMode === false &&
                 this.canCaretGoNext() &&
                 this.historyPeruse(HISTORY_FORWARD)
               ) {
                 return null;
               }
 
               this.clearCompletion();
               return "CodeMirror.Pass";
             },
 
             "Ctrl-P": () => {
               // Control-P differs from up arrow: it ignores autocomplete state.
               // Note that we preserve the default 'up' navigation within
               // multiline text.
               if (
                 Services.appinfo.OS === "Darwin" &&
+                this.props.editorMode === false &&
                 this.canCaretGoPrevious() &&
                 this.historyPeruse(HISTORY_BACK)
               ) {
                 return null;
               }
 
               this.clearCompletion();
               return "CodeMirror.Pass";
@@ -970,16 +966,17 @@ class JSTerm extends Component {
           break;
 
         case 110:
           // Control-N differs from down arrow: it ignores autocomplete state.
           // Note that we preserve the default 'down' navigation within
           // multiline text.
           if (
             Services.appinfo.OS == "Darwin" &&
+            this.props.editorMode === false &&
             this.canCaretGoNext() &&
             this.historyPeruse(HISTORY_FORWARD)
           ) {
             event.preventDefault();
             // Ctrl-N is also used to focus the Network category button on
             // MacOSX. The preventDefault() call doesn't prevent the focus
             // from moving away from the input.
             this.focus();
@@ -988,16 +985,17 @@ class JSTerm extends Component {
           break;
 
         case 112:
           // Control-P differs from up arrow: it ignores autocomplete state.
           // Note that we preserve the default 'up' navigation within
           // multiline text.
           if (
             Services.appinfo.OS == "Darwin" &&
+            this.props.editorMode === false &&
             this.canCaretGoPrevious() &&
             this.historyPeruse(HISTORY_BACK)
           ) {
             event.preventDefault();
             // Ctrl-P may also be used to focus some category button on MacOSX.
             // The preventDefault() call doesn't prevent the focus from moving
             // away from the input.
             this.focus();
@@ -1091,29 +1089,32 @@ class JSTerm extends Component {
         }
         event.preventDefault();
         break;
 
       case KeyCodes.DOM_VK_UP:
         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) {
           event.preventDefault();
         }
         break;
 
       case KeyCodes.DOM_VK_DOWN:
         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) {
           event.preventDefault();
         }
         break;
 
       case KeyCodes.DOM_VK_PAGE_UP:
--- a/devtools/client/webconsole/test/mochitest/browser.ini
+++ b/devtools/client/webconsole/test/mochitest/browser.ini
@@ -218,16 +218,17 @@ skip-if = verify
 [browser_jsterm_context_menu_labels.js]
 skip-if = (os == "win" && processor == "aarch64") # disabled on aarch64 due to 1531571
 [browser_jsterm_copy_command.js]
 [browser_jsterm_ctrl_a_select_all.js]
 [browser_jsterm_ctrl_key_nav.js]
 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]
 [browser_jsterm_editor_toggle_keyboard_shortcut.js]
 [browser_jsterm_editor_resize.js]
 [browser_jsterm_editor_toolbar.js]
 [browser_jsterm_error_docs.js]
 [browser_jsterm_error_outside_valid_range.js]
new file mode 100644
--- /dev/null
+++ b/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");
+}