Bug 1583064 - Enable inline preview for class fields within the debugger. r=nchevobbe

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

devtools/client/debugger/dist/parser-worker.js

@@ -8314,7 +8314,7 @@ const sourceOptions = {
   generated: {
     sourceType: "unambiguous",
     tokens: true,
-    plugins: ["objectRestSpread", "optionalChaining", "nullishCoalescingOperator"]
+    plugins: ["classProperties", "objectRestSpread", "optionalChaining", "nullishCoalescingOperator"]
   },
   original: {
     sourceType: "unambiguous",

devtools/client/debugger/src/workers/parser/utils/ast.js

@@ -26,6 +26,7 @@ const sourceOptions = {
     sourceType: "unambiguous",
     tokens: true,
     plugins: [
+      "classProperties",
       "objectRestSpread",
       "optionalChaining",
       "nullishCoalescingOperator",

devtools/client/debugger/test/mochitest/browser_dbg-preview.js

@@ -37,6 +37,10 @@ add_task(async function() {
       fields: [["length", "0"]],
     },
   ]);
+
+  await previews(dbg, "classPreview", [
+    { line: 45, column: 20, expression: "this.x", result: 1 },
+  ]);
 });
 
 async function previews(dbg, fnName, previews) {

devtools/client/debugger/test/mochitest/examples/preview.js

@@ -37,3 +37,15 @@ function largeArray() {
   }
   debugger;
 }
+
+function classPreview() {
+  class Foo {
+    x = 1;
+    breakFn() {
+      let i = this.x;
+      debugger;
+    }
+  }
+  const foo = new Foo();
+  foo.breakFn();
+}