Hover on the `screenshot` to preview #4810

This is already possible with something like Imagus or Image Max URL, using GitHub's README page.

This is already possible with something like Imagus or Image Max URL, using GitHub's README page. (@kidonng)

This feature request is only for the Preferences page. I don't think GitHub's markdown pages need this.

Imagus is only on Chrome. We should consider Safari and Firefox.

This feature request is only for the Preferences page. I don't think GitHub's markdown pages need this.

Browser extensions doesn't work on the preferences page, and unfortunately showing image previews in the preferences popup is not a trivial task. However there are already links to image on the README page, hence my advice.

Imagus is only on Chrome. We should consider Safari and Firefox.

It's also available for Firefox. No alternatives on Safari to my knowledge (maintaining a Safari extension is hard), but you can use Image Max URL with some userscript manager like Userscripts Safari.

Imagus is only on Chrome. We should consider Safari and Firefox.

It's also available for Firefox. Maintaining a Safari extension is hard, but you can use Image Max URL with some userscript manager like Userscripts Safari. (@kidonng)

Thank you for the recommendation, I can give a try with that. But I don't think it's hard to maintain this feature.

But I don't think it's hard to maintain this feature.

Refined GitHub's option page is in browser's popups (as opposed to a standalone page), so it's not very clear how to resize/position the image instead of letting the user zoom the page themselves.

Also it's not common to go through every feature to see what they do. Refined GitHub tries to provide the optimal defaults so typically you don't need to disable many options you don't like. That means a link to the screenshot should be enough most of the time.

Just my two cents.

I think this is generally an issue because of uneven image size. Some screenshots are small, some are super wide and would not be readable in Chrome’s options lightbox, especially if you align them to the cursor as mocked up.

I would kind of like to have a “gallery” view of sorts but it would be extremely noisy and heavy. We could try to add a toggle: 😬

• Show all screenshots

and it might add images below each item, with a nice border and with a loading=lazy attribute.

I would kind of like to have a “gallery” view of sorts

This is neat. That inspires me, we can also put the screenshots in the README directly, hiding inside each feature's description via <details>. But the README parser will be updated so this is likely another standalone proposal/issue.

put the screenshots in the README directly, hiding inside each feature's description via <details>.

I wish. But we don't have control over the loading of images. Opening this repo’s homepage would load 160+ images for a total of almost 50MB. Plus we'd have no control over styling, and details still requires a click to view, so you might as well just open the link.

<img width="1023" alt="Screen Shot" src="https://user-images.githubusercontent.com/1402241/134815872-e4033424-8bc3-4c98-b9dd-7f4622629a02.png">

<img width="457" alt="Screen Shot 1" src="https://user-images.githubusercontent.com/1402241/134815875-5970b8f4-37d2-4277-ac30-efa282c638d2.png">

Tested by running this on the readme

$$('.entry-content li > a[href*="user-images"]').forEach(a => {
    const img = new Image();
    img.src = a.href;
    a.after(img);
})

I wish. But we don't have control over the loading of images. Opening this repo’s homepage would load 160+ images for a total of almost 50MB.

Yup, I realized that when I'm implementing <details> in the options page. [loading="lazy”] doesn't help.

Plus we'd have no control over styling, and details still requires a click to view, so you might as well just open the link.

Similarly, image preview is ruled out. The toggle you suggested is better.

Draft implementation: https://github.com/kidonng/refined-github/tree/options-screenshots

@fregante I see you thumbed up my comment, would you like a PR then?

Feel free to update the issue title once you determined the solution.