From 7931d76b9677a5e565539037e8441c90342761c1 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Tue, 7 Jan 2020 14:02:29 -0800
Subject: [PATCH] Remove the need for Vector's ResourceLoaderLessModule and
 wgVectorPrintLogo

This allows us to remove code in Vector by using the newly added
wgLogos (see I569e0d800e147eabc7852567acd140108613f074)

The ResourceLoaderSkinModule with the logo feature enabled will surface
the horizontal wordmark at the top of pages for printed media.

Change-Id: I00899c16c0325f36b671baf17e88c2b5187b3526
Bug: T242177
Bug: T232140
---
 .../ResourceLoaderSkinModule.php              | 27 ++++++++++++++++++-
 .../src/mediawiki.skinning/logo-print.less    | 10 +++++++
 resources/src/mediawiki.skinning/logo.less    | 23 ++++++++++++++++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 resources/src/mediawiki.skinning/logo-print.less
 create mode 100644 resources/src/mediawiki.skinning/logo.less

diff --git a/includes/resourceloader/ResourceLoaderSkinModule.php b/includes/resourceloader/ResourceLoaderSkinModule.php
index bb604d1face..373540db6a2 100644
--- a/includes/resourceloader/ResourceLoaderSkinModule.php
+++ b/includes/resourceloader/ResourceLoaderSkinModule.php
@@ -76,7 +76,10 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule {
 	 *     This feature also contains all `i18n-` prefixed features.
 	 */
 	private const FEATURE_FILES = [
-		'logo' => [],
+		'logo' => [
+			'screen' => [ 'resources/src/mediawiki.skinning/logo.less' ],
+			'print' => [ 'resources/src/mediawiki.skinning/logo-print.less' ],
+		],
 		'content' => [
 			'screen' => [ 'resources/src/mediawiki.skinning/content.css' ],
 		],
@@ -402,6 +405,28 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule {
 		return false;
 	}
 
+	/**
+	 * Get language-specific LESS variables for this module.
+	 *
+	 * @param ResourceLoaderContext $context
+	 * @return array
+	 */
+	protected function getLessVars( ResourceLoaderContext $context ) {
+		$lessVars = parent::getLessVars( $context );
+		$logos = self::getAvailableLogos( $this->getConfig() );
+
+		if ( isset( $logos['wordmark'] ) ) {
+			$logo = $logos['wordmark'];
+			$lessVars[ 'logo-enabled' ] = true;
+			$lessVars[ 'logo-wordmark-url' ] = CSSMin::buildUrlValue( $logo['src'] );
+			$lessVars[ 'logo-wordmark-width' ] = intval( $logo['width'] );
+			$lessVars[ 'logo-wordmark-height' ] = intval( $logo['height'] );
+		} else {
+			$lessVars[ 'logo-enabled' ] = false;
+		}
+		return $lessVars;
+	}
+
 	public function getDefinitionSummary( ResourceLoaderContext $context ) {
 		$summary = parent::getDefinitionSummary( $context );
 		$summary[] = [
diff --git a/resources/src/mediawiki.skinning/logo-print.less b/resources/src/mediawiki.skinning/logo-print.less
new file mode 100644
index 00000000000..06e5a79a8e4
--- /dev/null
+++ b/resources/src/mediawiki.skinning/logo-print.less
@@ -0,0 +1,10 @@
+/* stylelint-disable-next-line selector-class-pattern */
+.firstHeading {
+	// Bring back the wordmark to the viewport (see logo.less for how it's rendered outside the viewport).
+	& when( @logo-enabled = 1 ) {
+		&:before {
+			left: auto;
+			position: relative;
+		}
+	}
+}
diff --git a/resources/src/mediawiki.skinning/logo.less b/resources/src/mediawiki.skinning/logo.less
new file mode 100644
index 00000000000..da46adcb49b
--- /dev/null
+++ b/resources/src/mediawiki.skinning/logo.less
@@ -0,0 +1,23 @@
+// We have to render the wordmark image before the print dialog is invoked, otherwise the image
+// won't render in the printed file. Use a little hack to render the image outside the viewport
+// and bring it in the viewport in print view.
+/* stylelint-disable-next-line selector-class-pattern */
+.firstHeading {
+	// We could also use a CSS background to display the logo.
+	// The problem is that the logo won't be printed unless the user prints the background too.
+	// Note. This specification does not fully define the interaction of :before and :after with
+	// replaced elements (such as IMG in HTML). This will be defined in more detail in a future
+	// specification. See https://www.w3.org/TR/CSS2/generate.html#before-after-content
+	& when( @logo-enabled = 1 ) {
+		&:before {
+			content: @logo-wordmark-url;
+			display: block;
+			height: ~'@{logo-wordmark-height}px';
+			left: -9999px;
+			line-height: 0;  // line-height is needed for correctly displaying the size of the content box.
+			margin-bottom: 20px;
+			position: absolute;
+			width: ~'@{logo-wordmark-width}px';
+		}
+	}
+}