520644 - Switching to a lightweight theme changes border widths

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Markus Stange [:mstange]]

Attachment: v1

-moz-appearance: statusbar has 1px border-top-width.

Comment 1

[Dão Gottwald [:dao]]

> Switching to a lightweight theme changes border widths

Why is that a problem?

Comment 2

[Markus Stange [:mstange]]

Because it causes the viewport's position and size to change and makes the transition to a lightweight theme wiggly.

Comment 3

[Markus Stange [:mstange]]

Also, changing the viewport's width causes reflows in all tabs, so the transition between the default theme and a lightweight theme (which getpersonas.com does on :hover!) might take unnecessarily long.

Comment 4

[Markus Stange [:mstange]]

s/width/height

Comment 5

[Dão Gottwald [:dao]]

Yeah, but that's a split second, while the user might keep that theme for days, weeks or months. So the long-term appearance is what we need to optimize. Do the transparent borders actually improve the overall look?

Comment 6

[Markus Stange [:mstange]]

I don't think I'd notice a difference if I didn't know what to look for. So it the borders might not improve the overall look, but they don't degrade it either.

Note that https://wiki.mozilla.org/images/2/22/Fx-3.7-Mockup-Mac-i03-Personas.png suggests giving the statusbar a darkening top border. Should I do that instead?

Comment 7

[Dão Gottwald [:dao]]

(In reply to comment #6)
> I don't think I'd notice a difference if I didn't know what to look for. So it
> the borders might not improve the overall look, but they don't degrade it
> either.

They steal valuable pixels from the content area.

> Note that
> https://wiki.mozilla.org/images/2/22/Fx-3.7-Mockup-Mac-i03-Personas.png
> suggests giving the statusbar a darkening top border. Should I do that instead?

I don't think I have an opinion on that. You could prepare a patch for that and try to get it ui-reviewed.

Comment 8

[Markus Stange [:mstange]]

(In reply to comment #7)
> They steal valuable pixels from the content area.

If you say so.

> > Note that
> > https://wiki.mozilla.org/images/2/22/Fx-3.7-Mockup-Mac-i03-Personas.png
> > suggests giving the statusbar a darkening top border. Should I do that instead?
> 
> I don't think I have an opinion on that. You could prepare a patch for that and
> try to get it ui-reviewed.

I'll just wait for Stephen to get his whole theme ui-reviewed.

Comment 9

[Markus Stange [:mstange]]

Sorry, I'll have another go at this. I thought I didn't care because I'm never going to use lightweight themes, but this is just too annoying to just let it sit.

getpersonas.com previews a lightweight theme when you hover the preview image. Having the whole page jump up and down because you moved the mouse is *really* disruptive.

I think that a non-disruptive transition is more valuable than 3px viewport height.

Comment 10

[Dão Gottwald [:dao]]

Comment on attachment 404704 [details] [diff] [review]
v1

> #PersonalToolbar:-moz-lwtheme,
> #nav-bar:-moz-lwtheme {
>   -moz-appearance: none !important;
>   background: none !important;
>-  border-style: none !important;
>+  border-color: transparent !important;

Add a comment, explaining why we don't remove the border.

> statusbar:-moz-lwtheme {
>   -moz-appearance: none;
>   background: none;
>-  border-style: none;
>+  border: solid transparent;
>+  border-width: 1px 0 0;
>   text-shadow: inherit;
> }

Removing the border here doesn't cause the content area to jump, so this change isn't needed.

r=me with that

Comment 11

[Markus Stange [:mstange]]

Attachment: v2

Thanks!

Comment 12

[Dão Gottwald [:dao]]

I slightly messed up the commit message...
http://hg.mozilla.org/mozilla-central/rev/12ae893c4bd7

Comment 13

[Dão Gottwald [:dao]]

http://hg.mozilla.org/releases/mozilla-1.9.2/rev/8245adbf7646

Comment 14

[[not reading bugmail]]

Dao, I'm also noticing this on the latest window builds, going from default theme to lwtheme or back again.  The viewport shifts up or down by 1 px width.