1186244 - Remove border artifacts between navbar and tabbar in lw-themes on Windows 10

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[Tim Nguyen :ntim]

It is used to emulate an aero-ish look for lw-themes. But we don't need it on Windows 10 or even 8.

Comment 1

[Tim Nguyen :ntim]

Attachment: Patch

Comment 2

[Dão Gottwald [:dao]]

Comment on attachment 8637901 [details] [diff] [review]
Patch

>+        /* Setting background-size to "0 0" for the first
>+           background-image to remove the stroke. */
>         .tab-background-middle[visuallyselected=true] {
>-          /* Setting background-size to "0 0" for the first
>-             background-image to remove the stroke. */
>           background-size: 0 0, auto 100%, auto 100%;
>         }
>+        .tab-background-middle[visuallyselected=true]:-moz-lwtheme {
>+          background-size: 0 0, auto 100%, auto auto;
>+        }

This is getting increasingly ugly. :( Can we avoid repeating the second and third sizes with CSS variables or preprocessing?

What about this code? http://hg.mozilla.org/mozilla-central/annotate/eee2d49d055c/browser/themes/windows/browser.css#l308

Comment 4

[Tim Nguyen :ntim]

(In reply to Dão Gottwald [:dao] from comment #2)
> What about this code?
> http://hg.mozilla.org/mozilla-central/annotate/eee2d49d055c/browser/themes/
> windows/browser.css#l308

Just tried removing this code on my VM, and it looks worse : there's a 1px transparent semitransparent border under the selected tab, which looks quite odd.

Comment 5

[Tim Nguyen :ntim]

Attachment: Patch v2

Comment 6

[Tim Nguyen :ntim]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=eb89ff1f0bdd

Comment 7

[Dão Gottwald [:dao]]

(In reply to Tim Nguyen [:ntim] from comment #4)
> (In reply to Dão Gottwald [:dao] from comment #2)
> > What about this code?
> > http://hg.mozilla.org/mozilla-central/annotate/eee2d49d055c/browser/themes/
> > windows/browser.css#l308
> 
> Just tried removing this code on my VM, and it looks worse : there's a 1px
> transparent semitransparent border under the selected tab, which looks quite
> odd.

That's strange. Where does that border come from? At least we will need to update the comment to reflect what that margin is really needed for.

Comment 8

[Tim Nguyen :ntim]

Attachment: small-white-border-under-tab.PNG

I suspect this is due to how the tab image is drawn.
Not sure where it comes from precisely though.

Comment 10

[Tim Nguyen :ntim]

[Tracking Requested - why for this release]: Very unpolished look for lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png

Comment 11

[Tim Nguyen :ntim]

(In reply to Tim Nguyen [:ntim] from comment #10)
> [Tracking Requested - why for this release]: Very unpolished look for
> lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png
(mainly that top border on the selected tab)

Comment 12

[jen strickland :jenstrickland]

Tracked for 40, 41, and 42, so that the visual appearance issues for Win10 as noted above are addressed.

Comment 13

[Sylvestre Ledru [:Sylvestre]]

Unfortunately, this is too late for 40.

Comment 14

[Tim Nguyen :ntim]

Any chance I can get a review soon ? Thanks.

Comment 15

[Dão Gottwald [:dao]]

Still pondering about comment 7. It would be nice to really understand what's going on here. I'll try to investigate this a bit when I find the time.

Comment 16

[Justin Dolske [:Dolske]]

(In reply to Tim Nguyen [:ntim] (mostly away until 26 August) from comment #8)
> Created attachment 8639804 [details]
> small-white-border-under-tab.PNG
...
> > [Tracking Requested - why for this release]: Very unpolished look for
> > lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png

We should definately fix this, but the first issue is subtle and we can't seem to reproduce the second (is there some other condition beyond just a LWT?)

Comment 17

[:Gijs (he/him)]

(In reply to Tim Nguyen [:ntim] (mostly away until 26 August) from comment #8)
> Created attachment 8639804 [details]
> small-white-border-under-tab.PNG
> 
> I suspect this is due to how the tab image is drawn.
> Not sure where it comes from precisely though.

When just removing the box-shadow and the margin-top on the navbar, I can't actually reproduce this. Were you using non-100% DPI or something?

Arguably though, the tab doesn't really adjoin the nav-bar smoothly - it causes a "bump" where the curves start and end.

Comment 18

[Tim Nguyen :ntim]

(In reply to Justin Dolske [:Dolske] from comment #16)
> (In reply to Tim Nguyen [:ntim] (mostly away until 26 August) from comment
> #8)
> > Created attachment 8639804 [details]
> > small-white-border-under-tab.PNG
> ...
> > > [Tracking Requested - why for this release]: Very unpolished look for
> > > lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png
> 
> We should definately fix this, but the first issue is subtle and we can't
> seem to reproduce the second (is there some other condition beyond just a
> LWT?)

The small white bottom border appears when the navbar has it's top (negative) margin removed. Dao asked if that margin was useful. It appears to be useful for what Gijs states in comment 17.

(In reply to :Gijs Kruitbosch from comment #17)
> (In reply to Tim Nguyen [:ntim] (mostly away until 26 August) from comment
> #8)
> > Created attachment 8639804 [details]
> > small-white-border-under-tab.PNG
> > 
> > I suspect this is due to how the tab image is drawn.
> > Not sure where it comes from precisely though.
> 
> When just removing the box-shadow and the margin-top on the navbar, I can't
> actually reproduce this. Were you using non-100% DPI or something?
> 
> Arguably though, the tab doesn't really adjoin the nav-bar smoothly - it
> causes a "bump" where the curves start and end.
My VM is configured on 100% DPI. Although I run this VM from a retina screen (but this doesn't matter since the VM emulates a normal screen).

Comment 19

[Dão Gottwald [:dao]]

(In reply to :Gijs Kruitbosch from comment #17)
> (In reply to Tim Nguyen [:ntim] (mostly away until 26 August) from comment
> #8)
> > Created attachment 8639804 [details]
> > small-white-border-under-tab.PNG
> > 
> > I suspect this is due to how the tab image is drawn.
> > Not sure where it comes from precisely though.
> 
> When just removing the box-shadow and the margin-top on the navbar, I can't
> actually reproduce this.

I don't see this either.

> Arguably though, the tab doesn't really adjoin the nav-bar smoothly - it
> causes a "bump" where the curves start and end.

Seems like we should fix that by removing the bottom pixel row of the tab images that was supposed to be moved over the tab bar, but that would probably go beyond the scope of this bug.

Comment 20

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/9dccd6cceff0

Comment 21

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/9dccd6cceff0

Comment 22

[Tim Nguyen :ntim]

Comment on attachment 8639790 [details] [diff] [review]
Patch v2

Approval Request Comment
[Feature/regressing bug #]: Bug 1173728 / Windows 10
[User impact if declined]: Ugly top tab border with lw-themes enabled
[Describe test coverage new/current, TreeHerder]: on m-c and tested locally.
[Risks and why]: Low, straightforward CSS fix.
[String/UUID change made/needed]: none

Comment 23

[Cornel Ionce [:noni] [Hubs QA]]

Confirming the fix using latest 42.0a1 Nightly, build ID: 20150809030213 on Windows 10 64-bit.

Comment 24

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8639790 [details] [diff] [review]
Patch v2

Approved. The patch was verified on Nightly, we do want the end-user experience on win10 to be super awesome. Let's uplift to m-b.

Comment 25

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/ff50c9cfaf0b

Comment 26

[Cornel Ionce [:noni] [Hubs QA]]

Also verified fixed on Firefox 41.0b2, build ID: 20150817163452.