Page MenuHomePhabricator

Watchlist icon does not match on desktop and mobile skin
Closed, DeclinedPublic

Assigned To
Authored By
Jaredzimmerman-WMF
Sep 19 2013, 5:34 AM
Referenced Files
F21246: aSK3bVv.png
Dec 15 2014, 10:12 AM
F21244: dgDAP7i.png
Dec 15 2014, 10:12 AM
F21033: Screenshot_2014-12-11_19.36.01.png
Dec 12 2014, 9:16 PM
F21031: Screenshot_2014-12-11_19.35.41.png
Dec 12 2014, 9:16 PM
F20871: Watchstar-unwatch.png
Dec 11 2014, 8:23 PM
F20870: Watschstar.png
Dec 11 2014, 8:23 PM
F11579: Screen_Shot_2013-09-18_at_10.33.52_PM.png
Nov 23 2014, 11:11 PM
F11583: unstar.svg
Nov 22 2014, 1:59 AM
Tokens
"Like" token, awarded by Ricordisamoa."Like" token, awarded by Qgil."Heartbreak" token, awarded by Edokter."Like" token, awarded by Liuxinyu970226."Like" token, awarded by Florian."Heartbreak" token, awarded by wctaiwan."Heartbreak" token, awarded by matmarex.

Description

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:59 AM
bzimport set Reference to bz54307.
bzimport added a subscriber: Unknown Object (MLST).

Created attachment 13319
desktop watchlist icon

Attached:

Screen_Shot_2013-09-18_at_10.33.31_PM.png (242×364 px, 20 KB)

The above screenshot also confirms that the Vector watch star icon is not ready for high-resolution displays (Retina/Hi-DPI). Adding to tracking bug 32101 (hi-dpi issues) so we don't forget to fix that with the update!

They don't match because the skins are different, lol. I'm inclined to WONTFIX this.

Moving to appropriate component.

The proposal is "Desktop icon should be replaced to match mobile skin", not the other way around. Therefore it's a request for MediaWiki Core / Skins. Moving back.

Even if the themes are different, I personally see a point in sharing the same star icon, if only because the current desktop star is not precisely impressive. As other bugs mention, it's PNG only and problematic in high definition displays.

In any case a designer should propose the exact replacements for

http://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/skins%2Fvector%2Fimages%2Fwatch-icons.png

http://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/skins%2Fvector%2Fimages%2Fwatch-icon-loading.gif

Mockups / tests to see how the new star would look like would be useful as well.

Unwatch icon

Attached:

Updated (Hi-DPI compatible) assets attached by May, anyone who wants to integrate these assets, help would be appreciated.

As said in comment #4, I believe engineers expect a single file with 4 stars (each one for a different status) + an animated image, to substitute cleanly what exists now. Check the links. The more you diverge from this the more programming work will be needed.

But I'm just an observer here and I might be wrong.

Quoting Daniel Friesen at bug 35335:

"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."

The mobile site does use css3 animations (in beta) to do exactly this and could be reused for this purpose.

side note: should there be a tracking bug - make mobile web skin consistent with desktop web skin. This might clarify if the "why" we might be doing this...

This is a simple task. However, is there a consensus about the plan? Should the desktop star look like the mobile star or the other way around?

(In reply to comment #10)

Quoting Daniel Friesen at bug 35335:

"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."

For what is worth there is a patch (from a GCI student) waiting for reviewers at Bug 35335 - https://gerrit.wikimedia.org/r/#/c/99258/

At this point, isn't this report a duplicate of bug 35335, which has a patch ready to be merged?

It probably isn't since that patch doesn't change the look of the icon, just vectorizes it.

Yes, but the same action/asset fixes both bugs, either way we're talking way too much about a bug that is really trivial and probably doesn't deserve this much discussion. If someone swaps the assets we can close two bugs.

Comment on attachment 13414
Unwatch icon

deprecated in favor of Wikifont assets

Comment on attachment 13413
Watch icon

deprecated in favor of Wikifont assets

Still unclear to me what a new contributor is expected to do here nowadays, cf. comment 14. And bug 35335 has been FIXED too in the meantime.

Could somebody please elaborate (and add the "easy" keyword back again once the expected remaining work is clearly described)? Thanks.

This has come up again as an accessibility issue for colorblind users, there is no longer a wikifont dependency, and the assets should be the same between desktop and mobile web.

This should be ready as a GSOC task now.

Nemo_bis subscribed.

I was going to approve the task but... this report is confusing. Please edit comment 0 here to clearly state which option has been chosen: what file or what method (if using CSS); what repository (melange says "core" but Vector is no longer in core); what to test for (ideally with links to [[GWT]] feature tests).

@Nemo_bis, Is your comment for me, or the GSOC student? I'm not sure I understand.

I still don't know what needs to be done here. I don't think this is a good GCI task, or in fact a good task at all. The Vector icon has been vectorized since this bug was filed and looks much better.

I suggest closing this as declined/invalid.

@matmarex, the request is to have the icon states from mobile for watchlist watched/unwatched from mobile be ported to desktop, I think that is a pretty clear task. I'm not sure what the confusion is?

I was confused about which is to be copied to which, so I guess at least that is clear now.

I am also confused about why is this considered a good idea when the skins differ so much. Trying to make the icons "consistent" is just going to make them inconsistent with the rest of the skin. (Consistency being the hobgoblin of minds and all that.)

Consistency is a work in progress. This is a piece of that progress.

Progress implies forward motion. :)

I think the idea is for mobile skin Minerva and desktop skin Vector to one day converge.

However with the reactions I have seen so far to basic things such as buttons becoming biggger and green I worry this approach is not working.

I'd hate a volunteer to do this and then feel the wrath of the community.

Any clever ideas of how we might make these two skins coverge? Maybe building mobile into a desktop vector like skin at desktop resolutions would be a more successful approach?

Change 178048 had a related patch set uploaded (by M4tx):
Replace desktop watchstar icon with mobile skin one

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

Patch-For-Review

Change 178048 merged by jenkins-bot:
Replace desktop watchstar icon with mobile skin one

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

Florian claimed this task.

Change 178468 had a related patch set uploaded (by M4tx):
Optimize assets added in changeset 178048

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

Patch-For-Review

Change 178468 abandoned by M4tx:
Optimize assets added in changeset 178048

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

Change 178467 had a related patch set uploaded (by Florianschmidtwelzow):
Compress some images with svgo and pngcrush

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

Patch-For-Review

Change 178467 abandoned by Nemo bis:
Compress some images with svgo and pngcrush

Reason:
Avoid messing up with possible revert of parent change.

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

Nemo_bis removed Nemo_bis as the assignee of this task.
Nemo_bis edited subscribers, added: TrevorParscal, Edokter; removed: Nemo_bis.

I never bothered to check because I thought this was just a format change. I never expected a *design* change.

Quote from description:

Desktop icon should be replaced to match mobile skin

I personally see no reason to revert this change, the mobile watchstar matches the Vector design much better as the old one.

I personally see no reason to revert this change, the mobile watchstar matches the Vector design much better as the old one.

Then that is where we substantially differ in opinion; I think they don't match at all, and the result (especially the green unwatch) looks out of place. We should not try and make Vector and Minerva look alike; don't we have Winter for that?

I see no point to this change to begin with.

[EDIT:] So here is what it looks now in Vector (on MediaWiki.org):

Watschstar.png (60×300 px, 4 KB)
Watchstar-unwatch.png (60×300 px, 4 KB)

One of the gripes is that the style is a total mismatch with the Wikilove icon, and with Vector in general. This looks really uncohesive...

Copying comments from the change, https://gerrit.wikimedia.org/r/#/c/178048/:

I'm bummed that this got merged. Just because you resolve a bug doesn't mean you've done the right thing, and just > because the watch start on mobile is green doesn't mean that makes sense on desktop.

I'm thinking this should be reverted, anyone agree with me?

@MZMcBride wrote:

Mobile(Frontend?) is using a pretty radically different skin, so I don't think there's much expectation of parity here.

What's the objection to this change? The color green for the star in Vector clashes?

@Edokter wrote:

I'll say it clashes... I never bothered to check because I thought this was just a format change. I never expected a *design* change.

While I understand wanting to harmonize the experience between mobile and desktop, such harmonization should be limited to Wikipedia's content. Graphical elements between Vector and Minerva *not* interchangable (unlike Minerva and Winter).

Please revert.

@Nemo_bis wrote:

Why isn't this discussion happening on phabricator? In general, all the "do like MobileFrontend" changes are radical design changes.

Consistency is a work in progress. This is a piece of that progress.

Skins should be consistent within themselves - not consistency across skins.

+1 for revert. Solid green looks out of place in Vector.

So, how should we call this? I feel like I'm not alone in thinking this should have never been merged, but I'm getting push-back from Jarred over email, asserting that this is what he wants.

"The green star of death"? I don't know... We just have to keep nagging that "Vector != Mobile" until this is reverted.

I personally think this is a lot of conversation over the colour of an icon and there are more important things to be concerning ourselves with.

One observation is that there is a camp of people that do not like incremental skin changes and a camp that hates big changes. As a result Vector never changes, even just yesterday @TrevorParscal lamented this but this is exactly why nothing is happening.

It seems we need to find a better approach for making changes to the skin that the design team need.
Maybe it's time to fork Vector and create a new skin or a beta feature that replaces the existing skin Vector with a Vector2.

Either way I'm tired of all this back and forth on issues like this and it really wastes a lot of my developer time and I'd rather we fixed the bigger problem above.

That's all I've got to say about this matter.
Also removing mobile web as this has nothing to do with that product.

Jon, I feel like you must have misunderstood what I was in fact lamenting about.

It's been about 5 years since Vector was released. I think it's really sad that it's basically unchanged. The reason this has happened is because nobody is interested in making Vector better - everyone just wants to blue-sky the whole thing and reinvent things they don't properly understand. This situation (with the watch star) has nothing to do with that. Changing the color to green has no substantive advantage over the status quo - it's simply been copied it from another place and now it looks wrong because it's out of context. It's also not blue-sky thinking. It's just sloppy.

You talk about wasting time talking about the color of an icon. You say this is a bad thing. What about being the kind of organization that cares about details? Isn't that a good thing? Please stop trying to dismiss arguments with "we have better things to do". Details are important.

Changing the color to green has no substantive advantage over the status quo

The change doesn't contains a new watched color, only. The whole watchstar changed, and if i see the colors correctly, the new one matches the header much more. There are grey fonts, a grey backgrounds, grey input fields (search) and last but not least, the search icon is in grey, too. So the mobile watchstar looks much better in this context.

If the green isn't a color you prefer, i think we can discuss another, maybe better, color, but i would be really sad, if we revert the change because of just the color (despite that the wtachstar matches the context more as the old one).

Isn't this the same type of star used also in compact bar and Flow in desktop? I'm just a user, and it looks good to me, consistent with all the new stuff coming. The flat color / no shade also fits with the Echo notifications icon.

Better than this, I hadn't noticed the change until seeing this thread, and I have been editing pages both in mediawiki.org and the wikipedias, with new and old styles. All this to say that while here we discuss about life or death, for most users it will be a cosmetic change. And I think it's a good one.

You all seem to be missing that this is a tab icon, and these have a specific style, which has now been broken. If we're changing icons, they should be changed all at once as a coherent set (or at least in groups thereof).

Right now, the icon may look sleeker, but the mix of old and new icons looks beyond ugly.

@Edokter, which other icon tabs are you referring to? can you include a screenshot? is it related to a gadget, extension, or special user rights?

@Edokter, ah! thwarted again by Phabricator collapsing comments. You're referring to the wikilove icon tab or others as well?

We should try to avoid treating reverts as a big deal. We can pull back https://gerrit.wikimedia.org/r/178048 for a week or two in order to get firmer consensus for its implementation. For a change to the default skin such as https://gerrit.wikimedia.org/r/178048, it probably needs a bit more agreement, especially as there were repeated concerns raised in this ticket.

Whoever creates a revert commit will necessarily need to include a commit message that explains the issues with the commit. To me, it's still a bit unclear what the objection is. The solid color? The color green? The animation?

You buy a brand new car, sky blue. You walk around it and notice one door is emerald green, and is from a totally different car model... would you still take it?

That is the issue!

@Edokter, ah! thwarted again by Phabricator collapsing comments. You're referring to the wikilove icon tab or others as well?

The Wikilove icon was modeled after the watchstar icon, so they formed a perfect match. I don't know of any other icons off-hand. But equally distracting is how the green, unshaded star clashes with the Vector tab's blue gradient background.

Like I said above, change them as a set if you must. But I share Trevor's sentiment; we is there a need to change Vector to begin with? It is a skin within its own right and should not be polluted with elements from *other* skins.