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?

In T37342#943714, @Paladox wrote:

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

Css file containing svg.

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

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.

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.

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.

In T37342#943824, @GOIII wrote:

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

In T37342#943844, @Paladox wrote:

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.

In T37342#943845, @Paladox wrote:

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.

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)

In T37342#945594, @Paladox wrote:

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.

Oh ok.

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.

In T37342#945952, @Paladox wrote:

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?)

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.

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

@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

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

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:

• File:Insert-signature2.svg

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.

In T37342#1053269, @Paladox wrote:

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.

Thanks.

In T37342#1056482, @Paladox wrote:

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

https://code.google.com/p/chromium/issues/detail?can=8&start=0&num=100&q=&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=458307

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

Found the fix at http://yootheme.com/support/question/6801?order=modified

In T37342#399524, @TheDJ wrote:

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

In T37342#1228421, @Paladox wrote:

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

In T37342#1228470, @Paladox wrote:

Found the fix at http://yootheme.com/support/question/6801?order=modified

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

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.

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.

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

• https://gerrit.wikimedia.org/r/181786 (branch master): WMF-deploy-2015-06-30_(1.26wmf12)
• https://gerrit.wikimedia.org/r/195529 (branch master): WMF-deploy-2015-06-30_(1.26wmf12)

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