Merge "Revert gallery changes in 1.40.0-wmf.18" into wmf/1.40.0-wmf.18wmf/1.40.0-wmf.18

7 files changed, 26 insertions, 117 deletions

diff --git a/includes/gallery/SlideshowImageGallery.php b/includes/gallery/SlideshowImageGallery.php
index eec11c23d5eb..6bbea8762d93 100644
--- a/includes/gallery/SlideshowImageGallery.php
+++ b/includes/gallery/SlideshowImageGallery.php
@@ -28,20 +28,6 @@ class SlideshowImageGallery extends TraditionalImageGallery {
 	}
 
 	/**
-	 * @inheritDoc
-	 */
-	protected function getHtmlItemAttributes( $thumb, $width, $alt = '' ) {
-		if ( !$thumb ) {
-			return parent::getHtmlItemAttributes( $thumb, $width, $alt );
-		}
-
-		return parent::getHtmlItemAttributes( $thumb, $width, $alt ) + [
-			'data-alt' => $alt,
-			'data-src' => $thumb->getUrl(),
-		];
-	}
-
-	/**
 	 * Add javascript adds interface elements
 	 * @return array
 	 */
diff --git a/includes/gallery/TraditionalImageGallery.php b/includes/gallery/TraditionalImageGallery.php
index 1371de91d660..0c308773aca0 100644
--- a/includes/gallery/TraditionalImageGallery.php
+++ b/includes/gallery/TraditionalImageGallery.php
@@ -28,21 +28,6 @@ use MediaWiki\MediaWikiServices;
 
 class TraditionalImageGallery extends ImageGalleryBase {
 	/**
-	 * Obtain the HTML element attributes for the list item.
-	 *
-	 * @param MediaTransformOutput|false $thumb
-	 * @param string $width
-	 * @param string $alt
-	 * @return array
-	 */
-	protected function getHtmlItemAttributes( $thumb, $width, $alt = '' ) {
-		return [
-			'class' => 'gallerybox',
-			'style' => 'width: ' . $width,
-		];
-	}
-
-	/**
 	 * Return a HTML representation of the image gallery
 	 *
 	 * For each image in the gallery, display
@@ -247,7 +232,8 @@ class TraditionalImageGallery extends ImageGalleryBase {
 			$gbWidth = $this->getGBWidthOverwrite( $thumb ) ?: $this->getGBWidth( $thumb ) . 'px';
 			# Weird double wrapping (the extra div inside the li) needed due to FF2 bug
 			# Can be safely removed if FF2 falls completely out of existence
-			$output .= "\n\t\t" . Html::openElement( 'li', $this->getHtmlItemAttributes( $thumb, $gbWidth, $alt ) )
+			$output .= "\n\t\t" . '<li class="gallerybox" style="width: '
+				. $gbWidth . '">'
 				. ( $enableLegacyMediaDOM ? '<div style="width: ' . $gbWidth . '">' : '' )
 				. $thumbhtml
 				. $galleryText
@@ -294,9 +280,7 @@ class TraditionalImageGallery extends ImageGalleryBase {
 		# its absence, see: https://phabricator.wikimedia.org/T3765
 		# -Ævar
 
-		return "\n\t\t\t" . Html::openElement( 'div', [
-			'class' => 'gallerytext',
-		] ) . "\n"
+		return "\n\t\t\t" . '<div class="gallerytext">' . "\n"
 			. $galleryText
 			. "\n\t\t\t</div>";
 	}
diff --git a/resources/Resources.php b/resources/Resources.php
index 9eddb7a39267..3e0b98341293 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1647,7 +1647,7 @@ return [
 			'mediawiki.page.gallery.styles',
 			'mediawiki.util'
 		],
-		'targets' => [ 'desktop', 'mobile' ],
+		'targets' => [ 'desktop' ],
 	],
 	'mediawiki.page.gallery.styles' => [
 		'styles' => [
@@ -1670,8 +1670,7 @@ return [
 		],
 		'messages' => [
 			'gallery-slideshow-toggle'
-		],
-		'targets' => [ 'desktop', 'mobile' ],
+		]
 	],
 	'mediawiki.page.ready' => [
 		'localBasePath' => "$wgBaseDirectory/resources/src/mediawiki.page.ready",
diff --git a/resources/src/mediawiki.page.gallery.slideshow.js b/resources/src/mediawiki.page.gallery.slideshow.js
index 927fb1f64ee4..0de3a67b31a5 100644
--- a/resources/src/mediawiki.page.gallery.slideshow.js
+++ b/resources/src/mediawiki.page.gallery.slideshow.js
@@ -41,7 +41,6 @@
 			this.showCurrentImage();
 			return false;
 		}.bind( this ) );
-		this.$gallery.addClass( 'mw-gallery-slideshow-ooui' );
 	};
 
 	/* Properties */
@@ -213,11 +212,7 @@
 			.removeAttr( 'height' );
 
 		// Stretch image to take up the required size
-		var imageHeight = this.imageHeight - this.$imgCaption.outerHeight();
-		this.$img.attr( 'height', imageHeight );
-		// also add to the image above in case the image exhibits responsive behaviours
-		// e.g. skin sets height to 100%.
-		this.$img.parent( 'a.image' ).height( imageHeight );
+		this.$img.attr( 'height', ( this.imageHeight - this.$imgCaption.outerHeight() ) + 'px' );
 
 		// Make the image smaller in case the current image
 		// size is larger than the original file size.
@@ -228,14 +223,10 @@
 				info.thumbwidth < this.$img.width() ||
 				info.thumbheight < this.$img.height()
 			) {
-				var attrs = {
-					width: info.thumbwidth,
-					height: info.thumbheight
-				};
-				this.$img.attr( attrs );
-				// also add to the image above in case the image exhibits responsive behaviours
-				// e.g. skin sets height to 100%.
-				this.$img.parent( 'a.image' ).css( attrs );
+				this.$img.attr( {
+					width: info.thumbwidth + 'px',
+					height: info.thumbheight + 'px'
+				} );
 			}
 		}.bind( this ) );
 	};
@@ -248,8 +239,6 @@
 	mw.GallerySlideshow.prototype.showCurrentImage = function ( init ) {
 		var $thumbnail, $imgLink,
 			$imageLi = this.getCurrentImage(),
-			thumbAlt = $imageLi.data( 'alt' ),
-			thumbUrl = $imageLi.data( 'src' ),
 			$caption = $imageLi.find( '.gallerytext' );
 
 		// The order of the following is important for size calculations
@@ -260,15 +249,12 @@
 		$imageLi.addClass( 'slideshow-current' );
 
 		this.$thumbnail = $imageLi.find( 'img' );
-		// 2a. Create thumbnail.
-		this.$img = $( '<img>' ).attr( {
-			// prefer dataset if available, as less likely to be manipulated.
-			src: thumbUrl || this.$thumbnail.attr( 'src' ),
-			alt: thumbAlt || this.$thumbnail.attr( 'alt' )
-		} );
-
-		if ( this.$img.attr( 'src' ) ) {
-			// 2b. Show thumbnail
+		if ( this.$thumbnail.length ) {
+			// 2. Create and show thumbnail
+			this.$img = $( '<img>' ).attr( {
+				src: this.$thumbnail.attr( 'src' ),
+				alt: this.$thumbnail.attr( 'alt' )
+			} );
 			// 'image' class required for detection by MultimediaViewer
 			$imgLink = $( '<a>' ).addClass( 'image' )
 				.attr( 'href', $imageLi.find( 'a' ).eq( 0 ).attr( 'href' ) )
@@ -276,7 +262,8 @@
 
 			this.$imgContainer.empty().append( $imgLink );
 		} else {
-			this.$imgContainer.html( $imageLi.find( '.thumb' ).html() );
+			// 2b. No image found (e.g. file doesn't exist)
+			this.$imgContainer.text( $imageLi.find( '.thumb' ).text() );
 		}
 
 		// 3. Copy caption
diff --git a/resources/src/mediawiki.page.gallery.styles/gallery.less b/resources/src/mediawiki.page.gallery.styles/gallery.less
index 9cd85385aa29..504afbbca345 100644
--- a/resources/src/mediawiki.page.gallery.styles/gallery.less
+++ b/resources/src/mediawiki.page.gallery.styles/gallery.less
@@ -124,59 +124,8 @@ ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapp
 
 /* Slideshow */
 ul.gallery.mw-gallery-slideshow {
-	display: flex;
-	margin: auto;
-	width: 100%;
-	// Should be synced with mediawiki.page.gallery.slideshow.js
-	height: 75vh;
-	text-align: center;
-	overflow: hidden;
-	overflow-x: auto;
-	scroll-snap-type: x mandatory;
-	scroll-behavior: smooth;
-
-	li {
-		scroll-snap-align: start;
-		flex-shrink: 0;
-		height: 100%;
-		text-align: center;
-		display: flex;
-		flex-flow: column;
-		// override inline style
-		// stylelint-disable-next-line declaration-no-important
-		width: 100% !important;
-
-		> div {
-			max-width: none;
-			margin: auto;
-		}
-	}
-
-	&:not( .mw-gallery-slideshow-ooui ) {
-		// Reserve space at top of gallery while OOUI loads.
-		li:before {
-			.client-js & {
-				content: '';
-				width: 100%;
-				display: block;
-				padding: 1.3em 0;
-				// equivalent to the OOUI icon button height:
-				height: 32px;
-			}
-		}
-
-		.thumb {
-			height: 100%;
-			// override inline style
-			// stylelint-disable-next-line declaration-no-important
-			width: 100% !important;
-		}
-
-		img {
-			height: 100%;
-			width: auto;
-		}
-	}
+	display: block;
+	margin: 4em 0;
 
 	.gallerycaption {
 		font-size: 1.3em;
@@ -216,6 +165,10 @@ ul.gallery.mw-gallery-slideshow {
 			background: #efefef;
 		}
 
+		> div {
+			max-width: 120px;
+		}
+
 		div.thumb {
 			border: 0;
 			background: transparent;
diff --git a/tests/parser/legacyMedia.txt b/tests/parser/legacyMedia.txt
index 1a1a1bc2a8d6..6565d5fd2b63 100644
--- a/tests/parser/legacyMedia.txt
+++ b/tests/parser/legacyMedia.txt
@@ -2931,7 +2931,7 @@ File:Foobar.jpg
 </gallery>
 !! html/php
 <ul class="gallery mw-gallery-slideshow" data-showthumbnails="1">
-		<li class="gallerybox" style="width: 155px" data-alt="Foobar.jpg" data-src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg"><div style="width: 155px">
+		<li class="gallerybox" style="width: 155px"><div style="width: 155px">
 			<div class="thumb" style="width: 150px;"><div style="margin:68px auto;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" decoding="async" width="120" height="14" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/180px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/240px-Foobar.jpg 2x" /></a></div></div>
 			<div class="gallerytext">
 			</div>
diff --git a/tests/parser/media.txt b/tests/parser/media.txt
index 1d146b827c4a..90c2c6d28e68 100644
--- a/tests/parser/media.txt
+++ b/tests/parser/media.txt
@@ -3280,7 +3280,7 @@ File:Foobar.jpg
 </gallery>
 !! html/php
 <ul class="gallery mw-gallery-slideshow" data-showthumbnails="1">
-		<li class="gallerybox" style="width: 155px" data-alt="Foobar.jpg" data-src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg">
+		<li class="gallerybox" style="width: 155px">
 			<div class="thumb" style="width: 150px;"><span typeof="mw:File"><a href="/wiki/File:Foobar.jpg" class="mw-file-description"><img alt="Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" decoding="async" width="120" height="14" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/180px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/240px-Foobar.jpg 2x" /></a></span></div>
 			<div class="gallerytext">
 			</div>