1730562 - White flash before about:home/newtab themed background is rendered

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P2)

Description

[Ed Lee :Mardak]

Attachment: opening windows (showing about:home) with white flash

Using the prototype monochromatic purple theme from bug 1725468, opening new windows shows the empty browser background color before new tab page renders with the themed color. This is similar to the regression/fix from bug 1693819 and 1706360 needing to get the content color to match.

https://searchfox.org/mozilla-central/rev/5f81c5091d442d829120e19477ba869ae5219709/browser/themes/shared/tabs.inc.css#18-20

In general, I believe this has been happening for 3rd party themes that set the newtab background color. It's not as bad for opening a new tab as that page is preloaded.

Comment 1

[themr.ghost]

This also happens on the default theme when loading sites, there's a white flash before the site's page starts to load.

Comment 2

[Harry Twyford]

Changing severity to S3 because this is a cosmetic issue, but the flashing could be considered a minor accessibility issue.

Comment 3

[Harry Twyford]

There are two issues here:

1. --tabpanel-background-color should be set to --newtab-background color. This has side effects, since we're now flashing a saturated color right before showing about:blank. Maybe we only do this if the homepage is set to Firefox Home.
2. We don't theme the new tab page until after pageshow. That means we flash one of the new tab page's default backgrounds before styling the background. This second point accounts for a larger part of the flash than the first.

Comment 4

[Harry Twyford]

To elaborate on the second point, the value of the ntp_background theme API property is not delivered in time for the first paint of about:home, so the default background value of white or black is drawn instead. ntp_background is delivered moments later, causing flashing. We need to speed up setting --newtab-background-color in the about:home process so no flashing occurs.

The current way ntp_background is delivered is:

1. When the parent process reads the current theme, its content-specific values are loaded into a shared data store.
2. When DOMContentLoaded fires in the content process or this shared data store is changed, we dispatch a LightwightTheme:Set event in the content process.
3. The content process recieves the event containing the theme's color values and updates :root.

I recorded a profile where I set the newtab's default background color to red to make the order of events more obvious. I also set the tabpanel background equal to --newtab-background-color, so you'll see the new window uses the correct background color; we flash when we start to load about:home: https://share.firefox.dev/3AbfPcm. One can also see the LightweightTheme:Set event occurs after the red paint.

Comment 5

[Harry Twyford]

mconley explained that this may be due to sharedData's laziness in pushing out new data to the content process. He recommended flushing sharedData, which fixed problem #2 in comment 3.

Comment 6

[Harry Twyford]

[Tracking Requested - why for this release]:
Pre-existing a11y flashing issue that becomes more apparent with the new themes. Patch is nearly done.

Comment 7

[Harry Twyford]

Attachment: Bug 1730562 - White flash before about:home/newtab themed background is rendered. r?dao!,mconley

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8cb1af579589
White flash before about:home/newtab themed background is rendered. r=mconley,dao

Comment 9

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/8cb1af579589

Comment 10

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:harry, is this bug important enough to require an uplift?
If not please set status_beta to wontfix.

For more information, please visit auto_nag documentation.

Comment 11

[Harry Twyford]

Comment on attachment 9244373 [details]
Bug 1730562 - White flash before about:home/newtab themed background is rendered. r?dao!,mconley

Beta/Release Uplift Approval Request

• User impact if declined: Users with themes that style the new tab page background will see white flashes. Most notably, this includes the new colorway themes.
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Well understood patch written in CSS+ some minor JS. No regressions reported in 5 days on Nightly.
• String changes made/needed:

Comment 12

[Dianna Smith [:diannaS]]

Approved for 94.0b6

Comment 13

[Ryan VanderMeulen [:RyanVM]]

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

Comment 14

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (95.0a1 Build ID - 20211019215100) and the latest Firefox Beta (94.0b8 Build ID - 20211019190240) installed on Windows 10 x64, macOS 11.6, and Linux Mint 20.2 x64. Now I can confirm that there is no white flash before about:home/newtab themed background is rendered while a "Monochromatic" theme is enabled.