Change OOUI WikimediaUI theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki's Vector skin
Closed, ResolvedPublic0 Story Points

Description

Continued from T91152.

OOUI uses font-size of 12.8px (0.8×16px) for windows and toolbars, but Vector skin uses 14px (0.875×16px) for body content, creating inconsistency between widgets in windows/toolbars and "free-standing" ones.

We should change OOUI MediaWiki theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), and make sure that this doesn't explode existing interfaces. To avoid redrawing all existing icons with new grid, we'll keep the current absolute size for them (making them slightly smaller relative to font size).

Proposal (also featuring overhauled icons from T177432):

Related Objects

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdforrester-WMF renamed this task from Change OOUI MediaWiki theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki Vector skin to Change OOUI WikimediaUI theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki's Vector skin.May 20 2017, 8:24 AM
Volker_E updated the task description. (Show Details)Feb 9 2018, 1:26 AM

Change 416603 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] demos: Increase base font-size to 14px

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

Change 416604 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] WikimediaUI theme: Amend positioning/sizing to unify on 14px base font size

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

Volker_E moved this task from Backlog to Doing on the OOUI board.Mar 6 2018, 3:57 AM
Volker_E claimed this task.
Volker_E updated the task description. (Show Details)Mar 6 2018, 4:28 AM

Removing Front-end-Standards-Group as this has gone through internal review by two affiliated teams, Design and Editing, with (cautiously) positive feedback to progress.

Before:


After:

Elitre added a comment.Mar 8 2018, 1:02 PM

Removing/hiding the Special characters button?

Volker_E added a comment.EditedMar 8 2018, 6:31 PM

@Elitre No, we don't change anything functionality-wise. Screenshot part got misleadingly cropped there.
We only care about bringing the standardized icon canvas to VE and in the course slightly increasing the toolbar's height (by 2px).

Volker_E added a comment.EditedMar 11 2018, 9:55 PM

Note: We'll also need to take care of places like 've.init.mw.Diffpage.less' and calculations like font-size: 12.8/14em; there and three occurrences, besides VE in Extension:TemplateData and Extension:ProofreadPage:
https://codesearch.wmflabs.org/things/?q=%3A%200.91&i=nope&files=&repos=

This comment was removed by Elitre.

Will it impact Structures discussions, while it uses the two editors?

@Trizek-WMF It will impact in the same way as it will VE, it will change the vertical height of toolbar items in both modes from 40px to 42px with a bit changed icons. I'm providing a patch against StructuredDiscussions for @Catrope and others to review.

Change 420130 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Flow@master] Remove special font-size treatment following-up UI unification for 14px base

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

Change 420138 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/VisualEditor@master] Remove special font-size treatment following-up UI unified in 14px base

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

Change 420140 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/ProofreadPage@master] Remove special font-size treatment following-up UI unified in 14px base

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

Change 416603 merged by jenkins-bot:
[oojs/ui@master] demos: Increase base font-size to 14px

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

Change 416604 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Use 14px base font size & amend positioning/sizing

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

Change 420694 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update icons for new 20px grid

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

Change 420695 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] Remove special font-size treatment following-up UI unified in 14px base

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

Change 420696 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[VisualEditor/VisualEditor@master] Update icons for new 20px grid

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

Change 420747 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Vector@master] Use consistent font size for OOUI dialogs

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

Change 420773 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/UploadWizard@master] Remove 'width' overrides for blurry icons

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

Jdforrester-WMF moved this task from Doing to OOUI-0.26.0 on the OOUI board.Mar 20 2018, 6:02 PM
Jdforrester-WMF edited projects, added OOUI (OOUI-0.26.0); removed OOUI.

When will it be released?

Change 420695 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Remove special font-size treatment following-up UI unified in 14px base

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

Change 421109 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (52b59d337)

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

Change 420130 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Remove special font-size treatment following-up UI unification for 14px base

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

When will it be released?

It will be released to Wikipedias and other wikis next week, 27-29 March, per the usual schedule. The change is already available for testing on Beta Cluster (https://en.wikipedia.beta.wmflabs.org/), note that we're still merging some of the patches.

Change 421109 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (52b59d337)

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

Change 420773 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Remove 'width' overrides for blurry icons

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

Change 420138 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Remove special font-size treatment following-up UI unified in 14px base

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

Change 420747 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use consistent font size for OOUI dialogs

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

Change 421221 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/VisualEditor@master] Fix the image sizes in ve.ui.MWInternalLinkContextItem

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

Observed this issue in CX2 and attempted to fix in https://gerrit.wikimedia.org/r/421221

When will it be released?

It will be released to Wikipedias and other wikis next week, 27-29 March, per the usual schedule. The change is already available for testing on Beta Cluster (https://en.wikipedia.beta.wmflabs.org/), note that we're still merging some of the patches.

Thank you for making this clear.

There's still three places in OOUI that explicitly mention 12.8px:

src/themes/wikimediaui/layouts.less

> .oo-ui-fieldLayout-help {
	// Override the default
	margin-right: 0;
	// Move into the space of `margin-right` of header
	margin-left: -1.72em; //  @size-fieldlayout-help-icon + @padding-horizontal-frameless, hardcoded to avoid IE11 rounding problems
}

src/themes/apex/common.less

@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`

src/themes/blank/common.less

@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`

@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.875em`≈`24px` at base `font-size: 12.8px`
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px` at base `font-size: 12.8px`

Change 421221 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Fix the image sizes in ve.ui.MWInternalLinkContextItem

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

Change 421474 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Amend icon sizing to align to new icon set

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

This isn't a support task. If anything is needed that's not covered in T189564, please specify there. TY!

Change 421474 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Amend icon sizing to align to new icon set

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

Jdforrester-WMF closed this task as Resolved.Mar 24 2018, 12:24 AM
Jdforrester-WMF removed a project: Patch-For-Review.
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptMar 24 2018, 12:24 AM

There's still three places in OOUI that explicitly mention 12.8px:

src/themes/wikimediaui/layouts.less

> .oo-ui-fieldLayout-help {
 	// Override the default
 	margin-right: 0;
 	// Move into the space of `margin-right` of header
 	margin-left: -1.72em; //  @size-fieldlayout-help-icon + @padding-horizontal-frameless, hardcoded to avoid IE11 rounding problems
 }

I don't see it here?

1.72em is only coincidentally similar to 1.172em below. This value is like this because @size-fieldlayout-help-icon + @padding-horizontal-frameless calculates to 1.7142857142857142em, which IE11 rounds to 1.71em, which is 23.939999999999998px, which IE11 rounds to 23px. Using 1.72em makes the result come out right, as 24px. :/

src/themes/apex/common.less

@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`

This is correct, as the Apex theme is still optimized for 12.8px font size.

src/themes/blank/common.less

@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`

@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `1.875em`≈`24px` at base `font-size: 12.8px`
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.9375em`≈`12px` at base `font-size: 12.8px`

Fixed in https://gerrit.wikimedia.org/r/#/c/421810/