Merge "Sort user groups in Special:Listusers"

[lhc/web/wiklou.git] / resources / src / jquery / jquery.makeCollapsible.js

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index aa76d6d..503e3a6 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -1,5 +1,8 @@
 /**
  * jQuery makeCollapsible
+ * Note: To avoid performance issues such as reflows, several styles are
+ * shipped in mediawiki.makeCollapsible.styles to reserve space for the toggle control. Please
+ * familiarise yourself with that CSS before making any changes to this code.
  *
  * Dual licensed:
  * - CC BY 3.0 <http://creativecommons.org/licenses/by/3.0>
@@ -8,7 +11,6 @@
  * @class jQuery.plugin.makeCollapsible
  */
 ( function ( $, mw ) {
-
        /**
         * Handler for a click on a collapsible toggler.
         *
@@ -243,7 +245,11 @@
                        if ( $collapsible.data( 'mw-made-collapsible' ) ) {
                                return;
                        } else {
-                               $collapsible.data( 'mw-made-collapsible', true );
+                               // Let CSS know that it no longer needs to worry about flash of unstyled content.
+                               // This will allow mediawiki.makeCollapsible.styles to disable temporary pseudo elements, that
+                               // are needed to avoid a flash of unstyled content.
+                               $collapsible.addClass( 'mw-made-collapsible' )
+                                       .data( 'mw-made-collapsible', true );
                        }
 
                        // Use custom text or default?
@@ -264,14 +270,12 @@
                        buildDefaultToggleLink = function () {
                                return $( '<a class="mw-collapsible-text"></a>' )
                                        .text( collapseText )
-                                       .wrap( '<span class="mw-collapsible-toggle"></span>' )
+                                       .wrap( '<span class="mw-collapsible-toggle mw-collapsible-toggle-default"></span>' )
                                        .parent()
                                        .attr( {
                                                role: 'button',
                                                tabindex: 0
                                        } )
-                                       .prepend( '<span>[</span>' )
-                                       .append( '<span>]</span>' )
                                        .on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
                        };