[go: up one dir, main page]
Skip to content

Make diffs "Expand All" button work without reloading the page

Description

Any UI page that contains multiple file diffs currently includes a button labelled "Expand All", which works by adding a parameter of expanded=1 to the URL. While this achieves the desired goal of expanding all diffs, using the URL to do this causes an unnecessary page reload. I say "unnecessary" here because the page itself already contains scripting to handle to loading of large diffs, in which the table.code element is only populated if the user chooses to expand one of these already-collapsed diff views.

Proposal

I believe the "Expand All" button should rather use simple JS:

  • loop through all div.diff-file elements
  • expand a diff if it's currently collapsed

Thanks to existing functionality, this button will then either show an already rendered file diff, or fetch it from the server on demand.

I would highly recommend having a simple .expanded or .collapsed class (or perhaps true/false data-collapsed attribute) assigned to the div.diff-file element directly. This would simplify not only this button behaviour, but also general styling for these sections of the page.

Links / references

For what it's worth, I'm already using a small script in Tampermonkey that removes the current "Expand All" button, replacing it with an "Expand Diffs" and a "Collapse Diffs" button, each of which do as the name implies straight through JS. It is a bit hacky though, since the "expanded" state of the diffs is not all that easy to get to through the current UI structure..

I originally found this script linked from a comment in gitlab-ce#24679, which I then tweaked a bit further to replace the "Expand All" button.

Please note: I have removed the remainder of this template because I don't feel it's relevant to the request; if this is a problem, please let me know and I'll re-add this and populate the necessary fields.