Closed Bug 1747195 Opened 11 months ago Closed 10 months ago

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

Categories

(DevTools :: Inspector: Rules, task)

task

Tracking

(firefox98 fixed)

RESOLVED FIXED
98 Branch
Tracking Status
firefox98 --- fixed

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

Details

Attachments

(1 file)

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
}
Blocks: 1731612
See Also: → 1489442

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

Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/972ffd2c5d68
[devtools] Put rule media query above the selector. r=jdescottes.
Status: ASSIGNED → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → 98 Branch
You need to log in before you can comment on or make changes to this bug.