Make MobileFrontend dependency a soft one

This extends the work in Ie29a1eb7746d56f7d8c99b74e5e3c213c30fdcf2

Bug: T171000
Change-Id: Ib125e1bdaace1893804892909c27a9f328445835

includes/MinervaHooks.php

@@ -31,6 +31,33 @@ use MediaWiki\Minerva\SkinUserPageHelper;
 class MinervaHooks {
 	const FEATURE_OVERFLOW_PAGE_ACTIONS = 'MinervaOverflowInPageActions';
 
+	/**
+	 * ResourceLoaderRegisterModules hook handler.
+	 *
+	 * Registers:
+	 *
+	 * * EventLogging schema modules, if the EventLogging extension is loaded;
+	 * * Modules for the Visual Editor overlay, if the VisualEditor extension is loaded; and
+	 * * Modules for the notifications overlay, if the Echo extension is loaded.
+	 *
+	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderRegisterModules
+	 *
+	 * @param ResourceLoader &$resourceLoader
+	 */
+	public static function onResourceLoaderRegisterModules( ResourceLoader &$resourceLoader ) {
+		if ( !ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
+			$resourceLoader->register( [
+				'mobile.startup' => [
+					'dependencies' => [ 'mediawiki.searchSuggest' ],
+					'localBasePath' => dirname( __DIR__ ),
+					'remoteExtPath' => 'Minerva',
+					'scripts' => 'resources/mobile.startup.stub.js',
+					'targets' => [ 'desktop', 'mobile' ],
+				]
+			] );
+		}
+	}
+
 	/**
 	 * Disable recent changes enhanced mode (table mode)
 	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/FetchChangesList

includes/skins/SkinMinerva.php

@@ -762,7 +762,8 @@ class SkinMinerva extends SkinTemplate {
 	 */
 	public function getContextSpecificModules() {
 		$modules = [];
-		if ( $this->skinOptions->hasSkinOptions() ) {
+		$mobileFrontend = ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' );
+		if ( $this->skinOptions->hasSkinOptions() && $mobileFrontend ) {
 			$modules[] = 'skins.minerva.options';
 		}
 
@@ -790,8 +791,6 @@ class SkinMinerva extends SkinTemplate {
 			$modules['styles']['content'] = [];
 		}
 		$modules['styles']['core'] = $this->getSkinStyles();
-		// disable default skin search modules
-		$modules['search'] = [];
 
 		$modules['minerva'] = array_merge(
 			$this->getContextSpecificModules(),

resources/mobile.startup.stub.js

@@ -0,0 +1,8 @@
+/**
+ * This stub is used when MobileFrontend is not installed.
+ * It describes the contract between MobileFrontend and Minerva
+ * that we should work towards removing.
+ */
+module.exports = {
+	stub: true
+};

resources/skins.minerva.scripts/Toolbar.js

@@ -2,7 +2,6 @@
 	var
 		mobile = M.require( 'mobile.startup' ),
 		ToggleList = require( '../../components/ToggleList/ToggleList.js' ),
-		downloadPageAction = require( './downloadPageAction.js' ).downloadPageAction,
 		Icon = mobile.Icon,
 		page = mobile.currentPage(),
 		/** The top level menu. */
@@ -83,8 +82,9 @@
 	 * @return {void}
 	 */
 	function renderDownloadButton( window, overflowList ) {
-		var $downloadAction = downloadPageAction( page,
-			mw.config.get( 'wgMinervaDownloadNamespaces', [] ), window, !!overflowList );
+		var downloadPageAction = require( './downloadPageAction.js' ).downloadPageAction,
+			$downloadAction = downloadPageAction( page,
+				mw.config.get( 'wgMinervaDownloadNamespaces', [] ), window, !!overflowList );
 
 		if ( $downloadAction ) {
 			if ( overflowList ) {

resources/skins.minerva.scripts/initMobile.js

@@ -1,6 +1,14 @@
-( function ( M ) {
+/**
+ * Initialise code that requires MobileFrontend.
+ * @todo anything that doesn't require MobileFrontend should be moved into ./setup.js
+ * @todo anything that can be rewritten without MobileFrontend (possibly using new frontend
+ * framework or upstreamed from MobileFrotend to core) should be and moved into ./setup.js
+ * @todo anything left should be moved to MobileFrontend extension and removed from here.
+ */
+module.exports = function () {
 	var
-		mobile = M.require( 'mobile.startup' ),
+		// eslint-disable-next-line no-restricted-properties
+		mobile = mw.mobileFrontend.require( 'mobile.startup' ),
 		PageGateway = mobile.PageGateway,
 		permissions = mw.config.get( 'wgMinervaPermissions' ) || {},
 		toast = mobile.toast,
@@ -360,6 +368,8 @@
 		search();
 		// - mobile redirect
 		mobileRedirect( mobile.amcOutreach, currentPage );
+
+		// Enhance timestamps to show relative time.
 		// Update anything else that needs enhancing (e.g. watchlist)
 		initModifiedInfo();
 		initRegistrationInfo();
@@ -367,8 +377,10 @@
 		initHistoryLink( $( 'a.last-modified-bar__text' ) );
 		// eslint-disable-next-line no-jquery/no-global-selector
 		initAmcHistoryLink( $( '.last-modified-bar__text a' ) );
+
 		if ( toolbarElement ) {
 			Toolbar.bind( window, toolbarElement );
+			// Update the edit icon and add a download icon.
 			Toolbar.render( window, toolbarElement );
 		}
 		if ( userMenu ) {
@@ -385,6 +397,8 @@
 		// deprecation notices
 		mw.log.deprecate( router, 'navigate', router.navigate, 'use navigateTo instead' );
 
+		// If MobileFrontend installed we add a table of contents icon to the table of contents.
+		// This should probably be done in the parser.
 		// setup toc icons
 		new Icon( {
 			glyphPrefix: 'minerva',
@@ -393,9 +407,6 @@
 		new Icon( {
 			glyphPrefix: 'mf',
 			name: 'expand',
-			// FIXME: `additionalClassNames` for backwards compatibility.
-			// Can be removed when  Ibbc706146710a9e31a72b3c2cd4e247d7a227488 lands.
-			additionalClassNames: 'mw-ui-icon-mf-arrow',
 			isSmall: true
 		} ).$el.appendTo( '.toctitle' );
 
@@ -405,12 +416,8 @@
 		}
 
 		// wire up watch icon if necessary
-		if ( permissions.watch ) {
-			if ( mw.user.isAnon() ) {
-				ctaDrawers.initWatchstarCta( $watch );
-			} else {
-				require( './watchstar.js' )( $watch );
-			}
+		if ( permissions.watch && mw.user.isAnon() ) {
+			ctaDrawers.initWatchstarCta( $watch );
 		}
 		ctaDrawers.initRedlinksCta(
 			$redLinks.filter( function ( _, element ) {
@@ -421,11 +428,4 @@
 		initSmartLogout( '.menu__item--logout' );
 		initUserRedLinks();
 	} );
-
-// eslint-disable-next-line no-restricted-properties
-}( mw.mobileFrontend ) );
-
-module.exports = {
-	// Version number allows breaking changes to be detected by other extensions
-	VERSION: 1
 };

resources/skins.minerva.scripts/searchSuggestReveal.js

@@ -0,0 +1,20 @@
+var SEARCH_CLASS = 'search-enabled';
+
+module.exports = function () {
+	// eslint-disable-next-line no-jquery/no-global-selector
+	$( '#searchIcon' ).on( 'click', function () {
+		// eslint-disable-next-line no-jquery/no-global-selector
+		var $input = $( '#searchInput' ),
+			$body = $( document.body );
+
+		// eslint-disable-next-line no-jquery/no-sizzle
+		if ( !$input.is( ':visible' ) ) {
+			$body.addClass( SEARCH_CLASS );
+			$input.trigger( 'focus' )
+				.one( 'blur', function () {
+					$body.removeClass( SEARCH_CLASS );
+				} );
+			return false;
+		}
+	} );
+};

resources/skins.minerva.scripts/setup.js

@@ -0,0 +1,31 @@
+/**
+ * This setups the Minerva skin.
+ * It should run without errors even if MobileFrontend is not installed.
+ */
+var ms = require( 'mobile.startup' );
+
+function init() {
+	var permissions = mw.config.get( 'wgMinervaPermissions' ) || {},
+		// eslint-disable-next-line no-jquery/no-global-selector
+		$watch = $( '#page-actions-watch' );
+
+	if ( permissions.watch && !mw.user.isAnon() ) {
+		require( './watchstar.js' )( $watch );
+	}
+
+	// Setup Minerva with MobileFrontend
+	if ( ms && !ms.stub ) {
+		require( './initMobile.js' )();
+	} else {
+		// MOBILEFRONTEND IS NOT INSTALLED.
+		// setup search for desktop Minerva at mobile resolution without MobileFrontend.
+		require( './searchSuggestReveal.js' )();
+	}
+}
+
+init();
+
+module.exports = {
+	// Version number allows breaking changes to be detected by other extensions
+	VERSION: 1
+};

skin.json

@@ -16,10 +16,7 @@
 	"url": "https://www.mediawiki.org/wiki/Skin:MinervaNeue",
 	"license-name": "GPL-2.0-or-later",
 	"requires": {
-		"MediaWiki": ">= 1.34.0",
-		"extensions": {
-			"MobileFrontend": ">= 2.1.0"
-		}
+		"MediaWiki": ">= 1.34.0"
 	},
 	"config": {
 		"MinervaCountErrors": {
@@ -126,6 +123,9 @@
 		"minerva": "GlobalVarConfig::newInstance"
 	},
 	"Hooks": {
+		"ResourceLoaderRegisterModules": [
+			"MinervaHooks::onResourceLoaderRegisterModules"
+		],
 		"UserLogoutComplete": [
 			"MinervaHooks::onUserLogoutComplete"
 		],
@@ -159,6 +159,9 @@
 	},
 	"ResourceModuleSkinStyles": {
 		"minerva": {
+			"mediawiki.searchSuggest": [
+				"skinStyles/mediawiki.searchSuggest/index.less"
+			],
 			"mediawiki.rcfilters.filters.ui": [
 				"skinStyles/mediawiki.rcfilters.filters.ui.less"
 			],
@@ -642,7 +645,9 @@
 				"IssueNotice.mustache": "resources/skins.minerva.scripts/page-issues/overlay/IssueNotice.mustache"
 			},
 			"packageFiles": [
-				"resources/skins.minerva.scripts/init.js",
+				"resources/skins.minerva.scripts/setup.js",
+				"resources/skins.minerva.scripts/initMobile.js",
+				"resources/skins.minerva.scripts/searchSuggestReveal.js",
 				"resources/skins.minerva.scripts/drawers.js",
 				"resources/skins.minerva.scripts/ctaDrawers.js",
 				"resources/skins.minerva.scripts/menu.js",

skinStyles/mediawiki.searchSuggest/index.less

@@ -0,0 +1,36 @@
+@import '../../minerva.less/minerva.variables.less';
+
+@media screen and ( max-width: @width-breakpoint-tablet ) {
+	.suggestions-results {
+		display: table;
+		width: 100%;
+
+		a {
+			height: 70px;
+			width: 100%;
+			display: table;
+			box-sizing: border-box;
+		}
+
+		.suggestions-result {
+			display: table-cell;
+			vertical-align: middle;
+			width: 100%;
+		}
+	}
+
+	.search-enabled {
+		.header {
+			position: relative;
+
+			.search-box {
+				display: block;
+				position: absolute;
+				left: 30px;
+				top: 10px;
+				right: 0;
+				z-index: @z-indexDrawer;
+			}
+		}
+	}
+}