Page MenuHomePhabricator

WikiEditor: Add SVG versions of editing toolbar icons
Closed, ResolvedPublic

Description

WikiEditor toolbar icons are low-resolution raster images, and appear visibly pixelated on a high-resolution display such as iPad third-gen or when zoomed in.

Recommend using SVG images with PNG fallbacks.

Note that currently many of these images are sprited and may need to be re-separated and re-drawn.


Version: unspecified
Severity: normal

Details

Reference
bz35342

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

So I should add svg images and if I have any png files I should add them and I should not edit the css files on first patch but add the svg image to css on the second patch and then last patch change css to less.

I will abandon them patches in a min. I will upload the new patches to make sure they are what your saying to do. thanks for helping.

Hi this is the first patch https://gerrit.wikimedia.org/r/#/c/181786/ is this what you ment for first patch.

Always abandon AFTER you have replacements up no?

So I should add svg images and if I have any png files I should add them and I should not edit the css files on first patch but add the svg image to css on the second patch and then last patch change css to less.

Right, the first step should just be to add the final desired svg variants and/or any final desired png - be they replacements or previously missing

GOIII added a comment.Dec 25 2014, 1:07 PM

shouldn't format-italic-i.svg be format-italic-I.svg ? (capital i =I [eye] )

the existing png I think its suppose to replace is format-italic-I.png

Change 151611 abandoned by Paladox:
WikiEditor: Re add SVG

Reason:
I have added split some of this in to two patches which are at https://gerrit.wikimedia.org/r/#/c/181786/ and https://gerrit.wikimedia.org/r/#/c/181788/

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

Change 181786 had a related patch set uploaded (by Paladox):
Re add svg images

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

Patch-For-Review

Change 181788 had a related patch set uploaded (by Paladox):
Adds svg to css file

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

Patch-For-Review

Please could I have some help to rename it because I try it but it stays at lower case I instead of being uppercase i.

Hi I have managed to do it.

GOIII added a comment.EditedDec 25 2014, 1:25 PM

See, this is partly why the previous patches were so hard to follow. With the revised 1st patch just being the addition of the svg variants, the following .png files have no corresponding .svg file in the new patch

  • format-bold-L.png
  • format-bold-hy.png
  • format-bold-ka.png
  • format-bold-os.png
  • format-bold-ru.png
  • format-italic-D.png
  • format-italic-E.png
  • format-italic-hy.png
  • format-italic-ka.png
  • format-olist-rtl.png
  • format-olist.png
  • format-ulist-rtl.png
  • insert-redirect-rtl.png
  • magnify-clip.png

Hi I have this patch now https://gerrit.wikimedia.org/r/#/c/181790/ that converts .css to .less

Change 151203 abandoned by Paladox:
WikiEditor: Convert .css to .less and also fixes SVG issues.

Reason:
Split this into two patches first patch is svg images https://gerrit.wikimedia.org/r/#/c/181786/ second patch is convert .css to .less https://gerrit.wikimedia.org/r/#/c/181790/

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

Hi they doint currently have svg images but can be added later.

GOIII added a comment.Dec 25 2014, 1:42 PM

r151203 had at least format-olist.svg listed in it

...but if the svg file variants for all the existing png files are missing some, I doubt anybody would want to merge that so there's the first roadblock

I wish we could slow down some and address one thing at a time - we're already 9 patch-sets deep for example and the css could have taken some cleaning/amending first too.

GOIII added a comment.Dec 25 2014, 1:57 PM

...but if the svg file variants for all the existing png files are missing some, I doubt anybody would want to merge that so there's the first roadblock

Then again, the whole point of keeping/having the png files is for a fallback if svg somehow fails so I take it back -- no reason not to vote merge

Do you have the link for svg version of format-olist.svg

There is also a bug with having svg images because if your on chrome and 90% zoomed in the icons go everywhere.

GOIII added a comment.Dec 25 2014, 2:18 PM

Do you have the link for svg version of format-olist.svg

It was part of one your patchsets - https://gerrit.wikimedia.org/r/151203

Hi the problem started when someone created the images earlier this year. The problem was the reported.

GOIII added a comment.EditedDec 25 2014, 2:30 PM

There is also a bug with having svg images because if your on chrome and 90% zoomed in the icons go everywhere.

Every example screenshot that I've seen is not the default WikiEditor toolbar but always with additional buttons, etc. added afterwards. I'd like to see an unmodified WikiEditor toolbar behave that way just to be sure.

Scratch that I just saw https://phabricator.wikimedia.org/T37342#399524

seems like problem with the spirited coordinates not re-sizing on such actions as a zoom.

matmarex removed a subscriber: matmarex.Dec 25 2014, 3:11 PM

Hi but there is an error with chrome where if you zoom out pass 90% or lower it will make the icons go out of position. how will that get fixed but any ways chrome default zoom is 100% and not a lot of people use 90% zoom (guess) so this svg images that are being added could get merged and the problem fixed letter including the .css or .less file.

probably the file button-sprite.png and .svg need to be sepereted into different images to fix the issue on google chrome (guessing)

probably the file button-sprite.png and .svg need to be separated into different images to fix the issue on google chrome (guessing)

It could just be an overlooked css attribute and setting like the one that fixes T78354 for example. We won't know until folks have something to test against.

I think it is to do with this file jquery.wikiEditor.toolbar.config.js

and how do you add something like 2px -142px center to background-position because it seems if I add 2px center the icon goes back to the position you want it to be but it is a different icon.

Hi if you zoom out to 50% it lines up again. seems to either been a problem with the css or it is webkit or chrome.

Hi here is the bug filed https://bugs.webkit.org/show_bug.cgi?id=125118 and https://code.google.com/p/chromium/issues/detail?id=260319 it seems the bug is when the image has multiple images in it.

I can confirm that problem is because of multiple images inside one image file. I tested it.

GOIII added a comment.Dec 29 2014, 9:28 PM

I can confirm that problem is because of multiple images inside one image file. I tested it.

Are you saying its because WikiEditor first looks to use ''Spirited'' button icons from button-sprite.svg using offset coordinates instead of individual icons?

If so, I wonder why it does not happen using button-sprite.png (or does it but nobody bothered to try?)

Ricordisamoa added a subscriber: Ricordisamoa.

Hi the image insert-ilink.svg and the same image but in button-sprite.svg seems to not show in certain browsers the problem is with using mask. It works in chrome but in Internet explorer it does not show this I doint know how to fix this problem.

GOIII added a comment.Jan 6 2015, 6:07 PM

@Jdforrester-WMF said:

At the request of Design I'm (very slowly) working on replacing all the assets with copies of the OOjs UI ones (in advance of actually switch WikiEditor over to using that, which is lower priority). Maybe we should merge these efforts?

If it gets mobile, tablet and similar device user's the same intended results And within a reasonable amount of time, then I'm all for it. The current ''bundle'' of .png-matching .svg files are just not making the cut. I suspect the amount of turnover week in, week out has jaded many beyond the point of no return by now as well.

Still, I'd hate to wait another 3 or 4 months for something that could be applied today in full & in the interim; where individual, problematic .svg based icons are disabled by pointing them either to the equivalent .svg stand alone image file or the alleged fallback, stand alone png as the issues at hand should dictate.

GOIII added a comment.EditedJan 7 2015, 8:36 AM

@Paladox

I don't know what the big deal was. I commented out the <mask> section using a text editor and the basic icon reappeared when I opened it again. Now I don't know if that means it still needs a mask or not -- can't say I didn't corrupt the file further either.

The only thing I'm sure is that I can see it now in IE... and I bet that's better than knowing there is a button on your toolbar but the lack of even a crippled button-icon means you have no clue what it does until you tick on it. (NOT optimal).

So use it if we can, fix it if we must... but at least swap out the one rendering ''blank'' for something that everybody can at least see.

Ok should I use this one. Sorry I missed this reply. I will upload when I can. Laptop broke last week so have to wait for it be repaired before using git to upload.

I am using my laptop screen on tv so I can upload the image now which I will be doing.

Hi I have uploaded the new image.

Change 181786 had a related patch set uploaded (by Paladox):
Re add svg images

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

Patch-For-Review

Paladox set Security to None.Jan 27 2015, 12:04 AM
Paladox awarded a token.
Paladox rescinded a token.
Paladox awarded a token.
Paladox rescinded a token.

Hi I have reported the bug at webkit for svg not being able to zoom out correctly on chrome. The bug is at https://bugs.webkit.org/show_bug.cgi?id=141535

Jorm removed a subscriber: Jorm.Feb 12 2015, 10:27 PM

The patch is ready to be merged with the svg and then we can merge the file that includes the svg line in css later.

On request I've created an new signature icon:

Because the current icon shows something like "false" or in German "falsch"/"fehlerhaft"

Thanks will add it soon to the patch.

Hi internet explorer does not support mask. please could you do the image without having to do mask thanks.

I have added the new image to the patch I have also updated the png version.

Perhelion added a comment.EditedFeb 21 2015, 1:19 AM

Hi internet explorer does not support mask. please could you do the image without having to do mask thanks.

I have uploaded a new version (the "s" more away from pencil and without mask, and bit other improvements). Thanks for promptly take.

Thank you for doing that. It is that another image had to have mask removed because it was not showing in internet explorer. but thanks for upload an updated image without mask.

Hi could you please do what you did with the image your uploaded and do it to this one https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FWikiEditor/1eaf5e8463ae5a95c7a7939d8f3f894b1283742f/modules%2Fimages%2Ftoolbar%2Finsert-ilink.svg this is an old link and this is the current link https://git.wikimedia.org/blob/mediawiki%2Fextensions%2FWikiEditor/c12f248eaa673b1419bd20c77a59ddc0c5bba07f/modules%2Fimages%2Ftoolbar%2Finsert-ilink.svg the old one uses mask the current link doesent please could you get the new link to look like old link without having to use mask.

Qgil removed a subscriber: Qgil.Feb 21 2015, 6:26 PM
Perhelion added a comment.EditedFeb 21 2015, 10:55 PM

Hi could you please do what you did with the image...

Here is the icon without mask but same effect (+ some minor improvements).

Thankyou. your really good at it.

Change 195529 had a related patch set uploaded (by Paladox):
Add svg to LESS file

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

Change 181788 abandoned by Paladox:
Adds svg to css file

Reason:
Moved to https://gerrit.wikimedia.org/r/#/c/195529/8 since less has been merged.

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

This comment was removed by Paladox.

Hi I fonund a fix to chrome zooming out problem. we should use preserveAspectRatio="none" and xml:space="preserve" in button-sprite.svg file.

GOIII added a comment.Jun 21 2015, 5:15 PM

Created attachment 16901
Alignment trouble
Well I should be able to see that it works in all situation, not just in yours, and as this screenshot of a zoomed Chrome shows, it simply still doesn't work... unfortunately.
Attached:

@TheDJ - assuming the modifications mentioned in...

Hi I fonund a fix to chrome zooming out problem. we should use preserveAspectRatio="none" and xml:space="preserve" in button-sprite.svg file.

... have been applied to the latest rebase, could you please see if the Chrome~Zoom issue has been resolved?
Getting these .svg images up & working is the first step on the path to mirroring VE's scheme (FontAwesome-ish). Thanks

Yes it is fixed. I inserted the code to fix chrome issue I also tested it in ie to check if it affected the way it shows but doesent.

Here is a screenshot showing it works now.

Zoomed in at 110%.

GOIII added a comment.Jun 21 2015, 6:32 PM

I just visited http://en.random-wikisaur.tk/index.php?title=Main_Page&action=edit with Win8.1/IE 11 and saw no ill-effects when zooming either. Some of the plain-text based icons still seem a little "dull" to me but so are the .png variants; not a reason to disqualify merging imho though.


'Enhanced dialogs' are enabled for guests it seems so it might be best to verify everything is OK without the dialogs enabled and just straight WikiEditor as well.

Remember: A picture is worth a thousand words; especially if as many icons are displayed as possible (i.e. tick the 'Advanced' menu open like I did in my screen-grab)

Ok so I should disable enhanced dialogs to test to see if it still works.

TheDJ added a comment.Jun 22 2015, 9:47 PM

I can be OK with this version.
I have a slight concern about the outline of the italic I, and the signature button seems to be aligned a bit 'high'.

Hi how can I fix it. I am using the original version but removed the shadow.

Maybe I could do something with css for the signature since that is a new updated version of previous with details of who created in the patch at gerrit.

But not sure about italic might need help on that one please.

I think the italic I was done like that on purpose.

i have uploaded patch that moves the signature button down slightly please could you check it. and if you want the italic i changed a bit could i have some help to do that please.

Change 181786 merged by jenkins-bot:
WikiEditor: Add svg images

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

Change 195529 merged by jenkins-bot:
Add svg to LESS file

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

TheDJ closed this task as Resolved.Jun 23 2015, 8:45 PM
TheDJ reassigned this task from TheDJ to Paladox.
TheDJ removed projects: Upstream, Patch-For-Review.

Change 220344 had a related patch set uploaded (by Paladox):
WikiEditor: Add svg images

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

Change 220344 abandoned by Jforrester:
WikiEditor: Add svg images

Reason:
No reason to back-port.

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

GOIII moved this task from Doing to Closed on the WikiEditor board.Apr 3 2016, 8:57 AM