Only "first" media query from nested media queries is displayed in the Media Queries sidebar
Categories
(DevTools :: Style Editor, defect, P2)
Tracking
(firefox106 fixed)
Tracking | Status | |
---|---|---|
firefox106 | --- | fixed |
People
(Reporter: nchevobbe, Assigned: nchevobbe)
References
Details
Attachments
(1 file)
Steps to reproduce
- Navigate to
data:text/html,<meta charset=utf8><style>@media screen {@media (min-width: 1px) {@media (min-height: 1px) {@media (max-width: 9999px) {@media (max-height: 9999px) {body {background: tomato;}}}}}}</style>Tomato
- Open the style editor and make sure the media queries sidebar is displayed
Expected results
The sidebar has the whole list of nested media queries
Actual results
Only the first media query is displayed (screen
)
Here's the content of the stylesheet nicely formatted:
@media screen {
@media (min-width: 1px) {
@media (min-height: 1px) {
@media (max-width: 9999px) {
@media (max-height: 9999px) {
body {
background: red;
}
}
}
}
}
}
Assignee | ||
Updated•2 years ago
|
Comment 1•2 years ago
|
||
Setting as P2 as we might pick it up soon.
Assignee | ||
Comment 2•2 years ago
|
||
In StyleSheetsManager _getMediaRules, we were only looping
over document.cssRules, and as a result were missing potential
nested media queries.
For each rule, we now go other its potential cssRules, recursively,
to gather all media query rules.
Test cases are added for the client to make sure that those nested
rules do show up in the StyleEditor media queries sidebar.
Updated•2 years ago
|
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/342c3364a88c [devtools] Display nested media queries in media sidebar. r=jdescottes.
Comment 4•2 years ago
|
||
bugherder |
Comment 5•2 years ago
|
||
== Change summary for alert #35326 (as of Wed, 07 Sep 2022 21:44:52 GMT) ==
Regressions:
Ratio | Test | Platform | Options | Absolute values (old vs new) |
---|---|---|---|---|
14% | damp custom.styleeditor.open.DAMP | windows10-64-shippable-qr | e10s fission stylo webrender | 771.45 -> 879.01 |
13% | damp custom.styleeditor.open.DAMP | linux1804-64-shippable-qr | e10s fission stylo webrender | 801.07 -> 904.38 |
12% | damp custom.styleeditor.open.DAMP | linux1804-64-shippable-qr | e10s fission stylo webrender-sw | 789.05 -> 887.52 |
12% | damp custom.styleeditor.open.DAMP | macosx1015-64-shippable-qr | e10s fission stylo webrender-sw | 723.97 -> 812.24 |
12% | damp custom.styleeditor.open.DAMP | windows10-64-shippable-qr | e10s fission stylo webrender-sw | 785.04 -> 880.69 |
For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=35326
Nicolas: This seems to have a visible impact on custom styleeditor open. This is the test we added recently and which has a lot of stylesheets to display.
Do you think that similarly to what we did for highlighting, we should also make the retrieval of media queries lazy (only fetch them when the stylesheet gets selected?)
If yes, we could file a follow up bug?
Assignee | ||
Comment 6•2 years ago
|
||
(In reply to Julian Descottes [:jdescottes] from comment #5)
== Change summary for alert #35326 (as of Wed, 07 Sep 2022 21:44:52 GMT) ==
Regressions:
Ratio Test Platform Options Absolute values (old vs new) 14% damp custom.styleeditor.open.DAMP windows10-64-shippable-qr e10s fission stylo webrender 771.45 -> 879.01 13% damp custom.styleeditor.open.DAMP linux1804-64-shippable-qr e10s fission stylo webrender 801.07 -> 904.38 12% damp custom.styleeditor.open.DAMP linux1804-64-shippable-qr e10s fission stylo webrender-sw 789.05 -> 887.52 12% damp custom.styleeditor.open.DAMP macosx1015-64-shippable-qr e10s fission stylo webrender-sw 723.97 -> 812.24 12% damp custom.styleeditor.open.DAMP windows10-64-shippable-qr e10s fission stylo webrender-sw 785.04 -> 880.69 For up to date results, see: https://treeherder.mozilla.org/perfherder/alerts?id=35326
Nicolas: This seems to have a visible impact on custom styleeditor open. This is the test we added recently and which has a lot of stylesheets to display.
Do you think that similarly to what we did for highlighting, we should also make the retrieval of media queries lazy (only fetch them when the stylesheet gets selected?)
If yes, we could file a follow up bug?
Yes, that's something we could do for sure. I'm a bit surprised to see such impact on the results though, I'll check if I'm doing unnecessary work when traversing the rules
Assignee | ||
Comment 7•2 years ago
|
||
seems like there's quite some time spent only on iterating, let's see if this can be better: https://treeherder.mozilla.org/perfherder/compare?originalProject=try&originalRevision=95a58a60ccc191739dc9c9345d265eac404cc2d5&newProject=try&newRevision=7e85a76a30f0afc1fecfa6bb0e01653267f98c77&framework=12&page=1
Assignee | ||
Comment 8•2 years ago
|
||
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #7)
seems like there's quite some time spent only on iterating, let's see if this can be better: https://treeherder.mozilla.org/perfherder/compare?originalProject=try&originalRevision=95a58a60ccc191739dc9c9345d265eac404cc2d5&newProject=try&newRevision=7e85a76a30f0afc1fecfa6bb0e01653267f98c77&framework=12&page=1
erf, this isn't going into the right direction https://treeherder.mozilla.org/perfherder/comparesubtest?originalProject=try&newProject=try&newRevision=7e85a76a30f0afc1fecfa6bb0e01653267f98c77&originalSignature=3130994&newSignature=3130994&framework=12&originalRevision=95a58a60ccc191739dc9c9345d265eac404cc2d5&page=1
Description
•