Page MenuHomePhorge

Always ellipsize long filename in file upload dialog
ClosedPublic

Authored by aklapper on Jul 14 2023, 09:27.

Details

Summary

Firefox does not ellipsize long filenames after selecting them in the File Upload dialog; Chromium does (for unknown reasons).

Could hardcode the "remaining" width for the <input> element itself (approx. 340px) based on calculating the CSS widths and margins of all surrounding elements but that is error-prone if CSS for one of those surrounding elements ever changed.
Thus instead use max-width: stretch for the <input> element itself. Per its limited support (see https://caniuse.com/?search=max-width), set also -moz-available (https://bugzilla.mozilla.org/show_bug.cgi?id=1495868) and -webkit-fill-available (see https://bugs.chromium.org/p/chromium/issues/detail?id=611857) aliases.

Closes T15553

Test Plan
  • Both in Firefox and in Chromium, go to an existing task, select "File Upload", select a file with a long name.
  • See that the filename is now correctly ellipsized in Firefox.
  • See no changes in Chromium.

Diff Detail

Repository
rP Phorge
Branch
T15553FileEllipse (branched from master)
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 673
Build 673: arc lint + arc unit

Event Timeline

Thanks! What do we think about affecting only file upload buttons? Example:

.aphront-form-input > input[type="file"] {
  ...
}

It seems the above selector works in Chrome/FF/IE - (IE10/9/8/7).

https://stackoverflow.com/a/25825731

Make change less intrusive/dangerous by reducing CSS scope to "type=file" input

Thanks for finding that! Yes, makes a lot of sense to reduce that scope

Rebased with master and tested :) Nice thanks! Sorry for waiting

lgtm

This revision is now accepted and ready to land.Jul 28 2023, 17:25