The issue has been closed
<!--
1. Make sure your requested feature makes sense for Refined GitHub:
https://github.com/sindresorhus/refined-github/issues/2960
2. Include a full URL where the feature should appear.
-->
When viewing the files list of a pull request,
it would be nice to be allowed to toggle any file by clicking on their "header bar" (bar that contains the filename, the checkbox [ ] Viewed and the 3-dots menu).
For instance on this page:
https://github.com/microsoft/TypeScript/pull/12114/files
This feature should appear on this kind of URL:
https://github.com/<owner>/<repository>/pull/<pr_id>/files
Not a bad idea. The hard part would be avoiding this behavior when clicking any other element on that bar.
Maybe
```js
document.addEventListener('click', handleClick)
function handleClick(event) {
if (event.target.matches('that bar’s selector')) {
select('that toggle’s selector', event.target)!.click()
}
}
I dug a little bit and I got something working pretty well (by playing in the DevTools so quick & dirty):
const selectorHeaderBar = '.file-header.file-header--expandable';
document.querySelector('#files').addEventListener('click', (event) => {
const elemClicked = event.target;
const { parentElement } = elemClicked;
// A header bar displays with flexbox and 2 cells:
// 1. left: the largest one, contains the toggle button, the filename...
// With a large empty area, so may end up clicking on it, it's the easiest.
// .file-header.file-header--expandable > .file-info
// 2. right: contains the checkbox "viewed" and the 3-dots menu
if (
parentElement.matches(selectorHeaderBar)
|| elemClicked.matches(selectorHeaderBar)
) {
(
elemClicked.querySelector('button')
|| parentElement.querySelector('button')
).click();
}
});
@fregante I just sent a PR. Let me know if it fits the way you work in your project.
IssueHunt