Load MediaWiki:Mobile.css as a render-blocking style

For consistency with MediaWiki:Common.css, which is also render-blocking.

Split MediaWiki:Mobile.css off into its own module (mobile.site.styles)
and load it using addModuleStyles(). The JS stays in mobile.site.

Bonus: respect $wgUseSiteJs and $wgUseSiteCss.

Bug: T190083
Change-Id: I404dfbc2ee377426fda8377437dcf7bb5e8a0c4f

README.md

@@ -221,6 +221,17 @@ removed in the near future (hopefully).
 * Type: `Array`
 * Default: `['h1', 'h2', 'h3', 'h4', 'h5', 'h6']`
 
+#### $wgMFSiteStylesRenderBlocking
+
+If set to true, styles inside MediaWiki:Mobile.css will become render blocking.
+
+This is intended for situations where the [TemplateStyles extension](https://m.mediawiki.org/wiki/Mobile_Gateway/TemplateStyles)
+cannot be used. When enabled, this may increase the time it takes for the mobile
+site to render, depending on how large MediaWiki:Mobile.css is for your wiki.
+
+* Type: `Boolean`
+* Default: `false`
+
 #### $wgMFSpecialCaseMainPage
 
 If set to true, main page HTML will receive special massaging.

extension.json

@@ -917,6 +917,9 @@
 			],
 			"class": "MobileFrontend\\ResourceLoaderModules\\MobileSiteModule"
 		},
+		"mobile.site.styles": {
+			"class": "MobileFrontend\\ResourceLoaderModules\\MobileSiteStylesModule"
+		},
 		"mobile.special.styles": {
 			"targets": "mobile",
 			"styles": [
@@ -1344,6 +1347,7 @@
 		"MFManifestThemeColor": "#222",
 		"MFManifestBackgroundColor": "#fff",
 		"MFLogWrappedInfoboxes": true,
+		"MFSiteStylesRenderBlocking": false,
 		"MFWatchlistEditCountThreshold": 10
 	},
 	"ServiceWiringFiles": [

includes/MobileFrontend.hooks.php

@@ -804,6 +804,9 @@ public static function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
 			if ( $title->isMainPage() && $config->get( 'MFMobileMainPageCss' ) ) {
 				$out->addModuleStyles( [ 'mobile.mainpage.css' ] );
 			}
+			if ( $config->get( 'MFSiteStylesRenderBlocking' ) ) {
+				$out->addModuleStyles( [ 'mobile.site.styles' ] );
+			}
 
 			// Allow modifications in mobile only mode
 			Hooks::run( 'BeforePageDisplayMobile', [ &$out, &$skin ] );

includes/modules/MobileSiteModule.php

@@ -14,6 +14,15 @@ class MobileSiteModule extends ResourceLoaderWikiModule {
 	// Should not be enabled on desktop which has ResourceLoaderSiteModule instead
 	protected $targets = [ 'mobile' ];
 
+	/**
+	 * @inheritDoc
+	 */
+	public function getDependencies( ResourceLoaderContext $context = null ) {
+		// They should always be loaded together, regardless of whether mobile.site.styles
+		// had been made render blocking.
+		return [ 'mobile.site.styles' ];
+	}
+
 	/**
 	 * Get a list of pages used by this module.
 	 *
@@ -22,7 +31,6 @@ class MobileSiteModule extends ResourceLoaderWikiModule {
 	 */
 	protected function getPages( ResourceLoaderContext $context ) {
 		return [
-			'MediaWiki:Mobile.css' => [ 'type' => 'style' ],
 			'MediaWiki:Mobile.js' => [ 'type' => 'script' ],
 		];
 	}

includes/modules/MobileSiteStylesModule.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace MobileFrontend\ResourceLoaderModules;
+
+use ResourceLoaderWikiModule;
+use ResourceLoaderContext;
+
+/**
+ * Alternate of ResourceLoaderSiteStylesModule for mobile web.
+ * Mobile.css is a temporary drop-in replacement for Common.css which contains CSS that
+ * is usually incompatible.
+ */
+class MobileSiteStylesModule extends ResourceLoaderWikiModule {
+	// Should not be enabled on desktop which has ResourceLoaderSiteStylesModule instead
+	protected $targets = [ 'mobile' ];
+
+	/**
+	 * Get a list of pages used by this module.
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	protected function getPages( ResourceLoaderContext $context ) {
+		$pages = [];
+		if ( $this->getConfig()->get( 'UseSiteCss' ) ) {
+			$pages += [
+				'MediaWiki:Mobile.css' => [ 'type' => 'style' ],
+			];
+		}
+		return $pages;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function getType() {
+		return self::LOAD_STYLES;
+	}
+}