Page MenuHomePhabricator

Update navigation between Special:Contributions and Special:IPContributions
Closed, ResolvedPublic1 Estimated Story Points

Description

Overview

Following feedback from users and a design review, update the navigation between Special:Contributions and Special:IPContributions to make it easier for the user to:

  • understand which page they are on
  • understand what the different pages do
  • understand how to get to other related pages
Details

The details, including screenshots, a table of UI messages, and figma links, are in this comment: T367121#9962620.

Scope

Event Timeline

Change #1055247 had a related patch set uploaded (by Tchanders; author: Tchanders):

[mediawiki/extensions/CheckUser@master] Add button to indicate mode on Contributions pages

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

Change #1055260 had a related patch set uploaded (by Tchanders; author: Tchanders):

[mediawiki/extensions/CheckUser@master] WIP SpecialIPContributions: Improve navigation between modes

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

Change #1055247 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] Add button to indicate mode on Contributions pages

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

Change #1055288 had a related patch set uploaded (by Tchanders; author: Tchanders):

[mediawiki/extensions/CheckUser@master] WIP Add error banner to Special:IPContributions for invalid target

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

Change #1055260 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] SpecialIPContributions: Improve navigation between modes

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

Change #1055288 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] Add error banner to Special:IPContributions for invalid target

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

dom_walden subscribed.

The transitions for the toggle buttons and "deleted user contributions"/"contributions" link go:

Temporary userToggle buttonsLegacy
Active
ipcontributions.png (440×982 px, 73 KB)
<->
contributions.png (482×970 px, 56 KB)
"(deleted user) contributions" link
Deleted
ipcontributions_isArchived.png (426×992 px, 45 KB)
->
deletedcontributions.png (579×986 px, 46 KB)

Note that going from Special:IPContributions/<ip>&isArchive=1 and clicking "Legacy IP edits" takes you to Special:DeletedContributions, which does not have a toggle.

  • Fix error message banner

Invalid IP passed to Special:IPContributions:

ipcontributions_invalidip.png (799×989 px, 57 KB)

After making a search:
ipcontributions_invalidip_search.png (861×988 px, 76 KB)

The link in the error message goes to Special:Contributions/<target>.

  • Make deleted contributions a link instead of a tab

Yep.

Note that going from Special:IPContributions/<ip>&isArchive=1 and clicking "Legacy IP edits" takes you to Special:DeletedContributions, which does not have a toggle.

Thanks for pointing this out - it will be fixed via T370438: Improve feature parity between Special:Contributions and Special:DeletedContributions.

Overall looks good! However two things appear outstanding:

  1. Toggle button is still missing on Special:DeletedContributions?
  2. In the Desktop design the ToggleButton is aligned on the right rather than stacked underneath (it only stacks on mobile) - the reason for this is to bring the information up the page and make the most of available desktop space. Is this something we can do?

Desktop Toggle button aligned right:

toggleonright.png (437×1 px, 92 KB)

JayCano set the point value for this task to 1.
  1. In the Desktop design the ToggleButton is aligned on the right rather than stacked underneath (it only stacks on mobile) - the reason for this is to bring the information up the page and make the most of available desktop space. Is this something we can do?

Consider the following from testwiki:

image.png (186×976 px, 18 KB)

If the buttons are moved to the right, then this is what it looks like:

image.png (192×966 px, 21 KB)

Forcing the user links to be on the same line makes it look like:

image.png (179×971 px, 20 KB)

By putting the buttons on the right of the screen, we could make the user tool links overflow into three lines. Want to check if this is okay.

Thanks @Dreamy_Jazz! When I was testing 'worst case' scenarios for user links in the desktop design it didn't run over more than two lines, however this likely won't be the case on smaller screens. In my view we should be maximising desktop real estate where possible.

Another reason I proposed that we float the buttons right is because I had GUC in mind, which will eventually have pagination that's similar to new Codex table pagination (and a toggle button to toggle between table and list views). If the toggle button isn't floated right then this will push information down the page on desktop views and ideally we want to show table/list rows as far up the page as we can to reduce scrolling. I think we can try floating right and if it causes problems revert the change?

Sure. I will work on both points you raised in T369930#10088404.

Change #1070259 had a related patch set uploaded (by Dreamy Jazz; author: Dreamy Jazz):

[mediawiki/extensions/CheckUser@master] Show the temp IP toggle buttons on Special:DeletedContributions

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

Doing the work on the point about the position of the toggle buttons is maybe more work than I had anticipated. I think to achieve that, we need to add a new hook to core to allow modification of the HTML generated when creating the user tool links, so that we can place the buttons in a wrapper container with just the tool links.

Change #1070259 merged by jenkins-bot:

[mediawiki/extensions/CheckUser@master] Show the temp IP toggle buttons on Special:DeletedContributions

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

Doing the work on the point about the position of the toggle buttons is maybe more work than I had anticipated. I think to achieve that, we need to add a new hook to core to allow modification of the HTML generated when creating the user tool links, so that we can place the buttons in a wrapper container with just the tool links.

@KColeman-WMF do we need to do this work about the position of the toggle buttons? Or could we split that off into a new task?

kostajh claimed this task.

Doing the work on the point about the position of the toggle buttons is maybe more work than I had anticipated. I think to achieve that, we need to add a new hook to core to allow modification of the HTML generated when creating the user tool links, so that we can place the buttons in a wrapper container with just the tool links.

@KColeman-WMF do we need to do this work about the position of the toggle buttons? Or could we split that off into a new task?

@Dreamy_Jazz will file a new task for this.