Page MenuHomePhabricator

Check all bundled skins (and WMF production) to ensure OOUI dialogs and overlays have sane font-size
Closed, ResolvedPublic

Description

In https://gerrit.wikimedia.org/r/#/c/421456/ we're removing this hack from MediaWiki core:

/* HACK: Set sane font-size for OOUI dialogs (and menus/popups inside the default overlay), in
   the most common case. This should be skin's responsibility, but alas our skins tend to have the
   weirdest font-sizes on body. This shall be removed when we make the MediaWiki skins bundled with
   tarball sane. (T91152) */
body > .oo-ui-windowManager,
.oo-ui-defaultOverlay {
	font-size: 0.8rem;
}

We should check all skins that are bundled with MediaWiki installer to ensure OOUI dialogs and overlays have a sane font-size.

Event Timeline

matmarex created this task.Mar 23 2018, 7:54 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 23 2018, 7:54 PM
matmarex claimed this task.Mar 23 2018, 7:56 PM
matmarex triaged this task as High priority.

Change 422142 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/CologneBlue@master] Match font of OOUI dialogs/dropdowns to normal body font

https://gerrit.wikimedia.org/r/422142

Change 422143 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Modern@master] Match font of OOUI dialogs/dropdowns to normal body font

https://gerrit.wikimedia.org/r/422143

I used this little snippet for testing:

class SpecialBlankpage extends UnlistedSpecialPage {
	public function __construct() {
		parent::__construct( 'Blankpage' );
	}

	public function execute( $par ) {
		$this->setHeaders();
		$out = $this->getOutput();

		$out->enableOOUI();

		$out->addHTML( new OOUI\DropdownInputWidget( [
			'id' => 'a',
			'infusable' => true,
			'options' => [
				[ 'data' => 'Default overlay' ],
				[ 'data' => 'Lorem ipsum dolor sit amet' ],
				[ 'data' => 'consectetur adipisicing elit' ],
			]
		] ) );

		$out->addHTML( new OOUI\ButtonWidget( [
			'id' => 'b',
			'infusable' => true,
			'icon' => 'tag',
			'label' => 'Button',
		] ) );

		$out->addModuleStyles( 'oojs-ui.styles.icons-content' );
		$out->addScript( ResourceLoader::makeInlineScript( "
			mw.loader.using( 'oojs-ui' ).done( function () {
				OO.ui.infuse( 'a' );
				OO.ui.infuse( 'b' ).on( 'click', function () {
					OO.ui.alert( 'Default window manager' );
				} );
			} );
		" ) );
	}
}

And I looked if the font size inside the dropdown and dialog roughly matches the normal body text font size: [note that apparently the dialog is intentionally using slightly larger font]

I tested the bundled skins and skins in WMF production:

CologneBlueFixed in https://gerrit.wikimedia.org/r/422142 (had huge font size and wrong family)
ModernFixed in https://gerrit.wikimedia.org/r/422143 (had tiny font size)
MonoBookOK (was already done in 45863619918386fccd4b1a87157ad9e13637faeb)
VectorOK (was already done in 1f9f35e3f806f2ed5d0ecb0db71acbb23181f0cd)
MinervaNeueOK (it just uses the default 1em for everything… so simple and nice)
TimelessOK (was already done in 29cabefee5e8bd0fe18d4b7a9b0292e87ce97a78)
matmarex renamed this task from Check all bundled skins to ensure OOUI dialogs and overlays have sane font-size to Check all bundled skins (and WMF production) to ensure OOUI dialogs and overlays have sane font-size.Mar 27 2018, 1:24 PM

Change 422142 merged by jenkins-bot:
[mediawiki/skins/CologneBlue@master] Match font of OOUI dialogs/dropdowns to normal body font

https://gerrit.wikimedia.org/r/422142

Change 422143 merged by jenkins-bot:
[mediawiki/skins/Modern@master] Match font of OOUI dialogs/dropdowns to normal body font

https://gerrit.wikimedia.org/r/422143

matmarex closed this task as Resolved.Mar 27 2018, 5:28 PM
matmarex removed a project: Patch-For-Review.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptMar 27 2018, 5:28 PM