MMV: Set body background and theme-color

When opening the viewer set the body background and the theme-color
to match the background of the viewer. This provides a better
experience for (esp. mobile) browsers.

theme-color has to be overriden, as it can be inferred from the top
of the browser window, but images can be all kinds of colors, so it
is better to be explicit.

Bug: T368659
Change-Id: I313745a31bf17eef612dd89630b1bbc4cb57fd45

bundlesize.config.json

@@ -2,7 +2,7 @@
 	"modules": [
 		{
 			"resourceModule": "mmv",
-			"maxSize": "26.4 kB"
+			"maxSize": "26.6 kB"
 		},
 		{
 			"resourceModule": "mmv.ui.restriction",

resources/mmv.bootstrap/mmv.bootstrap.less

@@ -24,6 +24,10 @@
 body.mw-mmv-lightbox-open {
 	overflow-y: auto;
 
+	// This is to ensure the background area for the safe areas (notch) is black in fullscreen mode
+	// Separate from above as not all browsers that we support, support has().
+	background-color: #000;
+
 	// Stop the article from scrolling in the background
 	> *:not( .mw-notification-area-overlay ) {
 		display: none;

resources/mmv/mmv.lightboxinterface.js

@@ -65,6 +65,10 @@ class LightboxInterface extends UiElement {
 
 		this.localStorage = mw.storage;
 
+		// When opening we might override the theme-color, so remember the original value
+		const metaElement = document.querySelector( 'meta[name="theme-color"]' );
+		this.originalThemeColor = metaElement ? metaElement.getAttribute( 'content' ) : null;
+
 		/** @property {Config} config - */
 		this.config = new Config(
 			mw.config.get( 'wgMultimediaViewer', {} ),
@@ -192,6 +196,9 @@ class LightboxInterface extends UiElement {
 			return;
 		}
 
+		// Make sure devices set their theming to dark to match the background of the viewer
+		this.setThemeColor( '#000000' );
+
 		this.handleEvent( 'keyup', ( e ) => {
 			if ( e.keyCode === 27 && !( e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
 				// Escape button pressed
@@ -303,6 +310,8 @@ class LightboxInterface extends UiElement {
 			prev: [ 'emit', 'prev' ]
 		} );
 
+		this.setThemeColor( this.originalThemeColor );
+
 		this.attached = false;
 	}
 
@@ -500,6 +509,26 @@ class LightboxInterface extends UiElement {
 		this.buttons.setOffset( prevNextTop );
 		this.buttons.toggle( showPrevButton, showNextButton );
 	}
+
+	/**
+	 * Update the theme-color of the document
+	 *
+	 * @param {string|null} color to set as theme-color or null to remove the theme-color
+	 */
+	setThemeColor( color ) {
+		let metaElement = document.querySelector( 'meta[name="theme-color"]' );
+		if ( !metaElement ) {
+			metaElement = document.createElement( 'meta' );
+			metaElement.setAttribute( 'name', 'theme-color' );
+			document.head.appendChild( metaElement );
+		}
+		if ( color === null ) {
+			metaElement.remove();
+		} else {
+			this.originalThemeColor = metaElement.getAttribute( 'content' );
+			metaElement.setAttribute( 'content', color );
+		}
+	}
 }
 
 module.exports = LightboxInterface;