Handle collapsible & sortable elements in reference popups

Elements that are marked as collapsible (often tables, but can
actually be anything) are most certainly marked as such because
they are big and don't fit in a popup.

Another plugin makes tables sortable.

In both cases non-functional UI elements appear in the popup.
We decided:
* Hide collapsible elements (no matter if currently collapsed
  or not), and show a placeholder text instead.
* Remove sortable arrows.

This is a baseline patch that solves everything, except the
(i) icon is missing. This will be added in the next patch.

Bug: T220208
Change-Id: I58f3036bf4988d0ebe5716b0a54506446fca10c3

extension.json

@@ -198,6 +198,7 @@
 				"popups-refpreview-journal",
 				"popups-refpreview-news",
 				"popups-refpreview-web",
+				"popups-refpreview-collapsible-placeholder",
 				"popups-refpreview-jump-to-reference"
 			],
 			"dependencies": [

i18n/en.json

@@ -30,6 +30,7 @@
 	"popups-refpreview-journal": "Journal reference",
 	"popups-refpreview-news": "News reference",
 	"popups-refpreview-web": "Web reference",
+	"popups-refpreview-collapsible-placeholder": "This reference includes a graphic which does not fit in the preview.",
 	"popups-refpreview-jump-to-reference": "Jump to reference",
 	"popups-refpreview-user-preference-label": "Reference previews (get quick previews of footnotes)",
 	"popups-refpreview-beta-feature-message": "Reference Previews",

i18n/qqq.json

@@ -40,6 +40,7 @@
 	"popups-refpreview-journal": "Heading for a popup previewing a citation from a journal.\n{{Identical|Journal}}",
 	"popups-refpreview-news": "Heading for a popup previewing a citation from the news.\n{{Identical|News}}",
 	"popups-refpreview-web": "Heading for a popup previewing a citation from a website.\n{{Identical|Website}}",
+	"popups-refpreview-collapsible-placeholder": "Placeholder text for collapsible tables, templates, or other large elements inside of a reference.",
 	"popups-refpreview-jump-to-reference": "Label for a link at the bottom of a reference popup that makes the focus jump down to the original footnote on the page.",
 	"popups-refpreview-user-preference-label": "Label for the user option to enable or disable reference preview popups",
 	"popups-refpreview-beta-feature-message": "Label for the Reference Previews Beta feature.",

package.json

@@ -67,7 +67,7 @@
 	"bundlesize": [
 		{
 			"path": "resources/dist/index.js",
-			"maxSize": "13.7kB"
+			"maxSize": "13.8kB"
 		}
 	]
 }

src/ui/templates/referencePreview/referencePreview.js

@@ -65,6 +65,15 @@ export function renderReferencePreview(
 		a.rel = `${a.rel ? `${a.rel} ` : ''}noopener`;
 	} );
 
+	// We assume elements that benefit from being collapsible are to large for the popup
+	$el.find( '.mw-collapsible' ).replaceWith( () => $( '<div>' )
+		.text( mw.msg( 'popups-refpreview-collapsible-placeholder' ) )
+		.addClass( 'mwe-collapsible-placeholder' ) );
+
+	// Undo remaining effects from the jquery.tablesorter.js plugin
+	$el.find( 'table.sortable' ).removeClass( 'sortable jquery-tablesorter' )
+		.find( '.headerSort' ).removeClass( 'headerSort' ).attr( { tabindex: null, title: null } );
+
 	if ( model.sourceElementId ) {
 		$el.find( 'a.mwe-popups-read-link' ).on( 'click', ( event ) => {
 			event.stopPropagation();

src/ui/templates/referencePreview/referencePreview.less

@@ -59,6 +59,11 @@
 		&.mwe-popups-fade-out .mwe-popups-fade {
 			opacity: 1;
 		}
+
+		.mwe-collapsible-placeholder {
+			font-weight: bold;
+			margin: 1em 0;
+		}
 	}
 
 	.mwe-popups-read-link {

tests/node-qunit/ui/renderer.test.js

@@ -330,6 +330,24 @@ QUnit.test( 'createReferencePreview(model)', ( assert ) => {
 	);
 } );
 
+QUnit.test( 'createReferencePreview collapsible/sortable handling', ( assert ) => {
+	const model = {
+			url: '',
+			extract: '<table class="mw-collapsible"></table>' +
+				'<table class="sortable"><th class="headerSort" tabindex="1" title="Click here"></th></table>',
+			type: previewTypes.TYPE_REFERENCE
+		},
+		preview = renderer.createPreviewWithType( model );
+
+	assert.notOk( preview.el.find( '.mw-collapsible, .sortable, .headerSort' ).length );
+	assert.notOk( preview.el.find( 'th' ).attr( 'tabindex' ) );
+	assert.notOk( preview.el.find( 'th' ).attr( 'title' ) );
+	assert.strictEqual(
+		preview.el.find( '.mwe-collapsible-placeholder' ).text(),
+		'<popups-refpreview-collapsible-placeholder>'
+	);
+} );
+
 QUnit.test( 'createReferencePreview escapes URLs safely', ( assert ) => {
 	const model = {
 			url: '#custom_id <"\'>',

webpack.config.js

@@ -112,8 +112,8 @@ module.exports = ( env, argv ) => ( {
 		// Minified uncompressed size limits for chunks / assets and entrypoints. Keep these numbers
 		// up-to-date and rounded to the nearest 10th of a kibibyte so that code sizing costs are
 		// well understood. Related to bundlesize minified, gzipped compressed file size tests.
-		maxAssetSize: 42.1 * 1024,
-		maxEntrypointSize: 42.1 * 1024,
+		maxAssetSize: 42.3 * 1024,
+		maxEntrypointSize: 42.3 * 1024,
 
 		// The default filter excludes map files but we rename ours.
 		assetFilter: ( filename ) => !filename.endsWith( srcMapExt )