1747195 - Move media query text out of the stylesheet location to put it before the rule select

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

At the moment, if a rule is declared inside a media query, we show the media query text next to the stylesheet location in the rule view:

h1 {                          style.css @screen and (min-width: 400px)
  color: red
}

and when the rule view gets narrow, the location is displayed on top

style.css @screen and (min-width: 400px)
h1 {
  color: red
}

As we want to display @layer information on the rule view, it makes sense to have it where we have the media query information already, but it seems like we'll be out of space in the location element.
What we could do is move the media query (and later layer) info on top of the rule selector (like it's done in Chromium)

@screen and (min-width: 400px)
h1 {                          style.css 
  color: red
}

on narrower screen, the location would still go before the selector:

@screen and (min-width: 400px)
style.css
h1 {
  color: red
}

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1747195 - [devtools] Put rule media query above the selector. r=jdescottes.

This is preliminary work before showing the @layer information above the rule view as well.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/972ffd2c5d68
[devtools] Put rule media query above the selector. r=jdescottes.

Comment 3

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/972ffd2c5d68