629898 - Set min-width on statuspanel for less jitter

Status: RESOLVED FIXED

(Firefox :: General, defect)

Description

[jag (Peter Annema)]

From bug 628654 comment 58:

  Eddward 2011-01-29 07:26:23 PST

  Is it possible to set minimal width like it is in Chrome (~340px)?
  Dynamic width is very annoying...

Looks like something like this does the trick (should be merged, replace left:auto, etc.):

statuspanel,
statuspanel:-moz-locale-dir(ltr)[mirror],
statuspanel:-moz-locale-dir(rtl):not([mirror]) {
  min-width: 400px; // More? Less?
}

.statuspanel-inner {
  width: 100%;
}

Comment 1

[Edo Karabas]

Yes, this is exactly what I want to see. It's much better now :)

Comment 2

[Dão Gottwald [:dao]]

Attachment: patch

This starts with a 25% min-width and lets the statuspanel grow but not shrink for value changes, until the value gets reset.

Comment 3

[jag (Peter Annema)]

Comment on attachment 508134 [details] [diff] [review]
patch

>   left: 0;
>+  min-width: 25%;
>+  max-width: 50%;
> }
> 
> statuspanel:-moz-locale-dir(ltr)[mirror],
> statuspanel:-moz-locale-dir(rtl):not([mirror]) {
>   left: auto;

When I was playing with this in userChrome.css I needed to specify min-width for these two selectors explicitly, apparently to override the "left: auto". I wonder if you need that here too.


>     <implementation>
>       <property name="label">
>         <setter>
>-          if (!this.label)
>+          if (!this.label) {
>             this.removeAttribute("mirror");
>+            this.style.minWidth = "";

Not "25%"?

Comment 4

[Dão Gottwald [:dao]]

(In reply to comment #3)
> >   left: 0;
> >+  min-width: 25%;
> >+  max-width: 50%;
> > }
> > 
> > statuspanel:-moz-locale-dir(ltr)[mirror],
> > statuspanel:-moz-locale-dir(rtl):not([mirror]) {
> >   left: auto;
> 
> When I was playing with this in userChrome.css I needed to specify min-width
> for these two selectors explicitly, apparently to override the "left: auto". I
> wonder if you need that here too.

I don't think so, this seemed to work just fine.

> >     <implementation>
> >       <property name="label">
> >         <setter>
> >-          if (!this.label)
> >+          if (!this.label) {
> >             this.removeAttribute("mirror");
> >+            this.style.minWidth = "";
> 
> Not "25%"?

"" resets the style attribute, causing the min-width as specified in the stylesheet to be used.

Comment 5

[jag (Peter Annema)]

> I don't think so, this seemed to work just fine.

Awesome. I'll try this patch and see what happens here.

> "" resets the style attribute, causing the min-width as specified in
> the stylesheet to be used.

Right, duh.

Comment 6

[jag (Peter Annema)]

Comment on attachment 508134 [details] [diff] [review]
patch

Yep, works. I forgot to test removing the additional min-width after I added the width: 100% to .statuspanel-inner.

r=jag if you want it.

Comment 7

[Edo Karabas]

So, can someone approve it please?

Comment 8

[jag (Peter Annema)]

This might not show up in the "approval?" queries due to an open "review?".

Gavin, wanna have a quick look?

Comment 9

[Dão Gottwald [:dao]]

I need to update this for bug 541656.

Comment 10

[Dão Gottwald [:dao]]

http://hg.mozilla.org/mozilla-central/rev/2f353922a56c

Bug 541656 added statuspanel { -moz-transition: opacity 100ms ease-out }, so other than merging, I added statuspanel[label=""] { -moz-transition: none } so that the statuspanel fades in when it gets a label but not out when it loses the label. Without the min-width it didn't fade out either, as it would immediately shrink to width 0 without a label.