Page MenuHomePhabricator

Add indicator that appears when TOC & page tools menu have been hidden
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

In order to help people understand where the table of contents and page tools menu have been collapsed to, after you collapse them (manually) the menu-button that appears should show a temporary indicator:

basic prototype: https://di-collapsible-menus.web.app/Brown_bear

before hidingafter hiding
table of contents
image.png (1×3 px, 1 MB)
image.png (1×3 px, 1 MB)
page tools
image.png (1×3 px, 605 KB)
image.png (1×3 px, 564 KB)

Acceptance criteria

  • Indicator appears after collapsing the TOC
  • Indicator points to the TOC icon-button (next to the page title), regardless of browser screen size
  • Indicator disappears after 4 seconds

Notes

  • this is a similar pattern to what we do on Commons and Wikidata when you change UI language. It would be great if we could use the same timing interval for how long it remains on the screen (it seems to be about 4 seconds, which I've put in the AC):
    image.png (426×1 px, 72 KB)
  • thanks to @TheDJ for this idea

Sign off steps

  • Create a new ticket for remaining work (tick the box and add Phabricator ticket here when done) which includes writing unit tests and extending the functionality relating to the table of contents.

QA Results - Beta

ACStatusDetails
1T311160#8726124
2T311160#8726124
3T311160#8726124

QA Results - Prod

ACStatusDetails
1T311160#8748130
2T311160#8748130
3T311160#8748130

Related Objects

Event Timeline

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

@ovasileva @RHo two other situations in which we could show the indicator, but i'm not sure if it's necessary:

  • someone arrives at the page with a screen 1000px wide (or less), in which case the TOC will automatically be hidden
  • someone resizes their screen to be 1000px (or less), in which case the TOC will automatically be hidden

also, originally we had discussed showing this indicator only once per session. thinking about it again i'm not sure if that additional complexity (code-wise) is needed. i'm assuming it will be uncommon for people to hide > unhide > hide the TOC.

Jdlrobson triaged this task as Medium priority.Jun 22 2022, 6:51 PM

According to T117720 the preferred way to make this fly out is OOUI (and that's the one being used by ULS), however we are moved towards Vue. I'm pinging design systems to see if there's a Vue component we could be using here and understand the plan for migrating the OOUI tipsy fly out to Codex. I'd rather we didn't create something new from scratch here, but also loading OOUI on top of Vue.js doesn't seem ideal.

@ovasileva @RHo two other situations in which we could show the indicator, but i'm not sure if it's necessary:

  • someone arrives at the page with a screen 1000px wide (or less), in which case the TOC will automatically be hidden
  • someone resizes their screen to be 1000px (or less), in which case the TOC will automatically be hidden

Hi @alexhollender_WMF - I think it would be valuable to show this tooltip, esp. the first situation for long time readers/editors with narrow screens who might wonder where the ToC went.

This is currently in the backlog as it is not a blocker for further deployment

alexhollender_WMF renamed this task from Add indicator that appears when TOC has been hidden to Add indicator that appears when TOC & page tools menu have been hidden.Oct 26 2022, 1:38 PM
alexhollender_WMF updated the task description. (Show Details)

@ovasileva should we also include this notice for the main menu? maybe a bit different if it never defaults to pinned, so you kinda have to know where it goes when it hides (because that's where you pinned it from to begin with)...

FYI an other user of arwiki can’t find where the menu tools is hidden when replied. Similar comments where shared last months regarding the language switching, the hidden main menu and, more recently, about the page tools menu. This kind of notice could help users to learn quickly how it is organized the new skin, where they have to look for to (re)open menus, what is the new icon to memorize. It also would help volunteers who have to respond to those who can't find links and features, in addition to their usual work.

LGoto set the point value for this task to 3.Mar 2 2023, 6:50 PM

@Jdlrobson where did we land on the Codex/OOUI side of things? As far as I can tell there isnt a Codex component for this, and if loading OOUI isnt an option, are we just going to build this out custom?

I don't think it makes sense to load OOUI to the page. I think that leaves 2 options

  1. Vue component loaded on click that we make custom initially, but look to upstream to core
  2. Use a modified version of jQuery tipsy (we'd need to add CSS to style the arrow or upgrade tipsy library as position option is not supported in our deployed version):
mw.loader.using('jquery.tipsy').then(()=> {
  $('#vector-page-titlebar-toc').attr('title','Table of contents').tipsy({position: 'top-left', className: 'vector-tipsy', center:false, trigger: 'manual'}).tipsy('show');
} )

Wasn't any announcement that tipsy will be removed?

Wasn't any announcement that tipsy will be removed?

It's not been removed, but it has been deprecated for some time. That said, no suitable alternative is available other than OOUIPopupWidget. We're seeking clarity on whether it makes sense to use that or whether that should also be considered deprecated.

@ovasileva @KieranMcCann Should this happen everytime a pinnable element is unpinned? Or just the first time?

Change 901311 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] WIP: Add popup indicator for unpinning

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

@ovasileva @KieranMcCann Should this happen everytime a pinnable element is unpinned? Or just the first time?

@bwang The pattern used on Commons and Wikidata that is mentioned in the description appears every time you choose a new language from the language menu. I’m not sure that is necessary in this instance. I would imagine that many users may pin/unpin these menu’s quite frequently and having this tip every time seems would be overdoing it. My sense would be to make it appear only the first time the menus are interacted with. Any thoughts on this @ovasileva?

@ovasileva @KieranMcCann Should this happen everytime a pinnable element is unpinned? Or just the first time?

@bwang The pattern used on Commons and Wikidata that is mentioned in the description appears every time you choose a new language from the language menu. I’m not sure that is necessary in this instance. I would imagine that many users may pin/unpin these menu’s quite frequently and having this tip every time seems would be overdoing it. My sense would be to make it appear only the first time the menus are interacted with. Any thoughts on this @ovasileva?

I think I would go for consistency and say it should show every time so that it's easy to find. Overall, the rate of pinning/unpinning is fairly low (although I do agree that it might be focused around the same set of users).

Change 900725 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] [vector] Add indicator that appears when TOC & page tools menu have been hidden

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

@ovasileva sounds good. Also, should it appear when the pinnable elements are automatically unpinned on lower resolutions? To note, a screenreader user specifically brought up difficulties with finding the automatically unpinned TOC in this patch https://phabricator.wikimedia.org/T328480. This is because people with low vision will often zoom into a page, which is basically equivalent to using the site on a mobile resolution. So I think the indicator on lower resolutions could be really important, but I'm not sure how thats going to work when there are multiple elements being hidden automatically. At the very least, should the TOC show the indicator when auto unpinned on lower resolutions?

Change 901311 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Add popup indicator for unpinning

Reason:

abandoning in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/900725

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

Change 900725 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add indicator that appears when TOC & page tools menu have been hidden

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

@ovasileva please note the extra sign off step
@Mabualruz @bwang and I meet today and decided to descope some of this ticket given issues we ran into relating getting this to work for the table of contents. Bernard and Mo will create a new ticket capturing the remaining work (which will also include adding unit tests). Please make sure this has happened as part of sign off.

I've moved this to QA but @KieranMcCann you'll also likely want to do a design review simultaenously.

@Jdlrobson In terms of design review I can confirm all looks good to me.

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Indicator appears after collapsing the TOC
✅ AC2: Indicator points to the TOC icon-button (next to the page title), regardless of browser screen size
✅ AC3: Indicator disappears after 4 seconds

Screen Recording 2023-03-24 at 4.26.24 PM.mov.gif (1×996 px, 586 KB)

Screen Recording 2023-03-24 at 4.25.31 PM.mov.gif (1×1 px, 811 KB)

Screen Recording 2023-03-24 at 4.24.54 PM.mov.gif (1×1 px, 771 KB)

Edtadros removed Edtadros as the assignee of this task.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Indicator appears after collapsing the TOC
✅ AC2: Indicator points to the TOC icon-button (next to the page title), regardless of browser screen size
✅ AC3: Indicator disappears after 4 seconds

Screen Recording 2023-04-01 at 4.07.23 PM.mov.gif (836×1 px, 565 KB)

Screen Recording 2023-04-01 at 4.06.17 PM.mov.gif (836×1 px, 615 KB)