1365434 - input type=file layout for long filenames (ellipsis / extension)

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Karl Dubost💡 :karlcow]

Attachment: Rendering in Firefox, Safari and Opera (left to right)

I'm just creating this issue as a record of a couple of issues we get in Web Compatibility. 

I created a simple test on
https://codepen.io/webcompat/pen/xdPyrv


The issue is with and long filename which can't fit in the box once selected.

<input type="file">

All browsers have different strategies on desktop with regards to this.

* Firefox (Gecko): 
  - Adds an ellipsis in the middle 
  - Doesn't show the end of the filename
* Safari (WebKit):
  - Adds an ellipsis in the middle
  - Shows the end of the filename WITHOUT the extension
  - Adds an icon relevant to the type of the file
* Chrome (Blink):
  - Adds an ellipisis in the middle
  - Shows the end of the filename WITH the extension

I'm not sure it is something we have to fix, but I would say that Firefox choice is probably the less sensible in terms of UI. Specifically for not showing the end of the filename.


Some of the web compatibility issues.
https://webcompat.com/issues/6435
https://webcompat.com/issues/5620
https://webcompat.com/issues/6764

Comment 1

[Kaiido]

If I may add my 2 cents, FF behavior looks more like a bug than a real feature.

The truncating operation kicks in at what seems to be random range, and the end characters are cut off.

https://i.stack.imgur.com/W2qJj.png

https://jsfiddle.net/532zu6xx/

Comment 2

[Mats Palmgren (inactive)]

Yes, this was just a bug in Firefox.  It's been fixed in bug 1495153.