Page MenuHomePhabricator

Replace all possible, non-product specific icons in MobileFrontend/MinervaNeue with WikimediaUI/OOUI ones
Closed, ResolvedPublic

Description

Currently, MobileFrontend and MinervaNeue are still incorporating several dozen icons.
These need to be reduced as much as possible, remaining probably only very product-context specific icons.

A complete list of icons present in OOUI is at https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui.

Mobile Frontend
mainMenupart of OOUITransformed: QA'd:
userContributions
logIn
home
logout
nearby 'mapPin'
random 'die'
settings
watchlist 'unStar'
userSandbox 'markup'
mobile.startup.imagespart of OOUITransformed: QA'd? ✅ T244444#6142826
citation 'reference'
error Not aligned to icon, nor error guidelines – replace by 'error'
search-clear 'clear' – need to be careful around size
search-contentT208184
mobile.editor.imagespart of OOUITransformed: QA'd?✅ T244444#6173396
profile 'userAvatar'
stop-hand 'stopHand' as of v0.37.1
mobile.special.mobilediff.imagespart of OOUITransformed: QA'd? ✅ T244444#6097177
bytesChangednot directly, yet replace it by 'upTriangle'
MinervaNeue
skins.minerva.icons.imagespart of OOUIcaching implications?Transformed: QA'd ✅ T244444#6173396
toc? T232383no
warningNot in use anywhere – removed
mainmenu 'menu'yes
edit as 'editLock'yes
edit-enabled as 'edit'yes
language-switcher 'language'yes
clock 'history'yes
skins.minerva.icons.images.scripts.miscpart of OOUIcaching implications?Transformed: QA'd: ✅ T244444#6064660
downloadno
skins.minerva.userpage.iconspart of OOUIcaching implications?Removed:
talkNot in use anywhere – removed!
skins.minerva.mainMenu.advanced.iconspart of OOUIcaching implications?Transformed: QA'd ✅ T244444#6142826
page-actions-overflow 'ellipsis', needs to be transform-rotatedno
recentchanges'recentChanges'no
specialpages'specialPages'no
rcommunityportalas 'speechBubbles'no

Page issues

Continued in T252977

NOTE: skins.minerva.content.styles.images cannot be ported to an OOUI icon pack as it uses custom selectors.

QA steps

Week of MW branch 2020-04-14
QA Results - Prod
ACStatusDetails
1T244444#6064660
2T244444#6064660
3T244444#6064660

Week of MW master 2020-04-28

QA Results - Beta
ACStatusDetails
1T244444#6097177
  • Ensure 'Recent Changes', 'Special Pages' and 'community portal' links in AMC mode's main menu feature icons
  • Also ensure that page actions overflow menu has the right (vertical) three dots icon (rotated 'ellipsis'
  • Ensure reference toast message carries an icon on beta
  • Ensure search provides icons for clearing the input and for results on beta too.
QA Results - Beta|Prod

Details

Show related patches Customize query in gerrit

Event Timeline

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

Change 583507 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.37.1

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

Change 583507 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.37.1

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

Change 583792 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Remove obsolete fallback CSS classes

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

Change 583798 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Use 'speechBubbles' icon from OOUI

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

Change 583799 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Use 'speechBubbles' icon from OOUI

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

Change 583792 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove obsolete fallback CSS classes

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

Change 583799 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Use 'download' icon from OOUI

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

Change 583798 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Remove unused 'talk' icon

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

Due to the caching implications, this task will hang around a bit longer with us as it needs two sequential steps dependent on caching.

Due to the caching implications, this task will hang around a bit longer with us as it needs two sequential steps dependent on caching.

Could you elaborate on the details?

Change 584995 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Drop skins.minerva.icons.image module now cache has cleared

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

Jdlrobson reassigned this task from Edtadros to Volker_E.
Jdlrobson added a subscriber: Edtadros.

Needs QA steps.

@Demian 'edit' needs to be renamed to 'editLocked' and 'edit-enabled' to 'edit'. We can't do this in one step, otherwise they might appear on vice-versa actions.
@Jdlrobson Not done yet. See for examples bytesChanged or stop-hand? Would you be for doing QA in several steps?

@Volker_E at which point of the caching infrastructure would these conflict before the 2 week TTL runs out?

Yeh there is code merged that will run in next train so we should be starting QA asap.

@Volker_E at which point of the caching infrastructure would these conflict before the 2 week TTL runs out?

I dont see how this conversation is helping things right now and to be honest it's adding unnecessary noise. This task has caching implications as Volker says and Phabricator is not the place to learn about things- use wikitech/mw.org and talk pages.

Change 585857 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Replace mobile.editor.images with OOUI icons

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

Volker_E updated the task description. (Show Details)

Change 584995 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Drop skins.minerva.icons.image module now cache has cleared

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

@Volker_E - could you add QA steps to this task?

Quick QA on mediawiki - all icons are visible:

Screen Shot 2020-04-16 at 11.36.11 AM.png (1×2 px, 441 KB)

@Volker_E I didn't want to mess with the table in the description. As we discussed, here's the same table with some columns and formatting. I will put my QA results directly in the table. I removed the "Transformed?" column since once you put a in the Beta or the milestone in Prod column I will know to test, and when.

@ovasileva because this is going to be an iterative task and since we are keeping it all together, I think that once testing is completed (Beta or Prod) I should move it back to a column to the left of QA rather than having it live in QA. Let me know your thoughts.

mainMenu icons should be QA'd every deploymentpart of OOUI
userContributions
logIn
home
logout
nearby
random
settings
watchlist
userSandbox 'markup'
mobile.startup.imagespart of OOUITransformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
citation 'reference'
error Not aligned to icon guidelines, nor to error guidelines – to be replaced by 'error'
search-clear 'clear' – need to be careful around size
search-contentT208184
mobile.editor.imagespart of OOUITransformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
profile 'userAvatar'
stop-hand 'stopHand' as of v0.37.1
mobile.special.mobilediff.imagespart of OOUITransformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
bytesChangednot directly, but I'm against adding it as is, rather replace it by 'upTriangle'
skins.minerva.icons.imagespart of OOUIcaching implications?Transformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
page-actions-overflow 'ellipsis', needs to be transformedno
toc? T232383no
warning? I don't think this is used? Remove? –Removed
mainmenu 'menu'yes
edit as 'editLock'yes
edit-enabled as 'edit'yes
language-switcher 'language'yes
clock 'history'yes
skins.minerva.icons.images.scripts.miscpart of OOUIcaching implications?Transformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
downloadnoMW-1.35-notes (1.35.0-wmf.28; 2020-04-14)Verify on Android onlyT244444#6064660
skins.minerva.userpage.iconspart of OOUIcaching implications?Removed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
talkno; not in use anywhere – removed!
skins.minerva.mainMenu.advanced.iconspart of OOUIcaching implications?Transformed?in Beta?in Prod?Special InstructionsQA-BetaQA-Prod
recentchanges'recentChanges'no
specialpages?no
rcommunityportal?no

Test Result - Prod

Status: ✅ PASS
Environment: Prod
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: Galaxy S5

Test Artifact(s):

QA steps

Week of MW branch 2020-04-14
AC1: Ensure every of the elements assigned 'download' icon carries the icons (download PDF in overflow menu)
download: https://m.mediawiki.org/wiki/Special:MyLanguage/Download

m.mediawiki.org_wiki_Special_MyLanguage_Download(Galaxy S5).png (1×1 px, 432 KB)

AC2: Ensure all main menu icons are visible

m.mediawiki.org_wiki_Special_MyLanguage_Download(Galaxy S5) (2).png (1×1 px, 468 KB)
m.mediawiki.org_wiki_Special_MyLanguage_Download(Galaxy S5) (3).png (1×1 px, 432 KB)
m.mediawiki.org_wiki_Special_MyLanguage_Download(Galaxy S5) (1).png (1×1 px, 138 KB)

AC3: Ensure edit section icon is visible

m.mediawiki.org_wiki_Special_MyLanguage_Download(Galaxy S5) (4).png (1×1 px, 241 KB)

Note, the 'bytesChanged' replacement would look like this:

image.png (464×692 px, 39 KB)

Change 590625 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Rename user icon module to more general 'mobile.user.icons'

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

Change 590855 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Replace 'byteschanged' with OOUI's 'upTriangle' icon

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

Change 590625 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] Rename user icon module to more general 'mobile.user.icons'

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

Change 585857 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace mobile.editor.images with OOUI icons

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

Change 593091 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Replace skins.minerva.mainMenu.advanced.icons with OOUI icons

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

Change 590855 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace 'byteschanged' with OOUI's 'upTriangle' icon

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

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

of MW master 2020-04-28
AC1: Ensure addition (dark green) and removal (red) carry the right arrow (up/down) in non-AMC mode
Production URL https://en.m.wikipedia.org/wiki/Special:MobileDiff/911796127?diffmode=source – has to be tested in beta though

en.m.wikipedia.beta.wmflabs.org_wiki_Special_MobileDiff_413354_diffmode=visual(iPhone X).png (2×1 px, 333 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Special_MobileDiff_413818(iPhone X).png (2×1 px, 340 KB)

Change 593655 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'articlesSearch' icon

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

Change 593655 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'articlesSearch' icon

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

Change 593091 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Replace skins.minerva.mainMenu.advanced.icons with OOUI icons

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

Change 593819 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.38.1

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

Change 593819 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.38.1

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

Change 593832 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Replace 'mobile.startup.images' module icons with OOUI ones

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

Change 593832 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace 'mobile.startup.images' module icons with OOUI ones

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

Test Result - Beta|Prod

Status: ✅ PASS
Environment: beta/enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

✅ AC1: Ensure addition (dark green) and removal (red) carry the right arrow (up/down) in non-AMC mode

en.m.wikipedia.org_wiki_Special_MobileDiff_883238921(iPhone X) (1).png (2×1 px, 331 KB)
en.m.wikipedia.org_wiki_Special_MobileDiff_911796127(iPhone X).png (2×1 px, 310 KB)

✅ AC2: Ensure 'Recent Changes', 'Special Pages' and 'community portal' links in AMC mode's main menu feature icons

en.m.wikipedia.org_wiki_Main_Page(iPhone X).png (2×1 px, 221 KB)

✅ AC3: Also ensure that page actions overflow menu has the right (vertical) three dots icon (rotated 'ellipsis')
en.m.wikipedia.org_wiki_50th_Infantry_Division_Regina(iPhone X).png (2×1 px, 599 KB)

✅ AC4: Ensure reference toast message carries an icon

BetaProd
en.m.wikipedia.beta.wmflabs.org_wiki_Dog(iPhone X).png (2×1 px, 388 KB)
en.m.wikipedia.org_wiki_50th_Infantry_Division_Regina(iPhone X) (1).png (2×1 px, 367 KB)

✅ AC5: Ensure search provides icons for clearing the input and for results

BetaProd
en.m.wikipedia.beta.wmflabs.org_wiki_Dog(iPhone X) (1).png (2×1 px, 104 KB)
en.m.wikipedia.org_wiki_50th_Infantry_Division_Regina(iPhone X) (3).png (2×1 px, 104 KB)

Excited to see this moved forward! Thanks @Edtadros

@Jdlrobson For the page issues, there are various topics: Some icons don't fit into WikimediaUI collection, like 'point of view'. Others, like 'issue-type-point-of-view' are technically currently not possible due to being a two color icon. Both would need Design input and be possibly influenced by diff styling too.
While I know that your long-term plan is to get rid of any icon in MF/MN repos, that's not common in any of our extensions/skins repos and I'm not fully convinced that we have to collect each and every icon in one huge repo, although that seems like an interesting long-term goal.

I recommend to carve page issues icons question out of this into a new, low-prio task, where we ask for design support. The main objective of this task to have long-term uniformity in most important icon carrying interaction elements is resolved from my point of view.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX

Test Artifact(s):

QA steps

Confirm icons match OOUI Demos

AC1: Mobile Frontend
mobile.editor.images

✅ AC1.1: profile as 'userAvatar'
✅ AC1.2: stop-hand as 'stopHand' as of v0.37.1 (could not test in Prod, this was tested in beta only)

en.m.wikipedia.org_wiki_Main_Page(iPhone X) (1).png (2×1 px, 239 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Conflict-title-0.7918666523319811-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n(iPhone X) (1).png (2×1 px, 271 KB)

AC2: MinervaNeue
skins.minerva.icons.images

✅ AC2.1: toc T232383#6092066
✅ AC2.2: mainmenu as 'menu
✅ AC2.3: edit as 'editLock'
✅ AC2.4: edit-enabled as 'edit'
✅ AC2.5: language-switcher as 'language'
✅ AC2.6: clock as 'history'

en.m.wikipedia.org_wiki_Pseudoseisuropsis(iPhone X).png (2×1 px, 333 KB)
en.m.wikipedia.org_wiki_Wikipedia_Contact_us_blocked(iPhone X).png (2×1 px, 347 KB)

Icons look good, QA looks good. Resolving :)