Merging upstream version 126.0.

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

15 files changed, 131 insertions, 100 deletions

diff --git a/devtools/client/inspector/changes/test/browser_changes_nested_rules.js b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js
index 789d88fdda..d6da1af72d 100644
--- a/devtools/client/inspector/changes/test/browser_changes_nested_rules.js
+++ b/devtools/client/inspector/changes/test/browser_changes_nested_rules.js
@@ -12,7 +12,7 @@
 // --- @container myContainer (width > 10px) {
 // ----- div {
 // ------- & > span { … }
-// ------- .mySpan {
+// ------- & .mySpan {
 // --------- &:not(:focus) {
 
 const spanNotFocusedRule = `&:not(:focus) {
@@ -94,7 +94,7 @@ const EXPECTED_AFTER_SPAN_PROP_CHANGES = EXPECTED_AFTER_DIV_PROP_CHANGE.map(
   })
 ).concat([
   {
-    text: ".mySpan {",
+    text: "& .mySpan {",
     copyRuleClipboard:
       applyModificationAfterSpanPropertiesChange(spanClassRule),
   },
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
index 0069d644c7..bea344e5f5 100644
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
@@ -88,12 +88,12 @@ add_task(async function () {
   cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
   cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
 
-  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
-  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
-  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
-  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
-  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
-  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+  is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled");
 
   onContextMenuClose = toolbox.once("menu-close");
   searchContextMenu.hidePopup();
diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml
index 75d0a792c3..4cdbea4bee 100644
--- a/devtools/client/inspector/index.xhtml
+++ b/devtools/client/inspector/index.xhtml
@@ -66,8 +66,8 @@
         var { require, loader } = ChromeUtils.importESModule(
           "resource://devtools/shared/loader/Loader.sys.mjs"
         );
-        var { BrowserLoader } = ChromeUtils.import(
-          "resource://devtools/shared/loader/browser-loader.js"
+        var { BrowserLoader } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/browser-loader.sys.mjs"
         );
       }
     </script>
diff --git a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js
index 4d8f4ff6a6..21dcf844b7 100644
--- a/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js
+++ b/devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js
@@ -23,12 +23,12 @@ add_task(async function () {
   info("Select the main content node");
   await selectNode(".main-content", inspector);
 
-  let inContentPageBackgroundColor = await getComputedStyleProperty(
+  let pageBackgroundColor = await getComputedStyleProperty(
     ":root",
     null,
-    "--in-content-page-background"
+    "background-color"
   );
-  inContentPageBackgroundColor = inContentPageBackgroundColor.trim();
+  pageBackgroundColor = pageBackgroundColor.trim();
 
   info("Take a screenshot of the element and verify it looks as expected");
   const image = await takeNodeScreenshot(inspector);
@@ -38,7 +38,7 @@ add_task(async function () {
     image,
     x: 0,
     y: 0,
-    expectedColor: hexToCSS(inContentPageBackgroundColor),
+    expectedColor: hexToCSS(pageBackgroundColor),
     label: "The screenshot was taken",
   });
 
diff --git a/devtools/client/inspector/rules/models/element-style.js b/devtools/client/inspector/rules/models/element-style.js
index e280a5e4a0..368a8ae953 100644
--- a/devtools/client/inspector/rules/models/element-style.js
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -57,7 +57,7 @@ class ElementStyle {
     this.ruleView = ruleView;
     this.store = store || {};
     this.pageStyle = pageStyle;
-    this.pseudoElements = [];
+    this.pseudoElementTypes = new Set();
     this.showUserAgentStyles = showUserAgentStyles;
     this.rules = [];
     this.cssProperties = this.ruleView.cssProperties;
@@ -90,7 +90,7 @@ class ElementStyle {
     }
 
     this.destroyed = true;
-    this.pseudoElements = [];
+    this.pseudoElementTypes.clear();
 
     for (const rule of this.rules) {
       if (rule.editor) {
@@ -141,9 +141,12 @@ class ElementStyle {
         }
 
         // Store a list of all pseudo-element types found in the matching rules.
-        this.pseudoElements = this.rules
-          .filter(r => r.pseudoElement)
-          .map(r => r.pseudoElement);
+        this.pseudoElementTypes = new Set();
+        for (const rule of this.rules) {
+          if (rule.pseudoElement) {
+            this.pseudoElementTypes.add(rule.pseudoElement);
+          }
+        }
 
         // Mark overridden computed styles.
         this.onRuleUpdated();
@@ -275,7 +278,7 @@ class ElementStyle {
     this.updateDeclarations();
 
     // Update declarations for matching rules for pseudo-elements.
-    for (const pseudo of this.pseudoElements) {
+    for (const pseudo of this.pseudoElementTypes) {
       this.updateDeclarations(pseudo);
     }
   }
@@ -299,11 +302,6 @@ class ElementStyle {
   updateDeclarations(pseudo = "") {
     // Gather all text properties applicable to the selected element or pseudo-element.
     const textProps = this._getDeclarations(pseudo);
-    // Gather all the computed properties applied by those text properties.
-    let computedProps = [];
-    for (const textProp of textProps) {
-      computedProps = computedProps.concat(textProp.computed);
-    }
 
     // CSS Variables inherits from the normal element in case of pseudo element.
     const variables = new Map(pseudo ? this.variablesMap.get("") : null);
@@ -332,58 +330,62 @@ class ElementStyle {
     // _overriddenDirty will be set on each prop, indicating whether its
     // dirty status changed during this pass.
     const taken = new Map();
-    for (const computedProp of computedProps) {
-      const earlier = taken.get(computedProp.name);
-
-      // Prevent -webkit-gradient from being selected after unchecking
-      // linear-gradient in this case:
-      //  -moz-linear-gradient: ...;
-      //  -webkit-linear-gradient: ...;
-      //  linear-gradient: ...;
-      if (!computedProp.textProp.isValid()) {
-        computedProp.overridden = true;
-        continue;
-      }
-
-      let overridden;
-      if (
-        earlier &&
-        computedProp.priority === "important" &&
-        (earlier.priority !== "important" ||
-          // Even if the earlier property was important, if the current rule is in a layer
-          // it will take precedence, unless the earlier property rule was in the same layer.
-          (computedProp.textProp.rule?.isInLayer() &&
-            computedProp.textProp.rule.isInDifferentLayer(
-              earlier.textProp.rule
-            ))) &&
-        // For !important only consider rules applying to the same parent node.
-        computedProp.textProp.rule.inherited == earlier.textProp.rule.inherited
-      ) {
-        // New property is higher priority. Mark the earlier property
-        // overridden (which will reverse its dirty state).
-        earlier._overriddenDirty = !earlier._overriddenDirty;
-        earlier.overridden = true;
-        overridden = false;
-      } else {
-        overridden = !!earlier;
-      }
-
-      computedProp._overriddenDirty = !!computedProp.overridden !== overridden;
-      computedProp.overridden = overridden;
-
-      if (!computedProp.overridden && computedProp.textProp.enabled) {
-        taken.set(computedProp.name, computedProp);
+    for (const textProp of textProps) {
+      for (const computedProp of textProp.computed) {
+        const earlier = taken.get(computedProp.name);
+
+        // Prevent -webkit-gradient from being selected after unchecking
+        // linear-gradient in this case:
+        //  -moz-linear-gradient: ...;
+        //  -webkit-linear-gradient: ...;
+        //  linear-gradient: ...;
+        if (!computedProp.textProp.isValid()) {
+          computedProp.overridden = true;
+          continue;
+        }
 
-        // At this point, we can get CSS variable from "inherited" rules.
-        // When this is a registered custom property with `inherits` set to false,
-        // the text prop is "invisible" (i.e. not shown in the rule view).
-        // In such case, we don't want to get the value in the Map, and we'll rather
-        // get the initial value from the registered property definition.
+        let overridden;
         if (
-          isCssVariable(computedProp.name) &&
-          !computedProp.textProp.invisible
+          earlier &&
+          computedProp.priority === "important" &&
+          (earlier.priority !== "important" ||
+            // Even if the earlier property was important, if the current rule is in a layer
+            // it will take precedence, unless the earlier property rule was in the same layer.
+            (computedProp.textProp.rule?.isInLayer() &&
+              computedProp.textProp.rule.isInDifferentLayer(
+                earlier.textProp.rule
+              ))) &&
+          // For !important only consider rules applying to the same parent node.
+          computedProp.textProp.rule.inherited ==
+            earlier.textProp.rule.inherited
         ) {
-          variables.set(computedProp.name, computedProp.value);
+          // New property is higher priority. Mark the earlier property
+          // overridden (which will reverse its dirty state).
+          earlier._overriddenDirty = !earlier._overriddenDirty;
+          earlier.overridden = true;
+          overridden = false;
+        } else {
+          overridden = !!earlier;
+        }
+
+        computedProp._overriddenDirty =
+          !!computedProp.overridden !== overridden;
+        computedProp.overridden = overridden;
+
+        if (!computedProp.overridden && computedProp.textProp.enabled) {
+          taken.set(computedProp.name, computedProp);
+
+          // At this point, we can get CSS variable from "inherited" rules.
+          // When this is a registered custom property with `inherits` set to false,
+          // the text prop is "invisible" (i.e. not shown in the rule view).
+          // In such case, we don't want to get the value in the Map, and we'll rather
+          // get the initial value from the registered property definition.
+          if (
+            isCssVariable(computedProp.name) &&
+            !computedProp.textProp.invisible
+          ) {
+            variables.set(computedProp.name, computedProp.value);
+          }
         }
       }
     }
diff --git a/devtools/client/inspector/rules/test/browser_rules_content_01.js b/devtools/client/inspector/rules/test/browser_rules_content_01.js
index b92ec47db0..1985f07f5f 100644
--- a/devtools/client/inspector/rules/test/browser_rules_content_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_content_01.js
@@ -103,7 +103,7 @@ add_task(async function () {
       matches: true,
     },
     {
-      selector: ".unmatched",
+      selector: "& .unmatched",
       matches: false,
     },
   ]);
diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js
index 925f36a0e6..0dc068232b 100644
--- a/devtools/client/inspector/rules/test/browser_rules_nested_rules.js
+++ b/devtools/client/inspector/rules/test/browser_rules_nested_rules.js
@@ -93,7 +93,7 @@ add_task(async function () {
   checkRuleViewContent(view, [
     { selector: "element", ancestorRulesData: null, declarations: [] },
     {
-      selector: `.foo`,
+      selector: `& .foo`,
       // prettier-ignore
       ancestorRulesData: [
         `body {`,
@@ -108,7 +108,7 @@ add_task(async function () {
   checkRuleViewContent(view, [
     { selector: "element", ancestorRulesData: null, declarations: [] },
     {
-      selector: `#bar`,
+      selector: `& #bar`,
       // prettier-ignore
       ancestorRulesData: [
         `body {`,
@@ -138,7 +138,7 @@ add_task(async function () {
   checkRuleViewContent(view, [
     { selector: "element", ancestorRulesData: null, declarations: [] },
     {
-      selector: `[href]`,
+      selector: `& [href]`,
       ancestorRulesData: [
         `body {`,
         `  @media screen {`,
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
index 881b5274ee..009c67cd70 100644
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
@@ -86,12 +86,12 @@ add_task(async function () {
   cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
   cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
 
-  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
-  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
-  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
-  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
-  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
-  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+  is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled");
 
   const onContextMenuHidden = toolbox.once("menu-close");
   searchContextMenu.hidePopup();
diff --git a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
index f9d245828e..c6d4f29a4d 100644
--- a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
@@ -209,9 +209,9 @@ async function checkCopyNestedRule(view) {
 
   const copyEvent = new win.Event("copy", { bubbles: true });
   const expectedNested = `html {
-  body {
+  & body {
     @container (1px < width) {
-      #nested {
+      & #nested {
         background: tomato;
         color: gold;
       }
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js
index 4a5e8bcd0c..ecf41fb920 100644
--- a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js
@@ -88,8 +88,8 @@ add_task(async function () {
   );
   ok(highlighterData.isShown, "The selector highlighter was shown");
 
-  info(`Clicking on ".title" selector icon`);
-  highlighterData = await clickSelectorIcon(view, ".title");
+  info(`Clicking on "& .title" selector icon`);
+  highlighterData = await clickSelectorIcon(view, "& .title");
   is(
     highlighterData.nodeFront.nodeName.toLowerCase(),
     "h1",
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_02.js b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
index 4100859fb9..ee37a7b07a 100644
--- a/devtools/client/inspector/rules/test/browser_rules_variables_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -119,9 +119,14 @@ async function testBorderShorthandAndInheritance(inspector, view) {
   // var(x) is the next sibling of the parent of M
   const setVarXParent = setVarMParent.parentNode.nextElementSibling;
 
-  // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc.
-  const setVarRParent = setVarXParent.nextElementSibling;
+  // var(x) next sibling is the element that wraps the color
+  const colorParent =
+    setVarXParent.nextElementSibling.querySelector(".ruleview-color");
+  // var(r) is the first childElement of the ruleview-color element
+  const setVarRParent = colorParent.firstElementChild;
+  // var(g) is the next sibling of var(r),
   const setVarGParent = setVarRParent.nextElementSibling;
+  // and var(b) is the next sibling of var(g),
   const setVarBParent = setVarGParent.nextElementSibling;
 
   const setVarM = getVarFromParent(setVarMParent);
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
index 004d7e945f..bb187db4f5 100644
--- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_offset-path.js
@@ -38,7 +38,6 @@ const TEST_URL = `data:text/html,<meta charset=utf8>${encodeURIComponent(`
 const HIGHLIGHTER_TYPE = "ShapesHighlighter";
 
 add_task(async function () {
-  await pushPref("layout.css.motion-path-basic-shapes.enabled", true);
   const env = await openInspectorForURL(TEST_URL);
   const { highlighterTestFront, inspector } = env;
   const view = selectRuleView(inspector);
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js
index 6798c85394..11e67ff4cd 100644
--- a/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js
+++ b/devtools/client/inspector/test/browser_inspector_inspect_loading_document.js
@@ -131,6 +131,10 @@ add_task(async function testSlowLoadingDocument() {
   // Navigate to about:blank to clean the state.
   await navigateTo("about:blank");
 
+  const markuploaded = inspector.once("markuploaded");
+  const onNewRoot = inspector.once("new-root");
+  const onUpdated = inspector.once("inspector-updated");
+
   await navigateTo(TEST_URL_2, { waitForLoad: false });
   info("Wait for the #start div to be available as a markupview container");
   await TestUtils.waitForCondition(async () => {
@@ -165,4 +169,11 @@ add_task(async function testSlowLoadingDocument() {
     "body",
     inspector
   );
+
+  info(
+    "Waiting for inspector to update after having released the document load"
+  );
+  await markuploaded;
+  await onNewRoot;
+  await onUpdated;
 });
diff --git a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
index ac6ae35ad1..bd655a9a96 100644
--- a/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
+++ b/devtools/client/inspector/test/browser_inspector_menu-04-use-in-console.js
@@ -11,9 +11,17 @@ add_task(async function () {
   // requests to evaluateJSAsync.
   await pushPref("devtools.webconsole.input.eagerEvaluation", false);
 
-  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+  info("Testing 'Use in Console' menu item with enabled split console.");
+  await pushPref("devtools.toolbox.splitconsole.enabled", true);
+  await testConsoleFunctionality({ isSplitConsoleEnabled: true });
+
+  info("Testing 'Use in Console' menu item with disabled split console.");
+  await pushPref("devtools.toolbox.splitconsole.enabled", false);
+  await testConsoleFunctionality({ isSplitConsoleEnabled: false });
+});
 
-  info("Testing 'Use in Console' menu item.");
+async function testConsoleFunctionality({ isSplitConsoleEnabled }) {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
 
   await selectNode("#console-var", inspector);
   const container = await getContainerForSelector("#console-var", inspector);
@@ -27,6 +35,12 @@ add_task(async function () {
 
   const hud = toolbox.getPanel("webconsole").hud;
 
+  if (isSplitConsoleEnabled) {
+    ok(toolbox.splitConsole, "The console is split console.");
+  } else {
+    ok(!toolbox.splitConsole, "The console is Web Console tab.");
+  }
+
   const getConsoleResults = () => hud.ui.outputNode.querySelectorAll(".result");
 
   is(hud.getInputValue(), "temp0", "first console variable is named temp0");
@@ -54,4 +68,4 @@ add_task(async function () {
   );
 
   hud.ui.wrapper.dispatchClearHistory();
-});
+}
diff --git a/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js
index dad2ffa0b8..e8392b1425 100644
--- a/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_search-filter_context-menu.js
@@ -96,12 +96,12 @@ add_task(async function () {
   cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
   cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
 
-  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
-  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
-  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
-  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
-  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
-  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+  is(cmdUndo.getAttribute("disabled"), null, "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), null, "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), null, "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), null, "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), null, "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), null, "cmdPaste is enabled");
 
   const onContextMenuHidden = toolbox.once("menu-close");
   searchContextMenu.hidePopup();