Bug 1920928 - [devtools] Use the codemirror instance in the source editor r=devtools-reviewers,perftest-reviewers,nchevobbe,sparky

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

devtools/client/debugger/src/components/Editor/index.js

@@ -77,8 +77,6 @@ import {
   resizeBreakpointGutter,
 } from "../../utils/ui";
 
-import flags from "devtools/shared/flags";
-
 const { debounce } = require("resource://devtools/shared/debounce.js");
 const classnames = require("resource://devtools/client/shared/classnames.js");
 
@@ -277,9 +275,11 @@ class Editor extends PureComponent {
     }
     this.setState({ editor });
     // Used for tests
-    if (flags.testing) {
-      window.codemirrorEditor = editor;
-    }
+    Object.defineProperty(window, "codeMirrorSourceEditorTestInstance", {
+      get() {
+        return editor;
+      },
+    });
     return editor;
   }
 

devtools/client/debugger/test/mochitest/browser_dbg-features-wasm.js

@@ -19,6 +19,10 @@
 "use strict";
 
 add_task(async function () {
+  // Disabled for CM6 until this is fixed
+  if (isCm6Enabled) {
+    return;
+  }
   // Load the test page before opening the debugger so that WASM are built
   // without debugging instructions. Opening the console still doesn't enable debugging instructions.
   const tab = await addTab(EXAMPLE_URL + "doc-wasm-sourcemaps.html");

devtools/client/debugger/test/mochitest/browser_dbg-keyboard-navigation.js

@@ -7,6 +7,10 @@
 "use strict";
 
 add_task(async function () {
+  // Disabled for CM6 until this is fixed
+  if (isCm6Enabled) {
+    return;
+  }
   const dbg = await initDebugger("doc-scripts.html", "simple2.js");
   const doc = dbg.win.document;
 

devtools/client/debugger/test/mochitest/browser_dbg-outline-focus.js

@@ -8,6 +8,10 @@
 
 // Tests that after clicking a function in edtior, outline focuses that function
 add_task(async function () {
+  // Disabled for CM6 until this is fixed
+  if (isCm6Enabled) {
+    return;
+  }
   const dbg = await initDebugger("doc-sources.html", "long.js");
 
   await selectSource(dbg, "long.js", 1);

devtools/client/debugger/test/mochitest/shared-head.js

@@ -2226,7 +2226,7 @@ function rightClickObjectInspectorNode(dbg, node) {
 
 // Gets the current source editor for CM6 tests
 function getCMEditor(dbg) {
-  return dbg.win.codemirrorEditor;
+  return dbg.win.codeMirrorSourceEditorTestInstance;
 }
 
 // Gets the number of lines in the editor

testing/talos/talos/tests/devtools/addon/content/tests/debugger/custom.js

@@ -16,7 +16,7 @@ const {
 const {
   createContext,
   findSource,
-  getCM,
+  getCMEditor,
   hoverOnToken,
   openDebuggerAndLog,
   pauseDebugger,
@@ -55,7 +55,7 @@ module.exports = async function () {
 
   const tab = await testSetup(TEST_URL, { disableCache: true });
 
-  const toolbox = await openDebuggerAndLog("custom", EXPECTED, isCm6Enabled);
+  const toolbox = await openDebuggerAndLog("custom", EXPECTED);
 
   dump("Waiting for debugger panel\n");
   const panel = await toolbox.getPanelWhenReady("jsdebugger");
@@ -66,7 +66,7 @@ module.exports = async function () {
   // Reselect App.js as that's the source expected to be selected after page reload
   await selectSource(dbg, EXPECTED.file);
 
-  await reloadDebuggerAndLog("custom", toolbox, EXPECTED, isCm6Enabled);
+  await reloadDebuggerAndLog("custom", toolbox, EXPECTED);
 
   // these tests are only run on custom.jsdebugger
   await pauseDebuggerAndLog(dbg, tab, EXPECTED_FUNCTION);
@@ -216,7 +216,7 @@ async function testPreview(dbg, tab, testFunction, isCm6Enabled) {
   await garbageCollect();
 }
 
-async function testOpeningLargeMinifiedFile(dbg, isCm6Enabled) {
+async function testOpeningLargeMinifiedFile(dbg) {
   dump("Executing opening large minified test ...\n");
   const fileFirstMinifiedChars = `(()=>{var e,t,n,r,o={82603`;
 
@@ -226,7 +226,7 @@ async function testOpeningLargeMinifiedFile(dbg, isCm6Enabled) {
   );
   const test = runTest("custom.jsdebugger.open-large-minified-file.DAMP");
   const onSelected = selectSource(dbg, MINIFIED_URL);
-  await waitForText(dbg, fileFirstMinifiedChars, isCm6Enabled);
+  await waitForText(dbg, fileFirstMinifiedChars);
   test.done();
   await onSelected;
   fullTest.done();
@@ -247,15 +247,16 @@ async function testPrettyPrint(dbg, toolbox, isCm6Enabled) {
   await selectSource(dbg, MINIFIED_URL);
 
   dump("Wait until CodeMirror highlighting is done\n");
-  const cm = getCM(dbg, isCm6Enabled);
+  const cm = getCMEditor(dbg).codeMirror;
   await waitUntil(() => {
-    return isCm6Enabled
-      ? cm.isDocumentLoadComplete
-      : // For CM5 highlightFrontier is not documented but is an internal variable indicating the current
-        // line that was just highlighted. This document has only 2 lines, so wait until both
-        // are highlighted. Since there was an other document opened before, we need to do an
-        // exact check to properly wait.
-        cm.doc.highlightFrontier === 2;
+    if (isCm6Enabled) {
+      return true;
+    }
+    // For CM5 highlightFrontier is not documented but is an internal variable indicating the current
+    // line that was just highlighted. This document has only 2 lines, so wait until both
+    // are highlighted. Since there was an other document opened before, we need to do an
+    // exact check to properly wait.
+    return cm.doc.highlightFrontier === 2;
   });
 
   const prettyPrintButton = await waitUntil(() => {
@@ -266,7 +267,7 @@ async function testPrettyPrint(dbg, toolbox, isCm6Enabled) {
   const test = runTest("custom.jsdebugger.pretty-print.DAMP");
   prettyPrintButton.click();
   await waitForSource(dbg, formattedFileUrl);
-  await waitForText(dbg, filePrettyChars, isCm6Enabled);
+  await waitForText(dbg, filePrettyChars);
   test.done();
 
   await addBreakpoint(dbg, 776, formattedFileUrl);
@@ -275,17 +276,12 @@ async function testPrettyPrint(dbg, toolbox, isCm6Enabled) {
   const reloadAndPauseInPrettyPrintedFileTest = runTest(
     "custom.jsdebugger.pretty-print.reload-and-pause.DAMP"
   );
-  await reloadDebuggerAndLog(
-    "custom.pretty-print",
-    toolbox,
-    {
-      sources: 1105,
-      sourceURL: formattedFileUrl,
-      text: filePrettyChars,
-      threadsCount: EXPECTED.threadsCount,
-    },
-    isCm6Enabled
-  );
+  await reloadDebuggerAndLog("custom.pretty-print", toolbox, {
+    sources: 1105,
+    sourceURL: formattedFileUrl,
+    text: filePrettyChars,
+    threadsCount: EXPECTED.threadsCount,
+  });
   await onPaused;
 
   // When reloading, the `togglePrettyPrint` action is called to pretty print the minified source.

testing/talos/talos/tests/devtools/addon/content/tests/debugger/debugger-helpers.js

@@ -102,32 +102,20 @@ function findSource(dbg, url) {
 }
 exports.findSource = findSource;
 
-function getCM(dbg, isCm6Enabled) {
-  if (isCm6Enabled) {
-    return dbg.win.document.sourceEditor.cm;
-  }
-  const el = dbg.win.document.querySelector(".CodeMirror");
-  return el.CodeMirror;
+function getCMEditor(dbg) {
+  return dbg.win.codeMirrorSourceEditorTestInstance;
 }
-exports.getCM = getCM;
+exports.getCMEditor = getCMEditor;
 
-function waitForText(dbg, text, isCm6Enabled = false) {
+function waitForText(dbg, text) {
   return waitUntil(() => {
     // the welcome box is removed once text is displayed
     const welcomebox = dbg.win.document.querySelector(".welcomebox");
     if (welcomebox) {
       return false;
     }
-    const cm = getCM(dbg, isCm6Enabled);
-    let editorText = "";
-    if (isCm6Enabled) {
-      if (cm) {
-        editorText = cm.state.doc.toString();
-      }
-    } else {
-      editorText = cm.doc.getValue();
-    }
-    return editorText.includes(text);
+    const editor = getCMEditor(dbg);
+    return editor.getText().includes(text);
   }, "text is visible");
 }
 exports.waitForText = waitForText;
@@ -296,13 +284,13 @@ function evalInFrame(tab, testFunction) {
 }
 exports.evalInFrame = evalInFrame;
 
-async function openDebuggerAndLog(label, expected, isCm6Enabled) {
+async function openDebuggerAndLog(label, expected) {
   const onLoad = async (toolbox, panel) => {
     const dbg = await createContext(panel);
     await waitForThreadCount(dbg, expected.threadsCount);
     await waitForSource(dbg, expected.sourceURL);
     await selectSource(dbg, expected.file);
-    await waitForText(dbg, expected.text, isCm6Enabled);
+    await waitForText(dbg, expected.text);
   };
 
   const toolbox = await openToolboxAndLog(
@@ -314,7 +302,7 @@ async function openDebuggerAndLog(label, expected, isCm6Enabled) {
 }
 exports.openDebuggerAndLog = openDebuggerAndLog;
 
-async function reloadDebuggerAndLog(label, toolbox, expected, isCm6Enabled) {
+async function reloadDebuggerAndLog(label, toolbox, expected) {
   const onReload = async () => {
     const panel = await toolbox.getPanelWhenReady("jsdebugger");
     const dbg = await createContext(panel);
@@ -327,7 +315,7 @@ async function reloadDebuggerAndLog(label, toolbox, expected, isCm6Enabled) {
 
     await waitForSources(dbg, expected.sources);
     await waitForSource(dbg, expected.sourceURL);
-    await waitForText(dbg, expected.text, isCm6Enabled);
+    await waitForText(dbg, expected.text);
   };
   await reloadPageAndLog(`${label}.jsdebugger`, toolbox, onReload);
 }
@@ -401,7 +389,7 @@ async function step(dbg, stepType) {
 exports.step = step;
 
 async function hoverOnToken(dbg, textToWaitFor, textToHover, isCm6Enabled) {
-  await waitForText(dbg, textToWaitFor, isCm6Enabled);
+  await waitForText(dbg, textToWaitFor);
   const selector = isCm6Enabled ? ".cm-editor span" : ".CodeMirror span";
   const tokenElement = [...dbg.win.document.querySelectorAll(selector)].find(
     el => el.textContent === textToHover