Bug 1846251 - Make CSSStyleRule inherit from CSSGroupingRule. r=peterv,devtools-reviewers

As per w3c/csswg-drafts#8940.

I didn't do this in bug 1837638 because that's what the spec said at the
time, that's what other browsers did, and specially because if we did
this we had no way of runtime-disable nesting during development or if
things went south.

This means that we can't keep the nesting pref in 118, but that seems
fine (it's already enabled everywhere in 117).

Differential Revision: https://phabricator.services.mozilla.com/D184930

Author: emilio

devtools/client/inspector/changes/test/browser_changes_nested_rules.js

@@ -110,8 +110,6 @@ const EXPECTED_AFTER_SPAN_PROP_CHANGES = EXPECTED_AFTER_DIV_PROP_CHANGE.map(
 ]);
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
-
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const changesView = selectChangesView(inspector);

devtools/client/inspector/rules/test/browser_rules_content_01.js

@@ -35,7 +35,6 @@ const TEST_URI = `
 `;
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
 

devtools/client/inspector/rules/test/browser_rules_edit-property-nested-rules.js

@@ -46,7 +46,6 @@ add_task(async function test_constructed_sheet() {
 });
 
 async function runTest(uri) {
-  await pushPref("layout.css.nesting.enabled", true);
   await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
   const { inspector, view } = await openRuleView();
 

devtools/client/inspector/rules/test/browser_rules_edit-selector-nested-rules.js

@@ -39,7 +39,6 @@ add_task(async function test_constructed_sheet() {
 });
 
 async function runTest(uri) {
-  await pushPref("layout.css.nesting.enabled", true);
   await addTab(`data:text/html,<meta charset=utf8>${encodeURIComponent(uri)}`);
   const { inspector, view } = await openRuleView();
 

devtools/client/inspector/rules/test/browser_rules_nested_rules.js

@@ -47,8 +47,6 @@ const TEST_URI = `
 `;
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
-
   await addTab(
     "https://example.com/document-builder.sjs?html=" +
       encodeURIComponent(TEST_URI)

devtools/client/inspector/rules/test/browser_rules_selector-highlighter-nested-rules.js

@@ -38,7 +38,6 @@ const TEST_URI = `
   </main>`;
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
 

devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js

@@ -39,7 +39,6 @@ waitForExplicitFinish();
 
 add_task(async function () {
   await pushPref("layout.css.container-queries.enabled", true);
-  await pushPref("layout.css.nesting.enabled", true);
 
   const { ui } = await openStyleEditorForURL(TESTCASE_URI);
 

devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js

@@ -16,7 +16,6 @@ const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
 const responsiveModeToggleClass = ".media-responsive-mode-toggle";
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
   const { ui } = await openStyleEditorForURL(TESTCASE_URI);
 
   const editor = ui.editors[1];

devtools/client/styleeditor/test/browser_styleeditor_sidebars.js

@@ -18,7 +18,6 @@ const MEDIA_WIDTH = 250;
 
 // Test that sidebar in the styleeditor can be resized.
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
   await pushPref(PREF_SHOW_AT_RULES_SIDEBAR, true);
   await pushPref(PREF_NAV_WIDTH, NAV_WIDTH);
   await pushPref(PREF_SIDEBAR_WIDTH, MEDIA_WIDTH);

devtools/client/webconsole/test/browser/browser_webconsole_css_error_impacted_elements.js

@@ -43,7 +43,6 @@ const TEST_URI = `data:text/html,<!DOCTYPE html><meta charset=utf8>
 add_task(async function () {
   // Enable CSS Warnings
   await pushPref("devtools.webconsole.filter.css", true);
-  await pushPref("layout.css.nesting.enabled", true);
 
   const hud = await openNewTabAndConsole(TEST_URI);
   const toolbox = hud.toolbox;

devtools/shared/commands/resource/tests/browser_resources_css_messages.js

@@ -25,7 +25,6 @@ httpServer.registerPathHandler(`/test_css_messages.html`, (req, res) => {
 const TEST_URI = `http://localhost:${httpServer.identity.primaryPort}/test_css_messages.html`;
 
 add_task(async function () {
-  await pushPref("layout.css.nesting.enabled", true);
   await testWatchingCssMessages();
   await testWatchingCachedCssMessages();
 });

dom/webidl/CSSStyleRule.webidl

@@ -9,17 +9,10 @@
 
 // https://drafts.csswg.org/cssom/#the-cssstylerule-interface
 [Exposed=Window]
-interface CSSStyleRule : CSSRule {
+interface CSSStyleRule : CSSGroupingRule {
   attribute UTF8String selectorText;
   [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
 
-  // https://drafts.csswg.org/css-nesting/#cssom-style
-  // FIXME: Ideally CSSStyleRule should inherit from CSSGroupingRule instead,
-  // see https://github.com/w3c/csswg-drafts/issues/8940
-  [Pref="layout.css.nesting.enabled", SameObject] readonly attribute CSSRuleList cssRules;
-  [Pref="layout.css.nesting.enabled", Throws] unsigned long insertRule(UTF8String rule, optional unsigned long index = 0);
-  [Pref="layout.css.nesting.enabled", Throws] undefined deleteRule(unsigned long index);
-
   [ChromeOnly] readonly attribute unsigned long selectorCount;
   [ChromeOnly] UTF8String selectorTextAt(unsigned long index, optional boolean desugared = false);
   [ChromeOnly] unsigned long long selectorSpecificityAt(unsigned long index, optional boolean desugared = false);

layout/inspector/tests/mochitest.ini

@@ -1,6 +1,5 @@
 [DEFAULT]
 prefs =
-  layout.css.nesting.enabled=true
   layout.css.basic-shape-rect.enabled=true
   layout.css.basic-shape-xywh.enabled=true
 support-files =

modules/libpref/init/StaticPrefList.yaml

@@ -8176,13 +8176,6 @@
   mirror: always
   rust: true
 
-# Whether CSS nesting is enabled.
-- name: layout.css.nesting.enabled
-  type: RelaxedAtomicBool
-  value: true
-  mirror: always
-  rust: true
-
 # Should we look for counter ancestor scopes first?
 - name: layout.css.counter-ancestor-scope.enabled
   type: bool

servo/components/style/gecko/selector_parser.rs

@@ -307,8 +307,9 @@ impl<'a, 'i> ::selectors::Parser<'i> for SelectorParser<'a> {
     type Impl = SelectorImpl;
     type Error = StyleParseErrorKind<'i>;
 
+    #[inline]
     fn parse_parent_selector(&self) -> bool {
-        static_prefs::pref!("layout.css.nesting.enabled")
+        true
     }
 
     #[inline]

servo/components/style/stylesheets/rule_parser.rs

@@ -501,15 +501,6 @@ impl NestedParseResult {
 }
 
 impl<'a, 'i> NestedRuleParser<'a, 'i> {
-    /// When nesting is disabled, we prevent parsing at rules and qualified rules inside style
-    /// rules.
-    fn allow_at_and_qualified_rules(&self) -> bool {
-        if !self.in_style_rule() {
-            return true;
-        }
-        static_prefs::pref!("layout.css.nesting.enabled")
-    }
-
     #[inline]
     fn in_style_rule(&self) -> bool {
         self.context.rule_types.contains(CssRuleType::Style)
@@ -622,9 +613,6 @@ impl<'a, 'i> AtRuleParser<'i> for NestedRuleParser<'a, 'i> {
         name: CowRcStr<'i>,
         input: &mut Parser<'i, 't>,
     ) -> Result<Self::Prelude, ParseError<'i>> {
-        if self.in_style_rule() && !static_prefs::pref!("layout.css.nesting.enabled") {
-            return Err(input.new_error(BasicParseErrorKind::AtRuleInvalid(name)));
-        }
         Ok(match_ignore_ascii_case! { &*name,
             "media" => {
                 let media_queries = MediaList::parse(&self.context, input);
@@ -934,9 +922,7 @@ impl<'a, 'i> DeclarationParser<'i> for NestedRuleParser<'a, 'i> {
 }
 
 impl<'a, 'i> RuleBodyItemParser<'i, (), StyleParseErrorKind<'i>> for NestedRuleParser<'a, 'i> {
-    fn parse_qualified(&self) -> bool {
-        self.allow_at_and_qualified_rules()
-    }
+    fn parse_qualified(&self) -> bool { true }
 
     /// If nesting is disabled, we can't get there for a non-style-rule. If it's enabled, we parse
     /// raw declarations there.

testing/web-platform/meta/css/CSS2/syntax/malformed-decl-block-001.xht.ini

@@ -8,6 +8,10 @@
 <style id="ss"></style>
 
 <script>
+  test(() => {
+    assert_equals(CSSStyleRule.__proto__, CSSGroupingRule);
+  }, "CSSStyleRule is a CSSGroupingRule");
+
   test(() => {
     let [ss] = document.styleSheets;
     assert_equals(ss.cssRules.length, 0);