Closed Bug 1114932 Opened 10 years ago Closed 6 years ago

reflow long list of CSS selectors

Categories

(DevTools :: Style Editor, enhancement, P3)

Product:
DevTools
Component:
Style Editor
Platform:
x86
macOS
Type:
enhancement

Tracking

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

Status:
VERIFIED FIXED
Milestone:
Firefox 65
Tracking Flags:
Tracking Status
firefox65 --- fixed
firefox66 --- verified
firefox67 --- verified
firefox68 --- verified

People

(Reporter: karlcow, Assigned: pbro)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Bug 1114932 - Break after commas in CSS selectors
(deleted), text/x-phabricator-request
tromey
: feedback+
Details
esr-vs-nightly.png
(deleted), image/png
Details
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; }
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Product: Firefox → DevTools
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)
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 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+
(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.
Flags: needinfo?(kdubost)
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Severity: normal → enhancement
Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/288b33fef410 Break after commas in CSS selectors r=tromey
https://hg.mozilla.org/mozilla-central/rev/288b33fef410
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox65: --- → fixed
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)
Attached image esr-vs-nightly.png (deleted) —

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
status-firefox66: --- → verified
status-firefox67: --- → verified
status-firefox68: --- → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: