Add TimelessFileModule and $wgTimelessBackdropImage configuration

option to set configurable background image for the skin as a whole

Defaults to the cat, but can ideally be set to anything appropriate
to the wiki in question. Recommendation is a 20-50% opacity black/
white background image, where the alpha values of the b/w parts are
likewise around 10-50/255.

Bug: T193330
Change-Id: Ica3e2ce2568557ef157d06d1b7127b030f3c38f0

includes/TimelessFileModule.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * ResourceLoader module to set the skin-backdrop background image (by default,
+ * the angry cat)
+ */
+
+class TimelessFileModule extends ResourceLoaderFileModule {
+	/**
+	 * Make the style from the config var!
+	 * TODO: Just set a less variable here instead of hardcoding the full definition (T223112)
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	public function getStyles( ResourceLoaderContext $context ) {
+		$config = $this->getConfig();
+		$background = $config->get( 'TimelessBackdropImage' );
+		if ( $background === 'cat.svg' ) {
+			// expand default
+			$background = $config->get( 'StylePath' ) . '/Timeless/resources/images/cat.svg';
+		}
+
+		$background = OutputPage::transformResourcePath( $config, $background );
+		$styles = parent::getStyles( $context );
+
+		$styles['all'][] = '#mw-content-container { background-image: ' .
+			CSSMin::buildUrlValue( $background ) .
+			'; }';
+
+		return $styles;
+	}
+
+	/**
+	 * Register the config var with the caching stuff so it properly updates the cache
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	public function getDefinitionSummary( ResourceLoaderContext $context ) {
+		$summary = parent::getDefinitionSummary( $context );
+		$summary[] = [
+			'TimelessBackdropImage' => $this->getConfig()->get( 'TimelessBackdropImage' )
+		];
+		return $summary;
+	}
+}

resources/screen-common.less

@@ -26,10 +26,6 @@ body {
 	z-index: 0;
 }
 
-#mw-content-container {
-	background: @background2;
-}
-
 .mw-body {
 	word-wrap: break-word;
 }
@@ -217,7 +213,12 @@ body {
 /* Content */
 
 #mw-content-container {
+	background: @background2;
 	border-bottom: solid 4px @green;
+
+	// Background image (default cat) set via TimelessFileModule
+	background-repeat: no-repeat;
+	background-position: center 10em;
 }
 
 #mw-page-header-links {

resources/screen-desktop.less

@@ -13,12 +13,6 @@
 	margin: auto;
 }
 
-#mw-content-container {
-	.background-image( 'images/cat.svg' );
-	background-repeat: no-repeat;
-	background-position: center 15em;
-}
-
 /* Header */
 
 #mw-header-container {

skin.json

@@ -18,10 +18,13 @@
 			"i18n"
 		]
 	},
+	"config": {
+		"TimelessBackdropImage": "cat.svg"
+	},
 	"ResourceModules": {
 		"skins.timeless": {
 			"targets": [ "desktop", "mobile" ],
-			"class": "ResourceLoaderSkinModule",
+			"class": "TimelessFileModule",
 			"styles": {
 				"resources/libraries/normalise.css": {
 					"media": "screen"
@@ -55,6 +58,7 @@
 		},
 		"skins.timeless.misc": {
 			"targets": [ "desktop", "mobile" ],
+			"class": "ResourceLoaderSkinModule",
 			"styles": [
 				"resources/screen-misc.less"
 			]
@@ -90,7 +94,8 @@
 	},
 	"AutoloadClasses": {
 		"SkinTimeless": "includes/SkinTimeless.php",
-		"TimelessTemplate": "includes/TimelessTemplate.php"
+		"TimelessTemplate": "includes/TimelessTemplate.php",
+		"TimelessFileModule": "includes/TimelessFileModule.php"
 	},
 	"manifest_version": 1
 }