Page MenuHomePhabricator

Use CSS instead of JavaScript for collapsing on enhanced changes list
Closed, ResolvedPublic

Description

Currently the enhanced changes list uses JavaScript from module jquery.makeCollapsible to collapse and expand the entries. It would be nice to use a hidden checkbox and CSS to collapse the entries. This improves the performance on loading and allows using the enhanced changes list on clients without JavaScript. Inspiration from https://gerrit.wikimedia.org/r/359474

Event Timeline

I believe this is fixed now right ? This was already using jquery.makeCollapsible for a while, and with T42812: jquery.makeCollapsible: Refactor to use CSS instead of JavaScript to do the expansion/collapse (including initial state) that completely relies on CSS for the initial paint.

The collapse buttons in the enhanced watch list still not working while loading the page.

you mean uncollapsing while the JS has not yet finished loading ? As in, you have the button, but it doesn't work yet ?

Collapsing based only on CSS instead of JavaScript has the following improvements:

  • Collapsing works on Grade C browser.
  • Collapsing works on browser with disabled JavaScript.
  • Uncollapsing works even before JavaScript has finished loading.

Ah, the title of this ticket doesn't match the description. This is not about CSS and collapsing, but about not relying on javascript/programmatic control to toggle the state.

As in, you have the button, but it doesn't work yet ?

Currently the buttons (triangles) are missing while loading. https://gerrit.wikimedia.org/r/489460 solves this by loading the icons as a style module. The buttons still work only when the JavaScript handler is attached.

Change 490323 had a related patch set uploaded (by Fomafix; owner: Fomafix):
[mediawiki/core@master] EnhancedChangesList: Use HTML/CSS for collapsing

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

Change 490691 had a related patch set uploaded (by Fomafix; owner: Fomafix):
[mediawiki/core@master] ChangesList: Use HTML/CSS for collapsing of legend

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

Change 490691 had a related patch set uploaded (by Fomafix; author: Fomafix):

[mediawiki/core@master] ChangesList: Use HTML/CSS for collapsing of the legend box

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

Change 490323 had a related patch set uploaded (by Fomafix; author: Fomafix):

[mediawiki/core@master] EnhancedChangesList: Use HTML/CSS for collapsing

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

@Fomafix: Removing task assignee as this open task has been assigned for more than two years - See the email sent to task assignee on Feburary 22nd, 2023.
Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome! :)
If this task has been resolved in the meantime, or should not be worked on by anybody ("declined"), please update its task status via "Add Action… 🡒 Change Status".
Also see https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator. Thanks!

The patch seems fine, but I am hesitant to merge it:

  • I'm not sure sure how useful this feature is for non-JS users.
  • It also adds more code than it removes
  • It fragments our collapsing code - so won't benefit from standardization if the existing collapsible styles change (for example if we change the hide/show to be buttons for better design cohesiveness with the Vector 2022 design).

Change 490323 merged by jenkins-bot:

[mediawiki/core@master] EnhancedChangesList: Use HTML/CSS for collapsing

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

Change 490691 merged by jenkins-bot:

[mediawiki/core@master] ChangesList: Use <details> for collapsing of the legend box

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