toggle-files-button missing on "New Repository Overview"

[fregante]

Description

How to replicate the issue + URL

https://github.com/refined-github/refined-github

Extension version

23.8.3

Browser(s) used

Safari

[fregante]

Also it might be a good time to update the gif. I usually use licecap for this

[FloEdelmann]

FYI: This is now generally available: https://github.blog/changelog/2023-12-06-updates-to-repository-pages/

[fregante]

It's not just a missing button, the feature needs to be rewritten from scratch because they changed the way it looks on mobile:

They used to hide all files on mobile, so this feature just reused that logic. Since it's gone, probably none of the current code is usable (other than the chevron up/down CSS).

However the feature is relatively simple. PR welcome

[eymeen]

there's a user script made by @MAZ01001 check it out!

[MAZ01001]

They used to hide all files on mobile, so this feature just reused that logic. Since it's gone, probably none of the current code is usable (other than the chevron up/down CSS).

I don't know anything about how this extension is structured, but ...

I found that you could very simply get it to look like on mobile.

(()=>{
    "use strict";
    document.querySelector("react-partial[partial-name=repos-overview] h2#folders-and-files+table>tbody>tr.show-for-mobile")?.style.setProperty("display","revert");
    document.querySelectorAll("react-partial[partial-name=repos-overview] h2#folders-and-files+table>tbody>tr.truncate-for-mobile").forEach(v=>v.style.display="none");
})();

Here again a little less compressed, with comments.

(()=>{
    "use strict";
    //~ check if on repo overview
    const projectView = document.querySelector("react-partial[partial-name=repos-overview]");
    if(projectView == null) return;

    //~ get the body of the file list table
    const tableBody = projectView.querySelector("h2#folders-and-files+table>tbody");

    //~ display the "View all files" button
    tableBody.querySelector("tr.show-for-mobile")?.style.setProperty("display", "revert");

    //~ hide all marked rows
    tableBody.querySelectorAll("tr.truncate-for-mobile").forEach(row => row.style.display = "none");
})();

Which seems to collapse all but the first 10 rows and it's a one-time "View all files" expansion.

The userscript I wrote permanently adds a toggle button (at the top) for all rows (which now also shows the number of rows).

---

Edit

Just keep in mind this needs to be called after all the rows are loaded, since they're loaded dynamically, otherwise some rows won't be hidden by the initial call and it'll look weird.

That's why I have the two MutationObservers in my userscript, to update the button/rows when they're changed after the initial setup of the toggle, through dynamic loading or navigation without page reloads.