Vector: Add SVG version of the watch star icon
Closed, ResolvedPublic

Description

Screenshot on mediawiki.org on iPad w/ Retina display

The star icon for watch in Vector skin's icon-watch mode is a low-resolution raster image, visibly pixelated on high-resolution screens such as the new iPad with Retina display, or when zooming in in the browser.

Recommend replacing with SVG and PNG/GIF fallback if possible.

Note that the star spins, so the GIF animation would need to be either replaced with a higher-resolution GIF or by animating the SVG image.


Version: 1.23.0
Severity: normal
Whiteboard: gci2013 https://www.mediawiki.org/wiki/Google_Code-In#Candidate_tasks
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=54307

Attached:

bzimport added projects: MediaWiki-Interface, Easy.Via ConduitNov 22 2014, 12:16 AM
bzimport set Reference to bz35335.
brion created this task.Via LegacyMar 19 2012, 11:14 PM
DanielFriesen added a comment.Via ConduitMar 20 2012, 3:51 AM

This was a JS feature, we should be able to handle this a bit easier than the static stuff.

The animation is nothing but a spin, right? Instead of trying to continue using horrible gifs or animate SVG in a way that probably won't be supported. How about we try using css?
Most browsers with .svg support should support css3-animations.

We can detect animation support + .svg support. If the browser supports both then we'll use a .svg image and animate it with a css3-animation. Otherwise we'll just use the .gif.

Lejonel added a comment.Via ConduitApr 8 2012, 12:19 PM

A solution could be to replace the icon with plain text. That also solves the problem that a star has no obvious relation to watching articles.

Qgil added a comment.Via ConduitSep 28 2013, 5:42 AM

fwiw bug 54307 proposes to substitute the current desktop star for the mobile star.

violetto added a comment.Via ConduitOct 15 2013, 6:49 PM

Unwatched svg

Attached: Unwatched.svg

violetto added a comment.Via ConduitOct 15 2013, 6:49 PM

Unwatched PNG

Attached:

violetto added a comment.Via ConduitOct 15 2013, 6:50 PM

Watched SVG

Attached: Watched.svg

violetto added a comment.Via ConduitOct 15 2013, 6:50 PM

Watched PNG

Attached:

DanielFriesen added a comment.Via ConduitOct 15 2013, 7:16 PM

I'm even more inclined to think we should be using css3 animations instead of an animated .gif for this now.

I did a little testing on the watch icon and there is a notable performance difference between the use of a .gif and a css3 animation.
A single running animated .gif makes Chrome on my computer renders the page at ~33FPS. While using a proper css3 animation instead renders at the complete 55-60FPS.

.gifs are inefficient. Because they are image frame based rather than a simple instruction like "rotate this" the browser has to re-draw images for each frame. As a result a css3 animation which gets to use the GPU to make simple modifications will always perform better. And will also do a much smoother animation. (Fixed frame list vs. a rotation that can create a frame for any point in the rotation and animate at the refresh rate).

bzimport added a comment.Via ConduitNov 19 2013, 7:29 AM

maddiemadan wrote:

The star icon is changed but it still gets pixelated when zoomed in on a browser.
Chromium 28.0.1500

Qgil added a comment.Via ConduitNov 24 2013, 1:13 AM

Nandakumar, a Google Code-in student, has a zip file with an SVG star and an HTML file to animate it at http://www.google-melange.com/gci/task/view/google/gci2013/5909942108160000

I have asked the student to submit a Gerrit change, but while he learns to do this, could you please check the zip file and comment? Isn't the animation too slow, or is this related with thefull screen size of the start I see when opening the file?

brion added a comment.Via ConduitNov 24 2013, 2:53 PM

The animation is set to 10s, which seems pretty slow (in terms of total time). It also renders kind of slowly for me (poor frame rate), which is probably because it's a 1000x1000 image instead of the intended size. :)

Recommend:

  • don't embed the SVG in the HTML; the SVG file should be loaded as a background image via CSS, so we can let it fall back to a PNG version for some older browsers
  • size should match the current size
  • shorten the animation duration to match the current animation
  • only run the animation once, not continuously
  • when the animation completes, the star needs to change state
  • needs to be integrated into the actual stylesheets
gerritbot added a comment.Via ConduitDec 3 2013, 6:12 PM

Change 98856 had a related patch set uploaded by M4tx:
Add an SVG version of watch icon

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

Qgil added a comment.Via ConduitDec 3 2013, 6:26 PM

The Gerrit changeset linked above has been submitted by a GCI student. Please help reviewing it.

gerritbot added a comment.Via ConduitDec 4 2013, 10:15 PM

Change 99258 had a related patch set uploaded by M4tx:
Add an SVG version of watch icon

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

gerritbot added a comment.Via ConduitDec 27 2013, 2:03 AM

Change 98856 abandoned by Bartosz Dziewoński:
Add an SVG version of watch icon

Reason:
OK, let's abandon this in favor of https://gerrit.wikimedia.org/r/#/c/99258/ then. (You can do it yourself by clicking the "Abandon Change" button.)

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

Qgil added a comment.Via ConduitJan 28 2014, 4:36 AM

According to an informal chat with Bartosz and Timo at the Architecture Summit, https://gerrit.wikimedia.org/r/#/c/99258/ is ready. Can someone with +2 review it and eventually merge it, please?

gerritbot added a comment.Via ConduitJan 29 2014, 8:46 PM

Change 99258 merged by jenkins-bot:
Add an SVG version of watch icon

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

matmarex added a comment.Via ConduitJan 29 2014, 8:48 PM

Done now. Yay!

mxn added a subscriber: mxn.Via WebNov 24 2014, 8:54 PM

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.