1751417 - only "last" media query from nested media queries is displayed next to the rule

Status: RESOLVED FIXED

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

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. 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
2. Open the inspector, select the <body> node, and select the Rule view if it wasn't already
3. Spot the body {background: tomato;} rule

Expected results

The location has the whole "tree" of nested media queries, or provides a way to see it/indicate there's more than 1 parent rule

Actual results

Only the last media query is displayed (inline:1 @media (max-height: 9999px))

---

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;
          }
        }
      }
    }
  }
}

this case is definitely extreme, and showing all the media text would be challenging, but we could find something to indicate that there's more than the last one.

We'll probably have similar issue in how we want to represent nested @layer (even more when they're mixed with media queries)

Comment 1

[Alexandre Poirot [:ochameau]]

After bug 1731612 is done, what about displaying the concatenation of all the media queries and layers screen min-width: 1px min-height: 1px max-width: 9999px max-height: 9999px ?
And:

• text-overflow that the text is croped if too long,
• tooltip value so that you can see overything on hover.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: CleanShot 2022-01-25 at 10.21.33.png

Here's a very simple version, showing all the different levels on the same line, separated by a simple space.
The information is here, but that isn't really great and won't scale up (although this is definitely an extreme case)
I'll try to give each "level" its own line, maybe capped at 2 or 3 lines, and then showing the whole text in the tooltip

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: chrome.png

Having a dedicated line per media query is what chrome does. Sounds like a decent approach

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1751417 - [devtools] Display all ancestor media queries and layers in rule view. r=jdescottes.

Depends on D136620

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1751417 - [devtools] Rule view filtering should handle ancestor rules data. r=jdescottes.

This ensures @media and @layer information can be searched for and properly highlighted
in the rule view.
A test is added to check various cases.

Depends on D136882

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d0fa4b583f04
[devtools] Display all ancestor media queries and layers in rule view. r=jdescottes.
https://hg.mozilla.org/integration/autoland/rev/ee12a9a90fe0
[devtools] Rule view filtering should handle ancestor rules data. r=jdescottes.

Comment 7

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/d0fa4b583f04
https://hg.mozilla.org/mozilla-central/rev/ee12a9a90fe0