Page MenuHomePhabricator

Unify ButtonWidget padding usage and reduce CSS hacks
Closed, ResolvedPublic

Description

The original work on improving and unifying button appearance and CSS was accompanied with a certain combination of workarounds to make up for a Firefox/macOS rendering quirks:
When font family is set to generic sans-serif, Firefox (at least for the last 20+ versions, with current version being v65) seems to use “Helvetica Neue” for it.
But it applies a different line-box when applying sans-serif than all other major browser on macOS (Chrome, Safari) ending up in a lower than expected base line:

and emphasized

Reduced code example:
https://codepen.io/Volker_E/pen/JxBqLQ

Reported upstream:
https://bugzilla.mozilla.org/show_bug.cgi?id=1527735


This has led me to implement different top/bottom paddings with an uneven line-height, but it was a bad choice for further cross-browser consistent rendering and also for code size.
We need to unify paddings and line-height to more sane values.

Event Timeline

Volker_E created this task.Feb 13 2019, 8:39 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 13 2019, 8:39 PM

Tested on FF (standard settings) and Chrome (PT Sans as my sans-serif font):

Firefox
Chrome
Volker_E updated the task description. (Show Details)Feb 13 2019, 9:03 PM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptFeb 13 2019, 9:04 PM

Current OOUI treatment with different top and bottom paddings does result in asymmetrical layout on Windows/Firefox for example:

Change 490502 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Unify padding-top and padding-bottom values

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

Change 490506 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Remove variables with duplicated values

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

@Esanders Would be great to have a comparison/review on Linux as well…

Firefox 65/Win 7 (emulated):

BeforeAfter
Volker_E triaged this task as High priority.Feb 14 2019, 12:31 AM
Volker_E moved this task from Backlog to Reviewing on the OOUI board.
matmarex removed a subscriber: matmarex.Feb 14 2019, 1:23 PM

Change 491652 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Provide single-line TextInputWidgets with a distinct height

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

Change 491681 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Use consistent base size for TagMultiselectWidget's input

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

@Ryasmeen QA steps from my POV:
All kinds of

are affected (and should just see a change by 1 pixel of vertical text alignment in the widgets in all browsers aside of Firefox/macOS, which interprets it wrongly and shows a misalignment, that's known).
But nothing more than that.

Please consider comparing those widgets on a few special pages, like RecentChanges

Change 490502 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Unify padding-top and padding-bottom values

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

Change 490506 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Remove variables with duplicated values

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

Change 491652 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Provide single-line TextInputWidgets with a distinct height

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

Change 491681 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Use consistent base size for TagMultiselectWidget's input

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

Volker_E moved this task from Reviewing to OOUI-0.30.2 on the OOUI board.Feb 20 2019, 9:40 PM
Volker_E edited projects, added OOUI (OOUI-0.30.2); removed OOUI.
Volker_E moved this task from OOUI-0.30.2 to OOUI-0.30.3 on the OOUI board.Feb 21 2019, 3:47 AM
Volker_E edited projects, added OOUI (OOUI-0.30.3); removed OOUI (OOUI-0.30.2).

Change 491943 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.30.3

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

Change 491943 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.30.3

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

Volker_E closed this task as Resolved.Feb 26 2019, 2:12 AM

Mozilla feedback from upstream task:

If I view this example on macOS, I see a discrepancy like in the screenshot.

However, the reason for this is that by default, sans-serif maps to Helvetica (not Helvetica Neue) on macOS; at least, that's what is set in the default prefs.[1] As such, there's no expectation that a button formatted with Helvetica Neue will exactly match one using sans-serif.

If I modify the example to specify Helvetica for the right-hand button, it matches the left-hand one; or if I modify the font prefs to use Helvetica Neue for sans-serif, they also match.

So there's a cross-browser inconsistency that we seemingly have to live with. Went with the default that works for Firefox/Win, Firefox/Ubuntu but has this glitch on Firefox/macOS.
Resolved from our side.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptFeb 26 2019, 2:12 AM
Volker_E raised the priority of this task from High to Needs Triage.Feb 26 2019, 2:15 AM
Volker_E removed a project: Patch-For-Review.
Volker_E moved this task from Backlog to Done on the UI-Standardization-Kanban board.

@Ryasmeen QA steps from my POV:
All kinds of

are affected (and should just see a change by 1 pixel of vertical text alignment in the widgets in all browsers aside of Firefox/macOS, which interprets it wrongly and shows a misalignment, that's known).
But nothing more than that.

Please consider comparing those widgets on a few special pages, like RecentChanges

@Volker_E: Checked these on Special: Preferences and Special: RecentChanges page using Safari. Nothing seems out of place so far.