Editing declaration in stylesheet layer import does not work and might cause blank rules view
Categories
(DevTools :: Inspector: Rules, defect, P2)
Tracking
(firefox131 verified, firefox132 verified)
People
(Reporter: nchevobbe, Assigned: emilio)
References
Details
Attachments
(1 file)
- Go to https://rqrauhvmra.com/ratata/examples/ratata.html
- Open the inspector
- Select the h2 element
- Change the
font-sizevalue to 80px - Now select the h1 element
-> blank rules view (and at step 4, the font-size isn't updated)
There's an error in the Browser Console:
Error while calling actor 'pagestyle's method 'getApplied'" "can't access property \"parsingMode\", sheet is null
resource://devtools/shared/inspector/css-logic.js:139
|
Reporter | |
Comment 1•2 months ago
|
||
I reproduce the issue in Firefox 97, which was when @layer support was added
|
|
Reporter | |
Comment 2•2 months ago
|
||
Reduced STR:
- Go to https://ffx-devtools-layer-inspector-issue.glitch.me/
- Inspect the h1 element
- Update the
font-sizeto80px
-> change isn't applied on the page
The CSS is pretty simple:
style.css:
@layer content;
@import url('./_imported.css') layer(content);
_imported.css
h1 {
font-size: 40px;
}
Note that if in style.css we remove the @layer rule, we don't suffer from this issue. The rule on the h2 element in the example can be edited fine
fine.css:
@import url('./_imported_fine.css') layer(content);
_imported_fine.css
h2 {
font-size: 20px;
}
From the DevTools side, we do change the stylesheet text fine, and then call InspectorUtils.parseStyleSheet with the stylesheet.
const styleSheet = this.#styleSheetMap.get(resourceId);
InspectorUtils.parseStyleSheet(styleSheet, text);
I tried to create a failing InspectorUtils.parseStyleSheet test but I couldn't I guess something different in chrome mochitest? Or the bug comes from a different place.
Emilio, would you have an idea of what's happening here?
|
|
Reporter | |
Updated•2 months ago
|
|
Assignee | |
Comment 3•2 months ago
|
||
This goes back to bug 1372041 at least...
|
|
Assignee | |
Comment 4•2 months ago
|
||
We've never passed it down even though it was clearly the intention.
This made the invalidation code think the stylesheet was already
detached.
|
||
Updated•2 months ago
|
|
|
Assignee | |
Comment 5•2 months ago
|
||
How hard would it be for you to write a test for it? I tried something like this, but it doesn't repro the issue, it's likely not easy to do a web-observable test-case for this:
<!DOCTYPE html>
<style>@import url("data:text/css,:root{background-color:green}");</style>
<style>@charset "utf-8"; @import url("data:text/css,:root{background-color:green}");</style>
<script>
console.log(document.styleSheets[0].cssRules[0].styleSheet.cssRules[0]);
console.log(document.styleSheets[1].cssRules[0].styleSheet.cssRules[0]);
console.log(document.styleSheets[0].cssRules[0].styleSheet.parentStyleSheet);
console.log(document.styleSheets[1].cssRules[0].styleSheet.parentStyleSheet);
</script>
|
||
Comment 7•2 months ago
|
||
Sorry, the patch was already queued to land when I found this, but I get an assertion failure on exit.
[1644085] Assertion failure: mParentSheet->ChildSheets().Contains(this), at /home/user/hg.mozilla.org/gecko-dev/layout/style/StyleSheet.cpp:913
|
||
Comment 8•2 months ago
|
||
| bugherder | ||
|
|
||
Comment 9•2 months ago
|
||
Opened bug 1914449 for the assertion failure and restoring the ni? for test coverage from bug 1912996 comment 5.
|
|
||
Comment 10•2 months ago
|
||
Cancelling the duplicate ni? because it is covered by the ni? in bug 1914449. :)
|
|
Reporter | |
Comment 11•1 month ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)
How hard would it be for you to write a test for it? I tried something like this, but it doesn't repro the issue, it's likely not easy to do a web-observable test-case for this:
<!DOCTYPE html> <style>@import url("data:text/css,:root{background-color:green}");</style> <style>@charset "utf-8"; @import url("data:text/css,:root{background-color:green}");</style> <script> console.log(document.styleSheets[0].cssRules[0].styleSheet.cssRules[0]); console.log(document.styleSheets[1].cssRules[0].styleSheet.cssRules[0]); console.log(document.styleSheets[0].cssRules[0].styleSheet.parentStyleSheet); console.log(document.styleSheets[1].cssRules[0].styleSheet.parentStyleSheet); </script>
Sorry I was out last week, thanks a lot for the fix! I'll write an inspector test for this
|
||
Updated•1 month ago
|
Reproducible on a 2024-08-13 Nightly build on Windows 10 using the STR from Comment 2.
Verified as fixed on Firefox 131.0b5 and Firefox Nightly 132.0a1 on Windows 10, Ubuntu 22, macOS 14.
Description
•