Display black overlay while the viewer JS is loading

I went for this option because it was the fastest to implement.
I think we should wait until we make the change to core to expose
image dimensions before we consider switching to another strategy.

Change-Id: I61c9342a2d6d6fc24a24e0988b3cf7f9a06859a2
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/248

MultimediaViewer.php

@@ -616,6 +616,10 @@ call_user_func( function() {
 			'mmv.bootstrap.js',
 		),
 
+		'styles' => array(
+			'mmv.bootstrap.less',
+		),
+
 		'dependencies' => array(
 			'jquery.hashchange',
 			'mediawiki.Title',

resources/mmv/mmv.bootstrap.js

@@ -61,11 +61,14 @@
 			return deferred.reject();
 		}
 
+		bs.setupOverlay();
+
 		mw.loader.using( 'mmv', function() {
 			bs.isCSSReady( deferred );
 		}, function ( error ) {
 			mw.log( error.message );
 			deferred.reject( error.message );
+			bs.cleanupOverlay();
 		} );
 
 		return deferred.done( function ( viewer ) {
@@ -257,6 +260,8 @@
 
 		$( document ).on( 'mmv.hash', function ( e ) {
 			self.internalHashChange( e );
+		} ).on( 'mmv.close', function () {
+			self.cleanupOverlay();
 		} );
 	};
 
@@ -268,5 +273,27 @@
 		$( document ).off( 'mmv.hash' );
 	};
 
+	/**
+	 * Sets up the overlay while the viewer loads
+	 */
+	MMVB.setupOverlay = function () {
+		this.$overlay = $( '<div>' )
+			.addClass( 'mlb-overlay' );
+
+		$( document.body ).addClass( 'mw-mlb-lightbox-open' )
+			.append( this.$overlay );
+	};
+
+	/**
+	 * Cleans up the overlay
+	 */
+	MMVB.cleanupOverlay = function () {
+		$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
+
+		if ( this.$overlay ) {
+			this.$overlay.remove();
+		}
+	};
+
 	mw.mmv.MultimediaViewerBootstrap = MultimediaViewerBootstrap;
 }( mediaWiki, jQuery ) );

resources/mmv/mmv.bootstrap.less

@@ -0,0 +1,27 @@
+.mlb-overlay {
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	z-index: 1000;
+	background-color: rgb(0,0,0);
+}
+
+body.mw-mlb-lightbox-open {
+	overflow-y: auto;
+}
+
+body.mw-mlb-lightbox-open #mw-page-base,
+body.mw-mlb-lightbox-open #mw-head-base,
+body.mw-mlb-lightbox-open #mw-navigation,
+body.mw-mlb-lightbox-open #mw-footer,
+body.mw-mlb-lightbox-open #content {
+	/** Stop the article from scrolling in the background */
+	display: none;
+}
+
+body.mw-mlb-lightbox-open > :not(.mlb-overlay, .mlb-wrapper) {
+	/** Stop the article from scrolling in the background */
+	display: none;
+}

resources/mmv/mmv.js

@@ -225,8 +225,6 @@
 		this.preloadThumbnails();
 		this.preloadFullscreenThumbnail( image );
 
-		$( document.body ).addClass( 'mw-mlb-lightbox-open' );
-
 		imageWidths = this.ui.canvas.getCurrentImageWidths();
 
 		this.resetBlurredThumbnailStates();
@@ -583,7 +581,8 @@
 	 * Handles close event coming from the lightbox
 	 */
 	MMVP.close = function () {
-		$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
+		$( document ).trigger( $.Event( 'mmv.close' ) );
+
 		if ( comingFromHashChange === false ) {
 			$( document ).trigger( $.Event( 'mmv.hash', { hash : '#' } ) );
 		} else {

resources/mmv/mmv.less

@@ -184,10 +184,6 @@ body.mobile .mw-mlb-controls,
 	right: 0px;
 }
 
-.mlb-overlay {
-	background-color: rgb(0,0,0);
-}
-
 .mw-mlb-title-contain {
 	position: relative;
 }
@@ -354,19 +350,6 @@ body.mobile .mw-mlb-controls,
 	width: 50%;
 }
 
-body.mw-mlb-lightbox-open {
-	overflow-y: auto;
-}
-
-body.mw-mlb-lightbox-open #mw-page-base,
-body.mw-mlb-lightbox-open #mw-head-base,
-body.mw-mlb-lightbox-open #mw-navigation,
-body.mw-mlb-lightbox-open #mw-footer,
-body.mw-mlb-lightbox-open #content {
-	/** Stop the article from scrolling in the background */
-	display: none;
-}
-
 .mw-mlb-drag-affordance {
 	width: 100%;
 	height: @drag-height;

resources/mmv/mmv.lightboxinterface.js

@@ -55,9 +55,6 @@
 		// SVG filter, needed to achieve blur in Firefox
 		this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' );
 
-		this.$overlay = $( '<div>' )
-			.addClass( 'mlb-overlay' );
-
 		this.$wrapper = $( '<div>' )
 			.addClass( 'mlb-wrapper' );
 
@@ -176,8 +173,7 @@
 
 		$parent
 			.append(
-				this.$wrapper,
+				this.$wrapper
-				this.$overlay
 			);
 		this.currentlyAttached = true;
 
@@ -204,7 +200,6 @@
 			.off( 'jq-fullscreen-change.lip' );
 
 		this.$wrapper.detach();
-		this.$overlay.detach();
 
 		this.currentlyAttached = false;
 

resources/mmv/mmv.lightboxinterface.less

@@ -1,15 +1,5 @@
 @import "ui/mmv.mixins";
 
-.mlb-overlay {
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
-	z-index: 1000;
-	background-color: rgba(0,0,0,0.9);
-}
-
 .mlb-wrapper {
 	position: fixed;
 	top: 0px;

tests/qunit/mmv/mmv.bootstrap.test.js

@@ -27,7 +27,7 @@
 		return bootstrap;
 	}
 
-	QUnit.test( 'Promise does not hang on ResourceLoader errors', 1, function ( assert ) {
+	QUnit.test( 'Promise does not hang on ResourceLoader errors', 3, function ( assert ) {
 		var oldUsing = mw.loader.using,
 			bootstrap,
 			errorMessage = 'loading failed';
@@ -40,6 +40,14 @@
 
 		bootstrap = createBootstrap();
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( true, 'Overlay was set up' );
+		};
+
+		bootstrap.cleanupOverlay = function () {
+			assert.ok( true, 'Overlay was cleaned up' );
+		};
+
 		QUnit.stop();
 
 		bootstrap.loadViewer().fail( function ( message ) {
@@ -49,7 +57,7 @@
 		} );
 	} );
 
-	QUnit.test( 'Check viewer invoked when clicking on legit image links', 2, function ( assert ) {
+	QUnit.test( 'Check viewer invoked when clicking on legit image links', 4, function ( assert ) {
 		// TODO: Is <div class="gallery"><span class="image"><img/></span></div> valid ???
 		var div, link, link2, link3, bootstrap,
 			viewer = { initWithThumbs : $.noop };
@@ -69,6 +77,10 @@
 		// Create a new bootstrap object to trigger the DOM scan, etc.
 		bootstrap = createBootstrap( viewer );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( true, 'Overlay was set up' );
+		};
+
 		viewer.loadImageByTitle = function() {
 			assert.ok( true, 'Image loaded' );
 		};
@@ -79,6 +91,10 @@
 		// Click on legit link
 		link2.trigger( { type : 'click', which : 1 } );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( false, 'Overlay was not set up' );
+		};
+
 		viewer.loadImageByTitle = function() {
 			assert.ok( false, 'Image should not be loaded' );
 		};
@@ -106,7 +122,7 @@
 		link.trigger( { type : 'click', which : 1 } );
 	} );
 
-	QUnit.test( 'Accept only left clicks without modifier keys, skip the rest', 1, function ( assert ) {
+	QUnit.test( 'Accept only left clicks without modifier keys, skip the rest', 2, function ( assert ) {
 		var $div, $link, bootstrap,
 			viewer = { initWithThumbs : $.noop };
 
@@ -118,6 +134,10 @@
 
 		$link = $div.find( 'a.image' );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( true, 'Overlay was set up' );
+		};
+
 		viewer.loadImageByTitle = function() {
 			assert.ok( true, 'Image loaded' );
 		};
@@ -125,6 +145,10 @@
 		// Handle valid left click, it should try to load the image
 		$link.trigger( { type : 'click', which : 1 } );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( false, 'Overlay was not set up' );
+		};
+
 		viewer.loadImageByTitle = function() {
 			assert.ok( false, 'Image should not be loaded' );
 		};
@@ -136,7 +160,7 @@
 		$link.trigger( { type : 'click', which : 2 } );
 	} );
 
-	QUnit.test( 'Ensure that the correct title is loaded when clicking', 1, function ( assert ) {
+	QUnit.test( 'Ensure that the correct title is loaded when clicking', 2, function ( assert ) {
 		var bootstrap,
 			viewer = { initWithThumbs : $.noop },
 			$div = createGallery( 'foo.jpg' ),
@@ -149,10 +173,14 @@
 		// Create a new bootstrap object to trigger the DOM scan, etc.
 		bootstrap = createBootstrap( viewer );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( true, 'Overlay was set up' );
+		};
+
 		$link.trigger( { type : 'click', which : 1 } );
 	} );
 
-	QUnit.test( 'Validate new LightboxImage object has sane constructor parameters', 6, function ( assert ) {
+	QUnit.test( 'Validate new LightboxImage object has sane constructor parameters', 7, function ( assert ) {
 		var bootstrap,
 			$div,
 			$link,
@@ -178,6 +206,10 @@
 		// Create a new bootstrap object to trigger the DOM scan, etc.
 		bootstrap = createBootstrap( viewer );
 
+		bootstrap.setupOverlay = function () {
+			assert.ok( true, 'Overlay was set up' );
+		};
+
 		$link.trigger( { type : 'click', which : 1 } );
 	} );
 

tests/qunit/mmv/mmv.lightboxinterface.test.js

@@ -12,7 +12,7 @@
 
 	QUnit.module( 'mmv.lightboxInterface', QUnit.newMwEnvironment() );
 
-	QUnit.test( 'Sanity test, object creation and ui construction', 23, function ( assert ) {
+	QUnit.test( 'Sanity test, object creation and ui construction', 20, function ( assert ) {
 		var lightbox = new mw.mmv.LightboxInterface();
 
 		stubScrollTo();
@@ -21,7 +21,6 @@
 			var msg = inDocument === 1 ? ' ' : ' not ';
 			assert.strictEqual( $( '.mlb-wrapper' ).length, inDocument, 'Wrapper area' + msg + 'attached.' );
 			assert.strictEqual( $( '.mlb-main' ).length, inDocument, 'Main area' + msg + 'attached.' );
-			assert.strictEqual( $( '.mlb-overlay' ).length, inDocument, 'Overlay area' + msg + 'attached.' );
 			assert.strictEqual( $( '.mw-mlb-title' ).length, inDocument, 'Title area' + msg + 'attached.' );
 			assert.strictEqual( $( '.mw-mlb-author' ).length, inDocument, 'Author area' + msg + 'attached.' );
 			assert.strictEqual( $( '.mw-mlb-image-desc' ).length, inDocument, 'Description area' + msg + 'attached.' );