If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

VERIFIED FIXED in Firefox 41

Status

()

Firefox
Theme
P2
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: ntim, Assigned: ntim)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 42
Unspecified
Windows 10
Points:
---
Bug Flags:
qe-verify +

Firefox Tracking Flags

(firefox40+ wontfix, firefox41+ verified, firefox42+ verified)

Details

Attachments

(2 attachments, 1 obsolete attachment)

(Assignee)

Description

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

Updated

2 years ago
Blocks: 1077146

Updated

2 years ago
Blocks: 1158143
No longer blocks: 1077146
(Assignee)

Updated

2 years ago
Summary: Remove box-shadow from nav-bar on Windows 10 → Remove border artifacts between navbar and tabbar in lw-themes
(Assignee)

Updated

2 years ago
Assignee: nobody → ntim.bugs
Status: NEW → ASSIGNED
OS: Unspecified → Windows 10
Summary: Remove border artifacts between navbar and tabbar in lw-themes → Remove border artifacts between navbar and tabbar in lw-themes on Windows 10
(Assignee)

Comment 1

2 years ago
Created attachment 8637901 [details] [diff] [review]
Patch
Attachment #8637901 - Flags: review?(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

Updated

2 years ago
Attachment #8637901 - Flags: review?(dao)
(Assignee)

Updated

2 years ago
Duplicate of this bug: 1188282
(Assignee)

Comment 4

2 years ago
(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.
(Assignee)

Comment 5

2 years ago
Created attachment 8639790 [details] [diff] [review]
Patch v2
Attachment #8637901 - Attachment is obsolete: true
Attachment #8639790 - Flags: review?(dao)
(Assignee)

Comment 6

2 years ago
https://treeherder.mozilla.org/#/jobs?repo=try&revision=eb89ff1f0bdd
(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.
(Assignee)

Comment 8

2 years ago
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.
(Assignee)

Updated

2 years ago
Duplicate of this bug: 1189216
(Assignee)

Updated

2 years ago
Priority: -- → P1
(Assignee)

Comment 10

2 years ago
[Tracking Requested - why for this release]: Very unpolished look for lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png
tracking-firefox40: --- → ?
tracking-firefox41: --- → ?
tracking-firefox42: --- → ?
(Assignee)

Comment 11

2 years ago
(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)
Tracked for 40, 41, and 42, so that the visual appearance issues for Win10 as noted above are addressed.
tracking-firefox40: ? → +
tracking-firefox41: ? → +
tracking-firefox42: ? → +
Unfortunately, this is too late for 40.
status-firefox40: --- → verified disabled
status-firefox41: --- → affected
status-firefox42: --- → affected
(Assignee)

Comment 14

2 years ago
Any chance I can get a review soon ? Thanks.
Flags: needinfo?(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.
Flags: needinfo?(dao)
(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?)
Priority: P1 → P2
(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.
(Assignee)

Comment 18

2 years ago
(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).
(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.

Updated

2 years ago
Attachment #8639790 - Flags: review?(dao) → review+

Updated

2 years ago
status-firefox40: verified disabled → wontfix
(Assignee)

Updated

2 years ago
Keywords: checkin-needed

Comment 20

2 years ago
https://hg.mozilla.org/integration/fx-team/rev/9dccd6cceff0
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/9dccd6cceff0
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
status-firefox42: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 42
(Assignee)

Updated

2 years ago
Flags: qe-verify+
(Assignee)

Comment 22

2 years ago
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
Attachment #8639790 - Flags: approval-mozilla-beta?
Confirming the fix using latest 42.0a1 Nightly, build ID: 20150809030213 on Windows 10 64-bit.
Status: RESOLVED → VERIFIED
status-firefox42: fixed → verified
QA Contact: cornel.ionce
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.
Attachment #8639790 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
https://hg.mozilla.org/releases/mozilla-beta/rev/ff50c9cfaf0b
status-firefox41: affected → fixed
Also verified fixed on Firefox 41.0b2, build ID: 20150817163452.
status-firefox41: fixed → verified
You need to log in before you can comment on or make changes to this bug.