Add (i) info icon to collapsible replacement message

This avoids pulling in the entirety of OOjs, with the disadvantage
that we have to copy a little bit of CSS. I copied parts of this
patch from I2a28666.

There might be a better way to do this, with less code. E.g. is
there a better way to construct these HTML elements?

Bug: T220208
Change-Id: I024155f3ff0f57de1d68bbaf37bfb9e81e692bd0

extension.json

@@ -112,6 +112,12 @@
 		}
 	},
 	"ResourceModules": {
+		"ext.popups.icons": {
+			"class": "ResourceLoaderOOUIIconPackModule",
+			"icons": [
+				"infoFilled"
+			]
+		},
 		"ext.popups.images": {
 			"selector": ".mw-ui-icon-{name}:before",
 			"class": "ResourceLoaderImageModule",
@@ -202,6 +208,7 @@
 				"popups-refpreview-jump-to-reference"
 			],
 			"dependencies": [
+				"ext.popups.icons",
 				"ext.popups.images",
 				"mediawiki.experiments",
 				"mediawiki.jqueryMsg",

src/ui/templates/referencePreview/referencePreview.js

@@ -67,8 +67,15 @@ export function renderReferencePreview(
 
 	// 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' ) );
+		.addClass( 'mwe-collapsible-placeholder' )
+		.append(
+			$( '<span>' )
+				.addClass( 'mw-ui-icon mw-ui-icon-element mw-ui-icon-infoFilled' ),
+			$( '<div>' )
+				.addClass( 'mwe-collapsible-placeholder-label' )
+				.text( mw.msg( 'popups-refpreview-collapsible-placeholder' ) )
+		)
+	);
 
 	// Undo remaining effects from the jquery.tablesorter.js plugin
 	$el.find( 'table.sortable' ).removeClass( 'sortable jquery-tablesorter' )

src/ui/templates/referencePreview/referencePreview.less

@@ -6,23 +6,23 @@
 .mwe-popups.mwe-popups-type-reference {
 	.mwe-popups-title {
 		margin: 0 0 @popupPadding;
+	}
 
-		.mw-ui-icon {
-			vertical-align: middle;
+	.mw-ui-icon {
+		vertical-align: middle;
 
-			&.mw-ui-icon-element {
-				min-width: @iconSize;
-				width: @iconSize;
+		&.mw-ui-icon-element {
+			min-width: @iconSize;
+			width: @iconSize;
 
-				&:before {
-					margin: 0;
-				}
+			&:before {
+				margin: 0;
 			}
+		}
 
-			&.mw-ui-icon-reference-generic {
-				/* align narrow icon with the text */
-				margin-left: -2px;
-			}
+		&.mw-ui-icon-reference-generic {
+			/* align narrow icon with the text */
+			margin-left: -2px;
 		}
 	}
 
@@ -63,6 +63,17 @@
 		.mwe-collapsible-placeholder {
 			font-weight: bold;
 			margin: 1em 0;
+			position: relative;
+
+			// This mirrors .oo-ui-iconElement-icon
+			.mw-ui-icon {
+				position: absolute;
+			}
+
+			// This mirrors .oo-ui-messageWidget > .oo-ui-labelElement-label
+			.mwe-collapsible-placeholder-label {
+				margin-left: 2em;
+			}
 		}
 	}
 

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.3 * 1024,
-		maxEntrypointSize: 42.3 * 1024,
+		maxAssetSize: 42.5 * 1024,
+		maxEntrypointSize: 42.5 * 1024,
 
 		// The default filter excludes map files but we rename ours.
 		assetFilter: ( filename ) => !filename.endsWith( srcMapExt )