Add user preference to control responsive MonoBook

This provides a device agnostic, persistent opt-out for the new responsive
functionality.

The preference will show up under the skin selector if the user has their
skin already set to MonoBook. I considered adding a new skin option to
the radio selector of skins, but that is probably unnecessary for the
majority of users, in addition to complicating how to differentiate the
two modes (Classic MonoBook vs. Modern MonoBook?).

Wikis that want to make this opt-in can control the default in the standard
way ($wgDefaultUserOptions), or hide it entirely ($wgHiddenPrefs).

Change-Id: Id22f8e5199ff2b15fd03c94097db5cdc7188f8b1

i18n/en.json

@@ -13,5 +13,6 @@
 	"monobook-more-actions": "More",
 	"monobook-cactions-label": "Page actions",
 	"monobook-notifications-link": "Notifications ($1)",
-	"monobook-notifications-link-none": "Notifications"
+	"monobook-notifications-link-none": "Notifications",
+	"monobook-responsive-label": "Enable responsive MonoBook design"
 }

i18n/qqq.json

@@ -21,5 +21,6 @@
 	"monobook-more-actions": "Label for the less-important or rarer actions that are hidden from the usual tabs on mobile interfaces (like moving the page, or for sysops deleting or protecting the page). {{Identical|More}}",
 	"monobook-cactions-label": "Header for the content actions menu (tabs on the top of the page)",
 	"monobook-notifications-link": "Label for Extension:Notifications link in mobile personal toolbar\n\nParameters:\n* $1 - number of current alerts/notifications",
-	"monobook-notifications-link-none": "Label for Extension:Notifications link in mobile personal toolbar when no notifications present\n{{Identical|Notification}}"
+	"monobook-notifications-link-none": "Label for Extension:Notifications link in mobile personal toolbar when no notifications present\n{{Identical|Notification}}",
+	"monobook-responsive-label": "Label for preference checkbox"
 }

includes/SkinMonoBook.php

@@ -40,26 +40,31 @@ class SkinMonoBook extends SkinTemplate {
 	function setupSkinUserCss( OutputPage $out ) {
 		parent::setupSkinUserCss( $out );
 
-		$out->addMeta( 'viewport',
-			'width=device-width, initial-scale=1.0, ' .
-			'user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0'
-		);
+		if ( $out->getUser()->getOption( 'monobook-responsive' ) ) {
+			$out->addMeta( 'viewport',
+				'width=device-width, initial-scale=1.0, ' .
+				'user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0'
+			);
+			$styleModule = 'skins.monobook.responsive';
+			$out->addModules( [
+				'skins.monobook.mobile'
+			] );
+
+			if ( ExtensionRegistry::getInstance()->isLoaded( 'Echo' ) && $out->getUser()->isLoggedIn() ) {
+				$out->addModules( [ 'skins.monobook.mobile.echohack' ] );
+			}
+			if ( ExtensionRegistry::getInstance()->isLoaded( 'UniversalLanguageSelector' ) ) {
+				$out->addModules( [ 'skins.monobook.mobile.uls' ] );
+			}
+		} else {
+			$styleModule = 'skins.monobook.styles';
+		}
 
 		$out->addModuleStyles( [
 			'mediawiki.skinning.interface',
 			'mediawiki.skinning.content.externallinks',
-			'skins.monobook.styles'
+			$styleModule
 		] );
-		$out->addModules( [
-			'skins.monobook.mobile'
-		] );
-
-		if ( ExtensionRegistry::getInstance()->isLoaded( 'Echo' ) && $out->getUser()->isLoggedIn() ) {
-			$out->addModules( [ 'skins.monobook.mobile.echohack' ] );
-		}
-		if ( ExtensionRegistry::getInstance()->isLoaded( 'UniversalLanguageSelector' ) ) {
-			$out->addModules( [ 'skins.monobook.mobile.uls' ] );
-		}
 
 		// TODO: Migrate all of these (get RL support for conditional IE)
 		// Force desktop styles in IE 8-; no support for @media widths
@@ -69,6 +74,20 @@ class SkinMonoBook extends SkinTemplate {
 		$out->addStyle( $this->stylename . '/resources/IE70Fixes.css', 'screen', 'IE 7' );
 	}
 
+	/**
+	 * @param User $user
+	 * @param array &$preferences
+	 */
+	public static function onGetPreferences( User $user, array &$preferences ) {
+		if ( $user->getOption( 'skin' ) === 'monobook' ) {
+			$preferences['monobook-responsive'] = [
+				'type' => 'toggle',
+				'label-message' => 'monobook-responsive-label',
+				'section' => 'rendering/skin',
+			];
+		}
+	}
+
 	/**
 	 * Handler for ResourceLoaderRegisterModules hook
 	 * Check if extensions are loaded

skin.json

@@ -19,7 +19,11 @@
 	"SkinOOUIThemes": {
 		"monobook": "Apex"
 	},
+	"DefaultUserOptions": {
+		"monobook-responsive": true
+	},
 	"Hooks": {
+		"GetPreferences": "SkinMonoBook::onGetPreferences",
 		"ResourceLoaderRegisterModules": "SkinMonoBook::registerMobileExtensionStyles"
 	},
 	"MessagesDirs": {
@@ -29,6 +33,16 @@
 	},
 	"ResourceModules": {
 		"skins.monobook.styles": {
+			"styles": {
+				"resources/screen-common.less": {
+					"media": "screen"
+				},
+				"resources/screen-desktop.css": {
+					"media": "screen"
+				}
+			}
+		},
+		"skins.monobook.responsive": {
 			"targets": [ "desktop", "mobile" ],
 			"styles": {
 				"resources/screen-common.less": {