Redesign mobile CookieWarning banner

Based on design input from Reading web team (Nirzar).

Bug: T146077
Change-Id: I99aa74842486c4c397462dd51f55c272ae17ad07

extension.json

@@ -91,10 +91,12 @@
 		},
 		"ext.CookieWarning.styles": {
 			"position": "top",
-			"styles": "resources/ext.CookieWarning/ext.CookieWarning.less",
+			"styles": "resources/ext.CookieWarning/ext.CookieWarning.less"
+		},
+		"ext.CookieWarning.mobile.styles": {
+			"styles": "resources/ext.CookieWarning/ext.CookieWarning.mobile.less",
 			"targets": [
-				"mobile",
+				"mobile"
-				"desktop"
 			]
 		},
 		"ext.CookieWarning.geolocation": {

includes/CookieWarning.hooks.php

@@ -50,7 +50,7 @@ class CookieWarningHooks {
 		// if a "more information" URL was configured, add a link to it in the cookiewarning
 		// information bar
 		if ( $moreLink ) {
-			$moreLink = Html::element(
+			$moreLink = ' ' . Html::element(
 				'a',
 				[ 'href' => $moreLink ],
 				$sk->msg( 'cookiewarning-moreinfo-label' )->text()
@@ -60,21 +60,7 @@ class CookieWarningHooks {
 		if ( !isset( $tpl->data['headelement'] ) ) {
 			$tpl->data['headelement'] = '';
 		}
-		$tpl->data['headelement'] .= Html::openElement(
+		$form = Html::openElement( 'form', [ 'method' => 'POST' ] ) .
-				'div',
-				[ 'class' => 'mw-cookiewarning-container' ]
-			) .
-			Html::openElement(
-				'div',
-				[ 'class' => 'mw-cookiewarning-text' ]
-			) .
-			Html::element(
-				'span',
-				[],
-				$sk->msg( 'cookiewarning-info' )->text()
-			) .
-			$moreLink .
-			Html::openElement( 'form', [ 'method' => 'POST' ] ) .
 	        Html::submitButton(
 		        $sk->msg( 'cookiewarning-ok-label' )->text(),
 		        [
@@ -82,7 +68,31 @@ class CookieWarningHooks {
 			        'class' => 'mw-cookiewarning-dismiss'
 		        ]
 	        ) .
-			Html::closeElement( 'form' ) .
+	        Html::closeElement( 'form' );
+
+		$cookieImage = Html::openElement( 'div', [ 'class' => 'mw-cookiewarning-cimage' ] ) .
+			'🍪' .
+			Html::closeElement( 'div' );
+
+		$isMobile = ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) &&
+			MobileContext::singleton()->shouldDisplayMobileView();
+		$tpl->data['headelement'] .= Html::openElement(
+				'div',
+				[ 'class' => 'mw-cookiewarning-container' ]
+			) .
+		    ( $isMobile ? $form : '' ) .
+			Html::openElement(
+				'div',
+				[ 'class' => 'mw-cookiewarning-text' ]
+			) .
+		    ( $isMobile ? $cookieImage : '' ) .
+			Html::element(
+				'span',
+				[],
+				$sk->msg( 'cookiewarning-info' )->text()
+			) .
+			$moreLink .
+		    ( !$isMobile ? $form : '' ) .
 			Html::closeElement( 'div' ) .
 			Html::closeElement( 'div' );
 	}
@@ -123,7 +133,14 @@ class CookieWarningHooks {
 	public static function onBeforePageDisplay( OutputPage $out ) {
 		if ( self::showWarning( $out->getContext() ) ) {
 			$conf = self::getConfig();
+			if (
+				ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) &&
+				MobileContext::singleton()->shouldDisplayMobileView()
+			) {
+				$moduleStyles = [ 'ext.CookieWarning.mobile.styles' ];
+			} else {
 				$moduleStyles = [ 'ext.CookieWarning.styles' ];
+			}
 			$modules = [ 'ext.CookieWarning' ];
 			if (
 				$conf->get( 'CookieWarningGeoIPLookup' ) === 'js' &&

resources/ext.CookieWarning/ext.CookieWarning.less

@@ -16,7 +16,7 @@
 
 .mw-cookiewarning-text {
 	span {
-		margin-right: 1em;
+		margin-right: 0.5em;
 	}
 
 	form {

resources/ext.CookieWarning/ext.CookieWarning.mobile.less

@@ -0,0 +1,69 @@
+@import 'minerva.variables';
+@import 'minerva.mixins';
+
+@cookieWarningFontSize: 12px;
+
+.mw-cookiewarning-container {
+	background-color: #ffffff;
+	padding: 16px;
+	font-family: HelveticaNeue;
+	font-size: @cookieWarningFontSize;
+	font-weight: 500;
+	font-style: normal;
+	font-stretch: normal;
+
+	.mw-cookiewarning-cimage {
+		width: 28px;
+		height: 100%;
+		font-size: 28px;
+		margin-right: 15px;
+		float: left;
+		text-align: center;
+		line-height: 100%;
+	}
+
+	form {
+		float: right;
+		margin-left: 5px;
+		/* borrowed from mediawiki/core Login Button, following `ButtonWidget (progressive)‎` from OOjs UI */
+		.mw-cookiewarning-dismiss {
+			height: 32px;
+			background-color: #f8f9fa;
+			color: #36c;
+		}
+		.mw-cookiewarning-dismiss:hover {
+			background-color: #fff;
+			border-color: #859ecc;
+			box-shadow: none;
+		}
+		.mw-cookiewarning-dismiss:active {
+			background-color: #eff3fa;
+			color: #2a4b8d;
+			border-color: #2a4b8d;
+		}
+		.mw-cookiewarning-dismiss:focus {
+			border-color: #36c;
+			box-shadow: inset 0 0 0 1px #36c;
+		}
+	}
+}
+
+@media all and ( min-width: @deviceWidthTablet ) {
+	.mw-cookiewarning-container {
+		max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
+		margin: 0 @contentPaddingTablet;
+		line-height: @contentPaddingTablet;
+
+		.mw-cookiewarning-cimage {
+			line-height: inherit;
+		}
+	}
+}
+
+@media all and ( min-width: @wgMFDeviceWidthDesktop ) {
+	.mw-cookiewarning-container {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: @contentMaxWidthTablet / @cookieWarningFontSize * 16;
+	}
+}

tests/phpunit/includes/CookieWarning.hooksTest.php

@@ -76,21 +76,21 @@ class CookieWarningHooksTest extends MediaWikiLangTestCase {
 				'http://google.de',
 				false,
 				false,
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 			[
 				true,
 				'',
 				'http://google.de',
 				false,
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 			[
 				true,
 				'',
 				false,
 				'http://google.de',
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 			// the config should be the used, if set (no matter if the messages are used or not)
 			[
@@ -98,21 +98,21 @@ class CookieWarningHooksTest extends MediaWikiLangTestCase {
 				'http://google.de',
 				false,
 				'http://google123.de',
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 			[
 				true,
 				'http://google.de',
 				'http://google1234.de',
 				'http://google123.de',
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 			[
 				true,
 				'',
 				'http://google.de',
 				'http://google123.de',
-				'<a href="http://google.de">More information</a>',
+				'&#160;<a href="http://google.de">More information</a>',
 			],
 		];
 	}