Refined-github: Pull request / Tab Files - Toggle files by clicking on their header bar

[MrChocolatine]

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

[fregante]

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()
}
}

[MrChocolatine]

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();

  }
});

[MrChocolatine]

@fregante I just sent a PR. Let me know if it fits the way you work in your project.