Media Library: Duplicate files are confusingly labeled the same on List mode

[diegoe]

On Grid mode, elements in your Media Library are labeled by their filename.
On List mode, elements are labeled by their title.

This is confusing if you have uploaded duplicate files.

Possible solutions could be:

• Add the filename beneath the title the List view.
• Always use the filename on both modes.
• Append numbers to the end of the title, like it's done with the filename.

See attached screenshots.

[diegoe]

Grid view

[diegoe]

List view

[helen]

Related, for non-list view: #31395

[wonderboymusic]

30943.diff​ is the best I could come up with, screenshot attached

[helen]

If we're showing the full filename, the extension below seems unnecessary. How does that look with long file names on narrower screens?

[DrewAPicture]

Before (IPhone 6)

[DrewAPicture]

After (iPhone 6)

[DrewAPicture]

Replying to helen:

If we're showing the full filename, the extension below seems unnecessary. How does that look with long file names on narrower screens?

Added 30943_before.png​ and 30943_after.png​ for a before and after with ridiculously long filenames. Also added 30943_grid.png​ for grid-view reference.

[helen]

It's somewhat more scrolling, but it seems okay. Going to drop the extension/mimetype though, as it's very redundant.

[helen]

Made some changes as I was reviewing for commit, some notes about what's about to go in for reference:

• We just use the GUID instead of going through get_attached_file() in some other places in core, so keeping that here for consistency both in code and in output.
• Replacing the contents of the paragraph that contained the extension with this instead, and giving that paragraph a class.

[helen]

In 31857:

Media: Show filename instead of extension in the list table.

This helps differentiate between files with the same or similar image or icon. Extension shows as a part of the filename, and so is not separately needed anymore.

fixes #30943.