Adding upstream version 125.0.1.upstream/125.0.1

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

28 files changed, 274 insertions, 282 deletions

diff --git a/devtools/client/framework/actions/dom-mutation-breakpoints.js b/devtools/client/framework/actions/dom-mutation-breakpoints.js
index 1e1273d711..9780771a24 100644
--- a/devtools/client/framework/actions/dom-mutation-breakpoints.js
+++ b/devtools/client/framework/actions/dom-mutation-breakpoints.js
@@ -47,7 +47,7 @@ function createDOMMutationBreakpoint(nodeFront, mutationType) {
   assert(typeof nodeFront === "object" && nodeFront);
   assert(typeof mutationType === "string");
 
-  return async function ({ dispatch, getState }) {
+  return async function ({ dispatch }) {
     const walker = nodeFront.walkerFront;
 
     dispatch({
@@ -67,7 +67,7 @@ function deleteDOMMutationBreakpoint(nodeFront, mutationType) {
   assert(typeof nodeFront === "object" && nodeFront);
   assert(typeof mutationType === "string");
 
-  return async function ({ dispatch, getState }) {
+  return async function ({ dispatch }) {
     const walker = nodeFront.walkerFront;
     await walker.setMutationBreakpoints(nodeFront, {
       [mutationType]: false,
@@ -141,7 +141,7 @@ function toggleDOMMutationBreakpointState(id, enabled) {
   assert(typeof id === "string");
   assert(typeof enabled === "boolean");
 
-  return async function ({ dispatch, getState }) {
+  return async function ({ getState }) {
     const bp = getDOMMutationBreakpoint(getState(), id);
     if (!bp) {
       throw new Error(`No DOM mutation BP with ID ${id}`);
diff --git a/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_netmonitor.js b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_netmonitor.js
index 56e38998ce..cfa5783f12 100644
--- a/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_netmonitor.js
+++ b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_netmonitor.js
@@ -29,6 +29,7 @@ add_task(async function () {
 
   await ToolboxTask.importFunctions({
     waitUntil,
+    waitForDOM,
   });
 
   await ToolboxTask.spawn(null, async () => {
@@ -94,7 +95,10 @@ add_task(async function () {
 
   await ToolboxTask.spawn(null, async () => {
     const monitor = gToolbox.getCurrentPanel();
-    const { document, store } = monitor.panelWin;
+    const { document, store, windowRequire } = monitor.panelWin;
+    const Actions = windowRequire(
+      "devtools/client/netmonitor/src/actions/index"
+    );
 
     await waitUntil(
       () => !document.querySelector(".request-list-empty-notice")
@@ -110,10 +114,19 @@ add_task(async function () {
       document.querySelectorAll("tbody .requests-list-column.requests-list-url")
     );
     is(requests.length, 1, "One request displayed");
+    const requestUrl =
+      "https://example.org/document-builder.sjs?html=fromParent";
+    is(requests[0].textContent, requestUrl, "Expected request is displayed");
+
+    const waitForHeaders = waitForDOM(document, ".headers-overview");
+    store.dispatch(Actions.toggleNetworkDetails());
+    await waitForHeaders;
+
+    const tabpanel = document.querySelector("#headers-panel");
     is(
-      requests[0].textContent,
-      "https://example.org/document-builder.sjs?html=fromParent",
-      "Expected request is displayed"
+      tabpanel.querySelector(".url-preview .url").innerText,
+      requestUrl,
+      "The url summary value is incorrect."
     );
   });
 
@@ -129,23 +142,24 @@ add_task(async function () {
     const monitor = gToolbox.getCurrentPanel();
     const { document, store } = monitor.panelWin;
 
+    // Note that we may have lots of other requests relates to browser activity,
+    // like file:// requests for many internal UI ressources.
     await waitUntil(() => store.getState().requests.requests.length >= 3);
     ok(true, "Expected content requests are displayed");
 
-    const requests = Array.from(
-      document.querySelectorAll("tbody .requests-list-column.requests-list-url")
-    );
-    is(requests.length, 3, "Three requests displayed");
-    ok(
-      requests[1].textContent.includes(
-        `https://example.com/document-builder.sjs`
-      ),
-      "Request for the tab is displayed"
-    );
-    is(
-      requests[2].textContent,
-      innerUrlImg,
-      "Request for image image in tab is displayed"
-    );
+    async function waitForRequest(url, requestName) {
+      info(`Wait for ${requestName} request`);
+      await waitUntil(() => {
+        const requests = Array.from(
+          document.querySelectorAll(
+            "tbody .requests-list-column.requests-list-url"
+          )
+        );
+        return requests.some(r => r.textContent.includes(url));
+      });
+      info(`Got ${requestName} request`);
+    }
+    await waitForRequest("https://example.com/document-builder.sjs", "tab");
+    await waitForRequest(innerUrlImg, "image in tab");
   });
 });
diff --git a/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_unavailable_children.js b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_unavailable_children.js
index 5029c62306..d06274591e 100644
--- a/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_unavailable_children.js
+++ b/devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_unavailable_children.js
@@ -38,107 +38,99 @@ add_task(async function () {
     selectNode,
   });
 
-  const tabProcessID =
-    tab.linkedBrowser.browsingContext.currentWindowGlobal.osPid;
-
-  const decodedTabURI = decodeURI(tab.linkedBrowser.currentURI.spec);
-
-  await ToolboxTask.spawn(
-    [tabProcessID, isFissionEnabled(), decodedTabURI],
-    async (processID, _isFissionEnabled, tabURI) => {
-      /* global gToolbox */
-      const inspector = gToolbox.getPanel("inspector");
-
-      info("Select the test browser element.");
-      await selectNode('browser[remote="true"][test-tab]', inspector);
-
-      info("Retrieve the node front for selected node.");
-      const browserNodeFront = inspector.selection.nodeFront;
-      ok(!!browserNodeFront, "Retrieved a node front for the browser");
-      is(browserNodeFront.displayName, "browser");
-
-      // Small helper to expand containers and return the child container
-      // matching the provided display name.
-      async function expandContainer(container, expectedChildName) {
-        info(`Expand the node expected to contain a ${expectedChildName}`);
-        await inspector.markup.expandNode(container.node);
-        await waitUntil(() => !!container.getChildContainers().length);
-
-        const children = container
-          .getChildContainers()
-          .filter(child => child.node.displayName === expectedChildName);
-        is(children.length, 1);
-        return children[0];
-      }
-
-      info("Check that the corresponding markup view container has children");
-      const browserContainer = inspector.markup.getContainer(browserNodeFront);
-      ok(browserContainer.hasChildren);
-      ok(
-        !browserContainer.node.childrenUnavailable,
-        "childrenUnavailable un-set"
-      );
-      ok(
-        !browserContainer.elt.querySelector(".unavailable-children"),
-        "The unavailable badge is not displayed"
-      );
-
-      // Store the asserts as a helper to reuse it later in the test.
-      async function assertMarkupView() {
-        info("Check that the children are #document > html > body > div");
-        let container = await expandContainer(browserContainer, "#document");
-        container = await expandContainer(container, "html");
-        container = await expandContainer(container, "body");
-        container = await expandContainer(container, "div");
-
-        info("Select the #pick-me div");
-        await selectNode(container.node, inspector);
-        is(inspector.selection.nodeFront.id, "pick-me");
-      }
-      await assertMarkupView();
-
-      const parentProcessScope = gToolbox.doc.querySelector(
-        'input[name="chrome-debug-mode"][value="parent-process"]'
-      );
-
-      info("Switch to parent process only scope");
-      const onInspectorUpdated = inspector.once("inspector-updated");
-      parentProcessScope.click();
-      await onInspectorUpdated;
-
-      // Note: `getChildContainers` returns null when the container has no
-      // children, instead of an empty array.
-      await waitUntil(() => browserContainer.getChildContainers() === null);
-
-      ok(!browserContainer.hasChildren, "browser container has no children");
-      ok(browserContainer.node.childrenUnavailable, "childrenUnavailable set");
-      ok(
-        !!browserContainer.elt.querySelector(".unavailable-children"),
-        "The unavailable badge is displayed"
-      );
-
-      const everythingScope = gToolbox.doc.querySelector(
-        'input[name="chrome-debug-mode"][value="everything"]'
-      );
-
-      info("Switch to multi process scope");
-      everythingScope.click();
-
-      info("Wait until browserContainer has children");
-      await waitUntil(() => browserContainer.hasChildren);
-      ok(browserContainer.hasChildren, "browser container has children");
-      ok(
-        !browserContainer.node.childrenUnavailable,
-        "childrenUnavailable un-set"
-      );
-      ok(
-        !browserContainer.elt.querySelector(".unavailable-children"),
-        "The unavailable badge is no longer displayed"
-      );
-
-      await assertMarkupView();
+  await ToolboxTask.spawn([], async () => {
+    /* global gToolbox */
+    const inspector = gToolbox.getPanel("inspector");
+
+    info("Select the test browser element.");
+    await selectNode('browser[remote="true"][test-tab]', inspector);
+
+    info("Retrieve the node front for selected node.");
+    const browserNodeFront = inspector.selection.nodeFront;
+    ok(!!browserNodeFront, "Retrieved a node front for the browser");
+    is(browserNodeFront.displayName, "browser");
+
+    // Small helper to expand containers and return the child container
+    // matching the provided display name.
+    async function expandContainer(container, expectedChildName) {
+      info(`Expand the node expected to contain a ${expectedChildName}`);
+      await inspector.markup.expandNode(container.node);
+      await waitUntil(() => !!container.getChildContainers().length);
+
+      const children = container
+        .getChildContainers()
+        .filter(child => child.node.displayName === expectedChildName);
+      is(children.length, 1);
+      return children[0];
     }
-  );
+
+    info("Check that the corresponding markup view container has children");
+    const browserContainer = inspector.markup.getContainer(browserNodeFront);
+    ok(browserContainer.hasChildren);
+    ok(
+      !browserContainer.node.childrenUnavailable,
+      "childrenUnavailable un-set"
+    );
+    ok(
+      !browserContainer.elt.querySelector(".unavailable-children"),
+      "The unavailable badge is not displayed"
+    );
+
+    // Store the asserts as a helper to reuse it later in the test.
+    async function assertMarkupView() {
+      info("Check that the children are #document > html > body > div");
+      let container = await expandContainer(browserContainer, "#document");
+      container = await expandContainer(container, "html");
+      container = await expandContainer(container, "body");
+      container = await expandContainer(container, "div");
+
+      info("Select the #pick-me div");
+      await selectNode(container.node, inspector);
+      is(inspector.selection.nodeFront.id, "pick-me");
+    }
+    await assertMarkupView();
+
+    const parentProcessScope = gToolbox.doc.querySelector(
+      'input[name="chrome-debug-mode"][value="parent-process"]'
+    );
+
+    info("Switch to parent process only scope");
+    const onInspectorUpdated = inspector.once("inspector-updated");
+    parentProcessScope.click();
+    await onInspectorUpdated;
+
+    // Note: `getChildContainers` returns null when the container has no
+    // children, instead of an empty array.
+    await waitUntil(() => browserContainer.getChildContainers() === null);
+
+    ok(!browserContainer.hasChildren, "browser container has no children");
+    ok(browserContainer.node.childrenUnavailable, "childrenUnavailable set");
+    ok(
+      !!browserContainer.elt.querySelector(".unavailable-children"),
+      "The unavailable badge is displayed"
+    );
+
+    const everythingScope = gToolbox.doc.querySelector(
+      'input[name="chrome-debug-mode"][value="everything"]'
+    );
+
+    info("Switch to multi process scope");
+    everythingScope.click();
+
+    info("Wait until browserContainer has children");
+    await waitUntil(() => browserContainer.hasChildren);
+    ok(browserContainer.hasChildren, "browser container has children");
+    ok(
+      !browserContainer.node.childrenUnavailable,
+      "childrenUnavailable un-set"
+    );
+    ok(
+      !browserContainer.elt.querySelector(".unavailable-children"),
+      "The unavailable badge is no longer displayed"
+    );
+
+    await assertMarkupView();
+  });
 
   await ToolboxTask.destroy();
 });
diff --git a/devtools/client/framework/browser-toolbox/window.js b/devtools/client/framework/browser-toolbox/window.js
index e84ef02829..e1b4c8031b 100644
--- a/devtools/client/framework/browser-toolbox/window.js
+++ b/devtools/client/framework/browser-toolbox/window.js
@@ -185,7 +185,7 @@ window.addEventListener(
   { once: true }
 );
 
-function onCloseCommand(event) {
+function onCloseCommand() {
   window.close();
 }
 
diff --git a/devtools/client/framework/components/ToolboxTabs.js b/devtools/client/framework/components/ToolboxTabs.js
index 04b7d653a4..ad392a8700 100644
--- a/devtools/client/framework/components/ToolboxTabs.js
+++ b/devtools/client/framework/components/ToolboxTabs.js
@@ -97,7 +97,7 @@ class ToolboxTabs extends Component {
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.shouldUpdateToolboxTabs(prevProps, this.props)) {
       this.updateCachedToolTabsWidthMap();
       this.updateOverflowedTabs();
@@ -226,7 +226,7 @@ class ToolboxTabs extends Component {
     }
   }
 
-  resizeHandler(evt) {
+  resizeHandler() {
     window.cancelIdleCallback(this._resizeTimerId);
     this._resizeTimerId = window.requestIdleCallback(
       () => {
diff --git a/devtools/client/framework/components/ToolboxToolbar.js b/devtools/client/framework/components/ToolboxToolbar.js
index 6f94d0282b..f9998db0ab 100644
--- a/devtools/client/framework/components/ToolboxToolbar.js
+++ b/devtools/client/framework/components/ToolboxToolbar.js
@@ -354,7 +354,7 @@ class ToolboxToolbar extends Component {
     }
 
     const items = [];
-    toolbox.frameMap.forEach((frame, index) => {
+    toolbox.frameMap.forEach(frame => {
       const label = toolbox.target.isWebExtension
         ? toolbox.target.getExtensionPathName(frame.url)
         : getUnicodeUrl(frame.url);
diff --git a/devtools/client/framework/devtools.js b/devtools/client/framework/devtools.js
index e56efb0c4b..05e340a454 100644
--- a/devtools/client/framework/devtools.js
+++ b/devtools/client/framework/devtools.js
@@ -195,29 +195,13 @@ DevTools.prototype = {
    * Removes all tools that match the given |toolId|
    * Needed so that add-ons can remove themselves when they are deactivated
    *
-   * @param {string|object} tool
-   *        Definition or the id of the tool to unregister. Passing the
-   *        tool id should be avoided as it is a temporary measure.
+   * @param {string} toolId
+   *        The id of the tool to unregister.
    * @param {boolean} isQuitApplication
    *        true to indicate that the call is due to app quit, so we should not
    *        cause a cascade of costly events
    */
-  unregisterTool(tool, isQuitApplication) {
-    let toolId = null;
-    if (typeof tool == "string") {
-      toolId = tool;
-      tool = this._tools.get(tool);
-    } else {
-      const { Deprecated } = ChromeUtils.importESModule(
-        "resource://gre/modules/Deprecated.sys.mjs"
-      );
-      Deprecated.warning(
-        "Deprecation WARNING: gDevTools.unregisterTool(tool) is " +
-          "deprecated. You should unregister a tool using its toolId: " +
-          "gDevTools.unregisterTool(toolId)."
-      );
-      toolId = tool.id;
-    }
+  unregisterTool(toolId, isQuitApplication) {
     this._tools.delete(toolId);
 
     if (!isQuitApplication) {
diff --git a/devtools/client/framework/menu.js b/devtools/client/framework/menu.js
index a4cd8af5f7..2aef8aaf01 100644
--- a/devtools/client/framework/menu.js
+++ b/devtools/client/framework/menu.js
@@ -49,10 +49,10 @@ Menu.prototype.clear = function () {
 /**
  * Add an item to a specified position in the menu
  *
- * @param {int} pos
- * @param {MenuItem} menuItem
+ * @param {int} _pos
+ * @param {MenuItem} _menuItem
  */
-Menu.prototype.insert = function (pos, menuItem) {
+Menu.prototype.insert = function (_pos, _menuItem) {
   throw Error("Not implemented");
 };
 
diff --git a/devtools/client/framework/source-map-url-service.js b/devtools/client/framework/source-map-url-service.js
index 8e08e9e4cb..043211a723 100644
--- a/devtools/client/framework/source-map-url-service.js
+++ b/devtools/client/framework/source-map-url-service.js
@@ -296,7 +296,7 @@ class SourceMapURLService {
     return query;
   }
 
-  _dispatchQuery(query, newSubscribers = null) {
+  _dispatchQuery(query) {
     if (!this._prefValue) {
       throw new Error("This function should only be called if the pref is on.");
     }
diff --git a/devtools/client/framework/test/browser_devtools_api_destroy.js b/devtools/client/framework/test/browser_devtools_api_destroy.js
index 736455df65..56cf001f76 100644
--- a/devtools/client/framework/test/browser_devtools_api_destroy.js
+++ b/devtools/client/framework/test/browser_devtools_api_destroy.js
@@ -38,11 +38,11 @@ async function runTests(aTab) {
       const panel = toolbox.getPanel(toolDefinition.id);
       ok(panel, "Tool open");
 
-      gDevTools.once("toolbox-destroy", (toolbox, iframe) => {
+      gDevTools.once("toolbox-destroy", () => {
         collectedEvents.push("toolbox-destroy");
       });
 
-      gDevTools.once(toolDefinition.id + "-destroy", (toolbox, iframe) => {
+      gDevTools.once(toolDefinition.id + "-destroy", () => {
         collectedEvents.push("gDevTools-" + toolDefinition.id + "-destroy");
       });
 
diff --git a/devtools/client/framework/test/browser_keybindings_01.js b/devtools/client/framework/test/browser_keybindings_01.js
index 968c3a3d3d..3f48a5dfa2 100644
--- a/devtools/client/framework/test/browser_keybindings_01.js
+++ b/devtools/client/framework/test/browser_keybindings_01.js
@@ -97,6 +97,33 @@ add_task(async function () {
       key.synthesizeKey();
       await onPickerStop;
       ok(true, "picker-stopped event received, highlighter stopped");
+
+      info(
+        `Run the keyboard shortcut for ${test.id} with picker shortcut disabled`
+      );
+      await pushPref("devtools.command-button-pick.enabled", false);
+
+      // Switch to another panel to assure the hotkey still opens inspector
+      await toolbox.selectTool("webconsole");
+      await waitUntil(() => toolbox.currentToolId === "webconsole");
+
+      // Check if picker event times out
+      const onHasPickerStarted = Promise.race([
+        toolbox.nodePicker.once("picker-started").then(() => true),
+        wait(100).then(() => false),
+      ]);
+
+      key.synthesizeKey();
+      const hasPickerStarted = await onHasPickerStarted;
+
+      ok(!hasPickerStarted, "picker was not started on shortcut");
+      is(
+        toolbox.currentToolId,
+        "inspector",
+        "shortcut still switches tab to inspector"
+      );
+
+      await pushPref("devtools.command-button-pick.enabled", true);
     }
 
     await onSelectTool;
diff --git a/devtools/client/framework/test/browser_target_parents.js b/devtools/client/framework/test/browser_target_parents.js
index 795219abef..d66339739c 100644
--- a/devtools/client/framework/test/browser_target_parents.js
+++ b/devtools/client/framework/test/browser_target_parents.js
@@ -60,7 +60,7 @@ add_task(async function () {
   // With that, we were chasing a precise race, where a second call to ProcessDescriptor.getTarget()
   // happens between the instantiation of ContentProcessTarget and its call to attach() from getTarget
   // function.
-  await testGetTargetWithConcurrentCalls(processes, processTarget => {
+  await testGetTargetWithConcurrentCalls(processes, () => {
     // We only call ContentProcessTargetFront.attach and not TargetMixin.attachAndInitThread.
     // So nothing is done for content process targets.
     return true;
diff --git a/devtools/client/framework/test/browser_target_server_compartment.js b/devtools/client/framework/test/browser_target_server_compartment.js
index c0bd8e56f0..652f9e0bfb 100644
--- a/devtools/client/framework/test/browser_target_server_compartment.js
+++ b/devtools/client/framework/test/browser_target_server_compartment.js
@@ -26,7 +26,7 @@ async function testChromeTab() {
   );
 
   const onThreadActorInstantiated = new Promise(resolve => {
-    const observe = function (subject, topic, data) {
+    const observe = function (subject, topic) {
       if (topic === "devtools-thread-ready") {
         Services.obs.removeObserver(observe, "devtools-thread-ready");
         const threadActor = subject.wrappedJSObject;
@@ -62,7 +62,7 @@ async function testChromeTab() {
   );
 
   const onDedicatedLoaderDestroy = new Promise(resolve => {
-    const observe = function (subject, topic, data) {
+    const observe = function (subject, topic) {
       if (topic === "devtools:loader:destroy") {
         Services.obs.removeObserver(observe, "devtools:loader:destroy");
         resolve();
@@ -81,7 +81,7 @@ async function testChromeTab() {
 // Test that Main process Target can debug chrome scripts
 async function testMainProcess() {
   const onThreadActorInstantiated = new Promise(resolve => {
-    const observe = function (subject, topic, data) {
+    const observe = function (subject, topic) {
       if (topic === "devtools-thread-ready") {
         Services.obs.removeObserver(observe, "devtools-thread-ready");
         const threadActor = subject.wrappedJSObject;
diff --git a/devtools/client/framework/test/browser_toolbox_highlight.js b/devtools/client/framework/test/browser_toolbox_highlight.js
index d0712aeed5..401f5df9f6 100644
--- a/devtools/client/framework/test/browser_toolbox_highlight.js
+++ b/devtools/client/framework/test/browser_toolbox_highlight.js
@@ -62,7 +62,7 @@ function test() {
         finish();
       });
     });
-  })().catch(error => {
+  })().catch(() => {
     ok(false, "There was an error running the test.");
   });
 }
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
index 4065aabc2b..06b6281588 100644
--- a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.html
@@ -15,9 +15,9 @@
           // enabled, so dereferencing it would throw a ReferenceError (which
           // is then caught in the .catch() clause).
           return window.navigator.serviceWorker.register("serviceworker.js");
-        }).then(registration => {
+        }).then(() => {
           return {success: true};
-        }).catch(error => {
+        }).catch(() => {
           return {success: false};
         });
       }
@@ -36,7 +36,7 @@
 
       function iframeRegisterAndUnregister() {
         var frame = window.document.createElement("iframe");
-        var promise = new Promise(function(resolve, reject) {
+        var promise = new Promise(function(resolve) {
           frame.addEventListener("load", function() {
             Promise.resolve().then(_ => {
               return frame.contentWindow.navigator.serviceWorker.register("serviceworker.js");
@@ -45,7 +45,7 @@
             }).then(_ => {
               frame.remove();
               resolve({success: true});
-            }).catch(error => {
+            }).catch(() => {
               resolve({success: false});
             });
           }, {once: true});
diff --git a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
index 152f64f835..315b1f1e55 100644
--- a/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
+++ b/devtools/client/framework/test/browser_toolbox_options_enable_serviceworkers_testing.js
@@ -67,7 +67,7 @@ function register() {
   return sendMessage("devtools:sw-test:register");
 }
 
-function unregister(swr) {
+function unregister() {
   return sendMessage("devtools:sw-test:unregister");
 }
 
diff --git a/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js b/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js
index 74c0983d4e..d8d4d3057d 100644
--- a/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js
+++ b/devtools/client/framework/test/browser_toolbox_options_multiple_tabs.js
@@ -66,7 +66,7 @@ async function testToggleTools() {
   await toggleTool(tab2, toolId);
 }
 
-async function toggleTool({ doc, panelWin, checkbox, tab }, toolId) {
+async function toggleTool({ panelWin, checkbox }, toolId) {
   const prevChecked = checkbox.checked;
 
   (prevChecked ? checkRegistered : checkUnregistered)(toolId);
diff --git a/devtools/client/framework/test/browser_toolbox_select_event.js b/devtools/client/framework/test/browser_toolbox_select_event.js
index ebdae9af13..bbfd36eae4 100644
--- a/devtools/client/framework/test/browser_toolbox_select_event.js
+++ b/devtools/client/framework/test/browser_toolbox_select_event.js
@@ -72,7 +72,7 @@ add_task(async function () {
   async function testSelectToolRace() {
     const toolbox = await openToolboxForTab(tab, "webconsole");
     let selected = false;
-    const onSelect = (event, id) => {
+    const onSelect = () => {
       if (selected) {
         ok(false, "Got more than one 'select' event");
       } else {
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js b/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js
index cd1a478f5c..31c52e432e 100644
--- a/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_activate_splitconsole.js
@@ -103,6 +103,6 @@ async function checkResults() {
 
     // extras
     is(extra.host, expected.extra.host, "host is correct");
-    ok(extra.width > 0, "width is greater than 0");
+    Assert.greater(Number(extra.width), 0, "width is greater than 0");
   }
 }
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_enter.js b/devtools/client/framework/test/browser_toolbox_telemetry_enter.js
index 4cb4611a97..ac1253ec79 100644
--- a/devtools/client/framework/test/browser_toolbox_telemetry_enter.js
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_enter.js
@@ -144,7 +144,7 @@ async function checkResults() {
 
     // extras
     is(extra.host, expected.extra.host, "host is correct");
-    ok(extra.width > 0, "width is greater than 0");
+    Assert.greater(Number(extra.width), 0, "width is greater than 0");
     is(extra.start_state, expected.extra.start_state, "start_state is correct");
     is(extra.panel_name, expected.extra.panel_name, "panel_name is correct");
     is(extra.cold, expected.extra.cold, "cold is correct");
diff --git a/devtools/client/framework/test/browser_toolbox_telemetry_exit.js b/devtools/client/framework/test/browser_toolbox_telemetry_exit.js
index 3056b9af8c..98f831d6d4 100644
--- a/devtools/client/framework/test/browser_toolbox_telemetry_exit.js
+++ b/devtools/client/framework/test/browser_toolbox_telemetry_exit.js
@@ -121,7 +121,7 @@ async function checkResults() {
 
     // extras
     is(extra.host, expected.extra.host, "host is correct");
-    ok(extra.width > 0, "width is greater than 0");
+    Assert.greater(Number(extra.width), 0, "width is greater than 0");
     is(extra.panel_name, expected.extra.panel_name, "panel_name is correct");
     is(extra.next_panel, expected.extra.next_panel, "next_panel is correct");
     is(extra.reason, expected.extra.reason, "reason is correct");
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
index cdd6678e6f..d5780c083c 100644
--- a/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
@@ -10,7 +10,7 @@ const SIDEBAR_WIDTH_PREF = "devtools.toolbox.sidebar.width";
 
 const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
 
-add_task(async function (pickerEnable, commandsEnable) {
+add_task(async function () {
   // 74px is Chevron(26px) + Meatball(24px) + Close(24px)
   // devtools-browser.css defined this minimum width by using min-width.
   Services.prefs.setIntPref(SIDEBAR_WIDTH_PREF, 74);
diff --git a/devtools/client/framework/test/browser_toolbox_window_reload_target.js b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
index d9a4eb34c1..8415af88f2 100644
--- a/devtools/client/framework/test/browser_toolbox_window_reload_target.js
+++ b/devtools/client/framework/test/browser_toolbox_window_reload_target.js
@@ -46,7 +46,7 @@ add_task(async function () {
     "Listen to page reloads to check that they are indeed sent by the toolbox"
   );
   let reloadDetected = 0;
-  const reloadCounter = msg => {
+  const reloadCounter = () => {
     reloadDetected++;
     info("Detected reload #" + reloadDetected);
     is(
diff --git a/devtools/client/framework/test/helper_disable_cache.js b/devtools/client/framework/test/helper_disable_cache.js
index a98a68cc9f..31db6d81b4 100644
--- a/devtools/client/framework/test/helper_disable_cache.js
+++ b/devtools/client/framework/test/helper_disable_cache.js
@@ -93,7 +93,7 @@ async function setDisableCacheCheckboxChecked(tabX, state) {
 
   if (cbx.checked !== state) {
     info("Setting disable cache checkbox to " + state + " for " + tabX.title);
-    const onReconfigured = tabX.toolbox.once("cache-reconfigured");
+    const onReconfigured = tabX.toolbox.once("new-configuration-applied");
     cbx.click();
 
     // We have to wait for the reconfigure request to be finished before reloading
diff --git a/devtools/client/framework/toolbox-hosts.js b/devtools/client/framework/toolbox-hosts.js
index 59d113848f..889a8cec36 100644
--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -413,7 +413,7 @@ PageHost.prototype = {
   raise() {},
 
   // Do nothing.
-  setTitle(title) {},
+  setTitle() {},
 
   // Do nothing.
   destroy() {
diff --git a/devtools/client/framework/toolbox-options.js b/devtools/client/framework/toolbox-options.js
index 57fa1202b7..98b263ad44 100644
--- a/devtools/client/framework/toolbox-options.js
+++ b/devtools/client/framework/toolbox-options.js
@@ -148,7 +148,7 @@ OptionsPanel.prototype = {
     }
   },
 
-  _themeRegistered(themeId) {
+  _themeRegistered() {
     this.setupThemeList();
   },
 
diff --git a/devtools/client/framework/toolbox-tabs-order-manager.js b/devtools/client/framework/toolbox-tabs-order-manager.js
index 0eec0c935f..d8fe73597f 100644
--- a/devtools/client/framework/toolbox-tabs-order-manager.js
+++ b/devtools/client/framework/toolbox-tabs-order-manager.js
@@ -7,7 +7,7 @@
 const { AddonManager } = ChromeUtils.importESModule(
   "resource://gre/modules/AddonManager.sys.mjs",
   // AddonManager is a singleton, never create two instances of it.
-  { loadInDevToolsLoader: false }
+  { global: "shared" }
 );
 const {
   gDevTools,
diff --git a/devtools/client/framework/toolbox.js b/devtools/client/framework/toolbox.js
index 2294ff879d..a03360aa26 100644
--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -216,6 +216,25 @@ loader.lazyGetter(this, "ProfilerBackground", () => {
   );
 });
 
+const BOOLEAN_CONFIGURATION_PREFS = {
+  "devtools.cache.disabled": {
+    name: "cacheDisabled",
+  },
+  "devtools.custom-formatters.enabled": {
+    name: "customFormatters",
+  },
+  "devtools.serviceWorkers.testing.enabled": {
+    name: "serviceWorkersTestingEnabled",
+  },
+  "devtools.inspector.simple-highlighters-reduced-motion": {
+    name: "useSimpleHighlightersForReducedMotion",
+  },
+  "devtools.debugger.features.overlay": {
+    name: "pauseOverlay",
+    thread: true,
+  },
+};
+
 /**
  * A "Toolbox" is the component that holds all the tools for one specific
  * target. Visually, it's a document that includes the tools tabs and all
@@ -284,13 +303,6 @@ function Toolbox(commands, selectedTool, hostType, contentWindow, frameId) {
   this._splitConsoleOnKeypress = this._splitConsoleOnKeypress.bind(this);
   this.closeToolbox = this.closeToolbox.bind(this);
   this.destroy = this.destroy.bind(this);
-  this._applyCacheSettings = this._applyCacheSettings.bind(this);
-  this._applyCustomFormatterSetting =
-    this._applyCustomFormatterSetting.bind(this);
-  this._applyServiceWorkersTestingSettings =
-    this._applyServiceWorkersTestingSettings.bind(this);
-  this._applySimpleHighlightersSettings =
-    this._applySimpleHighlightersSettings.bind(this);
   this._saveSplitConsoleHeight = this._saveSplitConsoleHeight.bind(this);
   this._onFocus = this._onFocus.bind(this);
   this._onBlur = this._onBlur.bind(this);
@@ -887,17 +899,9 @@ Toolbox.prototype = {
       // the iframe being ready (makes startup faster)
       await this.commands.targetCommand.startListening();
 
-      // Lets get the current thread settings from the prefs and
-      // update the threadConfigurationActor which should manage
-      // updating the current threads.
-      const options = await getThreadOptions();
-      await this.commands.threadConfigurationCommand.updateConfiguration(
-        options
-      );
-
-      // This needs to be done before watching for resources so console messages can be
-      // custom formatted right away.
-      await this._applyCustomFormatterSetting();
+      // Transfer settings early, before watching resources as it may impact them.
+      // (this is the case for custom formatter pref and console messages)
+      await this._listenAndApplyConfigurationPref();
 
       // The targetCommand is created right before this code.
       // It means that this call to watchTargets is the first,
@@ -960,22 +964,6 @@ Toolbox.prototype = {
       const framesPromise = this._listFrames();
 
       Services.prefs.addObserver(
-        "devtools.cache.disabled",
-        this._applyCacheSettings
-      );
-      Services.prefs.addObserver(
-        "devtools.custom-formatters.enabled",
-        this._applyCustomFormatterSetting
-      );
-      Services.prefs.addObserver(
-        "devtools.serviceWorkers.testing.enabled",
-        this._applyServiceWorkersTestingSettings
-      );
-      Services.prefs.addObserver(
-        "devtools.inspector.simple-highlighters-reduced-motion",
-        this._applySimpleHighlightersSettings
-      );
-      Services.prefs.addObserver(
         BROWSERTOOLBOX_SCOPE_PREF,
         this._refreshHostTitle
       );
@@ -992,11 +980,6 @@ Toolbox.prototype = {
       this._buildInitialPanelDefinitions();
       this._setDebugTargetData();
 
-      // Forward configuration flags to the DevTools server.
-      this._applyCacheSettings();
-      this._applyServiceWorkersTestingSettings();
-      this._applySimpleHighlightersSettings();
-
       this._addWindowListeners();
       this._addChromeEventHandlerEvents();
 
@@ -2033,7 +2016,7 @@ Toolbox.prototype = {
     this.errorCountButton = this._createButtonState({
       id: "command-button-errorcount",
       isInStartContainer: false,
-      isToolSupported: toolbox => true,
+      isToolSupported: () => true,
       description: L10N.getStr("toolbox.errorCountButton.description"),
     });
     // Use updateErrorCountButton to set some properties so we don't have to repeat
@@ -2206,68 +2189,70 @@ Toolbox.prototype = {
       : L10N.getFormatStr(label, shortcut);
   },
 
-  /**
-   * Apply the current cache setting from devtools.cache.disabled to this
-   * toolbox's tab.
-   */
-  async _applyCacheSettings() {
-    const pref = "devtools.cache.disabled";
-    const cacheDisabled = Services.prefs.getBoolPref(pref);
+  async _listenAndApplyConfigurationPref() {
+    this._onBooleanConfigurationPrefChange =
+      this._onBooleanConfigurationPrefChange.bind(this);
 
-    await this.commands.targetConfigurationCommand.updateConfiguration({
-      cacheDisabled,
-    });
+    // We have two configurations:
+    //  * target specific configurations, which are set on all target actors, themself easily accessible from any actor.
+    //    Most configurations should be set this way.
+    //  * thread specific configurations, which are set on directly on the thread actor.
+    //    Only configuration used by the thread actor should be set this way.
+    const targetConfiguration = {};
 
-    // This event is only emitted for tests in order to know when to reload
-    if (flags.testing) {
-      this.emit("cache-reconfigured");
-    }
-  },
+    // Get the current thread settings from the prefs as well as debugger internal storage for breakpoints.
+    const threadConfiguration = await getThreadOptions();
 
-  /**
-   * Apply the custom formatter setting (from `devtools.custom-formatters.enabled`) to this
-   * toolbox's tab.
-   */
-  async _applyCustomFormatterSetting() {
-    if (!this.commands) {
-      return;
-    }
+    for (const prefName in BOOLEAN_CONFIGURATION_PREFS) {
+      const { name, thread } = BOOLEAN_CONFIGURATION_PREFS[prefName];
+      const value = Services.prefs.getBoolPref(prefName, false);
 
-    const customFormatters = Services.prefs.getBoolPref(
-      "devtools.custom-formatters.enabled",
-      false
-    );
+      // Based on the pref name, this will be stored in either target or thread specific configuration
+      if (thread) {
+        threadConfiguration[name] = value;
+      } else {
+        targetConfiguration[name] = value;
+      }
 
-    await this.commands.targetConfigurationCommand.updateConfiguration({
-      customFormatters,
-    });
+      // Also listen for any future change
+      Services.prefs.addObserver(
+        prefName,
+        this._onBooleanConfigurationPrefChange
+      );
+    }
 
-    this.emitForTests("custom-formatters-reconfigured");
+    // Now communicate the configurations to the server
+    await this.commands.targetConfigurationCommand.updateConfiguration(
+      targetConfiguration
+    );
+    await this.commands.threadConfigurationCommand.updateConfiguration(
+      threadConfiguration
+    );
   },
 
   /**
-   * Apply the current service workers testing setting from
-   * devtools.serviceWorkers.testing.enabled to this toolbox's tab.
-   */
-  _applyServiceWorkersTestingSettings() {
-    const pref = "devtools.serviceWorkers.testing.enabled";
-    const serviceWorkersTestingEnabled = Services.prefs.getBoolPref(pref);
-    this.commands.targetConfigurationCommand.updateConfiguration({
-      serviceWorkersTestingEnabled,
+   * Called whenever a preference registered in BOOLEAN_CONFIGURATION_PREFS
+   * changes.
+   * This is used to communicate the new setting's value to the server.
+   *
+   * @param {String} subject
+   * @param {String} topic
+   * @param {String} prefName
+   *        The preference name which changed
+   */
+  async _onBooleanConfigurationPrefChange(subject, topic, prefName) {
+    const { name, thread } = BOOLEAN_CONFIGURATION_PREFS[prefName];
+    const value = Services.prefs.getBoolPref(prefName, false);
+
+    const configurationCommand = thread
+      ? this.commands.threadConfigurationCommand
+      : this.commands.targetConfigurationCommand;
+    await configurationCommand.updateConfiguration({
+      [name]: value,
     });
-  },
 
-  /**
-   * Apply the current simple highlighters setting to this toolbox's tab.
-   */
-  _applySimpleHighlightersSettings() {
-    const useSimpleHighlightersForReducedMotion = Services.prefs.getBoolPref(
-      "devtools.inspector.simple-highlighters-reduced-motion",
-      false
-    );
-    this.commands.targetConfigurationCommand.updateConfiguration({
-      useSimpleHighlightersForReducedMotion,
-    });
+    // This event is only emitted for tests in order to know when the setting has been applied by the backend.
+    this.emitForTests("new-configuration-applied", prefName);
   },
 
   /**
@@ -3378,7 +3363,7 @@ Toolbox.prototype = {
     return prefFront.getBoolPref(DISABLE_AUTOHIDE_PREF);
   },
 
-  async _listFrames(event) {
+  async _listFrames() {
     if (
       !this.target.getTrait("frames") ||
       this.target.targetForm.ignoreSubFrames
@@ -4053,22 +4038,12 @@ Toolbox.prototype = {
     gDevTools.off("tool-registered", this._toolRegistered);
     gDevTools.off("tool-unregistered", this._toolUnregistered);
 
-    Services.prefs.removeObserver(
-      "devtools.cache.disabled",
-      this._applyCacheSettings
-    );
-    Services.prefs.removeObserver(
-      "devtools.custom-formatters.enabled",
-      this._applyCustomFormatterSetting
-    );
-    Services.prefs.removeObserver(
-      "devtools.serviceWorkers.testing.enabled",
-      this._applyServiceWorkersTestingSettings
-    );
-    Services.prefs.removeObserver(
-      "devtools.inspector.simple-highlighters-reduced-motion",
-      this._applySimpleHighlightersSettings
-    );
+    for (const prefName in BOOLEAN_CONFIGURATION_PREFS) {
+      Services.prefs.removeObserver(
+        prefName,
+        this._onBooleanConfigurationPrefChange
+      );
+    }
     Services.prefs.removeObserver(
       BROWSERTOOLBOX_SCOPE_PREF,
       this._refreshHostTitle
@@ -4478,8 +4453,8 @@ Toolbox.prototype = {
    * Opens source in plain "view-source:".
    * @see devtools/client/shared/source-utils.js
    */
-  viewSource(sourceURL, sourceLine) {
-    return viewSource.viewSource(this, sourceURL, sourceLine);
+  viewSource(sourceURL, sourceLine, sourceColumn) {
+    return viewSource.viewSource(this, sourceURL, sourceLine, sourceColumn);
   },
 
   // Support for WebExtensions API (`devtools.network.*`)