Use Codex styles for buttons in mmv.bootstrap

Bug: T340258
Change-Id: I11fdbabae0ed996ed2e830259ccd3e02c3f035fc

.stylelintrc.json

@@ -7,6 +7,7 @@
 	"rules": {
 		"declaration-property-unit-disallowed-list": null,
 		"no-descending-specificity": null,
+		"unit-disallowed-list": null,
 		"selector-class-pattern": null
 	}
 }

extension.json

@@ -101,6 +101,7 @@
 				"mediawiki.storage",
 				"mediawiki.user",
 				"mediawiki.util",
+				"mediawiki.ui.button",
 				"oojs",
 				"jquery.fullscreen",
 				"jquery.color",
@@ -321,10 +322,9 @@
 				"mmv.bootstrap/mmv.bootstrap.less"
 			],
 			"dependencies": [
+				"codex-search-styles",
 				"mediawiki.api",
 				"mediawiki.router",
-				"mediawiki.ui.button",
-				"mediawiki.ui.icon",
 				"mediawiki.Title",
 				"mediawiki.user",
 				"mediawiki.storage",

resources/mmv.bootstrap/mmv.bootstrap.js

@@ -387,36 +387,22 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
 			// eslint-disable-next-line no-jquery/no-global-selector
 			$( '.mw-mmv-filepage-buttons' ).next().addBack().remove();
 
-			const $icon = $( '<span>' ).addClass( 'mw-ui-icon mw-ui-icon-before' );
+			const $mmvButton = $( '<button>' )
+				.addClass( 'mw-mmv-view-expanded cdx-button' )
+				.append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
+				.append( ' ' )
+				.append( mw.message( 'multimediaviewer-view-expanded' ).text() );
 
-			const $link = $( '<a>' )
-				// It won't matter because we catch the click event anyway, but
-				// give the user some URL to see.
-				.prop( 'href', link )
-				.addClass( 'mw-mmv-view-expanded mw-ui-button' );
-
-			const $label = $( '<span>' )
-				.text( mw.message( 'multimediaviewer-view-expanded' ).text() );
-
-			$icon.append( $label ).appendTo( $link );
-
-			const $configLink = $( '<a>' )
-				.prop( 'href', $thumb.closest( 'a' ).prop( 'href' ) )
-				.addClass( 'mw-mmv-view-config mw-ui-button' );
-
-			const $configLabel = $( '<span>' )
-				.text( mw.message( 'multimediaviewer-view-config' ).text() );
-
-			const $configIcon = $( '<span>' )
-				.addClass( 'mw-ui-icon mw-ui-icon-before' )
-				.append( $configLabel )
-				.appendTo( $configLink );
-
-			$configIcon.append( $configLabel ).appendTo( $configLink );
+			const $configButton = $( '<button>' )
+				.attr( 'title', mw.message( 'multimediaviewer-view-config' ).text() )
+				.addClass( 'mw-mmv-view-config cdx-button cdx-button--icon-only' )
+				.append( $( '<span>' ).addClass( 'cdx-button__icon' ) )
+				// U+200B ZERO WIDTH SPACE to accomplish same height as $mmvButton
+				.append( '\u200B' );
 
 			const $filepageButtons = $( '<div>' )
-				.addClass( 'mw-ui-button-group mw-mmv-filepage-buttons' )
-				.append( $link, $configLink );
+				.addClass( 'cdx-button-group mw-mmv-filepage-buttons' )
+				.append( $mmvButton, $configButton );
 
 			// eslint-disable-next-line no-jquery/no-global-selector
 			$( '.fullMedia' ).append(
@@ -432,7 +418,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
 				link: link
 			} );
 
-			$link.on( 'click', () => {
+			$mmvButton.on( 'click', () => {
 				if ( this.statusInfoDialog ) {
 					this.statusInfoDialog.close();
 				}
@@ -440,7 +426,7 @@ const HtmlUtils = require( './mmv.HtmlUtils.js' );
 				return false;
 			} );
 
-			$configLink.on( 'click', () => {
+			$configButton.on( 'click', () => {
 				if ( this.statusInfoDialog ) {
 					this.statusInfoDialog.close();
 				}

resources/mmv.bootstrap/mmv.bootstrap.less

@@ -1,3 +1,5 @@
+@import 'mediawiki.skin.variables.less';
+
 .mw-mmv-overlay {
 	position: fixed;
 	top: 0;
@@ -23,35 +25,19 @@ body.mw-mmv-lightbox-open {
 }
 
 .mw-mmv-filepage-buttons {
+	font-size: 1rem;
 	margin-top: 5px;
 
-	.mw-mmv-view-expanded,
-	.mw-mmv-view-config {
-		display: block;
-		// Work around some weirdness of MW-UI buttons. T127052
-		line-height: inherit;
+	.cdx-button:nth-child(n + 2) {
+		border-left: none;
 	}
 
-	.mw-mmv-view-expanded .mw-ui-icon::before {
-		/* @embed */
-		background-image: url( img/expand.svg );
+	.mw-mmv-view-expanded .cdx-button__icon {
+		.cdx-mixin-css-icon( @cdx-icon-image-gallery, @param-is-button-icon: true );
 	}
 
-	.mw-mmv-view-config .mw-ui-icon::before {
-		/* @embed */
-		background-image: url( img/gear.svg );
-		margin-right: 0;
-		opacity: 0.75;
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-
-	.mw-mmv-view-config {
-		.mw-ui-icon span {
-			display: none;
-		}
+	.mw-mmv-view-config .cdx-button__icon {
+		.cdx-mixin-css-icon( @cdx-icon-settings, @param-is-button-icon: true );
 	}
 }