From 9f9a5f229033080a306f0db2a00f654758f645c9 Mon Sep 17 00:00:00 2001
From: Kunal Mehta <legoktm@member.fsf.org>
Date: Sun, 3 Jun 2018 15:50:36 -0700
Subject: [PATCH] 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              |  3 ++-
 i18n/qqq.json             |  3 ++-
 includes/SkinMonoBook.php | 49 +++++++++++++++++++++++++++------------
 skin.json                 | 14 +++++++++++
 4 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index 917b37a..3ed178c 100644
--- a/i18n/en.json
+++ b/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"
 }
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 6571c9d..b7764b3 100644
--- a/i18n/qqq.json
+++ b/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"
 }
diff --git a/includes/SkinMonoBook.php b/includes/SkinMonoBook.php
index 45dcc17..350f1c3 100644
--- a/includes/SkinMonoBook.php
+++ b/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
diff --git a/skin.json b/skin.json
index ace191b..aa3922f 100644
--- a/skin.json
+++ b/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": {