jquery.tablesorter: Fix pre-JS selector to match wikitext-generated sortable tables

Also pre-load tablesorter styles when output contains 'sortable'.

The :not( jquery-tablesorter ) selector removes the pre-JS styles
once the code has run, so any errors in the CSS selector will
be fixed at that point. For the majority of simple cases there
should be no FOUC.

Bug: T218781
Change-Id: Ifcb908ed4f3010d10c84f0f6a0f3b8692bec964b

diff --git a/includes/skins/Skin.php b/includes/skins/Skin.php
index 7ac2927..6ab2468 100644 (file)
--- a/includes/skins/Skin.php
+++ b/includes/skins/Skin.php
@@ -216,6 +216,7 @@ abstract class Skin extends ContextSource {
                // Preload jquery.tablesorter for mediawiki.page.ready
                if ( strpos( $out->getHTML(), 'sortable' ) !== false ) {
                        $modules['content'][] = 'jquery.tablesorter';
+                       $modules['styles']['content'][] = 'jquery.tablesorter.styles';
                }
 
                // Preload jquery.makeCollapsible for mediawiki.page.ready

diff --git a/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less
index c941da0..589ae23 100644 (file)
--- a/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less
+++ b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less
@@ -2,7 +2,13 @@
 
 /* Table Sorting */
 
-.client-js .sortable:not( .jquery-tablesorter ) > thead > :last-of-type > th:not( .unsortable ),
+// Reserve space for table sortable controls
+// This selector is not perfect as it will not correctly handle cases with
+// merged header cells, so ensure it is removed after the JS has run by using
+// the :not( .jquery-tablesorter ) selector.
+// It will still prevent a visible jump in the majority of simpler cases.
+// The second selector in this rule is for after the JS has run.
+.client-js .sortable:not( .jquery-tablesorter ) > * > tr:first-child > th:not( .unsortable ),
 .jquery-tablesorter th.headerSort {
        .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
        cursor: pointer;