Fix z-index bug in Firefox that would make navigation buttons appear on top of the metadata panel

Also fixes other issues:
- Some code in mmv.lightboxinterface.js wasn't doing anything
- Canvas buttons were being added to the wrong element
- Several CSS rules were being declared twice, a remnant of the multilightbox days

Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409

MultimediaViewer.php

@@ -647,7 +647,6 @@ $wgResourceModules += array(
 		),
 
 		'styles' => array(
-			'mmv/mmv.less',
 			// Always make this one the last of the list (Bug 61852)
 			'mmv/mmv.loaded.css',
 		),

resources/mmv/mmv.less

@@ -1,92 +0,0 @@
-@import "mmv.globals";
-@import "mmv.mixins";
-
-/**
- * Override multilightbox styles that don't apply to us
- */
-.mw-mmv-wrapper {
-	position: absolute;
-	bottom: auto;
-}
-
-.mw-mmv-main {
-	height: auto;
-
-	.jq-fullscreened {
-		background-color: black;
-	}
-}
-
-/**
- * Some variables
- */
-@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
-@metadata-background: rgb(251, 251, 251);
-
-.mw-mmv-image-wrapper,
-.mw-mmv-controls {
-	top: 0px;
-	bottom: @bottom-height;
-}
-
-.jq-fullscreened {
-	.mw-mmv-image-wrapper,
-	.mw-mmv-post-image,
-	.mw-mmv-controls {
-		bottom: 0px;
-	}
-
-	.mw-mmv-drag-affordance {
-		display: none;
-	}
-
-	.mw-mmv-post-image,
-	.mw-mmv-controls {
-		@fullscreen-padding: 10px;
-		padding: (@fullscreen-padding / 2) 0;
-		height: (@metadatabar-top-content-height + @fullscreen-padding);
-		background-color: rgba(251, 251, 251, 0);
-		transition: background-color 0.25s;
-		min-height: 0;
-
-		&:hover {
-			background-color: @metadata-background;
-		}
-	}
-
-	.mw-mmv-post-image {
-		position: fixed;
-	}
-
-	.mw-mmv-controls {
-		opacity: 0;
-		transition: opacity 0.25s;
-
-		&:hover {
-			opacity: 1;
-		}
-	}
-}
-
-.cursor-hidden {
-	cursor: none;
-}
-
-.mw-mmv-image-wrapper {
-	position: fixed;
-}
-
-.mw-mmv-post-image {
-	bottom: auto;
-	height: auto;
-	color: #333333;
-	background-color: @metadata-background;
-	position: absolute;
-	min-height: (@bottom-height + 1);
-	opacity: 0;
-}
-
-.mw-mmv-controls {
-	height: auto;
-	border-bottom: 1px solid #cccccc;
-}

resources/mmv/mmv.lightboxinterface.js

@@ -49,9 +49,6 @@
 	 * Initialize the entire interface - helper method.
 	 */
 	LIP.init = function () {
-		var addToPre = [],
-			addToPost = [];
-
 		// SVG filter, needed to achieve blur in Firefox
 		this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' );
 
@@ -71,11 +68,12 @@
 
 		this.$preDiv = $( '<div>' )
 			.addClass( 'mw-mmv-pre-image' );
-		this.setupPreDiv( addToPre );
 
 		this.$postDiv = $( '<div>' )
 			.addClass( 'mw-mmv-post-image' );
-		this.setupPostDiv( addToPost );
+
+		this.$controlBar = $( '<div>' )
+			.addClass( 'mw-mmv-controls' );
 
 		this.$main.append(
 			this.$preDiv,
@@ -88,8 +86,10 @@
 			this.$main
 		);
 
+		this.setupCanvasButtons();
+
 		this.panel = new mw.mmv.ui.MetadataPanel( this.$postDiv, this.$controlBar );
-		this.buttons = new mw.mmv.ui.CanvasButtons( this.$imageWrapper, this.$closeButton, this.$fullscreenButton );
+		this.buttons = new mw.mmv.ui.CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton );
 		this.canvas = new mw.mmv.ui.Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper );
 	};
 
@@ -234,15 +234,11 @@
 	};
 
 	/**
-	 * Setup for DOM elements which come before the main image
+	 * Setup for canvas navigation buttons
-	 * @param {Array.<HTMLElement|jQuery>} toAdd
 	 */
-	LIP.setupPreDiv = function ( toAdd ) {
+	LIP.setupCanvasButtons = function () {
 		var ui = this;
 
-		this.$controlBar = $( '<div>' )
-			.addClass( 'mw-mmv-controls' );
-
 		this.$closeButton = $( '<div>' )
 			.text( ' ' )
 			.addClass( 'mw-mmv-close' )
@@ -261,22 +257,6 @@
 				}
 			} );
 
-		this.setupFullscreenButton();
-
-		this.$controlBar.append(
-			this.$closeButton,
-			this.$fullscreenButton
-		);
-
-		this.$preDiv.append( this.$controlBar );
-
-		this.addElementsToDiv( this.$preDiv, toAdd );
-	};
-
-	/**
-	 * Sets up the fullscreen button
-	 */
-	LIP.setupFullscreenButton = function () {
 		// If the browser doesn't support fullscreen mode, hide the fullscreen button
 		if ( $.support.fullscreen ) {
 			this.$fullscreenButton.show();
@@ -285,22 +265,6 @@
 		}
 	};
 
-	/**
-	 * Setup for DOM elements which come before the main image
-	 * @param {Array.<HTMLElement|jQuery>} toAdd
-	 */
-	LIP.setupPostDiv = function ( toAdd ) {
-		this.addElementsToDiv( this.$postDiv, toAdd );
-	};
-
-	LIP.addElementsToDiv = function ( $div, toAdd ) {
-		var i;
-
-		for ( i = 0; i < toAdd.length; i++ ) {
-			$div.append( toAdd[i] );
-		}
-	};
-
 	/**
 	 * Handle a fullscreen change event.
 	 * @param {jQuery.Event} e The fullscreen change event.

resources/mmv/mmv.lightboxinterface.less

@@ -1,26 +1,38 @@
+@import "mmv.globals";
 @import "mmv.mixins";
 
+@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
+@metadata-background: rgb(251, 251, 251);
+
 .mw-mmv-wrapper {
-	position: fixed;
 	top: 0px;
 	left: 0px;
 	right: 0px;
-	bottom: 0px;
 	z-index: 1001;
+	position: absolute;
+	bottom: auto;
 }
 
 .mw-mmv-main {
 	width: 100%;
-	height: 100%;
+	height: auto;
 	position: relative;
+
+	.jq-fullscreened {
+		background-color: black;
+	}
+}
+
+.mw-mmv-image-wrapper,
+.mw-mmv-controls {
+	top: 0px;
+	bottom: @bottom-height;
 }
 
 .mw-mmv-image-wrapper {
-	position: absolute;
+	position: fixed;
-	top: 50px;
 	left: 0px;
 	right: 0px;
-	bottom: 0px;
 }
 
 .mw-mmv-image-inner-wrapper {
@@ -34,21 +46,72 @@
 	top: 0px;
 	height: 32px;
 	width: 100%;
+	z-index: 1;
 }
 
 .mw-mmv-post-image {
 	position: absolute;
-	bottom: 0px;
-	height: 32px;
 	width: 100%;
+	bottom: auto;
+	height: auto;
+	color: #333333;
+	background-color: @metadata-background;
+	min-height: (@bottom-height + 1);
+	opacity: 0;
+	z-index: 2;
 }
 
 .mw-mmv-controls {
-	height: 32px;
 	width: 100%;
-	border-bottom: 1px solid #7d7c81;
+	height: auto;
+	border-bottom: 1px solid #cccccc;
+}
+
+/* Fullscreen styles */
+
+.cursor-hidden {
+	cursor: none;
 }
 
 .mw-mmv-main.jq-fullscreened {
 	background-color: black;
 }
+
+.jq-fullscreened {
+	.mw-mmv-image-wrapper,
+	.mw-mmv-post-image,
+	.mw-mmv-controls {
+		bottom: 0px;
+	}
+
+	.mw-mmv-drag-affordance {
+		display: none;
+	}
+
+	.mw-mmv-post-image,
+	.mw-mmv-controls {
+		@fullscreen-padding: 10px;
+		padding: (@fullscreen-padding / 2) 0;
+		height: (@metadatabar-top-content-height + @fullscreen-padding);
+		background-color: rgba(251, 251, 251, 0);
+		transition: background-color 0.25s;
+		min-height: 0;
+
+		&:hover {
+			background-color: @metadata-background;
+		}
+	}
+
+	.mw-mmv-post-image {
+		position: fixed;
+	}
+
+	.mw-mmv-controls {
+		opacity: 0;
+		transition: opacity 0.25s;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}

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

@@ -85,15 +85,15 @@
 		lightbox.attach( '#qunit-fixture' );
 
 		$.support.fullscreen = false;
-		lightbox.setupFullscreenButton();
+		lightbox.setupCanvasButtons();
 
-		assert.ok( !lightbox.$fullscreenButton.is(':visible'),
+		assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'none',
 			'Fullscreen button is hidden when fullscreen mode is unavailable' );
 
 		$.support.fullscreen = true;
-		lightbox.setupFullscreenButton();
+		lightbox.setupCanvasButtons();
 
-		assert.ok( lightbox.$fullscreenButton.is(':visible'),
+		assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'block',
 			'Fullscreen button is visible when fullscreen mode is available' );
 
 		// Entering fullscreen