1023666 - Condition text labels in @media sidebar should wrap

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect)

Description

[Heather Arthur [:harth]]

If the condition text of a @media rule is too long, it'll get cut off in the @media sidebar. We should show the whole condition e.g. "only screen and (min-width: 400px) and (max-width: 700px)".

Comment 1

[Heather Arthur [:harth]]

Attachment: wraps, but unnecessary overflow on whitespace

Trying a bunch of things out. This will get the text to wrap, but any text with whitespace will cause the box to expand. This makes the appearance uneven. I want it to fit the text.

This is remedied when the box containing the list of rules is a <div> instead of a <vbox>, but doing so causes the entire style editor to overflow when there are more rules than space.

Comment 2

[Heather Arthur [:harth]]

Attachment: Issues with labels containing whitespace

Screenshot of the issue I'm running into. Notice that the "print" label doesn't overflow, but the labels with whitespace do.

Comment 3

[Brian Grinstead [:bgrins]]

Test case: 

data:text/html,<style>@media only screen and (max-width: 2000px) and (min-width: 300px) { body {color:red; }}</style>hi

Comment 4

[Brian Grinstead [:bgrins]]

Attachment: wrap-media-labels.patch

is this what you want it to do?

Comment 5

[Heather Arthur [:harth]]

(In reply to Brian Grinstead [:bgrins] from comment #4)
> Created attachment 8438765 [details] [diff] [review]
> wrap-media-labels.patch
> 
> is this what you want it to do?

It would be, but it messes up for lists of many @media rules. Look at bootstrap.min.css on http://getbootstrap.com. Scroll to the bottom of the stylesheet, and notice that the style editor content overflows and the scrollbar scrolls out of sight.

Comment 6

[Brian Grinstead [:bgrins]]

Attachment: wrap-media-labels.patch

OK, try this one

Comment 7

[Heather Arthur [:harth]]

Comment on attachment 8438825 [details] [diff] [review]
wrap-media-labels.patch

Review of attachment 8438825 [details] [diff] [review]:
-----------------------------------------------------------------

That's perfect. Thanks for looking into it!

Comment 8

[Brian Grinstead [:bgrins]]

https://tbpl.mozilla.org/?tree=Try&rev=67ad57e27f50

Comment 9

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/integration/fx-team/rev/722fd7e7f78a

Comment 10

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/722fd7e7f78a