Set initial loading content page color to non-white when using dark mode

[cpeterso]

Why/User Benefit/User Problem

Currently opening a new page temporarily shows a pure white page before loading actual content regardless of the browser theme.

What/Requirements

Fenix does not give a way to control this while on Windows this can be controlled by browser.in-content.dark-mode pref (which is on by default on Nightly 71 and makes the page gray).

The white flash is the page clear color, which Fenix can already set clear color using GV API CompositorController.setClearColor.

Fenix clear color should probably change the clear color depending on Fenix's or Android's dark mode settings.

This bug was originally filed in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1589576

Acceptance Criteria (how do I know when I’m done?)

Opening a new page when dark mode is enabled does not flash a pure white page before loading actual content.

┆Issue is synchronized with this Jira Task

[nt1m]

@cpeterso browser.in-content.dark-mode is enabled by default even on Release since Firefox 70. See: https://bugzilla.mozilla.org/show_bug.cgi?id=1565051

I think Fenix should just follow the theme that's chosen by the user though.

[ekager]

From Bugzilla:

The white flash is the page clear color, which Fenix can already set clear color using GV API CompositorController.setClearColor.

[ekager]

Chatted with the GV team on Riot and unfortunately the above solution likely does not work anymore with WebRender enabled. FxR uses a dummy surface with the correct color until they get a onFirstContentfulPaint and that's probably the direction we'd have to go as well to fix this.

[dholbert]

Here's a screencast of what this looks like, FWIW:
https://www.dropbox.com/s/zne4d8tdfwybtnj/flash-of-white.mp4?dl=0

There's a flash of white (due to this bug) at around 0:04, while the keyboard is disappearing.

[532910]

There was a gif in #10158

[ekager]

Opened AC issue mozilla-mobile/android-components#6757

[Kreuger]

@ekager Hey is there any update on this? I see you submitted 2 commits for this. Does that mean it's being improved?

[ekager]

@Kreuger yeah I have a work in progress that will hide the web content until the content appears so it should improve the behavior a bit. Unfortunately on a site that doesn't support dark mode and is very white (ie CNN) it'll still be jarring when the content appears

[Kreuger]

@ekager Ok thanks for the update!

[B0pol]

It's definitively greater! But sadly not fixed entirely.
I've noticed it's fixed in two cases

• top sites
• search query

But it still happens a when

• opening a new tab with long press on a link -> new tab
• killing the tab you've just opened in the last step with back button
  (No gif for these two situations)
• opening a new tab via an external app (see the gif 1 below)
• exiting the settings (gif 3)
• restoring the browser (gif 4)

GIF 1: Via an external app, it shows that you have a very short flash the first time, and a looong flash the next time you open it (and every next time in fact).

(I enabled dark reader because it makes the white flash more noticeable, but it's also reproducible without dark reader).
I'm using nightly 200516.

Gif 2: slowed down to show the first short flash: you can notice on the GIF that the color is perfect, and then it gets suddenly whiter (but not entirely) and it goes back to the right color.

Gif 3:
When you exit settings:

Gif 4: When you restore the browser:

[ShalokShalom]

All loading screens all white all the time with all dark themes.
Mobile and desktop.

[mbestavros]

@ekager Not sure if this is the right issue to report it, but --

I just updated to the latest Fenix Nightly:

Nightly 201024 17:01 (Build #2015771595)
AC: 64.0.20201023143136, d78abdf9f
GV: 84.0a1-20201022093646
AS: 63.0.0

The hidden pref to "Wait until first paint to show page content" seems to be gone in this build. My understanding from reading this issue and related Bugzilla issues is that this was eventually intended once a better fix had been implemented in GeckoView/Android Components etc. My hope was that meant the fix had made it to Nightly -- but unfortunately, I'm still noticing white flashes all over the place. Loading pages, opening new tabs (sometimes) -- it's happening in lots of places it didn't when the experimental feature was still available.

Just FYI, since it seems like there is work in this area happening right now.

[ekager]

Yes, this is expected we want to remove the hacks that the hidden pref was working around. Instead, we can now change the "clear color" of the engine, but there is still currently a short flash. One followup issue filed is mozilla-mobile/android-components#8752

[LaurentiuApahideanSV]

Verified as fixed on Firefox Preview Nightly 201102 (Build #2015773227).

Devices used:

• Samsung Galaxy S9 (Android 8.0.0)
• OnePlus 6T (Android 9)

[crisalis2]

Shouldn't page color match Firefox's dark UI color? Right now they are two very different shades of gray.
Edit: Also, reader view's dark background is yet another shade of gray. Shouldn't all of them be the same color? Should I open another issue instead of commenting it here?

[opusforlife2]

My eyes thank you every day, @ekager.

[strugee]

@crisalis2 yes, open a new issue and reference this one in it.