Page MenuHomePhabricator
Create Task
Maniphest T97631

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 Estimated Story Points
Actions

Assigned To
Volker_E
Authored By
matmarex
Apr 30 2015, 7:29 AM
Tags
Referenced Files
F15960908: image.png
Mar 22 2018, 10:28 AM
F14652880: VE_post_14px.png
Mar 7 2018, 8:04 PM
F14652624: VE_pre_14px.png
Mar 7 2018, 8:04 PM
F14474470: OOUI 14px base font-size 2018-03-05.png
Mar 6 2018, 4:28 AM
F160051: unittest.htm
May 3 2015, 7:07 PM
Subscribers
Aklapper
Catrope
• Elitre
Esanders
gerritbot
GOIII
Jdforrester-WMF
View All 14 Subscribers
Tokens
"Doubloon" token, awarded by RandomDSdevel.

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):

OOUI 14px base font-size 2018-03-05.png (1×1 px, 100 KB)

Details

SubjectRepoBranchLines +/-
Amend icon sizing to align to new icon setmediawiki/extensions/MobileFrontendmaster+2 -6
Fix the image sizes in ve.ui.MWInternalLinkContextItemmediawiki/extensions/VisualEditormaster+2 -3
Remove special `font-size` treatment following-up UI unified in `14px` basemediawiki/extensions/VisualEditormaster+17 -37
Remove 'width' overrides for blurry iconsmediawiki/extensions/UploadWizardmaster+0 -21
Use consistent font size for OOUI dialogsmediawiki/skins/Vectormaster+2 -1
Remove special `font-size` treatment following-up UI unification for `14px` basemediawiki/extensions/Flowmaster+0 -9
Update VE core submodule to master (52b59d337)mediawiki/extensions/VisualEditormaster+1 -1
Remove special `font-size` treatment following-up UI unified in `14px` baseVisualEditor/VisualEditormaster+0 -2
WikimediaUI theme: Use `14px` base font size & amend positioning/sizingoojs/uimaster+14 -17
demos: Increase base `font-size` to `14px`oojs/uimaster+2 -2
Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
matmarex mentioned this in T138734: Echo UI has blurry icons.Jun 27 2016, 3:49 PM
Catrope merged a task: T138734: Echo UI has blurry icons.Jun 27 2016, 4:21 PM
Catrope added subscribers: Catrope, Esanders, Zppix.
Esanders mentioned this in T139220: Cancel and edit icon misaligned in link inspector.Jul 2 2016, 9:26 PM
matmarex mentioned this in T141262: Context has wrong font size inside dialog.Jul 25 2016, 2:11 PM
matmarex mentioned this in T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop).Oct 13 2016, 1:52 PM
Volker_E added a subtask: T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop).Oct 15 2016, 2:54 AM
Volker_E changed the status of subtask T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop) from Open to Stalled.Oct 15 2016, 3:03 AM
Volker_E moved this task from Inbox to Backlog on the Front-end-Standards-Group board.Feb 8 2017, 7:11 PM
Volker_E mentioned this in T158006: The Active Filter Display Area - adjustments to RC page layout .Feb 24 2017, 1:44 AM
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
Esanders mentioned this in T168089: Avoid blurred icons and pixel rounding errors by settling on unified font size.Jun 16 2017, 8:01 PM
Pginer-WMF subscribed.Jun 23 2017, 11:54 AM
Catrope mentioned this in T168835: Make icons size more consistent for Recent Changes filters.Jun 26 2017, 10:46 PM
Volker_E mentioned this in T164308: [regression wmf.21] Safari only - filter capsules with highlight displayed misalgned .Jul 6 2017, 11:52 AM
Volker_E closed subtask T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop) as Resolved.Aug 17 2017, 6:46 PM
Volker_E reopened subtask T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop) as Open.
matmarex closed subtask T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop) as Resolved.Aug 17 2017, 7:20 PM
Volker_E mentioned this in T177668: Mangle whitespace of OOUI in MediaWiki's HTMLForm.Oct 6 2017, 9:22 PM
Volker_E updated the task description. (Show Details)Feb 9 2018, 1:26 AM
gerritbot subscribed.Mar 5 2018, 11:28 PM

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

gerritbot added a project: Patch-For-Review.Mar 5 2018, 11:28 PM

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 claimed this task.Mar 6 2018, 3:57 AM
Volker_E moved this task from Backlog to Doing on the OOUI board.
Volker_E added a project: Community-Relations-Support.Mar 6 2018, 4:15 AM
Volker_E updated the task description. (Show Details)Mar 6 2018, 4:28 AM
Volker_E removed a project: Front-end-Standards-Group.EditedMar 6 2018, 4:31 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.

• Elitre subscribed.Mar 6 2018, 3:18 PM

Hi there, what's with our tag? :)
Please see https://office.wikimedia.org/wiki/Community_Liaisons/Support_requests . TYVM!

Volker_E added a comment.Mar 7 2018, 8:04 PM

Before:

VE_pre_14px.png (858×2 px, 270 KB)

After:
VE_post_14px.png (858×2 px, 267 KB)

• 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=

Volker_E mentioned this in T189564: CL support for VE base font-size increase from 12.8px to 14px (slight increase in interface, not content).Mar 13 2018, 8:01 AM
• Elitre added a comment.Mar 14 2018, 10:07 AM
This comment was removed by • Elitre.
Trizek-WMF subscribed.Mar 15 2018, 11:35 AM

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

• Elitre added a subtask: T189564: CL support for VE base font-size increase from 12.8px to 14px (slight increase in interface, not content).Mar 15 2018, 12:06 PM
Volker_E added a comment.Mar 16 2018, 10:13 PM

@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.

gerritbot added a comment.Mar 16 2018, 10:31 PM

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

gerritbot added a comment.Mar 17 2018, 12:06 AM

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

Volker_E mentioned this in T189920: Remove VE `font-size` of 12.8px induced special treatment in extensions after unifying base font-size to 14px.Mar 17 2018, 12:27 AM
gerritbot added a comment.Mar 17 2018, 12:35 AM

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

Volker_E mentioned this in T189425: Special:AbuseFilter: OOUI widgets take up more vertical space.Mar 17 2018, 6:01 AM
Volker_E mentioned this in T111999: Convert Special:ListUsers autocompletion to use OOUI (Widget or HTMLForm).Mar 19 2018, 5:55 AM
Trizek-WMF added projects: User-notice, User-notice-collaboration.Mar 19 2018, 1:58 PM
Trizek-WMF moved this task from To Triage to Announce in next Collaboration Newsletter on the User-notice-collaboration board.
Trizek-WMF moved this task from To Triage to Not ready to announce on the User-notice board.
gerritbot added a comment.Mar 20 2018, 10:46 AM

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

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

gerritbot added a comment.Mar 20 2018, 10:52 AM

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

gerritbot added a comment.Mar 20 2018, 1:04 PM

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

gerritbot added a comment.Mar 20 2018, 1:04 PM

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

gerritbot added a comment.Mar 20 2018, 1:04 PM

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

gerritbot added a comment.Mar 20 2018, 4:14 PM

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

gerritbot added a comment.Mar 20 2018, 5:18 PM

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.
matmarex added parent tasks: T168089: Avoid blurred icons and pixel rounding errors by settling on unified font size, T138734: Echo UI has blurry icons.Mar 20 2018, 8:14 PM
Trizek-WMF added a comment.Mar 21 2018, 3:47 PM

When will it be released?

gerritbot added a comment.Mar 21 2018, 4:45 PM

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

gerritbot added a comment.Mar 21 2018, 7:18 PM

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

gerritbot added a comment.Mar 21 2018, 8:16 PM

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

matmarex added a comment.Mar 21 2018, 8:17 PM
In T97631#4069218, @Trizek-WMF wrote:

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.

gerritbot added a comment.Mar 21 2018, 8:28 PM

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

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

gerritbot added a comment.Mar 21 2018, 8:56 PM

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

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2018-03-27 (1.31.0-wmf.27)).Mar 21 2018, 9:00 PM
gerritbot added a comment.Mar 21 2018, 9:07 PM

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

gerritbot added a comment.Mar 21 2018, 9:17 PM

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

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

gerritbot added a comment.Mar 22 2018, 7:16 AM

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

Volker_E mentioned this in T190397: Notifications popup: Remain with header/footer size or amend?.Mar 22 2018, 9:30 AM
santhosh added a comment.Mar 22 2018, 10:28 AM

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

image.png (505×590 px, 65 KB)

• Elitre added a comment.Mar 22 2018, 10:29 AM
In T97631#4070505, @matmarex wrote:
In T97631#4069218, @Trizek-WMF wrote:

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.

Trizek-WMF moved this task from Announce in next Collaboration Newsletter to In current Collaboration Newsletter draft on the User-notice-collaboration board.Mar 22 2018, 1:50 PM
Trizek-WMF moved this task from Not ready to announce to Announce in next Tech/News on the User-notice board.
Jdforrester-WMF added a comment.Mar 22 2018, 5:02 PM

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`
Quiddity moved this task from Announce in next Tech/News to In current Tech/News draft on the User-notice board.Mar 22 2018, 8:09 PM
gerritbot added a comment.Mar 23 2018, 5:36 AM

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

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

gerritbot added a comment.Mar 23 2018, 6:01 AM

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

• Deskana closed subtask T189920: Remove VE `font-size` of 12.8px induced special treatment in extensions after unifying base font-size to 14px as Resolved.Mar 23 2018, 2:11 PM
• Elitre removed a project: Community-Relations-Support.Mar 23 2018, 3:12 PM

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

gerritbot added a comment.Mar 23 2018, 4:34 PM

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
matmarex added a comment.Mar 26 2018, 2:55 PM
In T97631#4073385, @Jdforrester-WMF wrote:

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/

• Elitre closed subtask T189564: CL support for VE base font-size increase from 12.8px to 14px (slight increase in interface, not content) as Resolved.Mar 27 2018, 9:00 AM
Volker_E mentioned this in T190980: Improve RCFilters highlight circles CSS code output and align due to new base font-size.Mar 29 2018, 12:17 AM
Liuxinyu970226 moved this task from In current Tech/News draft to Already announced/Archive on the User-notice board.Mar 29 2018, 12:00 PM
RandomDSdevel awarded a token.Apr 2 2018, 1:09 AM
Amorymeltzer mentioned this in T191834: Return Modern menus to non-vector-like/ooui appearance.Apr 9 2018, 7:49 PM
Trizek-WMF moved this task from In current Collaboration Newsletter draft to Announced in Collaboration Newsletter on the User-notice-collaboration board.Apr 11 2018, 2:13 PM
Ladsgroup edited projects, added User-notice-archive; removed User-notice.Aug 13 2022, 1:54 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL