1705500 - FxA "sent tab to another device" menu should wrap device names

Status: VERIFIED FIXED

(Firefox :: Menus, defect, P2)

Description

[Mike Conley (:mconley) (:⚙️)]

Attachment: image.png

In bug 1704045, we clamped the width of the FxA menu to the same width as the AppMenu in order to share the same cropping behaviour for long email addresses.

One of the results of this is that subviews of the FxA panel have similar clamping, so for the device list, long device names get cropped too.

UX has proposed a change where we word-wrap the device names in the FxA panel, and cropping for anything that overflows from that.

Comment 1

[Blake Winton (:bwinton) (:☕️)]

Attachment: Current behaviour.png

Comment 2

[Mike Conley (:mconley) (:⚙️)]

mkaply very helpfully pointed out that Firefox has support for the prefix'd -webkit-line-clamp CSS property, which might help here: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Guidelines from UX on long lines in our panels:

• Items on submenus should wrap up to two lines, and after that they truncate (an example of this is device names in the synced tabs submenu)
• An exception to this would be website names, which should just truncate on their first line (an example of this is the list of tabs in the Synced tabs submenu, or the list of bookmarked sites on the Recent bookmarks submenu).

Comment 4

[Bernard Igiri]

I'm having trouble duplicating this issue. Does this only occur on the Page Actions menu? Because that menu is no longer available in Proton from what I can tell. The right click menu on the tab doesn't appear to have a width limit, so long device names just stretch the menu to include the full text.

Comment 5

[Blake Winton (:bwinton) (:☕️)]

No, it occurs on the FxA Menu (which appears when you log in)… Ping me on Monday, and I'll show you on Zoom.

Comment 6

[Bernard Igiri]

Attachment: Bug 1705500 - Added word wrap to send tab to another device menu r=mconley

Added wrap property to toolbaritem for the send tab to another device menu item.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/360f7d0ede58
Added word wrap to send tab to another device menu r=mconley

Comment 8

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/360f7d0ede58

Comment 9

[Giorgia Nichita, Release Desktop QA]

I have reproduced the issue on an affected Nightly build 89.0a1 (2021-04-15).
The fix was verified on 90.0b2 (2021-06-01). Tests were performed on Ubuntu 20.04, Windows 10 and macOS 10.15. Thank you!