Bug 1545129 Prevent "Enter" event from adding a new line in CodeMirror r=davidwalsh
authorchujun <chujunlu@hotmail.com>
Mon, 06 May 2019 13:18:29 +0000
changeset 531500 178ad5eddb72399d89bceb7c65297617a03c8fbc
parent 531499 7d7cbdf93a2199d37af5d6d997f8f623b89a08f3
child 531501 61594665f837fa18a2ab243b861d14aef813b8ed
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh
bugs1545129
milestone68.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 1545129 Prevent "Enter" event from adding a new line in CodeMirror r=davidwalsh The conditional breakpoint panel is wrapped in CodeMirror (starting from https://github.com/firefox-devtools/debugger/commit/6b0b968515ee0511899f80feb95a25d1f855073d). When hitting `Enter`, debugger/node_modules/codemirror/lib/codemirror.js will run line 7153 onKeyDown(), in which a new line is added. Then ConditionalPanel.js onKey() runs. Solution: Ask CodeMirror not to add a new line when hit `Enter`. Question: I added two test cases to Mochitest. If I put a `debugger;` statement in the test file, ran ./mach mochitest --jsdebugger file/path`, keep `step over`, all tests pass. But when I ran`./mach mochitest same/file/path`, terminal stopped at "waiting for state change" then gave an error "Failed to retrieve MOZ_UPLOAD_DIR env var." Error message screenshot: {F1285339} Differential Revision: https://phabricator.services.mozilla.com/D29068
devtools/client/debugger/src/components/Editor/ConditionalPanel.js
devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-cond.js
devtools/client/debugger/test/mochitest/helpers.js
--- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.js
+++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.js
@@ -164,16 +164,23 @@ export class ConditionalPanel extends Pu
       mode: "javascript",
       theme: "mozilla",
       placeholder: L10N.getStr(
         log
           ? "editor.conditionalPanel.logPoint.placeholder2"
           : "editor.conditionalPanel.placeholder2"
       )
     });
+
+    codeMirror.on("keydown", (cm, e) => {
+      if (e.key === "Enter") {
+        e.codemirrorIgnore = true;
+      }
+    });
+
     const codeMirrorWrapper = codeMirror.getWrapperElement();
 
     codeMirrorWrapper.addEventListener("keydown", e => {
       codeMirror.save();
       this.onKey(e);
     });
 
     this.input = input;
--- a/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-cond.js
+++ b/devtools/client/debugger/test/mochitest/browser_dbg-breakpoints-cond.js
@@ -51,16 +51,20 @@ async function setLogPoint(dbg, index, v
   rightClickElement(dbg, "gutter", index);
   selectContextMenuItem(
     dbg,
     `${selectors.addLogItem},${selectors.editLogItem}`
   );
   await typeInPanel(dbg, value);
 }
 
+async function waitForConditionalPanelFocus(dbg) {
+  await waitFor(() => dbg.win.document.activeElement.tagName === "TEXTAREA");
+}
+
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html", "simple2");
   await pushPref("devtools.debugger.features.column-breakpoints", true);
   await pushPref("devtools.debugger.features.log-points", true);
 
   await selectSource(dbg, "simple2");
   await waitForSelectedSource(dbg, "simple2");
 
@@ -75,16 +79,39 @@ add_task(async function() {
   info("Edit the conditional breakpoint set above");
   await setConditionalBreakpoint(dbg, 5, "2");
   await waitForCondition(dbg, 12);
 
   bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.options.condition, "12", "breakpoint is created with the condition");
   await assertEditorBreakpoint(dbg, 5, { hasCondition: true });
 
+  info("Hit 'Enter' when the cursor is in the conditional statement");
+  rightClickElement(dbg, "gutter", 5);
+  selectContextMenuItem(dbg, `${selectors.editConditionItem}`);
+  await waitForConditionalPanelFocus(dbg);
+  pressKey(dbg, "Left");
+  pressKey(dbg, "Enter");
+  await waitForCondition(dbg, 12);
+
+  bp = findBreakpoint(dbg, "simple2", 5);
+  is(bp.options.condition, "12", "Hit 'Enter' doesn't add a new line");
+
+  info("Hit 'Alt+Enter' when the cursor is in the conditional statement");
+  rightClickElement(dbg, "gutter", 5);
+  selectContextMenuItem(dbg, `${selectors.editConditionItem}`);
+  await waitForConditionalPanelFocus(dbg);
+  pressKey(dbg, "Left");
+  pressKey(dbg, "AltEnter");
+  pressKey(dbg, "Enter");
+  await waitForCondition(dbg, "1\n2");
+
+  bp = findBreakpoint(dbg, "simple2", 5);
+  is(bp.options.condition, "1\n2", "Hit 'Alt+Enter' adds a new line");
+
   clickElement(dbg, "gutter", 5);
   await waitForDispatch(dbg, "REMOVE_BREAKPOINT");
   bp = findBreakpoint(dbg, "simple2", 5);
   is(bp, null, "breakpoint was removed");
   await assertEditorBreakpoint(dbg, 5);
 
   info("Adding a condition to a breakpoint");
   clickElement(dbg, "gutter", 5);
--- a/devtools/client/debugger/test/mochitest/helpers.js
+++ b/devtools/client/debugger/test/mochitest/helpers.js
@@ -1055,16 +1055,20 @@ const keyMappings = {
   quickOpen: { code: "p", modifiers: cmdOrCtrl },
   quickOpenFunc: { code: "o", modifiers: cmdShift },
   quickOpenLine: { code: ":", modifiers: cmdOrCtrl },
   fileSearch: { code: "f", modifiers: cmdOrCtrl },
   fileSearchNext: { code: "g", modifiers: cmdOrCtrl },
   fileSearchPrev: { code: "g", modifiers: cmdShift },
   Enter: { code: "VK_RETURN" },
   ShiftEnter: { code: "VK_RETURN", modifiers: shiftOrAlt },
+  AltEnter: { 
+    code: "VK_RETURN", 
+    modifiers: { altKey: true }
+  },
   Up: { code: "VK_UP" },
   Down: { code: "VK_DOWN" },
   Right: { code: "VK_RIGHT" },
   Left: { code: "VK_LEFT" },
   End: endKey,
   Start: startKey,
   Tab: { code: "VK_TAB" },
   Escape: { code: "VK_ESCAPE" },