1661010 - The “Firefox Alpenglow” color theme does not extend to the border line between the “Tab Bar” and the displayed page if the “Bookmarks Toolbar” and the “Menu Bar” are enabled

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P2)

Description

[Robert Martin [:romartin], Ecosystem QA]

Attachment: White thick line between the border line and the color theme

[Notes]:

• In order to reproduce the issue for some Linux distros, set the browser.tabs.drawinTitlebar pref to true.

[Affected Versions]:

• Firefox Beta 81.0b1 (Build ID: 20200824150741)
• Firefox Nightly 82.0a1 (Build ID: 20200824215021)

[Affected Platforms]:

• Windows 10 (x64)
• Linux MX 4.19
• Ubuntu Linux 18.04

[Prerequisites]:

• Have the “Bookmarks Toolbar” enabled
• Have the “Menu Bar” enabled.

[Steps to reproduce]:

1. Start the Firefox Browser with the profile from prerequisites.
2. Navigate to the “about:welcome” page.
3. Click the “Start Setup” button.
4. Click the “Not now” button.
5. Select “Firefox Alpenglow” theme.
6. Observe the border line between the displayed page and the “Tab Bar”.

[Expected results]:

• The “Firefox Alpenglow” theme color extends to the border line between the displayed page and the “Tab Bar”.

[Actual results]:

• There is a white thick line between the border line and “Tab bar”

[Additional Notes]:

• The issue is not reproducible on macOS 10.15.
• The issue is not reproducible on Windows 7 (x64).
• Attached a screenshot of the issue.

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

From what I can tell, this bug seems to be in the theme itself. In particular, when scaled as currently intended, the SVGs aren't quite vertically long enough. I'm think the simplest, least risky solution is simply to extend the SVGs themselves and replace the ones we've got in-tree. There are other things we could do if we had to, such as tweaking the scaling, but that's going to be more complicated, as we'd probably need to do different things depending on which toolbars are shown.

:shorlander, what are your thoughts here?

I'm guessing that if we got this soon enough, we'd probably try and uplift it into 81.

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

[Tracking Requested - why for this release]:

81 is the first release with Alpenglow. It would be wonderful if Alpenglow looked polished (as opposed to unfinished) for people who use both the menu and bookmarks toolsbars.

Comment 3

[Dan Mosedale (:dmosedale, :dmose)]

shorlander provided me with new assets; i'll have a look here soon...

Comment 4

[Ryan VanderMeulen [:RyanVM]]

I'll take a low-risk fix, but we're building our final beta of the cycle in a few hours and I don't think this needs tracking ahead of that.

Comment 5

[Dan Mosedale (:dmosedale, :dmose)]

Attachment: Bug 1661010 - make Alpenglow theme handle bookmarks + menu bar correctly on win/lin, r?pdahiya

Comment 6

[Dan Mosedale (:dmosedale, :dmose)]

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

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fcf594b1e61f
make Alpenglow theme handle bookmarks + menu bar correctly on win/lin, r=pdahiya

Comment 8

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/fcf594b1e61f

Comment 9

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the "Firefox Alpenglow" color theme is correctly extended to the border line between "Tab Bar" and the displayed page if the "Bookmarks Toolbar" and the "Menu Bar" are enabled by following the steps provided in the description using Firefox Nightly 82.0a1 (Build ID: 20200913213803) on Windows 10 x64 and Ubuntu Linux 18.04.

Comment 10

[Ryan VanderMeulen [:RyanVM]]

I'm going to be respinning the Fx81 RC and this seems like a pretty low-risk ride along. Please nominate this for release approval if you want it included.

Comment 11

[Dan Mosedale (:dmosedale, :dmose)]

Comment on attachment 9175041 [details]
Bug 1661010 - make Alpenglow theme handle bookmarks + menu bar correctly on win/lin, r?pdahiya

Beta/Release Uplift Approval Request

• User impact if declined:

a) When using Alpenglow, new tab button & file menu hard to see in some cases under default Windows theme.

b) When using Alpenglow theme, toolbar looks unpolished/broken in some non-default configurations (menu bar enabled on Windows or Linux)

• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: a) visual contrast bug

[Affected Platforms]:

Windows 7 (x32)
Windows 10 (x64)
Ubuntu Linux 18.04

[Prerequisites]:

Have the OS theme set to “Light”.
Have the “Menu Bar” enabled.

[Steps to reproduce]:

Start the Firefox Browser with the profile from prerequisites.
Navigate to the "about:welcome" page.
Click the “Start Setup” button.
Click the “Not now” button.
Select “Firefox Alpenglow” theme.
Open 10 “New Tab” pages and observe the “Open a new tab” button.
Observe the “File” toolbar button.

[Expected results]:

6. The “Open a new tab” button is visible.
7. The “File” toolbar button is visible.

[Actual results]:
6. The “Open a new tab” button is barely visible.
7. The “File” toolbar button is barely visible.

[Notes]:
The issue is also reproducible on Ubuntu Linux 18.04.
The issue is not reproducible on macOS 10.15.
Attached a recording of the issue.

b) Broken-looking toolbar issue

[Notes]:

In order to reproduce the issue for some Linux distros, set the browser.tabs.drawinTitlebar pref to true.

[Affected Versions]:

Firefox Beta 81.0b1 (Build ID: 20200824150741)
Firefox Nightly 82.0a1 (Build ID: 20200824215021)

[Affected Platforms]:

Windows 10 (x64)
Linux MX 4.19
Ubuntu Linux 18.04

[Prerequisites]:

Have the “Bookmarks Toolbar” enabled
Have the “Menu Bar” enabled.

[Steps to reproduce]:

Start the Firefox Browser with the profile from prerequisites.
Navigate to the “about:welcome” page.
Click the “Start Setup” button.
Click the “Not now” button.
Select “Firefox Alpenglow” theme.
Observe the border line between the displayed page and the “Tab Bar”.

[Expected results]:

The “Firefox Alpenglow” theme color extends to the border line between the displayed page and the “Tab Bar”.

[Actual results]:

There is a white thick line between the border line and “Tab bar”

[Additional Notes]:

The issue is not reproducible on macOS 10.15.
The issue is not reproducible on Windows 7 (x64).
Attached a screenshot of the issue.

• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This low risk because it's SVG theme asset changes, so it can't really break much functionality. That said, it's conceivable that it could regress some other theme-related surface. Talked to shorlander (who did the theme changes), and his thought was that the overall risk here is low.
• String changes made/needed: None

Comment 12

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9175041 [details]
Bug 1661010 - make Alpenglow theme handle bookmarks + menu bar correctly on win/lin, r?pdahiya

Low-risk polish fix. Approved for 81.0rc2.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-release/rev/cb878a37b58a

Comment 14

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the "Firefox Alpenglow" color theme is correctly extended to the border line between "Tab Bar" and the displayed page if the "Bookmarks Toolbar" and the "Menu Bar" are enabled by following the steps provided in the description.

I have also verified that the "File" toolbar button and the "Open a new tab" button are visible with the "Light" OS theme enabled by following the steps provided in comment 11, section "a)".

Bothe verifications were done using Firefox RC 81.0 build 2 (Build ID: 20200917005511) on Windows 10 x64 and Ubuntu Linux 18.04.