Migrate backdrop image style generation to set a variable we use in

the LESS instead of adding the styles prebaked

Bug: T223112
Change-Id: I773dbd9bd6d318144685d691e72627a00906472b

includes/TimelessFileModule.php

@@ -1,46 +0,0 @@
-<?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;
-	}
-}

includes/TimelessVariablesModule.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * ResourceLoader module to set some LESS variables for the skin
+ */
+class TimelessVariablesModule extends ResourceLoaderFileModule {
+	/**
+	 * Add our LESS variables
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array LESS variables
+	 */
+	protected function getLessVars( ResourceLoaderContext $context ) {
+		$vars = parent::getLessVars( $context );
+		$config = $this->getConfig();
+
+		// Backdrop image
+		$backdrop = $config->get( 'TimelessBackdropImage' );
+
+		if ( $backdrop === 'cat.svg' ) {
+			// expand default
+			$backdrop = 'images/cat.svg';
+		}
+
+		$vars = array_merge(
+			$vars,
+			[
+				'backdrop-image' => "url($backdrop)",
+				// 'logo-image' => ''
+				// 'wordmark-image' => ''
+				// +width cutoffs ...
+			]
+		);
+
+		return $vars;
+	}
+
+	/**
+	 * 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

@@ -196,7 +196,8 @@ body {
 	background: @base80;
 	border-bottom: solid 4px @green;
 
-	// Background image (default cat) set via TimelessFileModule
+	// Background image (default cat)
+	background-image: @backdrop-image;
 	background-repeat: no-repeat;
 	background-position: center 10em;
 }

skin.json

@@ -24,7 +24,7 @@
 	"ResourceModules": {
 		"skins.timeless": {
 			"targets": [ "desktop", "mobile" ],
-			"class": "TimelessFileModule",
+			"class": "TimelessVariablesModule",
 			"styles": {
 				"resources/libraries/normalise.css": {
 					"media": "screen"
@@ -95,7 +95,7 @@
 	"AutoloadClasses": {
 		"SkinTimeless": "includes/SkinTimeless.php",
 		"TimelessTemplate": "includes/TimelessTemplate.php",
-		"TimelessFileModule": "includes/TimelessFileModule.php"
+		"TimelessVariablesModule": "includes/TimelessVariablesModule.php"
 	},
 	"manifest_version": 1
 }