reflow long list of CSS selectors

VERIFIED FIXED in Firefox 65

Status

enhancement
P3
normal
VERIFIED FIXED
5 years ago
3 months ago

People

(Reporter: karlcow, Assigned: pbro)

Tracking

(Blocks 1 bug)

unspecified
Firefox 65
x86
macOS
Dependency tree / graph

Firefox Tracking Flags

(firefox65 fixed, firefox66 verified, firefox67 verified, firefox68 verified)

Details

Attachments

(2 attachments)

Reporter

Description

5 years ago
1. Open devtools
2. Go to Style Editor


If the CSS has a long shopping list of selectors on one line (sometimes bigger than the screen size). It becomes very hard to read. It would be good to reflow, so that something like

.abar, .foo, .foobar .yoops .love, .blah { float: left; }

becomes  

.abar, 
.foo, 
.foobar .yoops .love, 
.blah {
   float: left;
   }
Assignee

Comment 1

3 years ago
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3

Updated

Last year
Product: Firefox → DevTools
Assignee

Updated

9 months ago
Blocks: 1493094
Assignee

Comment 2

8 months ago
I think I have a solution for this one, but I have 2 questions before proceeding:
- is this something that would still make your work easier?
- do you also find yourself wanting the non-wrapped version sometimes? In which case we'd need to make this a preference.
Flags: needinfo?(kdubost)
Assignee

Comment 4

8 months ago
Comment on attachment 9018567 [details]
Bug 1114932 - Break after commas in CSS selectors

Hi Tom, I thought maybe you could give this one a quick look. This is only a feedback request at this stage, and feel free to cancel if you don't remember enough of this code.
I couldn't find a simpler way to detect whether a comma symbol was inside a selector or not.
Attachment #9018567 - Flags: feedback?(ttromey)

Comment 5

8 months ago
Comment on attachment 9018567 [details]
Bug 1114932 - Break after commas in CSS selectors

Thanks.  This looks good.

> I couldn't find a simpler way to detect whether a comma symbol was inside a selector or not.

Yes, there isn't one; what you did is the way to go.
Attachment #9018567 - Flags: feedback?(ttromey) → feedback+
Reporter

Comment 6

8 months ago
(In reply to Patrick Brosset <:pbro> from comment #2)
> I think I have a solution for this one, but I have 2 questions before
> proceeding:
> - is this something that would still make your work easier?

yes.

> - do you also find yourself wanting the non-wrapped version sometimes? In
> which case we'd need to make this a preference.

nope. :)

Thanks a lot Patrick.
Reporter

Updated

8 months ago
Flags: needinfo?(kdubost)
Assignee

Updated

8 months ago
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Assignee

Updated

8 months ago
Severity: normal → enhancement

Comment 7

8 months ago
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/288b33fef410
Break after commas in CSS selectors r=tromey

Comment 8

8 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/288b33fef410
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+

Can someone help with some reproduction steps or a test page that can help me reproduce and validate this issue?
Thanks.

Flags: needinfo?(pbrosset)

To try it out, visit for example data:text/html;charset=utf-8,<style>.abar, .foo, .foobar .yoops .love, .blah{float:left;} and open the style editor. Compared to "view source" for example, the style editor shows each selector on a single line.

Flags: needinfo?(pbrosset)

This issue still reproduces on all main browser versions (Nightly v68.0a1, Beta v67.0b3, Release v66.0) and all the main OSes (Windows 10, Mac OS and Linux) using the test suggested in comment 10.
Is the test valid?

Flags: needinfo?(mbalfanz)
Posted image esr-vs-nightly.png

For me it works as expected. See the screenshot attached, where I compare ESR vs the latest Nightly. ESR shows one long selector line, whereas in Nightly each selectors goes on a new line. This is the behavior we want to have. Are you saying that the selector is still one long line for you?

Flags: needinfo?(mbalfanz)

NO. According to comment 0, I thought that was the bad behavior. I can confirm that it is fixed in all the main OSes.
Bug status is now VERIFIED. Thanks.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.