Page MenuHomePhabricator

Create SVG versions of PNG images
Closed, ResolvedPublic2 Estimated Story Points

Description

MobileFrontend has the following PNG files (without the SVG counterparts). Let's convert them to SVG's:

  • ./resources/mobile.overlays/back-ltr.png
  • ./resources/mobile.search/search-content.png
  • ./resources/mobile.special.mobilediff.styles/negative.png
  • ./resources/mobile.special.mobilediff.styles/neutral.png
  • ./resources/mobile.special.mobilediff.styles/positive.png
  • ./resources/mobile.startup/images/error.png + ./resources/mobile.references/images/error.png

This will solve various issues (e.g. T142391) and makes the user experience enjoyable for browsers that support SVGs.

SVG versions ready to be replaced

A/C

  • Remove PNG assets in favour of SVGs
  • Generate the PNGs via the ResourceLoaderImage module
  • Use mw-ui-icon and mw-ui-icon-small where necessary to style the icon elements

PNG assets for references






Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 9 2016, 10:13 PM
jhobs renamed this task from Create SVG versions of the PNG images to Create SVG versions of PNG images.Aug 10 2016, 5:26 PM
jhobs triaged this task as Medium priority.
Jdlrobson updated the task description. (Show Details)May 3 2017, 12:36 AM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson added subscribers: RHo, Nirzar.
Jdlrobson added a subscriber: Jdlrobson.

@Nirzar any chance we could prioritise this - it's causing a lot of technical debt having these in just PNG form and It would be AMAZING to get rid of them.

Nirzar added a comment.EditedMay 5 2017, 9:22 PM

All SVGs are on 24x24 canvas (same as wmf icon guideline)
The bell alert icon is just the red version of Echo Icon in mobilefrontend
Back arrow is compliance with close icon on mobilefrontend

Nirzar updated the task description. (Show Details)May 5 2017, 9:23 PM
Jdlrobson updated the task description. (Show Details)May 30 2017, 4:49 PM
ovasileva set the point value for this task to 2.May 30 2017, 4:50 PM

Change 357242 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Replace Overlay back button PNG with optimized SVG

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

Change 357244 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Replace find in page icon PNG with optimized SVG

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

Change 357248 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Replace Special:MobileDiff PNGs with optimized SVGs

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

I'm still working on the task, but the patches above are ready for review.

Patches are fine, but we need to compress the SVGs in all of them (good work node svg script hook :))

Copying from https://gerrit.wikimedia.org/r/#/c/357242

The pre-commit script passes --pretty parameter.
The dev-scripts/svg_check.sh does not.

PS1 uses --pretty
PS2 doesn't.

Either way we'll need to update one of the scripts to avoid this confusion in future... which is the correct one?

Change 357386 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] svgo: Update pre-commit hook

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

Change 357386 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] svgo: Update pre-commit hook

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

Change 357242 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace Overlay back button PNG with optimized SVG

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

Jdlrobson updated the task description. (Show Details)Jun 6 2017, 7:49 PM

Change 357248 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace Special:MobileDiff PNGs with optimized SVGs

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

Change 357244 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace find in page icon PNG with optimized SVG

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

Change 357509 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Replace toast bell PNGs with optimized SVGs

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

Please review the above patch while I work on the last remaining bit.

I've added some comments on the approach for the toast for your consideration.

Change 357660 had a related patch set uploaded (by Bmansurov; owner: Bmansurov):
[mediawiki/extensions/MobileFrontend@master] Replace ReferencesDrawer error PNG with optimized SVG

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

Change 357509 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace toast bell PNG with optimized SVG

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

Change 357660 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace ReferencesDrawer error PNG with optimized SVG

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

bmansurov removed bmansurov as the assignee of this task.Jun 8 2017, 4:32 PM

Will sign off.

Macro votecat: Design Approves

one question: did we now break these in Opera?

Jdlrobson closed this task as Resolved.Jun 12 2017, 6:41 PM

If Opera was broken before it's still broken. If it wasn't, it's good.