Page MenuHomePhabricator

Special:AggregateGroups is too large, needs collapsibility
Closed, ResolvedPublic

Description

At the time of writing, I have to press my PageDown button 94 times to get from the top to the bottom of https://meta.wikimedia.org/wiki/Special:AggregateGroups (if I were to print it it would be 76 A4 pages). This can become unwieldy, and I believe a good solution would be having the sections collapsed to start with, and then use AJAX to load the contents when the sections are opened, instead of loading the entire page at once.

I realize this page is used by a very small number of people, so I don't expect this to have a high priority at all, I'd just like to put it in the radar, so to speak.

Event Timeline

jhsoby raised the priority of this task from to Low.
jhsoby updated the task description. (Show Details)
jhsoby subscribed.
Sjoerddebruin subscribed.

I think the whole page could use a update, it's very badly designed.

Pagination (with 5 or 10 or 20 groups per page) might also be a good alternative solution. Thanks!
[EDIT: 4 years later, I'm striking out this opinion. Pagination would probably be annoying for users.]

Change 738443 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle sub groups

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

Example of existing behavior: https://meta.wikimedia.org/wiki/Special:AggregateGroups

I've added some collapsibility, so that the sub groups are collapsed by default and can be expanded as needed:

Vector:

image.png (654×905 px, 45 KB)

Timeless:

image.png (708×1 px, 43 KB)

Thoughts?

Additionally improvements to consider without making significant back-end changes,

  1. A "Table of contents" at the top in order to view all the aggregate groups.
  2. "Go to top" button to scroll the page to the top.
  1. "Go to top" button to scroll the page to the top.

I’ve always found “Go to top” buttons useless and annoying on desktop layout. PCs have Home keys, which allow one to quickly jump to the top, without cluttering the UI. They may make sense on mobile layouts, but it shouldn’t be Translate’s responsibility there either; rather MobileFrontend’s or Minerva’s. (And this special page doesn’t seem to have been tested on mobile anyway…)

abi_ changed the task status from Open to In Progress.Nov 16 2021, 6:15 PM

I've added some collapsibility, so that the sub groups are collapsed by default and can be expanded as needed:
Thoughts?

Re: collapse - I hesitantly like the idea of using collapsibility here, as long as it includes the "expand all sub-groups" button, for easy access to a Ctrl-F search! Thank you for preemptively including that in your work! :D

Re: loading-time - I'm curious if this implementation uses something like AJAX (per original description) to dynamically load the content, or if it's still all loaded at once and then collapsed when the page-load is complete? It's not a blocker (and I would guess it's very complicated), but just a nice-to-have bonus, if feasible or already done!

Re: Table of Contents - from searching the page-source, there are ~207 <h2 Headings at the moment, so the ToC would be quite large... However, it's probably more helpful than nothing? I hesitantly agree.

Re: Go to top - I agree with Tacsipacsi. It seems like a separate issue to this one.

Change 739814 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle groups

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

Change 738443 abandoned by Abijeet Patro:

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle sub groups

Reason:

In favor of: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/740085

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

Change 740108 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle all groups

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

Latest iterations based on inputs from @Pginer-WMF

image.png (523×562 px, 37 KB)

  • The collapse / expand button for group is moved to the header.
  • If there are 3 or less sub groups in the group then do not collapse the group by default
  • The expand / collapse all group toggle remains on the top of the page.

Re: loading-time - I'm curious if this implementation uses something like AJAX (per original description) to dynamically load the content, or if it's still all loaded at once and then collapsed when the page-load is complete? It's not a blocker (and I would guess it's very complicated), but just a nice-to-have bonus, if feasible or already done!

This is not currently planned. Making things collapsible was rather simple so I started with that with the assumption that users look for a specific aggregate group, and then search for groups under that. Considering this use case, if we add pagination, we'd also have to add a search box to search for the pages under this group.

We can think of making further improvements based on how the page is expected to be used.

Sounds good!
1 more thought, whilst you're in the code!
Would it be easy to duplicate the "Add a new aggregate group" button to the top? That would make it more discoverable for people who are confused (as someone I talked to recently was).

Change 740296 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Move add new aggregate group to the top

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

Moved the add new aggregate groups form to the top. Added a close button to collapse the form.

image.png (550×760 px, 41 KB)

TLDR the above, but isn't the main problem that unlike on TWN, groups for pages cannot be put into other groups? Would it not be better to implement that rather than pagination?

TLDR the above, but isn't the main problem that unlike on TWN, groups for pages cannot be put into other groups? Would it not be better to implement that rather than pagination?

Pagination isn't currently planned. (I mentioned the idea 4 years ago in a comment near the top, and have now re-thought about it, and struck-out my earlier comment! I agree it wouldn't help.)
Collapsing-sections is being added.
This task is just about making the existing page easier to navigate/understand/skim/use. I.e. it's a small tweak.

I think your suggestion would need to be a new task. For context:
It looks like translatewiki doesn't use the AggregateGroups system at all.
I'm not sure, but I would guess that by "other groups" you're referring to the top 5 links at https://translatewiki.net/wiki/Translating:MediaWiki#Recommended_process_for_translating_MediaWiki -- If I understand the details correctly, those are defined in a code-repo (specifically https://gerrit.wikimedia.org/r/plugins/gitiles/translatewiki/+/refs/heads/master/groups/MediaWiki/wikimedia-mostused-2015.txt for the "most used" group), so it isn't something that is easy to implement for page-groups that are currently defined onwiki.

you're referring to the top 5 links at https://translatewiki.net/wiki/Translating:MediaWiki#Recommended_process_for_translating_MediaWiki

Well, kinda. If you go to https://translatewiki.net/w/i.php?title=Special:LanguageStats you can see that many groups include other groups and those include other groups.

Ah, though it seems that I have misread the task, I thought it is about https://meta.wikimedia.org/wiki/Special:LanguageStats rather than about https://meta.wikimedia.org/wiki/Special:AggregateGroups . Though I guess collapsibility is already achievable by a CSS/JS anyone can add for themselves :)

Change 739814 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle groups

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

Change 740108 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Add functionality to toggle all groups

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

Change 740296 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroupsPage: Move add new aggregate group to the top

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

Change 745472 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] SpecialAggregateGroups: Use cursor pointer for toggle group icon

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

All aggregate groups that have more than 3 groups are collapsed by default. This is now available on: https://meta.wikimedia.org/wiki/Special:AggregateGroups

One minor fix for Timeless theme has been identified and needs to be deployed.

On the new Vector skin, I had to use the Page down button 10 times (QHD resolution) to go to the bottom of the page, and a print takes 19 pages.

I'll leave this in open for a few days for any comments (CC: @jhsoby). Other improvements that we want to do can be discussed in a separate task.

Thank you very much for your work on this @abi_ , I think the page is much easier to use now.

One of the main reasons I wrote this bug six years ago – but I see that I failed to mention it explicitly in the description – was that my browser would freeze up for minutes at a time when opening the page. That doesn't happen now, but that's probably because of I now have a better computer/browser. But still, that doesn't take anything away from this being much more user friendly in my opinion. Kudos!

I tried it, and the individual toggle buttons are not keyboard-accessible (tested in Firefox 78esr and Chromium 90). The [expand all sub groups] link is fortunately keyboard-accessible, but it’s a pain to get back there using the keyboard if you notice in the middle of the page that the group you want to interact with is collapsed, not to mention that you’ve lost the point in collapsing long and uninteresting groups. (By the way, the link should be expand all groups, they’re not subgroups of any group.) Maybe the easiest way to fix this would be using <button>s instead of hrefless <a>s—a link that doesn’t point to anywhere isn’t semantically a link anyway, and you don’t even take advantage of its formatting (blue text, automatic underlining etc.).

As a sidenote, the new toggles are nice OOUI icons, but the rest of the page isn’t—is there a task for making the whole page OOUI?

Change 745851 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsSpecialPage: Make toggle links keyboard accessible

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

Change 745856 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroupsSpecialPage: Replace sub group with group for toggles

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

I've submitted patches to:

  1. Make the toggle links keyboard accessible, and give them an outline when focused
  2. Replaced "sub groups" with group in labels and tooltips

As a sidenote, the new toggles are nice OOUI icons, but the rest of the page isn’t—is there a task for making the whole page OOUI?

There is a larger task to convert SpecialPages in Translate extension to use OOUI but nothing specific for this page. It'll be simpe to convert the icons to use the OOUI version, make their clickable area bigger and make them keyboard accessible.

Test wiki created on Patch demo by Tacsipacsi using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/51f093b25e/w/

I've submitted patches to:

  1. Make the toggle links keyboard accessible, and give them an outline when focused

Thanks! I don’t understand, though, why you chose to keep the <a>s. Do you have a reason not to use <button>s?

  1. Replaced "sub groups" with group in labels and tooltips

Thanks!

There is a larger task to convert SpecialPages in Translate extension to use OOUI but nothing specific for this page.

Actually that task didn’t list AggregateGroups… I’ve added it now, thanks for the link!

I've submitted patches to:

  1. Make the toggle links keyboard accessible, and give them an outline when focused

Thanks! I don’t understand, though, why you chose to keep the <a>s. Do you have a reason not to use <button>s?

I think it was just easier to add href="#" with the existing code so I went with that but I agree that button is the correct element to use. I've now updated the patch to use button type="button"

Change 745472 abandoned by Abijeet Patro:

[mediawiki/extensions/Translate@master] SpecialAggregateGroups: Use cursor pointer for toggle group icon

Reason:

Iee7e9106af1b1573a18aa883b875484fdc24b9ce

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

Change 745851 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroupsSpecialPage: Make toggle links keyboard accessible

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

Change 745856 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroupsSpecialPage: Replace sub group with group for toggles

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

I've now updated the patch to use button type="button"

Thanks! Unfortunately I can’t test it on Patch Demo due to #404, but looking at the code, it looks good.

Test wiki on Patch demo by Tacsipacsi using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/51f093b25e/w/

Unfortunately this change broke anchor links to default-collapsed aggregate groups (see this edit by @Quiddity removing a now-broken anchor), as the div#tp-subgroup-XXX gets display:hidden. Anchor links would especially help exactly because of how long this page is. I think either the id should be moved up one level in the DOM tree (from div.tp-sub-groups to div.mw-tpa-group), or a new ID should be added to div.mw-tpa-group.

Unfortunately this change broke anchor links to default-collapsed aggregate groups (see this edit by @Quiddity removing a now-broken anchor), as the div#tp-subgroup-XXX gets display:hidden. Anchor links would especially help exactly because of how long this page is. I think either the id should be moved up one level in the DOM tree (from div.tp-sub-groups to div.mw-tpa-group), or a new ID should be added to div.mw-tpa-group.

We might also want to refactor this feature to use jQuery.makeCollapsible() (doc) instead, which supports auto-expanding while visiting an anchor in a collapsed content.