Page MenuHomePhabricator

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

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 583492 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Add 'stopHand'

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

Change 583492 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'stopHand'

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

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

Volker_E updated the task description. (Show Details)Mar 29 2020, 1:40 AM

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

Jdlrobson updated the task description. (Show Details)Mar 31 2020, 5:19 PM
Demian added a subscriber: Demian.Mar 31 2020, 5:36 PM

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 assigned this task to Edtadros.Apr 1 2020, 6:35 PM
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 updated the task description. (Show Details)Apr 3 2020, 7:22 AM

@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)Apr 4 2020, 6:07 AM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Apr 4 2020, 6:10 AM

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?

Volker_E updated the task description. (Show Details)Apr 15 2020, 9:32 PM
Volker_E reassigned this task from Volker_E to Edtadros.Apr 15 2020, 9:43 PM

Quick QA on mediawiki - all icons are visible:

Volker_E updated the task description. (Show Details)Apr 16 2020, 9:04 PM
RHo added a subscriber: RHo.Apr 16 2020, 9:50 PM
Edtadros added a comment.EditedApr 17 2020, 1:55 AM

@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
Edtadros reassigned this task from Edtadros to Volker_E.Apr 17 2020, 2:01 AM

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


AC2: Ensure all main menu icons are visible

AC3: Ensure edit section icon is visible

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

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

ovasileva reassigned this task from Volker_E to Edtadros.Apr 27 2020, 5:40 PM
Volker_E updated the task description. (Show Details)Apr 29 2020, 3:07 AM
Volker_E updated the task description. (Show Details)Apr 29 2020, 4:00 AM

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

Volker_E updated the task description. (Show Details)Apr 29 2020, 4:44 AM

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

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

Volker_E updated the task description. (Show Details)Apr 30 2020, 12:51 AM
Edtadros reassigned this task from Edtadros to Volker_E.Apr 30 2020, 2:17 PM

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

Edtadros updated the task description. (Show Details)Apr 30 2020, 2:25 PM

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

Volker_E updated the task description. (Show Details)May 1 2020, 9:04 PM

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

Volker_E updated the task description. (Show Details)Mon, May 4, 11:46 PM
Volker_E updated the task description. (Show Details)Mon, May 4, 11:55 PM
Volker_E reassigned this task from Volker_E to Edtadros.Mon, May 11, 5:14 PM
Volker_E removed a project: Patch-For-Review.
Edtadros reassigned this task from Edtadros to Volker_E.EditedSun, May 17, 6:48 AM

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

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


✅ AC3: Also ensure that page actions overflow menu has the right (vertical) three dots icon (rotated 'ellipsis')

✅ AC4: Ensure reference toast message carries an icon

BetaProd

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

BetaProd
Edtadros updated the task description. (Show Details)Sun, May 17, 6:56 AM
Volker_E added a comment.EditedSun, May 17, 9:50 PM

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.

Edtadros claimed this task.Mon, May 18, 5:59 PM

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)

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'

Edtadros updated the task description. (Show Details)Thu, May 28, 5:08 PM