Last modified: 2014-02-06 11:40:47 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T37334, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 35334 - WikiLove: Add HiDPI version or SVG of "heart" icon
WikiLove: Add HiDPI version or SVG of "heart" icon
Status: RESOLVED FIXED
Product: MediaWiki extensions
Classification: Unclassified
WikiLove (Other open bugs)
unspecified
All All
: Low trivial (vote)
: ---
Assigned To: Nobody - You can work on this!
gci2013 https://www.mediawiki.org/wik...
: easy
Depends on:
Blocks: hidpi
  Show dependency treegraph
 
Reported: 2012-03-19 23:09 UTC by Brion Vibber
Modified: 2014-02-06 11:40 UTC (History)
7 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Screenshot on mediawiki.org on iPad w/ Retina display (413.84 KB, image/png)
2012-03-19 23:11 UTC, Brion Vibber
Details

Description Brion Vibber 2012-03-19 23:09:51 UTC
Recommend using a resolution-independent SVG with a PNG fallback, or else use CSS media queries to use a higher-resolution image on displays with 2x scale factor.
Comment 1 Brion Vibber 2012-03-19 23:11:52 UTC
Created attachment 10275 [details]
Screenshot on mediawiki.org on iPad w/ Retina display

Heart tab icon is clearly pixelated.
Comment 2 Ryan Kaldari 2012-03-26 19:41:20 UTC
Some progress:
http://commons.wikimedia.org/wiki/File:Heart_icon.svg

Still need to convert it into sprite files and put it in the extension.
Comment 3 Ryan Kaldari 2012-04-13 08:10:41 UTC
What do you think of this solution?
https://gerrit.wikimedia.org/r/#change,4842
Comment 4 Brion Vibber 2012-04-13 19:07:23 UTC
I think that'll fail on non-IE browsers that don't support SVG in CSS backgrounds, which'd catch at least Firefox 3.6 (SVG supported, but not in <img> or CSS) and Android 2.x (no SVG)
http://caniuse.com/#feat=svg-css

Also, I'm not sure that HTML-style conditional comments work in CSS... that seems a bit funky.
Comment 5 Brion Vibber 2012-04-13 19:53:24 UTC
Something like this could work, though it's sub-ideal:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	#ca-wikilove.icon a {
		background-image: url(images/heart-icons-red.svg);
	}
}

The only Android devices with a pixel ratio of 2 are running Android 4 or later, so have SVG support.

This would however not give you the SVG on an older iPad with non-retina display, or on a non-high-res computer, showing the pixelated PNG when you zoom in...

...and of course it'd be nice to support displays with a density factor < 2 (Windows 8 slates will come in 1.0, 1.4, and 1.8 flavors allegedly; many phones today are 1.5)
Comment 6 Ryan Kaldari 2012-04-13 20:09:39 UTC
There's also the option of using a high-res PNG and using:
-moz-background-size
-webkit-background-size
background-size

That will cover everything except IE < 9 (including Android).

Can anyone confirm if conditional CSS comments work in MediaWiki or not? i.e. do they get stripped out by the minifier?
Comment 7 Brion Vibber 2012-04-13 20:39:30 UTC
I don't think they'll get stripped out, since they're not comments in CSS.

RL loader script shows it intact:

\x3c!--[if lt IE 9]\x3e background-image:url(data:image/png;base64,iVBOR......==);background-image:url(http://pancake.local/core/extensions/WikiLove/modules/ext.wikiLove/images/heart-icons-red.png?2012-04-13T19:08:20Z)!ie;\x3c![endif]--\x3e

Double-size PNG and use of *-background-size will be the most compatible thing for now -- but beware that some older browsers don't support background-size so it's probably best to only do that in a @media with a -*-min-device-pixel-ratio.
Comment 8 Brion Vibber 2012-04-13 21:56:21 UTC
https://gerrit.wikimedia.org/r/4924 works around this for Special:Upload by using readAsArrayBuffer and converting the buffer to a binary string (which the jpeg metadata library wants).

Better fix would be to update the metadata library to accept array buffers as well.

Also needs fixing in UploadWizard.
Comment 9 Brion Vibber 2012-04-13 21:57:01 UTC
This appears to be the wrong bug entry. D'oh!
Comment 10 Quim Gil 2013-11-22 05:33:54 UTC
There is a patch in Gerrit from a Google Code-in student. I have asked him to fix the commit message to mention this bug report.

In the meantime, your reviews are welcome. Thank you!

https://gerrit.wikimedia.org/r/#/c/96356/
Comment 11 Gerrit Notification Bot 2013-11-22 12:39:02 UTC
Change 96356 had a related patch set uploaded by Sniok:
Adding HiDPI 'Heart' SVG icon

https://gerrit.wikimedia.org/r/96356
Comment 12 Gerrit Notification Bot 2014-01-28 22:21:21 UTC
Change 96356 merged by jenkins-bot:
Adding HiDPI 'Heart' SVG icon

https://gerrit.wikimedia.org/r/96356
Comment 13 Bartosz Dziewoński 2014-02-06 11:40:47 UTC
This ought to be fixed by the above patch. Thanks!

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links