Closed Bug 1186244 Opened 5 years ago Closed 5 years ago

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

Categories

(Firefox :: Theme, defect, P2)

Unspecified
Windows 10
defect

Tracking

()

VERIFIED FIXED
Firefox 42
Tracking Status
firefox40 + wontfix
firefox41 + verified
firefox42 + verified

People

(Reporter: ntim, Assigned: ntim)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 1 obsolete file)

It is used to emulate an aero-ish look for lw-themes. But we don't need it on Windows 10 or even 8.
Blocks: windows-10
Blocks: theme-win10
No longer blocks: windows-10
Summary: Remove box-shadow from nav-bar on Windows 10 → Remove border artifacts between navbar and tabbar in lw-themes
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
Attached patch Patch (obsolete) — Splinter Review
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
Attachment #8637901 - Flags: review?(dao)
Duplicate of this bug: 1188282
(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.
Attached patch Patch v2Splinter Review
Attachment #8637901 - Attachment is obsolete: true
Attachment #8639790 - Flags: review?(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.
I suspect this is due to how the tab image is drawn.
Not sure where it comes from precisely though.
Duplicate of this bug: 1189216
Priority: -- → P1
[Tracking Requested - why for this release]: Very unpolished look for lightweight themes on Windows 10 : http://i.imgur.com/JbQ5eIV.png
(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.
Unfortunately, this is too late for 40.
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.
(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.
Attachment #8639790 - Flags: review?(dao) → review+
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/9dccd6cceff0
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 42
Flags: qe-verify+
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
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+
Also verified fixed on Firefox 41.0b2, build ID: 20150817163452.
You need to log in before you can comment on or make changes to this bug.