Merging upstream version 125.0.1.

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

10 files changed, 117 insertions, 37 deletions

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,