Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

14 files changed, 491 insertions, 59 deletions

diff --git a/devtools/client/shared/components/NotificationBox.css b/devtools/client/shared/components/NotificationBox.css
index f2ff550f46..b051c96a2f 100644
--- a/devtools/client/shared/components/NotificationBox.css
+++ b/devtools/client/shared/components/NotificationBox.css
@@ -87,7 +87,7 @@
 }
 
 .notificationbox .messageImage[data-type="new"] {
-  background-image: url("chrome://global/skin/icons/whatsnew.svg");
+  background-image: url("chrome://devtools/skin/images/whatsnew.svg");
   fill: var(--theme-highlight-blue);
 }
 
diff --git a/devtools/client/shared/components/test/chrome/head.js b/devtools/client/shared/components/test/chrome/head.js
index 7abe54942f..e8260cb774 100644
--- a/devtools/client/shared/components/test/chrome/head.js
+++ b/devtools/client/shared/components/test/chrome/head.js
@@ -14,8 +14,8 @@ var { Assert } = ChromeUtils.importESModule(
   "resource://testing-common/Assert.sys.mjs"
 );
 var { gDevTools } = require("resource://devtools/client/framework/devtools.js");
-var { BrowserLoader } = ChromeUtils.import(
-  "resource://devtools/shared/loader/browser-loader.js"
+var { BrowserLoader } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/browser-loader.sys.mjs"
 );
 var {
   DevToolsServer,
diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js
index fc1afca5a0..bd514096b3 100644
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -217,8 +217,13 @@ class OutputParser {
         options.getVariableValue
       ) {
         sawVariable = true;
-        const { node } = this.#parseVariable(token, text, tokenStream, options);
-        functionData.push(node);
+        const { node, value, fallbackValue } = this.#parseVariable(
+          token,
+          text,
+          tokenStream,
+          options
+        );
+        functionData.push({ node, value, fallbackValue });
       } else if (token.tokenType === "function") {
         ++depth;
       }
@@ -278,6 +283,7 @@ class OutputParser {
     const secondOpts = {};
 
     let varValue;
+    let varFallbackValue;
 
     // Get the variable value if it is in use.
     if (tokens && tokens.length === 1) {
@@ -324,11 +330,16 @@ class OutputParser {
 
       const span = this.#createNode("span", secondOpts);
       span.appendChild(rest);
+      varFallbackValue = span.textContent;
       variableNode.appendChild(span);
     }
     variableNode.appendChild(this.#doc.createTextNode(")"));
 
-    return { node: variableNode, value: varValue };
+    return {
+      node: variableNode,
+      value: varValue,
+      fallbackValue: varFallbackValue,
+    };
   }
 
   /**
@@ -435,17 +446,43 @@ class OutputParser {
             );
 
             if (sawVariable) {
-              // If function contains variable, we need to add both strings
-              // and nodes.
-              this.#appendTextNode(functionName);
-              for (const data of functionData) {
-                if (typeof data === "string") {
-                  this.#appendTextNode(data);
-                } else if (data) {
-                  this.#parsed.push(data);
+              const computedFunctionText =
+                functionName +
+                functionData
+                  .map(data => {
+                    if (typeof data === "string") {
+                      return data;
+                    }
+                    return data.value ?? data.fallbackValue;
+                  })
+                  .join("") +
+                ")";
+              if (
+                colorOK() &&
+                InspectorUtils.isValidCSSColor(computedFunctionText)
+              ) {
+                this.#appendColor(computedFunctionText, {
+                  ...options,
+                  colorFunction: colorFunctions.at(-1)?.functionName,
+                  valueParts: [
+                    functionName,
+                    ...functionData.map(data => data.node || data),
+                    ")",
+                  ],
+                });
+              } else {
+                // If function contains variable, we need to add both strings
+                // and nodes.
+                this.#appendTextNode(functionName);
+                for (const data of functionData) {
+                  if (typeof data === "string") {
+                    this.#appendTextNode(data);
+                  } else if (data) {
+                    this.#parsed.push(data.node);
+                  }
                 }
+                this.#appendTextNode(")");
               }
-              this.#appendTextNode(")");
             } else {
               // If no variable in function, join the text together and add
               // to DOM accordingly.
@@ -1598,13 +1635,14 @@ class OutputParser {
         container.appendChild(options.variableContainer);
       } else {
         // Otherwise we create a new element with the `color` as textContent.
-        const value = this.#createNode(
-          "span",
-          {
-            class: options.colorClass,
-          },
-          color
-        );
+        const value = this.#createNode("span", {
+          class: options.colorClass,
+        });
+        if (options.valueParts) {
+          value.append(...options.valueParts);
+        } else {
+          value.append(this.#doc.createTextNode(color));
+        }
 
         container.appendChild(value);
       }
diff --git a/devtools/client/shared/remote-debugging/adb/xpcshell/test_prepare-tcp-connection.js b/devtools/client/shared/remote-debugging/adb/xpcshell/test_prepare-tcp-connection.js
index 09dad165f2..11df5663f8 100644
--- a/devtools/client/shared/remote-debugging/adb/xpcshell/test_prepare-tcp-connection.js
+++ b/devtools/client/shared/remote-debugging/adb/xpcshell/test_prepare-tcp-connection.js
@@ -15,8 +15,8 @@ add_task(async function testParseFileUri() {
 
   // Mocks are not supported for the regular DevTools loader.
   info("Create a BrowserLoader to enable mocks in the test");
-  const { BrowserLoader } = ChromeUtils.import(
-    "resource://devtools/shared/loader/browser-loader.js"
+  const { BrowserLoader } = ChromeUtils.importESModule(
+    "resource://devtools/shared/loader/browser-loader.sys.mjs"
   );
   const mockedRequire = BrowserLoader({
     baseURI: "resource://devtools/client/shared/remote-debugging/adb",
diff --git a/devtools/client/shared/sourceeditor/editor.js b/devtools/client/shared/sourceeditor/editor.js
index 056914b931..3487acffa4 100644
--- a/devtools/client/shared/sourceeditor/editor.js
+++ b/devtools/client/shared/sourceeditor/editor.js
@@ -166,6 +166,10 @@ class Editor extends EventEmitter {
   #ownerDoc;
   #prefObserver;
   #win;
+  #lineGutterMarkers = new Map();
+  #lineContentMarkers = new Map();
+
+  #updateListener = null;
 
   constructor(config) {
     super();
@@ -412,6 +416,12 @@ class Editor extends EventEmitter {
     }
   }
 
+  // This update listener allows listening to the changes
+  // to the codemiror editor.
+  setUpdateListener(listener = null) {
+    this.#updateListener = listener;
+  }
+
   /**
    * Do the actual appending and configuring of the CodeMirror instance. This is
    * used by both append functions above, and does all the hard work to
@@ -614,11 +624,17 @@ class Editor extends EventEmitter {
     const tabSizeCompartment = new Compartment();
     const indentCompartment = new Compartment();
     const lineWrapCompartment = new Compartment();
+    const lineNumberCompartment = new Compartment();
+    const lineNumberMarkersCompartment = new Compartment();
+    const lineContentMarkerCompartment = new Compartment();
 
     this.#compartments = {
       tabSizeCompartment,
       indentCompartment,
       lineWrapCompartment,
+      lineNumberCompartment,
+      lineNumberMarkersCompartment,
+      lineContentMarkerCompartment,
     };
 
     const indentStr = (this.config.indentWithTabs ? "\t" : " ").repeat(
@@ -632,6 +648,7 @@ class Editor extends EventEmitter {
         this.config.lineWrapping ? EditorView.lineWrapping : []
       ),
       EditorState.readOnly.of(this.config.readOnly),
+      lineNumberCompartment.of(this.config.lineNumbers ? lineNumbers() : []),
       codemirrorLanguage.codeFolding({
         placeholderText: "↔",
       }),
@@ -645,6 +662,21 @@ class Editor extends EventEmitter {
         },
       }),
       codemirrorLanguage.syntaxHighlighting(lezerHighlight.classHighlighter),
+      EditorView.updateListener.of(v => {
+        if (v.viewportChanged || v.docChanged) {
+          // reset line gutter markers for the new visible ranges
+          // when the viewport changes(e.g when the page is scrolled).
+          if (this.#lineGutterMarkers.size > 0) {
+            this.setLineGutterMarkers();
+          }
+        }
+        // Any custom defined update listener should be called
+        if (typeof this.#updateListener == "function") {
+          this.#updateListener(v);
+        }
+      }),
+      lineNumberMarkersCompartment.of([]),
+      lineContentMarkerCompartment.of(this.#lineContentMarkersExtension([])),
       // keep last so other extension take precedence
       codemirror.minimalSetup,
     ];
@@ -653,10 +685,6 @@ class Editor extends EventEmitter {
       extensions.push(codemirrorLangJavascript.javascript());
     }
 
-    if (this.config.lineNumbers) {
-      extensions.push(lineNumbers());
-    }
-
     const cm = new EditorView({
       parent: el,
       extensions,
@@ -666,6 +694,219 @@ class Editor extends EventEmitter {
   }
 
   /**
+   * This creates the extension used to manage the rendering of markers
+   * for in editor line content.
+   * @param   {Array}             markers                    - The current list of markers
+   * @returns {Array<ViewPlugin>} showLineContentDecorations - An extension which is an array containing the view
+   *                                                           which manages the rendering of the line content markers.
+   */
+  #lineContentMarkersExtension(markers) {
+    const {
+      codemirrorView: { Decoration, ViewPlugin },
+      codemirrorState: { RangeSetBuilder },
+    } = this.#CodeMirror6;
+
+    // Build and return the decoration set
+    function buildDecorations(view) {
+      const builder = new RangeSetBuilder();
+      for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to; ) {
+          const line = view.state.doc.lineAt(pos);
+          for (const { lineClassName, condition } of markers) {
+            if (condition(line.number)) {
+              builder.add(
+                line.from,
+                line.from,
+                Decoration.line({ class: lineClassName })
+              );
+            }
+          }
+          pos = line.to + 1;
+        }
+      }
+      return builder.finish();
+    }
+
+    // The view which handles rendering and updating the
+    // markers decorations
+    const showLineContentDecorations = ViewPlugin.fromClass(
+      class {
+        decorations;
+        constructor(view) {
+          this.decorations = buildDecorations(view);
+        }
+        update(update) {
+          if (update.docChanged || update.viewportChanged) {
+            this.decorations = buildDecorations(update.view);
+          }
+        }
+      },
+      { decorations: v => v.decorations }
+    );
+
+    return [showLineContentDecorations];
+  }
+
+  /**
+   * This adds a marker used to add classes to editor line based on a condition.
+   *   @property {object}     marker           - The rule rendering a marker or class.
+   *   @property {object}     marker.id       - The unique identifier for this marker
+   *   @property {string}     marker.lineClassName - The css class to add to the line
+   *   @property {function}   marker.condition - The condition that decides if the marker/class gets added or removed.
+   *                                             The line is passed as an argument.
+   */
+  setLineContentMarker(marker) {
+    const cm = editors.get(this);
+    this.#lineContentMarkers.set(marker.id, marker);
+
+    cm.dispatch({
+      effects: this.#compartments.lineContentMarkerCompartment.reconfigure(
+        this.#lineContentMarkersExtension(
+          Array.from(this.#lineContentMarkers.values())
+        )
+      ),
+    });
+  }
+
+  /**
+   * This removes the marker which has the specified className
+   * @param {string} markerId - The unique identifier for this marker
+   */
+  removeLineContentMarker(markerId) {
+    const cm = editors.get(this);
+    this.#lineContentMarkers.delete(markerId);
+
+    cm.dispatch({
+      effects: this.#compartments.lineContentMarkerCompartment.reconfigure(
+        this.#lineContentMarkersExtension(
+          Array.from(this.#lineContentMarkers.values())
+        )
+      ),
+    });
+  }
+
+  /**
+   * Set event listeners for the line gutter
+   * @param {Object} domEventHandlers
+   *
+   * example usage:
+   *  const domEventHandlers = { click(event) { console.log(event);} }
+   */
+  setGutterEventListeners(domEventHandlers) {
+    const cm = editors.get(this);
+    const {
+      codemirrorView: { lineNumbers },
+    } = this.#CodeMirror6;
+
+    for (const eventName in domEventHandlers) {
+      const handler = domEventHandlers[eventName];
+      domEventHandlers[eventName] = (view, line, event) => {
+        line = view.state.doc.lineAt(line.from);
+        handler(event, view, line.number);
+      };
+    }
+
+    cm.dispatch({
+      effects: this.#compartments.lineWrapCompartment.reconfigure(
+        lineNumbers({ domEventHandlers })
+      ),
+    });
+  }
+
+  /**
+   * This supports adding/removing of line classes or markers on the
+   * line number gutter based on the defined conditions. This only supports codemirror 6.
+   *
+   *   @param {Array<Marker>} markers         - The list of marker objects which defines the rules
+   *                                            for rendering each marker.
+   *   @property {object}     marker - The rule rendering a marker or class. This is required.
+   *   @property {string}     marker.id - The unique identifier for this marker.
+   *   @property {string}     marker.lineClassName - The css class to add to the line. This is required.
+   *   @property {function}   marker.condition - The condition that decides if the marker/class  gets added or removed.
+   *   @property {function=}  marker.createLineElementNode - This gets the line as an argument and should return the DOM element which
+   *                                            is used for the marker. This is optional.
+   */
+  setLineGutterMarkers(markers) {
+    const cm = editors.get(this);
+
+    if (markers) {
+      // Cache the markers for use later. See next comment
+      for (const marker of markers) {
+        if (!marker.id) {
+          throw new Error("Marker has no unique identifier");
+        }
+        this.#lineGutterMarkers.set(marker.id, marker);
+      }
+    }
+    // When no markers are passed, the cached markers are used to update the line gutters.
+    // This is useful for re-rendering the line gutters when the viewport changes
+    // (note: the visible ranges will be different) in this case, mainly when the editor is scrolled.
+    else if (!this.#lineGutterMarkers.size) {
+      return;
+    }
+    markers = Array.from(this.#lineGutterMarkers.values());
+
+    const {
+      codemirrorView: { lineNumberMarkers, GutterMarker },
+      codemirrorState: { RangeSetBuilder },
+    } = this.#CodeMirror6;
+
+    // This creates a new GutterMarker https://codemirror.net/docs/ref/#view.GutterMarker
+    // to represents how each line gutter is rendered in the view.
+    // This is set as the value for the Range https://codemirror.net/docs/ref/#state.Range
+    // which represents the line.
+    class LineGutterMarker extends GutterMarker {
+      constructor(className, lineNumber, createElementNode) {
+        super();
+        this.elementClass = className || null;
+        this.toDOM = createElementNode
+          ? () => createElementNode(lineNumber)
+          : null;
+      }
+    }
+
+    // Loop through the visible ranges https://codemirror.net/docs/ref/#view.EditorView.visibleRanges
+    // (representing the lines in the current viewport) and generate a new rangeset for updating the line gutter
+    // based on the conditions defined in the markers(for each line) provided.
+    const builder = new RangeSetBuilder();
+    for (const { from, to } of cm.visibleRanges) {
+      for (let pos = from; pos <= to; ) {
+        const line = cm.state.doc.lineAt(pos);
+        for (const {
+          lineClassName,
+          condition,
+          createLineElementNode,
+        } of markers) {
+          if (typeof condition !== "function") {
+            throw new Error("The `condition` is not a valid function");
+          }
+          if (condition(line.number)) {
+            builder.add(
+              line.from,
+              line.to,
+              new LineGutterMarker(
+                lineClassName,
+                line.number,
+                createLineElementNode
+              )
+            );
+          }
+        }
+        pos = line.to + 1;
+      }
+    }
+
+    // To update the state with the newly generated marker range set, a dispatch is called on the view
+    // with an transaction effect created by the lineNumberMarkersCompartment, which is used to update the
+    // lineNumberMarkers extension configuration.
+    cm.dispatch({
+      effects: this.#compartments.lineNumberMarkersCompartment.reconfigure(
+        lineNumberMarkers.of(builder.finish())
+      ),
+    });
+  }
+
+  /**
    * Returns a boolean indicating whether the editor is ready to
    * use. Use appendTo(el).then(() => {}) for most cases
    */
@@ -1658,6 +1899,8 @@ class Editor extends EventEmitter {
     this.config = null;
     this.version = null;
     this.#ownerDoc = null;
+    this.#updateListener = null;
+    this.#lineGutterMarkers.clear();
 
     if (this.#prefObserver) {
       this.#prefObserver.off(KEYMAP_PREF, this.setKeyMap);
diff --git a/devtools/client/shared/test/browser_browserloader_mocks.js b/devtools/client/shared/test/browser_browserloader_mocks.js
index 6cc38259f3..5a67b6fcd2 100644
--- a/devtools/client/shared/test/browser_browserloader_mocks.js
+++ b/devtools/client/shared/test/browser_browserloader_mocks.js
@@ -3,8 +3,8 @@
 
 "use strict";
 
-const { BrowserLoader } = ChromeUtils.import(
-  "resource://devtools/shared/loader/browser-loader.js"
+const { BrowserLoader } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/browser-loader.sys.mjs"
 );
 
 const {
diff --git a/devtools/client/shared/test/browser_outputparser.js b/devtools/client/shared/test/browser_outputparser.js
index 226e0bb685..7e0c1b7e00 100644
--- a/devtools/client/shared/test/browser_outputparser.js
+++ b/devtools/client/shared/test/browser_outputparser.js
@@ -6,7 +6,6 @@
 add_task(async function () {
   await pushPref("layout.css.backdrop-filter.enabled", true);
   await pushPref("layout.css.individual-transform.enabled", true);
-  await pushPref("layout.css.motion-path-basic-shapes.enabled", true);
   await addTab("about:blank");
   await performTest();
   gBrowser.removeCurrentTab();
@@ -671,6 +670,36 @@ function testParseVariable(doc, parser) {
           `</span>)` +
         `</span>`,
     },
+    {
+      text: "rgba(var(--r), 0, 0, var(--a))",
+      variables: { "--r": "255", "--a": "0.5" },
+      expected:
+        // prettier-ignore
+        '<span data-color="rgba(255, 0, 0, 0.5)">' +
+          "<span>rgba("+
+            "<span>" +
+              'var(<span data-variable="--r = 255">--r</span>)' +
+            "</span>, 0, 0, " +
+            "<span>" +
+              'var(<span data-variable="--a = 0.5">--a</span>)' +
+            "</span>" +
+          ")</span>" +
+        "</span>",
+    },
+    {
+      text: "rgb(var(--not-seen, 255), 0, 0)",
+      variables: {},
+      expected:
+        // prettier-ignore
+        '<span data-color="rgb( 255, 0, 0)">' +
+          "<span>rgb("+
+            "<span>var(" +
+              `<span class="unmatched-class" data-variable="--not-seen is not set">--not-seen</span>,` +
+              `<span> 255</span>` +
+            ")</span>, 0, 0" +
+          ")</span>" +
+        "</span>",
+    },
   ];
 
   for (const test of TESTS) {
diff --git a/devtools/client/shared/test/browser_require_raw.js b/devtools/client/shared/test/browser_require_raw.js
index bcf4afe98f..64d48f2eb1 100644
--- a/devtools/client/shared/test/browser_require_raw.js
+++ b/devtools/client/shared/test/browser_require_raw.js
@@ -3,8 +3,8 @@
 
 "use strict";
 
-const { BrowserLoader } = ChromeUtils.import(
-  "resource://devtools/shared/loader/browser-loader.js"
+const { BrowserLoader } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/browser-loader.sys.mjs"
 );
 
 const { require: browserRequire } = BrowserLoader({
diff --git a/devtools/client/shared/test/shared-head.js b/devtools/client/shared/test/shared-head.js
index aa47b35edd..0657ede75e 100644
--- a/devtools/client/shared/test/shared-head.js
+++ b/devtools/client/shared/test/shared-head.js
@@ -93,6 +93,30 @@ if (DEBUG_STEP) {
   });
 }
 
+const DEBUG_TRACE_LINE = Services.env.get("DEBUG_TRACE_LINE");
+if (DEBUG_TRACE_LINE) {
+  // Use a custom loader with `invisibleToDebugger` flag for the allocation tracker
+  // as it instantiates custom Debugger API instances and has to be running in a distinct
+  // compartments from DevTools and system scopes (ESMs, XPCOM,...)
+  const {
+    useDistinctSystemPrincipalLoader,
+    releaseDistinctSystemPrincipalLoader,
+  } = ChromeUtils.importESModule(
+    "resource://devtools/shared/loader/DistinctSystemPrincipalLoader.sys.mjs"
+  );
+  const requester = {};
+  const loader = useDistinctSystemPrincipalLoader(requester);
+
+  const lineTracer = loader.require(
+    "resource://devtools/shared/test-helpers/test-line-tracer.js"
+  );
+  lineTracer.start(globalThis, gTestPath, DEBUG_TRACE_LINE);
+  registerCleanupFunction(() => {
+    lineTracer.stop();
+    releaseDistinctSystemPrincipalLoader(requester);
+  });
+}
+
 const { loader, require } = ChromeUtils.importESModule(
   "resource://devtools/shared/loader/Loader.sys.mjs"
 );
@@ -276,7 +300,7 @@ registerCleanupFunction(() => {
   Services.prefs.clearUserPref("dom.ipc.processPrelaunch.enabled");
   Services.prefs.clearUserPref("devtools.toolbox.host");
   Services.prefs.clearUserPref("devtools.toolbox.previousHost");
-  Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+  Services.prefs.clearUserPref("devtools.toolbox.splitconsole.open");
   Services.prefs.clearUserPref("devtools.toolbox.splitconsoleHeight");
   Services.prefs.clearUserPref(
     "javascript.options.asyncstack_capture_debuggee_only"
diff --git a/devtools/client/shared/thread-utils.js b/devtools/client/shared/thread-utils.js
index 9c29681b91..7f3aa4a8ac 100644
--- a/devtools/client/shared/thread-utils.js
+++ b/devtools/client/shared/thread-utils.js
@@ -4,8 +4,9 @@
 "use strict";
 
 const asyncStoreHelper = require("resource://devtools/client/shared/async-store-helper.js");
-const { validateBreakpointLocation } = ChromeUtils.import(
-  "resource://devtools/shared/validate-breakpoint.jsm"
+const { validateBreakpointLocation } = ChromeUtils.importESModule(
+  "resource://devtools/shared/validate-breakpoint.sys.mjs",
+  { global: "contextual" }
 );
 
 const asyncStore = asyncStoreHelper("debugger", {
diff --git a/devtools/client/shared/vendor/WASMPARSER_UPGRADING b/devtools/client/shared/vendor/WASMPARSER_UPGRADING
index 05a9e8abd3..f756c45dd2 100644
--- a/devtools/client/shared/vendor/WASMPARSER_UPGRADING
+++ b/devtools/client/shared/vendor/WASMPARSER_UPGRADING
@@ -1,13 +1,13 @@
 # wasmparser version
 
-Current version is: 5.9.0
+Current version is: 5.11.0
 
 # Upgrade process
 
 1. Pull latest release from npm and extract WasmDis.js and WasmParser.js, e.g.
 
 ```
-curl https://registry.npmjs.org/wasmparser/-/wasmparser-5.9.0.tgz | tar -zx --strip-components 3 package/dist/cjs/{WasmDis,WasmParser}.js
+curl https://registry.npmjs.org/wasmparser/-/wasmparser-5.11.0.tgz | tar -zx --strip-components 3 package/dist/cjs/{WasmDis,WasmParser}.js
 ```
 
 2. Remove reference to source maps (last line)
diff --git a/devtools/client/shared/vendor/WasmDis.js b/devtools/client/shared/vendor/WasmDis.js
index a412de6b39..be6849d1c8 100644
--- a/devtools/client/shared/vendor/WasmDis.js
+++ b/devtools/client/shared/vendor/WasmDis.js
@@ -256,7 +256,7 @@ var DefaultNameResolver = /** @class */ (function () {
         return "$elem".concat(index);
     };
     DefaultNameResolver.prototype.getTagName = function (index, isRef) {
-        return "$event".concat(index);
+        return "$tag".concat(index);
     };
     DefaultNameResolver.prototype.getFunctionName = function (index, isImport, isRef) {
         return (isImport ? "$import" : "$func") + index;
@@ -476,6 +476,8 @@ var WasmDisassembler = /** @class */ (function () {
                 return "eq";
             case -20 /* TypeKind.i31ref */:
                 return "i31";
+            case -23 /* TypeKind.exnref */:
+                return "exnref";
             case -21 /* TypeKind.structref */:
                 return "struct";
             case -22 /* TypeKind.arrayref */:
@@ -486,8 +488,13 @@ var WasmDisassembler = /** @class */ (function () {
                 return "noextern";
             case -15 /* TypeKind.nullref */:
                 return "none";
+            case -12 /* TypeKind.nullexnref */:
+                return "noexnref";
         }
     };
+    WasmDisassembler.prototype.refTypeToString = function (typeIndex, nullable) {
+        return this.typeToString(new WasmParser_js_1.RefType(nullable ? -29 /* TypeKind.ref_null */ : -28 /* TypeKind.ref */, typeIndex));
+    };
     WasmDisassembler.prototype.typeToString = function (type) {
         switch (type.kind) {
             case -1 /* TypeKind.i32 */:
@@ -508,6 +515,8 @@ var WasmDisassembler = /** @class */ (function () {
                 return "funcref";
             case -17 /* TypeKind.externref */:
                 return "externref";
+            case -23 /* TypeKind.exnref */:
+                return "exnref";
             case -18 /* TypeKind.anyref */:
                 return "anyref";
             case -19 /* TypeKind.eqref */:
@@ -522,6 +531,8 @@ var WasmDisassembler = /** @class */ (function () {
                 return "nullfuncref";
             case -14 /* TypeKind.nullexternref */:
                 return "nullexternref";
+            case -12 /* TypeKind.nullexnref */:
+                return "nullexnref";
             case -15 /* TypeKind.nullref */:
                 return "nullref";
             case -28 /* TypeKind.ref */:
@@ -647,6 +658,7 @@ var WasmDisassembler = /** @class */ (function () {
             case 3 /* OperatorCode.loop */:
             case 4 /* OperatorCode.if */:
             case 6 /* OperatorCode.try */:
+            case 31 /* OperatorCode.try_table */:
                 if (this._labelMode !== LabelMode.Depth) {
                     var backrefLabel_1 = {
                         line: this._lines.length,
@@ -665,6 +677,31 @@ var WasmDisassembler = /** @class */ (function () {
                     this._backrefLabels.push(backrefLabel_1);
                 }
                 this.printBlockType(operator.blockType);
+                if (operator.tryTable) {
+                    for (var i = 0; i < operator.tryTable.length; i++) {
+                        this.appendBuffer(" (");
+                        switch (operator.tryTable[i].kind) {
+                            case WasmParser_js_1.CatchHandlerKind.Catch:
+                                this.appendBuffer("catch ");
+                                break;
+                            case WasmParser_js_1.CatchHandlerKind.CatchRef:
+                                this.appendBuffer("catch_ref ");
+                                break;
+                            case WasmParser_js_1.CatchHandlerKind.CatchAll:
+                                this.appendBuffer("catch_all ");
+                                break;
+                            case WasmParser_js_1.CatchHandlerKind.CatchAllRef:
+                                this.appendBuffer("catch_all_ref ");
+                                break;
+                        }
+                        if (operator.tryTable[i].tagIndex != null) {
+                            var tagName = this._nameResolver.getTagName(operator.tryTable[i].tagIndex, true);
+                            this.appendBuffer("".concat(tagName, " "));
+                        }
+                        this.appendBuffer(this.useLabel(operator.tryTable[i].depth + 1));
+                        this.appendBuffer(")");
+                    }
+                }
                 break;
             case 11 /* OperatorCode.end */:
                 if (this._labelMode === LabelMode.Depth) {
@@ -947,9 +984,17 @@ var WasmDisassembler = /** @class */ (function () {
                 break;
             }
             case 64278 /* OperatorCode.ref_cast */:
+            case 64276 /* OperatorCode.ref_test */: {
+                var refType = this.refTypeToString(operator.refType, false);
+                this.appendBuffer(" ".concat(refType));
+                break;
+            }
             case 64279 /* OperatorCode.ref_cast_null */:
-            case 64276 /* OperatorCode.ref_test */:
-            case 64277 /* OperatorCode.ref_test_null */:
+            case 64277 /* OperatorCode.ref_test_null */: {
+                var refType = this.refTypeToString(operator.refType, true);
+                this.appendBuffer(" ".concat(refType));
+                break;
+            }
             case 64257 /* OperatorCode.struct_new_default */:
             case 64256 /* OperatorCode.struct_new */:
             case 64263 /* OperatorCode.array_new_default */:
@@ -1496,7 +1541,6 @@ var WasmDisassembler = /** @class */ (function () {
                         case 5 /* OperatorCode.else */:
                         case 7 /* OperatorCode.catch */:
                         case 25 /* OperatorCode.catch_all */:
-                        case 10 /* OperatorCode.unwind */:
                         case 24 /* OperatorCode.delegate */:
                             this.decreaseIndent();
                             break;
@@ -1510,9 +1554,9 @@ var WasmDisassembler = /** @class */ (function () {
                         case 3 /* OperatorCode.loop */:
                         case 5 /* OperatorCode.else */:
                         case 6 /* OperatorCode.try */:
+                        case 31 /* OperatorCode.try_table */:
                         case 7 /* OperatorCode.catch */:
                         case 25 /* OperatorCode.catch_all */:
-                        case 10 /* OperatorCode.unwind */:
                             this.increaseIndent();
                             break;
                     }
diff --git a/devtools/client/shared/vendor/WasmParser.js b/devtools/client/shared/vendor/WasmParser.js
index 68397b8eeb..efa5b9a4e6 100644
--- a/devtools/client/shared/vendor/WasmParser.js
+++ b/devtools/client/shared/vendor/WasmParser.js
@@ -29,7 +29,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bytesToString = exports.BinaryReader = exports.Int64 = exports.TagAttribute = exports.ElementMode = exports.DataMode = exports.BinaryReaderState = exports.NameType = exports.LinkingType = exports.RelocType = exports.RefType = exports.Type = exports.FuncDef = exports.FieldDef = exports.TypeKind = exports.ExternalKind = exports.OperatorCodeNames = exports.OperatorCode = exports.SectionCode = void 0;
+exports.bytesToString = exports.BinaryReader = exports.Int64 = exports.TagAttribute = exports.ElementMode = exports.DataMode = exports.BinaryReaderState = exports.NameType = exports.LinkingType = exports.RelocType = exports.CatchHandler = exports.CatchHandlerKind = exports.RefType = exports.Type = exports.FuncDef = exports.FieldDef = exports.TypeKind = exports.ExternalKind = exports.OperatorCodeNames = exports.OperatorCode = exports.SectionCode = void 0;
 // See https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md
 var WASM_MAGIC_NUMBER = 0x6d736100;
 var WASM_SUPPORTED_EXPERIMENTAL_VERSION = 0xd;
@@ -64,7 +64,7 @@ var OperatorCode;
     OperatorCode[OperatorCode["catch"] = 7] = "catch";
     OperatorCode[OperatorCode["throw"] = 8] = "throw";
     OperatorCode[OperatorCode["rethrow"] = 9] = "rethrow";
-    OperatorCode[OperatorCode["unwind"] = 10] = "unwind";
+    OperatorCode[OperatorCode["throw_ref"] = 10] = "throw_ref";
     OperatorCode[OperatorCode["end"] = 11] = "end";
     OperatorCode[OperatorCode["br"] = 12] = "br";
     OperatorCode[OperatorCode["br_if"] = 13] = "br_if";
@@ -82,6 +82,7 @@ var OperatorCode;
     OperatorCode[OperatorCode["drop"] = 26] = "drop";
     OperatorCode[OperatorCode["select"] = 27] = "select";
     OperatorCode[OperatorCode["select_with_type"] = 28] = "select_with_type";
+    OperatorCode[OperatorCode["try_table"] = 31] = "try_table";
     OperatorCode[OperatorCode["local_get"] = 32] = "local_get";
     OperatorCode[OperatorCode["local_set"] = 33] = "local_set";
     OperatorCode[OperatorCode["local_tee"] = 34] = "local_tee";
@@ -597,8 +598,8 @@ var OperatorCode;
     OperatorCode[OperatorCode["f64x2_relaxed_min"] = 1036559] = "f64x2_relaxed_min";
     OperatorCode[OperatorCode["f64x2_relaxed_max"] = 1036560] = "f64x2_relaxed_max";
     OperatorCode[OperatorCode["i16x8_relaxed_q15mulr_s"] = 1036561] = "i16x8_relaxed_q15mulr_s";
-    OperatorCode[OperatorCode["i16x8_dot_i8x16_i7x16_s"] = 1036562] = "i16x8_dot_i8x16_i7x16_s";
-    OperatorCode[OperatorCode["i32x4_dot_i8x16_i7x16_add_s"] = 1036563] = "i32x4_dot_i8x16_i7x16_add_s";
+    OperatorCode[OperatorCode["i16x8_relaxed_dot_i8x16_i7x16_s"] = 1036562] = "i16x8_relaxed_dot_i8x16_i7x16_s";
+    OperatorCode[OperatorCode["i32x4_relaxed_dot_i8x16_i7x16_add_s"] = 1036563] = "i32x4_relaxed_dot_i8x16_i7x16_add_s";
     // GC proposal.
     OperatorCode[OperatorCode["struct_new"] = 64256] = "struct_new";
     OperatorCode[OperatorCode["struct_new_default"] = 64257] = "struct_new_default";
@@ -643,7 +644,7 @@ exports.OperatorCodeNames = [
     "catch",
     "throw",
     "rethrow",
-    "unwind",
+    "throw_ref",
     "end",
     "br",
     "br_if",
@@ -664,7 +665,7 @@ exports.OperatorCodeNames = [
     "select",
     undefined,
     undefined,
-    undefined,
+    "try_table",
     "local.get",
     "local.set",
     "local.tee",
@@ -1187,8 +1188,8 @@ exports.OperatorCodeNames = [
     "f64x2.relaxed_min",
     "f64x2.relaxed_max",
     "i16x8.relaxed_q15mulr_s",
-    "i16x8.dot_i8x16_i7x16_s",
-    "i32x4.dot_i8x16_i7x16_add_s",
+    "i16x8.relaxed_dot_i8x16_i7x16_s",
+    "i32x4.relaxed_dot_i8x16_i7x16_add_s",
 ].forEach(function (s, i) {
     exports.OperatorCodeNames[0xfd000 | i] = s;
 });
@@ -1297,9 +1298,9 @@ exports.OperatorCodeNames = [
     "array.init_data",
     "array.init_elem",
     "ref.test",
-    "ref.test null",
+    "ref.test",
+    "ref.cast",
     "ref.cast",
-    "ref.cast null",
     "br_on_cast",
     "br_on_cast_fail",
     "any.convert_extern",
@@ -1328,6 +1329,7 @@ var TypeKind;
     TypeKind[TypeKind["v128"] = -5] = "v128";
     TypeKind[TypeKind["i8"] = -8] = "i8";
     TypeKind[TypeKind["i16"] = -9] = "i16";
+    TypeKind[TypeKind["nullexnref"] = -12] = "nullexnref";
     TypeKind[TypeKind["nullfuncref"] = -13] = "nullfuncref";
     TypeKind[TypeKind["nullref"] = -15] = "nullref";
     TypeKind[TypeKind["nullexternref"] = -14] = "nullexternref";
@@ -1338,6 +1340,7 @@ var TypeKind;
     TypeKind[TypeKind["i31ref"] = -20] = "i31ref";
     TypeKind[TypeKind["structref"] = -21] = "structref";
     TypeKind[TypeKind["arrayref"] = -22] = "arrayref";
+    TypeKind[TypeKind["exnref"] = -23] = "exnref";
     TypeKind[TypeKind["ref"] = -28] = "ref";
     TypeKind[TypeKind["ref_null"] = -29] = "ref_null";
     TypeKind[TypeKind["func"] = -32] = "func";
@@ -1388,6 +1391,7 @@ var Type = exports.Type = /** @class */ (function () {
     // Convenience singletons.
     Type.funcref = new Type(-16 /* TypeKind.funcref */);
     Type.externref = new Type(-17 /* TypeKind.externref */);
+    Type.exnref = new Type(-23 /* TypeKind.exnref */);
     return Type;
 }());
 var RefType = /** @class */ (function (_super) {
@@ -1411,6 +1415,19 @@ var RefType = /** @class */ (function (_super) {
     return RefType;
 }(Type));
 exports.RefType = RefType;
+var CatchHandlerKind;
+(function (CatchHandlerKind) {
+    CatchHandlerKind[CatchHandlerKind["Catch"] = 0] = "Catch";
+    CatchHandlerKind[CatchHandlerKind["CatchRef"] = 1] = "CatchRef";
+    CatchHandlerKind[CatchHandlerKind["CatchAll"] = 2] = "CatchAll";
+    CatchHandlerKind[CatchHandlerKind["CatchAllRef"] = 3] = "CatchAllRef";
+})(CatchHandlerKind = exports.CatchHandlerKind || (exports.CatchHandlerKind = {}));
+var CatchHandler = /** @class */ (function () {
+    function CatchHandler() {
+    }
+    return CatchHandler;
+}());
+exports.CatchHandler = CatchHandler;
 var RelocType;
 (function (RelocType) {
     RelocType[RelocType["FunctionIndex_LEB"] = 0] = "FunctionIndex_LEB";
@@ -1814,11 +1831,13 @@ var BinaryReader = /** @class */ (function () {
             case -9 /* TypeKind.i16 */:
             case -16 /* TypeKind.funcref */:
             case -17 /* TypeKind.externref */:
+            case -23 /* TypeKind.exnref */:
             case -18 /* TypeKind.anyref */:
             case -19 /* TypeKind.eqref */:
             case -20 /* TypeKind.i31ref */:
             case -14 /* TypeKind.nullexternref */:
             case -13 /* TypeKind.nullfuncref */:
+            case -12 /* TypeKind.nullexnref */:
             case -21 /* TypeKind.structref */:
             case -22 /* TypeKind.arrayref */:
             case -15 /* TypeKind.nullref */:
@@ -1989,6 +2008,7 @@ var BinaryReader = /** @class */ (function () {
             case -9 /* TypeKind.i16 */:
             case -16 /* TypeKind.funcref */:
             case -17 /* TypeKind.externref */:
+            case -23 /* TypeKind.exnref */:
             case -18 /* TypeKind.anyref */:
             case -19 /* TypeKind.eqref */:
                 this.result = {
@@ -2936,8 +2956,8 @@ var BinaryReader = /** @class */ (function () {
             case 1036559 /* OperatorCode.f64x2_relaxed_min */:
             case 1036560 /* OperatorCode.f64x2_relaxed_max */:
             case 1036561 /* OperatorCode.i16x8_relaxed_q15mulr_s */:
-            case 1036562 /* OperatorCode.i16x8_dot_i8x16_i7x16_s */:
-            case 1036563 /* OperatorCode.i32x4_dot_i8x16_i7x16_add_s */:
+            case 1036562 /* OperatorCode.i16x8_relaxed_dot_i8x16_i7x16_s */:
+            case 1036563 /* OperatorCode.i32x4_relaxed_dot_i8x16_i7x16_add_s */:
                 break;
             default:
                 this.error = new Error("Unknown operator: 0x".concat(code.toString(16).padStart(4, "0")));
@@ -3109,7 +3129,7 @@ var BinaryReader = /** @class */ (function () {
                 }
                 break;
         }
-        var code, blockType, selectType, refType, brDepth, brTable, relativeDepth, funcIndex, typeIndex, tableIndex, localIndex, globalIndex, tagIndex, memoryAddress, literal, reserved;
+        var code, blockType, selectType, refType, brDepth, brTable, tryTable, relativeDepth, funcIndex, typeIndex, tableIndex, localIndex, globalIndex, tagIndex, memoryAddress, literal, reserved;
         if (this.state === 26 /* BinaryReaderState.INIT_EXPRESSION_OPERATOR */ &&
             this._sectionId === 9 /* SectionCode.Element */ &&
             isExternvalElementSegmentType(this._segmentType)) {
@@ -3171,6 +3191,38 @@ var BinaryReader = /** @class */ (function () {
                 case 8 /* OperatorCode.throw */:
                     tagIndex = this.readVarInt32();
                     break;
+                case 31 /* OperatorCode.try_table */:
+                    blockType = this.readType();
+                    var tableCount = this.readVarUint32();
+                    if (!this.hasBytes(2 * tableCount)) {
+                        // We need at least (2 * tableCount) bytes
+                        this._pos = pos;
+                        return false;
+                    }
+                    tryTable = [];
+                    for (var i = 0; i < tableCount; i++) {
+                        if (!this.hasVarIntBytes()) {
+                            this._pos = pos;
+                            return false;
+                        }
+                        var kind = this.readVarUint32();
+                        var tagIndex;
+                        if (kind == CatchHandlerKind.Catch ||
+                            kind == CatchHandlerKind.CatchRef) {
+                            if (!this.hasVarIntBytes()) {
+                                this._pos = pos;
+                                return false;
+                            }
+                            tagIndex = this.readVarUint32();
+                        }
+                        if (!this.hasVarIntBytes()) {
+                            this._pos = pos;
+                            return false;
+                        }
+                        var depth = this.readVarUint32();
+                        tryTable.push({ kind: kind, depth: depth, tagIndex: tagIndex });
+                    }
+                    break;
                 case 208 /* OperatorCode.ref_null */:
                     refType = this.readHeapType();
                     break;
@@ -3278,7 +3330,6 @@ var BinaryReader = /** @class */ (function () {
                 case 0 /* OperatorCode.unreachable */:
                 case 1 /* OperatorCode.nop */:
                 case 5 /* OperatorCode.else */:
-                case 10 /* OperatorCode.unwind */:
                 case 11 /* OperatorCode.end */:
                 case 15 /* OperatorCode.return */:
                 case 25 /* OperatorCode.catch_all */:
@@ -3415,6 +3466,7 @@ var BinaryReader = /** @class */ (function () {
                 case 209 /* OperatorCode.ref_is_null */:
                 case 212 /* OperatorCode.ref_as_non_null */:
                 case 211 /* OperatorCode.ref_eq */:
+                case 10 /* OperatorCode.throw_ref */:
                     break;
                 default:
                     this.error = new Error("Unknown operator: ".concat(code));
@@ -3430,6 +3482,7 @@ var BinaryReader = /** @class */ (function () {
             srcType: undefined,
             brDepth: brDepth,
             brTable: brTable,
+            tryTable: tryTable,
             relativeDepth: relativeDepth,
             tableIndex: tableIndex,
             funcIndex: funcIndex,
diff --git a/devtools/client/shared/widgets/tooltip/css-compatibility-tooltip-helper.js b/devtools/client/shared/widgets/tooltip/css-compatibility-tooltip-helper.js
index 40755a212b..ee6a62d4e2 100644
--- a/devtools/client/shared/widgets/tooltip/css-compatibility-tooltip-helper.js
+++ b/devtools/client/shared/widgets/tooltip/css-compatibility-tooltip-helper.js
@@ -4,8 +4,8 @@
 
 "use strict";
 
-const { BrowserLoader } = ChromeUtils.import(
-  "resource://devtools/shared/loader/browser-loader.js"
+const { BrowserLoader } = ChromeUtils.importESModule(
+  "resource://devtools/shared/loader/browser-loader.sys.mjs"
 );
 
 loader.lazyRequireGetter(