Page MenuHomePhabricator

Convert Special:WhatLinksHere to OOUI
Closed, ResolvedPublic

Assigned To
Authored By
Florian
Nov 4 2015, 5:46 PM
Referenced Files
F35164089: Screen Shot 2022-05-22 at 7.01.07 PM.png
May 22 2022, 11:02 AM
F35164092: Screen Shot 2022-05-22 at 6.59.36 PM.png
May 22 2022, 11:02 AM
F35164090: Screen Shot 2022-05-22 at 6.59.57 PM.png
May 22 2022, 11:02 AM
F31834180: image.png
May 20 2020, 4:19 PM
F31834182: image.png
May 20 2020, 4:19 PM
F16639034: image.png
Apr 3 2018, 8:23 PM
F16638824: image.png
Apr 3 2018, 8:21 PM
F4032805: cswiktionary-msg-repurposed-l10n-issue.png
May 20 2016, 12:53 AM
Tokens
"Like" token, awarded by Lens0021."Evil Spooky Haunted Tree" token, awarded by matej_suchanek.

Description

I thought we already had a task for Special:WhatLinksHere, but I haven't found it (so maybe it doesn't really exist).

Before:

image.png (482×2 px, 73 KB)

image.png (702×2 px, 144 KB)

Event Timeline

Florian raised the priority of this task from to Medium.
Florian updated the task description. (Show Details)
Florian added a project: UI-Standardization.

Change 276966 had a related patch set uploaded (by Ajayrahulp):
Convert Special:WhatLinksHere from XML form to OOUI form

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

Change 276966 merged by jenkins-bot:
Convert Special:WhatLinksHere from XML form to OOUI form

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

Sethakill claimed this task.
Sethakill removed a project: Patch-For-Review.

Two actionable (and hopefully doable) suggestions:

  • The "Namespace" and "Invert selection" fields should be on the same line (and behave like a single field).
    • Something I had in mind for a while was a 'namespacemultiselect' field type in HTMLForm, that would display these two fields (plus an "Include associated namespace" one, optionally) and return an array of namespace ids as its data (a bit like HTMLMultiSelectField). Please note that this is not a polished idea and I never tried implementing it :D
    • I did, however, implement MediaWiki\Widget\ComplexNamespaceInputWidget for the OOUI version. It was briefly used on Watchlist (before that OOUI conversion was reverted too, T99256).
  • The "Hide blah" checkboxes should also be on the same line and behave like a single field.
    • You can probably use 'multiselect' field type easily here, for a start.
    • We had some other OOUI HTMLForm special page which used a little bit of custom CSS to display similar checkboxes inline, I can't remember which one now.

Quick mockup (edit of the screenshot above):

pasted_file (644×1 px, 78 KB)

Danny_B added a subscriber: Danny_B.

Needs design team's eyes obviously...

@Ajayrahul We've a little issue reverting the localisation of your code: your repurposed messages to give them a new meaning.

This choice makes it's not straighforward to revert: we need to track on TranslateWiki translations update, revert them, prepare a change.

When you change the meaning of an element interface, please create a new message instead of amend existing ones.

cswiktionary-msg-repurposed-l10n-issue.png (912×1 px, 159 KB)

Quick mockup (edit of the screenshot above):

pasted_file (644×1 px, 78 KB)

Better than the reverted stuff, but still so much unnecessarily space consuming.
Can't the original layout be kept as much as possible?
Why are labels above controls?
Why is ns selector x-times wider than the widest item in it?
Etc...

Even if I might repeat myself. To @Danny_B's points above:

Why are labels above controls?

Because there's lesser cognitive workload when labels are above controls. People are quicker when fulfilling their tasks on forms with labels above fields. See for example https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Why is ns selector x-times wider than the widest item in it?

What is the problem with this?

Jdlrobson added a subscriber: Jdlrobson.

The mobile version of this page should be converted as well.

The mobile version of this page is the same as the desktop version.

matej_suchanek edited subscribers, added: Sethakill; removed: wikibugs-l-list.

This is not directly related to the task, but I thought some of this may be useful to someone. I'm the maintainer of the AdvancedBacklinks extension that lets you track links through transclusions and can get you easily in a psychiatric hospital. Anyway, this extension has a special page very similar to Special:WhatLinksHere, just enhanced with a few neat features. I recently rewrote some of this special page to use OOUI and the end result is this:

image.png (709×1 px, 67 KB)
image.png (843×436 px, 56 KB)

If you want, you can test it out here: https://nonsa.pl/wiki/Special:AdvancedBacklinks?uselang=en (the wiki is unfortunately in Polish)
The relevant merge request with all changes needed to make this work is here: https://gitlab.com/nonsensopedia/extensions/advancedbacklinks/-/merge_requests/77/diffs

There a few caveats, though. These filter checkboxes to my best knowledge require you to break URL compatibility. Another option would be to invert their semantics, that is change their labels to Hide X, not Show X, but frankly that's horrible UI design. You could also support the old URL params as backwards-compat, probably. As we didn't care about URL compatibility, I redesigned it completely. I also completely removed the use of the FormOptions class, it was just annoying.

As for the core special page, I think the most similar special page in core that has already been converted to OOUI is Special:NewPages, may be worth looking there.

From the above discussion, here are a few notes I took:

  • The Invert selection checkbox should be in the same line with the namespace dropdown list.
  • Filter checkboxes should be inline-block so they will be in the same line if possible, and not consume too much space.
  • Since OOUI design is still much spaced than current, we should make the form collapsible, and collapsed by default when parameters are set (i.e. user is browsing the results), just like the current behavior of Special:Contributions.

I will try to implement the above design, and any other suggestions are welcomed.

@WhitePhosphorus Can you base your work on top of https://gerrit.wikimedia.org/r/c/mediawiki/core/+/788875? (a small refactoring of SpecialWhatLinksHere code that I'm working on)

@matmarex sure, I almost finished the patch with parent set to your change, just need a few more local testing. I plan to introduce some css rules in resources/src/mediawiki.special/whatlinkshere.less to position the invert and filter checkboxes. Flexbox for ns selection + invert checkbox to make them in the same line, and display: inline-block for filter checkboxes. I am also going to make the whole box collapsed if target is set which means the user is browsing results. Some screenshots will be posted later.

Change 791710 had a related patch set uploaded (by WhitePhosphorus; author: WhitePhosphorus):

[mediawiki/core@master] SpecialWhatLinksHere: Convert form to OOUI

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

Test wiki created on Patch demo by WhitePhosphorus using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/cd965ac5c5/w/

Everything looks OK now (try it out here), except the padding between page and namespace panels seems too small. Feel free to do more tests on the patch demo.

Test wiki created on Patch demo by WhitePhosphorus using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/eef17f2803/w/

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

https://patchdemo.wmflabs.org/wikis/cd965ac5c5/w/

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

https://patchdemo.wmflabs.org/wikis/eef17f2803/w/

Test wiki created on Patch demo by WhitePhosphorus using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d10bb209b4/w/

Updated the patch demo with the current patch set, link to the new demo site. Thanks Bartosz and Volker for code reviewing :) Here are some screenshots from the current design:

Screen Shot 2022-05-22 at 6.59.36 PM.png (996×1 px, 102 KB)

Screen Shot 2022-05-22 at 6.59.57 PM.png (1×470 px, 98 KB)

Screen Shot 2022-05-22 at 7.01.07 PM.png (1×788 px, 115 KB)

Change 791710 merged by jenkins-bot:

[mediawiki/core@master] SpecialWhatLinksHere: Convert form to OOUI

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

Is there a particular reason why variables were kept in checkbox messages like whatlinkshere-hidetrans ("$1 transclusions")? These are poor lego messages (see i18n hints). It appears that $1 is always "Hide" now, and so it'd seem reasonable to write just "Hide transclusions" without a variable.

Is there a particular reason why variables were kept in checkbox messages like whatlinkshere-hidetrans ("$1 transclusions")? These are poor lego messages (see i18n hints). It appears that $1 is always "Hide" now, and so it'd seem reasonable to write just "Hide transclusions" without a variable.

They should be changed, I made a note about this at https://gerrit.wikimedia.org/r/c/mediawiki/core/+/791710/5/includes/specials/SpecialWhatLinksHere.php#703.

I didn't ask for this to be done in the initial patch, because it's somewhat counterintuitive how to do it without losing or breaking existing translations (you need to keep the parameter, but don't use it), and it's annoying to undo if the patch needs to be reverted (you need to manually undo any changed translations on Translatewiki). I supposed we can do it now though, I submitted https://gerrit.wikimedia.org/r/c/mediawiki/core/+/804604.

The form shouldn’t have been collapsible in this case. It makes a number of regular use cases of What links here, such as ‘go to the template, see where it’s used’, a bit harder to do without much benefit on mobile viewports (since this form is not long, like on Special:Contribs).

A much longer form at Special:Log, for example, isn’t hidden for the same exact reason of form usability, so I would appreciate if this one would not be collapsible, too.

If you'd like to submit a patch to do that, I'd approve it.

(I don't want to be the person making all the decisions about these changes, because I expect someone to ask for the opposite as soon as we change it… Also, if I wrote that patch, I'd need to find someone else with the rights to approve it.)

Change 808953 had a related patch set uploaded (by Saint Johann; author: Saint Johann):

[mediawiki/core@master] SpecialWhatLinksHere: Uncollapse the OOUI form

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

Change 808953 merged by jenkins-bot:

[mediawiki/core@master] SpecialWhatLinksHere: Uncollapse the OOUI form

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