Page MenuHomePhabricator

Use CSS to create mw-ui-icon-arrow-down from mw-ui-icon-arrow-up
Closed, ResolvedPublic

Description

Instead of serving two images, serve one. Then use transform: scaleY(-1); to inverse it; creating an up arrow.

Support for 2d transforms is quite good:
http://caniuse.com/#feat=transforms2d

Android, iOS 3.2, Opera Mobile, Chrome, Safari, Opera (desktop); – all since the earliest version tracked or long ago.
The only known lack of support is IE <= 8 and Opera Mini.

The fallback would be that the image doesn't flip on click. Alternatively, you could use a class on the <html> element (like Modernizr) to serve the fallback image only when transforms are not supported (e.g. .up { transform; } .support-no-transform .up { background-image; no-embed url; }) but that's probably not needed. Clients not supporting this should be served the javascriptless version.

Kudos to Jake, who showcased this in offline-wikipedia.

This would remove the need for the image asset for mw-ui-icon-arrow-up

Event Timeline

Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle subscribed.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a project: good first task.
Jdlrobson set Security to None.

One can cover all four "points" (and many more) using a single arrow-head background image as the baseline by using transform: rotate(#deg); where # = 90, 180, 270 etc.

Personally, I find the resulting rendering when using transform: to accomplish stuff like this at small sizes a bit blurry (unless some transition: settings are also present that is) versus to just pointing directly to the icon/image you wanted in the first place. Its not like hosting such simple icons/images is overloading the internet/mediawiki right?

What I would like to see, however, is a single repository for such files that everybody (WikiEditor, Visual Editor, Vector, Minerva, Winter, etc. etc.) can all call upon instead of current random duplication per extension/module that seems to exist now.

Change 257616 had a related patch set uploaded (by Albert221):
Solved arrow-up as arrow-down scaled in Y by -1

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

@Krinkle, wouldn't resource loader embed the same image twice as data:image after making the proposed change? What would we gain in that case?

Change 257621 had a related patch set uploaded (by Albert221):
Solved arrow-up as arrow-down scaled in Y by -1

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

Change 257616 abandoned by Albert221:
Solved arrow-up as arrow-down scaled in Y by -1

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

Change 257621 abandoned by Albert221:
Solved arrow-up as arrow-down scaled in Y by -1

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

Change 257608 had a related patch set uploaded (by Albert221):
Solved arrow-up as arrow-down scaled in Y by -1

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

Sorry for this little mess. Now everything seems to be done

Change 257608 merged by jenkins-bot:
Solved arrow-up as arrow-down scaled in Y by -1

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

Jdlrobson claimed this task.