1827886 - Display support conditions for @import CSS rules

Status: RESOLVED FIXED

(DevTools :: Inspector, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

As we're doing it for the media conditions (see Bug 1827801), we should also display support() bit in the @import item we display on top of the rule view, when this lands (Bug 1427715)

Note that at the moment there's no properties in the CSSImportRule that holds the support information (see https://github.com/w3c/csswg-drafts/issues/8710)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

With the patch from Bug 1829590, the data can be displayed with something like:

diff --git a/devtools/server/actors/style-rule.js b/devtools/server/actors/style-rule.js
--- a/devtools/server/actors/style-rule.js
+++ b/devtools/server/actors/style-rule.js
@@ -324,11 +324,22 @@ class StyleRuleActor extends Actor {
 
         // If the rule is in a imported stylesheet with specified media conditions,
         // put them at the top of the ancestor data array.
-        // XXX We should also handle `supports()` when it gets implemented (See Bug 1827886).
-        if (this._parentSheet.ownerRule.media?.mediaText) {
+        if (
+          this._parentSheet.ownerRule.media?.mediaText ||
+          this._parentSheet.ownerRule.supportsText
+        ) {
+          const parts = [];
+          if (this._parentSheet.ownerRule.supportsText) {
+            parts.push(`supports(${this._parentSheet.ownerRule.supportsText})`);
+          }
+
+          if (this._parentSheet.ownerRule.media?.mediaText) {
+            parts.push(this._parentSheet.ownerRule.media.mediaText);
+          }
+
           form.ancestorData.unshift({
             type: "import",
-            value: this._parentSheet.ownerRule.media.mediaText,
+            value: parts.join(" "),
           });
         }
       }

Comment 2

[Oliver Medhurst [:canadahonk]]

Attachment: Bug 1827886 - Display support conditions for @import CSS rules

Added displaying support conditions for @import CSS rules
(@import supports(...)) to DevTools like media conditions (Bug 1827801).

Also added new tests for conditional imports to test support conditions.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/38da755ec589
Display support conditions for @import CSS rules r=jdescottes

Comment 4

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/38da755ec589