Vector should operate in responsive mode when the mobile skin

With MobileFrontend installed applying
?useskin=vector&useformat=mobile will ensure that responsive vector
mode is invoked.

I'm keen to do this, as it would help to have more examples of skins
that are MobileFrontend aware as part of the work I am doing in
T166748

Change-Id: I81edd855a5e96400d1179fb10907fcc30ea43ef7

Hooks.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Hooks.php
+ */
+
+/**
+ * Hook handlers for Vector skin.
+ *
+ * Hook handler method names should be in the form of:
+ *	on<HookName>()
+ */
+
+class VectorHooks {
+	/**
+	 * BeforePageDisplayMobile hook handler
+	 *
+	 * Make Vector responsive when operating in mobile mode (useformat=mobile)
+	 *
+	 * @see https://www.mediawiki.org/wiki/Extension:MobileFrontend/BeforePageDisplayMobile
+	 * @param OutputPage $out
+	 * @param SkinTemplate $sk
+	 */
+	public static function onBeforePageDisplayMobile( OutputPage $out, $sk ) {
+		// This makes Vector behave in responsive mode when MobileFrontend is installed
+		if ( $sk instanceof SkinVector ) {
+			$sk->enableResponsiveMode();
+		}
+	}
+}

SkinVector.php

@@ -34,11 +34,24 @@ class SkinVector extends SkinTemplate {
 	 * @var Config
 	 */
 	private $vectorConfig;
+	private $responsiveMode = false;
 
 	public function __construct() {
 		$this->vectorConfig = ConfigFactory::getDefaultInstance()->makeConfig( 'vector' );
 	}
 
+	/**
+	 * Enables the responsive mode
+	 */
+	public function enableResponsiveMode() {
+		if ( !$this->responsiveMode ) {
+			$out = $this->getOutput();
+			$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
+			$out->addModuleStyles( 'skins.vector.styles.responsive' );
+			$this->responsiveMode = true;
+		}
+	}
+
 	/**
 	 * Initializes output page and sets up skin-specific parameters
 	 * @param OutputPage $out Object to initialize
@@ -47,8 +60,7 @@ class SkinVector extends SkinTemplate {
 		parent::initPage( $out );
 
 		if ( $this->vectorConfig->get( 'VectorResponsive' ) ) {
-			$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
+			$this->enableResponsiveMode();
-			$out->addModuleStyles( 'skins.vector.styles.responsive' );
 		}
 
 		$out->addModules( 'skins.vector.js' );

skin.json

@@ -25,9 +25,15 @@
 		]
 	},
 	"AutoloadClasses": {
+		"VectorHooks": "Hooks.php",
 		"SkinVector": "SkinVector.php",
 		"VectorTemplate": "VectorTemplate.php"
 	},
+	"Hooks": {
+		"BeforePageDisplayMobile": [
+			"VectorHooks::onBeforePageDisplayMobile"
+		]
+	},
 	"@note": "When modifying skins.vector.styles definition, make sure the installer still works",
 	"ResourceModules": {
 		"skins.vector.styles": {