Page MenuHomePhabricator

collapsibleFooter should be redesigned, maybe using <summary> and <details>?
Open, Needs TriagePublic

Description

Tl;dr, We should have a non adhoc way to design collapsibleFooter so MediaWiki and its extensions can append to it without difference, or simply use HTML5's <summary> <details> throwing away all JS logics and Less icons and so, make it work even when client doesn't have JS

image.png (520×1 px, 93 KB)

Backstory:

Somehow I reached to T351681, I liked to see if that's something I can work on my spare time so went for this change, https://gerrit.wikimedia.org/r/1062456 removal of mediawiki.icon from one last place in core itself.

I knew the solution wasn't perfect as it was injecting an icon to messages paragraph, but as there was margin collapse going on (that paragraph had a margin that was shared with other elements on the page) so in order to keep the change both minimal and visually identical while getting rid of the mediawiki.icon module I went for it specially because codex icons are meant to be placed in their own element, at least that's something I learnt from @TheDJ, it seemed good enough to me.

I was done with the amount I wanted to progress the task voluntarily but suddenly I found out my change caused breakage in Wikibase,

image.png (254×928 px, 43 KB)

(note the first section's triangle)

So I felt that's my responsibility to fix the regression so I went for https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/1065246 . But the fact it broke like this even without touching anything on mediawiki.icon itself yet made me think this was using an already adhoc solution that needed some redesign, it copies some part of Core's collapsibleFooter but reuses some other parts which is why it broke. It should've been either completely independent, no shared class, or something completely shared with Core's logic without duplicated JS/Less logic and marking 'mediawiki.action.edit.collapsibleFooter' module an explicit dependency of Wikibase.

And later I learnt it's still not perfect, @Od1n found two other issues in my work https://phabricator.wikimedia.org/T351681#10090321 so I went for fixing them as well https://gerrit.wikimedia.org/r/1066438 but I don't see the solution being perfect either as noted why there, just that it fixes the regressions, and to sync Wikibase with that change I uploaded https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Wikibase/+/1066441 also, which didn't matter but I liked to keep them in sync. And then there was another glitch on that regression fix, T373658

Even LivePreview can cause the icon injection to be ran twice which shows something has went wrong but even before my changes.

And now after all these I felt more and more this should be improved, the whole thing undoubtedly not something important, not something regular readers would care about, so let's either use <summary> <details> there, or, have someway to not duplicate the logic in Wikibase extension or any other place that might use this in future, perhaps JsonConfig can be it's client later also like T371300. And perhaps it can get a nicer icon and animation along the way.

Thanks

Event Timeline

This comment was removed by TheDJ.

I do think that this widget is very suited for replacing with details/summary. We have at least two usages of those already in core and I think this one is suited very much as well.

The hardest part of the swap might be the JS of the live preview. Possibly has to split up into several patches to avoid issues with old and new code mixing due to caching.

I'm available for review if you need any.

Change #1067334 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/core@master] Adopt collapsible editfooter with details/summary tags

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

Change #1067339 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/Wikibase@master] Adopt collapsible editfooter with details/summary tags

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

Currently arrows aren't in place in skins other than Vector-2022 T373658 and the fact we don't have to <details> <summary> or some dedicated way to define collapsibleFooter items in a structured way makes its fix more painful,

I just noticed that when viewing source of a page that is edit-protected, the sections are not made collapsible.

It is because the wikipage.editform hook is not fired in this case. See mediawiki.action.edit.collapsibleFooter.js.