1836818 - Fix FOUC issues encountered when using an external stylesheet in the about:logins timeline component

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Hanna Jones [:hjones]]

There is work being done in Bug 1834533 to move away from inline styles in login-timeline.mjs in favour of using an external stylesheet. We now have consensus that using an external stylesheet is the preferred approach for styling new components, but that login timeline bug is still blocked by an FOUC caused by that approach, since loading the stylesheet doesn't block the paint of the shadow root.

A similar issue was encountered when we were implementing the moz-toggle element, and was fixed in Bug 1799200 via a patch to sync-load stylesheets for shadow trees in chrome documents. We're curious if the same kind of platform level fix might be possible in this case. If not we may have to try a different approach.

Comment 1

[Hanna Jones [:hjones]]

Attachment: fouc.gif

Hey :emilio curious if you have time to take a look at this since your implemented the platform workaround that enabled us to use external stylesheets with our Lit based web components elsewhere. To reproduce the issue you can:

• Apply this patch locally: https://phabricator.services.mozilla.com/D178962
• Navigate to about:logins and create a couple of login items if your list is empty
• Refresh the page a few times with one of those login items selected and observe the timeline element. An noticeable FOUC seems to reproduce pretty consistently, anecdotally more consistently if you hard refresh. It tends to manifest as a flash of a big black SVG circle - I've attached a super slowed down GIF of this for context.

I've filed this as a separate bug, but some of the discussion in Bug 1834533 might also be relevant, in particular :mstriemer's comment here (the tl;dr on the rest of the discussion is that everyone has agreed to use external stylesheets as long as the FOUC issue is addressable).

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1836818 - Tweak chrome document check so that it also applies to about:logins. r=smaug,#layout

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/78f4ea7de456
Tweak chrome document check so that it also applies to about:logins. r=smaug

Comment 4

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/78f4ea7de456