sortable tables/mw-collapsible no longer causes page jump
authorjdlrobson <jdlrobson@gmail.com>
Wed, 4 Apr 2018 23:19:51 +0000 (16:19 -0700)
committerjdlrobson <jdlrobson@gmail.com>
Wed, 2 May 2018 19:48:25 +0000 (12:48 -0700)
commit8cdfcc5fd4ba36b7c91ac8097390220de230f8ae
treef232e1cebb8d9c2024ff21726cd1f1f3f2c44130
parent20670b2ef91c3afbfacdd0a881648a27be0d282d
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
includes/skins/Skin.php
resources/Resources.php
resources/src/jquery/jquery.makeCollapsible.css
resources/src/jquery/jquery.makeCollapsible.js
resources/src/jquery/jquery.makeCollapsible.styles.less [new file with mode: 0644]
resources/src/jquery/jquery.tablesorter.less
resources/src/jquery/jquery.tablesorter.styles.less [new file with mode: 0644]