Merging upstream version 125.0.1.

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

55 files changed, 402 insertions, 135 deletions

diff --git a/devtools/client/webconsole/actions/input.js b/devtools/client/webconsole/actions/input.js
index f7dba1cbd8..f93d401346 100644
--- a/devtools/client/webconsole/actions/input.js
+++ b/devtools/client/webconsole/actions/input.js
@@ -83,7 +83,7 @@ async function getMappedExpression(hud, expression) {
 }
 
 function evaluateExpression(expression, from = "input") {
-  return async ({ dispatch, toolbox, webConsoleUI, hud, commands }) => {
+  return async ({ dispatch, webConsoleUI, hud, commands }) => {
     if (!expression) {
       expression = hud.getInputSelection() || hud.getInputValue();
     }
diff --git a/devtools/client/webconsole/components/FilterBar/FilterBar.js b/devtools/client/webconsole/components/FilterBar/FilterBar.js
index fa9ab15e87..f1438f0f5b 100644
--- a/devtools/client/webconsole/components/FilterBar/FilterBar.js
+++ b/devtools/client/webconsole/components/FilterBar/FilterBar.js
@@ -105,7 +105,7 @@ class FilterBar extends Component {
     this.resizeObserver.observe(this.wrapperNode);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     const {
       closeButtonVisible,
       displayMode,
diff --git a/devtools/client/webconsole/components/Input/EagerEvaluation.js b/devtools/client/webconsole/components/Input/EagerEvaluation.js
index 52d5467b45..7dd1053cd1 100644
--- a/devtools/client/webconsole/components/Input/EagerEvaluation.js
+++ b/devtools/client/webconsole/components/Input/EagerEvaluation.js
@@ -45,7 +45,7 @@ class EagerEvaluation extends Component {
     };
   }
 
-  static getDerivedStateFromError(error) {
+  static getDerivedStateFromError() {
     return { hasError: true };
   }
 
diff --git a/devtools/client/webconsole/components/Input/JSTerm.js b/devtools/client/webconsole/components/Input/JSTerm.js
index f00ddd66b0..6a5cbc31bb 100644
--- a/devtools/client/webconsole/components/Input/JSTerm.js
+++ b/devtools/client/webconsole/components/Input/JSTerm.js
@@ -758,7 +758,7 @@ class JSTerm extends Component {
   async _openFile() {
     const fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
     fp.init(
-      this.webConsoleUI.document.defaultView,
+      this.webConsoleUI.document.defaultView.browsingContext,
       l10n.getStr("webconsole.input.openJavaScriptFile"),
       Ci.nsIFilePicker.modeOpen
     );
@@ -891,9 +891,8 @@ class JSTerm extends Component {
    *
    * @param {CodeMirror} cm: codeMirror instance
    * @param {String} key: The key that was handled
-   * @param {Event} e: The keypress event
    */
-  _onEditorKeyHandled(cm, key, e) {
+  _onEditorKeyHandled(cm, key) {
     // The autocloseBracket addon handle closing brackets keys when they're typed, but
     // there's already an existing closing bracket.
     // ex:
diff --git a/devtools/client/webconsole/components/Output/ConsoleOutput.js b/devtools/client/webconsole/components/Output/ConsoleOutput.js
index a2469b3b46..b8ba82c5c6 100644
--- a/devtools/client/webconsole/components/Output/ConsoleOutput.js
+++ b/devtools/client/webconsole/components/Output/ConsoleOutput.js
@@ -84,7 +84,7 @@ class ConsoleOutput extends Component {
     this.ref = createRef();
     this.lazyMessageListRef = createRef();
 
-    this.resizeObserver = new ResizeObserver(entries => {
+    this.resizeObserver = new ResizeObserver(() => {
       // If we don't have the outputNode reference, or if the outputNode isn't connected
       // anymore, we disconnect the resize observer (componentWillUnmount is never called
       // on this component, so we have to do it here).
@@ -141,7 +141,7 @@ class ConsoleOutput extends Component {
   }
 
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps) {
     this.isUpdating = true;
     if (nextProps.cacheGeneration !== this.props.cacheGeneration) {
       this.messageIdsToKeepAlive = new Set();
@@ -356,7 +356,7 @@ class ConsoleOutput extends Component {
   }
 }
 
-function mapStateToProps(state, props) {
+function mapStateToProps(state) {
   const mutableMessages = getMutableMessagesById(state);
   return {
     initialized: state.ui.initialized,
diff --git a/devtools/client/webconsole/components/Output/ConsoleTable.js b/devtools/client/webconsole/components/Output/ConsoleTable.js
index f41afce96d..9f7780dfe5 100644
--- a/devtools/client/webconsole/components/Output/ConsoleTable.js
+++ b/devtools/client/webconsole/components/Output/ConsoleTable.js
@@ -71,7 +71,7 @@ class ConsoleTable extends Component {
     const { dispatch, serviceContainer, setExpanded } = this.props;
 
     const rows = [];
-    items.forEach((item, index) => {
+    items.forEach(item => {
       const cells = [];
 
       columns.forEach((value, key) => {
diff --git a/devtools/client/webconsole/components/Output/GripMessageBody.js b/devtools/client/webconsole/components/Output/GripMessageBody.js
index 6ecfe55b8e..a99c0ad547 100644
--- a/devtools/client/webconsole/components/Output/GripMessageBody.js
+++ b/devtools/client/webconsole/components/Output/GripMessageBody.js
@@ -81,7 +81,7 @@ function GripMessageBody(props) {
     maybeScrollToBottom,
     setExpanded,
     customFormat,
-    onCmdCtrlClick: (node, { depth, event, focused, expanded }) => {
+    onCmdCtrlClick: node => {
       const front = objectInspector.utils.node.getFront(node);
       if (front) {
         dispatch(actions.showObjectInSidebar(front));
diff --git a/devtools/client/webconsole/components/Output/LazyMessageList.js b/devtools/client/webconsole/components/Output/LazyMessageList.js
index 931b5bb8bd..203efbded6 100644
--- a/devtools/client/webconsole/components/Output/LazyMessageList.js
+++ b/devtools/client/webconsole/components/Output/LazyMessageList.js
@@ -86,7 +86,7 @@ class LazyMessageList extends Component {
   }
 
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
-  UNSAFE_componentWillUpdate(nextProps, nextState) {
+  UNSAFE_componentWillUpdate(nextProps) {
     if (nextProps.cacheGeneration !== this.props.cacheGeneration) {
       this.#cachedHeights = [];
       this.#startIndex = 0;
@@ -158,10 +158,6 @@ class LazyMessageList extends Component {
   #cachedHeights;
   #scrollHandlerBinding;
 
-  get #maxIndex() {
-    return this.props.items.length - 1;
-  }
-
   get #overdrawHeight() {
     return this.props.scrollOverdrawCount * this.props.itemDefaultHeight;
   }
@@ -269,7 +265,7 @@ class LazyMessageList extends Component {
   #addListeners() {
     const { viewportRef } = this.props;
     viewportRef.current.addEventListener("scroll", this.#scrollHandlerBinding);
-    this.#resizeObserver = new ResizeObserver(entries => {
+    this.#resizeObserver = new ResizeObserver(() => {
       this.#viewportHeight =
         viewportRef.current.parentNode.parentNode.clientHeight;
       this.forceUpdate();
diff --git a/devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js b/devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js
index 893e6b04c6..089feff8a8 100644
--- a/devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js
+++ b/devtools/client/webconsole/components/Output/message-types/DefaultRenderer.js
@@ -8,7 +8,7 @@ const dom = require("resource://devtools/client/shared/vendor/react-dom-factorie
 
 DefaultRenderer.displayName = "DefaultRenderer";
 
-function DefaultRenderer(props) {
+function DefaultRenderer() {
   return dom.div({}, "This message type is not supported yet.");
 }
 
diff --git a/devtools/client/webconsole/components/Output/message-types/JSTracerTrace.js b/devtools/client/webconsole/components/Output/message-types/JSTracerTrace.js
index 7d6ddd2623..241fa15bd1 100644
--- a/devtools/client/webconsole/components/Output/message-types/JSTracerTrace.js
+++ b/devtools/client/webconsole/components/Output/message-types/JSTracerTrace.js
@@ -62,8 +62,27 @@ function JSTracerTrace(props) {
     relatedTraceId,
     // See tracer.jsm FRAME_EXIT_REASONS
     why,
+
+    // Attributes specific to DOM Mutations
+    mutationType,
+    mutationElement,
   } = message;
 
+  let messageBodyConfig;
+  if (parameters || why || mutationType) {
+    messageBodyConfig = {
+      dispatch,
+      serviceContainer,
+      maybeScrollToBottom,
+      setExpanded,
+      type: "",
+      useQuotes: true,
+
+      // Disable custom formatter for now in traces
+      customFormat: false,
+    };
+  }
+
   // When we are logging a DOM event, we have the `eventName` defined.
   let messageBody;
   if (eventName) {
@@ -73,31 +92,27 @@ function JSTracerTrace(props) {
       dom.span({ className: "jstracer-io" }, "⟵ "),
       dom.span({ className: "jstracer-display-name" }, displayName),
     ];
-  } else {
+  } else if (mutationType) {
+    messageBody = [
+      dom.span(
+        { className: "jstracer-dom-mutation" },
+        // Add an extra space at the end to have nice copy-paste messages
+        "— DOM Mutation | " + mutationType + " "
+      ),
+      formatRep(messageBodyConfig, mutationElement),
+    ];
+  } else if (displayName) {
     messageBody = [
       dom.span({ className: "jstracer-io" }, "⟶ "),
       dom.span({ className: "jstracer-implementation" }, implementation),
       // Add a space in order to improve copy paste rendering
       dom.span({ className: "jstracer-display-name" }, " " + displayName),
     ];
+  } else {
+    messageBody = [dom.span({ className: "jstracer-io" }, "—")];
   }
 
-  let messageBodyConfig;
-  if (parameters || why) {
-    messageBodyConfig = {
-      dispatch,
-      serviceContainer,
-      maybeScrollToBottom,
-      setExpanded,
-      type: "",
-      useQuotes: true,
-
-      // Disable custom formatter for now in traces
-      customFormat: false,
-    };
-  }
   // Arguments will only be passed on-demand
-
   if (parameters) {
     messageBody.push("(", ...formatReps(messageBodyConfig, parameters), ")");
   }
@@ -105,9 +120,11 @@ function JSTracerTrace(props) {
   if (why) {
     messageBody.push(
       // Add a spaces in order to improve copy paste rendering
-      dom.span({ className: "jstracer-exit-frame-reason" }, " " + why + " "),
-      formatRep(messageBodyConfig, returnedValue)
+      dom.span({ className: "jstracer-exit-frame-reason" }, " " + why + " ")
     );
+    if (returnedValue !== undefined) {
+      messageBody.push(formatRep(messageBodyConfig, returnedValue));
+    }
   }
 
   if (prefix) {
diff --git a/devtools/client/webconsole/components/SideBar.js b/devtools/client/webconsole/components/SideBar.js
index e29d7dbbed..412bd8064f 100644
--- a/devtools/client/webconsole/components/SideBar.js
+++ b/devtools/client/webconsole/components/SideBar.js
@@ -119,7 +119,7 @@ class SideBar extends Component {
   }
 }
 
-function mapStateToProps(state, props) {
+function mapStateToProps(state) {
   return {
     front: state.ui.frontInSidebar,
   };
diff --git a/devtools/client/webconsole/reducers/history.js b/devtools/client/webconsole/reducers/history.js
index adfca885c5..e147cdd83c 100644
--- a/devtools/client/webconsole/reducers/history.js
+++ b/devtools/client/webconsole/reducers/history.js
@@ -96,7 +96,7 @@ function appendToHistory(state, prefsState, expression) {
   return state;
 }
 
-function clearHistory(state) {
+function clearHistory() {
   return getInitialState();
 }
 
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_file_load_save_keyboard_shortcut.js b/devtools/client/webconsole/test/browser/browser_jsterm_file_load_save_keyboard_shortcut.js
index 73e93b47f7..d0cfb7640b 100644
--- a/devtools/client/webconsole/test/browser/browser_jsterm_file_load_save_keyboard_shortcut.js
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_file_load_save_keyboard_shortcut.js
@@ -20,7 +20,7 @@ add_task(async function () {
   // create file to import first
   info("Create the file to import");
   const { MockFilePicker } = SpecialPowers;
-  MockFilePicker.init(window);
+  MockFilePicker.init(window.browsingContext);
   MockFilePicker.returnValue = MockFilePicker.returnOK;
 
   const file = await createLocalFile();
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_trace_command.js b/devtools/client/webconsole/test/browser/browser_jsterm_trace_command.js
index 2bd1149a49..968e70d0d8 100644
--- a/devtools/client/webconsole/test/browser/browser_jsterm_trace_command.js
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_trace_command.js
@@ -11,7 +11,7 @@ const TEST_URI = `data:text/html;charset=utf-8,<!DOCTYPE html>
   <div>
     <h1>Testing trace command</h1>
     <script>
-    function main() {}
+    function main() { return 42; }
     function someNoise() {}
     </script>
   </div>
@@ -44,7 +44,7 @@ add_task(async function testBasicRecord() {
   // Instead a JSTRACER_STATE resource logs a console-api message.
   msg = await evaluateExpressionInConsole(
     hud,
-    ":trace --logMethod console --prefix foo --values --on-next-interaction",
+    ":trace --logMethod console --prefix foo --returns --values --on-next-interaction",
     "console-api"
   );
   is(
@@ -80,6 +80,11 @@ add_task(async function testBasicRecord() {
     0,
     "The code running before the key press should not be traced"
   );
+  await waitFor(
+    () => !!findTracerMessages(hud, `foo: ⟵ λ main return 42`).length,
+
+    "Got the function returns being logged, with the returned value"
+  );
 
   // But now that the tracer is active, we will be able to log this call to someNoise
   await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
@@ -106,7 +111,7 @@ add_task(async function testBasicRecord() {
   });
 
   // Let some time for traces to appear
-  await wait(1000);
+  await wait(500);
 
   ok(
     !findTracerMessages(hud, `foo: ⟶ interpreter λ main("arg", 2)`).length,
@@ -215,3 +220,145 @@ add_task(async function testLimitedRecord() {
   await waitFor(() => !!findTracerMessages(hud, `λ bar`).length);
   ok(true, "All traces were printed to console");
 });
+
+add_task(async function testDOMMutations() {
+  await pushPref("devtools.debugger.features.javascript-tracing", true);
+
+  const testScript = `/* this will be line 1 */
+  function add() {
+    const element = document.createElement("hr");
+    document.body.appendChild(element);
+  }
+  function attributes() {
+    document.querySelector("hr").setAttribute("hidden", "true");
+  }
+  function remove() {
+    document.querySelector("hr").remove();
+  }
+  /* Fake a real file name for this inline script */
+  //# sourceURL=fake.js
+  `;
+  const hud = await openNewTabAndConsole(
+    `data:text/html,test-page<script>${encodeURIComponent(testScript)}</script>`
+  );
+  ok(hud, "web console opened");
+
+  let msg = await evaluateExpressionInConsole(
+    hud,
+    ":trace --dom-mutations foo",
+    "console-api"
+  );
+  is(
+    msg.textContent.trim(),
+    ":trace --dom-mutations only accept a list of strings whose values can be: add,attributes,remove"
+  );
+
+  msg = await evaluateExpressionInConsole(
+    hud,
+    ":trace --dom-mutations 42",
+    "console-api"
+  );
+  is(
+    msg.textContent.trim(),
+    ":trace --dom-mutations accept only no arguments, or a list mutation type strings (add,attributes,remove)"
+  );
+
+  info("Test toggling the tracer ON");
+  // Pass `console-api` specific classname as the command results aren't logged as "result".
+  // Instead the frontend log a message as a console API message.
+  await evaluateExpressionInConsole(
+    hud,
+    ":trace --logMethod console --dom-mutations",
+    "console-api"
+  );
+
+  info("Trigger some code to add a DOM Element");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.add();
+  });
+  let traceNode = await waitFor(
+    () => findTracerMessages(hud, `DOM Mutation | add <hr>`)[0],
+    "Wait for the DOM Mutation trace for DOM element creation"
+  );
+  is(
+    traceNode.querySelector(".message-location").textContent,
+    "fake.js:4:19",
+    "Add Mutation location is correct"
+  );
+
+  info("Trigger some code to modify attributes of a DOM Element");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.attributes();
+  });
+  traceNode = await waitFor(
+    () =>
+      findTracerMessages(
+        hud,
+        `DOM Mutation | attributes <hr hidden="true">`
+      )[0],
+    "Wait for the DOM Mutation trace for DOM attributes modification"
+  );
+  is(
+    traceNode.querySelector(".message-location").textContent,
+    "fake.js:7:34",
+    "Attributes Mutation location is correct"
+  );
+
+  info("Trigger some code to remove a DOM Element");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.wrappedJSObject.remove();
+  });
+  traceNode = await waitFor(
+    () =>
+      findTracerMessages(hud, `DOM Mutation | remove <hr hidden="true">`)[0],
+    "Wait for the DOM Mutation trace for DOM Element removal"
+  );
+  is(
+    traceNode.querySelector(".message-location").textContent,
+    "fake.js:10:34",
+    "Remove Mutation location is correct"
+  );
+
+  info("Stop tracing all mutations");
+  await evaluateExpressionInConsole(hud, ":trace", "console-api");
+
+  info("Clear past traces");
+  hud.ui.clearOutput();
+  await waitFor(
+    () => !findTracerMessages(hud, `remove(<hr hidden="true">)`).length
+  );
+  ok("Console was cleared");
+
+  info("Re-enable the tracing, but only with a subset of mutations");
+  await evaluateExpressionInConsole(
+    hud,
+    ":trace --logMethod console --dom-mutations attributes,remove",
+    "console-api"
+  );
+
+  info("Trigger all types of mutations");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const element = content.document.createElement("hr");
+    content.document.body.appendChild(element);
+    element.setAttribute("hidden", "true");
+    element.remove();
+  });
+  await waitFor(
+    () =>
+      !!findTracerMessages(hud, `DOM Mutation | attributes <hr hidden="true">`)
+        .length,
+    "Wait for the DOM Mutation trace for DOM attributes modification"
+  );
+
+  await waitFor(
+    () =>
+      !!findTracerMessages(hud, `DOM Mutation | remove <hr hidden="true">`)
+        .length,
+    "Wait for the DOM Mutation trace for DOM Element removal"
+  );
+  is(
+    findTracerMessages(hud, `add <hr`).length,
+    0,
+    "DOM Element creation isn't traced"
+  );
+});
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_export_console_output.js b/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_export_console_output.js
index a119f4c06c..757b4a5ae7 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_export_console_output.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_export_console_output.js
@@ -39,7 +39,7 @@ httpServer.registerPathHandler("/test.js", function (request, response) {
 const TEST_URI = `http://localhost:${httpServer.identity.primaryPort}/`;
 
 const { MockFilePicker } = SpecialPowers;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 MockFilePicker.returnValue = MockFilePicker.returnOK;
 
 var FileUtils = ChromeUtils.importESModule(
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_cors_errors.js b/devtools/client/webconsole/test/browser/browser_webconsole_cors_errors.js
index af2f04cc90..b29da33bab 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_cors_errors.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_cors_errors.js
@@ -18,7 +18,7 @@ const BASE_CORS_ERROR_URL_PARAMS = new URLSearchParams({
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_csp_too_many_reports.js b/devtools/client/webconsole/test/browser/browser_webconsole_csp_too_many_reports.js
index 41e98a2a42..76ab1b22e6 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_csp_too_many_reports.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_csp_too_many_reports.js
@@ -13,11 +13,18 @@ const TEST_URI =
 const TEST_VIOLATIONS =
   "https://example.com/browser/devtools/client/webconsole/" +
   "test/browser/test-csp-many-errors.html";
-const CSP_VIOLATION_MSG =
-  "Content-Security-Policy: The page\u2019s settings blocked the loading of a resource " +
-  "at inline (\u201cstyle-src\u201d).";
-const CSP_TOO_MANY_REPORTS_MSG =
-  "Content-Security-Policy: Prevented too many CSP reports from being sent within a short period of time.";
+
+const bundle = Services.strings.createBundle(
+  "chrome://global/locale/security/csp.properties"
+);
+const CSP_VIOLATION_MSG = bundle.formatStringFromName(
+  "CSPInlineStyleViolation",
+  ["style-src 'none'", "style-src-attr"]
+);
+const CSP_TOO_MANY_REPORTS_MSG = bundle.formatStringFromName(
+  "tooManyReports",
+  []
+);
 
 add_task(async function () {
   // Reduce the limit to reduce the log spam.
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_csp_violation.js b/devtools/client/webconsole/test/browser/browser_webconsole_csp_violation.js
index ebaca341b3..04dcb313fc 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_csp_violation.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_csp_violation.js
@@ -7,6 +7,10 @@
 "use strict";
 
 add_task(async function () {
+  const bundle = Services.strings.createBundle(
+    "chrome://global/locale/security/csp.properties"
+  );
+
   const TEST_URI =
     "data:text/html;charset=utf8,<!DOCTYPE html>Web Console CSP violation test";
   const hud = await openNewTabAndConsole(TEST_URI);
@@ -15,10 +19,14 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation.html";
-    const CSP_VIOLATION_MSG =
-      "Content-Security-Policy: The page\u2019s settings " +
-      "blocked the loading of a resource at " +
-      "http://some.example.com/test.png (\u201cimg-src\u201d).";
+    const CSP_VIOLATION_MSG = bundle.formatStringFromName(
+      "CSPGenericViolation",
+      [
+        "img-src https://example.com",
+        "http://some.example.com/test.png",
+        "img-src",
+      ]
+    );
     const onRepeatedMessage = waitForRepeatedMessageByType(
       hud,
       CSP_VIOLATION_MSG,
@@ -35,9 +43,10 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation-inline.html";
-    const CSP_VIOLATION =
-      `Content-Security-Policy: The page’s settings blocked` +
-      ` the loading of a resource at inline (“style-src”).`;
+    const CSP_VIOLATION = bundle.formatStringFromName(
+      "CSPInlineStyleViolation",
+      ["style-src 'self'", "style-src-elem"]
+    );
     const VIOLATION_LOCATION_HTML = "test-csp-violation-inline.html:18:1";
     const VIOLATION_LOCATION_JS = "test-csp-violation-inline.html:14:25";
     await navigateTo(TEST_VIOLATION);
@@ -71,7 +80,11 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation-base-uri.html";
-    const CSP_VIOLATION = `Content-Security-Policy: The page’s settings blocked the loading of a resource at https://evil.com/ (“base-uri”).`;
+    const CSP_VIOLATION = bundle.formatStringFromName("CSPGenericViolation", [
+      "base-uri 'self'",
+      "https://evil.com/",
+      "base-uri",
+    ]);
     const VIOLATION_LOCATION = "test-csp-violation-base-uri.html:15:25";
     await navigateTo(TEST_VIOLATION);
     let msg = await waitFor(() => findErrorMessage(hud, CSP_VIOLATION));
@@ -97,7 +110,11 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation-form-action.html";
-    const CSP_VIOLATION = `Content-Security-Policy: The page’s settings blocked the loading of a resource at https://evil.com/evil.com (“form-action”).`;
+    const CSP_VIOLATION = bundle.formatStringFromName("CSPGenericViolation", [
+      "form-action 'self'",
+      "https://evil.com/evil.com",
+      "form-action",
+    ]);
     const VIOLATION_LOCATION = "test-csp-violation-form-action.html:14:40";
 
     await navigateTo(TEST_VIOLATION);
@@ -116,9 +133,11 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation-frame-ancestor-parent.html";
-    const CSP_VIOLATION =
-      `Content-Security-Policy: The page’s settings blocked` +
-      ` the loading of a resource at ${TEST_VIOLATION} (“frame-ancestors”).`;
+    const CSP_VIOLATION = bundle.formatStringFromName("CSPGenericViolation", [
+      "frame-ancestors 'none'",
+      TEST_VIOLATION,
+      "frame-ancestors",
+    ]);
     await navigateTo(TEST_VIOLATION);
     const msg = await waitFor(() => findErrorMessage(hud, CSP_VIOLATION));
     ok(msg, "Frame-Ancestors violation by html was printed");
@@ -129,8 +148,11 @@ add_task(async function () {
     const TEST_VIOLATION =
       "https://example.com/browser/devtools/client/webconsole/" +
       "test/browser/test-csp-violation-event-handler.html";
-    const CSP_VIOLATION = `Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
-Source: document.body.textContent = 'JavaScript …`;
+    const CSP_VIOLATION =
+      bundle.formatStringFromName("CSPEventHandlerScriptViolation", [
+        "script-src 'self'",
+        "script-src-attr",
+      ]) + `\nSource: document.body.textContent = 'JavaScript …`;
     // Future-Todo: Include line and column number.
     const VIOLATION_LOCATION = "test-csp-violation-event-handler.html";
     await navigateTo(TEST_VIOLATION);
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_cspro.js b/devtools/client/webconsole/test/browser/browser_webconsole_cspro.js
index 328663ce28..91555cbb8e 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_cspro.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_cspro.js
@@ -21,13 +21,20 @@ const TEST_URI =
 const TEST_VIOLATION =
   "http://example.com/browser/devtools/client/webconsole/" +
   "test/browser/test-cspro.html";
-const CSP_VIOLATION_MSG =
-  "Content-Security-Policy: The page\u2019s settings blocked the loading of a resource " +
-  "at http://some.example.com/cspro.png (\u201cimg-src\u201d).";
-const CSP_REPORT_MSG =
-  "Content-Security-Policy: The page\u2019s settings observed the loading of a " +
-  "resource at http://some.example.com/cspro.js " +
-  "(\u201cscript-src\u201d). A CSP report is being sent.";
+
+const bundle = Services.strings.createBundle(
+  "chrome://global/locale/security/csp.properties"
+);
+const CSP_VIOLATION_MSG = bundle.formatStringFromName("CSPGenericViolation", [
+  "img-src 'self'",
+  "http://some.example.com/cspro.png",
+  "img-src",
+]);
+const CSP_REPORT_MSG = bundle.formatStringFromName("CSPROScriptViolation", [
+  "script-src 'self'",
+  "http://some.example.com/cspro.js",
+  "script-src-elem",
+]);
 
 add_task(async function () {
   const hud = await openNewTabAndConsole(TEST_URI);
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_message_categories.js b/devtools/client/webconsole/test/browser/browser_webconsole_message_categories.js
index 248da4533b..d2de322d11 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_message_categories.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_message_categories.js
@@ -114,7 +114,7 @@ add_task(async function () {
   }
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_attach.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_attach.js
index 9993423518..9dc6414222 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_attach.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_attach.js
@@ -10,7 +10,7 @@ const TEST_URI = TEST_PATH + TEST_FILE;
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_message_close_on_escape.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_message_close_on_escape.js
index e5549a686e..77f1f0dca9 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_message_close_on_escape.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_message_close_on_escape.js
@@ -10,7 +10,7 @@ const TEST_URI = TEST_PATH + TEST_FILE;
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_after_target_switching.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_after_target_switching.js
index d5833e06f8..ac2eb3b925 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_after_target_switching.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_after_target_switching.js
@@ -17,7 +17,7 @@ pushPref("devtools.webconsole.filter.netxhr", true);
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_expand.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_expand.js
index 96da695208..14b32bd8a8 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_expand.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_expand.js
@@ -13,7 +13,7 @@ requestLongerTimeout(2);
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_openinnet.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_openinnet.js
index 8a92ef07dc..d9ca0954a4 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_openinnet.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_openinnet.js
@@ -23,7 +23,7 @@ registerCleanupFunction(async () => {
   Services.prefs.clearUserPref(XHR_PREF);
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_resend_request.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_resend_request.js
index 900e3bfc34..6743ea3fad 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_resend_request.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_resend_request.js
@@ -13,7 +13,7 @@ const TEST_PATH =
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_stacktrace_console_initiated_request.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_stacktrace_console_initiated_request.js
index 0326b24f98..5fde57566b 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_stacktrace_console_initiated_request.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_stacktrace_console_initiated_request.js
@@ -12,7 +12,7 @@ pushPref("devtools.webconsole.filter.netxhr", true);
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_status_code.js b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_status_code.js
index 9d59a3fe63..240a5df67f 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_status_code.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_network_messages_status_code.js
@@ -21,7 +21,7 @@ pushPref(XHR_PREF, true);
 
 registerCleanupFunction(async function () {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
@@ -65,7 +65,7 @@ add_task(async function task() {
   await hideContextMenu(hud);
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_array_getters.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_array_getters.js
index 0a801de5eb..40081ef309 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_array_getters.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_array_getters.js
@@ -16,11 +16,11 @@ add_task(async function () {
       get: () => "elem0",
     });
     Object.defineProperty(array, 1, {
-      set: x => {},
+      set: () => {},
     });
     Object.defineProperty(array, 2, {
       get: () => "elem2",
-      set: x => {},
+      set: () => {},
     });
     content.wrappedJSObject.console.log("oi-array-test", array);
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_entries.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_entries.js
index 16f1261862..909d66cecb 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_entries.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_entries.js
@@ -18,6 +18,8 @@ add_task(async function () {
   await pushPref("media.navigator.permission.disabled", true);
   // enable custom highlight API
   await pushPref("dom.customHighlightAPI.enabled", true);
+  // enable custom state
+  await pushPref("dom.element.customstateset.enabled", true);
 
   const hud = await openNewTabAndConsole(TEST_URI);
 
@@ -40,6 +42,16 @@ add_task(async function () {
       content.CSS.highlights.set("glow", new content.Highlight());
       content.CSS.highlights.set("anchor", new content.Highlight());
 
+      content.customElements.define(
+        "fx-test",
+        class extends content.HTMLElement {}
+      );
+      const { states } = content.document
+        .createElement("fx-test")
+        .attachInternals();
+      states.add("custom-state");
+      states.add("another-custom-state");
+
       content.wrappedJSObject.console.log(
         "oi-entries-test",
         new Map(
@@ -70,7 +82,8 @@ add_task(async function () {
         formData,
         midiAccess.inputs,
         midiAccess.outputs,
-        content.CSS.highlights
+        content.CSS.highlights,
+        states
       );
 
       return {
@@ -98,7 +111,7 @@ add_task(async function () {
   const objectInspectors = [...node.querySelectorAll(".tree")];
   is(
     objectInspectors.length,
-    12,
+    13,
     "There is the expected number of object inspectors"
   );
 
@@ -115,6 +128,7 @@ add_task(async function () {
     midiInputsOi,
     midiOutputsOi,
     highlightsRegistryOi,
+    customStateSetOi,
   ] = objectInspectors;
 
   await testSmallMap(smallMapOi);
@@ -129,6 +143,7 @@ add_task(async function () {
   await testMidiInputs(midiInputsOi, taskResult.midi.inputs);
   await testMidiOutputs(midiOutputsOi, taskResult.midi.outputs);
   await testHighlightsRegistry(highlightsRegistryOi);
+  await testCustomStateSet(customStateSetOi);
 });
 
 async function testSmallMap(oi) {
@@ -829,3 +844,51 @@ async function testHighlightsRegistry(oi) {
     `Got expected prototype property`
   );
 }
+
+async function testCustomStateSet(oi) {
+  info("Expanding the CustomStateSet");
+  let onCustomStateSetOiMutation = waitForNodeMutation(oi, {
+    childList: true,
+  });
+
+  oi.querySelector(".arrow").click();
+  await onCustomStateSetOiMutation;
+
+  ok(
+    oi.querySelector(".arrow").classList.contains("expanded"),
+    "The arrow of the node has the expected class after clicking on it"
+  );
+
+  let oiNodes = oi.querySelectorAll(".node");
+  // There are 4 nodes: the root, size, entries and the proto.
+  is(oiNodes.length, 4, "There is the expected number of nodes in the tree");
+
+  info("Expanding the <entries> leaf of the map");
+  const entriesNode = oiNodes[2];
+  is(
+    entriesNode.textContent,
+    "<entries>",
+    "There is the expected <entries> node"
+  );
+  onCustomStateSetOiMutation = waitForNodeMutation(oi, {
+    childList: true,
+  });
+
+  entriesNode.querySelector(".arrow").click();
+  await onCustomStateSetOiMutation;
+
+  oiNodes = oi.querySelectorAll(".node");
+  // There are now 6 nodes, the 4 original ones, and the 2 entries.
+  is(oiNodes.length, 6, "There is the expected number of nodes in the tree");
+
+  is(
+    oiNodes[3].textContent,
+    `0: "custom-state"`,
+    `Got expected first entry item`
+  );
+  is(
+    oiNodes[4].textContent,
+    `1: "another-custom-state"`,
+    `Got expected second entry item`
+  );
+}
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_private_properties.js b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_private_properties.js
index d70483a0f3..92187d000e 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_private_properties.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_object_inspector_private_properties.js
@@ -30,9 +30,11 @@ add_task(async function () {
       }
 
       #privateProperty;
+      // eslint-disable-next-line no-unused-private-class-members
       #privateMethod() {
         return Math.random();
       }
+      // eslint-disable-next-line no-unused-private-class-members
       get #privateGetter() {
         return 42;
       }
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_from_netmonitor.js b/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_from_netmonitor.js
index 8d9a6f8ff8..1788c0c035 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_from_netmonitor.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_from_netmonitor.js
@@ -20,7 +20,7 @@ registerCleanupFunction(async () => {
   Services.prefs.clearUserPref(NET_PREF);
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_in_netmonitor.js b/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_in_netmonitor.js
index 09c61bc007..552ea39d75 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_in_netmonitor.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_shows_reqs_in_netmonitor.js
@@ -19,7 +19,7 @@ registerCleanupFunction(async () => {
   Services.prefs.clearUserPref(NET_PREF);
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_filters_changed.js b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_filters_changed.js
index 95ff2e8e51..eb8d4eeceb 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_filters_changed.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_filters_changed.js
@@ -57,7 +57,11 @@ function checkTelemetryEvent(expectedEvent) {
   const events = getFiltersChangedEventsExtra();
   is(events.length, 1, "There was only 1 event logged");
   const [event] = events;
-  ok(event.session_id > 0, "There is a valid session_id in the logged event");
+  Assert.greater(
+    Number(event.session_id),
+    0,
+    "There is a valid session_id in the logged event"
+  );
   const f = e => JSON.stringify(e, null, 2);
   is(
     f(event),
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_jump_to_definition.js b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_jump_to_definition.js
index 07a1d575f5..2b722947c8 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_jump_to_definition.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_jump_to_definition.js
@@ -32,7 +32,11 @@ add_task(async function () {
   const events = getJumpToDefinitionEventsExtra();
   is(events.length, 1, "There was 1 event logged");
   const [event] = events;
-  ok(event.session_id > 0, "There is a valid session_id in the logged event");
+  Assert.greater(
+    Number(event.session_id),
+    0,
+    "There is a valid session_id in the logged event"
+  );
 });
 
 function getJumpToDefinitionEventsExtra() {
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_object_expanded.js b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_object_expanded.js
index 6dc6149295..c671d7cd63 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_object_expanded.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_object_expanded.js
@@ -35,7 +35,11 @@ add_task(async function () {
   let events = getObjectExpandedEventsExtra();
   is(events.length, 1, "There was 1 event logged");
   const [event] = events;
-  ok(event.session_id > 0, "There is a valid session_id in the logged event");
+  Assert.greater(
+    Number(event.session_id),
+    0,
+    "There is a valid session_id in the logged event"
+  );
 
   info("Click on the second arrow icon to expand the prototype node");
   const secondArrowIcon = message.querySelectorAll(".arrow")[1];
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_reverse_search.js b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_reverse_search.js
index b801f3b898..8177ff3ffa 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_reverse_search.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_telemetry_reverse_search.js
@@ -166,6 +166,6 @@ function checkEventTelemetry(expectedData) {
       expected.extra.functionality,
       "'functionality' is correct"
     );
-    ok(extra.session_id > 0, "'session_id' is correct");
+    Assert.greater(Number(extra.session_id), 0, "'session_id' is correct");
   }
 }
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_trackingprotection_errors.js b/devtools/client/webconsole/test/browser/browser_webconsole_trackingprotection_errors.js
index c2d91fcb3b..e9a056ea65 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_trackingprotection_errors.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_trackingprotection_errors.js
@@ -45,7 +45,7 @@ registerCleanupFunction(async function () {
   UrlClassifierTestUtils.cleanupTestTrackers();
 
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_content_blocking.js b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_content_blocking.js
index dbe5b508d1..849dcd394f 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_content_blocking.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_content_blocking.js
@@ -44,7 +44,7 @@ pushPref("devtools.webconsole.groupWarningMessages", true);
 
 async function cleanUp() {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_cookies.js b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_cookies.js
index bc611efde1..55a2e0945c 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_cookies.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_cookies.js
@@ -13,7 +13,7 @@ pushPref("devtools.webconsole.groupWarningMessages", true);
 
 async function cleanUp() {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_storage_isolation.js b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_storage_isolation.js
index 86276b5567..91e3c3e231 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_storage_isolation.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_warning_group_storage_isolation.js
@@ -26,7 +26,7 @@ pushPref("devtools.webconsole.groupWarningMessages", true);
 
 async function cleanUp() {
   await new Promise(resolve => {
-    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, value =>
+    Services.clearData.deleteData(Ci.nsIClearDataService.CLEAR_ALL, () =>
       resolve()
     );
   });
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_filtering.js b/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_filtering.js
index b85f35e809..38ec73c4bd 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_filtering.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_filtering.js
@@ -299,7 +299,7 @@ let cpt = 0;
  * tagged as tracker. The image is loaded with a incremented counter query parameter
  * each time so we can get the warning message.
  */
-function emitContentBlockedMessage(hud) {
+function emitContentBlockedMessage() {
   const url = `${BLOCKED_URL}?${++cpt}`;
   SpecialPowers.spawn(gBrowser.selectedBrowser, [url], function (innerURL) {
     content.wrappedJSObject.loadImage(innerURL);
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_toggle.js b/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_toggle.js
index 54e3d884e3..e0d0311b4f 100644
--- a/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_toggle.js
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_warning_groups_toggle.js
@@ -238,7 +238,7 @@ let cpt = 0;
  * tagged as tracker. The image is loaded with a incremented counter query parameter
  * each time so we can get the warning message.
  */
-function emitContentBlockedMessage(hud) {
+function emitContentBlockedMessage() {
   const url = `${BLOCKED_URL}?${++cpt}`;
   SpecialPowers.spawn(gBrowser.selectedBrowser, [url], function (innerURL) {
     content.wrappedJSObject.loadImage(innerURL);
diff --git a/devtools/client/webconsole/test/browser/test-console-custom-formatters-errors.html b/devtools/client/webconsole/test/browser/test-console-custom-formatters-errors.html
index a186bb338a..450672e78e 100644
--- a/devtools/client/webconsole/test/browser/test-console-custom-formatters-errors.html
+++ b/devtools/client/webconsole/test/browser/test-console-custom-formatters-errors.html
@@ -141,7 +141,7 @@
             }
             return null;
           },
-          hasBody: (obj) => false
+          hasBody: () => false
         },
         {
           header: (obj) => {
@@ -150,7 +150,7 @@
             }
             return null;
           },
-          hasBody: (obj) => true,
+          hasBody: () => true,
           body: (obj) => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody]
         },
         {
diff --git a/devtools/client/webconsole/test/browser/test-console-custom-formatters.html b/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
index 68fcda8ad2..53dc09a256 100644
--- a/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
+++ b/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
@@ -33,7 +33,7 @@
             }
             return null;
           },
-          hasBody: obj => false
+          hasBody: () => false
         },
         {
           header: obj => {
@@ -42,7 +42,7 @@
             }
             return null;
           },
-          hasBody: obj => true,
+          hasBody: () => true,
           body: obj => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody]
         },
         {
@@ -108,7 +108,7 @@
           ]}
         },
         {
-          header: (obj, config) => {
+          header: (obj) => {
             if (obj === proxy) {
               return [
                 "span",
@@ -118,7 +118,7 @@
             }
             return null;
           },
-          hasBody: obj => false
+          hasBody: () => false
         },
       ];
 
diff --git a/devtools/client/webconsole/test/browser/test-console-evaluation-context-selector-child.html b/devtools/client/webconsole/test/browser/test-console-evaluation-context-selector-child.html
index 88c42868e0..50f048e477 100644
--- a/devtools/client/webconsole/test/browser/test-console-evaluation-context-selector-child.html
+++ b/devtools/client/webconsole/test/browser/test-console-evaluation-context-selector-child.html
@@ -12,7 +12,7 @@
       var id = new URLSearchParams(document.location.search).get("id");
       document.querySelector("h2").id = id;
       document.title = `${id}|${document.location.host}`;
-      document.addEventListener("click", function(e) {
+      document.addEventListener("click", function() {
         // eslint-disable-next-line no-unused-vars
         const localVar = document;
         // eslint-disable-next-line no-debugger
diff --git a/devtools/client/webconsole/test/browser/test-error-worker2.js b/devtools/client/webconsole/test/browser/test-error-worker2.js
index 61fe07c3c4..0c038d916b 100644
--- a/devtools/client/webconsole/test/browser/test-error-worker2.js
+++ b/devtools/client/webconsole/test/browser/test-error-worker2.js
@@ -2,6 +2,6 @@
 
 self.addEventListener("message", ({ data }) => foo(data));
 
-function foo(data) {
+function foo() {
   throw new Error("worker2");
 }
diff --git a/devtools/client/webconsole/test/browser/test-eval-error.html b/devtools/client/webconsole/test/browser/test-eval-error.html
index ecc0fbb8cc..8f16a0320c 100644
--- a/devtools/client/webconsole/test/browser/test-eval-error.html
+++ b/devtools/client/webconsole/test/browser/test-eval-error.html
@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-vars */
 "use strict";
 
-function throwErrorObject(value) {
+function throwErrorObject() {
   throw new Error("ThrowErrorObject");
 }
 
diff --git a/devtools/client/webconsole/test/browser/test-evaluate-worker.js b/devtools/client/webconsole/test/browser/test-evaluate-worker.js
index 7d3ca22979..a98a81b7e7 100644
--- a/devtools/client/webconsole/test/browser/test-evaluate-worker.js
+++ b/devtools/client/webconsole/test/browser/test-evaluate-worker.js
@@ -2,6 +2,8 @@
 
 self.addEventListener("message", ({ data }) => foo(data));
 
+// This paramater is accessed by the debugger
+// eslint-disable-next-line no-unused-vars
 function foo(data) {
   // eslint-disable-next-line no-debugger
   debugger;
diff --git a/devtools/client/webconsole/test/node/components/webconsole-wrapper.test.js b/devtools/client/webconsole/test/node/components/webconsole-wrapper.test.js
index 1ea44b7388..eacd6bc9b6 100644
--- a/devtools/client/webconsole/test/node/components/webconsole-wrapper.test.js
+++ b/devtools/client/webconsole/test/node/components/webconsole-wrapper.test.js
@@ -27,7 +27,7 @@ async function getWebConsoleWrapper() {
     getMappedExpression: () => {},
     commands: {
       objectCommand: {
-        releaseObjects: async frontsToRelease => {},
+        releaseObjects: async () => {},
       },
     },
   };
diff --git a/devtools/client/webconsole/test/node/helpers.js b/devtools/client/webconsole/test/node/helpers.js
index d50a0a64ed..b9d8aa9c14 100644
--- a/devtools/client/webconsole/test/node/helpers.js
+++ b/devtools/client/webconsole/test/node/helpers.js
@@ -143,16 +143,12 @@ function getWebConsoleUiMock(hud) {
     emit: () => {},
     emitForTests: () => {},
     hud: {
-      // @backward-compat { version 123 } A new Objects Manager front has a new "releaseActors" method.
-      // Once 123 is release, supportsReleaseActors could be removed.
       commands: {
         client: {
-          mainRoot: {
-            supportsReleaseActors: true,
-          },
+          mainRoot: {},
         },
         objectCommand: {
-          releaseObjects: async frontsToRelease => {},
+          releaseObjects: async () => {},
         },
       },
       ...hud,
diff --git a/devtools/client/webconsole/test/node/store/private-messages.test.js b/devtools/client/webconsole/test/node/store/private-messages.test.js
index f040770436..e8f575c4f1 100644
--- a/devtools/client/webconsole/test/node/store/private-messages.test.js
+++ b/devtools/client/webconsole/test/node/store/private-messages.test.js
@@ -207,9 +207,7 @@ describe("private messages", () => {
       webConsoleUI: getWebConsoleUiMock({
         commands: {
           client: {
-            mainRoot: {
-              supportsReleaseActors: true,
-            },
+            mainRoot: {},
           },
           objectCommand: {
             releaseObjects: async frontsToRelease => {
diff --git a/devtools/client/webconsole/test/node/store/release-actors.test.js b/devtools/client/webconsole/test/node/store/release-actors.test.js
index 28339653b7..a449d390ba 100644
--- a/devtools/client/webconsole/test/node/store/release-actors.test.js
+++ b/devtools/client/webconsole/test/node/store/release-actors.test.js
@@ -31,9 +31,7 @@ describe("Release actor enhancer:", () => {
         webConsoleUI: getWebConsoleUiMock({
           commands: {
             client: {
-              mainRoot: {
-                supportsReleaseActors: true,
-              },
+              mainRoot: {},
             },
             objectCommand: {
               releaseObjects: async frontsToRelease => {
@@ -85,9 +83,7 @@ describe("Release actor enhancer:", () => {
         webConsoleUI: getWebConsoleUiMock({
           commands: {
             client: {
-              mainRoot: {
-                supportsReleaseActors: true,
-              },
+              mainRoot: {},
             },
             objectCommand: {
               releaseObjects: async frontsToRelease => {
@@ -146,9 +142,7 @@ describe("Release actor enhancer:", () => {
         webConsoleUI: getWebConsoleUiMock({
           commands: {
             client: {
-              mainRoot: {
-                supportsReleaseActors: true,
-              },
+              mainRoot: {},
             },
             objectCommand: {
               releaseObjects: async frontsToRelease => {
diff --git a/devtools/client/webconsole/utils/messages.js b/devtools/client/webconsole/utils/messages.js
index 135da20536..5f10046a71 100644
--- a/devtools/client/webconsole/utils/messages.js
+++ b/devtools/client/webconsole/utils/messages.js
@@ -386,9 +386,11 @@ function transformTraceResource(traceResource) {
     args,
     sourceId,
 
-    returnedValue,
     relatedTraceId,
     why,
+
+    mutationType,
+    mutationElement,
   } = traceResource;
 
   const frame = {
@@ -408,14 +410,19 @@ function transformTraceResource(traceResource) {
     parameters: args
       ? args.map(p => (p ? getAdHocFrontOrPrimitiveGrip(p, targetFront) : p))
       : null,
-    returnedValue: why
-      ? getAdHocFrontOrPrimitiveGrip(returnedValue, targetFront)
-      : null,
+    returnedValue:
+      why && "returnedValue" in traceResource
+        ? getAdHocFrontOrPrimitiveGrip(traceResource.returnedValue, targetFront)
+        : undefined,
     relatedTraceId,
     why,
     messageText: null,
     timeStamp,
     prefix,
+    mutationType,
+    mutationElement: mutationElement
+      ? getAdHocFrontOrPrimitiveGrip(mutationElement, targetFront)
+      : null,
     // Allow the identical frames to be coallesced into a unique message
     // with a repeatition counter so that we keep the output short in case of loops.
     allowRepeating: true,
@@ -558,7 +565,9 @@ function areMessagesSimilar(message1, message2) {
     message1.isPromiseRejection !== message2.isPromiseRejection ||
     message1.userProvidedStyles?.length !==
       message2.userProvidedStyles?.length ||
-    `${message1.userProvidedStyles}` !== `${message2.userProvidedStyles}`
+    `${message1.userProvidedStyles}` !== `${message2.userProvidedStyles}` ||
+    message1.mutationType !== message2.mutationType ||
+    message1.mutationElement != message2.mutationElement
   ) {
     return false;
   }
diff --git a/devtools/client/webconsole/webconsole-ui.js b/devtools/client/webconsole/webconsole-ui.js
index 7dfa44a402..a12f1f3983 100644
--- a/devtools/client/webconsole/webconsole-ui.js
+++ b/devtools/client/webconsole/webconsole-ui.js
@@ -535,12 +535,8 @@ class WebConsoleUI {
    * i.e. it was already existing or has just been created.
    *
    * @private
-   * @param Front targetFront
-   *        The Front of the target that is available.
-   *        This Front inherits from TargetMixin and is typically
-   *        composed of a WindowGlobalTargetFront or ContentProcessTargetFront.
    */
-  async _onTargetAvailable({ targetFront }) {
+  async _onTargetAvailable() {
     // onTargetAvailable is a mandatory argument for watchTargets,
     // we still define it solely for being able to use onTargetDestroyed.
   }
@@ -687,7 +683,7 @@ class WebConsoleUI {
         this.hud.commands.targetCommand.reloadTopLevelTarget();
       });
     } else if (Services.prefs.getBoolPref(PREF_SIDEBAR_ENABLED)) {
-      shortcuts.on("Esc", event => {
+      shortcuts.on("Esc", () => {
         this.wrapper.dispatchSidebarClose();
         if (this.jsterm) {
           this.jsterm.focus();