swalling wrote:

ULS and references gadget side by side

Attached:

swalling wrote:

BTW, I filed this under Echo because I didn't quite know how to file a design bug that applied to multiple extensions and a gadget. Please advise.

I'd prefer we go with the one from the echo prefs its the simplest of all of them. however it doesn't look like it is an SVG (when I zoom on my retina macbook it gets very blurry) The language tools prefs is a close second but looks like it may be an SVG (but clipped at the bottom) lets either use one of those two or redraw an svg version of the echo prefs one. May can take a look and see if she need to clean up any of the angles or edges to be in-line with the other icons shes'd done thus far.

swalling wrote:

(In reply to comment #3)

I'd prefer we go with the one from the echo prefs its the simplest of all of
them. however it doesn't look like it is an SVG (when I zoom on my retina
macbook it gets very blurry) The language tools prefs is a close second but
looks like it may be an SVG (but clipped at the bottom) lets either use one
of
those two or redraw an svg version of the echo prefs one. May can take a look
and see if she need to clean up any of the angles or edges to be in-line with
the other icons shes'd done thus far.

Sounds like a plan. To be clear: Echo is actually using two different icons it looks like. Jared and I conferred, and in the above comment he is referring to the icon in the flyout, not the one on Special:Notifications.

swalling wrote:

Mockup of new version

Adding mockup by May of a more consistent icon in use.

Attached:

ULS has SVGs and they are not clipped (the display was clipped due to css bug which has been fixed) with normal and on-hover versions.

Also see https://www.mediawiki.org/wiki/Category:MediaWiki_%27Settings%27_indicators

The design guide should specify the math and resulting colors for the hover, active (being-clicked), and disabled states of icons. E.g. disabled = lighten(30%).

Prioritization and scheduling of this bug is tracked on Mingle card https://mingle.corp.wikimedia.org/projects/flow/cards/258

There is a WikiFont (https://www.mediawiki.org/wiki/Design/WikiFont) icon for this (https://www.mediawiki.org/wiki/File:Gear_icon.svg).

In this interest of standardization, that should probably be adopted unless it's not suitable for some reason, in which case perhaps the WikiFont one should also be changed.

That is the correct asset.

Screenshot in comment 1 is still valid nowadays.

Comment 3 recommends to go with the icon from the Echo prefs; comment 6 proposes the ULS one, comment 9 mentions WikiFont.

Which path is a new contributor supposed to follow? Use https://www.mediawiki.org/wiki/File:Gear_icon.svg everywhere and fix the ULS, Echo and Core codebases?
Or also some unnamed "enwiki gadget for displaying references in a tooltip" mentioned in comment 0?

Please clarify the scope and expected steps to take here. After doing so, please add "easy" to Keywords again (and potentially "gci2014" to the Whiteboard).
Thanks.

(In reply to Andre Klapper from comment #11)

Which path is a new contributor supposed to follow? Use
https://www.mediawiki.org/wiki/File:Gear_icon.svg everywhere and fix the
ULS, Echo and Core codebases?
Or also some unnamed "enwiki gadget for displaying references in a tooltip"
mentioned in comment 0?

Let's standardize on https://www.mediawiki.org/wiki/File:Gear_icon.svg . I believe that is also what Jared meant. (It is also relatively similar to the Echo flyout icon mentioned earlier)

For future reference, the enwiki gadget in question is Reference Tooltips (https://www.mediawiki.org/wiki/Reference_Tooltips / https://en.wikipedia.org/wiki/MediaWiki:Gadget-ReferenceTooltips.js)

Please clarify the scope and expected steps to take here.

Change all of the locations mentioned to use https://www.mediawiki.org/wiki/File:Gear_icon.svg .

(In reply to Matthew Flaschen from comment #12)

Change all of the locations mentioned to use
https://www.mediawiki.org/wiki/File:Gear_icon.svg .

Preferably with SVG/PNG fallback to support browsers without SVG support (using e.g. background-image-svg), or only PNG if necessary.

mflaschen: You added "gci2014" to the whiteboard. Would you mentor this task? If yes, please follow https://www.mediawiki.org/wiki/Google_Code-in_2014#Mentors.27_corner

Yes, I'll mentor this. I've registered on Melange. Based on your experience, should I create one GCI task for this bug, or one per place that needs to be replaced?

I created three:

• Echo - https://www.google-melange.com/gci/task/view/google/gci2014/5793664760545280
• UniversalLanguageSelector - https://www.google-melange.com/gci/task/view/google/gci2014/5902045039034368
• Reference Tooltips - https://www.google-melange.com/gci/task/view/google/gci2014/5888280876810240

Regarding ReferenceTooltips:

• For the image to be simply replaced without any resizing or repositioning, the image File:Gear_icon.svg would need to be changed to eliminate the empty space around the icon.
• ReferenceTooltips is used as a default gadget by 48 Wikimedia wikis, and is enabled by some thousands of users on the 13 wikis where it's only an opt-in gadget. Changing the CSS on all of these wikis could be difficult.

In T52843#787670, @Yair_rand wrote:

Regarding ReferenceTooltips:

• For the image to be simply replaced without any resizing or repositioning, the image File:Gear_icon.svg would need to be changed to eliminate the empty space around the icon.

Yes. This is part of the task(s) and is probably needed for most (if not all) of the places it is to be used.

• ReferenceTooltips is used as a default gadget by 48 Wikimedia wikis, and is enabled by some thousands of users on the 13 wikis where it's only an opt-in gadget. Changing the CSS on all of these wikis could be difficult.

Actually deploying it is not in scope of the Melange change. After the Melange task is done, someone can deploy it to English Wikipedia, then we can make a note and ask people to port it over to other wikis (copying the CSS may be enough unless there are conflicting changes, although there are hard-coded strings in the JS).

Change 177269 had a related patch set uploaded (by Nemo bis):
Fixed preferences icons to be consistent and be svg.

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

Patch-For-Review

Change 180527 had a related patch set uploaded (by M4tx):
Fix preferences ('gear') icons to be consistent

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

Patch-For-Review

Change 180527 merged by jenkins-bot:
Fix preferences ('gear') icons to be consistent

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

Since we're moving the system to OOJS-UI (in the MediaWiki theme that is supported by the UI standardization team), the new icon (in the popup) comes from there. We didn't yet migrate Special:Notifications to OOJS-UI which is why it's using an old icon. But once we do, the point is to use the icons in the library for consistency.

See the icons here: https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-mixed-ltr

Change 177269 abandoned by Catrope:
Fixed preferences icons to be consistent and be svg.

Reason:
This has since been fixed, see e.g. 0271cdd52dcc3d2f51f67cca2e942e95b4c3c859

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