1603449 - Sync layout flush at the end of page load due to poor interaction between reader mode and add-ons

Status: NEW

(Toolkit :: Reader Mode, defect, P3)

Description

[Florian Quèze [:florian]]

See this profile https://perfht.ml/2t6umZS and look at the 'Styles' marker (the light blue one).

onPaintWhenWaitedFor (AboutReaderChild.jsm) triggered off the MozAfterPaint event causes a sync layout flush when isNodeVisible (Readerable.jsm) calls element.clientHeight.

Layout has been invalidated by:
inject/cssPromise< [resource://gre/modules/ExtensionContent.jsm:507:54]
runSafeSyncWithoutClone [resource://gre/modules/ExtensionCommon.jsm:73:32]
nsDOMWindowUtils::AddSheet(nsIPreloadedStyleSheet*, unsigned int) [XUL]
mozilla::dom::Document::AddAdditionalStyleSheet(mozilla::dom::Document::additionalSheetType, mozilla::StyleSheet*) [XUL]

This CSS is likely injected by uBlock Origin.

Comment 1

[:Gijs (he/him)]

The simplest solution here is going to be:

1. bring back the old isNodeVisible helper that uses getBoundsWithoutFlushing.
2. optionally, move getBoundsWithoutFlushing to Element as a ChromeOnly method, cf. bug 1477239, to reduce the xpconnect overhead, which was a concern in the discussion in https://phabricator.services.mozilla.com/D3687#inline-14071 .

Because this is in isProbablyReaderable, which runs on almost every page users will open (ie not only when actually using reader mode), this is probably a fairly serious performance concern... but P3 for reader mode because it's unstaffed atm. We can probably prio from an fxperf perspective.

Comment 2

[Emma Malysz]

Marking as fxperf:p2 because of how frequently this problem occurs