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

Assigned To

Authored By

	• bmansurov
	Aug 9 2016, 10:13 PM

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

down-trend.svg603 BDownload

neutral-trend.svg706 BDownload

up-trend.svg709 BDownload

alert-bell.svg1 KBDownload

back-arrow.svg519 BDownload

find-in-page.svg2 KBDownload

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

Details

Subject	Repo	Branch	Lines +/-
Replace toast bell PNG with optimized SVG	mediawiki/extensions/MobileFrontend	master	+6 -1
Replace ReferencesDrawer error PNG with optimized SVG	mediawiki/extensions/MobileFrontend	master	+19 -10
Replace find in page icon PNG with optimized SVG	mediawiki/extensions/MobileFrontend	master	+3 -5
Replace Special:MobileDiff PNGs with optimized SVGs	mediawiki/extensions/MobileFrontend	master	+17 -21
Replace Overlay back button PNG with optimized SVG	mediawiki/extensions/MobileFrontend	master	+8 -4
svgo: Update pre-commit hook	mediawiki/extensions/MobileFrontend	master	+2 -4

Customize query in gerrit

Related Objects

Mentioned Here: T142391: Mobile web search x clear button masked at its bottom

Event Timeline

• bmansurov created this task.Aug 9 2016, 10:13 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 9 2016, 10:13 PM

phuedx added projects: Web-Team-Backlog, Technical-Debt.Aug 10 2016, 5:25 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.

• jhobs moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Aug 10 2016, 5:41 PM

• jhobs moved this task from Needs Prioritization to Incoming on the Web-Team-Backlog board.

Jdlrobson moved this task from Incoming to 2014-15 Q4 on the Web-Team-Backlog board.Aug 11 2016, 5:22 PM

Jdlrobson moved this task from 2014-15 Q4 to Triaged but Future on the Web-Team-Backlog board.Jan 31 2017, 9:06 PM

Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

• Nirzar moved this task from Needs analysis to Next up on the Web-Team-Backlog (Design) board.Feb 7 2017, 5:04 PM

• Nirzar moved this task from Next up to Needs analysis on the Web-Team-Backlog (Design) board.Apr 20 2017, 5:47 PM

• Nirzar moved this task from Needs analysis to Next up on the Web-Team-Backlog (Design) board.Apr 26 2017, 8:15 PM

@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 moved this task from Next up to Designing/discussing right now on the Web-Team-Backlog (Design) board.May 5 2017, 9:14 PM

find-in-page.svg2 KBDownload

up-trend.svg709 BDownload

back-arrow.svg519 BDownload

alert-bell.svg1 KBDownload

down-trend.svg603 BDownload

neutral-trend.svg706 BDownload

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

• Nirzar updated the task description. (Show Details)May 5 2017, 9:28 PM

• Nirzar edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).

@Jdlrobson ready for dev

• Nirzar edited projects, added Design (RW-Design-Debt); removed Design.May 6 2017, 12:40 AM

• Nirzar moved this task from Backlog to UI Standardization on the Design (RW-Design-Debt) board.

Jdlrobson moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.May 16 2017, 10:30 AM

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

Jdlrobson added a project: Readers-Web-Kanbanana-Board-Old.May 31 2017, 4:09 PM

Jdlrobson moved this task from Upcoming to 2016-17 Q4 on the Web-Team-Backlog board.May 31 2017, 4:54 PM

• NHarateh_WMF moved this task from To Do to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.May 31 2017, 5:27 PM

• bmansurov claimed this task.Jun 5 2017, 7:02 PM

• bmansurov moved this task from Needs Design Review to Doing on the Readers-Web-Kanbanana-Board-Old board.

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

gerritbot added a project: Patch-For-Review.Jun 5 2017, 7:35 PM

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?

• bmansurov moved this task from Needs More Work to Doing on the Readers-Web-Kanbanana-Board-Old board.Jun 6 2017, 1:39 PM

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

I've +2ed all patches except https://gerrit.wikimedia.org/r/357242

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

ReleaseTaggerBot added a project: MW-1.30-release-notes (WMF-deploy-2017-06-13_(1.30.0-wmf.5)).Jun 6 2017, 9:00 PM

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.

• bmansurov moved this task from Needs More Work to Doing on the Readers-Web-Kanbanana-Board-Old board.Jun 7 2017, 1:23 PM

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

• bmansurov moved this task from Doing to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Jun 7 2017, 6:49 PM

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

Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Readers-Web-Kanbanana-Board-Old board.Jun 7 2017, 11:32 PM

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

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

Jdlrobson merged a task: T95224: Update all PNG icons in MobileFrontend with SVGs.Jun 14 2017, 2:42 PM

Jdlrobson added subscribers: • KHammerstein, LikeLifer, • Jhernandez and 2 others.

	F7946400: find-in-page.svg
	May 5 2017, 9:28 PM

	F7946399: find-in-page.svg
	May 5 2017, 9:28 PM

	F7946371: alert-bell.svg
	May 5 2017, 9:23 PM

	F7946368: down-trend.svg
	May 5 2017, 9:23 PM

Create SVG versions of PNG imagesClosed, ResolvedPublic2 Estimated Story PointsActions