Use OOUI instead of jquery.ui for error popup

Use OOUI's PopupWidget to display error tracebacks/details instead of a
deprecated jquery.ui dialog.

Bug: T319361
Change-Id: Ie7796c853782de9874595674fe250f6702db717e

extension.json

@@ -57,7 +57,7 @@
 			"scripts": "ext.scribunto.errors.js",
 			"styles": "ext.scribunto.errors.css",
 			"dependencies": [
-				"jquery.ui"
+				"oojs-ui-widgets"
 			],
 			"messages": [
 				"scribunto-parser-dialog-title"

modules/ext.scribunto.errors.css

@@ -6,3 +6,9 @@
 .scribunto-error:focus {
 	text-decoration: underline;
 }
+
+/* Make the popup heading more prominent */
+.scribunto-error-label {
+	font-size: larger;
+	font-weight: bold;
+}

modules/ext.scribunto.errors.js

@@ -3,18 +3,13 @@
 	mw.hook( 'wikipage.content' ).add( function () {
 		var errors = mw.config.get( 'ScribuntoErrors' ),
 			regex = /^mw-scribunto-error-(\d+)/,
-			$dialog = $( '<div>' );
+			popup;
 
 		if ( !errors ) {
 			mw.log( 'mw.scribunto.errors: ScribuntoErrors does not exist in mw.config' );
 			errors = [];
 		}
 
-		$dialog.dialog( {
-			title: mw.msg( 'scribunto-parser-dialog-title' ),
-			autoOpen: false
-		} );
-
 		$( '.scribunto-error' ).each( function ( index, span ) {
 			var errorId,
 				matches = regex.exec( span.id );
@@ -23,17 +18,27 @@
 				return;
 			}
 			errorId = parseInt( matches[ 1 ], 10 );
-			$( span ).on( 'click', function ( e ) {
+			var $span = $( span );
+			$span.on( 'click', function () {
 				var error = errors[ errorId ];
 				if ( typeof error !== 'string' ) {
 					mw.log( 'mw.scribunto.errors: error ' + matches[ 1 ] + ' not found.' );
 					return;
 				}
-				$dialog
-					.dialog( 'close' )
-					.html( error )
-					.dialog( 'option', 'position', [ e.clientX + 5, e.clientY + 5 ] )
-					.dialog( 'open' );
+
+				if ( !popup ) {
+					popup = new OO.ui.PopupWidget( {
+						padded: true,
+						head: true,
+						label: $( '<div>' )
+							.text( mw.msg( 'scribunto-parser-dialog-title' ) )
+							.addClass( 'scribunto-error-label' )
+					} );
+					OO.ui.getDefaultOverlay().append( popup.$element );
+				}
+				popup.$body.html( error );
+				popup.setFloatableContainer( $span );
+				popup.toggle( true );
 			} );
 		} );
 	} );