Refined-github: On hover over PR “Files changed” tab, show a popup with the list of files

[sideshowbarker]

On hover over the Files changed tab of the page for a pull request, show a popup with the list of files.

For example, when I hover of the Files changed tab of https://github.com/mdn/browser-compat-data/pull/6958, I get a popup showing:

mathml/elements/math.json
mathml/elements/mglyph.json
mathml/elements/mlabeledtr.json
mathml/elements/mo.json
mathml/elements/mspace.json
mathml/elements/mstyle.json
mathml/elements/mtable.json
mathml/elements/mtd.json
mathml/elements/mtr.json

Rationale: It’d be convenient if I didn’t need to actually open the https://github.com/mdn/browser-compat-data/pull/6958/files page just to see the list of which files got touched.

[fregante]

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:

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

[fregante]

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

[yakov116]

..with the following query

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

[yakov116]

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

[fregante]

• it's loaded on hover

[yakov116]

Almost done.

Calling it?

[fregante]

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

[yakov116]

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

[fregante]

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.

[fregante]

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?

[yakov116]

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

No luck.