Page MenuHomePhabricator

Regressions caused by Timeless-specific form styles removal and related changes
Closed, ResolvedPublic


Compare Special:Contributions/MediaWiki message delivery on Wikidata and Meta-Wiki versus English Wikipedia.

WikidataMeta-WikiEnglish Wikipedia
Screenshot_2019-04-18 User contributions for MediaWiki message delivery - Wikidata.png (1×2 px, 516 KB)
Screenshot_2019-04-18 User contributions for MediaWiki message delivery - Meta.png (1×2 px, 525 KB)
Screenshot_2019-04-18 User contributions for MediaWiki message delivery - Wikipedia.png (1×2 px, 459 KB)

The font, for instance, is too small and now displays as Arial instead of Helvetica, because the load.php CSS is different. (I think they were different to begin with, but maybe there was a syncing error.) I don't know if anything else is different.

Line 4876, English Wikipedia:

body {
 font-family:'Helvetica Neue','Nimbus Sans','Helvetica','Arial',sans-serif;

Line 4637, Meta-Wiki:

body {

This is due to:

Event Timeline

Jc86035 updated the task description. (Show Details)

Oh, yeah, this was intentional. How bad is the new version (as in, the one on the non-wikipedia ones)? What's it like for you?

It doesn't prevent me from doing anything, but it looks a bit like someone tried to slap too much Vector into it. (It's possible that it's partly because I don't really like Arial, but the different CSS does significantly affect how nice the skin looks for me.)

Also, a lot of things (e.g. the "From date"/"To date" boxes) are too close to each other.

Isarra renamed this task from Wikis using the wrong CSS for Timeless skin to Regressions caused by Timeless-specific form styles removal and related changes.Apr 18 2019, 5:35 PM
Isarra updated the task description. (Show Details)

Okay, so default forms now have problems, especially when mixed with OOUI elements (as is the case on special:contributions), so we probably want some generic-arse stuff returned for the things still that, since falling back to the defaults is kinda not good.

Also issues with the font - are there issues that it's too small now, or is it more that arial specifically is kinda crappy, or both, or something else?

(Arial being crap was actually why I killed the custom fonts, since it was generally what we were winding up with on linux to match all the helvetica elsewhere, and just... ugh. But that doesn't mean the rest may not have been better...)

Most Linux distributions have Liberation Sans, don't they? Or at least one sans-serif font that's not Arial, I would think.

The issue isn't really that the font is unreadable or terrible, since it's almost exactly the same as what Vector looks like on a computer without Helvetica installed. It's just not really consistent with what "Timeless" looks like, since the skin is supposed to look less cramped and less... 2000s (for lack of a better descriptor) than Vector and Monobook.

I can't really form an unbiased opinion, because it could all be because I just got used to what Timeless looked like from looking at it too much. I do still think it used to look better, though.

So I had this hilarious plan to just go full verdana/deja vu/whatever on this, but then I realised that would take effort, so now... let's try stealing phabricator's font stack instead. But with less arial because I still hate arial.

And if you think this is unprofessional design practice, you're probably right, but right now I'm mostly just procrastinating from fixing the caching problems with my custom parser, so...

Well, the linux ones aren't generally actually using arial, but the arial-like ones are often not the greatest either.

Okay, so the font stack problems are definitely an ooui problem, as phabricator does not have any of the weird offset issues ooui does, with the same fonts. Joy.

Change 504963 had a related patch set uploaded (by Isarra; owner: Isarra):
[mediawiki/skins/Timeless@master] New font stack, plus some generic forms and crap

The newer CSS still looks a bit weird. The headers are much larger relative to the rest of the text, the GeoHack coordinates don't display correctly, and there are still a few places where there isn't enough padding.

Screenshot_2019-04-20 Germany - Wikipedia.png (1×2 px, 748 KB)

Screenshot_2019-04-20 Germany Revision history - Wikipedia.png (230×532 px, 29 KB)

I actually thought the body text was smaller than in Vector, even though it's slightly larger (14.4px to 14px).

Dammit stop being so helpful.

(kidding; this feedback is greatly appreciated, I'm just slow)

The font size should already be back to where it was before, though the headers are still a bit bigger... (was .95em, lowered to .9 with the first patch, bumped back to .95 with the new one)

Coordinates aren't going to display reliably properly until we get some sort of actual handling for them besides positioning them off the normal content.

Change 504963 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] New font stack, plus some generic forms and crap

ashley assigned this task to Isarra.
ashley removed a project: Patch-For-Review.

@Isarra Is the change to the checkbox styling (i.e. the display:block CSS) intentional? In the other skins they display on a single line.

Screenshot 2019-05-13 at 9.48.43 PM.png (1×946 px, 139 KB)

Yes, because that's more consistent with the newer forms, and we were getting some damn weird wrapping as-was.

But while it was intentional, that doesn't necessarily mean it's wise. Is it making things take up too much space, or other problems, would you say?

@Isarra Please look at T225412. display: block broke the non-JavaScript interface.

Change 520336 had a related patch set uploaded (by Paladox; owner: Isarra):
[mediawiki/skins/Timeless@REL1_33] New font stack, plus some generic forms and crap

Change 520336 merged by jenkins-bot:
[mediawiki/skins/Timeless@REL1_33] New font stack, plus some generic forms and crap

@Isarra I'm not sure if there's already a ticket for this, but GeoHack coordinates are misaligned again for me (possibly because of the recent change to where the language links are displayed). It looks like this is because the position is now set based on the top of the prose, so the coordinates usually end up floating above the infobox area. I also have the XTools gadget turned on, which adds additional vertical space between the h1 line and the start of the prose.