Page MenuHomePhabricator
Create Task
Maniphest T232383

Consolidate MinervaNeue and Flow on one WikimediaUI icon for ToC
Closed, ResolvedPublic
Actions

Assigned To
ovasileva
Authored By
Volker_E
Sep 9 2019, 7:37 PM
Tags
Referenced Files
F31786064: m.mediawiki.org_wiki_Manual_talk_Coding_conventions_CSS(iPad).png
Apr 29 2020, 5:34 AM
F31786061: en.m.wikipedia.org_wiki_Albert_Einstein(iPad) (1).png
Apr 29 2020, 5:34 AM
F31660012: Screen Shot 2020-03-03 at 8.50.55 AM.png
Mar 3 2020, 4:52 PM
F31632126: image.png
Feb 26 2020, 4:40 PM
F31632128: image.png
Feb 26 2020, 4:40 PM
F31631014: image.png
Feb 25 2020, 10:26 PM
F31630590: image.png
Feb 25 2020, 4:42 PM
F31630526: image.png
Feb 25 2020, 3:55 PM
View All 13 Files
Subscribers
Aklapper
• alexhollender_WMF
Edtadros
Jdlrobson
Jdrewniak
Masumrezarock100
Volker_E

Description

Coming from T231613#5471903 we're dealing with two separate, very close icons, that should be consolidated into one.

  1. OOUI's 'stripeToC'; currently only in use in Flow, see also T141801: WikimediaUI (Codex/OOUI) icon inventory (tracking)
  2. MinervaNeue's new 'toc-*' icons from https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/534865/

Expected result

Use one icon for table of contents.

Design

image.png (14×18 px, 119 B)
vs
image.png (124×370 px, 4 KB)

in comparison bullet point list:

image.png (68×206 px, 2 KB)

In context:

Minerva TOCFlow
image.png (717×1 px, 270 KB)
image.png (717×1 px, 225 KB)

SVGs:

contents-rtl.svg269 BDownload
contents-ltr.svg264 BDownload

Proposal

  • Deprecate & remove 'stripeToC' in OOUI
    • Deprecate
    • Remove it
  • Use 'listBullet' in Flow
  • Use 'listBullet' in MinervaNeue

QA steps

QA Results - Prod

ACStatusDetails
1✅T232383#6092066
2✅T232383#6092066

Details

SubjectRepoBranchLines +/-
Update OOUI to v0.38.0mediawiki/coremaster+562 -426
[BREAKING CHANGE] icons: Remove 'stripe*' and 'toc' iconsoojs/uimaster+0 -56
Use standardized icon classes and fix some missing iconsmediawiki/skins/MinervaNeuemaster+22 -23
Rename several icons to WikimediaUI namingmediawiki/skins/MinervaNeuemaster+41 -21
Replace deprecated 'stripeToC' with 'listBullet' iconmediawiki/extensions/Flowmaster+11 -11
Update OOUI to v0.37.0mediawiki/coremaster+144 -91
[DEPRECATING CHANGE] icons: Deprecate 'toc' from 'icons-layout'oojs/uimaster+13 -12
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Sep 9 2019, 7:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 9 2019, 7:37 PM
Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.Sep 9 2019, 7:47 PM
• alexhollender_WMF added a comment.Sep 9 2019, 9:35 PM

@Volker_E perhaps this?

image.png (14×18 px, 119 B)

In context:

Minerva TOCFlow
image.png (717×1 px, 270 KB)
image.png (717×1 px, 225 KB)

SVGs:

contents-rtl.svg269 BDownload
contents-ltr.svg264 BDownload
Volker_E added a comment.Sep 9 2019, 11:23 PM

No strong preference one, one thing though is, the mobile site doesn't use an indicated list, only indentation. But I think that is acceptable.

• alexhollender_WMF moved this task from Needs analysis to Designing/discussing right now on the Web-Team-Backlog (Design) board.Sep 10 2019, 3:54 PM
• alexhollender_WMF edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).Sep 10 2019, 4:04 PM
In T232383#5477186, @Volker_E wrote:

No strong preference one, one thing though is, the mobile site doesn't use an indicated list, only indentation. But I think that is acceptable.

Good point. In Flow the table of contents does not use bullets or numerals either, however I think this icon does a better job of representing the idea of "table of contents" even if it doesn't accurately represent our versions visually. If we removed the bullets I also think the icon would become too generic (it would look just like text/paragraph).

• alexhollender_WMF updated the task description. (Show Details)Sep 10 2019, 4:05 PM
ovasileva triaged this task as Medium priority.Sep 17 2019, 9:40 AM
ovasileva moved this task from Incoming to Triaged but Future on the Web-Team-Backlog board.
Jdlrobson added a parent task: T55733: Use the same icons to represent the same things (tracking).Sep 17 2019, 7:57 PM
Jdlrobson moved this task from Backlog to Blocked on Discussion on the MinervaNeue board.Jan 17 2020, 11:15 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptJan 17 2020, 11:15 PM
Volker_E mentioned this in T244444: Replace all possible, non-product specific icons in MobileFrontend/MinervaNeue with WikimediaUI/OOUI ones.Feb 24 2020, 9:59 PM
Volker_E added a comment.Feb 25 2020, 3:32 PM

MinervaNeue has in the meantime been updated to https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.icons.images/toc-ltr.svg without bullets.

Volker_E updated the task description. (Show Details)Feb 25 2020, 3:55 PM
Jdlrobson added a subtask: T244444: Replace all possible, non-product specific icons in MobileFrontend/MinervaNeue with WikimediaUI/OOUI ones.Feb 25 2020, 4:15 PM
Volker_E updated the task description. (Show Details)Feb 25 2020, 4:42 PM
• alexhollender_WMF added a comment.Feb 25 2020, 10:26 PM

Spoke with @Volker_E — I think it's fine to swap the current contents icon for the bullet list one, e.g.

image.png (975×1 px, 565 KB)

Volker_E added a comment.Feb 26 2020, 4:40 PM

And that'd be the result of reusing listBullet instead of stripeToC in Flow:

BeforeAfter
image.png (398×1 px, 48 KB)
image.png (528×1 px, 70 KB)
gerritbot added a comment.Feb 26 2020, 5:34 PM

Change 575046 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [DEPRECATING CHANGE] icons: Deprecate 'toc' from 'icons-layout'

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

gerritbot added a project: Patch-For-Review.Feb 26 2020, 5:34 PM
gerritbot added a comment.Feb 26 2020, 11:38 PM

Change 575046 merged by jenkins-bot:
[oojs/ui@master] [DEPRECATING CHANGE] icons: Deprecate 'toc' from 'icons-layout'

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

gerritbot added a comment.Feb 27 2020, 2:26 AM

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

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

gerritbot added a comment.Feb 27 2020, 3:04 AM

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

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

Jdlrobson added a comment.Mar 3 2020, 4:52 PM

@Volker_E is a Minerva patch needed here? Note I'm seeing some UI regressions in table of contents so if so maybe we could fix those too? (note position of arrow not floated right or correct color)

Screen Shot 2020-03-03 at 8.50.55 AM.png (488×494 px, 37 KB)

Jdlrobson removed a project: Patch-For-Review.Mar 3 2020, 4:52 PM
gerritbot added a comment.Mar 25 2020, 2:03 AM

Change 583191 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Rename 'edit' icon internally to 'editLock'

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

gerritbot added a project: Patch-For-Review.Mar 25 2020, 2:03 AM
Volker_E renamed this task from Consolidate MinervaNeue's ToC icon with OOUI's to Consolidate MinervaNeue and Flow on one WikimediaUI icon for ToC.Mar 27 2020, 3:45 AM
Volker_E added projects: StructuredDiscussions, OOUI.
Volker_E updated the task description. (Show Details)
Restricted Application added a project: Growth-Team. · View Herald TranscriptMar 27 2020, 3:45 AM
gerritbot added a comment.Mar 27 2020, 4:50 AM

Change 583820 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Flow@master] Replace deprecated 'stripeToC' with 'listBullet' icon

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

Volker_E added a comment.Mar 27 2020, 5:56 AM

@Jdlrobson Yes, there's a patch needed. Should go hand in hand with T244444. We need to use 'listBullet' icon for that.

Volker_E updated the task description. (Show Details)Mar 30 2020, 8:52 PM
gerritbot added a comment.Mar 30 2020, 9:47 PM

Change 583820 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Replace deprecated 'stripeToC' with 'listBullet' icon

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.26; 2020-03-31).Mar 30 2020, 10:00 PM
gerritbot added a comment.Mar 31 2020, 7:19 PM

Change 583191 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Rename several icons to WikimediaUI naming

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.27; 2020-04-07); removed MW-1.35-notes (1.35.0-wmf.26; 2020-03-31).Mar 31 2020, 8:00 PM
Jdlrobson removed a project: Patch-For-Review.Apr 1 2020, 10:06 PM

Done ...?
QA ... ?

Volker_E updated the task description. (Show Details)Apr 1 2020, 10:49 PM
Volker_E removed a subtask: T244444: Replace all possible, non-product specific icons in MobileFrontend/MinervaNeue with WikimediaUI/OOUI ones.
gerritbot added a comment.Apr 1 2020, 11:49 PM

Change 585348 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Use standardized icon classes

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

gerritbot added a project: Patch-For-Review.Apr 1 2020, 11:49 PM
Volker_E updated the task description. (Show Details)Apr 2 2020, 12:30 AM
Volker_E updated the task description. (Show Details)Apr 2 2020, 2:09 AM
gerritbot added a comment.Apr 2 2020, 2:10 AM

Change 585348 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Use standardized icon classes and fix some missing icons

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

Volker_E updated the task description. (Show Details)Apr 2 2020, 2:10 AM
gerritbot added a comment.Apr 2 2020, 2:15 AM

Change 585362 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Remove 'stripe*' and 'toc' icons

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

Volker_E updated the task description. (Show Details)Apr 2 2020, 4:45 AM
gerritbot added a comment.Apr 15 2020, 12:54 AM

Change 585362 merged by jenkins-bot:
[oojs/ui@master] [BREAKING CHANGE] icons: Remove 'stripe*' and 'toc' icons

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

Volker_E updated the task description. (Show Details)Apr 15 2020, 1:07 AM
Volker_E moved this task from Backlog to OOUI-0.38.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.38.0); removed OOUI.
gerritbot added a comment.Apr 15 2020, 1:33 AM

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

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

gerritbot added a comment.Apr 15 2020, 5:52 AM

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

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

Jdlrobson moved this task from Triaged but Future to Kanbanana-2019-20-Q4 on the Web-Team-Backlog board.Apr 17 2020, 7:05 PM
Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q4); removed Web-Team-Backlog.
Jdlrobson updated the task description. (Show Details)Apr 20 2020, 10:58 PM
Jdlrobson moved this task from Needs Analysis to Needs QA in Prod on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.

This code appears to be in production.

Volker_E assigned this task to Edtadros.Apr 21 2020, 3:04 AM
Edtadros reassigned this task from Edtadros to ovasileva.Apr 29 2020, 5:34 AM
Edtadros moved this task from Needs QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.
Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: prod
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA steps

✅ AC1: Visit Albert Einstein and look out for ToC interaction element. Confirm that 'listBullet' icon

image.png (68×206 px, 2 KB)
is used
en.m.wikipedia.org_wiki_Albert_Einstein(iPad) (1).png (2×1 px, 556 KB)

✅ AC2: Visit https://www.mediawiki.org/wiki/Manual_talk:Coding_conventions/CSS and confirm ”Browse topics“ interaction elements uses 'listBullet' icon
m.mediawiki.org_wiki_Manual_talk_Coding_conventions_CSS(iPad).png (2×1 px, 383 KB)

Edtadros updated the task description. (Show Details)Apr 29 2020, 5:35 AM
ovasileva closed this task as Resolved.Apr 30 2020, 2:22 PM

Looks good, resolving.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits