1809083 - Can't edit property of adopted/constructed stylesheet rule

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[tigerman33]

Attachment: Inspector.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0

Steps to reproduce:

On a simple html page containing a <p>, open console and run the following sequence of commands:

let stylesheet = new CSSStyleSheet();
await stylesheet.replace('p { color: red; }');
document.adoptedStyleSheets = [ stylesheet ];

Actual results:

1. Firefox correctly applied the styles to the paragraph (it turned red).

2. However, in the "style editor" tab of the dev tools, while it does show an "<inline style sheet #1>", this is reported as having 0 rules, and the editor pane is empty.

3. Additionally, when selecting the <p> in the "inspector" tab of the dev tools, the
   rule is not displayed in the style pane.

4. In the project that led me to discover this bug, for some reason the rules ARE shown in the style pane of the inspector tab (albeit not in the style editor tab). However, disabling one with the checkbox next to it, or editing it, are not reflected in the page. Unfortunately, I have been unable to reproduce this in the example given above (which seems to fail at an even earlier stage, never showing the rules at all).

Expected results:

1. Firefox should apply the styles (this worked correctly)

2. In the "style editor" tab, it should show the rule of the adopted style sheet (namely, "p { color: red; }"), and report the number of rules as "1".

3. When selecting the <p> element in the inspector tab of the dev tools, the rule should be displayed in the "styles" pane.

4. These styles should be editable. I should be able to disable them using the checkbox next to them, and disabling/editing should be reflected in the page.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Inspector: Rules' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[tigerman33]

Attachment: Style Editor.png

Comment 3

[tigerman33]

Attachment: bug.html

Comment 4

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

Thanks for the report tigerman33.
So we can probably split this in multiple issues

From the steps to reproduce, I can confirm that the style editor doesn't show the stylesheet content (and show a misleading "inline stylesheet" label).
This is known and depends on Bug 1769933
With the test page you attached to this bug, when I add the constructed stylesheet and select the <p> element I can see the rule in the rule view. Do you manage to reproduce this specific issue every time? Is the page doing something else not mentioned in your comment?

Also, I can see that changing the value/disabling the property doesn't actually apply to the page.
We get the following error in the Browser Console:

Error: Protocol error (Error): couldn't find start of the rule from: server0.conn0.windowGlobal10737418241/domstylerule44 (resource://devtools/server/actors/utils/style-utils.js:134:13) Front.js:383:31
We do have a test for this (https://searchfox.org/mozilla-central/rev/d62c4c4d5547064487006a1506287da394b64724/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js#77-79), but it only checks that the value after editing is correct in the rule view, not that it actually applied to the element.
I'll file a specific bug for this one

Comment 5

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

I filed Bug 1809107 and Bug 1809108 for the Style Editor.
The issue in the rule view has the same cause than the missing content in the Style Editor; under the hood, setting a CSS property retrieves the stylesheet authored text and replace the content of the rule.
Since we don't get the authored text to begin with, we can't replace anything and it fails.

Comment 6

[tigerman33]

Hi, and thanks for the quick pick-up on this.

I just tried again and now the rules are indeed showing up in the style pane, even though they still don't do anything. Like I said, that's how I initially noticed this issue in the first place, and I was kind of surprised when I couldn't even get them to show up anymore.

The html file I attached was literally the one I was using to find a minimal reproducible example, so no, it wasn't doing anything else.

Happy to hear that the cause for this is already known. :)

Comment 7

[Julian Descottes [:jdescottes]]

Two options to fix this:

• either use CSSOM to update the specific rule which is edited
• or use adopted stylesheet replace to update the text

Comment 8

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

wrote a quick prototype

diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
--- a/devtools/server/actors/utils/stylesheets-manager.js
+++ b/devtools/server/actors/utils/stylesheets-manager.js
@@ -275,9 +275,13 @@ class StyleSheetsManager extends EventEm
         // this is an inline <style> sheet
         return styleSheet.ownerNode.textContent;
       }
+
       // Constructed stylesheet.
       // TODO(bug 176993): Maybe preserve authored text?
-      return "";
+      // For now, we loop through the rules to get their text
+      return Array.from(styleSheet.cssRules)
+        .map(cssRule => cssRule.cssText)
+        .join("\n\n");
     }

and this seems to be enough to:

• show the content in the style editor
• being able to modify the content in the style editor
• being able to modify the rules in the rule view
• having modifications synced between rule view and style editor

this definitely need tests to make sure there is no drawback doing this