Merging upstream version 125.0.1.

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

51 files changed, 351 insertions, 166 deletions

diff --git a/devtools/client/inspector/animation/components/App.js b/devtools/client/inspector/animation/components/App.js
index 75a000286c..74ce8e7b40 100644
--- a/devtools/client/inspector/animation/components/App.js
+++ b/devtools/client/inspector/animation/components/App.js
@@ -60,7 +60,7 @@ class App extends Component {
     };
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     return (
       this.props.animations.length !== 0 || nextProps.animations.length !== 0
     );
diff --git a/devtools/client/inspector/animation/components/NoAnimationPanel.js b/devtools/client/inspector/animation/components/NoAnimationPanel.js
index ea034e413d..260325518b 100644
--- a/devtools/client/inspector/animation/components/NoAnimationPanel.js
+++ b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -26,7 +26,7 @@ class NoAnimationPanel extends Component {
     };
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps) {
     return this.props.elementPickerEnabled != nextProps.elementPickerEnabled;
   }
 
diff --git a/devtools/client/inspector/animation/components/PlaybackRateSelector.js b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
index 2d0de53a0c..9f2c56cdb6 100644
--- a/devtools/client/inspector/animation/components/PlaybackRateSelector.js
+++ b/devtools/client/inspector/animation/components/PlaybackRateSelector.js
@@ -28,7 +28,7 @@ class PlaybackRateSelector extends PureComponent {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props) {
     const { animations, playbackRates } = props;
 
     const currentPlaybackRates = sortAndUnique(
diff --git a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
index a7051d9a01..bb69249907 100644
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -91,7 +91,7 @@ add_task(async function () {
   }
 });
 
-function assertPosition(barEl, areaEl, expectedRate, animationInspector) {
+function assertPosition(barEl, areaEl, expectedRate) {
   const controllerBounds = areaEl.getBoundingClientRect();
   const barBounds = barEl.getBoundingClientRect();
   const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
diff --git a/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
index fd601821b6..fffd653b1d 100644
--- a/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
+++ b/devtools/client/inspector/animation/test/summary-graph_delay-sign_head.js
@@ -75,8 +75,9 @@ async function testSummaryGraphDelaySign() {
       function assertExpected(key) {
         const actual = parseFloat(delaySignEl.style[key]);
         const expected = parseFloat(expectedResult[key]);
-        ok(
-          Math.abs(actual - expected) < 0.01,
+        Assert.less(
+          Math.abs(actual - expected),
+          0.01,
           `${key} should be ${expected} (got ${actual})`
         );
       }
diff --git a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
index f87a554420..09838fcadf 100644
--- a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
+++ b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js
@@ -69,8 +69,9 @@ async function testSummaryGraphEndDelaySign() {
       function assertExpected(key) {
         const actual = parseFloat(endDelaySignEl.style[key]);
         const expected = parseFloat(expectedResult[key]);
-        ok(
-          Math.abs(actual - expected) < 0.01,
+        Assert.less(
+          Math.abs(actual - expected),
+          0.01,
           `${key} should be ${expected} (got ${actual})`
         );
       }
diff --git a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
index e64faba05a..2444b7107d 100644
--- a/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelInfo.js
@@ -32,7 +32,7 @@ class BoxModelInfo extends PureComponent {
     this.onToggleGeometryEditor = this.onToggleGeometryEditor.bind(this);
   }
 
-  onToggleGeometryEditor(e) {
+  onToggleGeometryEditor() {
     this.props.onToggleGeometryEditor();
   }
 
diff --git a/devtools/client/inspector/breadcrumbs.js b/devtools/client/inspector/breadcrumbs.js
index 68bafb591c..47700f7d40 100644
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -588,9 +588,8 @@ HTMLBreadcrumbs.prototype = {
 
   /**
    * On mouse out, make sure to unhighlight.
-   * @param {DOMEvent} event.
    */
-  handleMouseOut(event) {
+  handleMouseOut() {
     this.inspector.highlighters.hideHighlighterType(
       this.inspector.highlighters.TYPES.BOXMODEL
     );
diff --git a/devtools/client/inspector/changes/reducers/changes.js b/devtools/client/inspector/changes/reducers/changes.js
index 23e82a3ba7..82a5a92ed7 100644
--- a/devtools/client/inspector/changes/reducers/changes.js
+++ b/devtools/client/inspector/changes/reducers/changes.js
@@ -371,7 +371,7 @@ const reducers = {
     return state;
   },
 
-  [RESET_CHANGES](state) {
+  [RESET_CHANGES]() {
     return INITIAL_STATE;
   },
 };
diff --git a/devtools/client/inspector/changes/selectors/changes.js b/devtools/client/inspector/changes/selectors/changes.js
index a6b99e4579..a176e11082 100644
--- a/devtools/client/inspector/changes/selectors/changes.js
+++ b/devtools/client/inspector/changes/selectors/changes.js
@@ -65,7 +65,7 @@ function getChangesTree(state, filter = {}) {
   }
 
   return Object.entries(state)
-    .filter(([sourceId, source]) => {
+    .filter(([sourceId]) => {
       // Use only matching sources if an array to filter by was provided.
       if (sourceIdsFilter.length) {
         return sourceIdsFilter.includes(sourceId);
@@ -87,7 +87,7 @@ function getChangesTree(state, filter = {}) {
         ...source,
         // Build a new collection of rules keyed by rule id.
         rules: Object.entries(rules)
-          .filter(([ruleId, rule]) => {
+          .filter(([ruleId]) => {
             // Use only matching rules if an array to filter by was provided.
             if (rulesIdsFilter.length) {
               return rulesIdsFilter.includes(ruleId);
@@ -237,22 +237,19 @@ function getChangesStylesheet(state, filter) {
   }
 
   // Iterate through all sources in the change tree and build a CSS stylesheet string.
-  return Object.entries(changeTree).reduce(
-    (stylesheetText, [sourceId, source]) => {
-      const { href, rules } = source;
-      // Write code comment with source origin
-      stylesheetText += `\n/* ${getSourceForDisplay(source)} | ${href} */\n`;
-      // Write CSS rules
-      stylesheetText += Object.entries(rules).reduce((str, [ruleId, rule]) => {
-        // Add a new like only after top-level rules (level == 0)
-        str += writeRule(ruleId, rule, 0) + "\n";
-        return str;
-      }, "");
+  return Object.values(changeTree).reduce((stylesheetText, source) => {
+    const { href, rules } = source;
+    // Write code comment with source origin
+    stylesheetText += `\n/* ${getSourceForDisplay(source)} | ${href} */\n`;
+    // Write CSS rules
+    stylesheetText += Object.entries(rules).reduce((str, [ruleId, rule]) => {
+      // Add a new like only after top-level rules (level == 0)
+      str += writeRule(ruleId, rule, 0) + "\n";
+      return str;
+    }, "");
 
-      return stylesheetText;
-    },
-    ""
-  );
+    return stylesheetText;
+  }, "");
 }
 
 module.exports = {
diff --git a/devtools/client/inspector/compatibility/CompatibilityView.js b/devtools/client/inspector/compatibility/CompatibilityView.js
index 19c3263f00..548246fd54 100644
--- a/devtools/client/inspector/compatibility/CompatibilityView.js
+++ b/devtools/client/inspector/compatibility/CompatibilityView.js
@@ -32,7 +32,7 @@ const CompatibilityApp = createFactory(
 );
 
 class CompatibilityView {
-  constructor(inspector, window) {
+  constructor(inspector) {
     this.inspector = inspector;
 
     this.inspector.store.injectReducer("compatibility", compatibilityReducer);
@@ -133,7 +133,7 @@ class CompatibilityView {
     );
   }
 
-  _parseMarkup(str) {
+  _parseMarkup() {
     // Using a BrowserLoader for the inspector is currently blocked on performance regressions,
     // see Bug 1471853.
     throw new Error(
diff --git a/devtools/client/inspector/compatibility/actions/compatibility.js b/devtools/client/inspector/compatibility/actions/compatibility.js
index fa9f410e0d..3ff512f1b0 100644
--- a/devtools/client/inspector/compatibility/actions/compatibility.js
+++ b/devtools/client/inspector/compatibility/actions/compatibility.js
@@ -74,7 +74,7 @@ function clearDestroyedNodes() {
 }
 
 function initUserSettings() {
-  return async ({ dispatch, getState }) => {
+  return async ({ dispatch }) => {
     dispatch({ type: COMPATIBILITY_INIT_USER_SETTINGS_START });
 
     try {
diff --git a/devtools/client/inspector/compatibility/reducers/compatibility.js b/devtools/client/inspector/compatibility/reducers/compatibility.js
index 9256167601..ce54e856a9 100644
--- a/devtools/client/inspector/compatibility/reducers/compatibility.js
+++ b/devtools/client/inspector/compatibility/reducers/compatibility.js
@@ -139,7 +139,7 @@ const reducers = {
     _showError(COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_FAILURE, error);
     return state;
   },
-  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE](state, { target }) {
+  [COMPATIBILITY_UPDATE_TOP_LEVEL_TARGET_COMPLETE](state) {
     return Object.assign({}, state, { isTopLevelTargetProcessing: false });
   },
 };
diff --git a/devtools/client/inspector/computed/computed.js b/devtools/client/inspector/computed/computed.js
index 7d2c129c7b..9b051425e2 100644
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -1383,7 +1383,7 @@ class PropertyView {
   /**
    * The action when a user clicks on the MDN help link for a property.
    */
-  mdnLinkClick(event) {
+  mdnLinkClick() {
     if (!this.link) {
       return;
     }
diff --git a/devtools/client/inspector/computed/test/browser.toml b/devtools/client/inspector/computed/test/browser.toml
index d4ec4fc993..634c367351 100644
--- a/devtools/client/inspector/computed/test/browser.toml
+++ b/devtools/client/inspector/computed/test/browser.toml
@@ -34,7 +34,8 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
 
 ["browser_computed_getNodeInfo.js"]
 skip-if = [
-  "!debug && os == 'mac'", #Bug 1559033
+  "apple_catalina && !debug", #Bug 1559033
+  "apple_silicon && !debug", #Bug 1559033
   "a11y_checks", # Bugs 1849028 and 1858041 to investigate intermittent a11y_checks results
 ]
 
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
index 5a6681f139..351d640bf9 100644
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -83,7 +83,7 @@ function checkHelpLinkKeybinding(view) {
   info('Check that MDN link is opened on "F1"');
   const propView = getFirstVisiblePropertyView(view);
   return new Promise(resolve => {
-    propView.mdnLinkClick = function (event) {
+    propView.mdnLinkClick = function () {
       ok(true, "Pressing F1 opened the MDN link");
       resolve();
     };
diff --git a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
index 00bea31e57..ad26d3beab 100644
--- a/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
+++ b/devtools/client/inspector/flexbox/components/FlexItemSizingProperties.js
@@ -90,12 +90,10 @@ class FlexItemSizingProperties extends PureComponent {
    *         The name for this CSS property
    * @param  {String} value
    *         The property value
-   * @param  {Booleam} isDefaultValue
-   *         Whether the value come from the browser default style
    * @return {Object}
    *         The React component representing this CSS property
    */
-  renderCssProperty(name, value, isDefaultValue) {
+  renderCssProperty(name, value) {
     return dom.span({ className: "css-property-link" }, `(${name}: ${value})`);
   }
 
@@ -115,7 +113,7 @@ class FlexItemSizingProperties extends PureComponent {
     );
   }
 
-  renderBaseSizeSection({ mainBaseSize, clampState }, properties, dimension) {
+  renderBaseSizeSection({ mainBaseSize }, properties, dimension) {
     const flexBasisValue = properties["flex-basis"];
     const dimensionValue = properties[dimension];
 
diff --git a/devtools/client/inspector/flexbox/reducers/flexbox.js b/devtools/client/inspector/flexbox/reducers/flexbox.js
index 856294a549..46c1d4525c 100644
--- a/devtools/client/inspector/flexbox/reducers/flexbox.js
+++ b/devtools/client/inspector/flexbox/reducers/flexbox.js
@@ -58,7 +58,7 @@ const INITIAL_FLEXBOX = {
 };
 
 const reducers = {
-  [CLEAR_FLEXBOX](flexbox, _) {
+  [CLEAR_FLEXBOX](_) {
     return INITIAL_FLEXBOX;
   },
 
diff --git a/devtools/client/inspector/fonts/reducers/font-editor.js b/devtools/client/inspector/fonts/reducers/font-editor.js
index b40fff4ba1..fbfee2d666 100644
--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -62,7 +62,7 @@ const reducers = {
     return newState;
   },
 
-  [RESET_EDITOR](state) {
+  [RESET_EDITOR]() {
     return { ...INITIAL_STATE };
   },
 
diff --git a/devtools/client/inspector/grids/components/GridOutline.js b/devtools/client/inspector/grids/components/GridOutline.js
index 65771f3f45..2a7a195bd0 100644
--- a/devtools/client/inspector/grids/components/GridOutline.js
+++ b/devtools/client/inspector/grids/components/GridOutline.js
@@ -344,7 +344,7 @@ class GridOutline extends PureComponent {
     );
   }
 
-  renderGridOutlineBorder(borderWidth, borderHeight, color) {
+  renderGridOutlineBorder(borderWidth, borderHeight) {
     return dom.rect({
       key: "border",
       className: "grid-outline-border",
diff --git a/devtools/client/inspector/markup/markup.js b/devtools/client/inspector/markup/markup.js
index 5d10b003c9..7975d442f8 100644
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -1218,19 +1218,15 @@ MarkupView.prototype = {
     } else if (type == "idref") {
       // Select the node in the same document.
       nodeFront.walkerFront
-        .document(nodeFront)
-        .then(doc => {
-          return nodeFront.walkerFront
-            .querySelector(doc, "#" + CSS.escape(link))
-            .then(node => {
-              if (!node) {
-                this.emit("idref-attribute-link-failed");
-                return;
-              }
-              this.inspector.selection.setNodeFront(node, {
-                reason: "markup-attribute-link",
-              });
-            });
+        .getIdrefNode(nodeFront, CSS.escape(link))
+        .then(node => {
+          if (!node) {
+            this.emitForTests("idref-attribute-link-failed");
+            return;
+          }
+          this.inspector.selection.setNodeFront(node, {
+            reason: "markup-attribute-link",
+          });
         })
         .catch(console.error);
     }
@@ -1555,7 +1551,7 @@ MarkupView.prototype = {
     }
   },
 
-  _onTargetAvailable({ targetFront }) {},
+  _onTargetAvailable() {},
 
   _onTargetDestroyed({ targetFront, isModeSwitching }) {
     // Bug 1776250: We only watch targets in order to update containers which
@@ -2103,14 +2099,12 @@ MarkupView.prototype = {
    * Mark the given node selected, and update the inspector.selection
    * object's NodeFront to keep consistent state between UI and selection.
    *
-   * @param  {NodeFront} aNode
+   * @param  {NodeFront} node
    *         The NodeFront to mark as selected.
-   * @param  {String} reason
-   *         The reason for marking the node as selected.
    * @return {Boolean} False if the node is already marked as selected, true
    *         otherwise.
    */
-  markNodeAsSelected(node, reason = "nodeselected") {
+  markNodeAsSelected(node) {
     const container = this.getContainer(node);
     return this._markContainerAsSelected(container);
   },
diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml
index 0b566f5e18..4f08fd10f2 100644
--- a/devtools/client/inspector/markup/test/browser.toml
+++ b/devtools/client/inspector/markup/test/browser.toml
@@ -1,5 +1,4 @@
 [DEFAULT]
-prefs = ["devtools.chrome.enabled=false"] # Bug 1520383 - Force devtools.chrome.enabled to false regardless of whether we're in an official build so we don't show event bubbles from chrome event listeners in the inspector on unprivileged test pages.
 tags = "devtools"
 subsuite = "devtools"
 support-files = [
@@ -76,6 +75,7 @@ support-files = [
   "lib_react_with_addons_15.3.1_min.js",
   "lib_react_with_addons_15.4.1.js",
   "react_external_listeners.js",
+  "resources/*",
   "shadowdom_open_debugger.min.js",
   "!/devtools/client/debugger/test/mochitest/shared-head.js",
   "!/devtools/client/inspector/test/head.js",
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_03.js b/devtools/client/inspector/markup/test/browser_markup_events_03.js
index bebffec066..b0de4561e0 100644
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -17,7 +17,7 @@ const TEST_DATA = [
     expected: [
       {
         type: "click",
-        filename: TEST_URL + ":69:17",
+        filename: TEST_URL + ":70:17",
         attributes: ["Bubbling"],
         handler:
           "es6Method(foo, bar) {\n" + '  alert("obj.es6Method");\n' + "}",
@@ -29,7 +29,7 @@ const TEST_DATA = [
     expected: [
       {
         type: "click",
-        filename: TEST_URL + ":89:25",
+        filename: TEST_URL + ":91:25",
         attributes: ["Bubbling"],
         handler: "function* generator() {\n" + '  alert("generator");\n' + "}",
       },
@@ -40,7 +40,7 @@ const TEST_DATA = [
     expected: [
       {
         type: "click",
-        filename: TEST_URL + ":46:58",
+        filename: TEST_URL + ":47:58",
         attributes: ["Bubbling"],
         handler: "function*() {\n" + '  alert("anonGenerator");\n' + "}",
       },
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_07.js b/devtools/client/inspector/markup/test/browser_markup_links_07.js
index 2a86f3b1d9..830d370b03 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js
@@ -7,6 +7,7 @@
 // do follows the link.
 
 const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+const TEST_URL_BASE = URL_ROOT_SSL + "resources/doc_markup_links_base.html";
 
 add_task(async function () {
   const { inspector } = await openInspectorForURL(TEST_URL);
@@ -70,6 +71,31 @@ add_task(async function () {
   await followLinkNoNewNode(linkEl, true, inspector);
 });
 
+add_task(async function testDocumentWithBaseAttribute() {
+  const { inspector } = await openInspectorForURL(TEST_URL_BASE);
+
+  info("Select a node with a URI attribute");
+  await selectNode("img", inspector);
+
+  info("Find the link element from the markup-view");
+  const { editor } = await getContainerForSelector("img", inspector);
+  const linkEl = editor.attrElements.get("src").querySelector(".link");
+
+  info("Follow the link with middle-click and wait for the new tab to open");
+  await followLinkWaitForTab(
+    linkEl,
+    false,
+    URL_ROOT_SSL + "doc_markup_tooltip.png"
+  );
+
+  info("Follow the link with meta/ctrl-click and wait for the new tab to open");
+  await followLinkWaitForTab(
+    linkEl,
+    true,
+    URL_ROOT_SSL + "doc_markup_tooltip.png"
+  );
+});
+
 function performMouseDown(linkEl, metactrl) {
   const evt = linkEl.ownerDocument.createEvent("MouseEvents");
 
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
index 1f50ae6b88..6d02f214ae 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
@@ -16,42 +16,84 @@ const TEST_DATA = [
   {
     selector: "#aria-activedescendant",
     attributeName: "aria-activedescendant",
-    links: ["activedescendant01"],
+    links: [{ id: "activedescendant01" }],
   },
   {
     selector: "#aria-controls",
     attributeName: "aria-controls",
-    links: ["controls01", "controls02"],
+    links: [{ id: "controls01" }, { id: "controls02" }],
   },
   {
     selector: "#aria-describedby",
     attributeName: "aria-describedby",
-    links: ["describedby01", "describedby02"],
+    links: [{ id: "describedby01" }, { id: "describedby02" }],
   },
   {
     selector: "#aria-details",
     attributeName: "aria-details",
-    links: ["details01", "details02"],
+    links: [{ id: "details01" }, { id: "details02" }],
   },
   {
     selector: "#aria-errormessage",
     attributeName: "aria-errormessage",
-    links: ["errormessage01"],
+    links: [{ id: "errormessage01" }],
   },
   {
     selector: "#aria-flowto",
     attributeName: "aria-flowto",
-    links: ["flowto01", "flowto02"],
+    links: [{ id: "flowto01" }, { id: "flowto02" }],
   },
   {
     selector: "#aria-labelledby",
     attributeName: "aria-labelledby",
-    links: ["labelledby01", "labelledby02"],
+    links: [{ id: "labelledby01" }, { id: "labelledby02" }],
   },
   {
     selector: "#aria-owns",
     attributeName: "aria-owns",
-    links: ["owns01", "owns02"],
+    links: [{ id: "owns01" }, { id: "owns02" }],
+  },
+  {
+    getContainer: async inspector => {
+      info("Find and expand the test-component shadow DOM host.");
+      const hostFront = await getNodeFront("test-component", inspector);
+      const hostContainer = inspector.markup.getContainer(hostFront);
+      await expandContainer(inspector, hostContainer);
+
+      info("Expand the shadow root");
+      const shadowRootContainer = hostContainer.getChildContainers()[0];
+      await expandContainer(inspector, shadowRootContainer);
+
+      info("Expand the slot");
+      const slotContainer = shadowRootContainer.getChildContainers()[0];
+
+      is(
+        slotContainer.elt
+          .querySelector(`[data-attr="id"]`)
+          .getAttribute("data-value"),
+        "aria-describedby-shadow-dom",
+        `This is the container for button#aria-describedby-shadow-dom`
+      );
+
+      // The test expect the node to be selected
+      const updated = inspector.once("inspector-updated");
+      inspector.selection.setNodeFront(slotContainer.node, { reason: "test" });
+      await updated;
+
+      return slotContainer;
+    },
+    attributeName: "aria-describedby",
+    links: [{ id: "describedby01", valid: false }, { id: "describedbyshadow" }],
+  },
+  {
+    selector: "#empty-attributes",
+    attributeName: "aria-activedescendant",
+    links: [],
+  },
+  {
+    selector: "#empty-attributes",
+    attributeName: "aria-details",
+    links: [],
   },
 ];
 
@@ -59,11 +101,16 @@ add_task(async function () {
   const { inspector } = await openInspectorForURL(TEST_URL);
 
   for (const test of TEST_DATA) {
-    info("Selecting test node " + test.selector);
-    await selectNode(test.selector, inspector);
+    let editor;
+    if (typeof test.getContainer === "function") {
+      ({ editor } = await test.getContainer(inspector));
+    } else {
+      info("Selecting test node " + test.selector);
+      await selectNode(test.selector, inspector);
+      info("Finding the popupNode to anchor the context-menu to");
+      ({ editor } = await getContainerForSelector(test.selector, inspector));
+    }
 
-    info("Finding the popupNode to anchor the context-menu to");
-    const { editor } = await getContainerForSelector(test.selector, inspector);
     const attributeEl = editor.attrElements.get(test.attributeName);
     const linksEl = attributeEl.querySelectorAll(".link");
 
@@ -79,8 +126,6 @@ add_task(async function () {
       const linkEl = linksEl[i];
       ok(linkEl, "Found the link");
 
-      const expectedReferencedNodeId = test.links[i];
-
       info("Simulating a context click on the link");
       const allMenuItems = openContextMenuAndGetAllItems(inspector, {
         target: linkEl,
@@ -95,6 +140,7 @@ add_task(async function () {
 
       is(linkFollow.visible, true, "The follow-link item is visible");
       is(linkCopy.visible, false, "The copy-link item is not visible");
+      const { id: expectedReferencedNodeId } = test.links[i];
       const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
         "inspector.menu.selectElement.label",
         expectedReferencedNodeId
@@ -114,16 +160,32 @@ add_task(async function () {
         "Button has expected title"
       );
 
-      info("Check that clicking on button selects the associated node");
-      const onSelection = inspector.selection.once("new-node-front");
-      buttonEl.click();
-      await onSelection;
-
-      is(
-        inspector.selection.nodeFront.id,
-        expectedReferencedNodeId,
-        "The expected new node was selected"
-      );
+      if (test.links[i].valid !== false) {
+        info("Check that clicking on button selects the associated node");
+        const onSelection = inspector.selection.once("new-node-front");
+        buttonEl.click();
+        await onSelection;
+
+        is(
+          inspector.selection.nodeFront.id,
+          expectedReferencedNodeId,
+          "The expected new node was selected"
+        );
+      } else {
+        info(
+          "Check that clicking on button triggers idref-attribute-link-failed event"
+        );
+        const onIdrefAttributeLinkFailed = inspector.markup.once(
+          "idref-attribute-link-failed"
+        );
+        const onSelection = inspector.selection.once("new-node-front");
+        const onTimeout = wait(500).then(() => "TIMEOUT");
+        buttonEl.click();
+        await onIdrefAttributeLinkFailed;
+        ok(true, "Got expected idref-attribute-link-failed event");
+        const res = await Promise.race([onSelection, onTimeout]);
+        is(res, "TIMEOUT", "Clicking the button did not select a new node");
+      }
     }
   }
 });
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
index 38f7361725..563863d614 100644
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -59,7 +59,7 @@ var TEST_DATA = [
     expectedAttributes: {
       style: DATA_URL_INLINE_STYLE,
     },
-    validate: (container, inspector) => {
+    validate: container => {
       const editor = container.editor;
       const visibleAttrText = editor.attrElements
         .get("style")
@@ -75,7 +75,7 @@ var TEST_DATA = [
     expectedAttributes: {
       "data-long": LONG_ATTRIBUTE,
     },
-    validate: (container, inspector) => {
+    validate: container => {
       const editor = container.editor;
       const visibleAttrText = editor.attrElements
         .get("data-long")
@@ -91,7 +91,7 @@ var TEST_DATA = [
     expectedAttributes: {
       src: DATA_URL_ATTRIBUTE,
     },
-    validate: (container, inspector) => {
+    validate: container => {
       const editor = container.editor;
       const visibleAttrText = editor.attrElements
         .get("src")
@@ -107,17 +107,17 @@ var TEST_DATA = [
     expectedAttributes: {
       "data-long": LONG_ATTRIBUTE,
     },
-    setUp(inspector) {
+    setUp() {
       Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
     },
-    validate: (container, inspector) => {
+    validate: container => {
       const editor = container.editor;
       const visibleAttrText = editor.attrElements
         .get("data-long")
         .querySelector(".attr-value").textContent;
       is(visibleAttrText, LONG_ATTRIBUTE);
     },
-    tearDown(inspector) {
+    tearDown() {
       Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
     },
   },
@@ -127,10 +127,10 @@ var TEST_DATA = [
     expectedAttributes: {
       "data-long": LONG_ATTRIBUTE,
     },
-    setUp(inspector) {
+    setUp() {
       Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
     },
-    validate: (container, inspector) => {
+    validate: container => {
       const firstChar = LONG_ATTRIBUTE[0];
       const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
       const collapsed = firstChar + "\u2026" + lastChar;
@@ -140,7 +140,7 @@ var TEST_DATA = [
         .querySelector(".attr-value").textContent;
       is(visibleAttrText, collapsed);
     },
-    tearDown(inspector) {
+    tearDown() {
       Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
     },
   },
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_03.html b/devtools/client/inspector/markup/test/doc_markup_events_03.html
index a0c067e33e..deb3730d32 100644
--- a/devtools/client/inspector/markup/test/doc_markup_events_03.html
+++ b/devtools/client/inspector/markup/test/doc_markup_events_03.html
@@ -43,6 +43,7 @@
         generatorNode.addEventListener("click", generator);
 
         const anonGenerator = document.getElementById("anon-generator");
+        // eslint-disable-next-line require-yield
         anonGenerator.addEventListener("click", function* () {
           alert("anonGenerator");
         });
@@ -86,6 +87,7 @@
         }
       };
 
+      // eslint-disable-next-line require-yield
       function* generator() {
         alert("generator");
       }
diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
index 0e3bf0a57f..d4fc13042f 100644
--- a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
+++ b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
@@ -3,6 +3,24 @@
   <head>
     <meta charset="utf-8">
     <title>Markup-view Linkify ARIA attributes</title>
+    <script>
+      "use strict";
+      class TestComponent extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({mode: 'open'});
+
+          this.shadowRoot.innerHTML = `
+            <button
+              id="aria-describedby-shadow-dom"
+              aria-describedby="describedby01 describedbyshadow"
+            ></button>
+            <div id="describedbyshadow">#describedbyshadow</div>
+          `;
+        }
+      }
+      customElements.define('test-component', TestComponent);
+    </script>
   </head>
   <body>
     <div id="aria-activedescendant"
@@ -40,5 +58,9 @@
     <div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div>
     <div id="owns01">#owns01</div>
     <div id="owns02">#owns02</div>
+
+    <test-component></test-component>
+
+    <div id="empty-attributes" aria-activedescendant=" " aria-details="  "></div>
   </body>
 </html>
diff --git a/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
new file mode 100644
index 0000000000..55b5350ab5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Markup-view links with base attribute</title>
+    <base href="../">
+  </head>
+  <body>
+    <img src="doc_markup_tooltip.png">
+    Test relative links with base attributes.
+  </body>
+</html>
diff --git a/devtools/client/inspector/markup/views/element-editor.js b/devtools/client/inspector/markup/views/element-editor.js
index f538c2f6a9..c7e47c0a7c 100644
--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -878,7 +878,7 @@ ElementEditor.prototype = {
 
     // Create links in the attribute value, and truncate long attribute values if needed.
     for (const token of parsedLinksData) {
-      if (token.type === "string") {
+      if (token.type === "string" || token.value?.trim() === "") {
         attributeValueEl.appendChild(
           this.doc.createTextNode(this._truncateAttributeValue(token.value))
         );
diff --git a/devtools/client/inspector/node-picker.js b/devtools/client/inspector/node-picker.js
index 24b53b51e0..ca837b12f1 100644
--- a/devtools/client/inspector/node-picker.js
+++ b/devtools/client/inspector/node-picker.js
@@ -22,11 +22,9 @@ loader.lazyRequireGetter(
  *
  * @param {Commands} commands
  *        The commands object with all interfaces defined from devtools/shared/commands/
- * @param {Selection} selection
- *        The global Selection object
  */
 class NodePicker extends EventEmitter {
-  constructor(commands, selection) {
+  constructor(commands) {
     super();
     this.commands = commands;
     this.targetCommand = commands.targetCommand;
@@ -305,7 +303,7 @@ class NodePicker extends EventEmitter {
    * When the picker is canceled, stop the picker, and make sure the toolbox
    * gets the focus.
    */
-  #onCanceled = data => {
+  #onCanceled = () => {
     return this.stop({ canceled: true });
   };
 }
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
index 6bdb9dd9d3..42a0f86904 100644
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
@@ -122,11 +122,7 @@ async function checkColorPickerConstrastData({
   expectedContrastValueScore,
   expectContrastRange = false,
   expectedMinContrastValueResult,
-  expectedMinContrastValueTitle,
-  expectedMinContrastValueScore,
   expectedMaxContrastValueResult,
-  expectedMaxContrastValueTitle,
-  expectedMaxContrastValueScore,
 }) {
   info(`Checking color picker: "${label}"`);
   const cPicker = view.tooltips.getTooltip("colorPicker");
diff --git a/devtools/client/inspector/rules/test/browser_rules_container-queries.js b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
index 1a1857be05..0e866c2a7a 100644
--- a/devtools/client/inspector/rules/test/browser_rules_container-queries.js
+++ b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
@@ -264,13 +264,12 @@ async function assertQueryContainerTooltip({
   expectedHeaderText,
   expectedBodyText,
 }) {
-  const tooltipTriggerEl = getRuleViewAncestorRulesDataElementByIndex(
-    view,
-    ruleIndex
-  ).querySelector(".container-query-declaration");
+  const parent = getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex);
+  const highlighterTriggerEl = parent.querySelector(".open-inspector");
+  const tooltipTriggerEl = parent.querySelector(".container-query-declaration");
 
   // Ensure that the element can be targetted from EventUtils.
-  tooltipTriggerEl.scrollIntoView();
+  parent.scrollIntoView();
 
   const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
     getHighlighterTestHelpers(inspector);
@@ -280,17 +279,35 @@ async function assertQueryContainerTooltip({
   );
 
   const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+
+  info("synthesizing mousemove on open-inspector icon: " + tooltip.isVisible());
+  EventUtils.synthesizeMouseAtCenter(
+    highlighterTriggerEl,
+    { type: "mousemove" },
+    highlighterTriggerEl.ownerDocument.defaultView
+  );
+
+  await onNodeHighlight;
+  info("node was highlighted");
+
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
   const onTooltipReady = tooltip.once("shown");
-  info("synthesizing mousemove: " + tooltip.isVisible());
+
+  info("synthesizing mousemove on tooltip el: " + tooltip.isVisible());
   EventUtils.synthesizeMouseAtCenter(
     tooltipTriggerEl,
     { type: "mousemove" },
     tooltipTriggerEl.ownerDocument.defaultView
   );
+
   await onTooltipReady;
   info("tooltip was shown");
-  await onNodeHighlight;
-  info("node was highlighted");
+
+  await onNodeUnhighlight;
+  info("highlighter was hidden");
 
   is(
     tooltip.panel.querySelector("header").textContent,
@@ -305,9 +322,7 @@ async function assertQueryContainerTooltip({
 
   info("Hide the tooltip");
   const onHidden = tooltip.once("hidden");
-  const onNodeUnhighlight = waitForHighlighterTypeHidden(
-    inspector.highlighters.TYPES.BOXMODEL
-  );
+
   // Move the mouse elsewhere to hide the tooltip
   EventUtils.synthesizeMouse(
     tooltipTriggerEl.ownerDocument.body,
@@ -317,5 +332,4 @@ async function assertQueryContainerTooltip({
     tooltipTriggerEl.ownerDocument.defaultView
   );
   await onHidden;
-  await onNodeUnhighlight;
 }
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
index c95506de50..a10e7a6625 100644
--- a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
@@ -335,12 +335,11 @@ async function runIncrementTest(editor, view, tests) {
  * @param  {String} options.description
  * @param  {Boolean} options.ctrl Small increment key
  * @param  {Boolean} options.alt Small increment key for macosx
- * @param  {Boolean} option.deadzoneIncluded True if the provided distance
+ * @param  {Boolean} options.deadzoneIncluded True if the provided distance
  *         accounts for the deadzone. When false, the deadzone will automatically
  *         be added to the distance.
- * @param  {CSSRuleView} view
  */
-async function testIncrement(editor, options, view) {
+async function testIncrement(editor, options) {
   info("Running subtest: " + options.description);
 
   editor.valueSpan.scrollIntoView();
diff --git a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
index 0373d29321..717cc9bfb5 100644
--- a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
+++ b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
@@ -43,10 +43,20 @@ add_task(async function () {
   const { inspector } = await openInspectorForURL(TEST_URL);
   const view = selectRuleView(inspector);
 
-  await selectNode("body", inspector);
-
-  const propertyValues = view.styleDocument.querySelectorAll(
-    ".ruleview-propertyvalue"
+  let propertyValues;
+  await waitFor(
+    async () => {
+      await selectNode("body", inspector);
+      propertyValues = view.styleDocument.querySelectorAll(
+        ".ruleview-propertyvalue"
+      );
+      return propertyValues.length == 2;
+    },
+    "Timed out while waiting for body element properties",
+    // Use default interval.
+    10,
+    // reduce maxTries to 50 since `selectNode` is already async.
+    50
   );
 
   is(propertyValues.length, 2, "Ruleview has 2 propertyvalue elements");
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
index 9d440659a2..473d0037b0 100644
--- a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
@@ -64,7 +64,7 @@ async function testClickingLink(toolbox, view) {
 
 function waitForOriginalStyleSheetEditorSelection(toolbox) {
   const panel = toolbox.getCurrentPanel();
-  return new Promise((resolve, reject) => {
+  return new Promise(resolve => {
     const maybeContinue = editor => {
       // The style editor selects the first sheet at first load before
       // selecting the desired sheet.
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
index 87963f9ec5..6e8faecc33 100644
--- a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
@@ -61,7 +61,7 @@ async function testClickingLink(toolbox, view) {
 
 function waitForOriginalStyleSheetEditorSelection(toolbox) {
   const panel = toolbox.getCurrentPanel();
-  return new Promise((resolve, reject) => {
+  return new Promise(resolve => {
     const maybeContinue = editor => {
       // The style editor selects the first sheet at first load before
       // selecting the desired sheet.
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
index f170cf1591..fcd0302624 100644
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -11,6 +11,7 @@ const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
 add_task(async function () {
   await pushPref(PSEUDO_PREF, true);
   await pushPref("dom.customHighlightAPI.enabled", true);
+  await pushPref("layout.css.modern-range-pseudos.enabled", true);
 
   await addTab(TEST_URI);
   const { inspector, view } = await openRuleView();
@@ -24,6 +25,7 @@ add_task(async function () {
   await testList(inspector, view);
   await testDialogBackdrop(inspector, view);
   await testCustomHighlight(inspector, view);
+  await testSlider(inspector, view);
 });
 
 async function testTopLeft(inspector, view) {
@@ -344,6 +346,36 @@ async function testCustomHighlight(inspector, view) {
   assertGutters(view);
 }
 
+async function testSlider(inspector, view) {
+  await assertPseudoElementRulesNumbers(
+    "input[type=range].slider",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      sliderFillRulesNb: 1,
+      sliderThumbRulesNb: 1,
+      sliderTrackRulesNb: 1,
+    }
+  );
+  assertGutters(view);
+
+  info(
+    "Check that ::slider-* pseudo elements are not displayed for non-range inputs"
+  );
+  await assertPseudoElementRulesNumbers(
+    "input[type=text].slider",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      sliderFillRulesNb: 0,
+      sliderThumbRulesNb: 0,
+      sliderTrackRulesNb: 0,
+    }
+  );
+}
+
 function convertTextPropsToString(textProps) {
   return textProps
     .map(
@@ -395,6 +427,15 @@ async function assertPseudoElementRulesNumbers(
     highlightRules: elementStyle.rules.filter(rule =>
       rule.pseudoElement?.startsWith("::highlight(")
     ),
+    sliderFillRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::slider-fill"
+    ),
+    sliderThumbRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::slider-thumb"
+    ),
+    sliderTrackRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::slider-track"
+    ),
   };
 
   is(
@@ -437,6 +478,21 @@ async function assertPseudoElementRulesNumbers(
     ruleNbs.highlightRulesNb || 0,
     selector + " has the correct number of ::highlight rules"
   );
+  is(
+    rules.sliderFillRules.length,
+    ruleNbs.sliderFillRulesNb || 0,
+    selector + " has the correct number of ::slider-fill rules"
+  );
+  is(
+    rules.sliderThumbRules.length,
+    ruleNbs.sliderThumbRulesNb || 0,
+    selector + " has the correct number of ::slider-thumb rules"
+  );
+  is(
+    rules.sliderTrackRules.length,
+    ruleNbs.sliderTrackRulesNb || 0,
+    selector + " has the correct number of ::slider-track rules"
+  );
 
   // If we do have pseudo element rules displayed, ensure we don't mark their selectors
   // as matched or unmatched
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html
index a6251c613c..8e077e220b 100644
--- a/devtools/client/inspector/rules/test/doc_pseudoelement.html
+++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html
@@ -133,7 +133,15 @@ dialog::backdrop {
     }
 }
 
-
+input::slider-fill {
+    background: tomato;
+}
+input::slider-thumb {
+    background: gold;
+}
+input::slider-track {
+    background: seagreen;
+}
     </style>
   </head>
   <body>
@@ -161,6 +169,9 @@ dialog::backdrop {
 
     <dialog>In dialog</dialog>
 
+    <label>Range <input type="range" class="slider"></label>
+    <label>Not range <input type="text" class="slider"></label>
+
     <section class="highlights-container">
         Firefox Developer Tools is a set of web developer tools built into Firefox.
         You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js
index 93e24f0946..a5717976d0 100644
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -410,7 +410,7 @@ RuleEditor.prototype = {
         this._ruleViewIsEditing = this.ruleView.isEditing;
       });
 
-      code.addEventListener("click", event => {
+      code.addEventListener("click", () => {
         const selection = this.doc.defaultView.getSelection();
         if (selection.isCollapsed && !this._ruleViewIsEditing) {
           this.newProperty();
@@ -905,10 +905,8 @@ RuleEditor.prototype = {
    *        True if the change should be applied.
    * @param {Number} direction
    *        The move focus direction number.
-   * @param {Number} key
-   *        The event keyCode that trigger the editor to close
    */
-  async _onSelectorDone(value, commit, direction, key) {
+  async _onSelectorDone(value, commit, direction) {
     if (
       !commit ||
       this.isEditing ||
diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
index 8546417cfb..edcdb856a8 100644
--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -385,7 +385,7 @@ TextPropertyEditor.prototype = {
         }
       });
 
-      this.valueSpan.addEventListener("mouseup", event => {
+      this.valueSpan.addEventListener("mouseup", () => {
         // if we have dragged, we will handle the pending click in _draggingOnMouseUp instead
         if (this._hasDragged) {
           return;
@@ -1146,10 +1146,8 @@ TextPropertyEditor.prototype = {
    *        True if the change should be applied.
    * @param {Number} direction
    *        The move focus direction number.
-   * @param {Number} key
-   *        The event keyCode that trigger the editor to close
    */
-  _onNameDone(value, commit, direction, key) {
+  _onNameDone(value, commit, direction) {
     const isNameUnchanged =
       (!commit && !this.ruleEditor.isEditing) || this.committed.name === value;
     if (this.prop.value && isNameUnchanged) {
@@ -1233,10 +1231,8 @@ TextPropertyEditor.prototype = {
    *        True if the change should be applied.
    * @param {Number} direction
    *        The move focus direction number.
-   * @param {Number} key
-   *        The event keyCode that trigger the editor to close
    */
-  _onValueDone(value = "", commit, direction, key) {
+  _onValueDone(value = "", commit, direction) {
     const parsedProperties = this._getValueAndExtraProperties(value);
     const val = parseSingleValue(
       this.cssProperties.isKnown,
diff --git a/devtools/client/inspector/shared/highlighters-overlay.js b/devtools/client/inspector/shared/highlighters-overlay.js
index 6082b8b842..7f44f8b555 100644
--- a/devtools/client/inspector/shared/highlighters-overlay.js
+++ b/devtools/client/inspector/shared/highlighters-overlay.js
@@ -793,13 +793,8 @@ class HighlightersOverlay {
 
   /**
    * Called after the shapes highlighter was hidden.
-   *
-   * @param  {Object} data
-   *         Data associated with the event.
-   *         Contains:
-   *         - {NodeFront} node: The NodeFront of the element that was highlighted.
    */
-  onShapesHighlighterHidden(data) {
+  onShapesHighlighterHidden() {
     this.emit(
       "shapes-highlighter-hidden",
       this.shapesHighlighterShown,
@@ -1178,7 +1173,7 @@ class HighlightersOverlay {
   async restoreParentGridHighlighter(node) {
     // Find the highlighter map entry for the subgrid whose parent grid is the given node.
     const entry = Array.from(this.gridHighlighters.entries()).find(
-      ([key, value]) => {
+      ([, value]) => {
         return value?.parentGridNode === node;
       }
     );
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
index 188b99a7cb..e90bd87ad0 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-autohide-config_03.js
@@ -60,7 +60,7 @@ add_task(async function () {
   somehow not overwritten and fires another "highlighter-hidden" event.
    */
   let wasEmitted = false;
-  const waitForExtraEvent = new Promise((resolve, reject) => {
+  const waitForExtraEvent = new Promise(resolve => {
     const _handler = () => {
       wasEmitted = true;
       resolve();
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
index 0c05aa219f..5fa5567e3f 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-events.js
@@ -60,10 +60,10 @@ const MOVE_EVENTS_DATA = [
   // Mouse initialization for right snapping
   {
     type: "mouse",
-    x: (width, height) => width - 5,
+    x: width => width - 5,
     y: 0,
     expected: {
-      x: (width, height) => width - 5,
+      x: width => width - 5,
       y: 0,
     },
   },
@@ -73,7 +73,7 @@ const MOVE_EVENTS_DATA = [
     key: "VK_RIGHT",
     shift: true,
     expected: {
-      x: (width, height) => width,
+      x: width => width,
       y: 0,
     },
     desc: "Right snapping to x=max window width available",
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
index d9413e5d39..37d3070c04 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-eyedropper-label.js
@@ -65,14 +65,14 @@ const TEST_DATA = [
   },
   {
     desc: "Move the mouse to the top left",
-    getCoordinates: (width, height) => {
+    getCoordinates: () => {
       return { x: 0, y: 0 };
     },
     expectedPositions: { top: false, right: true, left: false },
   },
   {
     desc: "Move the mouse to the top right",
-    getCoordinates: (width, height) => {
+    getCoordinates: width => {
       return { x: width, y: 0 };
     },
     expectedPositions: { top: false, right: false, left: true },
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
index c50dee30b0..bfdfd12cd8 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
@@ -58,7 +58,6 @@ async function hasArrowsAndLabelsAndHandlers({ getElementAttribute }) {
 
 async function isHiddenForNonPositionedNonSizedElement({
   show,
-  hide,
   isElementHidden,
 }) {
   info("Asking to show the highlighter on an inline, non p  ositioned element");
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
index 906284ba86..dbe70d83ae 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_03.js
@@ -16,10 +16,10 @@ const WIDTH = 160;
 const HEIGHT = 100;
 
 const HANDLER_MAP = {
-  top(areaWidth, areaHeight) {
+  top(areaWidth) {
     return { x: Math.round(areaWidth / 2), y: 0 };
   },
-  topright(areaWidth, areaHeight) {
+  topright(areaWidth) {
     return { x: areaWidth, y: 0 };
   },
   right(areaWidth, areaHeight) {
@@ -37,7 +37,7 @@ const HANDLER_MAP = {
   left(areaWidth, areaHeight) {
     return { x: 0, y: Math.round(areaHeight / 2) };
   },
-  topleft(areaWidth, areaHeight) {
+  topleft() {
     return { x: 0, y: 0 };
   },
 };
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
index d9dcd5d89f..8493981dd3 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-measure_04.js
@@ -18,10 +18,10 @@ const X_OFFSET = 15;
 const Y_OFFSET = 10;
 
 const HANDLER_MAP = {
-  top(areaWidth, areaHeight) {
+  top(areaWidth) {
     return { x: Math.round(areaWidth / 2), y: 0 };
   },
-  topright(areaWidth, areaHeight) {
+  topright(areaWidth) {
     return { x: areaWidth, y: 0 };
   },
   right(areaWidth, areaHeight) {
@@ -39,7 +39,7 @@ const HANDLER_MAP = {
   left(areaWidth, areaHeight) {
     return { x: 0, y: Math.round(areaHeight / 2) };
   },
-  topleft(areaWidth, areaHeight) {
+  topleft() {
     return { x: 0, y: 0 };
   },
 };
diff --git a/devtools/client/inspector/test/browser_inspector_sidebarstate.js b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
index 396e78c91f..6ccc6df6f4 100644
--- a/devtools/client/inspector/test/browser_inspector_sidebarstate.js
+++ b/devtools/client/inspector/test/browser_inspector_sidebarstate.js
@@ -122,8 +122,8 @@ function checkTelemetryResults() {
     const expected = TELEMETRY_DATA[i];
 
     // ignore timestamp
-    ok(timestamp > 0, "timestamp is greater than 0");
-    ok(extra.time_open > 0, "time_open is greater than 0");
+    Assert.greater(timestamp, 0, "timestamp is greater than 0");
+    Assert.greater(Number(extra.time_open), 0, "time_open is greater than 0");
     is(category, expected.category, "category is correct");
     is(method, expected.method, "method is correct");
     is(object, expected.object, "object is correct");
diff --git a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
index 171f4f8e7f..2bcd2e9873 100644
--- a/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
+++ b/devtools/client/inspector/test/browser_inspector_switch-to-inspector-on-pick.js
@@ -104,7 +104,7 @@ function checkResults() {
     is(method, expected.method, "method is correct");
     is(object, expected.object, "object is correct");
     is(value, null, "value is correct");
-    ok(extra.width > 0, "width is greater than 0");
+    Assert.greater(Number(extra.width), 0, "width is greater than 0");
 
     checkExtra("host", extra, expected);
     checkExtra("start_state", extra, expected);
diff --git a/devtools/client/inspector/toolsidebar.js b/devtools/client/inspector/toolsidebar.js
index cff5eb96fa..422ae76b43 100644
--- a/devtools/client/inspector/toolsidebar.js
+++ b/devtools/client/inspector/toolsidebar.js
@@ -151,10 +151,8 @@ ToolSidebar.prototype = {
    * @param {String} tabId The ID of the tab that was used to register it, or
    * the tab id attribute value if the tab existed before the sidebar
    * got created.
-   * @param {String} tabPanelId Optional. If provided, this ID will be used
-   * instead of the tabId to retrieve and remove the corresponding <tabpanel>
    */
-  removeTab(tabId, tabPanelId) {
+  removeTab(tabId) {
     this._tabbar.removeTab(tabId);
 
     this.emit("tab-unregistered", tabId);