Skin: Only load jquery.makeCollapsible if needed

Currently, module 'jquery.makeCollapsible' is loaded on all pages
regarless of whether the page contains any collapsible elements.

It is required via 'mediawiki.page.ready'. Change this to lazy-loading
when needed only.

However, this lazy-load is discovered very late (after page ready,
after modules ready). To avoid regressing UX with an annoying reflow
of content and a very late hiding of collapsed elements, still
enqueue it in the main module loader by default on pages that
contain collapsible content server-side.

Bug: T159911
Change-Id: I4703ecd52d2d60207ba39108a4b3ef4aa1570965

diff --git a/includes/skins/Skin.php b/includes/skins/Skin.php
index c61f5e9..52678d4 100644 (file)
--- a/includes/skins/Skin.php
+++ b/includes/skins/Skin.php
@@ -179,6 +179,11 @@ abstract class Skin extends ContextSource {
                        $modules['content'][] = 'jquery.tablesorter';
                }
 
+               // Preload jquery.makeCollapsible for mediawiki.page.ready
+               if ( strpos( $out->getHTML(), 'mw-collapsible' ) !== false ) {
+                       $modules['content'][] = 'jquery.makeCollapsible';
+               }
+
                // Add various resources if required
                if ( $wgUseAjax && $wgEnableAPI ) {
                        if ( $wgEnableWriteAPI && $user->isLoggedIn()

diff --git a/resources/Resources.php b/resources/Resources.php
index 0c3d27d..8b1b2ca 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1671,7 +1671,6 @@ return [
                'dependencies' => [
                        'jquery.accessKeyLabel',
                        'jquery.checkboxShiftClick',
-                       'jquery.makeCollapsible',
                        'jquery.placeholder',
                        'jquery.mw-jump',
                ],

diff --git a/resources/src/mediawiki/page/ready.js b/resources/src/mediawiki/page/ready.js
index 860fcf5..f11bbde 100644 (file)
--- a/resources/src/mediawiki/page/ready.js
+++ b/resources/src/mediawiki/page/ready.js
@@ -12,15 +12,20 @@
        }
 
        mw.hook( 'wikipage.content' ).add( function ( $content ) {
-               var $sortable;
+               var $sortable, $collapsible;
 
                // Run jquery.placeholder polyfill if placeholder is not supported
                if ( !supportsPlaceholder ) {
                        $content.find( 'input[placeholder]' ).placeholder();
                }
 
-               // Run jquery.makeCollapsible
-               $content.find( '.mw-collapsible' ).makeCollapsible();
+               $collapsible = $content.find( '.mw-collapsible' );
+               if ( $collapsible.length ) {
+                       // Preloaded by Skin::getDefaultModules()
+                       mw.loader.using( 'jquery.makeCollapsible', function () {
+                               $collapsible.makeCollapsible();
+                       } );
+               }
 
                $sortable = $content.find( 'table.sortable' );
                if ( $sortable.length ) {