On hover over PR “Files changed” tab, show a popup with the list of files #3858

I think that in the past I would have liked to see the file list while leaving a comment, so I wouldn't be opposed to such a feature as long as:

• it's limited to ~10 files
• it's loaded on hover
• it uses the title attribute (.tooltipped is clipped by the tabnav’s overflow:auto)

Example:

<img width="412" alt="Screen Shot 6" src="https://user-images.githubusercontent.com/1402241/103488839-b087e180-4dd5-11eb-849b-9cf3536364b8.png">

<img width="410" alt="Screen Shot 7" src="https://user-images.githubusercontent.com/1402241/103488838-acf45a80-4dd5-11eb-8e70-a22520ae01a6.png">

It probably isn't a very difficult feature if the title attribute can be updated on the fly on every browser.

Maybe it's just:

const tab = select('…')
const getList = cache.function(async () => {
    const data = await api.v4(`…`);
    return data…files;
});
const updateTab = async () => {
    tab.title = (await getList()).join('\n');
}
if (looseParseInt(tab) < 11) {
    tab.title = 'Loading…'
    tab.addEventListener('mouseenter', updateTab, {once: true});
}

Cross-browser testing needed

..with the following query

{
  repository(owner: "sindresorhus", name: "refined-github") {
    pullRequest(number: 3774) {
      files(first: 10) {
        nodes {
          path
        }
      }
    }
  }
}

@fregante You want to load the list on open? Or wait for user to hover?

• it's loaded on hover

Almost done.

Calling it?

Let's see it and maybe we can get more comments from Sindre

https://github.com/sindresorhus/refined-github/tree/unknow-feature-name

Took me longer to get the extension to build (npm issue) then to write the whole thing

Looks good for the most part, but Safari doesn't update the tooltip until you move the cursor, which kills the feature for me:

It probably isn't a very difficult feature if the title attribute can be updated on the fly on every browser.

I just checked, this isn't fixed by dropping the "Loading" part. Safari only creates/updates the tooltip when the mouse moves. I tried dispatching mousemove/enter events but nothing happened. Can you find a non-completely-hacky way to implement it via tooltipped?

Can you find a non-completely-hacky way to implement it via tooltipped?

No luck.

Saving your code in this commit: 0d8be65a26ee5c6005e5e5a8efdf5fc4b23761e2

But closing and deleting the branch