From 66b13d1ba8b4d8c2ca007fd0826dd73fd04c9849 Mon Sep 17 00:00:00 2001 From: Paladox Date: Mon, 22 May 2017 19:12:26 +0100 Subject: [PATCH] Add support for SVGs to $wgLogoHD with PNG fallback SVGs could already be used through $wgLogo. However, if a PNG fallback is desired for older browsers, using SVGs was previously not possible. This commit adds support for using an SVG image in $wgLogoHD and, using $wgLogo as the fallback image. Usage example: > $wgLogo = '/path/to/png'; > $wgLogoHD = [ > 'svg' => 'path/to/svg', > ]; Note: When the 'svg' key is set in $wgLogoHD, any '1.5x' and '2x' keys will no longer be used because SVGs can render optimally on any screen sizes. @Reedy, @Krinkle and @Brion VIBBER helped me alot with this. Bug: T86229 Change-Id: I6197d96ce9110f4711ef2c4b198445bc5c6ae110 --- RELEASE-NOTES-1.31 | 2 + includes/DefaultSettings.php | 11 ++ includes/OutputPage.php | 7 + .../ResourceLoaderSkinModule.php | 90 ++++++---- tests/phpunit/includes/OutputPageTest.php | 11 ++ .../ResourceLoaderSkinModuleTest.php | 158 ++++++++++++++++-- 6 files changed, 237 insertions(+), 42 deletions(-) diff --git a/RELEASE-NOTES-1.31 b/RELEASE-NOTES-1.31 index 3c22e78ca8..fc50897925 100644 --- a/RELEASE-NOTES-1.31 +++ b/RELEASE-NOTES-1.31 @@ -11,6 +11,8 @@ production. essential. * $wgUsejQueryThree was removed, as it is now the default. This was documented as a temporary variable during the migration period, deprecated since 1.29. +* $wgLogoHD has been updated to support svg images and uses $wgLogo where + possible for fallback images such as png. * … === New features in 1.31 === diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php index c1a518a96c..040f1ce7bf 100644 --- a/includes/DefaultSettings.php +++ b/includes/DefaultSettings.php @@ -290,6 +290,17 @@ $wgLogo = false; * ]; * @endcode * + * SVG is also supported but when enabled, it + * disables 1.5x and 2x as svg will already + * be optimised for screen resolution. + * + * @par Example: + * @code + * $wgLogoHD = [ + * "svg" => "path/to/svg_version.svg", + * ]; + * @endcode + * * @since 1.25 */ $wgLogoHD = false; diff --git a/includes/OutputPage.php b/includes/OutputPage.php index 7a2b7dfe1a..500be8d902 100644 --- a/includes/OutputPage.php +++ b/includes/OutputPage.php @@ -4021,6 +4021,13 @@ class OutputPage extends ContextSource { return; } + if ( isset( $logo['svg'] ) ) { + // No media queries required if we only have a 1x and svg variant + // because all preload-capable browsers support SVGs + $this->addLinkHeader( '<' . $logo['svg'] . '>;rel=preload;as=image' ); + return; + } + foreach ( $logo as $dppx => $src ) { // Keys are in this format: "1.5x" $dppx = substr( $dppx, 0, -1 ); diff --git a/includes/resourceloader/ResourceLoaderSkinModule.php b/includes/resourceloader/ResourceLoaderSkinModule.php index ca6e59f2bf..fbd0a24a7f 100644 --- a/includes/resourceloader/ResourceLoaderSkinModule.php +++ b/includes/resourceloader/ResourceLoaderSkinModule.php @@ -32,7 +32,7 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule { * @return array */ public function getStyles( ResourceLoaderContext $context ) { - $logo = $this->getLogo( $this->getConfig() ); + $logo = $this->getLogoData( $this->getConfig() ); $styles = parent::getStyles( $context ); $this->normalizeStyles( $styles ); @@ -42,25 +42,34 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule { '; }'; if ( is_array( $logo ) ) { - if ( isset( $logo['1.5x'] ) ) { - $styles[ - '(-webkit-min-device-pixel-ratio: 1.5), ' . - '(min--moz-device-pixel-ratio: 1.5), ' . + if ( isset( $logo['svg'] ) ) { + $styles['all'][] = '.mw-wiki-logo { ' . + 'background-image: -webkit-linear-gradient(transparent, transparent), ' . + CSSMin::buildUrlValue( $logo['svg'] ) . '; ' . + 'background-image: linear-gradient(transparent, transparent), ' . + CSSMin::buildUrlValue( $logo['svg'] ) . ';' . + 'background-size: 135px auto; }'; + } else { + if ( isset( $logo['1.5x'] ) ) { + $styles[ + '(-webkit-min-device-pixel-ratio: 1.5), ' . + '(min--moz-device-pixel-ratio: 1.5), ' . '(min-resolution: 1.5dppx), ' . - '(min-resolution: 144dpi)' - ][] = '.mw-wiki-logo { background-image: ' . - CSSMin::buildUrlValue( $logo['1.5x'] ) . ';' . - 'background-size: 135px auto; }'; - } - if ( isset( $logo['2x'] ) ) { - $styles[ - '(-webkit-min-device-pixel-ratio: 2), ' . - '(min--moz-device-pixel-ratio: 2),' . - '(min-resolution: 2dppx), ' . - '(min-resolution: 192dpi)' - ][] = '.mw-wiki-logo { background-image: ' . - CSSMin::buildUrlValue( $logo['2x'] ) . ';' . - 'background-size: 135px auto; }'; + '(min-resolution: 144dpi)' + ][] = '.mw-wiki-logo { background-image: ' . + CSSMin::buildUrlValue( $logo['1.5x'] ) . ';' . + 'background-size: 135px auto; }'; + } + if ( isset( $logo['2x'] ) ) { + $styles[ + '(-webkit-min-device-pixel-ratio: 2), ' . + '(min--moz-device-pixel-ratio: 2), ' . + '(min-resolution: 2dppx), ' . + '(min-resolution: 192dpi)' + ][] = '.mw-wiki-logo { background-image: ' . + CSSMin::buildUrlValue( $logo['2x'] ) . ';' . + 'background-size: 135px auto; }'; + } } } @@ -83,11 +92,21 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule { } } + /** + * @since 1.31 + * @param Config $conf + * @return string|array + */ + protected function getLogoData( Config $conf ) { + return static::getLogo( $conf ); + } + /** * @param Config $conf - * @return string|array Single url if no variants are defined - * or array of logo urls keyed by dppx in form "x". - * Key "1x" is always defined. + * @return string|array Single url if no variants are defined, + * or an array of logo urls keyed by dppx in form "x". + * Key "1x" is always defined. Key "svg" may also be defined, + * in which case variants other than "1x" are omitted. */ public static function getLogo( Config $conf ) { $logo = $conf->get( 'Logo' ); @@ -103,18 +122,25 @@ class ResourceLoaderSkinModule extends ResourceLoaderFileModule { '1x' => $logo1Url, ]; - // Only 1.5x and 2x are supported - if ( isset( $logoHD['1.5x'] ) ) { - $logoUrls['1.5x'] = OutputPage::transformResourcePath( + if ( isset( $logoHD['svg'] ) ) { + $logoUrls['svg'] = OutputPage::transformResourcePath( $conf, - $logoHD['1.5x'] - ); - } - if ( isset( $logoHD['2x'] ) ) { - $logoUrls['2x'] = OutputPage::transformResourcePath( - $conf, - $logoHD['2x'] + $logoHD['svg'] ); + } else { + // Only 1.5x and 2x are supported + if ( isset( $logoHD['1.5x'] ) ) { + $logoUrls['1.5x'] = OutputPage::transformResourcePath( + $conf, + $logoHD['1.5x'] + ); + } + if ( isset( $logoHD['2x'] ) ) { + $logoUrls['2x'] = OutputPage::transformResourcePath( + $conf, + $logoHD['2x'] + ); + } } return $logoUrls; diff --git a/tests/phpunit/includes/OutputPageTest.php b/tests/phpunit/includes/OutputPageTest.php index d29c79de84..d5948edc64 100644 --- a/tests/phpunit/includes/OutputPageTest.php +++ b/tests/phpunit/includes/OutputPageTest.php @@ -640,6 +640,17 @@ class OutputPageTest extends MediaWikiTestCase { 'not all and (min-resolution: 2dppx),' . ';rel=preload;as=image;media=(min-resolution: 2dppx)' ], + [ + [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => [ + 'svg' => '/img/vector.svg', + ], + ], + 'Link: ;rel=preload;as=image' + + ], [ [ 'ResourceBasePath' => '/w', diff --git a/tests/phpunit/includes/resourceloader/ResourceLoaderSkinModuleTest.php b/tests/phpunit/includes/resourceloader/ResourceLoaderSkinModuleTest.php index c56769827a..be17a6996b 100644 --- a/tests/phpunit/includes/resourceloader/ResourceLoaderSkinModuleTest.php +++ b/tests/phpunit/includes/resourceloader/ResourceLoaderSkinModuleTest.php @@ -1,15 +1,16 @@ [], + 'logo' => '/logo.png', 'expected' => [ 'all' => [ '.mw-wiki-logo { background-image: url(/logo.png); }' ], ], @@ -18,38 +19,77 @@ class ResourceLoaderSkinModuleTest extends PHPUnit_Framework_TestCase { 'parent' => [ 'screen' => '.example {}', ], + 'logo' => '/logo.png', 'expected' => [ 'screen' => [ '.example {}' ], 'all' => [ '.mw-wiki-logo { background-image: url(/logo.png); }' ], ], ], + [ + 'parent' => [], + 'logo' => [ + '1x' => '/logo.png', + '1.5x' => '/logo@1.5x.png', + '2x' => '/logo@2x.png', + ], + 'expected' => [ + 'all' => [ << [ << [ << [], + 'logo' => [ + '1x' => '/logo.png', + 'svg' => '/logo.svg', + ], + 'expected' => [ + 'all' => [ <<getMockBuilder( ResourceLoaderSkinModule::class ) ->disableOriginalConstructor() - ->setMethods( [ 'readStyleFiles' ] ) + ->setMethods( [ 'readStyleFiles', 'getConfig', 'getLogoData' ] ) ->getMock(); $module->expects( $this->once() )->method( 'readStyleFiles' ) ->willReturn( $parent ); - $module->setConfig( new HashConfig( [ - 'ResourceBasePath' => '/w', - 'Logo' => '/logo.png', - 'LogoHD' => false, - ] ) ); + $module->expects( $this->once() )->method( 'getConfig' ) + ->willReturn( new HashConfig() ); + $module->expects( $this->once() )->method( 'getLogoData' ) + ->willReturn( $logo ); $ctx = $this->getMockBuilder( ResourceLoaderContext::class ) ->disableOriginalConstructor()->getMock(); $this->assertEquals( - $module->getStyles( $ctx ), - $expected + $expected, + $module->getStyles( $ctx ) ); } @@ -64,4 +104,102 @@ class ResourceLoaderSkinModuleTest extends PHPUnit_Framework_TestCase { $this->assertFalse( $module->isKnownEmpty( $ctx ) ); } + + /** + * @dataProvider provideGetLogo + * @covers ResourceLoaderSkinModule::getLogo + */ + public function testGetLogo( $config, $expected, $baseDir = null ) { + if ( $baseDir ) { + $oldIP = $GLOBALS['IP']; + $GLOBALS['IP'] = $baseDir; + $teardown = new Wikimedia\ScopedCallback( function () use ( $oldIP ) { + $GLOBALS['IP'] = $oldIP; + } ); + } + + $this->assertEquals( + $expected, + ResourceLoaderSkinModule::getLogo( new HashConfig( $config ) ) + ); + } + + public function provideGetLogo() { + return [ + 'simple' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => false, + ], + 'expected' => '/img/default.png', + ], + 'default and 2x' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => [ + '2x' => '/img/two-x.png', + ], + ], + 'expected' => [ + '1x' => '/img/default.png', + '2x' => '/img/two-x.png', + ], + ], + 'default and all HiDPIs' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => [ + '1.5x' => '/img/one-point-five.png', + '2x' => '/img/two-x.png', + ], + ], + 'expected' => [ + '1x' => '/img/default.png', + '1.5x' => '/img/one-point-five.png', + '2x' => '/img/two-x.png', + ], + ], + 'default and SVG' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => [ + 'svg' => '/img/vector.svg', + ], + ], + 'expected' => [ + '1x' => '/img/default.png', + 'svg' => '/img/vector.svg', + ], + ], + 'everything' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/img/default.png', + 'LogoHD' => [ + '1.5x' => '/img/one-point-five.png', + '2x' => '/img/two-x.png', + 'svg' => '/img/vector.svg', + ], + ], + 'expected' => [ + '1x' => '/img/default.png', + 'svg' => '/img/vector.svg', + ], + ], + 'versioned url' => [ + 'config' => [ + 'ResourceBasePath' => '/w', + 'Logo' => '/w/test.jpg', + 'LogoHD' => false, + 'UploadPath' => '/w/images', + ], + 'expected' => '/w/test.jpg?edcf2', + 'baseDir' => dirname( dirname( __DIR__ ) ) . '/data/media', + ], + ]; + } } -- 2.20.1