Logos defined with pixels should be scaleable in browsers

This reverts commit bc200b6a1a reapplying
the patch. It has been modified slightly to temporarily work
with the beta cluster's unsupported configuration.

Bug: T207038
Change-Id: Ie86a5b59fbf93a400796a4cac3724207830092b5
This commit is contained in:
Jdlrobson 2021-09-08 20:40:51 +00:00 committed by jdlrobson
parent bc200b6a1a
commit 4de7250830
2 changed files with 55 additions and 7 deletions

View file

@ -532,15 +532,35 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
}
}
/**
* Modifies configured logo width/height to ensure they are present and scaleable
* with different font-sizes.
* @param array $logoElement with width, height and src keys.
* @return array modified version of $logoElement
*/
private static function getRelativeSizedLogo( array $logoElement ) {
$width = $logoElement['width'];
$height = $logoElement['height'];
$widthRelative = $width / 16;
$heightRelative = $height / 16;
// Allow skins to scale the wordmark with browser font size (T207789)
$logoElement['style'] = 'width: ' . $widthRelative . 'em; height: ' . $heightRelative . 'em;';
return $logoElement;
}
/**
* Return an array of all available logos that a skin may use.
* @since 1.35
* @param Config $conf
* @return array with the following keys:
* - 1x: a square logo (required)
* - 2x: a square logo for HD displays (optional)
* - wordmark: a rectangle logo (wordmark) for print media and skins which desire
* horizontal logo (optional)
* - 1x(string): a square logo composing the `icon` and `wordmark` (required)
* - 2x (string): a square logo for HD displays (optional)
* - wordmark (object): a rectangle logo (wordmark) for print media and skins which desire
* horizontal logo (optional). Must declare width and height fields, defined in pixels
* which will be converted to ems based on 16px font-size.
* - tagline (object): replaces `tagline` message in certain skins. Must declare width and
* height fields defined in pixels, which are converted to ems based on 16px font-size.
* - icon (string): a square logo similar to 1x, but without the wordmark. SVG recommended.
*/
public static function getAvailableLogos( $conf ): array {
$logos = $conf->get( 'Logos' );
@ -574,6 +594,21 @@ class ResourceLoaderSkinModule extends ResourceLoaderLessVarFileModule {
if ( !isset( $logos['1x'] ) ) {
throw new RuntimeException( "The key `1x` is required for wgLogos or wgLogo must be defined." );
}
// @todo: Note the beta cluster and other wikis may be using
// unsupported configuration where these values are set to false.
// The boolean check can be removed when this has been addressed.
if ( isset( $logos['wordmark'] ) && $logos['wordmark'] ) {
// Allow skins to scale the wordmark with browser font size (T207789)
$logos['wordmark'] = self::getRelativeSizedLogo( $logos['wordmark'] );
}
// @todo: Note the beta cluster and other wikis may be using
// unsupported configuration where these values are set to false.
// The boolean check can be removed when this has been addressed.
if ( isset( $logos['tagline'] ) && $logos['tagline'] ) {
$logos['tagline'] = self::getRelativeSizedLogo( $logos['tagline'] );
}
// return the modified logos!
return $logos;
}

View file

@ -108,14 +108,23 @@ class ResourceLoaderSkinModuleTest extends ResourceLoaderTestCase {
[
[
'Logos' => [
'wordmark' => '/logo-wordmark.png',
'wordmark' => [
'src' => '/logo-wordmark.png',
'width' => 100,
'height' => 15,
],
'1x' => '/logo.png',
'svg' => '/logo.svg',
'2x' => 'logo-2x.png'
],
],
[
'wordmark' => '/logo-wordmark.png',
'wordmark' => [
'src' => '/logo-wordmark.png',
'width' => 100,
'height' => 15,
'style' => 'width: 6.25em; height: 0.9375em;',
],
'1x' => '/logo.png',
'svg' => '/logo.svg',
'2x' => 'logo-2x.png',
@ -268,7 +277,11 @@ CSS
'ResourceBasePath' => '/w',
'Logos' => [
'1x' => '/img/default.png',
'wordmark' => '/img/wordmark.png',
'wordmark' => [
'src' => '/img/wordmark.png',
'width' => 120,
'height' => 20,
],
],
],
'expected' => '/img/default.png',