HomePhabricator

sortable tables/mw-collapsible no longer causes page jump

Description

sortable tables/mw-collapsible no longer causes page jump

Relatively straightforwardly - we move padding-right definition into
top styles to avoid a reflow

This turned out to be a little tricker than first imagined.
The code in jquery.makeCollapsible.js finds elements marked up
as collapsible and then 1) collapses them 2) inserts a toggle button.

To avoid a reflow on the page, we have to make sure the collapsed content
is collapsed prior to the code running and reserve space for the toggle
button.

The toggle button is tricky as it is subject to i18n. However we can
access this label via a LESS variable and use a pseudo element (which
is supported by the majority of modern browsers) to preserve the space
we need. When the JavaScript has loaded there is no need for that CSS
any more.

Note on slow connections, collapsed content will not be accessible until
the JavaScript has fully loaded, however this is arguably less of a problem
then the existing reflows.

Note, there are many many many usages of mw-collapsible, because of this
this does not claim to address all reflows in all usages - but it does provide
support for the more widespread usages.

Follow up patches can be added for specific situations - for example table
of contents toggle.

Bug: T42792
Bug: T42812
Depends-On: I3388c3c4f91cdbab11e89cdc95973b688d3f1ce7
Change-Id: If9c8f0974e3a4b08e4a66d37f7f5adf67d73054e

Details

Provenance
JdlrobsonAuthored on Apr 4 2018, 11:19 PM
Parents
rMW20670b2ef91c: Merge "Cleanup the element matches in doBlockLevels a bit"
Branches
Unknown
Tags
Unknown
ChangeId
If9c8f0974e3a4b08e4a66d37f7f5adf67d73054e